Волгоградская областная универсальная научная библиотека им. М. Горького ВОЛГОГРАДСКИЙ ЦЕНТР ОТКРЫТОГО ДОСТУПА К ИНТЕРНЕТ Волгоград, 2005 © Ульева Людмила, 2004 г.
Что такое web-дизайн? Любой ресурс, опубликованный во Всемирной сети, это прежде всего художественное произведение, сложный комплекс инженерно-дизайнерских решений. Процесс создания такого произведения и называется web-дизайном. Web-дизайн это творчество, причем творчество ярко выраженное. Творите, и рано или поздно созданный вами проект найдет заслуженное признание многомиллионной аудитории пользователей Интернета.
Зачем это нужно? Домашняя страничка Основной движущий фактор - стремление разместить в Сети информацию, которую впоследствии можно использовать при поиске работы или интерактивном общении с другими людьми посредством Интернета. Может служить средством для публикации: научных исследований автора;научных исследований автора; литературных произведений;литературных произведений; рисунков;рисунков; музыки.музыки.
Зачем это нужно? Некоммерческий и коммерческие сайты Некоммерческий сайт: размещение информации; размещение информации; публикация работ;публикация работ; поиск партнеров, единомышленников.поиск партнеров, единомышленников. Коммерческий сайт: продавать товары и услуги через интернет; продавать товары и услуги через интернет; формировать благоприятный имидж фирмы или ее продукции; формировать благоприятный имидж фирмы или ее продукции; предоставлять информации о фирме, ее продукции и услугах; предоставлять информации о фирме, ее продукции и услугах; получать информацию от клиентов; получать информацию от клиентов; находить деловых партнеров, новых сотрудников, инвесторов и т.д. находить деловых партнеров, новых сотрудников, инвесторов и т.д.
Зачем это нужно? Необходимый инструментарий Для полноценной работы web-дизайнеру необходимы: среда разработчика документов HTML (WYSIWYG- peдактор); среда разработчика документов HTML (WYSIWYG- peдактор); редактор векторной графики (CorelDraw 9 или выше); редактор векторной графики (CorelDraw 9 или выше); редактор растровой графики (Adobe Photoshop версии 5.0 или выше); редактор растровой графики (Adobe Photoshop версии 5.0 или выше); броузер Microsoft Internet Explorer версии 5.0.; броузер Microsoft Internet Explorer версии 5.0. и выше; броузер Netscape Navigatorерсии 4.01 и выше. броузер Netscape Navigatorерсии 4.01 и выше. оптимизатор растровых изображений GIF; оптимизатор растровых изображений GIF; оптимизатор растровых изображений JPEG; оптимизатор растровых изображений JPEG; FTP-клиент, рекомендуется программа CuteFTP. FTP-клиент, рекомендуется программа CuteFTP. перекодировщик кириллицы (программы ConvHTML и SNK DECode) перекодировщик кириллицы (программы ConvHTML и SNK DECode)
Основные постулаты web-дизайна 1)В Интернете принято молчаливое соглашение о том, что профессиональный сайт должен корректно отображаться при экранном разрешении 640x480 точек с цветовой палитрой в 256 цветов. Примечание. При отображении html-документа, рассчитанного на просмотр с экранным разрешением 800x600 точек, на компьютере, настроенном на разрешение 640x480 точек, в нижней части главного окна броузера появляется горизонтальная полоса прокрутки. Совет. Для правильного отображения web-страницы (при экранной палитре в 256 цветов), включайте в состав документа максимально возможное количество графики в формате GIF и лишь самые необходимые изображения - в формате JPEG Совет. Для правильного отображения web-страницы (при экранной палитре в 256 цветов), включайте в состав документа максимально возможное количество графики в формате GIF и лишь самые необходимые изображения - в формате JPEG.
Основные постулаты web-дизайна 2) Web-страница должна идентично отображаться в Microsoft Internet Explorer и Netscape Navigator, причем весьма желательно в последней и предпоследней версиях данных программ. 3) Все страницы web-сайта, а также ee интегрированные в них графические и интерактивные элементы должны быть минимальными по объему. 4) Созданная вами web-страница должна обязательно включать навигационные элементы, охватывающие все разделы вашего сайта, причем эти элементы должны всегда быть на виду.
Основные постулаты web-дизайна 5) Старайтесь выдержать весь проект в одном дизайнерском стиле, оформляйте различные его разделы таким образом, чтобы общее художественное решение было схожим для всего сайта. 6) Не используйте на одной web-странице более трех различных шрифтов, включая шрифты, применяемые при создании графических элементов. 7) Используйте только корректные цветовые схемы и не применяйте при оформлении документов более трех различных цветов.
Основные постулаты web-дизайна Перечень цветовых сочетаний рисованного объекта или текста с фоном в порядке ухудшения зрительного восприятия: синее на белом; черное на желтом; зеленое на белом; красное на зеленом черное на белом зеленое на красном; красное на желтом красное на белом оранжевое на черном черное на пурпурном оранжевое на белом
Технологии web-дизайна Логическая и физическая структура сайта Ссылки на все разделы сайта с краткими анонсами их содержимого приводятся на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Подобный набор тематических рубрик с распределенными по соответствующим разделам документами и заранее спроектированными гиперсвязями между всеми страницами ресурса и называется логической структурой сайта. Физическая структура, напротив, подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован ваш сайт.
Технологии web-дизайна Логическая и физическая структура сайта Рис. 1. Сравнение логической и физической структуры сайта
Технологии web-дизайна Логическая и физическая структура сайта Рекомендуется размещать все графические изображений, являющиеся элементами проекта, в отдельной папке с названием «Images», расположенной в корневой директории сайта. Такой подход позволит: обновлять хранящиеся в других тематических разделах документы HTML без переноса графики; обновлять хранящиеся в других тематических разделах документы HTML без переноса графики; использовать одни и те же графические файлы во всех разделах сайта;использовать одни и те же графические файлы во всех разделах сайта; при необходимости удалять целые директории. при необходимости удалять целые директории.
Технологии web-дизайна Средство документирования проекта Имя файлаДиректорияОписание Дата посл. измен. index.html/vounbСтартовая страница сайта user.htm/vounb/userРаздел «Читателю» instructions. htm user/instructions. htm Правила пользования library.jpg/vounb/imgФотография библиотеки
Технологии web-дизайна Заглавная страница Один из критериев, руководствуясь которым можно разделить различные web-сайты на две основные категории: наличие заглавной страницы (splash); наличие заглавной страницы (splash); отсутствие таковой. отсутствие таковой. Рис. 2. Пример заглавной страницы
Технологии web-дизайна Динамическая и статическая компоновка сайта Статическая компоновка - компоновка сайта, при котором ширина верстальной таблицы не меняется в зависимости от экранного разрешения (все компоненты web-страницы заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту назначается одно, строго определенное положение) Статическая компоновка - компоновка сайта, при котором ширина верстальной таблицы не меняется в зависимости от экранного разрешения (все компоненты web-страницы заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту назначается одно, строго определенное положение). Достоинства. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с экранным разрешением 640x480 точек, вы можете быть уверены, что при изменении пользовательских экранных настроек элементы дизайна не «поплывут». Недостатки. При отображении документа на компьютере с высоким экранным разрешением по краям экрана или с правой его стороны остается заметное пустое поле.
Технологии web-дизайна Динамическая и статическая компоновка сайта Принцип компоновки html-документа, при котором параметры таблицы изменяются в зависимости от настроек экрана можно назвать динамическим. При динамической компоновке - ширину невидимой таблицы, содержащей фрагменты web-страницы, задают в процентах от текущей ширины экрана. Достоинства. Документ растягивается по всей ширине экрана, не остается неиспользованных пустых полей. Недостатки. Сложность верстки и отладки страницы, весьма часто проявляется неадекватность отображения таких документов в броузерах Microsoft Internet Explorer и Netscape Navigator
Элементы web-страницы Рис. 3. Элементы web-страницы Контент ЗАГОЛОВОК Содержательный информационный текст и иллюстрации Элементы навигации Информация о разработчиках и адрес электронной почты Счетчик посещений
Элементы web-страницы Рис. 4. Пример оформления страницы с верхним расположением элементов навигации показан
С чего начать? 1)Постановка целей и определение основных задач. 2)Просмотр и анализ размещенных в сети сайтов аналогичной тематики. 3)Создание списка будущих тематических разделов. 4)Разработка логической и физической структуры ресурса. 5)Подготовка эскиза дизайна, компоновки сайта, невидимой верстальной таблицы. 6)Подготовка текстовых материалов. 7)Подготовка и оптимизация графических материалов. 8)Создание шаблонов web-страниц. 9)Сборка web-страниц и отладка кода. 10) Проверка идентичности отображения web-страниц с различным экранным разрешением и цветовой палитрой и в различных броузерах.
Десять советов web-дизайнеру 1.Не перегружайте дизайн декоративными элементами. Излишнее количество графики: «утяжеляет» страницу, увеличивая время ее загрузки в броузер;«утяжеляет» страницу, увеличивая время ее загрузки в броузер; усложняет процесс обновления ресурса;усложняет процесс обновления ресурса; делает практически невозможным внесение изменений в компоненты оформления страниц;делает практически невозможным внесение изменений в компоненты оформления страниц; затрудняет восприятие информации.затрудняет восприятие информации. 2. Сделайте вашей настольной книгой орфографический словарь русского языка. Обилие ошибок в тексте сайта несказанно раздражает пользователей.
Десять советов web-дизайнеру? 3) Обращайте пристальное внимание на мелкие детали оформления страницы: кнопки навигации,кнопки навигации, разделительные линии,разделительные линии, маркеры списков.маркеры списков. Незначительная на первый взгляд неаккуратность в мелочах моментально испортит общее впечатление о ресурсе. 4) Не публикуйте иллюстрации и тексты, взятые с чужих web-страниц, если только на них специально не указано, что данные элементы можно свободно копировать и использовать. То же самое касается и концептуальных дизайнерских решений.
Десять советов web-дизайнеру? 5) Не злоупотребляйте клипартами и шаблонами. Если вы используете готовые решения (клипарт или готовый шаблон), внесите в его дизайн или компоновку хотя бы незначительные изменения. 6) Не создавайте однотипные дизайнерские проекты. Узнаваемый авторский стиль - это одно, слепое копирование дизайнерских решений - совсем другое. Клонирование до добра не доводит. 7) Если посетители вашего сайта присылают вам письма с предложениями, пожеланиями и комментариями, отвечайте на всю приходящую корреспонденцию незамедлительно.
Десять советов web-дизайнеру? 8) Реагируйте на советы посетителей оперативно. 9) Публикуйте только проверенную информацию. Репутация распространителя непроверенной информации вряд ли поможет вам в бизнесе, поиске друзей или деловых партнеров. 10) Старайтесь избегать использования в текстах технического и нетехнического сленга, просторечий и ненормативной лексики. Помните: как вы будете относиться к посетителям Вашего Web-ресурса, так же и они будут относиться к вам!
Заключение внимание !!! Спасибо за Если Вы знаете основые постулаты и технологии web-дизайна и владеете инструментарием, сайтостроение превращается в ярко выраженный творческий процесс, в котором Вы можете проявить все свои способности! В подготовке данной презентации использован материал: 1) В. Холмогормова «Основы Web-мастерства. Учебный курс.» - СПб.: Питер, 2002 г. В подготовке данной презентации использован материал: 1) В. Холмогормова «Основы Web-мастерства. Учебный курс.» - СПб.: Питер, 2002 г.