Лабораторная работа №4. Применение каскадных таблиц стилей CSS

1. Создайте шаблон для своего персонального сайта в Adobe Dreamweaver (файл с расширением.dwt). Для создания шаблона используйте пункт меню Вставка – Объекты шаблона – Создать шаблон. Для вставки контейнеров (частей макета) используйте Вставка ‑> Объекты макета ‑> Тег Div. Для создания редактируемых областей Вставка –> Объекты шаблона –> Редактируемая область. Продумайте, какие области в шаблоне могут быть постоянными, а какие должны изменяться. Создайте страницу на основе созданного шаблона Файл ‑> Создать... –> Страница из шаблона.

2. Добавьте на сайт, созданный в лабораторной работе №3 графическую навигационную карту. В качестве изображения можно использовать любую фотографию. При щелчке на отдельных объектах изображения должен осуществляться переход на страничку с детальной информацией об объекте. Например, если на фотографии изображены Вы с любимым котом Барсиком на руках на фоне дачного домика, то при клике мышкой на Вашем изображении будет открыта страничка с Вашей биографией, при клике на Барсике – страничка о котах, при щелчке по дому – страничка с приглашение в гости описание схемы проезда до дачи. Для создания графической навигационной карты воспользуйтесь возможностями Adobe Dreamweaver. Для этого вставьте изображение на страницу. Затем выделите изображение, внизу страницы в редакторе свойств отобразятся инструменты для выделения горячих областей.

Первая кнопка предназначена для редактирования уже существующих областей (при нажатой клавише Ctrl вершины многоугольника можно перемещать), а 2-4 для создания прямоугольной, круглой области и области сложной формы. Как только Вы выберите тип области и приступите к ее выделению на изобржении, Dreamweaver подставит в поле Map редактора свойств слово Map (имя навигационной карты), можно его изменить. Для каждой области надо указать адрес перехода по ссылке, где будет открыта ссылка и замещающий текст.