HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов, Дронов Владимир

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

на обложку

Дронов Владимир

Шрифт:

Откроем в Блокноте Web-страницу index.htm и найдем HTML-код, создающий полосу навигации (листинг 11.5).

Листинг 11.5

<LI><A href="#">Примеры</A></LI>

<LI><A href="#">О разработчиках</A></LI>

</UL>

Дополним его кодом, создающим вложенный список.

Листинг 11.6 содержит исправленный код.

Листинг 11.6

<UL>

</UL>

</LI>

<LI><A href="#">Примеры</A></LI>

<LI><A href="#">О разработчиках</A></LI>

</UL>

Мы поместили тег <UL>, создающий вложенный список, в разрыв между текстом первого пункта "внешнего" списка и его закрывающим тегом </LI>. Тогда вложенный список будет располагаться ниже первого пункта "внешнего" списка.

После этого найдем HTML-код, создающий гиперссылки на Web-страницы — описания тегов. Он находится в самом конце кода Web-страницы, в отдельном абзаце контейнера cmain. Позаимствуем оттуда фрагменты кода, которые создают отдельные гиперссылки, указывающие на Web-страницы — описания тегов, и создадим на их основе пункты вложенного списка (листинг 11.7).

Листинг 11.7

<UL>

<LI><CODE>!DOCTYPE</CODE></LI>

<LI><CODE><A href="#">AUDIO</A></CODE></LI>

<LI><CODE><A href="#">VIDEO</A></CODE></LI>

</UL>

</LI>

<LI><A href="#">Примеры</A></LI>

<LI><A href="#">О разработчиках</A></LI>

</UL>

Удалим из контейнера cmain код, который создает абзац с гиперссылками, указывающими на Web-страницы — описания тегов, и относящийся к нему заголовок. Надобности в них больше нет.

Сохраним исправленную Web-страницу index.htm и откроем ее в Web-обозревателе. Ниже пункта "HTML" "внешнего" списка, формирующего полосу навигации, мы увидим пункты только что созданного вложенного списка.

Вложенный список в полосе навигации выглядит просто ужасно. Поэтому, не откладывая дела в долгий ящик, приступим к созданию для него представления.

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

поведение при переполнении, дополнив соответствующий ему именованный стиль (листинг 11.8).

Листинг 11.8

#cnavbar { width: 250px; height: 570px; float: left; overflow: auto; margin-right: 10px }

Теперь сформулируем требования к вложенному списку и его пунктам.

— Маркер пунктов вложенного списка — отсутствует.

— Вложенный список, формирующий полосу гиперссылок, сдвинуть влево на 30 пикселов. Так мы ликвидируем образовавшееся после удаления маркеров свободное пространство.

— Внешний отступ у вложенного списка сверху — 10 пикселов. Так мы отделим его от пункта "внешнего" списка, в который он вложен.

— Размер шрифта у пунктов вложенного списка — 10 пунктов. Раз уж вложенный список является как бы "подчиненным", то пусть его пункты будут набраны шрифтом меньшего размера.

— Отступы и рамки у пунктов вложенного списка отсутствуют. Так мы сделаем вложенный список компактнее.

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

CSS-код листинга 11.9.

Листинг 11.9

#navbar LI UL { list-style-type: none; margin-left: -20px; margin-top: 10px }

#navbar LI UL LI { font-size: 12pt; padding: 0px; margin: 0px; border-style: none }

Мы создали два комбинированных стиля. Первый задает параметры вложенного списка. Там комментировать нечего.

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

Сохраним таблицу стилей main.css и обновим открытую в Web-обозревателе Web-страницу index.htm, нажав клавишу <F5>. Полоса навигации должна выглядеть так, как показано на рис. 11.2.

Рис. 11.2. Полная полоса навигации на Web-странице index.htm

А что, получилось неплохо! По-деловому строго и, вместе с тем, симпатично.

На этом закончим с HTML и содержимым Web-страниц. И снова вернемся к CSS и представлению.

Параметры выделения

Мы знаем множество способов привлечь внимание посетителя к определенным элементам Web-страниц, использовав теги HTML или атрибуты стиля CSS. Но CSS 3 предлагает нам еще один способ сделать это — так называемое выделение.