Создайте какую-либо папку на вашем компьютере. Пусть она будет локальным сервером создаваемого вами сайта. Зарегистрируем ее в редакторе Dreamweaver. Если кто-то забыл, как это делать – зайдите на страницу Работа с Web-сервером. Создаем новую HTML страницу, где и будет создана навигация по страницам сайта. Сохраняем ее в созданной папке. В режиме Проект создаем плавающий контейнер (Вставка – Объекты макета – Тег Div – OK). Это будет контейнер шапки (хедера). Внутри этого контейнера создаем еще один контейнер для панели навигации. Создаем стиль css для контейнера хедера:
Жмем ОК, сохраняем файл таблицы стилей под каким-то именем и сразу же определяем правила css. В категории Фон – вставим изображение хедера. В категории рамка – зададим ширину 990, высоту 230, по размерам фона. Все. Привязываем стиль к контейнеру:
Стиль css для контейнера панели навигации будем делать позже, в зависимости от варианта панели. Итак, вариант первый. В этом варианте панель навигации делаем целиком, в программе Photoshop.
Запускаем Photoshop. Создаем новый файл с размерами: ширина – 800, высота – 100. С помощью направляющих задаем высоту будущих кнопок в 30 пикселей и ширину каждой 100. Создаем новый слой. С помощью инструмента выделения Прямоугольная область выделяем контуры кнопок с нажатой клавишей Shift:
Заливаем кнопки цветом фона шапки. К данному слою применяем стили Тень и Контур. Те, что стоят в программе по умолчанию. Заливаем задний план цветом de670d. На каждой кнопке пишем название страны. Когда все будет готово — сводим слои (Слой – Выполнить сведение). С помощью направляющих выставляем размеры панели, выделяем панель:
Копируем выделенную область. Создаем новый файл: Файл – Новый. Размеры нового файла будут равны размерам скопированной области. Жмем ОК. В новом файле: Редактирование – Вклеить:
Сохраняем файл через Файл – Сохранить для WEB и устройств, естественно в созданной папке-сервере.
Открываем редактор Dreamweaver и открываем ранее созданный файл с хедером. Вот теперь можно создать стиль для контейнера , в котором будет навигация по страницам сайта. В категории Рамка выставляем ширину и высоту, равную размерам созданной в Photoshop панели. У меня это 690 и 50 пикселей. В окошке Плавающий – левая. В правом поле убираем птичку с Одинаково для всех и проставляем размеры: Сверху – 170, слева 5 пикселей. Готовый стиль привязываем к контейнеру панели. В сам контейнер вставляем изображение панели чрез меню Вставка.
Теперь все готово для того, чтобы была создана навигация по страницам сайта с помощью карты изображения, чем мы и займемся на странице Создание навигации по сайту с помощью графических гиперссылок