Панель навигации для сайта | Как создать свой сайт

Как сделать панель навигации для сайта в редакторе Dreamweaver

Дек-30-2009 Автор: VeryOldMan

Как я уже говорил в предыдущей статье, для того чтобы сделать панель навигации для сайта, потребуется четыре изображения кнопки. Это если делать панель, так сказать по полной программе. Давайте пройдем эту полную программу. Прежде чем погрузится в Фотошоп, условимся, что панель навигации будем делать вертикальную. Допустим вам нужно сделать ее в правой или левой колонке (сайдбаре). Горизонтальную мы уже делали, зачем повторяться? Итак, запускаем Фотошоп.

Сделаем просто несколько кнопок с разными надписями. Создаем новый файл с ширной 200 пикселей и высотой 100. С помощью направляющих выставляем размеры кнопки шириной в 100 пикселей и высотой 30. Создаем новый слой. С помощью инструмента Прямоугольная область  выделяем контуры кнопки и заливаем нужным вам цветом:

панель навигации для сайта

Не снимая выделения, создаем еще три слоя и заливаем каждый нужным вам цветом. Создаем пятый слой и пишем на нем название страны – Аргентина. Вот так это будет выглядеть в панели   Слои:

панель навигации для сайта

Отключаем слои 2,3,4 щелкнув по «глазу» слева от  слоя. С помощью инструмента Раскройка  выкраиваем кнопку и сохраняем через Файл – Сохранить для WEB и устройств:

панель навигации для сайта

Отключаем Слой 1 включаем Слой 2. Сохраняем кнопку с другим цветом через Файл – Сохранить для WEB и устройств. Отключаем Слой 2 и включаем Слой 3 … И так все четыре варианта кнопки Аргентина. Отключим слои 2, 3, 4 и слой Аргентина. Создаем Слой 5. Пишем на нем Колумбия. Отключаем слой Колумбия. Создаем новый слой и пишем Греция… И так столько надписей, сколько вам нужно:

панель навигации для сайта

Теперь комбинируя отключением слои с надписями и слои с разным цветом и сохраняя их, создаем кнопку с названием одной страны четырех цветов. Естественно все изображения кнопок нужно сохранить в папке – сервере. Сохраните и созданный в фотошопе файл в формате PSD, на случай если понадобится сделать новую кнопку или редактировать уже созданные.

Продолжаем создавать панель навигации для сайта. Подошла очередь Dreamweaver. Запускаем программу. Создаем новый файл. Сохраняем по каким-то именем. Вставляем контейнер левой колонки (сайдбара). Создаем для него стиль css. Очень простой. В категории Рамка – ширина 100 пикселей, по ширине кнопки, в окошке Плавающий – левая. Ну и начинаем делать панель навигации.
Из контейнера удалим надпись. Курсор ставим внутрь контейнера. В главном меню: Вставка – Объекты изображения – Панель навигации. Видим внушительных размеров окно , которое называется Вставить панель навигации. Окошки панели по порядку, начиная с верхнего:
Имя элемента. Собственно это имя первой кнопки. Назовите ее маленькими латинскими буквами. Дальше идут четыре окошка, из названий которых легко можно догадаться о их назначении.

  • Окошко Кнопка не нажата – здесь при помощи меню Обзор мы ищем первичное изображение кнопки. В нашем случае это логично будет оранжевое, если идти по слоям снизу.
  • Дальше окошко Курсор наведен. И тут все понятно. Это изображение кнопки с наведенным курсором, как в варианте с замещающим изображением. Находим его аналогично при помощи меню Обзор. Опять же по логике — это коричневый цвет.
  • Окошко Кнопка нажата. Это изображение нажатой кнопки. Цвет – синий, по той же логике.
  • И окошко Кнопка нажата и курсор наведен. Что тут непонятного? И с цветом ясно. Он должен быть зеленым.

Следующие два окошка — их назначение такое же, как и в вставке замещающего изображения. Все остальные окошки — по умолчанию, кроме одного. Окошко Вставить дает возможность вставлять панель навигации вертикально или горизонтально. В нашем случае выбираем По вертикали. Не спешите нажимать ОК! Это только первая кнопка панели!
Создаем вторую кнопку. В самом верху окна есть значок + в рамке. Нажимаем его, даем имя новой кнопке и повторяем все операции. Вот когда все кнопки будут созданы- жмем ОК!
Панель навигации для сайта готова, только осталось разделить кнопки по вертикали. Создаем для них стиль. Как обычно. В категории Рамка в правом поле – Сверху — 5Снизу – 5. Все. Привязываем стиль ко всем изображениям кнопок. Проверяем браузером, что получилось.

Занятная получилась панель навигации для сайта? Панель можно сделать и горизонтальной выбрав в окошке создания панели: Вставить – По горизонтали. Если вы считаете лишними четыре изображения, то здесь очень легко реализовать вариант с замещающим изображением. Для этого, создавая панель навигации,  достаточно ограничится окошками: Кнопка не нажата и Курсор наведен. И наконец. Обязательно сохраняйте созданные в фотошопе файлы! Вам будет очень легко создать новую кнопку или отредактировать старые. Успехов!






Комментариев (1)
  1. Nikolaj Пишет,

    Здравствуйте. Прочитал Вашу статью о создании панели навигации в Dreamweaver. Хорошая статья. В своём сайте я сделал такое менюю Всё прекрасно! Отлично работает во всех Браузерах, кроме Internet Explorer 7, 8, 9. Пишет «запрещено выполнение скриптов и элементов ActiveX c этой страницы». Кликаю по этому сообщению и только после этого меню начинает работать. Невозможно же каждый раз кликать по этому сообщению (да и не каждый посетитель сайта будет это делать). Наверняка многие сайтостроители не могут найти способ решения этой проблемы. Если Вы знаете этот способ, помогите пожалуйста. Надеюсь и жду ответ. С уважением к Вам, Николай. 05.09.2011

Добавить комментарий