Web сайт

Начала Web дизайна
Web сайт
• Набор файлов, сгруппированных в несколько
рубрик (разделов) и связанных между собою
гипертекстовыми ссылками
• Основной тип файлов – HTML файлы (.htm,
.html)
• Начальная страница по умолчанию – обычно
index.htm (index.html)
http://www.mysite.ru
http://www.mysite.ru/index.htm
Структура
Логическая
Физическая
http://www.mysite.ru
www
Начальная страница
/mysite
index.htm
Раздел: биография
./biography biography.htm
Документ: биография
http://www.mysite.ru/family/daughter.htm
Раздел: моя семья
Документ: моя дочь
Документ: мой сын
Рисунок 1
./family
index.htm
son.htm
daughter.htm
http://www.mysite.ru/images/photo2.htm
Раздел: фотоальбом
Фото 1
Фото 2
./images
pic1.gif
photo1.jpg photo2.jpg
Локальные пути
• Локальный путь – формат записи адреса,
описывающий расположение объекта внутри
файловой структуры самого сервера
../index.htm
http://www.mysite.ru/family/wife.htm
/mysite
index.htm
wife.htm
./biography
biography.htm
http://www.mysite.ru/family/son.htm
./family
./images
index.htm wife.htm son.htm
pic1.gif
photo1.jpg photo2.jpg
../images/photo2.jpg
Правила
• Имена папок и файлов – латинский алфавит и
лучше в нижнем регистре
• Осмысленные имена файлов
• Рекомендация: держать все графические
файлы в одной папке ( например - /images)
• Не путать “/” и “\”
– для Windows (DOS) - “\”
– для WWW - “/”
Начальная страница
• Заглавная – не содержит содержательной
информации. Обычно – логотип (или Flashролик) и ссылки на следующие страницы.
Оправдано, когда есть несколько
разноязычных версий сайта.
• Стартовая – первая страница с
содержательной информацией и элементами
навигации.
Компоновка страниц
• Статическая – размер (ширина) страницы не
зависит от разрешения экрана и размера окна.
Реализуется при помощи заключения всех
элементов в ячейки невидимой таблицы
фиксированной ширины
• Динамическая (резиновый дизайн) –размеры
ячеек задаются в процентах от ширины либо
без использования таблицы для
форматирования.
Элементы Web страницы
Логотип
Заголовок
окна
Заголовок
страницы
Дублирующая
панель
навигации
Баннеры
Основная
панель
навигации
Основная часть
Сведения о разработчике,
счётчики, копирайт
Пример компоновки 1
Пример компоновки 2
“Законы” Web дизайна
Главное – удобство пользователя
1.
2.
3.
4.
5.
6.
7.
“По умолчанию” – разрешение 800x600
Страница должна идентично отображаться в IE,
Netscape и Mozilla (война браузеров)
Оптимизация (минимизация) графики
Элементы навигации всегда должны быть
доступны
Единый дизайнерский стиль для всех страниц
сайта
Не использовать более 3 различных шрифтов
(включая графику)
“Корректная” цветовая схема страницы
Разработка сайта
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Постановка целей и определение основных задач
Создание списка будущих тематических разделов
Разработка логической и физической структуры
Подготовка эскиза дизайна, компоновки сайта
Подготовка текстовых материалов
Подготовка графических материалов
Оптимизация картинок
Создание шаблонов web-страниц
Сборка web-страниц и отладка кода
Проверка идентичности отображения сайта с
различным разрешением экрана и в различных
браузерах