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

иллюстрирует HTML-код Web-страницы t_audio.htm.

Листинг 16.10

<DIV CLASS='sample'>

<H6>Пример:</H6>

<PRE>&lt;AUDIO SRC=&quot;sound.wav&quot; CONTROLS&gt;&lt;/AUDIO&gt;</PRE>

<H6>Результат:</H6>

<AUDIO SRC='sound.wav' CONTROLS></AUDIO>

</DIV>

Внесем исправления во все аналогичные Web-страницы и проверим их в действии.

Что дальше?

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

Часть IV будет посвящена самым современным подходам в Web-дизайне и Web- программировании: подгружаемому и генерируемому содержимому и семантической разметке. Уже в следующей главе мы научимся подгружать часть содержимого Web-страницы из сторонних файлов программно.

А библиотека Ext Core нам в этом поможет.

ЧАСТЬ 4. Подгружаемое и генерируемое содержимое. Семантическая разметка

ГЛАВА 17. Подгружаемое содержимое

В предыдущей части мы начали заниматься Web-программированием: изучили язык JavaScript, правила написания Web-сценариев и библиотеку Ext Core и создали поведение для наших Web-страниц, причем весьма развитое. Теперь наш Web- сайт выглядит вполне профессионально. Скрывающиеся и раскрывающиеся элементы Web-страницы, блочные контейнеры, автоматически выстраивающиеся на Web-странице, полоса навигации с 'горячими' пунктами — все это, конечно, впечатляет. Но уже никого особенно не удивляет. В Сети существует множество Web-сайтов, щеголяющих подобными 'штуковинами'. Все это — уже давно пройденный этап в развитии Web-дизайна. Нужно что-то новое. Еще более впечатляющее. Еще более интерактивное. И обязательно несущее какие-то выгоды и пользователю, и разработчику — иначе грош ему цена. Теперь мы займемся технологиями, находящимися на переднем крае Web-дизайна. Мы реализуем на наших Web-страницах, во-первых, подгружаемое содержимое, во-вторых, генерируемое содержимое, в-третьих, семантическую разметку данных. И от всего получим практическую пользу. Данная глава целиком и полностью будет посвящена подгружаемому содержимому — самой простой из перечисленных технологий.

Монолитные и блочные Web-страницы

Об этом уже упоминалось в главе 10, посвященной блочным контейнерам и контейнерному Web-дизайну. Настала пора рассмотреть вопрос подробнее.

Давайте откроем любую нашу Web-страницу, скажем, index.htm, в Web-обозревателе. Что мы увидим? Набор блочных контейнеров, содержащих заголовок Web-сайта, полосу навигации, основное содержимое и сведения об авторских правах. Все эти контейнеры составляют неотъемлемую часть содержимого Web- страницы и определяются в ее HTML-коде.

Теперь посмотрим на HTML-код этой Web-страницы, для чего откроем ее в Блокноте. Да, ее HTML- код велик… Немало места отведено коду, создающему основное содержимое Web-страницы: там и большая цитата, и список, и даже таблица.

Не меньше (если не больше) места занимает код, создающий полосу навигации, со всеми ее списками, вложенными друг в друга, пунктами этих списков и гиперссылками. Код заголовка Web-сайта, сведений об авторских правах и служебный код (создающий сами контейнеры, секции Web-страницы и пр.) хоть и относительно невелик по объему, но тоже там присутствует.

Отсюда следует первый вывод: HTML-код, хранящийся в файле index.htm, определяет все содержимое данной Web-страницы без исключения. Такие Web-страницы на жаргоне Web-дизайнеров называются монолитными. Все Web-страницы, созданные нами на данный момент, — монолитные.

Теперь откроем другую Web-страницу, например, css_index.htm. Здесь почти то же самое: заголовок Web-сайта, полоса навигации и сведения об авторских правах. Только основное содержимое другое.

Если мы начнем поочередно открывать другие Web-страницы, то увидим на них аналогичную картину. Заголовок Web-сайта, полоса навигации и сведения об авторских правах остаются без изменений, отличается только основное содержимое.

Выходит, бoльшая часть содержимого наших монолитных Web-страниц неизменна. Настолько неизменна, что мы можем копировать соответствующий HTML-код из одной Web-страницы в другую без всякой правки или пересохранять Web-страницу под другим именем, чтобы создать новую. (В главе 16, кстати, мы так и поступили.)

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

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

Второй недостаток затрагивает уже Web-дизайнеров. Если нам потребуется внести изменения в какой-либо из повторяющихся на всех Web-страницах элементов, например, добавить новый пункт в полосу навигации, то придется вносить соответствующие изменения в HTML-код всех Web-страниц данного Web- сайта. Работа долгая, тяжелая, вдобавок, выполняя ее, нетрудно сделать ошибку…

Выход их этого положения — задействовать подгружаемое содержимое. О нем уже упоминалось в главе 1. Вкратце: отдельные части содержимого Web-страниц средствами Web- обозревателя загружаются из других файлов и выводятся в указанное место Web-страницы, а именно в указанный блочный контейнер.

Исходя из этого, набросаем план действий.

— Создаем Web-страницу, содержащую только элементы, остающиеся неизменными на всех Web-