Удобная навигация сайта в Dreamweaver | Как создать свой сайт

Как сделать удобную навигацию по сайту

Июн-1-2009 Автор: VeryOldMan

Урок верстки страницы сайта в редакторе  Dreamweaver,  в котором ждет своего создания навигация  по сайту. Навигация сайта — тема, между прочим, очень важная и не такая простая как кажется на первый взгляд.  В этой статье мы создадим одну из самых простых панелей навигации сайта.  И, кстати, самую оптимальную.  Затронем только технику создания навигации. Об идеологии, вы можете почитать в статье Как организовать навигацию по сайту.

Перейдем к Колонке1, она у нас слева, и создадим в нейнавигацию по сайту:

Ставим курсор в контейнер колонки и пишем – Арабские.  Определим надпись как заголовок 4 уровня, таким же способом, как и в шапке. Можно и как 3 уровня, смотрите сами. Создаем стиль для заголовков 4 уровня:

Как сделать удобную навигацию по сайту

Сохраняем стиль в нашей таблице. В категории Тип (Type)  выбираем шрифт и его цвет. Я выбрал снова Arial и цвет #0066ff.

Ставим курсор в конце слова Арабские, жмем Enter, создавая разрыв меду заголовком и названиями разделов. Пишем название первого раздела – Черные. Дальше, внимание! Жмем Enterс нажатой клавишей Shift, чтобы не было разрыва между строками, и пишем Зеленые и.т.д.

Чтобы создаваемая навигация по сайту имела более-менее приличный вид, перечень разделов желательно оформлять как маркированные списки. Главное, что мы должны будем сделать, — выделить все строки, которые станут пунктами создаваемого списка.  С целью преобразования выделенных строк в список, воспользуемся кнопками-переключателями редактора свойств, найдите их в нижнем доке:

С помощью левой кнопки можно создать из абзацев, которые мы выделили, маркированный список, а с помощью правой — нумерованный. Когда обе кнопки “выключены”, пункт списка, где стоит текстовый курсор, превращается в обычный абзац. Нажмем левую кнопку. Создадим стиль для списка. Тег списка – ul:

Как сделать удобную навигацию по сайту

В категории Тип (Type) выбираем шрифт, размер и его цвет. Я выбрал Arial, размер 10 пунктов и цвет белый. По идее должно быть так:

И вроде бы как навигация по сайту создана, но у меня то ли Dreamweaver глючный, то ли я чего-то не догоняю, но получается так, что точка стоит только у первой строчки. Я этим делом не заморачивался, а залез в код и сделал, как мне было нужно. И вам покажу. Ничего сложного там нет. Итак, на панели инструментариев документа  нужно щелкнуть кнопку  Код (Code). В коде найдите такой фрагмент:

Если вы хотите, чтобы список был без точек – сделайте так:

Если вы хотите, чтобы список был с точками – сделайте так:

Чуть позже мы из списка создадим ссылки на другие страницы и с помощью стилей определим их свойства:

Как сделать удобную навигацию по сайту

Так у вас получилось? Значит, с тем как создается удобная навигация по сайту, вернее с одним из вариантов создания навигации сайта мы разобрались.

И осталось нам оформить подвал (футер) и Колонку2, что мы и сделаем на странице — Как вставить баннер на сайт в редакторе Dreamweaver






2 комментария
  1. Алексей Пишет,

    сори за беспокойство нашёл сам)))

  2. Алексей Пишет,

    А если у меня уже нарисованные кнопки навигации уже с текстом и своей стилистикой в фотошопе как мне их привязать к гиперссылке. Есть такой урок?

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