Создание HTML-сайта

Создать горизонтальную навигацию

На этом занятии предлагаю заняться горизонтальной навигацией нашего индексного файла. Тем, кто забыл, напоминаю о том, что пока мы создаем лишь главную страницу нашего сайта или индексный файл (index.html). Затем, на его основе мы будем создавать все остальные странички нашего простого HTML-сайта.

Для начала, давайте как-нибудь назовем наши будущие страницы. Поскольку на основе таких простых шаблонов обычно делают сайты-визитки, то давайте представим, что мы делаем сайт для какой-то фирмы, которая оказывает какие-то услуги. Открывайте свою программу Adobe Dreamweaver и прописывайте названия разделовгоризонтальной навигации.

Сразу создадим стиль для текста навигации, вернее добавим в правило «.nav1» пару строчек:

Поскольку класс «.nav1» для навигации у нас уже прописан в коде страницы, то, как только вы сохраните изменения в таблице стилей, они сразу вступят в силу и в браузере можно будет увидеть следующую картину:

И так, главная страничка почти готова – не хватает только контента. Давайте заполним ее каким-нибудь имитатором этого самого контента и заодно создадим стили для него и заголовков. Я, не мудрствуя лукаво, вставлю в центральную часть index.html примерно следующее:

Чтобы все это выглядело не так страшно, создадим в таблице стилей новые правила для заголовков и контента:

После того, как вы добавите то, что надо и куда надо (я имею в виду классы новых стилей), сохраните все это, у вас появится шанс увидеть в браузере почти готовую простую страничку сайта:

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