Монолитные и блочные 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-сайта, полоса навигации и сведения об авторских правах остаются без изменений, отличается только основное содержимое.

Выходит, бóльшая часть содержимого наших монолитных 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-страницах нашего Web-сайта, и пустой контейнер, в который будет выводиться основное содержимое. Назовем эту Web-страницу базовой . Базовую Web-страницу сделаем главной Web-страницей Web-сайта.

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

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

— При щелчке на гиперссылке загружаем основное содержимое целевой Web-страницы из соответствующего файла и также выводим его в контейнер.

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

Осталось только сказать, что Web-страницы, "собирающие" свое содержимое из фрагментов, хранящихся в отдельных файлах, неофициально называются блочными .

Но как нам загрузить фрагмент содержимого Web-страницы, хранящийся в отдельном файле? О, современные Web-обозреватели предоставляют все средства для этого. А библиотека Ext Core позволяет задействовать данные средства, написав минимум JavaScript-кода.