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