Волгоградская областная универсальная научная библиотека им. М. Горького ВОЛГОГРАДСКИЙ ЦЕНТР

Волгоградская областная универсальная научная
библиотека им. М. Горького
ВОЛГОГРАДСКИЙ ЦЕНТР
ОТКРЫТОГО ДОСТУПА К ИНТЕРНЕТ
© Ульева Людмила, 2004 г.
E-mail: [email protected]
Волгоград, 2005
Что такое web-дизайн?
Любой ресурс, опубликованный во
Всемирной сети, это прежде всего
художественное произведение, сложный
комплекс инженерно-дизайнерских решений.
Процесс создания такого произведения и
называется web-дизайном.
Web-дизайн — это творчество, причем
творчество ярко выраженное.
Творите, и рано или поздно созданный вами
проект найдет заслуженное признание
многомиллионной аудитории пользователей
Интернета.
Зачем это нужно?
Домашняя страничка
Основной движущий фактор - стремление
разместить в Сети информацию, которую впоследствии
можно использовать при поиске работы или
интерактивном
общении
с
другими
людьми
посредством Интернета.
•
•
•
•
Может служить средством для публикации:
научных исследований автора;
литературных произведений;
рисунков;
музыки.
Зачем это нужно?
Некоммерческий и коммерческие сайты
•
•
•
Некоммерческий сайт:
размещение информации;
публикация работ;
поиск партнеров, единомышленников.
Коммерческий сайт:
•
продавать товары и услуги через интернет;
•
формировать благоприятный имидж фирмы или ее
продукции;
•
предоставлять информации о фирме, ее продукции
и услугах;
•
получать информацию от клиентов;
•
находить деловых партнеров, новых сотрудников,
инвесторов и т.д.
Зачем это нужно?
Необходимый инструментарий
Для полноценной работы web-дизайнеру
необходимы:
• среда разработчика документов HTML (WYSIWYGpeдактор);
• редактор векторной графики (CorelDraw 9 или выше);
• редактор растровой графики (Adobe Photoshop версии
5.0 или выше);
• броузер Microsoft Internet Explorer версии 5.0. и выше;
• броузер Netscape Navigatorерсии 4.01 и выше.
• оптимизатор растровых изображений GIF;
• оптимизатор растровых изображений JPEG;
• FTP-клиент, рекомендуется программа CuteFTP.
• перекодировщик кириллицы (программы ConvHTML и
SNK DECode)
Основные постулаты web-дизайна
1) В Интернете принято молчаливое соглашение о том,
что профессиональный сайт должен корректно
отображаться при экранном разрешении 640x480 точек с
цветовой палитрой в 256 цветов.
Примечание. При отображении html-документа,
рассчитанного на просмотр с экранным разрешением
800x600 точек, на компьютере, настроенном на
разрешение 640x480 точек, в нижней части главного окна
броузера появляется горизонтальная полоса прокрутки.
Совет. Для правильного отображения 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 без переноса графики;
• использовать одни и те же графические файлы во
всех разделах сайта;
• при необходимости удалять целые директории .
Технологии web-дизайна
Средство документирования проекта
Имя файла
Директория
Описание
Дата посл.
измен.
index.html
/vounb
Стартовая страница
сайта
http://www.vounb.iatp.ru
1.10.2004
user.htm
/vounb/user
Раздел «Читателю»
5.10.2004
instructions.
htm
user/instructions. Правила пользования
htm
library.jpg
/vounb/img
Фотография
библиотеки
5.11.2004
6.11.2004
Технологии web-дизайна
Заглавная страница
Один из критериев, руководствуясь которым можно
разделить различные web-сайты на две основные
категории:
• наличие заглавной
страницы (splash);
• отсутствие таковой.
Рис. 2. Пример заглавной страницы
Технологии 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 г.