Единое окно доступа к образовательным ресурсам

Компьютерная графика и web-дизайн: Учебное пособие

Голосов: 7

Учебное пособие содержит основные понятия, терминологию и справочные материалы. Изложен теоретический материал по растровой и векторной графике. Рассмотрены особенности подготовки графики для печати и web-изданий в профессиональном редакторе Photoshop. Пособие предназначено для студентов второго курса специальностей 030602 "Связь с общественностью" и 030901 "Издательское дело и редактирование" вечернего, заочного и дневного отделений, а также может быть полезно студентам других гуманитарных специальностей.

Приведенный ниже текст получен путем автоматического извлечения из оригинального PDF-документа и предназначен для предварительного просмотра.
Изображения (картинки, формулы, графики) отсутствуют.
    ритмы, позволяющие демонстрировать произвольную или заданную последова-
тельность рекламных баннеров на удаленной web-странице.
     В таблице 2 приложения приведен список наиболее популярных в Интернете
служб бесплатного хостинга с кратким описанием предлагаемых ими условий
размещения страничек.
     Условия публикации web-страниц, как правило, представлены непосредст-
венно на серверах, предлагающих данную услугу. Помимо дискового пространст-
ва многие подобные службы предлагают пользователю также бесплатный почто-
вый ящик, некоторые к тому же создают для Вашего ресурса полноценный домен
третьего уровня, вида http://www.your_site.server.com или .ru.
     Путь второй. Хостинг у провайдера
     Большинство интернет-провайдеров предлагают вместе с какой-либо из своих
услуг дисковое пространство под домашнюю страничку. Этот вариант, безуслов-
но, значительно лучше бесплатного хостинга: во-первых, провайдер несет ответ-
ственность за качество и бесперебойность работы собственного сервера, во-
вторых, на страничке не будет чужой и не нужной рекламы, а почтовый ящик не
станет переполняться нежелательной корреспонденцией, в-третьих, всегда можно
позвонить в службу технической поддержки и проконсультироваться с дежурным
администратором по любому вопросу. Однако не лишен этот подход и очевидных
недостатков. Далеко не все провайдеры позволяют использовать на своих серве-
рах CGI-скрипты, имя странички будет достаточно длинным и неудобочитаемым.
При временном или полном отказе от услуг провайдера удаляется сайт «клиента».
     Путь третий. Платный хостинг
     Заинтересованность сервера в бесперебойности своей работы, создаёт хорошие
условия для развития сайта. Отсутствие ограничений даёт возможность творческо-
го подхода к своему проекту на основе современных технологий. В стоимость ус-
луг, как правило, входит регистрация для страницы домена третьего уровня, благо-
даря чему ее адрес будет выглядеть как http://www.your_site.server.com или .ru, что
более престижно.
     Путь четвертый. Хостинг у знакомых.
     По данной тематике рекомендуется обратиться к сайту профессионально за-
нимающихся web-дизайном. На данном сайте размещён обновляемый материал о
службах, предоставляющих бесплатный Интернет, помимо этого размещены ста-
тьи посвященные проблемам разработки сайтов [8]. В таблице 2 приложения
представлены серверы, предоставляющие бесплатный хостинг.
                  2.2.4. Основные «постулаты» web-дизайна
   1. В современном Интернете принято молчаливое соглашение о том, что про-
фессиональный сайт должен корректно отображаться при экранном разрешении
640×480 точек с цветовой палитрой в 256 цветов.
   2. При отображении html-документа, рассчитанного на просмотр с экранным
разрешением 800×600 точек, на компьютере, настроенном на разрешение 640×480
точек, в нижней части главного окна браузера появляется горизонтальная полоса
прокрутки, что значительно затрудняет изучение документа.

                                          90


    3. Для того чтобы web-страница правильно отображалась при использовании
экранной палитры в 256 цветов, в случае включения в состав документа графиче-
ских элементов старайтесь представлять максимально возможное количество гра-
фики в формате GIF и лишь самые необходимые изображения – в формате JPEG.
        ПРИМЕЧАНИЕ
     Рекомендуется проверить корректность отображения содержащейся в html-
документе информации при изменении экранных настроек в браузерах как
Microsoft Internet Explorer, так и Netscape Navigator.
    4. Web-страница должна идентично отображаться в Microsoft Internet Explorer
и Netscape Navigator, причем весьма желательно – в последней и предпоследней
версиях данных программ.
    5. Созданная web-страница должна обязательно включать навигационные эле-
менты, охватывающие все разделы Вашего сайта, причем эти элементы должны
всегда быть на виду. Их расположение следует выбирать, исходя из максимально-
го удобства для пользователя. Если они размещены в верхней части страницы и
пропадают из поля зрения после скроллинга (прокрутки экрана вниз), не забудьте
продублировать их в нижней части документа. Графические ссылки и активные
элементы следует повторить в тестовой форме в расчете на пользователей, в брау-
зерах которых отключено отображение графики или отсутствует поддержка Java.
    6. Старайтесь выдержать весь проект в одном дизайнерском стиле, оформляй-
те различные его разделы таким образом, чтобы художественное решение было
общим для всего сайта.
    7. Не используйте на одной web-странице более трех различных шрифтов,
включая шрифты, применяемые при создании графических элементов.
    8. Используйте только корректные цветовые схемы и не применяйте при
оформлении документов более трех различных цветов.
     Исключение здесь можно сделать разве что для полутонов одного и того же
цвета, применяемых, например, при контекстном выделении строк в информаци-
онных таблицах, да и то этим приемом лучше не увлекаться.
     С точки зрения человеческой психологии сочетание цветов может в значи-
тельной степени влиять на восприятие зрителем представленной на картинке ин-
формации. Именно поэтому при подборе цветового сочетания, например текста с
фоном, рекомендуется исходить из соображений собственного здравого смысла:
текст должен без труда читаться, при этом читатель не должен напрягать зрение,
его глаза не должны уставать. Далее приведен перечень цветовых сочетаний ри-
сованного объекта или текста с фоном в порядке ухудшения зрительного воспри-
ятия:
        1) синее на белом;                             7) красное на белом;
        2) черное на желтом;                           8) оранжевое на черном;
        3) зеленое на белом;                           9) черное на пурпурном;
        4) черное на белом;                            10) оранжевое на белом;
        5) зеленое на красном;                         11) красное на зеленом.
        6) красное на желтом;
    Корректность сочетания друг с другом всех остальных цветов и оттенков
проверяйте: переведите изображение в формат «grayscale» (256 оттенков серого) и
                                        91


посмотрите, читается ли в таком виде текст, контрастно ли выглядят нарисован-
ные элементы. Если нет – принятое цветовое решение лучше пересмотреть. В лю-
бом случае для текста рекомендуется выбирать традиционный, привычный глазу
черный цвет, в качестве фона лучше всего использовать тусклую, едва различи-
мую заливку произвольного оттенка. «Классическим» вариантом остаётся: чер-
ным по белому.
                          2.2.5. Технологии web-дизайна
                     Логическая и физическая структура сайта
     Каждый ресурс Интернета, от любительской домашней странички до большо-
го информационного портала, содержит несколько тематических рубрик, соеди-
ненных между собой гиперсвязями. Ссылки на все разделы сайта с краткими опи-
саниями приводятся на первой, стартовой странице, которой присваивается имя
index.htm (*.html). Если тематические рубрики содержат собственные подразделы,
каждая из них также имеет свою стартовую страницу, называющуюся index.html.
Такое имя файла рекомендуется присваивать всем стартовым документам сайта,
поскольку в противном случае при обращении к какому-либо разделу посредст-
вом сокращенного URL без указания названия стартовой страницы (например,
http://www.mysite.narod.ru/photos/ вместо http://www.mysite.narod.ru/grafika/page1.html)
браузер отобразит не саму web-страницу, а перечень хранящихся в данной папке
файлов.
     ПРИМЕЧАНИЕ
     Рекомендуется размещать все графические изображения, являющиеся эле-
ментами проекта, в отдельной папке с названием «Images», расположенной в кор-
невой директории сайта. Такой подход позволит обновлять хранящиеся в других
тематических разделах документы HTML без переноса графики, использовать од-
ни и те же графические файлы во всех разделах сайта и при необходимости уда-
лять целые директории.
     Подобный набор тематических рубрик с распределенными по соответствую-
щим разделам документами и заранее спроектированными гиперсвязями между
всеми страницами ресурса и называется логической структурой сайта.
     Физическая структура, напротив, подразумевает алгоритм размещения фи-
зических файлов по поддиректориям папки, в которой опубликован сайт. Пример
сравнения логической и физической структур одного и того же ресурса Интернета
показан на Рис. 73.
     Очевидно, что логическая и физическая структуры могут не совпадать, по-
скольку в общем случае физическая структура ресурса разрабатывается, исходя из
удобства размещения файлов. Однако более или менее точное сохранение порядка
следования логических разделов в физической структуре сайта позволит избежать
путаницы при последующем дополнении и обновлении материалов.
    Для того чтобы все гиперссылки на домашней страничке или web-сайте рабо-
тали корректно, все документы открывались правильно и браузер не выдавал
ошибок при обращении к каким-либо разделам ресурса, при создании его физиче-
ской структуры следует соблюдать несколько простых правил:

                                            92


                    Рис. 73. Логическая и физическая структура сайта
   1. Назначайте имена директорий, имена и расширения документов HTML и
графических файлов с использованием символов только латинского алфавита и
только в строчном регистре. Старайтесь, чтобы имена созданных Вами файлов и
директорий не превышали по длине восьми символов.
   2. При присвоении имен файлов документам HTML старайтесь следить за тем,
чтобы эти имена были «смысловыми», так легче ориентироваться в содержании
страниц.
    Для того чтобы облегчить процесс обновления web-страниц, дополнения раз-
делов или создания новых рубрик, заведите средство документирования проекта –
любую электронную таблицу, созданную, например, в Microsoft Excel, или просто
разграфленную тетрадку, в которую записывайте соответствие элементов физиче-
ской структуры Вашего проекта его логической структуре. До тех пор пока коли-
чество составляющих Ваш сайт файлов относительно мало, это может показаться
излишним, когда же оно перевалит за первые два десятка, в обилии html-
документов и графических элементов будет легко запутаться, особенно если соз-
даётся несколько проектов одновременно. Пример оформления такого средства
документирования показан в таблице 4.

                                          93


                                                                            Таблица 4
               Пример оформления средства документирования проекта
Имя файла            Директория                      Описание           Дата создания/
                                                                        изменения
index.html     /mysite.narod             Стартовая    страница    сайта 1.11.2008
                                       http://www.mysite.narod.ru
index.html     /mysite.narod/ja          Стартовая страница раздела «О 5.11.2008
                                       себе»
  ja.html      /mysite.narod/ja          О себе                         5.11.2008

index.html     /mysite.narod /hobby     Стартовая страница      раздела 5.11.2008
                                       «Увлечения»
 hobi.html     /mysite.narod /hobby     Увлечения                       6.11.2008

index.html     /mysite/grafika          Стартовая страница      раздела 6.11.2008
                                       «Альбом работ»

corel.html     /mysite/grafika            Работы в CorelDRAW            6.11.2008

visitka.jpg    /mysite.narod/images       Визитка                       12.11.2008

otkritka.jpg   /mysite.narod/images       Открытка                      12.11.2008

  photo-
shop.html      /mysite.narod/grafika      Работы в Photoshop            20.11.2008

reklama.jpg    /mysite.narod/images       Реклама                       20.11.2008

flash.html     /mysite/grafika            Работы в Flash                20.11.2008


                                                      Можно сделать вывод, что фи-
                                                  зическая структура сайта скрыта от
                                                  посетителей ресурса: они могут на-
                                                  блюдать только логическую струк-
                                                  туру, причем именно так, как она
                                                  представлена при помощи элементов
                                                  навигации. Строение системы нави-
                                                  гации должно если не полностью
                                                  повторять, то хотя бы максимально
                                                  соответствовать разработанной ло-
                                                  гической структуре сайта.
                                                           Заглавная страница
                                                    Как правило, каждый сайт тща-
                                                тельно прорабатывает свою старто-
                                                вую страницу. Именно она является
        Рис. 74. Пример оформления              «лицом» сайта. Иначе её называют
заглавной страницы студенческого отчёта      заглавной. В некоторых случаях
       по компьютерной графике               94


заглавная страница (splash) содержит логотип, графику и выбор языка, который
уже направляет на стартовую страницу в соответствии с указанным языком.
    При обращении к сайтам, не оснащенным splash-страницей, первым отобра-
жается стартовый документ, включающий какое-либо информационное наполне-
ние, элементы навигации и иногда анонсы составляющих данный ресурс темати-
ческих рубрик. На Рис. 74 показан пример оформления заглавной страницы учеб-
ного сайта.
                Динамическая и статическая компоновка сайта
     Современные видеокарты поддерживают несколько произвольно устанавли-
ваемых видеорежимов, характеризующихся экранным разрешением и количест-
вом цветов, используемых при отображении информации на экране компьютера.
С помощью встроенных функций операционной системы пользователь может ус-
тановить несколько стандартных значений экранного разрешения, например
640×480, 800×600, 1024×768, 1152×864, 1280×1024 или 1600×1200 точек. При от-
крытии в одном и том же браузере web-страницы она может отображаться по-
разному в зависимости от используемого посетителем сайта экранного разреше-
ния.
     Для того чтобы избежать «съезжания» элементов html-документа друг отно-
сительно друга, а также деформации web-страницы в целом, все компоненты web-
страницы заключаются в соответствующие ячейки невидимой таблицы, при этом
каждому объекту назначается одно, строго определенное положение.
     Данной таблице можно назначить строго определенную ширину в пикселях,
например, 640 точек, после чего жестко позиционировать ее по центру экрана или
«прижать» к левому его краю. Такой вариант компоновки сайта назовём стати-
ческим, поскольку ширина таблицы не меняется в зависимости от экранного раз-
решения. При изменении параметров экрана не происходит ни малейшего смеще-
ния элементов дизайна страницы.
     Другой подход – когда ширину невидимой таблицы, содержащей фрагменты
web-страницы, задают в процентах от текущей ширины экрана. При увеличении
экранного разрешения таблица «растягивается» по горизонтали и все размещен-
ные в ее ячейках элементы, позиционированные либо по центру, либо по краям
столбцов, смещаются согласно установленному алгоритму. В силу того, что пара-
метры таблицы изменяются в зависимости от настроек экрана, такой принцип
компоновки html-документа назовём динамическим. И тот и другой подход обла-
дает достоинствами и недостатками, которые перечислены ниже.
     Статическая компоновка страницы
     Достоинства. Простота алгоритма верстки документа. Данный вариант ком-
поновки сайта в большинстве случаев (при соблюдении ряда дополнительных ус-
ловий) позволяет добиться идентичности отображения html-документа в браузе-
рах Microsoft Internet Explorer и Netscape Navigator.
     Недостатки. При отображении документа на компьютере с высоким экран-
ным разрешением по краям экрана или с правой его стороны остается пустое поле.



                                       95


    Динамическая компоновка страницы
    Достоинства. Документ растягивается по всей ширине экрана, не остается
неиспользованных пустых полей.
    Недостатки. Сложность верстки и отладки страницы, весьма часто проявля-
ется неадекватность отображения таких документов в браузерах Microsoft Internet
Explorer и Netscape Navigator.
    ПРИМЕЧАНИЕ
    Используемые в командах HTML значения пикселей (условных точек) подра-
зумевают физические размеры точки экрана пользователя и зависят от типа его
монитора.
                            Элементы web-страницы
    Любая web-страница содержит определенный набор стандартных элементов,
являющихся обязательными компонентами каждого ресурса Интернета. Безус-
ловно, ассортимент и количество подобных объектов могут варьироваться в зави-
симости от тематической направленности сайта, объема опубликованных на нем
материалов, а также от целей и задач, которые ставит перед собой создатель дан-
                                              ного ресурса. Компоновка таких эле-
                                              ментов, проектирование их взаимно-
                                              го расположения и составляет одну из
                                              главных задач web-мастера.
                                                  Первым элементом web-страницы,
                                              который нам предстоит рассмотреть,
                                              является ее заголовок. Он может быть
                                              выполнен как в текстовом, так и в
                                              графическом варианте, однако и в
                                              том и в другом случае он должен
                                              располагаться в верхней части доку-
                                              мента. Иногда с заголовком совме-
                                              щают меню выбора кодировки ки-
                                              риллицы и кнопки для перехода с
      Рис. 75. Пример компоновки web-страницы русскоязычной на англоязычную
   с левым позиционированием элементов нави- версию сайта, если данный web-
                      гации                   ресурс представлен на двух языках.
                                              Непосредственно под заголовком до-
кумента, как правило, располагается пространство, отведенное для размещения
рекламного баннера. Стандартный размер баннеров, публикуемых под заголовком
документа, составляет обычно 468×60 точек. Если используется статический
принцип компоновки страницы, ширина заголовка документа будет составлять
приблизительно 640 пикселей: это значение обусловлено, прежде всего, необхо-
димостью обеспечить корректное отображение документа на мониторах с экран-
ным разрешением 640×480 точек и избежать появления горизонтальной полосы
прокрутки, затрудняющей его просмотр. Ширина баннера в этом случае будет
значительно меньше ширины заголовка, благодаря чему в той части страницы, где
планируется отвести место под рекламу, образуется незанятое пространство, ко-
                                         96


торое можно заполнить логотипом компании-владельца данного сайта или ссыл-
кой на сервер, осуществляющий web-хостинг. Логотип необходим далеко не все-
гда: как правило, он включается в состав web-страницы, если сайт имеет коммер-
ческую направленность.
     Основную часть документа занимает текстовое поле – участок, где размеща-
ется смысловое наполнение страницы: содержательный информационный текст и
иллюстрации. Расположение текстового поля зависит от размещения остальных
элементов документа.
     Следующей обязательной составляющей частью web-страницы являются эле-
менты навигации – гиперссылки, связывающие данный документ с другими раз-
делами сайта. Элементы навигации могут быть выполнены в виде текстовых
строк, графических объектов, то есть кнопок, либо активных компонентов, на-
пример Java-апплетов. Последние представляют собой те же кнопки, которые, в
отличие от «традиционных», умеют реагировать на движения мыши, выполняя
при наведении на них курсора какие-либо несложные действия (включение под-
светки, создание эффекта «нажатия», изменение формы и т. д.). Располагать эле-
менты навигации следует таким образом, чтобы они всегда были «на виду», «под
рукой». Наиболее устоявшимся подходом является размещение элементов нави-
гации у левой границы страницы.
     В нижней части документа принято публиковать информацию о разработчи-
ках сайта и адрес электронной почты, по которому посетители ресурса могут
направить владельцам странички свои отклики, предложения и пожелания. Если
web-страница является стартовым документом, в нижней ее части также разме-
щают счетчик посещений – небольшой сценарий, вызывающий установленный на
сервере CGI-скрипт, который фиксирует каждое открытие документа в браузере
пользователей, изменяя значение индикатора счетчика.
     Счетчик посещений устанавливается только на первой странице, вызываемой
при обращении к сайту, в остальных документах ресурса он отсутствует. Не реко-
мендуется также размещать на одной странице несколько разных счетчиков.
     Пример компоновки сайта, содержащего полный набор описанных выше со-
ставляющих, показан на Рис. 75. В нем выбрано позиционирование элементов на-
вигации по левой границе документа.
     На практике часто встречаются web-сайты, в дизайне которых элементы нави-
гации позиционированы по правой границе экрана. В этом случае текстовое поле
смещается влево, остальные компоненты документа располагаются исходя из
принципа максимальной эстетичности их сочетания
     Элементы навигации можно разместить не только вблизи правой и левой гра-
ниц страницы, но и в верхней части документа. В этом случае все объекты стра-
ницы гармонично «вписываются» в заданную ширину невидимой таблицы, при
этом подготовка самой таблицы значительно упрощается. Единственным недос-
татком подобного подхода является необходимость продублировать элементы на-
вигации в нижней части документа, поскольку при вертикальной прокрутке стра-
ницы исчезают за верхней границей экрана.
     Приведённые в данном разделе компоновки страниц являются обобщением
наиболее часто используемых приёмов вёрстки.
                                       97


      2.3. ЗАКЛЮЧЕНИЕ. СОЗДАНИЕ ПРОЕКТА СВОЕГО САЙТА
    Последовательность действий по разработке web-сайта сводится к следующе-
му алгоритму:
   · Постановка целей и определение основных задач.
   · Создание списка будущих тематических разделов.
   · Разработка логической и физической структуры ресурса.
   · Подготовка эскиза дизайна, компоновки сайта, невидимой верстальной таб-
лицы.
   · Подготовка текстовых материалов.
   · Подготовка графических материалов.
   · Экспорт векторных рисунков в растровый формат, оптимизация картинок.
   · Создание шаблонов web-страниц.
   · Сборка web-страниц и отладка кода.
   · Проверка идентичности отображения web-страниц с различным экранным
разрешением и цветовой палитрой и в различных браузерах.
                         ВЫПОЛНИТЕ УПРАЖНЕНИЕ
                         Создание web-страницы в блокноте
    В разделе «Web-технологии» (стр. 79) рассмотрены возможности по созданию
публикаций для Интернета. Базовая технология – это HTML.
    Создавая страницу с помощью редактора Блокнот, следует задать ей расши-
рение *.html, иначе этот документ получит по умолчанию расширение *.txt и бу-
дет интерпретироваться, как текстовой файл. Создадим небольшую автобиогра-
фическую страницу. Пример выполненной работы приведён на Рис. 76.
    1. Запишите главный тэг, указывающий на технологию создания данного
HTML документа.
    <html> Обязательно в конце документа будет стоять закрывающий тэг
</html>. Разница заключается в наклонной палочке перед тэгом (слэш).
    2. Обозначьте заголовок страницы (отображается в самом верху браузера).
Для этого запишите заголовочный открывающий тэг, затем название.
    <head>
    <title>Автобиография</title>
    </head>
    3. После того, как проставили закрывающий тэг, приступите к основному тек-
сту.
    <body>
    Текст документа
    </body>
    Для переноса текста на другую строку используйте тэг <br>, в отличии от
других тэгов у него нет закрывающей пары.




                                       98


           Рис. 76. Слева – итоговая страница, открытая браузером Mozilla Firefox,
         справа представлен гипертекст данной страницы, набранный в текстовом
                                   редакторе Блокнот
   ПРИМЕЧАНИЕ
    <тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1> Только такая очередность за-
крывающих тэгов верна: тэг, который открыли первым, закрываем последним,
второй – предпоследним и т.д.
    4. Чтобы вставить фотографию в страницу, необходимо указать следующие
тэги:
    <img src="foto.jpg">
    Вместо foto.jpg укажите имя своей картинки (Sacha.gif, main.png). Всё распо-
ложенное между кавычками – ссылка (путь к картинке). При этом картинка нахо-
дится в том же каталоге (директории, папке), в котором лежит и HTML-документ.
Если картинка лежит в поддиректории (в папке, которая лежит в основной пап-
ке), то ссылка на неё будет выглядеть иначе:
    <img src="image/foto.jpg">
    Если картинка лежит на уровень выше, а документ находится в поддиректо-
рии, то ссылка на неё будет такой:
    <img src="../foto.jpg"> и т.п.
    Чтобы окрасить текст в другой цвет, необходимо заключить в тэг<font
color="#CC0000"> Текст </font> Цветовые вариации смотрите в таблице 4 при-
ложения.
                                             99



    
Яндекс цитирования Яндекс.Метрика