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