Меню статического сайта в Dreamweaver

Меню сайта очень важный его элемент. На этой странице пойдет речь о навигации по сайту или меню статическго сайта. Прежде чем приступить к созданию меню сайта необходимо уяснить одно неписаное правило. Глубина ссылочных переходов на сайте не должна быть более трех. С чем это связано? В основном это связано с удобством навигации по сайту для посетителей. Кроме того большинство поисковых роботов не желают заходить по ссылкам на сайте на глубину более трех. А это уже влечет за собой отсутствие в индексе поисковых машин глубоких страниц сайта. Страницы могут остаться "невидимыми" через поисковые машины. А на них вполне может быть важная и полезная информация для для посетителей, которые ищут ее, через поисковые машины.

Исходя из выше сказанного на сайте можно создать разделы, подразделы и ссылки на страницах подразделов на страницы вложенные в подразделы. Это, конечно-же не значит, что все современные сайты построены таким образом. Но на начальном этапе построения первого сайта желательно меню сделать именно так, как сказано выше. Для упрощения процедуры мы сделаем меню с двумя разделами и двумя подразделами в каждом разделе на базе нашего шаблона. Этого будет вполне достаточно для уяснения процедуры создания меню сайта на базе шаблона. Меню сайта обычно делается на базе таблицы или контейнера <div>Меню</div>. Ссылки меню могут располагаться внутри тегов <td>Ссылка</td> или тех-же контейнеров <div>Ссылка</div>. Меню нашего шаблона построено на базе таблицы. Желательно рядом со ссылкой меню расположить какой-либо значек в форме указателя (небольшую картинку) в формате .gif или .ipj. Картинка будет полезна для дополнительной подсказки по ссылке меню с помощью атрибута alt, также такой трюк часто дает дополнительную полезную информацию для индексации страниц сайта поисковому роботу. Но это на будущее, а пока наша задача сделать простое и понятное меню сайта.

Такого типа меню уже организовано на базе имеющегося шаблона. Преобразованный шаблон можно скачать, сохранить в отдельную папку на локальном диске и открыть его страницы в браузере. В верхней части шаблона главное меню сайта, где обязательно присутствует ссылка на главную страницу сайта. В главном меню также ссылка на страницу с контактной информацией и ссылки на разделы сайта. Ссылки пока не работают. Этап формирования переходов по ссылкам будет рассмотрен в следующем разделе. Для того, чтобы уяснить некоторые моменты преобразования меню шаблона к нужному виду, необходимо сделать это самостоятельно по шагам на базе существующей единственной страницы имеющегося шаблона, а затем сравнить результаты со скачанным уже готовым преобразованным шаблоном. Рассмотрим этот процесс в некоторых подробностях.

Итак преобразуем таблицы со ссылками нашего шаблона к нужному виду, создав на главной странице меню со ссылками на разделы и страницы со ссылками на подразделы с самими страницами подразделов. Для этого выполним последовательно следующие действия.

В открытом файле index.html правой кнопкой мыши выделяем таблицу главного меню, затем на появившейся панели выбираем Table −> Select Table, затем на нижней панели Properties (изображение панели ниже по тексту) в окне Cols пишем цифру 4 и нажимаем клавишу Enter. Это изменит количество столбцов (окон) со ссылками в таблице главного меню с 5 на 4. Затем меняем названия ссылок в таблице главного мею на ранее оговоренные: Главная; Раздел 1; Раздел 2; Контакты. Не забываем сохранить проделанную работу нажав комбинацию клавиш Ctrl+S.

Свойства страницы сайта

Далее необходимо убрать лишние строки таблицы со ссылками и сами ссылки на левой панели, чтобы подготовить заготовку главной страницы сайта и страницы с контактной информацией. Но прежде, чем это сделать необходимо подготовить заготовки страниц разделов сайта на которых эта таблица будет необходима. Для этого идем в главное меню программы File −> Save As... и сохраняем в той-же папке с шаблоном (D:/Mysite) наш файл index.html под другим именем, например partition1.html. То-же проделываем еще раз и сохраняем файл index.html под именем partition2.html. Теперь необходимо убрать на левой панели лишние строки в таблице со ссылками, выделив ее правой кнопкой мыши, затем Table −> Select Table и на панели Properties в окне Rows набрать цифру 1, нажав клавишу Enter. Также необходимо стереть ненужный текст "Ссылка1" внутри оставшейся строки. Таблицу на боковой панели можно было-бы удалить совсем, но тогда панель лишилась-бы распорки, которая определяет ее ширину. Этой распоркой и является пустая таблица с одной строкой. Затем необходимо преобразованный index.html сохранить под именем contacts.html для страницы с контактной информацией. Далее необходимо преобразовать таблицу меню со ссылками на левой боковой панели в файлах partition1.html и partition2.html таким-же способом, как была преобразована таблица со ссылками главного меню, только нужно уменьшить не количество колонок, а количество строк в таблице (в окне Rows набрать цифру 2).

Теперь остается набрать названия ссылок в таблице на левой панели файлов partition1.html и partition2.html. Как оговорено выше подойдут ссылки с названиями Раздел1 Подраздел1, Раздел1 Подраздел2 для partition1.html и Раздел2 Подраздел1, Раздел2 Подраздел2 для partition2.html. Далее можно размножить файлы partition1.html и partition2.html под именами подразделов таким-же способом, как сами partition1.html и partition2.html были сформированы из файла index.html. Полученные файлы имеют названия part1sub1.html, part1sub2.html, part2sub1.html, part2sub2.html. Это и будут страницы подразделов нашего сайта.

Подобным или похожим образом можно преобразовывать меню любого шаблона в Dreamweawer.