Монолитные и блочные 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‑кода.