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

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

Нет, в целом все хорошо. Только вот полоса навигации у нас какая-то куцая… Правила хорошего тона 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="index.htm">HTML</A></LI>

<LI><A HREF="css_index.htm">CSS</A></LI>

<LI><A HREF="samples_index.htm">Примеры</A></LI>

<LI><A HREF="about.htm">О разработчиках</A></LI>

</UL>

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

Листинг 11.6

<UL ID="navbar">

<LI><A HREF="index.htm">HTML</A>

<UL>

</UL>

</LI>

<LI><A HREF="css_index.htm">CSS</A></LI>

<LI><A HREF="samples_index.htm">Примеры</A></LI>

<LI><A HREF="about.htm">О разработчиках</A></LI>

</UL>

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

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

Листинг 11.7

<UL ID="navbar">

<LI><A HREF="index.htm">HTML</A>

<UL>

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

<LI><CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE></LI>

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

.

<LI><CODE><A HREF="tags/t_video.htm">VIDEO</A></CODE></LI>

</UL>

</LI>

<LI><A HREF="css_index.htm">CSS</A></LI>

<LI><A HREF="samples_index.htm">Примеры</A></LI>

<LI><A HREF="about.htm">О разработчиках</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

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

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

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

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Полная проверка компьютера

Из книги Очень хороший самоучитель пользователя компьютером. Как самому устранить 90% неисправностей в компьютере и увеличить его возможности автора Колисниченко Денис Николаевич

Полная проверка компьютера Перейдите в раздел Поиск вирусов (рис. 9.5) и выберите объекты (почтовые базы, логические диски), которые вы хотите проверить на наличие вирусов. Можете выбрать Мой компьютер для полной проверки компьютера. Как правило, полную проверку компьютера


Полная спецификация

Из книги Основы объектно-ориентированного программирования автора Мейер Бертран

Полная спецификация Раздел ПРЕДУСЛОВИЯ (PRECONDITIONS) завершает простую спецификацию абстрактного типа данных STACK. Для удобства ссылок полезно собрать вместе разные компоненты спецификации, приведенные выше. Вот полная спецификация.Спецификация стеков как АТДТИПЫ (TYPES)[x]. STACK


6.20.1 Полоса пропускания

Из книги TCP/IP Архитектура, протоколы, реализация (включая IP версии 6 и IP Security) автора Фейт Сидни М

6.20.1 Полоса пропускания IP эффективно использует полосу пропускания. Датаграммы помещаются в очередь для пересылки в точку следующего попадания, как только станет доступна полоса пропускания (bandwidth; по традиции мы будем использовать термин "полоса пропускания", хотя


Основы навигации

Из книги Добавьте в корзину. Ключевые принципы повышения конверсии веб-сайтов автора Айзенберг Джеффри

Основы навигации Существует множество разновидностей меню навигации. В идеале вы должны найти такую комбинацию элементов навигации, которая больше всего подойдет как вашему сайту, так и вашим клиентам. Главная цель – сориентировать посетителя и подвести его к


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

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

Полоса навигации Гиперссылки не всегда "ходят поодиночке". Довольно часто на Web-страницах присутствуют целые наборы гиперссылок, ссылающихся на разные Web-страницы данного Web-сайта. Такие наборы называются полосами навигации.Полоса навигации может быть расположена по


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

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

Полоса навигации Гиперссылки не всегда "ходят поодиночке". Довольно часто на Web-страницах присутствуют целые наборы гиперссылок, ссылающихся на разные Web-страницы данного Web-сайта. Такие наборы называются полосами навигации.Полоса навигации может быть расположена по


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

Из книги Визуальное моделирование электронных схем в PSPICE автора Хайнеманн Роберт

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


12.1. Эффективная полоса пропускания

Из книги Технология XSLT автора Валиков Алексей Николаевич

12.1. Эффективная полоса пропускания Прежде всего, используя указанные в журнале Elektor значения, определим путем моделирования эффективную 3-dB-полосу пропускания при выходной мощности 35 Вт и сопротивлении нагрузки RH равном 8 Ом.Возможно, некоторым незнакомо понятие


Оси навигации

Из книги Бесплатные разговоры через Интернет автора Фрузоров Сергей


Полоса пропускания канала

Из книги Фундаментальные алгоритмы и структуры данных в Delphi автора Бакнелл Джулиан М.

Полоса пропускания канала Следующая вкладка диалогового окна настроек (рис. 4.20) называется Bandwidth (Ширина звукового канала). Если у вас низкоскоростной Интернет, то настройка этого параметра для вас особенно важна. Например, когда вы используете IP-телефонию и одновременно


Полная секретность: шифруем все действия в интернете Олег Нечай

Из книги CSS3 для веб-дизайнеров автора Сидерхолм Дэн

Полная секретность: шифруем все действия в интернете Олег Нечай Опубликовано 20 мая 2013 Мы уже обсуждали, как можно удалить из интернета попавшие туда персональные данные. Однако лучший способ избавиться от нежелательной информации о себе в Сети —


Полная запись перехода

Из книги Linux глазами хакера автора Флёнов Михаил Евгеньевич

Полная запись перехода Ниже приводится дополненное объявление перехода, в которое добавлены префиксы -moz- и -o-, как и основное свойство transition. Как обычно, свойство без префикса ставится в самый конец, чтобы у него был наибольший вес, когда это свойство перейдет


13.4.5. Полная копия

Из книги Анонимность и безопасность в Интернете. От «чайника» к пользователю автора Колисниченко Денис Николаевич

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


3.4. Полная анонимность: I2P и Tor вместе

Из книги Wiki-правительство [Как технологии могут сделать власть лучше, демократию – сильнее, а граждан – влиятельнее] автора Новек Бет

3.4. Полная анонимность: I2P и Tor вместе Наверное, вам интересно, какую сеть использую я? Мой выбор – Tor. Но не потому, что она чем-то лучше I2P, просто больше подходит для моих задач. Сеть I2P удобна, когда нужно обеспечить полную анонимность обмена данными между участниками сети,