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

Дронов Владимир

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

Базовую Web-страницу сделаем главной Web-страницей Web-сайта.

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

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

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

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

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

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

Подгрузка содержимого Web-страниц

Для подгрузки фрагмента содержимого Web-страницы из стороннего файла и вывода его в указанный элемент Web-страницы библиотека Ext Core предлагает метод load объекта Element:

<экземпляр объекта Element>.load(<интернет-адрес>|<конфигуратор>)

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

Вот свойства этого конфигуратора и соответствующие им параметры:

— url — интернет-адрес загружаемого файла в виде строки. Это единственный обязательный параметр.

— success — функция, которая будет вызвана, если загрузка файла завершится успешно.

— failure — функция, которая будет вызвана, если при загрузке файла возникнет ошибка.

— callback — функция, которая будет вызвана после окончания загрузки файла, независимо от того, успешно загрузится файл или нет.

— timeout — промежуток времени (тайм-аут), в течение которого Web-обозреватель будет ожидать окончания загрузки файла. Если файл за этот промежуток времени не загрузится, библиотека Ext Core будет считать, что возникла ошибка загрузки. Тайм-аут задается в виде числа в миллисекундах; значение по умолчанию — 30 000 мс (30 с).