Создание HTML-сайта
Создание вложенных страниц
На этом занятии мы займемся вертикальной навигацией и вложенными страницами. На данный момент наш сайт состоит из четырех html-страничек: index.html; nav2.html; nav3.html и nav4.html, связанных между собой ссылками горизонтальной навигации. Если такого количества страниц недостаточно для сайта, то их число можно увеличить за счет, так называемых, вложенных страниц, т.е. страниц второго, третьего, четвертого и т.д. уровней вложенности. Чтобы было понятно, о чем идет речь, давайте попробуем создать четыре таких страницы для «Главной» нашего сайта.
Для начала, предлагаю сделать пару копий индексного файла, из которых мы будем создавать страницы второго, третьего и т.д. уровней вложенности. Для этого открываем файл index.html в Adobe Dreamweaver и сохраняем его (как это сделать написано в прошлом уроке) как index_tmp.html – его мы будем использовать для созданиявложенных страниц второго уровня вложенности. Аналогично создаем файл index_tmp1.html для страниц третьего уровня. В результате во вкладке «Локальные файлы» вы должны увидеть примерно следующее:
Объясняю, для чего все это нужно. Дело в том, что со следующего шага, мы начнем изменять наш индексный файл, и использовать его как шаблон для создания новых вложенных станиц будет неудобно. Поэтому мы, как люди предусмотрительные, и сохраняем его в девственном, так сказать, виде для производства новых страниц. Надеюсь, я понятно объяснил. Если кому интересно, для чего нам две копии, поясняю, что дизайн у страниц второго уровня и третьего уровня, возможно, будет различным, поэтому мы и заготовили две копии. И последнее, что я предлагаю сделать перед началом работы, так это заменить слово «Главная» в центральном блоке файла index_tmp.html (поскольку именно с ним мы начнем работать) на «Заголовок Н1», чтобы не путаться. Все, теперь можно начинать создавать вложенные странички для «Главной».
В первую очередь давайте придумаем названия для будущих вложенных страниц и пропишем их в вертикальной навигации индексного файла. Поскольку мы договорились, что будем делать сайт-визитку для фирмы, то, не мудрствуя лукаво, просто напишем первое, что взбредет в голову:
Напоминаю, что все это мы делали в файле index.html. Теперь открывайте файл index_tmp.html и создавайте из него четыре новые странички: index1.html; index2.html; index3.html и index4.html. Как это все сделать, подробно описано в прошлом уроке. В результате во вкладке «Локальные файлы» вы должны увидеть все новые файлы:
Теперь займемся созданием ссылок. Открываем «index.html» во вкладке «Проект» программы Adobe Dreamweaver CS3. В вертикальной навигации выделяем «Наша фирма». В нижнем окне программы находим форму «Ссылка». Справа от этой формы находим значок цели. Цепляем этот значок мышкой и тащим к названию файла в правом блоке программы. В данном случае это файл «index1.html».
Как только мы отпустим мышку, то в окне формы «Ссылка» появится имя файла, на который мы сослались, а выделенное название в навигации превратиться в ссылку. Как видите все очень просто. Осталось проделать то же самое со всеми оставшимися разделами вертикальной навигации. После того, как закончите, сохраняйте «Главную» страницу и смотрите в браузере как работает ваш сайт.
На данный момент сайт состоит из четырех страниц горизонтальной навигации, в одну из которых вложены еще четыре страницы. Итого: восемь страниц. Далее в каждую вложенную страницу так же можно вложить несколько страниц следующего уровня и т.д. и т.п. до бесконечности. Число страниц вашего сайта будет ограничено только объемом жесткого диска вашего хостинг провайдера, вашим временем и вашей фантазией.
Думаю, что с вложенными страницами и их уровнями вложенности мы разобрались. Конфигурацию сайта, как вы поняли, можно сделать какую угодно – все зависит только от вас.