HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
НА ЗАМЕТКУ
Современные Web-обозреватели могут выводить таблицу на экран в процессе ее загрузки. Это "умеет" даже Internet Explorer, славящийся своим, мягко говоря, консерватизмом. Так что последняя проблема отпала.
Как видим, все три старых принципа Web-дизайна, наряду с достоинствами, имеют и серьезные недостатки. Поэтому в настоящее время они медленно, но верно отступают под натиском амбициозного новичка, имя которому…
Сущность контейнерного Web-дизайна
Контейнерный Web-дизайн
Для задания различных параметров блочных контейнеров предусмотрены специальные атрибуты стиля CSS. К таким параметрам относятся размеры (ширина и высота), местоположение контейнеров и их поведение при переполнении. Также мы можем задать для контейнеров цвет фона, создать отступы и рамки, чтобы их выделить (о параметрах отступов и рамок речь пойдет в главе 11).
И что, контейнерный Web-дизайн так уж хорош? Давайте рассмотрим недостатки трех старых принципов Web-дизайна и выясним, сможет ли он их решить.
— Непритязательный вид и линейное представление Web-страниц — у текстового Web-дизайна. Мы можем расположить контейнеры на Web-странице практически как угодно и поместить в них произвольное содержимое: текст, таблицы, изображения, аудио- и видеоролики и даже другие контейнеры. А CSS позволит нам задать для них практически любое представление.
— "Монолитность" Web-страниц — у текстового и табличного Web-дизайна. Современные Web-обозреватели позволяют с помощью специально созданного поведения загрузить в контейнер Web-страницу, сохраненную в отдельном файле, т. е. организовать подгружаемое содержимое. Мы займемся этим в главе 18.
— "Нестандартность" фреймов — у фреймового Web-дизайна. Контейнеры и соответствующие теги официально стандартизированы комитетом W3C и обрабатываются всеми Web-обозревателями одинаково.
— Громоздкость HTML-кода — у табличного Web-дизайна. HTML-код, формирующий контейнеры, исключительно компактен. Как мы уже знаем, блочный контейнер формируется всего одним парным тегом <DIV>.
— Медленная загрузка Web-страниц — у табличного Web-дизайна. Все Web-обозреватели отображают содержимое контейнеров прямо в процессе загрузки, так что Web-страницы визуально загружаются очень быстро.
И что, контейнерный Web-дизайн так хорош? И он совсем не имеет недостатков? Увы, ничего совершенного в мире нет…
Контейнерный Web-дизайн проигрывает табличному в возможности реализации сложного дизайна Web-страниц. Таблица позволяет создать на Web-странице множество колонок разной ширины, содержащих разное содержимое. Чтобы сделать это с помощью контейнеров, скорее всего, придется применять вложенные друг в друга контейнеры, сложные стили и, возможно, поведение, которое уже после окончания загрузки Web-страницы располагает контейнеры в нужных местах. Это, пожалуй, единственный недостаток контейнерного Web-дизайна.
Что ж, с контейнерным Web-дизайном все в основном ясно. Давайте попрактикуемся. Переделаем наши Web-страницы с применением контейнерного Web-дизайна — "легкого", простого, современного.
Представление для нашего Web-сайта, часть 3
Сначала разработаем схему расположения на Web-страницах соответствующих
Классическая схема Web-дизайна (и не только контейнерного) показана на рис. 10.1. Как видим, в самом верху располагается заголовок Web-сайта, ниже него в одну линию по горизонтали выстроились полоса навигации и основное содержимое, а под ними пристроились сведения об авторских правах. Давайте используем именно эту схему.
Рис. 10.1. Классическая схема Web-дизайна
Откроем в Блокноте Web-страницу index.htm. Найдем в ее HTML-коде четыре важных фрагмента любой Web-страницы: заголовок Web-сайта, полосу навигации, основное содержимое и сведения об авторских правах. Поместим их в блочные контейнеры.
На рис. 10.1 показано, что заголовок Web-сайта предшествует полосе навигации, а не наоборот. Поэтому поменяем местами фрагменты HTML-кода, создающие эти контейнеры и их содержимое.
Впоследствии мы привяжем к созданным контейнерам стили, задающие их размеры и местоположение на Web-странице. Поскольку каждый из этих контейнеров присутствует на каждой Web-странице в единственном экземпляре, применим для этого именованные стили. Дадим им такие имена:
— cheader — стиль для контейнера с заголовком Web-сайта;
— cnav — стиль для контейнера с полосой навигации;
— cmain — стиль для контейнера с основным содержимым;
— ccopyright — стиль для контейнера со сведениями об авторских правах.
Здесь буква "c" обозначает "container" — контейнер. Так мы сразу поймем, что данные стили применяются именно к контейнерам.
Привязка именованного стиля к тегу выполняется путем указания имени этого стиля в качестве значения атрибута тега ID. Сделаем это для всех контейнеров.
В листинге 10.4 приведен фрагмент HTML-кода Web-страницы index.htm со всеми нужными исправлениями.
Листинг 10.4
<DIV ID="cheader">
<H1>Справочник по HTML и CSS</H1>
</DIV>
<DIV ID="cnavbar">
<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>
</DIV>
<DIV ID="cmain">
Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках
<DFN>HTML</DFN> и <DFN>CSS</DFN>.
<HR>
.
<H2>Теги HTML</H2>
<CODE>!DOCTYPE</CODE>,
<CODE><A href="#">AUDIO</A></CODE>,
<CODE>BODY</CODE>, <CODE>EM</CODE>, <CODE>HEAD</CODE>,
<CODE>HTML</CODE>, <CODE><A href="#">IMG</A></CODE>,
<CODE>META</CODE>, <CODE>P</CODE>, <CODE>STRONG</CODE>,
<CODE><A href="#">TITLE</A></CODE>,
<CODE><A href="#">VIDEO</A></CODE>
</DIV>
<DIV ID="ccopyright">
<ADDRESS>Все права защищены.<BR>©
<A href="#">читатели</A>, 2010 год.</ADDRESS>
</DIV>