Волгоградский государственный университет
Опубликован: 02.03.2009 | Доступ: свободный | Студентов: 1478 / 172 | Оценка: 4.20 / 4.03 | Длительность: 16:55:00
Лекция 3:

DHTML

< Лекция 2 || Лекция 3: 123 || Лекция 4 >
Аннотация: Лекция посвящена HTML-страницам с динамически изменяемым содержимым. Рассказывается о каскадных таблицах стилей (Cascade Style Sheets — CSS) и языке сценариев (JavaScript или VBScript). Что CSS из себя представляют, по каким правилам создаются, как взаимодействуют с остальными элементами HTML-документа. Дается понятие селекторов, их виды.

Динамический HTML (Dynamic HTML или DHTML) не является языком разметки страниц. Это термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым. Реализация DHTML основывается на HTML, каскадных таблицах стилей (Cascade Style SheetsCSS) и языке сценариев (JavaScript или VBScript). Эти три компонента DHTML связаны между собой объектной моделью документа (Document Object ModelDOM), являющейся интерфейсом прикладного программирования (API).

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

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

Таблицы стилей CSS

Логическое и физическое форматирование

Классический, наиболее распространенный, HTML 3.2 предоставляет средства физического форматирования документов, для чего имеются специальные теги (например, теги <font>, <b>, <i> ) и множество различных атрибутов ( size, color, height, width и т. п.). Особенности web-форматирования принуждают автора явно прописывать эти теги и атрибуты для каждого нового абзаца, что, сильно увеличивает размер страниц. При таком способе форматирования затруднен анализ структуры документа человеком и поисковыми машинами. Из-за сложности логического анализа такой способ форматирования называется физическим форматированием.

В спецификации HTML 4.0 используется логическое форматирование, при котором структура и оформление документа четко разделены. Этот способ форматирования рекомендован к применению Консорциумом WWW, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа с помощью CSS. То же самое можно сказать и при XHTML.

Понятие стиля, таблицы стилей и CSS

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

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

CSS level 1(Cascade Style Sheets, Каскадные таблицы стилей, уровень 1) представляют собой технологию определения и присоединения стилей к документам HTML. Термин "каскадные" используется потому, что возможно использовать несколько таблиц стилей для управления форматированием одного документа HTML, а браузер по определенным правилам выстраивает приоритетность применения этих таблиц.

Правила CSS

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

h1 {color: blue; font-size: 16pt}

Назначение свойства очевидно из его названия. В приведенном правиле селектором является элемент h1, а определение, записанное в фигурных скобках, задает значения двух свойств заголовка первого уровня: цвет шрифта (свойство color ) определен как синий (значение blue ) и размер шрифта (свойство font-size ) определен в 16 пунктов (значение 16pt ). В одном правиле можно задать несколько определений, разделенных символом точка с запятой ( ; ).

Связывание HTML с CSS

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

  1. Связывание — позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.
  2. Внедрение — позволяет задавать все правила таблицы стилей непосредственно в самом документе.
  3. Импортирование — позволяет встраивать в документ таблицу стилей, расположенную на сервере.
  4. Встраивание в тэги документа — позволяет изменять форматирование конкретных элементов страницы.

Встраивание CSS в HTML

CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу <body>. Если стиль задан для тега <body>, он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нет необходимости прописывать теги <font> и атрибуты color, size и т. п. для каждого абзаца на странице – достаточно задать стиль для тега <body>, и все абзацы на странице будут отображены в соответствии с этим стилем.

Пример. Необходимо, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов зеленого цвета. Для этого следует указать атрибут style тега <body>, присвоив ему соответствующее значение:

<body style="font-family: 'Times New Roman'; font-size: 12pt; color: green">

В примере используется встраивание стиля непосредственно в тег документа – так называемый inline -стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях – если данный стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML.

Внедрение таблицы стилей

Для применения одинакового форматирования к нескольким одинаковым элементам страницы необходимо создать в заголовке страницы (в любом месте между тегами <head> и </head> ) внедренную таблицу стилей, в которой задаются требуемые правила оформления. Для этого создается тег-контейнер таблицы стилей, начинающийся открывающим тегом <style> и заканчивающийся закрывающим тегом </style>. Внутри этого тега-контейнера можно задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки.

Пример. Необходимо, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial синего цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня – шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желтого цвета.

<head>
...
<style>
<!--body { 
font-family: 'Times New Roman';
font-size: 12pt;
color: green;
}
h1 {
font-family: Arial;
font-size: 16pt;
color: blue;
font-weight: bold;
}
h2 {
font-family: Helvetica;
font-size: 14pt;
color: yellow;
font-weight: bold;
font-style: italic;
}
-->
</style>
...
</head>

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

Обычно браузеры, не поддерживающие какие-либо тэги, игнорируют их, интерпретируя, однако, их содержимое в том виде, в каком оно задано, что может приводить к ошибкам. Поэтому, как обычно, следует задавать содержимое тэгов, которые потенциально не обрабатываются старыми версиями браузеров, заключенным в тэг комментария <!--…-->.

Связывание таблицы стилей

Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тэга <link>, задаваемого в разделе <head>:

<link rel="stylesheet" type="text/css" href="mystyles.css"/>

В этой строке указывается, что связываемый файл является таблицей стилей ( rel="stylesheet" ), формат этого файла – . css1 ( type="text/css" ) и находится он в той же директории, что и файл html, либо имеет другой URL-адрес ( href="mystyles.css" ).

Эта строка может быть указана в любом html -файле. Таким образом, единое оформление будет использовано для нескольких страниц.

При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным – .css ).

Пример CSS-файл а:

body { 
font-family: 'Times New Roman';
font-size: 12pt;
color: green;
}
h1 {
font-family: Arial;
font-size: 16pt;
color: blue;
font-weight: bold;
}
h2 {
font-family: Helvetica;
font-size: 14pt;
color: yellow;
font-weight: bold;
font-style: italic;
}

Тэги <style> и </style> внутри файла таблицы стилей не используются – расширение .css явно указывает браузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц).

Импорт таблицы стилей

Для импортирования файла таблицы стилей (в том числе с другого сервера) необходимо указать в заголовке HTML-файла между тегами <head> и </head> внутри тега-контейнера <style> следующую строку:

<head>
...
<style>
...
@import: url (my.css);
...
</style>
...
</head>

Помимо адреса импортируемой таблицы стилей, в теге-контейнере <style> можно указать любые правила CSS, которые будут дополнять или корректировать правила, заданные в импортируемой таблице – внедренные правила.

< Лекция 2 || Лекция 3: 123 || Лекция 4 >