Начала Web дизайна

Web сайт Набор файлов, сгруппированных в несколько рубрик (разделов) и связанных между собою гипертекстовыми ссылками Основной тип файлов – HTML файлы (.htm,.html) Начальная страница по умолчанию – обычно index.htm (index.html)

Структура ЛогическаяФизическая Начальная страница Раздел: биография Документ: биография Раздел: моя семья Документ: моя дочь Документ: мой сын Рисунок 1 Раздел: фотоальбом Фото 1 Фото 2 www /mysite index.htm./biography./family./images biography.htm index.htm daughter.htm son.htm pic1.gifphoto1.jpgphoto2.jpg

Локальные пути Локальный путь – формат записи адреса, описывающий расположение объекта внутри файловой структуры самого сервера /mysite index.htm./biographybiography.htm./familyindex.htmwife.htm./imagespic1.gifphoto1.jpgphoto2.jpg son.htm wife.htmhttp://

Правила Имена папок и файлов – латинский алфавит и лучше в нижнем регистре Осмысленные имена файлов Рекомендация: держать все графические файлы в одной папке ( например - /images) Не путать / и \ –для Windows (DOS) - \ –для WWW - /

Начальная страница Заглавная – не содержит содержательной информации. Обычно – логотип (или Flash- ролик) и ссылки на следующие страницы. Оправдано, когда есть несколько разноязычных версий сайта. Стартовая – первая страница с содержательной информацией и элементами навигации.

Компоновка страниц Статическая – размер (ширина) страницы не зависит от разрешения экрана и размера окна. Реализуется при помощи заключения всех элементов в ячейки невидимой таблицы фиксированной ширины Динамическая (резиновый дизайн) –размеры ячеек задаются в процентах от ширины либо без использования таблицы для форматирования.

Элементы Web страницы Заголовок страницы Логотип Основная панель навигации Дублирующая панель навигации Баннеры Основная часть Заголовок окна Сведения о разработчике, счётчики, копирайт

Пример компоновки 1

Пример компоновки 2

Законы Web дизайна Главное – удобство пользователя 1.По умолчанию – разрешение 800x600 2.Страница должна идентично отображаться в IE, Netscape и Mozilla (война браузеров) 3.Оптимизация (минимизация) графики 4.Элементы навигации всегда должны быть доступны 5.Единый дизайнерский стиль для всех страниц сайта 6.Не использовать более 3 различных шрифтов (включая графику) 7.Корректная цветовая схема страницы

Разработка сайта 1.Постановка целей и определение основных задач 2.Создание списка будущих тематических разделов 3.Разработка логической и физической структуры 4.Подготовка эскиза дизайна, компоновки сайта 5.Подготовка текстовых материалов 6.Подготовка графических материалов 7.Оптимизация картинок 8.Создание шаблонов web-страниц 9.Сборка web-страниц и отладка кода 10.Проверка идентичности отображения сайта с различным разрешением экрана и в различных браузерах