Общее описание Dynamic Web Templates

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

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

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

Редактируемыми регионами являются те области, которые указаны в динамическом веб-шаблоне следующим образом:

<!-- #BeginEditable "Region1" --><p>(Region1)</p><!-- #EndEditable -->

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

…

<!-- #BeginTemplate "master.dwt" -->

<!--далее идет сам шаблон и изменения, сделанные в редактируемых регионах -->

…

<!-- #EndTemplate -->

Таким образом, указанная часть странице соответствует шаблону master.dwt.

Общее описание CSS

CSS (Cascading Style Sheets, каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана) и др.

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счет этого нововведения стало возможным легкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Основными преимуществами использования CSS являются:

· несколько дизайнов страницы для разных устройств просмотра;

· уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл;

· простота последующего изменения дизайна;

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

Недостатками использования CSS являются:

· различное отображение верстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS;

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

CSS при отображении страницы может быть взята из различных источников:

· Авторские стили в виде:

o внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе;

o встроенных стилей – блоков CSS внутри самого HTML-документа;

o inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style;

· Пользовательские стили:

o локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили и применяемый ко всем документам;

· Стиль браузера:

o стандартный стиль, используемый браузером по умолчанию для представления элементов.

Пример таблицы стилей:

h2 {

font-size: 1.75em;

color: #469;

}

#container {

padding: 0;

}

#column_r_content, #column_l_content {

margin: 10px;

}

p#paragraph1 {

margin: 0;

}

#masthead img {

float: left;

margin: 0;

padding: 0;

}

#navigation a:hover {

color: #000;

text-decoration: none;

border: 1px solid #ed9;

background-color: #ed9;

}

.style_italic {

font-style: italic;

}

Здесь приведено семь правил с селекторами h2, #container, #column_r_content, #column_l_content, p#paragraph1, #masthead img, #navigation a:hover, .style_italic.

В первом правиле HTML-элементу h2 (заголовку второго уровня) назначаются стиль, согласно которому, заголовок второго уровня будет отображаться темно-синим цветом увеличенным кеглем.

Второе правило будет применяться к элементам, идентификатор которых равен container. Аналогично ему, третье правило будет применяться к элементам, идентификатор которых равен либо column_r_content, либо column_l_content. Эти элементы будут иметь внешний отступ, равный 10 пикселям.

Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

Пятое правило будет применяться только к элементам img, которые находятся внутри элемента, атрибут id которых равен masthead. Такие элементы не будут иметь внешних и внутренних отступов и будут прижиматься к левой границе экрана (но внутри своего контейнера).

Шестое правило определяет стиль hover для элементов a, находящихся в элементе с атрибутом id равным navigation. Это правило, в частности, изменить цвет и задний фон ссылки, когда указатель мыши находится над этими элементами.

Седьмое правило будет применено к элементам, атрибут class которых содержит слово ' style_italic '. Например:

<p class="style_italic">Этот абзац будет выведен курсивом.</p>