Дело в том, то по материалам этой статьи нам нужно будет сделать какую-то основу или плацдарм, на котором можно будет поэкспериментировать с созданием различных видов навигации по сайту с помощью графических гиперссылок в редакторе Dreamweaver. Основой же будет такая себе импровизированная web страница на которой мы разберемся с таким вопросом, как создание меню для сайта.
Создавать страницу будем в уже знакомой программе Photoshop. По алгоритму создания она мало чем будет отличаться от тех, которые мы уже создавали. Принципы остаются прежними. Но будут несколько довольно интересных нюансов, которые не вошли в предыдущие уроки по созданию сайта. Это касается как программы Photoshop, так и редактора Dreamweaver. Внутренний голос мне подсказывает, что это будет вам интересно и полезно.
Как я уже говорил, полностью страницу сайта мы создавать не будем. На примере создания web страницы я хочу познакомить вас с возможностями создания меню для сайта в редакторе Dreamweaver, с помощью графических гиперссылок, для чего вполне достаточно какой-либо части страницы, например хедера. Итак, начнем с дизайна страницы сайта в Photoshop.
Откроем программу и создадим новый файл через меню Файл. Вы уже в курсе, как это делается. А если кто-то забыл или только начинает создавать свою web страницу, зайдите на страницу Создаем файлы для Photoshop.
Размеры страницы. Высота – роли не играет, вертикальная прокрутка нас не интересует. Ну, пусть будет 800 пикселей. А вот о ширине мы немного поговорим. Необходимость разбора этого вопроса вызвана бурным развитием компьютерной техники. Если, казалось бы, недавно монитор в 19 дюймов был роскошью, то кого сейчас может удивить и 22 дюйма? Хотя по статистике, 17 дюймовыми мониторами сейчас пользуются около 40% владельцев компьютеров. Какое это имеет отношение к ширине страницы сайта? Самое прямое. У 17 дюймовых мониторов рекомендуемая разрешающая способность 1024 на 768 пикселей. 1024 по ширине экрана. Это значит, что если ширина страницы сайта буде больше 1024 пикселей, то она не поместится полностью по ширине экрана монитора. Появится так называемая горизонтальная прокрутка, что очень нежелательно. Потому что пользователей вполне достаточно раздражает и вертикальная прокрутка. Поэтому, если уважать владельцев 17 дюймовых мониторов, ширину web страницы нужно задавать меньше 1024 пикселей. Учитывая разницу в отображении страницы разными браузерами, я экспериментально вывел величину в 1000 пикселей. Минус 10 пикселей запаса и ширина страницы будет равна 990 пикселей. Конечно, на 19 дюймовых мониторах, по бокам странницы остается пустое место. Ну, что ж, это жизнь. Нет ни в чем гармонии. Итак, создаем в фотошопе новый файл 990 на 800. 
Продолжаем создавать web страницу с меню для сайта. Делаем какой-то несложный дизайн для страницы сайта. Например, я поискал и нашел (кстати, у себя на сайте в разделе Фотоклипарт) вот такое фото:
Где с помощью инструмента Прямоугольная область выделил и скопировал часть изображения. Вставим его в наш новый файл. В панели слои мы сейчас имеем два слоя – Задний план и Слой 1:
Зальем задний план цветом близким по тону к вставленному фрагменту. Проще всего это сделать так. В панели Слои активируем Задний план. Дальше в главном меню: Редактирование – Выполнить заливку – Цвет — Цвет. Курсором в виде пипетки на изображении выбираем нужный цвет и дважды жмем Да. Фон есть, да только изображение не вписалось, видна прямоугольная рамка. Впишем гармонично изображение в фон. Для этого с помощью инструмента Лассо выделим часть изображения вот так:
Активируем Слой 1. В главном меню: Выделение — Инверсия. Еще раз Выделение – Модификация – Растушевка. Ставим радиус 15, жмем Да. Щелкнем клавишей Delete, пару раз. В главном меню: Выделение – Отменить выделение.
Что у нас сейчас есть? Фактически хедер страницы сайта. Вот на этом мы и закончим создание страницы сайта в Photoshop. Этого вполне достаточно для того, чтобы разобраться с тем как создать меню для сайта в редакторе Dreamweaver. А если у вас есть желание продолжить эту работу, то можно сделать логотип в хедере, вставить какую-то графику, да мало ли еще что можно придумать. Главное, с помощью инструмента Раскройка, вырежьте и сохраните хедер с высотой 230 пикселей, оставляя место внизу для панели навигации.
Как, и какие варианты меню для сайта можно создать — на странице Создание навигации по сайту в редакторе Dreamweaver