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

Общепринятые правила построения веб – сайтов предполагают, что часть содержимого веб – страниц остается неизменной (панель навигации, к примеру).

Получается, что часть кода каждой страницы, повторяет аналогичную другой страницы фактически без каких – либо изменений. Соответственно возникает вопрос: а нужно ли каждый раз загружать неизмененный контент страницы?

Страницы, HTML – код которых определяет все содержимое веб – страницы называют монолитными.

Монолитные веб – страницы загружаются на компьютер пользователя целиком.

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

Альтернативным подходом к построению веб – страниц является подгружаемое содержимое. Иными словами, загружаются только те части веб – страницы, контент которых изменился. Такие страницы называются блочными.

Рассмотрим один из способов организации подгружаемого содержимого – элемент <iframe>.

<iframe>

Тег <iframe> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые HTML - документы.

Тег <iframe> является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <iframe> и </iframe>.

<iframe> содержит следующие атрибуты:

• align - определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом. Может принимать следующие значения:
• absmiddle - выравнивание середины фрейма по середине текущей строки;
• baseline - выравнивание фрейма по базовой линии текущей строки.;
• bottom - выравнивание нижней границы фрейма по окружающему тексту;
• left - выравнивание фрейма по левому краю окна;
• middle - выравнивание середины фрейма по базовой линии текущей строки;
• right - выравнивание фрейма по правому краю окна;
• texttop - верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки;
• top - верхняя граница фрейма выравнивается по самому высокому элементу текущей строки.
• allowtransparency - устанавливает прозрачный фон фрейма, через который виден фон страницы;
• frameborder – определяет, отображать ли границу вокруг фрейма или нет. Может принимать одно из двух значений:
• yes (1) – отображать границу;
• no (0) – не отображать границу.
• height – задает высоту фрейма;
• hspace – задает величину горизонтального отступа от фрейма до окружающего контента. Значения задаются в виде целых положительных чисел;
• marginheight – задает величину отступа сверху и снизу от содержания до границы фрейма;
• marginwidth – задает величину отступа слева и справа от содержания до границы фрейма. Значения задаются в виде целых положительных чисел;
• name – определяет имя фрейма;
• sandbox - позволяет задать ряд ограничений на контент загружаемый во фрейме. Может принимать следующие значения:
• allow-same- origin - разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна;
• allow- top - navigation - позволяет открывать ссылки фрейма в родительском документе;
• allow- forms - позволяет содержимому фрейма отправлять формы;
• allow- scripts - разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.
• scrolling – задает способ отображения полосы прокрутки во фрейме. Может принимать одно из трех следующих значений:
• auto – отображать полосы прокрутки, в случае если размеры контента превышают размеры элемента;
• no – не отображать полосы прокрутки;
• yes – отображать полосы прокрутки.
• seamless - определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа;
• src – определяет путь файлу, содержимое которого будет загружаться во фрейм;
• srcdoc - xранит содержимое фрейма непосредственно в атрибуте;
• vspace – задает величину вертикального отступа от фрейма до окружающего контента;
• width – задает ширину фрейма.

Пример, добавления <iframe> на страницу:

<iframe src="banner.html" width="468" height="60" align="left">

Данная версия браузера не поддерживает iframe.

</iframe>

Более детально пример реализации подгружаемого содержимого веб – страницы будет рассмотрен в рамках практического занятия №1.

Date: 2015-07-22; view: 715; Нарушение авторских прав