Чтение онлайн

ЖАНРЫ

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

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

Шрифт:

#ccopyright { width: 1010px; clear: both; padding: 10px 20px 0px 20px; border-top: thin dotted #B1BEC6 }

Вот и все. Сохраним таблицу стилей main.css и откроем Web-страницу index.htm в Web-обозревателе. Автор не будет приводить здесь иллюстрацию, т. к. созданные нами тонкие рамки на ней практически незаметны. Но на экране компьютера они выглядят весьма эффектно.

Посмотрим теперь на полосу навигации. Невыразительные гиперссылки скучились в верхней части контейнера cnavbar, просто жалко на них смотреть!.. Давайте их сдвинем влево, немного "разредим", создав отступы, и

заодно заключим каждую из них в рамки.

Как мы помним, наша полоса навигации представляет собой список, а отдельные ее гиперссылки — пункты данного списка.

Вот необходимые изменения:

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

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

— Рамка пунктов списка — тонкая, сплошная, цвет #B1BEC6.

— Внутренние отступы пунктов списка: сверху и снизу — по 5 пикселов, слева и справа — по 10 пикселов. Так мы отделим текст пунктов от рамок.

Осталось только соответственно исправить CSS-код таблицы стилей main.css (листинг 11.4).

Листинг 11.4

#navbar { font-family: Arial, sans-serif; font-size: 14pt; text-transform: uppercase; list-style-type: none; margin-left: -30px }

#navbar LI { padding: 5px 10px; margin: 10px 0px; border: thin solid #B1BEC6 }

Рассмотрим их подробнее.

В именованный стиль navbar, привязанный к тегу списка, который формирует полосу навигации, мы добавили отступ слева, равный –30 пикселов. Благодаря этому список сместится влево, заполняя пустое пространство:

#navbar { font-family: Arial, sans-serif; font-size: 14pt; text-transform: uppercase; list-style-type: none; margin-left: -30px }

Вновь созданный комбинированный стиль создаст у пунктов списка, формирующего полосу навигации, рамку и задаст соответствующие отступы:

#navbar LI { padding: 5px 10px; margin: 10px 0px; border: thin solid #B1BEC6 }

Сохраним исправленную таблицу стилей и обновим открытую в Web-обозревателе Web-страницу index.htm, нажав клавишу <F5>. Стало значительно лучше, не так ли (рис. 11.1)?

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

Теперь немного отвлечемся от CSS и займемся HTML. Есть у наших Web-страничек изъян, непростительный для хорошего Web-дизайнера.

Полная полоса навигации

Нет, в целом все хорошо. Только вот полоса навигации у нас какая-то куцая… Правила хорошего тона Web-дизайна предписывают, чтобы в полосе навигации находились гиперссылки, указывающие на все Web-страницы Web-сайта. А что у нас? Часть гиперссылок — да, находится именно там, а остальные скучены в последнем абзаце основного содержимого. Плохо!

Давайте срочно исправим ситуацию.

Создадим новую, полную полосу навигации. Поместим гиперссылки, указывающие на Web-страницы, которые описывают

различные теги HTML, ниже гиперссылки, указывающие на Web-страницу index.htm

(она посвящена самому HTML). Сделаем у этих гиперссылок небольшой отступ слева — так мы покажем, что они относятся к теме "HTML". То же самое проделаем и с гиперссылками, указывающими на Web-страницы, которые описывают атрибуты стиля CSS и примеры.

Наша полоса навигации — суть список. Ее гиперссылки — пункты этого списка. Поэтому для гиперссылок, указывающих на Web-страницы — описания тегов, логично создать вложенный список. Благо HTML, как мы узнали еще в главе 2, позволяет делать вложенные списки.

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

Листинг 11.5

<UL ID="navbar">

<LI><A href="#">HTML</A></LI>

<LI><A href="#">CSS</A></LI>

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

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

</UL>

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

Листинг 11.6

<UL ID="navbar">

<LI><A href="#">HTML</A>

<UL>

</UL>

</LI>

<LI><A href="#">CSS</A></LI>

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

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

</UL>

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

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

Листинг 11.7

<UL ID="navbar">

<LI><A href="#">HTML</A>

<UL>

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

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

<LI><CODE>BODY</CODE></LI>

.

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

</UL>

</LI>

<LI><A href="#">CSS</A></LI>

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

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

</UL>

Поделиться с друзьями: