Урок верстки страницы сайта в редакторе Dreamweaver, в котором ждет своего создания навигация сайта. Навигация сайта — тема, между прочим, очень важная и не такая простая как кажется на первый взгляд. В этой статье мы создадим одну из самых простых панелей навигации сайта. И, кстати, самую оптимальную. Затронем только технику создания навигации. Об идеологии, Вы можете почитать в статье Как организовать навигацию по сайту.
Перейдем к Колонке1, она у нас слева, и создадим в ней навигацию по сайту:
Ставим курсор в контейнер колонки и пишем – Арабские. Определим надпись как заголовок 4 уровня, таким же способом, как и в шапке. Можно и как 3 уровня, смотрите сами. Создаем стиль для заголовков 4 уровня:
Сохраняем стиль в нашей таблице. В категории Тип (Type) выбираем шрифт и его цвет. Я выбрал снова Arial и цвет #0066ff.
Ставим курсор в конце слова Арабские, жмем Enter, создавая разрыв меду заголовком и названиями разделов. Пишем название первого раздела – Черные. Дальше, внимание! Жмем Enter с нажатой клавишей Shift, чтобы не было разрыва между строками, и пишем Зеленые и.т.д.
Чтобы создаваемая навигация сайта имела более-менее приличный вид, перечень разделов желательно оформлять как маркированные списки. Главное, что мы должны будем сделать, — выделить все строки, которые станут пунктами создаваемого списка. С целью преобразования выделенных строк в список, воспользуемся кнопками-переключателями редактора свойств, найдите их в нижнем доке:
С помощью левой кнопки можно создать из абзацев, которые мы выделили, маркированный список, а с помощью правой — нумерованный. Когда обе кнопки “выключены”, пункт списка, где стоит текстовый курсор, превращается в обычный абзац. Нажмем левую кнопку. Создадим стиль для списка. Тег списка – ul:
В категории Тип (Type) выбираем шрифт, размер и его цвет. Я выбрал Arial, размер 10 пунктов и цвет белый. По идее должно быть так:
И вроде бы как навигация сайта создана, но у меня то ли Dreamweaver глючный, то ли я чего-то не догоняю, но получается так, что точка стоит только у первой строчки. Я этим делом не заморачивался, а залез в код и сделал, как мне было нужно. И вам покажу. Ничего сложного там нет. Итак, на панели инструментариев документа нужно щелкнуть кнопку Код (Code). В коде найдите такой фрагмент:
Если вы хотите, чтобы список был без точек – сделайте так:
Если вы хотите, чтобы список был с точками – сделайте так:
Чуть позже мы из списка создадим ссылки на другие страницы и с помощью стилей определим их свойства:
Так у вас получилось? Значит, с тем как создается навигация сайта, вернее с одним из вариантов создания навигации сайта мы разобрались.
И осталось нам оформить подвал (футер) и Колонку2, что мы и сделаем на странице Напоминание об авторских правах, вставка баннеров
А если у меня уже нарисованные кнопки навигации уже с текстом и своей стилистикой в фотошопе как мне их привязать к гиперссылке. Есть такой урок?
сори за беспокойство нашёл сам))) если кому тоже интересно, то вот: chvv.com.ua/sozdanie-navi...kix-giperssylok/