|
Динамический HTMLДинамический HTML (Dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым. Реализация DHTML покоится на трех "китах": непосредственно HTML, каскадных таблицах стилей (Cascade Style Sheets — CSS) и языке сценариев (JavaScript или VBScript). Эти три компонента DHTML связаны между собой объектной моделью документа (Document Object Model — DOM), являющейся, по сути, интерфейсом прикладного программирования (API). DOM связывает воедино три перечисленных компонента, придавая простому документу HTML новое качество, — возможность динамического изменения своего содержимого без перезагрузки страницы. Символически подобное единство показано на рис. 10.1. 
Рис. 10.1. Компоненты динамического HTML Каскадные таблицы стилей можно сравнить со стилевыми файлами любого текстового редактора. С их помощью определяется внешний вид отображаемого HTML-документа: цвет шрифта и фона документа, сам шрифт, разбивка текста и многое другое. Для каждого элемента, задаваемого определенным тэгом HTML, можно определить свой стиль отображения в окне браузера. Например, заголовки первого уровня будут отображаться шрифтом Arial I6pt синего цвета, заголовки второго уровня — Arial 14pt красного цвета, основной текст — Times New Roman 10pt черного цвета с одинарным интервалом между строками. Можно создать таблицу стилей и использовать ее для всех документов, расположенных на сервере, что придаст стройность и строгость всему Web-сайту. Объектная модель документа делает все элементы страницы программируемыми объектами. С ее помощью через языки сценариев можно получить доступ и управлять всем, что есть в документе. Каждый элемент HTML доступен как индивидуальный объект, а это означает, что можно изменять значение любого параметра любого тега HTML-страницы, и, как следствие, документ действительно становится динамическим. Любое действие пользователя (щелчок кнопкой мыши, перемещение мыши в окне браузера или нажатие клавиши клавиатуры) объектной моделью документа трактуется как событие, которое может быть перехвачено и обработано процедурой сценария. DHTML достаточно новая технология, и не все браузеры поддерживают объектную модель документа и каскадные таблицы стилей. Однако DHTML использует стандартные теги HTML, и поэтому пользователи браузеров, не поддерживающих DOM, практически увидят все, что задумано разработчиком динамической страницы, но только в статическом виде. Есть еще одна "неприятность", связанная с тем, что разные фирмы-разработчики браузеров могут реализовывать собственную объектную модель документов, как это произошло с двумя популярными браузерами Internet Explorer и Netscape Navigator. Поэтому разработчикам динамических страниц приходится, в конечном счете, писать два варианта своих приложений, чтобы пользователи указанных браузеров могли правильно просматривать их страницы. В данной главе описываются каскадные таблицы стилей, объектные модели документов браузеров Internet Explorer и Netscape Navigator и приемы создания динамических HTML-страниц. Каскадные таблицы стилей впервые были реализованы в Internet Explorer 3.0, но информация о них в то время была большей частью противоречивой. При реализации Internet Explorer 4.0 были приняты во внимание рекомендации REC-CSS1 Консорциума W3 относительно каскадных таблиц стилей, датированные 17 декабря 1996 года. К настоящему времени они пересмотрены и известны как рекомендации по каскадным таблицам стилей, уровень 1, документ REC-CSS1-19990111 от 11 января 1999 года. В мае 1998 года Консорциум издал рекомендации по каскадным таблицам стилей, уровень 2, документ REC-CSS2-19980512, часть из которых реализована в Internet Explorer 4.01. В соответствии с этими рекомендациями и будет вестись описание каскадных таблиц стилей. Каскадные таблицы стилей, уровень 1, представляют собой простую технологию определения и присоединения стилей к документам HTML. Стиль, говоря житейским языком, — это все то, что определяет внешний вид документа HTML при его отображении в окне браузера: шрифты и цвета заголовков разных уровней, шрифт и разрядка основного текста, задаваемого в тэге абзаца <P>, и т. д. Стиль задается по определенным правилам, о которых, собственно говоря, и пойдет речь в данном разделе, а таблица стилей — набор правил отображения, применяемых в документе, к которому присоединена соответствующая таблица стилей. Таблица стилей — это шаблон, который управляет форматированием тегов HTML в Web-документе. Если читатель работал с текстовым редактором Microsoft Word, то концепция таблицы стилей напомнит ему концепцию стилевых файлов этого редактора: изменить внешний вид документа Word можно простым изменением присоединенных к нему стилей. Точно также изменить внешний вид документа HTML можно простым изменением присоединенной к нему таблицы стилей. Почему в название таблиц стилей включено определение "каскадные"? Дело в том, что рекомендации Консорциума W3 позволяют использовать несколько таблиц стилей для управления форматированием одного документа HTML, а браузер по определенным правилам выстраивает приоритетность применения этих таблиц. Они выстраиваются неким "каскадом", по которому и "прокатывается" документ. Правила приоритетности и разрешения возникающих конфликтов описаны ниже в данном разделе. Для разработки таблицы стилей достаточно немного ориентироваться в языке HTML и быть знакомым с базовой терминологией настольных издательских систем. Как отмечалось выше, таблица стилей представляет собой набор правил форматирования элементов HTML. Эти правила достаточно просты и легко запоминаемы. Например, если необходимо, чтобы в документе все заголовки первого уровня отображались синим цветом и шрифтом с кеглем (размером) 16 пунктов, то в таблице следует задать правило: H1 {color: blue;
Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Селектором может быть любой тег HTML, для которого определение задает, каким образом необходимо его форматировать. Само определение, в свою очередь, также состоит из двух частей: свойства и его значения, разделенных знаком двоеточия (:). Назначение свойства очевидно из его названия. В приведенном правиле селектором является элемент HI, а определение, записанное в фигурных скобках, задает значения двух свойств заголовка первого уровня: цвет шрифта (свойство color) определен как синий (значение blue) и размер шрифта (свойство font-size) определен в 16 пунктов (значение I6pt). В одном правиле можно задать несколько определений, разделенных символом точка с запятой (;), как это демонстрируется в приведенном примере. Созданная только что таблица стилей влияет на форматирование элемента определенного типа: заголовок первого уровня. Ее комбинация с другими таблицами стилей определяет окончательное представление документа при его просмотре в окне браузера. Предупреждение Синтаксис правил каскадных таблиц стилей не чувствителен к регистру. Селекторы, свойства и их значения можно задавать как строчными, так и прописными буквами, или в смешанном порядке. Однако каскадные таблицы стилей чувствительны к синтаксису задания правил и правильности названий свойств, значений и селекторов. Любая грамматическая ошибка приводит к тому, что правило пропускается анализатором браузера, и никакого предупреждающего сообщения не появляется. Авторы страниц HTML должны писать свои таблицы стилей, только если они хотят придать документу вид, отличный от вида, предоставляемого умалчиваемой таблицей стилей браузера. Встраивание таблиц стилей в документ Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML-документом. Существует четыре способа связывания документа и таблицы стилей: 1. Связывание — позволяет использовать одну таблицу стилей для форматирования многих страниц HTML. 2. Внедрение — позволяет задавать все правила таблицы стилей непосредственно в самом документе. 3. импортирование — позволяет встраивать в документ таблицу стилей, расположенную на сервере. 4. Встраивание в теги документа — позволяет изменять форматирование конкретных элементов страницы. Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тега <LINK>, задаваемого в разделе <HEAD>: <LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css"> Связываемый файл содержит набор правил каскадных таблицей стилей, определяющих форматирование документа, и должен иметь расширение CSS. Связывание позволяет разработчику применить одинаковый набор правил форматирования к группе HTML-документов, что приводит к единообразному отображению различных документов и придает некоторую системность серверу разработчика. При внедрении таблицы стилей в документ правила, ее составляющие, задаются в стилевом блоке, ограниченном тэгами <STYLE TYPE="text/css"> и </STYLE>, который должен размещаться в разделе <HEAD> документа: <HEAD> <STYLE TYPE="text/css"> <!---
---> </STYLE> </HEAD> Обычно браузеры, не поддерживающие какие-либо тэги, игнорируют их, интерпретируя, однако, их содержимое в том виде, в каком оно задано, что может приводить к ошибкам. Поэтому, как обычно, следует задавать содержимое тэгов, которые потенциально не обрабатываются старыми версиями браузеров, заключенным в тег комментария <!-- ... -->. В приведенном выше примере встроенная таблица стилей определяет отображение всех абзацев в документе (элемент P) на сером фоне с центрированными строками. Полужирный текст, определяемый любым элементом в (тэг <в>) документа, будет отображаться прописными буквами, даже если в документе он задан строчными. В тэге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей: @import: url(mystyles.ess); Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значением свойства @import является URL-адрес файла таблицы стилей. Последний способ задания значений свойств таблицы стилей предназначен для оперативного форматирования определенного элемента документа и называется внедрение. Каждый тег HTML имеет параметр STYLE, в котором можно задать значения его свойств в соответствии с синтаксисом каскадных таблиц стилей. Например, в следующем примере задается форматирование заголовка первого уровня, определяющее его отображение шрифтом красного цвета: <Н1 STYLE="color: геd">3аголовок отображается шрифтом красного цвета</H1> Если связанные, внедренные и импортируемые таблицы стилей влияют на форматирование всех элементов документа, для которых определены в таблицах правила, то встраивание определений стилей в конкретный тег влияет на отображение только элемента, определяемого данным тэгом. Совет Рекомендуется избегать встраивания в теги документа определений форматирования, так как подобная техника лишает разработчика преимуществ задания таблиц стилей в отдельном файле или в головной части документа, где их можно легко и быстро откорректировать, в случае необходимости. При форматировании отдельных тегов придется просмотреть весь документ целиком, что требует достаточно большой и кропотливой работы. Все способы встраивания таблиц стилей свободно сочетаются в одном документе. Например, можно разработать главную таблицу стилей для всех документов и связывать ее с каждым HTML-документом. импортируемая или внедряемая таблица стилей будет уточнять форматирование элементов конкретного документа, а встраиваемые в тег определения форматирования будут уточнять их отображение. Правила каскадных таблиц стилей состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило. Например, следующие правила H1 {font-family: Arial} Н2 {font-family: Arial} НЗ {font-family: Arial} можно сгруппировать и задать в виде одного правила со списком селекторов H1, H2, НЗ {font-family: Arial} Аналогично группируются определения, только в списке они разделяются точками с запятой (;). Следующие правила форматирования заголовка первого уровня H1 {font-weight: bold} H1 {font-size: 14pt} H1 {font-family: Arial} можно задать в виде одного правила, сгруппировав определения: H1 {font-weight: bold;
Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так: H1 {font: bold 14pt Arial} При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения ее размеров. В HTML некоторые элементы могут содержать другие. Как будет отображаться элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет? Например, пусть цвет шрифта абзаца определен как синий (p {color: blue}). Как будет отображаться выделенный элемент текста, задаваемый тэгом <ЕМ>, если для него не определено правило форматирования? В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. В нашем примере выделенный элемент будет также отображаться синим цветом. Другие свойства ведут себя аналогично свойству color, например font-family, font-size. Некоторые свойства не наследуются вложенными элементами от своих родителей, например свойство background, но по умолчанию вложенные элементы будут отображаться с фоном родительского элемента. Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тэгом <BODY> : BODY {
} Приведенные правила задают форматирование документа по умолчанию: черным шрифтом гарнитуры Times New Roman с фоном, задаваемым графическим файлом texture.gif, или на белом фоне, если файл не доступен. Примечание Приведенное задание правил форматирования по умолчанию будет работать всегда, даже если разработчик пропустит в документе тег <BODY>, что допускается стандартом языка HTML, так как синтаксический анализатор HTML всегда вставляет пропущенный тег <BODY>. Правила каскадных таблиц стилей, в которых в качестве селектора используются теги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчеркивания все ссылки (тэг <А>) в документе: <STYLE TYPE="text/css"> <!--- А { text-decoration:none; } --> </STYLE> А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в тэге, а можно применить параметр CLASS, добавленный в HTML 4.0 в качестве стандарта для всех тэгов. Значением параметра CLASS является ссылка на класс, задаваемый в таблице стилей. Класс позволяет задать разные правила форматирования для одного элемента определенного типа или всех элементов документа. имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тега применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня: <STYLE TYPE="text/css"> <!--- HI.red { color: red; } Hl.blueBgrd { color: red; background-color: blue} ---> </STYLE> В тексте документа ссылка на соответствующий класс задается в параметре CLASS: <Н1 CLASS="red">Kpacный шрифт</H1> <Н1 CLASS="blueBgrd">Kpacный шрифт на синем фоне</H1> Примечание Имя класса в параметре CLASS задается без лидирующей точки. Оно может быть заключено в двойные или одинарные кавычки, или задаваться вообще без кавычек, например CLASS=red. В приведенном примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задается имя класса с лидирующей точкой без указания конкретного элемента: <STYLE TYPE="text/css"><!--- .red { color: red; } .blueBgrd { color: red; background-color: blue} ---></STYLE> Теперь два класса red и blueBgrd можно применять к любым элементам документа: <Р CLASS=red>nepвый абзац</Р> <Р CLASS=blueBgrd>Bтopoй абзац</Р> Первый абзац отобразится красным шрифтом, а второй — красным шрифтом на синем фоне. Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но он задает уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа. Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #: <STYLE TYPE=" text/ess" ><!--- #par24 { letter-spacing: lem; } Hl#form3 { color: red; background-color: blue} --></STYLE> <BODY> <P 10=раг24>Разреженные слова в абзаце</Р> <Н1 10=£огто2>Черный шрифт</H1> В этом примере абзац идентифицирован именем раг24 в параметре ID, поэтому к нему применимо правило с селектором #раг24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию. Совет Для организации связи с правилами форматирования следует избегать использования идентификаторов конкретных элементов страницы, задаваемых в параметре ID. Если действительно необходимо отформатировать конкретный элемент, лучше использовать технику встраивания правил форматирования в тэг. При разработке страниц HTML часто приходится одни элементы вкладывать в другие, например, выделять слова тэгом <ЕМ> в каком-нибудь абзаце, задаваемом тэгом <P>. В этом случае говорят, что элемент P порождает элемент ЕМ и является его предком, а сам элемент ЕМ является потомком элемента P. Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство color). Чтобы вложенные элементы отображались со своими значениями свойств, можно определить для них правила форматирования, как показано ниже: <P> {color: blue} <ЕМ> (color: yellow} Однако это приведет к тому, что все выделяемые в документе элементы будут отображаться шрифтом желтого цвета. А если необходимо, чтобы выделяемые только в абзаце элементы отображались желтым цветом, а в других частях документа каким-то другим цветом? Здесь помогут контекстные селекторы. Поставленную задачу решит следующее правило: P EM {color: yellow} Контекстный селектор состоит из нескольких простых, разделенных пробелами. интерпретатор браузера просматривает в стеке все открытые элементы, находит элементы ЕМ, порожденные элементом p, и применяет к ним указанное правило форматирования. Таким образом, правила с контекстными селекторами задают исключения из общих правил форматирования элементов документа, определенных с простыми селекторами. Обычно правила форматирования присоединяются к элементу страницы, имеющему определенное положение в структуре документа. Концепция псевдоклассов и псевдоэлементов расширяет адресацию правил форматирования, позволяя внешней информации влиять на процесс форматирования. Псевдоклассы и псевдоэлементы можно использовать в селекторах правил форматирования, однако реально в исходном тексте документа HTML они не существуют. Вернее, они как бы вставляются браузером при определенных условиях в документ, и на них можно ссылаться в таблицах стилей. их называют классами и элементами, так как это удобный способ описания их поведения. Говоря точнее, их поведение определяется фиктивной последовательностью тэгов. Псевдоэлементы применяются для адресации некоторых частей элементов, тогда как псевдоклассы позволяют таблицам стилей для элементов разных типов применять разные процедуры форматирования. Примечание В браузерах Internet Explorer и Netscape Navigator реализованы только псевдоклассы для элементов связей А. Псевдоэлементы в них не используются вообще. Связь в документе HTML определяется тэгом <А> с параметром HREF. Обычно браузеры отображают посещенные связи отлично от непосещенных (например, разными цветами). Уровень 1 каскадных таблиц стилей регламентирует правила для отображения связей через псевдоклассы элемента А: A:link { color: red } /* непосещенная связь */ A:visited { color: blue } /* посещенная связь */ A:active { color: green } /* активная связь */ A:hover { color: lime } /* связь, на которой расположен курсор мыши */ Любую связь в документе можно отнести к одному из перечисленных классов. Активная связь — это связь, которая выбрана в данный момент. Примечание Комментарии в каскадных таблицах стилей задаются аналогично комментариям в языке С: текст, заключенный между символами /* и */, является комментарием. Примечание Псевдокласс hover включен в каскадные таблицы стилей, уровень 2, который частично реализован в Internet Explorer 4.01. В приведенном примере задается отображение непосещенных связей красным цветом, посещенных — синим, активных — зеленым. Если курсор мыши будет расположен над связью, то ее цвет изменится на ярко-зеленый. Предупреждение Браузер Internet Explorer 4.01 правильно реализует псевдоклассы связей, тогда как Netscape Navigator 4.0 не воспринимает псевдоклассы active и hover. Так как псевдоклассы применяются к единственному типу элементов А, то при задании их в селекторе правил этот элемент можно опустить. Следующие два правила равносильны: A:link { color: red } /* непосещенная связь */ :link { color: red } /* непосещенная связь */ К одному документу можно присоединить несколько таблиц стилей, которые одновременно будут влиять на представление документа в окне браузера. Этот принцип является основополагающим принципом применения каскадных таблиц стилей, и можно указать на две причины, по которым он рекомендован группой разработчиков Консорциума W3: 1. Реализация модульности — разработчики таблиц стилей могут комбинировать таблицы стилей, каждая из которых отвечает за определенный этап форматирования документа. Например, в одной таблице можно определить все правила форматирования шрифтов, во второй — правила позиционирования элементов и т. д. 2. Соблюдение равновесия между авторской разработкой и пристрастиями читателя — и авторы страниц, и читатели могут влиять на представление страницы через таблицы стилей. Пользователь может определить собственные правила отображения элементов документа в своих личных таблицах стилей, а браузер, на основании механизма приоритетности, будет использовать те или иные правила из таблиц пользователя или автора страницы. Но как взаимодействуют правила, определяющие форматирование одинаковых элементов и заданные в разных таблицах? Может, например, оказаться, что в связанной таблице цвет шрифта определен как черный, в импортируемой как красный, а во встроенной как синий, — какой цвет шрифта будет иметь документ, отображаемый в браузере? Подобные конфликты разрешаются с использованием принципа приоритетности разных таблиц стилей. Таблицы выстраиваются в цепочку приоритетности (от низшего к наивысшему), образуют каскад, по которому документ "прокатывается" и постепенно форматируется на основе правил таблиц стилей, образующих каскад. Говорят, что правила, определенные в таблице с большим приоритетом, имеют больший вес. По умолчанию веса правил читателя всегда меньше весов правил, определенных в таблицах разработчика документа. То есть, если возникает конфликт между правилами, определенными в документе, и правилами, определенными в личных таблицах стилей пользователя, применяться будут первые. Правила читателя и автора всегда перекрывают установки по умолчанию значений свойств используемого браузера. Приоритетность импортируемых таблиц стилей зависит от порядка их импортирования в документ. В таблице стилей можно использовать несколько операторов @import. Каждый последующий оператор импортирует таблицу стилей с более высоким приоритетом по отношению к предыдущим, и поэтому ее правила имеют больший вес. импортируемые таблицы стилей сами могут импортировать и перекрывать другие таблицы. Любые правила, определенные непосредственно в самом документе, перекрывают правила импортируемых таблиц стилей. Обычно все операторы @import задаются в таблице стилей до определений правил, а это как раз и показывает, что правила самой таблицы перекрывают правила импортируемых таблиц. Можно увеличить вес правила с помощью значения important, которое задается после значения свойства, вес которого необходимо увеличить: Hi (color: red ! important; background: white ! important} В приведенном примере оба свойства имеют увеличенный вес. Правило читателя со значением important перекрывает аналогичное правило автора, заданное без увеличения веса. Авторское правило со значением important перекрывает аналогичное правило читателя с увеличенным весом. Разрешение конфликтов осуществляется на основе внутреннего механизма, реализованного в каскадных таблицах стилей. Для определения значения комбинации элемент-свойство используется следующий механизм: 1. ищутся все определения, применяемые к рассматриваемой комбинации элемент-свойство. Определения применяются, только если селектор соответствует рассматриваемому элементу. Если невозможно применить ни одно определение, используется наследуемое значение свойства. Если не определено наследуемое значение (это справедливо в случае элементов HTML и свойств, которые не могут наследоваться), используется начальное значение. 2. Определения сортируются по явно заданным весам: определения со значением important имеют больший вес по сравнению с нормальным (без увеличения веса) определением. 3. Определения сортируются по своему происхождению: авторские таблицы стилей перекрывают таблицы стилей читателя, которые, в свою очередь, перекрывают установки значений свойств по умолчанию браузера. импортируемая таблица стилей имеет одинаковое происхождение с таблицей, из которой она импортирована. 4. Определения сортируются по специфичности селектора: селектор с большим числом специфичности перекрывает селектор с меньшим числом специфичности. Для определения числа специфичности селектора определения подсчитывают количество параметров ID (а), параметров CLASS (b) и названий тегов (с) в селекторе. Составляется число abc, которое и определяет специфичность данного определения. Несколько примеров, взятых из рекомендаций REC-CSS1-19990111, приведено ниже: LI {...}/* а=0 b=0 с=1 --> специфичность = 1 */ UL LI {...}/* а=0 b=0 с=2 --> специфичность = 2 */ UL OL LI {...}/* а=0 b=0 с=3 --> специфичность = 3 */ LI.red {...} /*а=0 b=1 с=1 --> специфичность = 11 */ UL OL LI.red {...} /*а=0 b=1 с=3 --> специфичность = 13 */ #х34у {...}/* а=1 b=0 с=0 --> специфичность = 100 */ Псевдоклассы и псевдоэлементы считаются как нормальные элементы и классы, соответственно. 5. Определения сортируются по порядку их задания в таблице стилей: если два правила имеют одинаковый вес, заданное позже правило имеет приоритет. Правила в импортированных таблицах стилей считаются задаваемыми до любого правила в таблице стилей, из которой она импортируется. При определенном навыке применение алгоритма приоритетности правил не представляет труда. Для новичков можно просто запомнить следующую приоритетность правил (от низшего к высшему): связанная таблица стилей, импортируемая таблица стилей, правило с элементом HTML в качестве селектора, правило с параметром CLASS в качестве селектора, правило с параметром ID в качестве селектора, встроенное в тег HTML правило. Для начальных разработок таблиц стилей этих правил вполне достаточно. Для правильного применения правил форматирования следует представлять, как в каскадных таблицах стилей происходит форматирование элементов, т. е. на что можно влиять и что можно изменять в отображении элемента. Модель форматирования каскадных таблиц стилей ориентирована на представление любого элемента HTML в окружении вложенными прямоугольными блоками, как показано на рис. 10.2. 
Рис. 10.2. Блоковая модель форматирования абзаца Блок содержимого элемента (самый внутренний блок) отделен от границы отступами. Самым внешним блоком является поле. Свойства таблиц стилей позволяют устанавливать размеры и цвета всех блоков, составляющих в сумме отображаемый элемент. Поле всегда является прозрачным прямоугольником, поэтому его цвет наследует цвет родителя элемента (для абзаца это элемент BODY). Отступ всегда имеет цвет фона самого элемента. Все перечисленные блоки в совокупности составляют блок форматирования, или отображения элемента, т. е. видимое в окне браузера изображение элемента. Размеры блока форматирования элемента складываются из размеров самого элемента и размеров отступов, границы и полей. С точки зрения процесса форматирования документа существуют два типа элементов: блоковые и встроенные. Каждый элемент в модели форматирования имеет свойство display, значение которого определяет, отображается или не отображается (none) элемент, является ли он блоком (block), списком (list-item) или встроенным элементом (inline). Элементы co значением свойства display равным block или list-item, а также элементы со значением свойства float, отличным от none (не "плавающие" элементы), являются блоковыми элементами. их форматирование связано с установкой значений соответствующих параметров вложенных блоков, составляющих элемент в целом. На рис. 10.3 показаны все параметры, доступные в модели форматирования каскадных таблиц стилей для блоковых элементов. 
Рис. 10.3. Параметры форматирования блоковых элементов Примечание Параметры "верх" (top) и "низ" (bottom) не применяются к блоковым элементам, они существуют только для встроенных (inline) элементов, речь о которых пойдет ниже. Ширина (width) элемента — это ширина блока содержимого, и определяется как расстояние между левым и правым внутренними краями. Высота (height) элемента — расстояние между внутренним верхом и низом. При вертикальном форматировании блоковых, не "плавающих" элементов значения параметров "верхнее поле" и "нижнее поле" определяют минимальное расстояние до границ блоков окружающих их элементов. Если у двух примыкающих элементов определены не нулевые значения параметров полей, то при вертикальном форматировании поля двух элементов сливаются в одно со значением, равным максимальной высоте поля одного из двух элементов. Подобное слияние можно наблюдать для элементов LI списка UL или OL. Горизонтальное форматирование элемента определяется значениями семи свойств: левое поле (margin-left), левая граница (border-left), левый отступ (padding-left), ширина (width), правый отступ (padding-right), правая граница (border-right) и правое поле (margin-right). Сумма значений этих семи параметров всегда равняется ширине элемента-родителя или ширине окна браузера, если элемент не вложен в другой элемент. По умолчание параметр width имеет значение auto. Если элемент не является замещаемым (в тэге элемента задан параметр SRC), то браузер вычисляет ширину элемента из условия равенства суммы значений семи указанных выше параметров ширине элемента-родителя. Для замещаемого элемента значение ширины автоматически заменяется шириной замещаемого элемента, если только значение ширины установлено в auto. В противном случае размер замещаемого элемента подгоняется под заданную в параметре ширину (процедура подгонки зависит от браузера). Чтобы удовлетворить условию равенства суммы значений семи параметров ширине элемента-родителя или окна браузера, в рекомендациях Консорциума W3 определено, в каких случаях значения каких параметров устанавливаются браузером в auto. Свойство float может переводить любой элемент в разряд "плавающих". Это приводит к тому, что указанный элемент выводится из нормального потока отображения и форматируется как блоковый элемент. Например, установка свойства float элемента <IMG> равным left позволяет создать буквицу при выводе абзаца текста, как показано на рис. 10.4. 
Рис. 10.4. Плавающий элемент IMG, представляющий букву Ж При значении свойства float равным left, элемент сдвигается влево до поля, отступа или границы другого блокового элемента, а нормальный поток отображения будет обтекать его с правой стороны. Текст файла HTML для приведенного примера представлен ниже. Пример 10.1. Буквица в тексте <HEAD> <STYLE TYPE="text/css"><!--- IMG {float: left} ---></STYLE> </HEAD> <P><IMG SRC=Ж.gif> или-были в далекие времена далеко на Севере большие и сильные люди. При одном только их виде дрожали все, обитавшие в округе племена. </Р> Таблица стилей определяет все элементы IMG как плавающие элементы со смещением влево. Встроенная в абзац картинка, смещаясь влево, образует буквицу абзаца. Элементы, которые не форматируются как блоковые, являются встроенными (inline) элементами. Они совместно с другими элементами используют область строки. Обычно, выделяемые в строке элементы (ЕМ, STRONG, B и т. д.) классифицируются как встроенные. Рассмотрим пример задания встроенных элементов в блоковый элемент абзац P: <P>В абзац можно помещать <В STYLE='background-color: lightsteelblue'>страиваемые элементы</В>. их может быть <ЕМ STYLE='background-color: lighteelblue'>несколько</ЕМ>.</Р> Если ширина абзаца достаточна для отображения всех встроенных элементов в строке, то они отобразятся в одной строке. Если ширина недостаточна, то некоторые элементы могут быть разбиты на два и отображены в двух строках (рис. 10.5). 
Рис. 10.5. Отображение встраиваемых элементов Свойства форматирования элементов В каскадных таблицах стилей, уровень 1 и 2 (CSS1 и CSS2), все доступные свойства форматирования элементов в документе HTML разбиты на 9 категорий, представленных в табл. 10.1. Категории или свойства, появившиеся во втором уровне каскадных таблиц стилей, отмечены верхним индексом 2. Таблица 10.1. Категории свойств элементов
Прежде чем переходить к описанию свойств форматирования, остановимся на единицах измерения, используемых для задания значений свойств. Для задания значений свойств, определяющих некоторые размеры, в каскадных таблицах стилей применяются относительные и абсолютные единицы измерения длины. Относительные единицы задают длину относительно значения другого свойства, определяющего длину. Документы, в которых таблицы стилей используют относительные единицы измерения, более приспособлены для отображения на разных устройствах (например, дисплей или лазерный принтер). Абсолютные единицы измерения полезны только тогда, когда известны физические характеристики устройства отображения. В табл. 10.2 отображены единицы измерения, используемые в таблицах стилей. Таблица 10.2. Единицы измерения в таблицах стилей
Примечание Относительные единицы измерения em и ех во всех свойствах вычисляются относительно высоты шрифта элемента. Единственное исключение — свойство font-size, в котором эти единицы относятся к высоте шрифта элемента-родителя. Примечание Пикселы являются единицами измерения, относящимися к разрешению дисплея компьютера. Если плотность пикселов на устройстве вывода сильно отличается от типового дисплея, браузер должен переопределить эту единицу. Новая единица, ссылочный пиксел, — это угол, под которым виден один пиксел монитора с плотностью 90dpi с расстояния вытянутой руки пользователя (28 дюймов). В качестве значений цветов можно использовать зарезервированные ключевые слова HTML для определения наиболее употребительных цветовых оттенков (например, aqua, black, white и т. п.) или использовать цветовую модель RGB. Примеры способов задания цветовых оттенков приведены ниже:
Для задания URL-адреса ресурса используется функциональная запись url(...): BODY { background: url(http://www.bhv.ru/CSS/logo.gif) } Скобки, запятые, пробелы, одинарные и двойные кавычки в URL-адресе задаются с предшествующей обратной косой чертой (\), \ (, \,). Примечание В каскадных таблицах стилей частичный URL-адрес интерпретируется относительно месторасположения таблицы стилей, а не относительно расположения документа. Выбор подходящего шрифта для отдельных частей документа является од ним из наиболее часто выполняемых действий в процессе разработка HTML-документа. Шрифты различаются по своему внешнему виду (начертанию), по размеру, по стилю (прямой, курсив или наклонный) и по "жирности" отображения (нормальный, полужирный). Каскадные таблицы стилей предоставляют в распоряжение разработчика набор свойств для установки всех перечисленных параметров шрифтов. Кроме того, уровень 2 каскадных таблиц стилей позволяет загружать отсутствующие на компьютер! читателя шрифты непосредственно с сервера, на котором расположен документ. Свойство font-family задает приоритетный список семейств шрифтов и/или типовых семейств шрифтов. Если использовать для отображения страницы один определенный шрифт, то может оказаться, что этот шрифт не поддерживает некоторые символы, содержащиеся на странице, или на компьютере пользователя нет вообще этого шрифта. Для разрешения подобных проблем это свойство позволяет разработчику страницы задать список шрифтов одного стиля и размера, среди которых браузер может искать необходимый символ. В отличие от других свойств каскадных таблиц стилей названия семейств в списке отделяются запятыми, чтобы показать их альтернативность: BODY {font-family: TimesDL, "Times New", serif} При интерпретации HTML-страницы браузер сначала ищет на компьютере пользователя шрифт TimesDL. Если такой шрифт отсутствует, то браузер пытается применить шрифт Times New, а если и он не найден, то используется любой шрифт из семейства шрифтов serif— одного из типовых семейств шрифтов компьютера. Понятие типовых семейств шрифтов введено в каскадные таблицы стилей с целью реализации наихудшего варианта отображения страницы, если не найдены специально использованные автором шрифты. В любой реализации каскадных таблиц стилей должны существовать пять типовых семейств шрифтов, которые соответствуют реальным шрифтам, обычно устанавливаемым на большинстве компьютеров:
имена шрифтов, состоящих из нескольких слов, должны заключаться в кавычки: BODY {font-family: "Times New Roman", serif} <BODY STYLE="font-family: 'Times New "Roman1, serif"> Предупреждение Следует использовать кавычки разных типов при задании последовательности всех определяемых свойств в параметре STYLE и при задании имени шрифта в свойстве font-family. Свойство font-style определяет стиль шрифта из выбранного семейства: нормальный (normal), курсивный (italic) или наклонный (oblique). Нормальный шрифт — это обычный прямой шрифт, используемый для печати документов. Курсивный стиль шрифта напоминает каллиграфические этюды в прописях первоклассников и близок к рукописному. Наклонные шрифты генерируются из обычных прямых шрифтов небольшим наклоном символов. Обычно в базе шрифтов браузера все шрифты, в именах которых встречаются слова Oblique, Slanted или Incline отмечены как наклонные (oblique) шрифты. Шрифты, в названиях которых присутствуют слова Italic, Cursive или Kursiv, отождествляются браузером с курсивными (italic). Следующие правила определяют курсивный стиль шрифта заголовка первого уровня и нормальный, прямой шрифт выделенных частей заголовка: HI {font-style: italic} HI EM {font-style: normal} Каскадные таблицы стилей реализуют еще одну вариацию шрифта выбранного семейства — капитель (small-caps). В шрифте этого стиля все строчные буквы выглядят как прописные, но меньшего размера и с немного измененными пропорциями. Значение normal свойства font-variant не изменяет вида шрифта, а значение small-caps выбирает вариант капитель шрифта. Рекомендации по каскадным таблицам стилей допускают создание шрифта капитель простой заменой строчных букв масштабированными символами верхнего регистра. Следующие правила задают отображение заголовка четвертого уровня капителью с наклонной капителью в выделенных частях: Н4 {font-variant: small-caps} EM {font-style: oblique} Примечание Свойство font-variant наследуется элементом ЕМ от своего родителя — поэтому в приведенном примере выделенные части заголовка будут отображаться наклонной капителью. Это свойство выбирает из заданного семейства шрифт определенной жирности. В рекомендациях регламентируется 9 градаций жирности шрифта, задаваемых числами 100, 200 и так далее до 900. Значение 100 соответствует самому "бледному" шрифту, тогда как 900 — самому "жирному". Для задания нормального шрифта используется ключевое слово normal, что соответствует цифровому значению 400. Значение bold применяется для выбора общепринятого полужирного начертания шрифта и его цифровым эквивалентом является 700. Выбор определенной градации жирности шрифта не означает, что в семействе существует шрифт с заданной жирностью. Единственное, что гарантируется, — это то, что шрифт с большим значением жирности не светлее предыдущего значения. Некоторые семейства имеют только две градации жирности: нормальную и полужирную. Это свойство определяет размер шрифта. Его значение может быть абсолютным или относительным. Абсолютное значение можно задать одним из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large, которые являются индексами в таблице размеров шрифтов, поддерживаемой браузером. Масштабирующий множитель соседних значений в уровне 1 каскадных таблицах стилей определялся как 1.5, а в уровне 2 его значение рекомендовано равным 1.2. Это означает, что шрифт размера large в 1.2 раза выше шрифта medium и в 1.2 ниже шрифта x-large. По умолчанию браузер использует значение medium. Абсолютное значение можно задать и в виде абсолютного значения длины, например 10pt, но в этом случае высота шрифта не зависит от хранимой таблицы размеров шрифтов браузера. Ключевые слова для задания относительного размера шрифта интерпретируются относительно таблицы размеров шрифтов и размера шрифта элемента-родителя. Возможными значениями могут быть: larger и smaller. Например, если родитель имеет размер шрифта medium, то значение larger сделает шрифт текущего элемента равным large. Относительный размер шрифта можно задать также в процентах к размеру шрифта родителя или в относительных единицах длины: P {font-size: 10pt) ЕМ {font-size: 120%} ЕМ {font-size: 1.2em} Два последние правила для выделенного в абзаце элемента ЕМ определяют одинаковую высоту шрифта 12pt. Основное назначение свойства font — установить в одном определении значения свойств font-style, font-variant, font-weight, font-size, line-height и font-family. Все значения перечисленных свойств задаются через пробелы в том порядке, как они перечислены выше. Первые три свойства могут не задаваться, что соответствует установке их значений в normal. Размер шрифта и высота строки (свойство line-height) задаются через косую черту. Элементы списка семейств шрифтов свойства font-family задаются через запятую: P {font: oblique 12pt/14pt "Times Cyr", serif} В этом примере для абзаца задается наклонный шрифт Times Cyr высотой 12 пунктов. Высота строк — 14 пунктов. Если не найден шрифт Times Cyr, то применяется любой шрифт типового семейства serif. Это свойство введено в каскадные таблицы стилей в рекомендациях уровня 2. Оно предназначено для задания семейства шрифта. Если указанный шрифт отсутствует на компьютере пользователя, то он загружается из сети по заданному вторым параметром URL-адресу: @font-face {font-family: CoolFont; src:url(http://myserver.com/CoolFont.eot);} Примечание Все свойства шрифтов являются наследуемыми и применяются ко всем элементам документа HTML. Свойства этой категории определяют цвет и фон элемента. Фон можно задать в виде цвета или изображения. В случае изображения указывается его положение, как оно повторяется и фиксировано ли оно или прокручивается вместе с прокруткой содержимого окна браузера. Для установки цвета текста элемента существует единственное свойство color. Его значением является цвет, задаваемый с помощью ключевых слов или rgb-функции: <P> {color: blue} <ЕМ> {color: rgb(0,0,255)} Оба правила в примере устанавливают синий цвет текста соответствующих элементов. Для установки параметров фона элемента существует несколько свойств, задающих значения индивидуальных параметров фона, и свойство background, в котором можно установить одновременно все значения параметров фона. Цвет фона определяется значением свойства background-color, а изображение, используемое в качестве фона, задается свойством background-image. Начальным значением свойства background-color является transparent, которое определяет фон элемента как прозрачный. Значением свойства background-image является абсолютный или относительный адрес файла изображения, используемого в качестве фона. Если это свойство определено, то рекомендуется задать также и цвет фона, который будет использоваться в случае недоступности файла изображения. BODY {background-color: lightsteelblue;
<P> {background-image: none} В приведенном примере задается адрес файла изображения для фона тела документа и явно указывается отсутствие фона для абзацев документа. Если фон задан в виде изображения, то свойство background-repeat определяет его повторяемость и способы повторяемости. Допустимыми значениями являются repeat (повторяемость и по вертикали, и по горизонтали), repeat-x и repeat-y (повторяемость соответственно по горизонтали или вертикали) и no-repeat (изображение не повторяется). В следующем примере BODY {background-color: lightsteelblue;
задается повторяемость изображения фона по вертикали. Свойство background-attachment определяет, будет ли фон, на котором отображается документ, оставаться неподвижным при прокрутке содержимого окна браузера или он будет прокручиваться вместе с документом. В первом случае реализуется эффект перемещения содержимого окна над неподвижным рисунком. Значение fixed оставляет фон неподвижным, а значение scroll заставляет его перемещаться вместе с содержимым документа при прокрутке. Пример закрепленного в окне браузера изображения фона представлен ниже: BODY {background-color: lightsteelblue;
Свойство background-position определяет начальное положение изображения, используемого в качестве фона, в блоке содержимого элемента. Значением этого свойства являются координаты привязки определенных точек изображения и блока содержимого. их можно задавать в процентах, в абсолютных единицах длины, а также с использованием комбинаций ключевых значений. Пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных, например10% 80%, помещает точку изображения, расположенную на расстоянии в 10% ширины от левого края и в 80% высоты от верхнего края, в точно такую же точку блока содержимого элемента. Пара абсолютных значений, например 10mm 10mm, размещает верхний левый угол изображения на 10 мм правее и на 10 мм ниже левого верхнего угла блока содержимого. Ключевые значения и их допустимые комбинации вместе с эквивалентными числовыми значениями представлены в табл. 10.3. Таблица 10.3. Допустимые комбинации ключевых значений
Свойство background позволяет одновременно устанавливать значения свойств background-color, background-image, background-repeat и background-attachment. Все допустимые значения индивидуальных свойств задаются в виде списка, элементы которого отделены пробелами. Если значение какого-либо свойства не задано, то оно устанавливается в начальное значение, определяемое браузером: BODY {background: lightsteelblue url(/image/image.gif) center} Это правило устанавливает цвет и изображение фона, а также положение изображения в окне браузера. Остальные свойства фона принимают начальные значения. Примечание Свойство color наследуется по обычным правилам. Все свойства, определяющие параметры фона, не наследуются, но фон элемента-родителя будет отображаться по умолчанию, так как начальным значением свойства backround-color является transparent (прозрачный). Свойства данной категории влияют на отображение символов, слов и абзацев. Они определяют расстояние между словами и буквами в словах, задают отступы и высоту строк в абзацах. Свойство letter-spacing влияет на расстояние между символами при отображении текста. Его значение, задаваемое в единицах длины, определяет пробел, добавляемый к установленному по умолчанию пробелу между символами. На рис. 10.6 показано отображение текста с установками по умолчанию и с увеличенным на 0.5ет пробелом между символами: <Р STYLE="letter-spacing: 0.5em"> Слово слово слово слово слово </р> 
Рис. 10.6. Абзац с увеличенным расстоянием между символами Примечание Браузер увеличивает не только расстояние между символами слов, но и расстояние между словами. Каскадные таблицы стилей позволяют преобразовывать текст. Если значение свойства text-transform равно capitalize, то все слова отображаются с прописной буквы. Значения uppercase и lowercase этого свойства приводят, соответственно, к преобразованию всех букв в прописные или строчные, независимо от их задания в тексте документа HTML. Свойство text-decoration задает подчеркивание, надчеркивание или перечеркивание текста. Соответствующие значения этого свойства следующие: underline, overline и line-through. Выравнивание текста в блоке содержимого элемента определяется значением свойства text-align. Текст выравнивается по левому краю при значении left, по правому краю — при значении right и по центру — при значении center. Предупреждение Текст выравнивается относительно блока содержимого элемента, а не относительно окна отображения браузера. Отступ первой строки элемента задается значением свойства text-indent, которое определяет величину отступа в абсолютных или относительных единицах длины. Свойство vertical-align определяет положение элемента по вертикали относительно элемента-родителя. Его значением может быть любое ключевое слово из табл. 10.4. Таблица 10.4. Ключевые значения выравнивания по вертикали
Значения этого свойства, заданные в виде процентов, вычисляются относительно высоты строки (свойство line-height) самого элемента. Они поднимают базовую линию (или низ элемента, если он не имеет базовой линии) на заданную высоту относительно базовой линии элемента-родителя, если значение положительно, и опускают, если значение отрицательно. Расстояние между базовыми линиями двух соседних строк (высота строки) задается установкой значения свойства line-height. Числовое значение этого свойства определяет высоту строки, вычисляемую умножением размера шрифта текущего элемента на заданное число. Примечание Все текстовые свойства, кроме свойств text-decoration и vertical-align, наследуются элементами-потомками от родителей. Свойства этой категории устанавливают параметры блоковых элементов (см. выше раздел "Модель форматирования"). Среди них можно выделить три больших группы, форматирующих блоки полей, границ и отступов, причем группу, работающую с границей, можно подразделить еще на четыре группы, устанавливающие значения цвета, стиля, ширины и одновременно всех перечисленных свойств границы. Все эти группы отличает то, что в них включены свойства для задания параметров верхних, нижних, правых, левых и одновременно всех четырех частей соответствующих блоков форматирования элемента. Совет При знакомстве со свойствами блоковых элементов желательно иметь перед глазами схему параметров форматирования блоковых элементов, схематически представленную на рис. 10.3. В группу форматирования поля входят свойства, устанавливающие ширину верхнего (margin-top), Правого (margin-right), нижнего (margin-bottom) и левого (margin-left) поля элемента. В свойстве margin можно одновременно установить значения всех четырех параметров поля элемента. Ширина соответствующих полей задается значением длины или в процентах от ширины ближайшего элемента-родителя. Начальные значения всех полей равны 0. Если в свойстве argin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определено только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трех значений недостающие значения берутся из установок противоположных сторон. Например: BODY {margin: 1em 2em} /* верх и низ = 1em, право и лево = 2em */ Ширина верхнего, правого, нижнего и левого отступа определяется значением, соответственно, свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding позволяет одновременно установить значения всех четырех отступов элемента. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству. Ширину верхней, правой, нижней или левой границы задают соответственно свойствами border-top-width, border-right-width, border-bottom-width и border-left-width. Значения свойства border-width определяют ширину границы элемента для всех перечисленных ее частей. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству. Значениями этих свойств могут быть ключевые параметры thin, medium и thick или значение длины. Ширина границы, определяемая ключевыми параметрами, зависит от браузера. Единственное, что можно гарантировать, — это то, что ширина thin не больше ширины medium, которая, в свою очередь, не больше ширины thick. Цвета частей границы задаются значениями свойств border-top-coior, border-right-color, border-bottom-color и border-left-color. свойство border-color определяет цвета всех частей границы. Четыре параметра цвета подчиняются все тем же правилам, описанным при задании полей элемента. Если задан тип границы (см. ниже), но не задан цвет границы, то по умолчанию используется цвет самого элемента. Все предыдущие установки свойств границы не будут иметь никакого воздействия на отображение элемента, если не установлен тип границы, так как по умолчанию тип границы не определен, и она не отображается. Для задания типа любой из четырех частей границы применяются свойства border-top-style, border-right-style, border-bottom-style и border-left-style. Свойство border-style определяет одновременно типы всех частей границы. Значениями этих свойств могут быть ключевые параметры none, solid, double, groove, ridge, inset, outset. Типы границ, соответствующих всем перечисленным значениям, представлены в табл. 10.5. Таблица 10.5. Типы линий границы
Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top, border-right, border-bottom и border-left Определяют ширину, тип и цвет, соответственно, верхней, правой, нижней и левой границы. Свойство border определяет одновременно параметры всех частей границы. В отличие от аналогичных свойств, задающих параметры полей и отступов, данное свойство устанавливает одинаковые значения для всех частей границы. Каскадные таблицы стилей предоставляют разработчику Web-документов мощные средства компоновки элементов HTML на странице документа, определяющие внешний вид страницы HTML в окне браузера. В CSS1 большинство этих свойств относилось к категории позиционирования, и, ввиду большой важности, их описание было выделено в отдельный документ рекомендаций, подготовленный Консорциумом W3. В CSS2 эти и некоторые другие свойства сгруппированы в разделах, относящихся к визуальному форматированию. Элементы HTML отображаются браузером последовательно, в том порядке, как они определены в тексте HTML-файла с учетом их положения в структуре документа и расположения предыдущих отображенных элементов и элементов-контейнеров, в которых они могут содержаться. При компоновке страницы используются установки браузера для определения положения каждого элемента. Например, два последовательных абзаца следуют друг за другом, причем каждый начинается с новой строки. Свойство position элемента позволяет определить способ его позиционирования на странице: статический, относительный или абсолютный. Относительный способ определяет смещение элемента относительно его естественного положения в потоке отображения элементов. Абсолютный способ удаляет элемент из естественного потока позиционирования и позволяет разместить его на странице абсолютно произвольным образом. Статический способ, являющийся умалчиваемым способом позиционирования элементов, предполагает естественный поток отображения элементов страницы в окне браузера в соответствии с иерархией объектов документа. Значения static, relative и absolute свойства position определяют соответствующий способ позиционирования элемента, который, в конечном счете, складывается из значения указанного свойства элемента, его положения в иерархической структуре документа, местом его определения в исходном файле HTML и значениями его свойств top и left. Эти последние свойства определяют смещение вниз и вправо левого верхнего угла блока отображения элемента (см. выше раздел "Модель форматирования). Абсолютно позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причем сам элемент или его потомки могут перекрывать ранее отображенные элементы. Чтобы определить точку отсчета местоположения элемента, следует найти его ближайшего родителя, позиционированного абсолютно или относительно. Положение левой верхней вершины блока этого элемента и будет точкой отсчета для абсолютно позиционированного элемента. Если процесс поиска подобного родителя (следует пропускать все позиционированные статически элементы) дойдет до элемента <BODY>, то тело документа и будет тем элементом, относительно которого позиционируется исходный элемент. Следующий фрагмент страницы HTML иллюстрирует абсолютное позиционирование элемента: <SPAN STYLE="position:static; background-color:#90EE90"> Родитель, позиционированный статически!
</SPAN> На рис. 10.7 показано отображение страниц с абсолютно позиционированным элементом (графическим изображением буквы Ж) в тэге <SPAN>, позиционированном статически (а и б) и относительно (в и г). Так как в исходном фрагменте родитель (<SPAN>) элемента <IMG>, позиционированного абсолютно, является статически позиционированным элементом, то ищется ближайший абсолютно позиционированный родитель. Таковым будет тело документа, относительно начала которого и смещается вправо и вниз на 60 пикселов изображение (рис. 10.7, а). Если к этому фрагменту добавить один абзац, то элемент <SPAN> сместится вниз, но его потомок — элемент <IMG> — все равно будет позиционирован относительно начала документа (рис. 10.7, б), что приводит к перекрытию изображением родителя. 
Рис. 10.7. Отображение абсолютно позиционированного изображения Если теперь изменить позиционирование родителя на относительное, то элемент <IMG> будет смещен вниз и вправо относительно начала элемента-родителя (рис. 10.7, в). А если добавить перед элементом <SPAN> абзац, то изображение сместится вместе со своим родителем, оставаясь расположенным на 60 пикселов вниз и вправо относительно начала элемента-родителя (рис. 10.7, г). Примечание Изменение размеров окна браузера не изменит положение абсолютно позиционированного элемента. Поэтому при уменьшении размеров окна такой элемент может оказаться за границами окна и, следовательно, не видим. Значения свойств top и left влияют на начало отсчета положения абсолютно позиционированного элемента. Если их значения установлены, то именно они и используются для смещения элемента относительно начала позиционированного элемента-родителя. Если значение свойства top не задано или установлено равным auto, то верхний край элемента совмещается с верхом последней строки текста родителя, если последний содержит текст, или выравнивается по верхнему краю родителя, если последний является изображением. Аналогично, если значение свойства left не задано или установлено равным auto, то левый край элемента совмещается с концом последней строки текста родителя, если последний содержит текст, или выравнивается по правому краю родителя, если последний является изображением. Еще два параметра, влияющие на отображение абсолютно позиционированного элемента, — это свойства width и height элемента. Как отмечалось, при абсолютном позиционировании элемент изымается из стандартного потока и отображается самостоятельно в своем собственном прямоугольном блоке, левый верхний угол которого помещается в определенную точку окна браузера. Свойства width и height задают ширину и высоту этого блока. Если они не заданы, то по горизонтали блок распространяется до правого края окна браузера, а по вертикали — на столько, на сколько необходимо для отображения содержимого элемента. Установка значений свойств width и height ограничивает размеры блока абсолютно позиционированного элемента. Если его содержимое не помещается в блок заданного размера, то оно просто не видимо пользователю. Динамическим изменением размеров блока можно сделать так, что будет видно все содержимое элемента. Относительное позиционирование Относительно позиционированные и статически позиционированные элементы после изъятия из исходного текста документа всех абсолютно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего. Относительно позиционированные элементы, являющиеся потомками абсолютно позиционированных элементов, также позиционируются в конец своего элемента-родителя. Рис. 10.8, а демонстрирует отображение в окне браузера последовательности относительно позиционированных элементов страницы: <SPAN STYLE="position:relative; background-color: gray"> Это изображение </SPAN> <IMG SRC="Ж.gif" STYLE="position: relative; "> <SPAN STYLE="position:relative; background-color: lightgrey"> является изображением буквы "Ж". </SPAN> Каждый элемент потока позиционируется в конец предыдущего. Если позиционирование элемента-изображения изменить на абсолютное, то он будет выведен из стандартного потока отображения, а оставшиеся относительно позиционируемые элементы будут отображаться друг за другом в едином потоке (рис. 10.8 б). Здесь же видно, что последовательность отображения элементов определяется их заданием в исходном файле документа: элемент <IMG> задан вторым, поэтому он отображается раньше третьего элемента и перекрывается последним. 
Рис. 10.8. Отображение потока относительно позиционированных элементов До сих пор мы не задавали значений свойств top и left относительно позиционируемых элементов. Если для какого-либо элемента из стандартного потока определены значения этих свойств, то этот элемент смещается вниз и вправо на заданные величины относительно правого верхнего угла блока предыдущего элемента в потоке, а следующий элемент отображается так, как будто предыдущий смещенный элемент остается не смещенным. Это правило иллюстрируется на рис. 10.8, в, где отображен предыдущий фрагмент, в котором параметр STYLE элемента <IMG> имеет значение "position: relative; top: 10Opx; left: 40px;". В стандартном потоке статически позиционированные элементы ведут себя аналогично относительно позиционированным: они отображаются непосредственно сразу после предыдущего элемента в потоке. Единственное их отличие от относительно позиционируемых элементов заключается в том, что для них нельзя установить значения свойств top и left, и тем самым сместить их, например, со строки абзаца вверх или вниз. Несколько свойств каскадных таблиц стилей позволяют организовать, совместно со встроенными сценариями, динамическое отображение и скрытие элементов страницы HTML. Свойство visibility управляет отображением элемента. Если его значение равно visible (значение по умолчанию), то элемент отображается, если оно установлено равным hidden, то элемент не отображается. Когда для скрытия элемента используется его свойство visibility, то элемент не изымается из потока отображения. Это означает, что соответствующий ему блок занимает надлежащее положение на странице, но содержимое этого блока (элемент) не отображается. Подобное поведение отличается от поведения объекта со свойством display равным none. В последнем случае элемент не только не отображается, но и изымается из потока отображения, и на странице нет пустого блока, соответствующего этому элементу. Два разных поведения скрываемых элементов, связанных с использованием двух разных свойств, показаны на рис. 10.9. 
Рис. 10.9. Поведение элементов при их скрытии На рис. 10.9, а показано отображение двух элементов <IMG>, источником изображения которых является графический файл буквы Ж. Верхний элемент определен со свойством visibility равным visible, а нижний элемент — со свойством display равным block. При нажатии соответствующих кнопок свойство visibility первого изображения становится равным hidden, а свойство display второго изображения изменяется на none. На рис. 10.9, б показан результат отображения скрытых изображений. Блок первого изображения остается в потоке отображения, и поэтому только исчезает картинка. Второе изображение изымается из потока отображения, и поэтому никакого зарезервированного для картинки места не остается. Свойство clip позволяет обрезать видимое изображение абсолютно позиционированного элемента. Каждый такой элемент отображается в прямоугольном блоке определенной ширины и высоты, которые определяются либо шириной и высотой самого элемента, либо его свойствами width и height. Та часть элемента, которая отображается в блоке, является его видимым изображением. Блок отображения не обязательно должен соответствовать размерам самого элемента: он может вмещать весь элемент, а может вмещать только его часть. Например, блок отображения элемента <IMG> может быть меньше размеров графического изображения, представляемого этим элементом. Свойство clip воздействует только на блок отображения элемента. Его значением может быть auto (никакого отсечения не производится) или границы прямоугольника видимого изображения элемента, которые задаются с помощью следующего параметра rect(<top> <right><bottom> <left>). Величины <top>, <right>, <bottom> и <left> определяют, соответственно, верхнюю, правую, нижнюю и левую границы видимого изображения элемента относительно блока отображения. На рис. 10.10, а показано графическое изображение с размерами 89x74 пиксела, а на рис. 10.10, б то же изображение со свойством clip равным rect(10 70 60 10). 
Рис. 10.10. Свойство clip обрезает видимое изображение элемента Свойство overflow определяет поведение элемента, когда размеры его содержимого не соответствуют размерам блока отображения, установленного свойствами top, left, width и height. Существует четыре значения этого свойства, определяющие поведение элемента:
На рис. 10.11 показан один и тот же раздел (элемент <DIV>) с разными значениями свойств overflow. Свойства width и eight раздела во всех вариантах его отображения одинаковы и соответствуют размерам первого элемента на рисунке (блок отображения). 
Рис. 10.11. Элементы с разными значениями свойства overflow Все представленные выше свойства влияют на расположение блока отображения элемента в плоскости окна браузера. Однако каскадные таблицы стилей позволяют позиционировать каждый блок и в направлении, перпендикулярном плоскости экрана, что влияет на отображение элемента при перекрытии его другим элементом. Обычно элемент, появляющийся позже другого в исходном тексте документа HTML, перекрывает ранее отображенные элементы. Свойство z-index задает слой, в котором располагается элемент при отображении. Если слой расположен ближе к пользователю (значение свойства z-index больше), то элемент перекрывает любой другой элемент с меньшим значением слоя, даже если последний и отображается позже. Следующие фрагменты документа HTML иллюстрируют использование свойства z-index, а на рис. 10.12 показаны результаты их отображения в окне браузера: <!--Фрагмент 1--> <IMG STYLE="position:absolute; top:80px; left:0px; z-index:auto"
<DIV STYLE="position:absolute; top:115px; left:10px; width:150px;
Две буквы "Ж"</DIV> <IMG STYLE="position:absolute; top:120px; left:50px; z-index:auto"
<!--Фрагмент 2--> <IMG STYLE="position:absolute; top:260px; left:0px; z-index:3"
<DIV STYLE="position:absolute; top:295px; left:10px; width:150px; color:white; background-color:blue; z-index:1"> Две буквы "Ж"</DIV> <IMG STYLE="position:absolute; top:300px; left:50px; z-index:auto" SRC=Ж.gif> Если значением свойства z-index является auto, то элемент перекрывает все элементы с таким же значением этого свойства, но его перекрывает любой элемент со значением свойства z-index, отличным от auto. Первый фрагмент иллюстрирует значение auto. Второй элемент в потоке отображения перекрывает первый, а третий — все предыдущие. Во втором фрагменте третья буква Ж перекрывается всеми предыдущими элементами^ так как значение ее свойства z-index равно auto, а у предыдущих элементов это свойство определяет номер слоя. Первая буква Ж перекрывает текст, так как значение ее свойства z-index больше значения этого же свойства текста, хотя в потоке отображения она идет ранее. 
Рис. 10.12. Перекрытие элементов при отображении Четыре свойства каскадных таблиц стилей влияют на отображение списков, задаваемых тэгами <OL> и <UL>. Свойство list-style-type определяет тип маркера списка, если значение свойства list-style-image установлено равным none или графическое изображение, определенное в этом свойстве функцией url (), не доступно. Допустимые значения этого свойства показаны в табл. 10.6. Таблица 10.6. Значения свойства list-style-type
Свойство list-style-image определяет графическое изображение, которое будет использоваться в качестве маркера списка, если оно доступно. Значениями этого свойства могут быть либо none (не задается никакое изображение для маркера), либо полный или относительный адрес графического файла, задаваемый с помощью функции url (): OL {list-style-image: url(http://www.bhv.com/list.gif) } Свойство list-style-position определяет положение маркера в списке: в составе абзаца пункта списка (значение inside) или выдвинутым влево от него (значение outside): <DIV STYLE="position:absolute; top: Opx; left: 20px; width: 300px"> <UL STYLE="list-style-position: inside"> Список 1
</UL> </DIV> <DIV STYLE="position:absolute; top: 0px; left: 400px; width: 300px"> <UL STYLE="list-style-position: outside"> Список 2
Результаты отображения этих двух списков показаны на рис. 10.13. 
Рис. 10.13. Списки с разным расположением маркеров Как и для большинства свойств каскадных таблиц стилей, так и для этих свойств определено свойство, в котором можно одновременно определить значения всех свойств отображения списка. Значением свойства list-style является список значений свойств list-style-type, list-style-image и list-style-position: OL {list-style: circle url(list.gif) inside} Примечание Свойства группы "Фильтры и переходы" используются для создания динамических визуальных эффектов в HTML-документах, и поэтому их описание будет дано ниже в разделе "Динамический HTML в Internet Explorer". Объектная модель документа (Document Object Model — DOM) — это то, без чего не возможен динамический HTML. именно последний явился катализатором в разработке спецификаций DOM в рамках Консорциума W3, и в то же время, он является конечной целью программной реализации объектной модели документа. Объектная модель документа связывает в единое целое HTML, язык сценариев и каскадные таблицы стилей, предоставляя разработчикам Web-документов инструмент с совершенно новыми качествами — динамический HTML. По своей сути DOM является интерфейсом прикладного программирования (API) для документов HTML. Она определяет логическую структуру документа и способ доступа и манипулирования составляющими документ элементами. Все, что определено в документе тэгами языка разметки страниц, становится доступным для изменения, удаления и добавления. Программист может создавать документы, свободно перемещаться по их структуре и добавлять, изменять или удалять элементы и/или их содержимое. Одной из основных целей разработки рекомендаций Консорциумом W3 являлось предоставление независимого от языка и платформы стандартного интерфейса прикладного программирования. В настоящее время многие разработчики редакторов и браузеров HTML-документов применяют рекомендации Консорциума W3 по объектной модели документа в своих продуктах. Динамический HTML в Internet Explorer 4.01 реализован на базе объектной модели DHTML, разработанной фирмой Microsoft и вошедшей в качестве подмножества в объектную модель Консорциума W3. Последняя версия браузера Internet Explorer 5.0 полностью реализует объектную модель документа, совместимую с объектной моделью DHTML. Целью данного раздела является знакомство читателя с основными концепциями и понятиями объектной модели документов. В объектной модели документа любой документ представляется в виде логической древовидной структуры. Например, следующий фрагмент документа HTML: <BODY> . . . <Р ID='p1'> В блоковый элемент, каким является абзац, можно добавлять <В ID='b1 'Устраиваемые элементы</В> и даже другие блоковые элементы <IMG ID='img1' SRC="my.gif"> </Р> <IMG ID='img2' SRC="my-1.gif"> . . . </BODY> будет представлен в объектной модели документа логической структурой, показанной на рис. 10.14. 
Рис. 10.14. Логическая структура фрагмента документа Для сложного документа логическая структура будет, естественно, сложнее. В ней может оказаться много "деревьев", которые в сумме будут представлять уже некоторый "лес". Для понимания объектной модели документов важно осознавать, что логическая древовидная структура представления документа никак не связана с реализацией этой модели именно в виде древовидной структуры. Рекомендации не регламентируют способ реализации модели, она может быть произвольной. Основное — это принцип структурного изоморфизма: две реализации объектной модели документа, используемые для представления одного и того же документа, создадут одну и ту же структурную модель с одинаковыми объектами и их связями. Другой важный аспект модели документов — она оперирует с объектами в полном соответствии с традиционными объектно-ориентированными технологиями: все элементы документа представляются в виде объектов. В узлах структурной логической схемы находятся объекты, а не данные, со всеми присущими объектам свойствами и поведением. Объектная модель документов, таким образом, определяет:
Основное назначение реализации объектной модели документов — предоставить возможность доступа и манипулирования элементами документа из программы с помощью объектов, выстроенных в некоторую иерархическую структуру, а также обеспечить взаимодействие между объектами. Поэтому любая реализация модели включает в свою очередь и управление событиями, представленными также в виде объектов. Разработанные на настоящий момент рекомендации Консорциума W3 не затрагивают вопросов управления событиями, но работа в этом направлении продолжается, и, возможно, в ближайшее время могут появиться рекомендации по объектной модели документа, уровень 2. В связи с этим хотелось бы отметить ведущую роль фирмы Microsoft, объектная модель DHTML которой легла в основу рекомендаций, разработанных Консорциумом W3. Поэтому следует ожидать, что и стандартизация событий объектной модели документов также будет основываться на реализованной в Internet Explorer событийной модели. Примечание В другом популярном браузере Netscape Navigator динамический HTML реализован с использованием собственных технологий фирмы Netscape. Каскадные таблицы стилей в этом браузере поддерживаются не в полном объеме в соответствии с рекомендациями Консорциума W3, а динамический механизм изменения содержимого документа реализован на нестандартных технологиях слоев и динамических шрифтов. В последнем разделе этой главы будет дано краткое описание динамического HTML фирмы Netscape. Объектная модель DHTML в MS Internet Explorer 4.0 Объектная модель DHTML предоставляет разработчикам Web-документов прямой программируемый доступ ко всем элементам документа, а совместно с событийной моделью подобный подход позволяет браузеру обрабатывать ввод пользователя, выполнять встроенные сценарии и динамически менять содержимое документа, не перезагружая его. Каждый элемент HTML-документа является в этой модели программируемым. Это означает, что к каждому элементу можно привязать сценарий, выполняемый в зависимости от того, какое действие над элементом произвел пользователь: поместил ли курсор мыши на элемент, перемещает курсор мыши в границах элемента, нажал или отпустил кнопку мыши и т. д. Результатом выполнения указанных действий является генерация определенного события, которое может быть привязано к конкретному сценарию, выполняемому в случае возникновения события. иерархическая структура объектов модели DHTML похожа на иерархическую структуру объектов JavaScript, но дополнительно позволяет обращаться и устанавливать свойства каскадных таблиц стилей. Каждый объект в иерархии можно использовать в сценариях, но для этого необходимо получить доступ к соответствующему объекту. В иерархической объектной модели одну из важных ролей при доступе к объектам играют два набора: all и children. В первом содержатся ссылки на все объекты, расположенные ниже объекта в иерархии, тогда как второй содержит ссылки на все объекты, непосредственно порождаемые данным. Например, набор all объекта body приведенного выше фрагмента документа (см. выше раздел "Структура документа") содержит ссылки на все объекты документа, в том числе и на p1, img1, b1 и img2. Набор children будет ссылаться только на два объекта, непосредственно порождаемых элементом body: p1, img2, при условии, что приведенный фрагмент является законченным документом, и больше не содержит никаких элементов. На вершине всей иерархии объектов расположен объект document, от которого происходят, в конечном итоге, все объекты, представляющие элементы HTML. Этот объект также имеет набор all (содержащий ссылки на все объекты документа), который можно использовать для доступа к любому объекту страницы. Например, чтобы обратиться к объекту, представляющему первый абзац предыдущего примера, в сценарии JavaScript это можно сделать следующими способами: document.all.pl document.all['pi'] document.all[0] Примечание Набор all объекта document всегда содержит ссылки на объекты HTML, HEAD, TITLE и BODY, даже если соответствующие теги отсутствуют в документе. Кроме перечисленных объектов в этот набор включаются также комментарии и неизвестные или ошибочные тэги. Имя элемента HTML, по которому на него можно ссылаться в сценарии, задается либо в параметре ID, либо в параметре NAME тега элемента. Каждый объект, входящий в набор, определяет свойство этого набора с таким же именем, что и имя объекта, соответствующего определенному элементу HTML-документа. Первая ссылка на объект первого абзаца страницы в приведенном примере как раз и использует это свойство наборов и объектов. Последнюю запись можно использовать, если точно известно, что первый абзац является первым элементом набора all. Можно просто ссылаться на элемент, указав его имя, определенное в параметре ID или NAME. Таким образом, на первый абзац можно сослаться и просто как p1. При программировании достаточно полезным свойством наборов является свойство length, в котором хранится общее число объектов в наборе. Его обычно используют, если заранее не известно число элементов в наборе. Сценарий примера 10.2 демонстрирует использование этого свойства для организации цикла по всем элементам страницы HTML. Этот сценарий отображает диалоговое окно и сообщает пользователю, какой элемент он собирается изменить. Пример 10.2. Изменение цвета фона всех элементов HTML-страницы <HTML> <HEAD><TITLE>Цикл по элементам</TITLE> <SCRIPT LANGUAGE="JavaScript"> var mColor = new Array('red','green','blue','white') function changeAllElements() { for (i=0; i<document.all.length; i++) { alert("изменяется элемент: " + "<" + document.all[i].tagName + ">"); document.all[i].style.backgroundColor = mColor[i%4];
} </SCRIPT> </HEAD> <BODY onload="changeAllElements () > <H1>Привет!</H1> <P>Это простой пример, <В>ну очень простой</В> пример. </BODY> </HTML> При загрузке документа вызывается функция changeAllElements о, которая в цикле просматривает набор all объекта document и отображает диалоговое окно с сообщением, что будет изменен элемент, задаваемый соответствующим тэгом. В качестве имени элемента в функции alert () используется значение свойства tagName объекта, в котором как раз и хранится имя тэга. На рис. 10.15 показано окно браузера в начале выполнения сценария (а) и после выполнения сценария (б). 
Рис. 10.15. изменение параметров форматирования элементов HTML В начале работы сценария документ отображается со стандартными установками форматирования браузера: черный текст на белом фоне. В процессе выполнения сценария поочередно отображаются диалоговые окна с предупреждением об изменении элементов страницы. Так как к некоторым элементам страницы свойство, устанавливающее цвет фона элемента background-color, не применимо, то его установка оператором JavaScript просто игнорируется. изменения начинаются с элемента <BODY>. Сначала цвет фона всей страницы становится красным, затем заголовок отображается на зеленом фоне, текст абзаца — на синем, и в конце сценария текст тега <в> отображается на белом фоне. В этом примере продемонстрирована техника доступа к свойствам каскадных таблиц стилей форматирования HTML-элементов из программы на языке сценариев JavaScript. Все установленные для объекта свойства каскадных таблиц стилей хранятся в наборе style этого объекта и являются, как обычно, свойствами этого набора. Например, обратиться к свойству color какого-либо HTML-элемента из сценария JavaScript можно с использованием следующего синтаксиса: <ссылка_на_объект>.style.color <ссылка_на_объект>.style['color'] Здесь <ссьлка_на_объект> определяет ссылку на объект, о которой речь шла выше. В каскадных таблицах стилей свойства форматирования имеют названия, в которых используется дефис: background-color, margin-top, border-left и т. д. имя такого свойства в сценарии определяется следующим образом:
Например, свойство border-right-width в сценарии JavaScript будет выглядеть borderRightWidth, на свойство background-color можно ссылаться как backgroundСolor. Предупреждение Язык JavaScript чувствителен к регистру, поэтому следует внимательно задавать имя свойства каскадных таблиц стилей. Не поставленная прописная буква в имени свойства приводит к тому, что оно просто игнорируется, и, соответственно, не меняет параметры форматирования элемента HTML-страницы. Иногда необходимо из всего множества объектов страницы выделить подмножество объектов, соответствующих некоторому типу элементов HTML. На странице обычно содержится несколько заголовков, например, первого уровня. В наборе all они расположены вперемежку с остальными объектами, но если необходимо выделить их из всего множества элементов, то подобную операцию можно осуществить, используя метод tags о набора all: var paragraphs=document.all.tags('P') for (i=0; i< paragraphs.length; i++)
Параметром метода tags () является наименование типа тэга, все экземпляры которого необходимо выделить в отдельный набор. В дальнейшем работа со вновь созданным набором осуществляется обычным способом. Так как он содержит объекты, то можно, например, изменить цвет текста всех объектов выделенного типа на HTML-странице, как показано в приведенном фрагменте. Большинство свойств объектов соответствуют параметрам представляемых ими элементов HTML-документа и имеют такие же имена, что и имена параметров. В сценарии можно получить значения интересующих параметров элемента или, наоборот, изменить их установку. Динамическое изменение свойств объектов, и, соответственно, представляемых ими элементов HTML, является основной концепцией динамического HTML. имена некоторых свойств объектов отличаются от имен параметров, но обычно достаточно близки к именам представляемых параметров. Например, свойство className соответствует параметру CLASS. Подобное несоответствие связано, в основном, с именами параметров, которые могут конфликтовать с зарезервированными ключевыми словами основных языков сценариев. Некоторые свойства объектов доступны только для чтения. Это означает, что можно получить их значение, но нельзя изменить. Примером подобного свойства является свойство tagName, представляющее имя тега HTML-элемента. В объектной модели существуют свойства, представляющие целое множество свойств объекта. По существу, такие свойства являются наборами и к ним применима описанная выше технология работы с наборами. Свойство style объекта — одно из таких свойств. Оно содержит все свойства каскадных таблиц стилей, применимых к соответствующему элементу, и которые можно задавать в параметре STYLE тега элемента. В приведенном выше фрагменте это свойство объекта, представляющего абзац, использовалось для изменения цвета текста. Некоторые свойства не соответствуют никаким параметрам тэгов. Эти свойства предоставляют дополнительную информацию об элементе и обычно являются свойствами только для чтения. С одним из подобных свойств мы уже знакомы. Свойство tagName не соответствует никакому параметру и предоставляет информацию о типе тега элемента. Другим примером является свойство sourceindex, значением которого является индекс элемента в наборе all. Методы getAttribute (), setAttribute () и removeAttribute () позволяют, соответственно, получить и установить значение параметра элемента, не обращаясь к его свойствам, или удалить параметр. Для методов getAttribute о и removeAttributeo параметром является строка, задающая имя параметра, в метод setAttribute о кроме имени параметра необходимо передать и его значение. Следующий фрагмент сценария использует все три метода для получения и установки значения параметра ALIGN объекта pi, а также для удаления этого параметра из тега элемента, соответствующего объекту p1: alert("Значение параметра ALIGN равно: " + p1.getAttribute('align')); pi.setAttribute('align','right') alert("Значение параметра ALIGN равно: " + p1.getAttribute('align')); pi.removeAttribute('align') alert("Значение параметра ALIGN равно: " + p1.getAttribute('align')); Если объект p1, например, будет соответствовать абзацу с параметром ALIGN, равным center, то при выполнении приведенного фрагмента сначала отобразится диалоговое окно, в котором значением параметра ALIGN будет center. В следующем диалоговом окне это значение изменится на right, a в последнем — значение будет не определено (будет выведена пустая строка). В соответствии с устанавливаемыми значениями параметра ALIGN будет изменяться и отображение абзаца в окне браузера. При удалении этого параметра абзац будет отображаться с использованием значения по умолчанию (left). Примечание Не следует думать, что метод удаления параметра физически удаляет из файла текст задания параметра. Он только меняет его установленное значение на неопределенное. Параметр будет иметь это значение, пока другой сценарий не изменит его. В исходном файле страницы его установка не изменяется. Эти три метода не чувствительны к регистру, т. е. для них неважно, строчными, прописными или и теми, и другими заданы имя параметра и его значение. Если для установки значения параметра или для задания его имени важен регистр, то дополнительный, последний параметр, принимающий значения true или false, определяет чувствительность этих методов к регистру. Иногда возникает необходимость показать в окне браузера часть документа, расположенного достаточно далеко от того места страницы, где в данный момент находится читатель. Конечно, можно поместить на страницу ссылку, по которой читатель и сможет осуществить переход. А если подобную процедуру необходимо произвести из сценария? В этом случае следует воспользоваться методом scrollIntoView() элемента, который должен быть отображен в окне браузера. Метод прокручивает содержимое окна браузера, чтобы указанный элемент оказался вверху или внизу окна. Например, в следующем сценарии осуществляется быстрый переход к третьему заголовку первого уровня документа: var myH1=document.all.tags['HI']; if( myH1.length > 0) myH1[2].scrollIntoView(true); Объектная модель позволяет осуществлять доступ и изменять не только значения параметров элементов, но и их содержимое. Это возможно с помощью следующих свойств объектов: innerHTML, innerText, outerHTML и outerText. Свойства с префиксом inner применяются к элементам-контейнерам (например, DIV, SPAN и HI) и заменяют содержимое HTML-элементов внутри контейнера, а свойства с префиксом outer применяются ко всем HTML-элементам в теле документа и могут использоваться для замены всего элемента и его содержимого. Свойства с суффиксом Text работают с текстовым содержимым HTML-элемента без ограничивающих тэгов, тогда как свойства с суффиксом HTML оперируют с представлением элемента на языке HTML. Например, оператор contents = p1.outerText присвоит переменной строку, являющуюся текстом абзаца p1. Если абзац в тексте документа определен следующим образом: <Р NAME=p1 ID=p1> В блоковый элемент, каким является абзац, можно добавлять <В ID='b1'> вcтраиваемые элементы</В> и даже другие блоковые элементы <IMG ID='img1' SRC="m1.gif">. Как только что включенное изображение. </Р> то в результате выполнения предыдущего оператора переменная contents будет содержать строку: "В блоковый элемент, каким является абзац, можно добавлять встраиваемые элементы и даже другие блоковые элементы . Как только что включенное изображение." Если в операторе присваивания заменить свойство outerText на outerHTML, то переменная contents будет содержать полное описание абзаца на языке HTML, представленное выше, со всеми входящими тэгами, параметрами и их значениями. Примечание Ознакомиться с полным описанием всех свойств и методов объектной модели DHTML можно на сервере разработчика фирмы Microsoft по адресу: http://msdn.microsoft.com/workshop/author/. В объектной модели DHTML с каждым элементом страницы можно связать определенное действие пользователя: щелчок кнопкой мыши, нажатие клавиши клавиатуры, перемещение в области элемента курсора мыши и т. д. Эта технология основана на фундаментальном понятии события в операционных системах с графическим интерфейсом пользователя. Каждое действие пользователя является причиной возникновения сообщения в операционной системе, которые представляются объектами в объектной модели DHTML. Свойства объектов-событий можно использовать во встраиваемых сценариях для получения информации о событии. При возникновении любого события динамически создается свойство event объекта window, входящего в объектную модель и представляющего окно браузера. Это свойство и является объектом, соответствующим сгенерированному событию. Любое событие имеет свой "жизненный" цикл: от момента возникновения действия или условия, являющегося причиной генерирования события, до выполнения последнего оператора обработчика события или финальных действий браузера. Цикл жизни любого типичного события включает следующие этапы:
Если для элемента-источника события не определен обработчик событий, то в иерархии объектов определяется его родитель, и обработчик событий родителя выполняет соответствующие действия по обработке события. и так происходит до корневого объекта иерархии. Какие удобства предоставляет подобная технология обработки событий? Прежде всего, нет необходимости для каждого элемента писать процедуру обработки события и присоединять ее к нему. Достаточно написать одну процедуру для элемента-родителя, и она будет обрабатывать события, возбуждаемые всеми порожденными родителем элементами. Это позволяет централизованно обрабатывать наиболее часто возникающие события, и, как результат, требует меньше усилий и времени для написания и поддержки кода процедур обработки событий. Пример 10.3 демонстрирует технику передачи события вверх по иерархии объектов. В нем щелчки кнопкой мыши на всех элементах страницы обрабатываются централизованно обработчиком события элемента <BODY>, который является родителем всех элементов страницы. Пример 10.3. Передача обработки события родителю <HTML> <HEAD><ТIТLЕ>Всплывание события</ТIТLЕ> </HEAD> <BODY ID='body' onclick="alert('Не надо щелкать!');"> <Н1 ID='head1'>Привет!</H1> <Р ID='раrаg1'>Это простой пример, <В ID='bold1'>ну очень простой</В> пример. </BODY> </HTML> Щелчок на любом элементе документа приводит к отображению диалогового окна предупреждений из процедуры обработки события click объекта body. Если к какому-нибудь элементу добавить собственный обработчик событий, то будут выполнены две процедуры: самого элемента и элемента родителя. Если элемент расположен достаточно глубоко в иерархии объектов, и каждый элемент, расположенный выше него, имеет также собственный обработчик событий, то неужели событие будет обрабатываться всеми обработчиками? Да, именно это и произойдет, если только какой-то обработчик не аннулирует "всплывающее" вверх по иерархии событие. Объект event имеет свойство cancelBubble, которое позволяет аннулировать событие, если установить его значение равным true. После этого соответствующее событие не существует, и обработчики этого события для всех, расположенных выше элементов, не вызываются. В примере 10.4 обработчик щелчка мыши выделенного элемента <в> аннулирует данное событие. Это приводит к тому, что при щелчке на нем никакого диалогового окна с сообщением не отображается. Пример 10.4. Аннулирование события <HTML> <HEAD><ТIТLЕ>Аннулирование события</ТIТLЕ> </HEAD> <BODY ID='body' onclick="alert('He надо щелкать!');"> <H1 ID='headl'>Привет!</Hl> <Р ID='parag1'>Это простой пример, <В ID='bold1' onclick="window.event.cancelBubble=true" >ну очень простой</В> пример. </BODY> </HTML> Аннулирование события достаточно частое действие в сценариях обработки событий, и будет интенсивно использоваться далее в примерах раздела "Динамический HTML в Internet Explorer". Присоединение обработчика события к элементу страницы осуществляется установкой значения параметра обработки события тега элемента или соответствующего свойства объекта. О том, как это можно сделать, подробно рассказывалось в главе 9 в разделе "Язык создания сценариев JavaScript". Каждый элемент HTML может быть источником многих событий. В табл. 10.7 представлены события, которые могут генерировать и обрабатывать все элементы страницы, и соответствующие им параметры обработки событий. Таблица 10.7. Общие события всех HTML-элементов
Как уже отмечалось, объект event создается автоматически всякий раз, когда возникает какое-либо событие. Этот объект не зависит от используемого языка создания сценария, и его использование в процедурах обработки событий для получения информации о сгенерированном событии является предпочтительным способом получения достоверной информации о событии. Каждое событие характеризуется параметрами, которые передаются в сценарий через свойства объекта event. Существуют параметры, общие для всех типов событий (например, координаты курсора мыши в окне браузера) и специфические для определенного события (например, код нажатой клавиши для событий клавиатуры). Свойства объекта event, как и сам он, являются динамическими и создаются в зависимости от типа произошедшего события. При описании свойства, если не оговорено противное, подразумевается, что оно является общим для всех типов событий. Свойство srcEiement определяет элемент документа, явившийся источником события. Оно может быть полезным при централизованной обработке событий элементом, расположенным выше в иерархии объектов документа истинного "виновника" события, и, в зависимости от типа элемента, программа-обработчик может предпринять соответствующие действия. Важное свойство cancelBubble, аннулирующее событие и прекращающее передачу его на обработку вверх по иерархии объектов, рассмотрено немного ранее в этом же разделе. Свойство returnvalue является булевым и возвращает значение true или false после завершения выполнения процедуры обработки события. При передаче события вверх по иерархии значение этого свойства можно использовать для альтернативной обработки события. Кроме того, если в обработчике события элемента, для которого определены действия по умолчанию, это свойство устанавливается равным false, то это отменяет выполнение действий по умолчанию. Одним из таких элементов является тег <А>, действием по умолчанию которого является переход по ссылке, задаваемой параметром HREF. По значениям свойств aitKey, ctriKey и shiftKey элемента-источника события определяется, была ли нажата, соответственно, клавиша <Alt>, <Ctrl> или <Shift> в момент возникновения события. Значение свойства равно true, если клавиша была нажата, и false — в противном случае. Следующий фрагмент сценария отменяет переход по любой связи в документе, если при щелчке на ней была нажата клавиша <Shift>: document.onclick=click; function click() {
} Предупреждение Установка значения свойства returnvalue равным false не аннулирует событие. Оно продолжает "всплывать" по иерархии объектов. Отменяется только действия по умолчанию элемента, являющегося источником события. Для событий мыши определены свойства, значениями которых являются координаты положения курсора в момент возникновения события. Свойства clientX и clientY представляют координаты относительно области отображения браузера, offsetX и offsetY являются координатами относительно элемента-контейнера, в котором расположен элемент-источник события, screenX и screenY — абсолютные координаты курсора мыши, т. е. координаты экрана монитора. Все значения этих свойств определены в пикселах. Свойства х и у определяют положение курсора мыши по горизонтали и вертикали относительно позиционированного контейнера, содержащего элемент-источник события. Если ни один контейнер не позиционирован, то положение определяется относительно тела документа <BODY>. Полезное свойство событий мыши button определяет нажатую кнопку мыши. Его возможные значения представлены в табл. 10.8. Таблица 10.8. Значения свойства button
Свойства toElement и fromElement Применимы ТОЛЬКО К событиям onmouseover и onmouseout. Они определяют, от какого элемента и к какому перемещался курсор мыши, и полезны при анализе этих действий для вложенных элементов. Некоторые элементы на HTML-странице могут получить фокус. В каждый момент времени только один элемент может обладать фокусом, и ввод данных с клавиатуры направляется именно этому элементу. Наиболее часто используемыми элементами с фокусом являются <BUTTON> и некоторые типы элемента <INPUT>. Для таких элементов при получении ими фокуса генерируется событие onfocus, а при потере фокуса — событие onbiur. Элемент получает фокус при щелчке на нем кнопкой мыши или перемещением на этот элемент с помощью клавиш клавиатуры. При выделении на странице части документа возникают события, регистрирующие эти действия. Событие onselectstart генерируется, когда пользователь нажимает кнопку мыши при расположении курсора в области документа. Если после этого нажатия он перемещает курсор мыши по документу (не отпуская нажатую кнопку), то инициируется событие onselect, регистрирующее выделение части документа. У этого события есть действия по умолчанию: визуально отметить выделенную часть документа изменением ее фона. Это действие можно отменить, установив значение свойства returnValue события равным false в процедуре обработки этого события. Для самого документа существуют два события, отмечающие некоторые стадии его обработки браузером. На самом деле эти события относятся к объекту window, находящемуся на вершине иерархии объектов, но обработчики этих событий задаются в тэге <BODY> документа. Событие onload происходит сразу же после того, как были загружены в окно браузера все элементы страницы. Его можно использовать для выполнения действий при первоначальной или повторной загрузке страницы. Событие unload генерируется до начала выгрузки документа, когда пользователь желает загрузить другой документ, и в процедуре обработки этого события можно, например, напомнить пользователю о выполнении некоторых действий перед окончательной выгрузкой страницы. Существует еще большой набор полезных и важных событий в объектной модели DHTML, с которыми можно познакомиться на сервере разработчика фирмы Microsoft по адресу http://msdn.microsoft.com/workshop/author/. Объектная модель документа в MS Internet Explorer 5.0 Объектная модель, реализованная в Internet Explorer 5.0, полностью соответствует рекомендациям REC-DOM-Level-1-19981001 Консорциума W3. Эта модель основана на объектной модели DHTML, рассмотренной в предыдущем разделе, и включает дополнительные возможности динамического управления содержимым документов HTML. В данном разделе основное внимание будет уделено привнесенным в объектную модель DHTML новшествам, дополнениям и изменениям. Объектная модель документа предоставляет программисту большие удобства при работе с иерархической структурой объектов документа. Она позволяет:
Объектная модель документа представляется узлами (node), расположенными в виде иерархической структуры дерева. Концепция объектной модели не привязана ни к какому конкретному представлению документа (HTML, XML, SGML). Она всего лишь описывает логическую организацию документа. Ее реализация в конкретной системе представления документов ставит в соответствие узлам реальные элементы. В объектной модели документа, реализованной для HTML, в узлах могут находиться любые HTML-элементы или текст, называемые узловыми элементами. К узлам, и даже целым ветвям, можно получить доступ из сценария JavaScript, встроенного в документ. Концепция объектной модели документа позволяет изменить узел или целую ветвь структуры, не разрушая ее. Это приводит к более простому и ясному коду по сравнению с кодом, реализующим изменение структуры документа в объектной модели DHTML. Каждый узловой элемент порождается другим узловым элементом и может сам выступить родителем других элементов (правда, не все элементы могут быть родителями других элементов). Рассмотрим на примере таблицы HTML, как в объектной модели документа можно быстро изменить часть документа, не затрагивая документ в целом. Пусть в каком-либо документе задана таблица из трех рядов: <TABLE ID="Table"> <TR> <ТD>Ячейка 1 первого ряда</ТD><ТD>Ячейка 2 первого ряда</ТD> </TR> <TR> <ТD>Ячейка 1 второго ряда</ТD><ТD>Ячейка 2 второго ряда</ТD> </TR> <TR STYLE="background-color: #CFCFCF;"> <ТО>Этот ряд перемещаем</ТD><ТD>Этот ряд перемещаем</ТО> </TR> </TABLE> Необходимо переместить последний ряд на место предшествующего. Для начала приведем текст сценария, ориентированный на объектную модель DHTML: function fncInterchange(row){ var rowMove=row.rowIndex;
} В переменной rowMove сохраняется индекс перемещаемого ряда, передаваемого в качестве параметра. Переменные rowMove_Cell1 и rowMove_Cell1 хранят содержимое двух ячеек перемещаемого ряда. После этих подготовительных действий ряд удаляется методом rowDelete () объекта Table, и в таблицу вставляется новый ряд перед рядом, предшествующим удаленному. Последние операторы функции добавляют две ячейки в новый ряд и помещают в них содержимое соответствующих ячеек удаленного ряда. Как видим, в объектной модели DHTML пришлось видоизменять структуру документа: удалять и добавлять ряды и ячейки. иначе обстоит дело в объектной модели документа. Методом swapNode () можно просто поменять местами узлы-элементы в структуре документа: function fncInterchange(row){
} Параметром этого метода является элемент, с которым необходимо поменять местами текущий элемент. Свойство previousSibling определяет ближайшего предыдущего брата элемента. На сколько код стал компактнее и понятнее по сравнению с кодом объектной модели DHTML! Примечание Этот пример будет выполняться только в Internet Explorer 5.0 или другом браузере, поддерживающим объектную модель документа (DOM). Добавив в обработчик событий onclick какого-либо ряда таблицы вызов функции fncInterchange(), можно простым щелчком на соответствующей строке таблицы переместить ее на одну строку выше. При реализации объектной модели документов в IE5.0 в существовавшую в IE4.0 объектную модель DHTML были добавлены свойства, методы и наборы, позволяющие с максимальным удобством и полнотой использовать все преимущества, предоставляемые этой объектной моделью. Если все HTML-элементы документа имеют параметр ID, то разработчику документа достаточно просто в сценариях определять объекты таких элементов (значение параметра ID элемента является символическим именем соответствующего ему объекта в языках сценариев). Но идентифицировать все элементы страницы дело достаточно утомительное, поэтому в объектную модель документа включены набор childNodes и свойства parentNode, nextSibling, previousSabling, firstChild и lastChild объектов, позволяющие легко перемещаться по древовидной иерархии объектов и идентифицировать необходимые для работы объекты. На примере структуры, создаваемой вложенными списками, продемонстрируем использование перечисленных выше свойств: <UL ID="Parent">
</UL> В объектной модели документов этот фрагмент будет представлен в виде структуры с отношениями "родства", показанной на рис. 10.16. 
Рис. 10.16. Структура вложенных списков с родственными отношениями Элементы с именами Node1, Node2 и Node3 являются узлами-потомками элемента-родителя с именем Parent, который в объектной модели также представляется узлом. В наборе chiidNodes объекта Parent хранятся ссылки на всех потомков этого элемента (Node1, Node2 и Node3). Свойство parentNode объектов-потомков возвращает имя родителя объекта, поэтому значением этого свойства объектов Node1, Node2 и Node3 будет Parent. Объекты Nodel, Node2 и Node3 являются ближайшими родственниками одного поколения и открываются друг другу с помощью свойств previoussibling (предыдущий ближайший родственник) и nextSibiling (следующий ближайший родственник). Набор узла-объекта Node2 покажет всех его потомков (Child1, Child2 и Child3). Объектная модель DHTML также раскрывает все родственные отношения, но для некоторых отношений требуется небольшое программирование, и она использует собственные свойства элементов, отличные от свойств объектной модели документа. Определить родителя объекта в объектной модели DHTML можно с помощью свойства parentElement, которое соответствует свойству parentNode узла объектной модели документа. Предыдущего ближайшего родственника так легко, как в объектной модели документа, в модели DHTML не найти. Необходимо выполнить ряд действий: function fnGetSibling(Obj){ var Parent=Obj.parentEiement; var iLength=Parent.children.length;
} Здесь приходится организовывать цикл по набору children объекта-родителя, пока не встретится исходный объект, для которого ищется ближайший родственник. Для установки или получения содержимого объекта в объектной модели документа используется свойство nodeValue, тогда как в модели DHTML следует применять свойства innerHTML и innerText:
Отметим отличие этих двух моделей при доступе к текстовому содержимому объектов. В объектной модели документа текст является объектом textNode, порождаемым элементом, который содержит этот текст. Поэтому доступ к текстовому содержимому объекта осуществляется через набор childNodes. В модели DHTML добавление элементов в структуру документа связано с изменением значений свойств innerHTML и outerHTML объектов-контейнеров, или применением внешних для объекта методов, например, insertRow и insertceii для элемента TABLE. В объектной модели документа можно создать любой HTML-элемент, задать значения его параметров, а затем встроить в существующую иерархию документа методами createElement () и createTextNode () объекта document. Примечание Свойства объектов, соответствующие некоторым параметрам тегов HTML и являющиеся неизменяемыми свойствами, можно изменять только для самостоятельно существующих объектов, т. е. объектов созданных, но не присоединенных к иерархии документа. Примечание В Объектной модели DHTML можно использовать свойство createElement (), но его действие ограничено созданием только элементов AREA, IMAGE и OPTION. Если не надо задавать параметры вновь создаваемого элемента или используются их значения по умолчанию, то для создания нового элемента достаточно только его HTML-имя: var newParagraph = document.createElement('P'); При создании новых объектов и встраивания их в существующую структуру документа следует формировать объекты с правильной структурой, соответствующей их представлениям в объектной модели документа. Не соблюдение этих правил может привести к неправильно сформированному документу и, в конечном итоге, к его неправильному отображению браузером. Любая таблица объектной модели документа обязательно состоит, по крайней мере, из двух узлов: TABLE и TBODY. Поэтому при динамическом создании таблиц не следует забывать об этом обстоятельстве: var Table=document.createElement('TABLE'); var TBody=document.createElement('TBODY'); var Row=document.createElement('TR'); var Cell1=document.createElement('TD'); var Cell2=Cell1.cloneNode(); Row.appendChild(Cell1) ; Row.appendChild(Cell2) ; Тable.appendChi1d(TBody); TBody.appendChild(Row); .document.body.appendChiId(Table); Cell1.innerHTML='Ячейка 1'; Cell2.innerHTML='Ячейка 2'; Процедура создания таблицы, собственно говоря, повторяет задание тегов в коде HTML-документа (не пропуская тэгов, вставляемых по умолчанию). Обратим внимание на метод appendChild (элемент), который применим к большинству элементов объектной модели. Он добавляет подчиненный элемент к объекту, для которого вызывается, создавая, таким образом, древовидную структуру. В нашем примере этим методом в строку таблицы были добавлены две ячейки, в тело таблицы добавлена строка, а само тело было добавлено к объекту таблицы Table. Для создания объекта, соответствующего второй ячейке таблицы, использован метод cloneNode(), который копирует объект, для которого он применяется, его параметры и набор childNodes, если в качестве параметра задано значение true. Если параметр метода не задан, то используется значение по умолчанию false, при котором набор ссылок на порождаемые объекты не копируется. Для включения вновь созданной структуры в документ ее необходимо добавить К объекту body методом appendChiId (). Для манипуляции узлами в объектной модели используются методы removeNode(), replaceNode() и swapNode(). Метод removeNode о удаляет объект, для которого он вызван, из структуры документа. Его единственный параметр может принимать булевы значения true или false. Значение true предписывает удалить и все порожденные данным объектом объекты, тогда как значение false (умалчиваемое) удаляет только сам объект, оставляя в документе все подчиненные ему объекты. Замену одного объекта другим можно осуществить методом repiaceNode (), вызываемым для замещаемого объекта. Замещающий объект передается в качестве параметра метода. При замене объекта замещаемый объект удаляется из структуры документа. Поменять местами два объекта в иерархии документа позволяет метод swapNode(). Меняются местами объект, метод которого вызывается, и объект, определяемый параметром метода. Примечание Изменение структуры документа требует внимательности и осторожности, так как может привести к неправильной модели документа. Например, удаление из списка верхнего объекта, соответствующего тэгу <OL>, приведет к ошибке при интерпретации оставшихся объектов <LI>. В данном разделе мы кратко охарактеризовали объектную модель документа, реализованную в браузере Internet Explorer 5.0, и совместимую с моделью DHTML. Подробнее ознакомиться с объектной моделью документа можно на сервере разработчика фирмы Microsoft по адресу http://msdn.microsoft.com /workshop/author/. Динамический HTML в Internet Explorer Напомним, что под динамическим HTML понимается технология, позволяющая изменять содержимое отображаемой в окне браузера HTML-страницы без ее перезагрузки. Эта технология использует каскадные таблицы стилей, язык сценариев (например, JavaScript) и обычный HTML, которые объединяются программным интерфейсом — объектной моделью документа (DOM). Чтобы пользователь мог видеть все динамические эффекты, предусмотренные разработчиком Web-документа, его браузер должен поддерживать все перечисленные компоненты динамического HTML. В противном случае он увидит простую статическую страницу. Если реализация каскадных таблиц стилей в двух наиболее популярных браузерах — Microsoft Internet Explorer и Netscape Navigator — соответствует рекомендациям Консорциума W3, то относительно объектной модели документа этого сказать нельзя. Объектная модель браузера Internet Explorer согласуется с рекомендациями Консорциума, тогда как в Netscape Navigator реализована собственная модель документа, выполняющая такие же функции, что рекомендованная Консорциумом модель, но немного отличающаяся от нее. Поэтому динамические эффекты, реализованные для одного браузера, могут не выполняться в другом. Особенно это относится к динамическому перемещению элементов и использованию фильтров. В данном разделе на примерах показано создание основных динамических эффектов в Internet Explorer: отображение скрытой информации, перемещение информации на HTML-странице, создание визуальных эффектов (постепенное отображение информации, использование фильтров для отображения графики) и т. п. Кроме перечисленных динамических эффектов, реализуемых средствами, рекомендованными Консорциумом, здесь же описаны основные аспекты связывания баз данных с HTML-страницами, и динамического просмотра содержимого баз данных. Эта возможность реализована и поддерживается только в Internet Explorer. Примечание Реализации динамического HTML в Netscape Navigator посвящен следующий раздел данной главы. Динамическое изменение документа Под динамическим изменением документа понимается изменение его отображения в окне браузера как результат перемещения курсора мыши над элементами страницы, которые, изменяя свой внешний вид, подсказывают пользователю, что можно увидеть скрытую часть документа и щелчком мыши инициировать выполнение некоторого действия. Например, при расположении курсора мыши над каким-либо текстом последний меняет цвет или размер и появляется всплывающая подсказка, что при щелчке кнопкой мыши можно увидеть элементы раскрывающегося списка. Совет При разработке динамических HTML-страниц следует всегда продумывать удобные и ясные подсказки пользователю, чтобы он смог полностью насладиться встроенными автором эффектами. Создать простое меню можно на основе HTML-элемента <UL> и свойства display каскадных таблиц стилей, которое позволяет скрывать элементы страницы. Поместим на страницу вложенный список: <UL ID="idList" NAME="idList">
</UL> Список idList составлен из трех элементов <LI> и вложенного списка idListOneA, который не отображается (его свойство isplay равно none) и будет использован для создания раскрывающегося списка при щелчке на первом элементе списка. Строка, заданная в параметре TITLE, отображается в виде всплывающей подсказки при расположении курсора мыши над элементом. Этот фрагмент отображается как простой статический список из трех элементов (вложенный список не отображается) с маркерами в виде закрашенных кружков. Чтобы сделать список раскрывающимся, необходимо добавить к первому элементу внешнего списка и к элементам внутреннего списка обработчики событий и определить в них необходимые действия. Прежде всего, запрограммируем изменение цвета этих элементов при расположении над ними курсора мыши, чтобы пользователь обратил внимание на их динамичность. Для этого добавим в теги элементов параметры обработчиков событий: ONMOUSEOVER="flashMe(this,'red')" ONMOUSEOUT="flashMe(this,'black')" В обработчиках событий вызывается функция fiashMe(), изменяющая цвет элемента. имя элемента (параметр this) и цвет передаются в качестве параметров функции: function flashMe(eSrc, sColor) { eSrc.style.color=sColor idList;OneA.style.color="black" } Обратим внимание на оператор установки черного цвета списка idListOneA. Если его не будет, то при раскрытии первого элемента внешнего списка цвет элементов вложенного списка idListOneA будет таким же, как и цвет элемента-родителя — красным (свойство color наследуется потомками). Теперь остается добавить обработчик щелчка кнопки мыши в первый элемент списка idList, выполняющий функцию отображения вложенного списка idListOneA, если он скрыт, и скрывающий его, если он видим: ONCLICK="toggleListOneA()" исходный текст функции toggieListoneA () приведен ниже и не требует комментариев: function toggleListOneA() {
Итак, у нас есть все функции, реализующие раскрывающийся список. Однако мы не учли одного обстоятельства. Если пользователь щелкнет на любом из элементов раскрывшегося списка, то список закроется. Вспомним "подъем" события по иерархии объектов. Хотя в элементе раскрывающегося списка нет обработчика события ONCLICK, в любом случае оно передается вверх по иерархии и обрабатывается всеми встречающимися обработчиками этого события. Поэтому процедура обработки события ONCLICK внешнего списка закроет внутренний (установит значение его свойства display равным none). Чтобы этого не происходило, следует в обработчиках событий элементов внутреннего списка отменить передачу события на обработку вверх по иерархии объектов: ONCLICK="window.event.cancelBubble=true" Окончательно исходный текст нашего раскрывающегося списка выглядит так: Пример 10.5. Раскрывающийся список <HEAD> <SCRIPT LANGUAGE=' JavaScript' > <!-- function toggleListOneA(){
} function flashMe(eSrc, sColor) { eSrc.style.color=sColor idListOneA.style.color="black" } //--> </SCRIPT> <STYLE TYPE="text/css"><!--
--></STYLE> </HEAD> <H1> Пример 2.4: Раскрывающийся список </H1> <UL ID="idList" NAME="idList">
</UL> Графический файл item.jpg в свойстве каскадных таблиц стилей tem-style-image задает изображение маркера в списках. Свойство cursor определяет тип курсора мыши, когда он располагается над элементом. В нашем примере курсор будет меняться на изображение руки (значение свойства hand). На рис. 10.17 показаны результаты отображения раскрывающегося списка: в закрытом (а) и раскрытом состояниях (б). Раскрывающийся список в Web-документах можно использовать в качестве простого меню, если в процедурах событий ONCLICK его элементов задать отображение каких-либо документов в отдельных окнах или во фрейме страницы. 
Рис. 10.17. Раскрывающийся список Аналогичную технику можно применить для динамического отображения частей документа, связав отображение, например, какого-либо абзаца, с расположением курсора мыши на определенном слове документа, а его скрытие — с перемещением курсора от этого слова. Подобные приемы динамического раскрытия документа позволяют на одном экране представить краткую полную информацию, а детали показать в больших раскрывающихся частях документа. Положение абсолютно позиционированного элемента на странице легко изменить, установив новые значения его свойств top и left из встроенного сценария. Если организовать изменение значений этих свойств во времени, то элемент будет двигаться на странице по заданной траектории. Подобное поведение раздела (элемент <DIV>) реализовано в примере 10.6. Пример 10.6. Движущийся раздел текста <HTML> <SCRIPT LANGUAGE="JavaScript"> <!-- var action, coef_px=-1, coef_pt=1, p_move=5; function startMove() {
} function move() {
} --> </SCRIPT> <STYLE TYPE="text/css"><!--
--> </STYLE> </HEAD> <BODY onload="startMove()"> <H1> Пример 2.5: изменение положения элемента </H1> <P>Динамический HTML позволяет программно менять положение элемента!</Р> <DIV ID="Banner" STYLE="position:absolute; width: 200px;
Добро пожаловать на страницу динамического HTML!</DIV> </BODY> </HTML> В теле документа определяется абсолютно позиционированный раздел с именем Banner. Его ширина определена в 200 пикселов. При загрузке документа вызывается функция startMove (), в которой устанавливаются начальные значения свойств top и left раздела Banner. В этой функции методом setintervaio объекта window с интервалом в 100 миллисекунд вызывается функция move о , которая и реализует перемещение раздела во времени. Каждый раз при вызове этой функции положение раздела меняется: значения его свойств top и left увеличиваются или уменьшаются на p_move пикселов в зависимости от достижения значениями этих свойств своих нижних или верхних границ. Таким образом, при каждом вызове функции move о изменяется положение раздела, что внешне представляется как его движение по странице документа. Обратим внимание на то, что значения свойств каскадных таблиц стилей необходимо преобразовывать в числовое представление функцией parseInt(), так как они хранятся в символьном виде. На рис. 10.18, а, б показаны два различных момента отображения документа примера 10.6. 
Рис. 10.18. Движущийся раздел документа Эффекты перемещения частей текста или графических изображений можно использовать для привлечения внимания читателя к важной информации. Если документ большой и содержит разнообразную информацию, можно предоставить читателю возможность поиска задаваемых им слов и автоматического создания указателей на найденные вхождения или перехода к первому вхождению слова. Пример этого раздела демонстрирует технику поиска в документе и изменение содержимого документа. В текстовом поле пользователь задает слово или фразу, которую необходимо найти в документе. Результаты поиска отображаются на странице. Если найдено соответствующее выражение, то автоматически создается кнопка перехода на первое вхождение введенной в текстовом поле фразы. Пример 10.7. Поиск, изменение и переход <HTML> <SCRIPT> function findme(cValue) {
} function move(cValue) {
} </SCRIPT> </HEAD> <BODY> <DIV ID="buttons" STYLE="position: absolute; top: 20"> <SPAN ID="spanFound">Введите слово для поиска: </SPAN> <INPUT TYPE=TEXT ID=txtToFind VALUE=""> <SPAN ID="search"> <BUTTON style="width: 100; text-align: center"
</BUTTON> </SPAN> </DIV> <DIV style="position: absolute; top:60; font-size:14pt;"> Правда и то: если никто не хочет задумываться, то, казалось бы, тем легче русскому литератору. Да, легче действительно; и горе тому литератору и издателю, который в наше время задумывается. Еще горше тому, кто сам захотел бы учиться и понимать; но еще горше тому, который объявит об этом искренно; а если заявит, что уже капельку понял и желает высказать свою мысль, то немедленно всеми оставляется... <P>Ф.М. Достоевский "Дневник писателя за 1873 год" </DIV> </BODY> </HTML> В этом примере в разделе buttons задается встроенный элемент <SPAN> с именем spanFound, в который выводится информация о числе найденных вхождений фрагментов текста, задаваемых в текстовом поле txtToFind, а также кнопка Поиск для инициализации процедуры поиска. Эта кнопка содержится в элементе <SPAN> с именем search, в который, в случае успешного поиска, добавляется кнопка перехода к первому вхождению фразы. При нажатии на кнопку Поиск вызывается процедура findMe(cValue), параметром которой служит введенная пользователем в текстовом поле txtToFind фраза. В процедуре методом createTextRange () объекта body создается объект TextRange, в котором хранится текстовое содержимое всей страницы. Методом findText() этого объекта в цикле определяется число вхождений введенной фразы. Вызов метода collapse() необходим, чтобы установить начало следующего цикла поиска в конец предыдущего найденного вхождения. Переустановка значения свойства inner объекта spanFound приводит к изменению его содержимого. Теперь в нем содержится текст, отражающий количество найденных вхождений заданной фразы. Если число вхождений не нулевое, то создается кнопка Перейти, при нажатии на которую происходит переход к первому вхождению в документ введенной пользователем фразы. Переход осуществляется функцией move (cValue), которая ищет первое вхождение фразы, выделяет ее (метод select() объекта rng) и осуществляет, в случае необходимости, прокрутку страницы (метод scrollIntoView() объекта rng) до найденной фразы. На рис. 10.19 показаны отдельные этапы работы со страницей: а — пользователь ввел слова для поиска; б — нашлось одно вхождение, и отобразилась кнопка перехода Перейти; в — пользователь перешел к первому вхождению слова в текст документа. 
Рис. 10.19. Этапы поиска информации в документе Возможности динамического HTML по работе с содержимым страницы не ограничиваются приведенными примерами. Немного фантазии, немного знаний, немного практики — и вы сможете создавать привлекательные и удобные для чтения страницы. Создавать HTML-страницы с мультимедийными эффектами также просто, как и применять каскадные таблицы стилей. Разнообразные визуальные динамические эффекты: постепенное "проявление" изображения или текста, изменение контрастности графического изображения, "свечение" букв текста и т. п. — все это и многое другое можно увидеть при отображении страницы в Internet Explorer 4.0 и более поздних версий. Реализуются мультимедийные эффекты применением фильтров к элементам страницы и организацией переходов из одного визуального состояния к другому. Фильтр — это некоторый алгоритм, преобразующий визуальное отображение элемента в окне браузера. Он может быть статическим или динамическим. Статический фильтр преобразует элемент, и после этого он отображается. Динамический фильтр воздействует во времени на визуальное отображение элемента, меняя его непосредственно на HTML-странице, что приводит к эффекту анимации. Динамический фильтр еще называют переходом из одного состояния отображения в другое. Фильтры применяются не ко всем HTML-элементам, а только к тем, которые могут определять прямоугольный блок при отображении в окне браузера и не являются окнами, как, например, элемент <IFRAME>. В табл. 10.9 перечислены все элементы HTML, к которым могут применяться фильтры. Таблица 10.9. Элементы, к которым применяются фильтры
Примечание Фильтры можно применять и к элементам управления ActiveX, встраиваемым в HTML-страницу. Фильтры не применяются к следующим элементам HTML-страницы: апплеты Java, IFRAME, SELECT, OPTION, P, EM, STRONG и ко всем заголовкам H1, H2 и т. д. Применить фильтр к элементу просто: достаточно задать значение его свойства filter, следуя правилам задания свойств каскадных таблиц стилей filter: значение. Каждый фильтр, как отмечалось выше, реализует определенный алгоритм преобразования видимого отображения элемента, поэтому значение свойства filter задается в форме функции: filter: имя_фильтра([параметры]); а параметры фильтра, если они присутствуют, задаются с использованием синтаксиса именованных параметров функции: имя_параметра=значение_параметра Некоторым фильтрам требуется несколько параметров, задаваемых через запятую, а некоторым фильтрам параметры вообще не нужны, но круглые скобки должны присутствовать обязательно. К элементу можно применить несколько фильтров одновременно. В этом случае они задаются в виде списка с пробелом в качестве разделителя: <IMG ID=img1 SRC="пример1.gif"
В данном примере к графическому изображению применяются два фильтра: первый (blur) размазывает изображение на глубину в 50 пикселов, а второй (fliph) просто зеркально его отображает в горизонтальном направлении. В Internet Explorer реализовано большое число разнообразных фильтров. В табл. 10.10 представлены все фильтры с кратким описанием их воздействия на визуализацию элементов. Таблица 10.10. Доступные в Internet Explorer фильтры
Ограниченные объемы книги не позволяют полностью описать каждый фильтр со всеми параметрами и нюансами использования, но некоторые, наиболее часто применяемые разработчиками Web-документов, фильтры будут описаны достаточно подробно. интересные динамические эффекты достигаются использованием фильтров совместно со сценариями. В процессе выполнения сценария можно устанавливать или изменять параметры применяемых к объектам фильтров, можно назначать новые фильтры, создавать визуальные эффекты через определенные интервалы времени и делать многое другое. Доступ к фильтрам и их параметрам в программируемых сценариях осуществляется, как обычно, с помощью объектной модели, предоставляемой браузером. В этой модели любой фильтр представляется в виде обычного объекта со своими свойствами и методами. Большинство свойств и методов соответствует параметрам фильтра, определяемым при задании фильтра в параметре STYLE. Некоторые свойства и методы доступны только из программируемого сценария. Определить, какие фильтры применены к элементу, можно с помощью набора filters соответствующего объекта. В нем хранятся ссылки на все применяемые к элементу фильтры: <IMG ID=picture SRC="picture.gif" STYLE="filter: wave(strength=100) gray() fliph()"> . . . . <SCRIPT> strengthWave=picture.filters.wave.strength; if( picture.filters['gray'].enabled && strengthWave >= 100) { picture.filters.wave.strength += 50 } </SCRIPT> В приведенном примере объект picture сценария соответствует элементу <IMG> HTML-страницы. Переменная strengthWave хранит значение параметра strength фильтра wave. Оператор условия проверяет, не отключался ли фильтр gray объекта picture ранее в каком-либо сценарии (значение свойства enabled фильтров равно true, если разрешено его применение к элементу). Если этот фильтр продолжает применяться, и параметр strength фильтра wave больше или равен 100, то этот параметр увеличивается на 50. Можно ссылаться на фильтры объекта и с помощью числового индекса набора filters. Каждому фильтру, заданному в параметре или тэге STYLE, соответствует определенный числовой индекс этого набора. Все фильтры индексируются в порядке их перечисления в свойстве filter каскадных таблиц стилей, начиная с нуля. Так, в приведенном примере фильтру wave соответствует индекс 0, фильтру gray — 1 и фильтру fliph — 2. Поэтому получить значение параметра strength фильтра wave можно было бы и так: strengthWave=picture.filters[0].strength; Совет использование числового индекса при ссылке на фильтр элемента полезно, если к элементу применяются одновременно несколько фильтров одного и того же типа (естественно, с разными параметрами). Это единственный способ идентифицировать фильтры. В наборе style объекта, в котором хранятся значения всех свойств каскадных таблиц стилей соответствующего объекту элемента HTML, хранится и значение свойства filter объекта, являющееся строкой, содержащей список применяемых к элементу фильтров. Если в предыдущем примере в сценарий добавить оператор alert(picture.style.filter) ; то в диалоговом окне, выводимом функцией alert (), будет отображена следующая строка: wave(strength=100) gray() fliph() Это свойство можно использовать для динамического изменения присоединенных к элементу фильтров. Добавить фильтр fiipvO к элементу picture того же примера можно простым оператором: picture.style.filter += ' flipv()'; Предупреждение При добавлении новых фильтров через строковое значение свойства filter следует внимательно следить за синтаксисом этого свойства. При присоединении нескольких фильтров к элементу все они задаются в виде списка с пробелом в качестве разделителя, поэтому перед первым добавляемым фильтром всегда необходим пробел. Общие свойства некоторых фильтров Каждый фильтр имеет свойство enabled, которое разрешает (значение true) или запрещает (значение alse) применение присоединенного к объекту фильтра. Это свойство соответствует параметру ENABLED при задании фильтра в тэге HTML-элемента. Свойство strength фильтров blur, glow и wave определяет интенсивность применения соответствующего фильтра и может изменяться от 0 до 255. Для blur это будет степень размытости изображения элемента, для glow — интенсивность "свечения" контура изображения объекта, для wave — амплитуда волны искажения. На рис. 10.20 показаны изображения одного и того же фрагмента текста, обработанного фильтрами wave различной интенсивности. Примечание Обратите внимание, что некоторые символы, расположенные близко к границам блока отображения элемента, при использовании фильтра wave преобразуются таким образом, что выходят за область отображения. Фильтры, воздействующие на цветовую гамму элемента, имеют свойство (и, естественно, параметр) color. К ним относятся следующие фильтры: chroma, dropShadow, glow, mask, shadow. Как и в случае свойства strength, свойство color для разных фильтров определяет разные цветовые эффекты, связанные с воздействием фильтра на объект. Для фильтров dropshadow и shadow это свойство задает цвет создаваемой тени, в фильтре glow оно определяет цвет "свечения" контура элемента, в фильтрах chroma и mask значением этого свойства задается цвет пикселов объекта, которые становятся прозрачными, или цвет, в который окрашиваются прозрачные пикселы объекта. Значение этого свойства задается шестнадцатеричным числом вида #RRGGBB или одним из зарезервированных слов, обозначающих определенные цвета, например magenta, lightsteelblue и т. д. 
Рис. 10.20. Воздействие фильтра wave на отображение текста Свойство direction фильтров blur и shadow определяет, соответственно, направление, в котором размывается изображение объекта, и направление падения тени от объекта. Значением этого свойства является угол, отсчитываемый от вертикали объекта по часовой стрелке с шагом в 45°. Отрицательные значения или значения, большие 360°, приводятся к эквивалентным значениям в диапазоне от 0° до 360°. Например, значение -45° соответствует 315°. Булево свойство add определяет, включать (значение true) или не включать (значение false) исходное изображение объекта, к которому применяется фильтр, в отфильтрованный образ. Это свойство имеют только два фильтра: blur и wave. На рис. 10.21 показаны три графических файла буквы Ж: первый отображается без применения фильтров, второй — с применением фильтра размывания изображения blur интенсивности 100, третий — аналогичен второму, но с добавленным исходным изображением. В серых тонах трудно найти различия во втором и третьем изображениях, но в цвете видно, что в третьем изображении четче прорисовывается сама буква "Ж", а вдоль контура наблюдается размытие. Перечисленные выше свойства полностью исчерпывают описание некоторых фильтров, так как они не имеют методов, или только свойств фильтров. Все такие фильтры приведены в табл. 10.11. 
Рис. 10.21. Эффект от добавленного исходного изображения в фильтр Таблица 10.11. Свойства и методы некоторых фильтров
He вошедшие в эту таблицу фильтры, а также методы фильтров light и redirect, описываются в следующих двух разделах. Фильтр wave имеет свойства-параметры add, enabled, strength, freq, phase и lightStrength. Первые три свойства описаны выше. Свойства freq и phase определяют количество максимумов в синусоидальной волне искажения и фазу смешения волны, которая задается в процентах от фазы обычной синусоиды, имеющей начальное значение 0. Величина этого параметра, равнал 100, соответствует фазе смещения в 360°. Все остальные значения лежат в интервале от 0 до 100. Например, значение phase: 25 соответствует синусоиде с фазой смещения в 90°. Последнее свойство lightstrength определяет интенсивность освещения для имитации трехмерного эффекта поднятия гребней волны. На рис. 10.22 показаны изображения после обработки фильтром wave с различными параметрами. 
Рис. 10.22. Действие фильтра wave Примечание Чем сильнее интенсивность освещения, тем темнее горизонтальные полосы, имитирующие выпуклости и вогнутости синусоиды. У фильтра dropshadow кроме свойств color и enabled имеется ряд свойств, задающих параметры падающей тени. Свойства offX и offY определяют количество пикселов в горизонтальном и вертикальном направлениях, на которые смещается тень от как бы приподнятого над плоскостью страницы объекта, а свойство positive определяет, должен ли фильтр создавать падающую тень от прозрачных пикселов объекта. Если значение этого свойства true, то тень создается от непрозрачных пикселов объекта, если false — от прозрачных. Положительное значение свойства offX смещает тень вправо, отрицательное — влево; положительное значение свойства offY смещает тень вниз, отрицательное — вверх. На рис. 10.23 показаны эффекты от применения этого фильтра. 
Рис. 10.23. Эффекты фильтра dropShadow Совет Если на странице есть прозрачный объект, то можно получить его тень, применив к нему фильтр dropShadow и установив значение его параметра positive равным 0. Фильтр alpha позволяет создавать эффекты прозрачности (невидимости) отображения или его части. Свойство opacity определяет степень прозрачности: значение о соответствует полной прозрачности (невидимости) изображения, а значение 10 — нормальному изображению. Параметр style определяет способ создания эффекта прозрачности. Его умалчиваемое значение равно о и соответствует изменению прозрачности всего изображения. Ненулевое значение означает, что прозрачность объекта не однородна и изменяется от пиксела к пикселу. При style=i параметры startx, startY и finishX, finishY определяют координаты точек прямой, на которой прозрачность равна значению параметра finishopacity. Прозрачность точек, лежащих между границами объекта и этой прямой, меняется от значения, заданного свойством opacity, до значения, заданного свойством finishopacity. При значении style=2 степень прозрачности точек изображения меняется при перемещении из центра к эллипсу (вписанному в прямоугольный блок отображения элемента) от значения, определяемого свойством opacity, до значения, заданного параметром finishopacity. Вне вписанного эллипса прозрачность соответствует finishopacity. Если style=3, прозрачность аналогичным образом меняется от центра до границ изображения. Комбинируя значения свойств фильтра alpha можно создавать разнообразные эффекты отображения объекта. Некоторые возможности показаны на рис. 10.24. 
Рис. 10.24. Эффекты фильтра alpha Фильтр light, возможно самый интересный из всех фильтров, имеет единственное свойство enabled и много методов, которые позволяют добавлять к изображению объекта разнообразные источники света. Метод addAmbient(iRed, iGreen, iBlue, iStrength) добавляет рассеянный источник света, который представляет собой ненаправленный источник света, распространяющий параллельные лучи перпендикулярно к поверхности страницы. Его параметры iRed, iGreen, iBlue задают, соответственно, насыщенность красной, зеленой и синей составляющей света и изменяются в диапазоне от 0 до 255. Параметр istrength определяет интенсивность источника. Направленный конический источник света добавляется методом addCone(iX1,iY1,iZ,1X2,iY2, iRed, iGreen, iBlue,istrength,iAngle) где: iX1,iY1 — определяют координаты источника света в пикселах, iZ — задает номер слоя, ix2, iY2 — определяют координаты точки направления света, iRed, iGreen, iBlue — задают насыщенности соответствующих цветовых составляющих, istrength — интенсивность источника света, iAngle — угол конуса распространения света. Прямая, проходящая через точку источника света и точку направления света, является биссектрисой этого угла. Точечный источник света добавляется к объекту методом addPoint(iX1,iY1,iZ,iRed,iGreen, iBlue,istrength) Первые два параметра задают координаты источника света в пикселах, третий — номер слоя источника света. Остальные параметры имеют тот же смысл, что и в предыдущих методах добавления источников света. На рис. 10.25 можно увидеть все три источника, присоединенные к графическому изображению. 
Рис. 10.25. Добавленные источники света Все источники добавляются только из встроенного сценария. Для HTML-страницы, отображенной на рис. 10.25, исходный текст выглядит следующим образом: Пример 10.8. Добавление источников света
<HEAD> <SCRIPT> window.onload=fnInit; function fnInit(){
} </SCRIPT> </HEAD> <DIV STYLE='position: absolute; top:0; left: 0; width: 190'> <IMG SRC='flower.jpg'>Нормальное изображение</DIV> <DIV STYLE='position: absolute; top:0; left: 195; width: 190'> <IMG ID=img1 SRC='flower.jpg' STYLE="filter: light()"> Рассеянный источник красного </DIV> <DIV STYLE='position: absolute; top:0; left: 390; width: 190'> <IMG ID=img2 SRC='flower.jpg' STYLE="filter:light();"> Конический источник </DIV> <DIV STYLE='position: absolute; top:0; left: 585; width: 190'> <IMG ID=img3 SRC='flower.jpg' STYLE="filter:light(); height:190"> Точечный источник света </DIV> Примечание При добавлении фильтра light() в параметре STYLE область отображения элемента становится черной, чтобы можно было видеть эффекты конического и точечного источников света. Примечание Точечный источник света может представлять собой один пиксел, если не подобран его цвет и цвет элемента. Лучше всего этот источник света виден на белом фоне. Оригинальные эффекты с источниками света достигаются из встроенных сценариев. Большое количество подобных примеров можно найти на сервере разработчика фирмы Microsoft по адресу http://msdn.microsoft.com /workshop/author/. В Internet Explorer включено два перехода: blendTrans и revealTrans. Напомним, что переход позволяет переходить во времени от одного визуального состояния к другому, задавая длительность перехода. Переходы в Web-документах используются для создания эффекта анимации, например преобразования одного изображения в другое. Свойство-параметр duration определяет интервал времени, необходимый для выполнения перехода. Его значением является действительное число с плавающей точкой в формате секунды.миллисекунды. В сценариях его можно изменять, если только не началось выполнение перехода. Свойство status, доступное только из сценария, позволяет определить состояние перехода: 0 — переход остановлен, 1 — переход применен и 2 — переход выполняется. Переход blendTrans задает постепенное исчезновение или появление изображения, увеличивая или уменьшая степень его прозрачности. исчезновение или появление моделируется совместным использованием перехода и свойства visibility объекта. Следующий пример демонстрирует постепенное исчезновение одной картинки и появления другой. Пример 10.9. Анимационный эффект <HTML> <SCRIPT language="JavaScript"> var fRunning = 0 function startTrans() {
} </SCRIPT> <SCRIPT for="img" event="onfilterchange"> fRunning = 0 </SCRIPT> </HEAD> <BODY> <IMG id="img" src="Арнольд.Bmp" style="filter:blendTrans(duration=8); width: 400; height: 250;" onclick="startTrans()"> </BODY> </HTML> В этом примере к изображению img применяется переход blendTrans, который постепенно в течение 8 секунд делает прозрачным изображение файла Арнольд.Bmp, а вместо него отображается содержимое файла Арнольд1.bmp. инициализация перехода осуществляется щелчком мыши на изображении. При начале выполнения перехода генерируется событие onfiiterchange, в процедуре обработки которого задается начальное значение переменной fRunning. В процедуре обработки щелчка мыши вызывается метод applay (), после которого можно устанавливать новые значения параметров объекта img. В примере задается новый файл изображения. На рис. 10.26 показано начальное изображение (а), промежуточное (б) и окончательное (в). 
Рис. 10.26. Применение перехода blendTrans Три метода переходов предназначены для управления выполнением перехода из сценария. Для их выполнения не требуется никаких параметров. Метод apply () "замораживает" видимое в данный момент изображение элемента и позволяет изменить значения параметров перехода и самого элемента, не требуя немедленного применения перехода. Чтобы выполнить переход после переустановки значений необходимых параметров, следует использовать метод play (). Остановить выполнение перехода для элемента в любой момент времени можно методом stop (). Переход revealTrans позволяет, в отличие от перехода blendTrans, выполнить переходы из одного видимого состояния в другое разнообразными способами. Его свойство transition может иметь целое значение и определяет тип перехода. Допустимые значения представлены в табл. 10.12. Таблица 10.12. Типы переходов в фильтре revealTrans
Рис. 10.27. Применение перехода revealTrans На рис. 10.27 (а, б, в) показаны результаты применения перехода revealTrans со значением параметра transition=1 вместо перехода blendTrans в примере 10.9. В этом случае новый рисунок прорисовывается в течение 8 секунд расширяющимся из центра прямоугольником. Промежуточное отображение перехода показано на рис. 10.27, б. Мы привели достаточно простые примеры применения переходов. Более сложные примеры использования фильтров и переходов можно найти на сервере разработчика фирмы Microsoft по адресу http://msdn.microsoft.com /workshop/author/. Связывание данных с документом Привлекательной для разработчиков Web-приложений возможностью, реализованной в Internet Explorer 4.0 и выше, является возможность быстрого создания HTML-страниц, обрабатывающих данные из хранилища, расположенного на сервере. Необходимые для работы данные загружаются на машину пользователя, и последующая их обработка осуществляется уже на локальном уровне, не требуя дополнительного обращения к CGI-сценариям или сценариям сервера, реализованным средствами JavaScript или VBScript. Реализованная в Internet Explorer технология связывания данных с HTML-страницей позволяет намного проще и дешевле решать такие задачи, как добавление и обновление данных, хранящихся на сервере. Она реализуется с помощью расширения языка HTML, а не традиционных для подобных решений HTML-форм, и в ее основе лежит разработанная фирмой Microsoft архитектура привязки данных. В основу решения привязки данных к HTML-странице положены четыре основных компонента:
Объект-источник данных получает данные из сети и предоставляет их в распоряжение объектам-потребителям данных, являющимися стандартными HTML-элементами, через специальную программу-посредника, которая обеспечивает синхронизацию работы источника и потребителей данных. Табличный повторитель подключается, если обрабатывается целый набор записей из базы данных, который отображается в табличной форме на HTML-странице. Привязка данных к HTML-странице осуществляется простым встраиванием в нее объекта-источника, который реализует открытую спецификацию, позволяющую разработчику определить:
Все перечисленные возможности объекта-источника реализуются через объектную модель, доступную для сценариев HTML-документа. На объект-источник накладывается единственное ограничение, — он должен обеспечивать доступ к данным посредством либо OLE-DB, либо ODBC. Объекты-потребители данных — это элементы HTML, способные отобразить на странице данные, поставляемые объектом-источником. К ним относятся как стандартные элементы HTML (INPUT, SPAN, DIV, TABLE), так и внедряемые в страницу Java-апплеты и элементы управления ActiveX. (Подробно они рассматриваются в главе 11 "Встраиваемые компоненты".) используя специальные параметры, расширяющие стандартный HTML, Internet Explorer позволяет привязать соответствующий элемент к определенному столбцу данных из набора данных, поставляемых объектом-источником. Элементы могут использовать какое-то одно значение из записи набора данных (например, элемент INPUT) или весь набор данных, отображая каждую запись в виде строки одной или нескольких таблиц (элемент TABLE). Работа программы-посредника привязки данных и табличного повторителя совершенно невидима для пользователя. При загрузке страницы они определяют, содержит ли она объекты-источники данных и соответствующие им объекты-потребители. При наличии подобных объектов эти программы автоматически синхронизируют их работу. Когда объект-источник получает дополнительную порцию данных из сети, программы-посредники автоматически пересылают их соответствующим потребителям данных. и наоборот, если пользователь изменил данные в объекте-потребителе, то они автоматически пересылаются в объект-источник, который, в свою очередь, пересылает их в базу данных. Разработчик страницы с привязанными к ней данными может отслеживать работу программы-посредника, перехватывая и обрабатывая события, генерируемые посредником при выполнении им определенных действий. Для обеспечения привязки данных к HTML-странице в Internet Explorer включена поддержка дополнительных нестандартных параметров элементов-потребителей данных: DATASRC, DATAFLD, DATAFORMATAS и DATAPAGESIZE. Задание значений этих параметров для объекта-потребителя связывает его с определенным объектом-источником данных на странице и обеспечивает их правильное отображение. Параметр DATASRC определяет имя источника данных, задаваемого в виде строки, начинающейся с символа (#), за которым сразу же следует имя объекта-источника, определенное в его параметре ID. Параметр DATAFLD задает имя поля в записи, данные из которого привязываются к определенному элементу-потребителю данных на HTML-странице. Обычно эти два параметра используются совместно, определяя отображение набора данных и конкретных полей его записей на странице. В следующем примере весь набор данных, поставляемый объектом-источником с именем myDSO, привязан к табличному потребителю данных, в ячейках которого отображаются значения поля author всех записей набора данных: <TABLE DATASRC="#myDSO"> <TR><TD><INPUT TYPE=TEXTBOX DATAFLD="author"></TD></TR> </TABLE> Примечание Так как источник данных присоединен к табличному элементу, то при отображении в нем данных табличный повторитель создаст на странице таблицу, содержащую столько строк, сколько записей содержится в наборе данных, поставляемых объектом-источником. При привязке данных к элементу, отображающему одно единственное значение, следует задавать оба параметра, как показано в следующем примере: <SELECT DATASRC="#myDSO" DATAFLD="publisher">
</SELECT> Здесь при выборе пользователем одной из опций в раскрывающемся списке программа-посредник установит текущую запись, поле publisher которой содержит выбранное значение. Для элементов-потребителей единственного значения можно указать формат используемых данных в параметре DATAFORMATAS. В настоящее время значением этого параметра может быть только одно из двух значений: HTML и TEXT. Первое соответствует данным в формате HTML, второе — обычным текстовым данным. Данные отображаются в зависимости от заданного формата. Ниже представлены примеры привязки данных к элементам DIV и TEXTAREA с указанием формата: <DIV DATASRC="#myDSO" DATAFLD="author" DATAFORMATAS="HTML"></DIV> <TEXTAREA DATASRC="#myDSO" DATAFLD="book_name"
Примечание Если задан определенный формат данных для полей, то в записях набора данных эти данные должны соответствовать соответствующим форматам. Для оптимизации отображения набора данных, содержащего большое число записей, следует использовать параметр DATAPAGESIZE, определяющий максимальное число записей, отображаемых в таблице. По умолчанию в таблице отображаются все записи привязанного набора данных, и если записей много, то они могут не поместиться в окне отображения браузера. Возможность ограничения числа выводимых одновременно записей позволяет создавать более удобные в использовании страницы. Переход к отображению следующей порции записей осуществляется методом nextPage() объекта TABLE, Предыдущей — методом previousPage (). При разработке приложений с использованием внешних данных следует, прежде всего, определить, в каком формате будут храниться эти данные. Они могут представляться в виде простого текстового файла с запятой в качестве разделителя (расширение CSV), HTML-файла или таблицы базы данных, поддерживающей технологию OLE-DB или ODBC (например, SQL Server, MS Access, FoxPro). После того как определен формат представления внешних данных, необходимо выбрать подходящий объект-источник данных (DSO) и встроить его в страницу HTML. В Internet Explorer объектом-источником данных может быть апплет Java, элемент управления ActiveX или сама динамически подключаемая библиотека MSHTML.DLL браузера, реализующая его объектную модель. Внешние источники данных Internet Explorer поставляется с двумя элементами управления ActiveX. Первый, TDC, осуществляет доступ к данным, представленным текстовым форматом с разделителем (файл CSV), второй, RDS.DataControl, позволяет работать с таблицами реляционных баз данных. Элементы управления ActiveX являются законченными программными объектами, которые позволяют получать/изменять значения своих свойств внешним программам или другим объектам. При их установке на компьютере пользователя в реестре Windows производится соответствующая запись, идентифицирующая каждый установленный в системе элемент управления ActiveX уникальным кодом. На HTML-страницу они встраиваются тэгом <OBJECT>, а тег <PARAM> позволяет установить значения свойств элемента ActiveX. Примечание Более подробно элементы ActiveX и Java-апплеты рассматриваются в главе 11 "Встраиваемые компоненты". TDC (Tabular Data Control) является простым источником данных для HTML-страницы и используется в следующих случаях:
Его свойства и методы позволяют определять файл данных, а также осуществлять их фильтрацию и сортировку. Свойства, определяющие файл данных и его структуру, представлены в табл. 10.13. Таблица 10.13. Файловые свойства элемента управления TDC
Для работы с данными элемент управления TDC имеет два свойства и один метод. Свойство Filter содержит выражение, включающее имя столбца, который должен быть отфильтрован, критерий фильтрации и значение, с которым должно сравниваться содержимое указанного столбца. В качестве критерия фильтрации используются последовательности символов =, >=, <=, !=, смысл которых очевиден. Значением свойства sort является список имен столбцов, разделенных точкой с запятой, по которым необходимо отсортировать данные файла в таблице. Знак (+) перед именем столбца означает сортировку в возрастающем порядке, минус (-) — в убывающем. Действительная сортировка данных в таблице осуществляется методом Reset () элемента TDC. Элемент управления RDS.DataControl (Remote Data Service) по своим возможностям превосходит элемент управления TDC. Он позволяет работать с наборами данных из реляционных таблиц, и его рекомендуется применять в случаях:
Для стандартной работы с этим объектом достаточно задания трех его свойств: server, connect и SQL. Первое свойство задает URL-адрес сервера, на котором расположена база данных. Свойство connect определяет системное имя набора данных (DSN), определенное на машине-сервере. Оно также требует, при необходимости, задания идентификатора пользователя и пароля доступа. Последнее свойство SQL определяет запрос к базе данных в виде оператора SQL. Пример встраивания объекта RDS на HTML-странице показан ниже: <OBJECT classid="clsid:BD96C556-65A3-11DO-983A-OOC04FC29E33"
</OBJECT> Здесь объект-источник привязывает набор данных, состоящий из всех полей таблицы title базы данных, расположенной на сервере по адресу http:// bhvserver. Он связывается с ней посредством определенного в системе сервера имени источника данных library. Этот объект имеет большой набор свойств и методов, позволяющий выполнять сложную фильтрацию и сортировку данных, а также корректировать и добавлять их в базу данных. Более подробно ознакомиться с объектом RDS.DataConnect можно на сервере Microsoft по адресу http://www.microsoft.com /isapi/ado/. Сортировка данных в таблице Предположим, что в файле author.txt содержатся данные по книгам, выпускаемым каким-то издательством. Этот файл представляет собой файл данных с запятой в качестве разделителя полей в записи. Каждая запись начинается с новой строки. В первой строке содержатся имена полей в записи. Фрагмент начала файла представлен ниже: series, author, title Мастер, Нортон П., Разработка приложений в Access 97 В подлиннике, Браун М., HTML 3.2 В подлиннике, Нортон P., Windows 98 Мастер, Мюррей У., Создание переносимых приложений для Windows . . . . . . С помощью объекта-источника TDC и элемента <SELECT> можно организовать динамическое отображение в таблице данных из такого файла. В раскрывающемся списке <SELECT> пользователь выбирает необходимую ему серию книг и в таблице динамически изменяется содержимое, чтобы отобразить только книги выбранной серии. исходный текст HTML-документа можно увидеть в примере 10.10. Пример 10.10. Сортировка и фильтрация данных в таблице <STYLE TYPE="text/css"> DIV {background-color: lightgrey} В {color: blue} </STYLE> <SCRIPT> function tChange() {
} function a_sort() {
} </SCRIPT> </HEAD> <OBJECT id="authorDSO"
</OBJECT> <LABEL>Серия: </LABEL> <SELECT ID="s_change" onchange="tChange()">
</SELECT> <TABLE ID="elemtbl" datasrc="#authorDSO">
</TABLE> Объект-источник данных TDC включается в страницу тэгом <OBJECT>. Значения его свойств задаются в тэгах <PARAM>. Обязательно должен быть определен файл исходных данных. В нашем примере — это упомянутый выше файл author.txt. В параметре CLASSID задается уникальный регистрационный номер элемента управления ActiveX, в нашем примере элемента TDC. При задании тела таблицы для ссылки на поля записей используются их символические имена, определенные в первой строке файла данных. Это можно делать, так как значение свойства useHeader установлено равным true. При выборе значения в раскрывающемся списке s_change генерируется событие onchange этого элемента и вызывается функция tchange (), которая устанавливает значение свойства Filter объекта authorDSO и выполняет метод Reset () для обновления отображаемых данных в соответствии с заданным критерием фильтрации. Последний задается только в случае, если выбрана конкретная серия книг (значение свойства value объекта s_change не равно нулю) в виде строки series=Мастер или series=B подлиннике в зависимости от осуществленного пользователем выбора. Если сделан выбор отобразить книги всех серий, то значение критерия фильтрации равно пустой строке. После этого вызывается метод Reset () объекта-источника данных, и обновляется содержимое таблицы. На рис. 10.28 а, б представлены два состояния таблицы, отображающей исходный файл данных author.txt. 
Рис. 10.28. Сортировка (а) и фильтрация данных (б) на HTML-странице Примечание Динамическое отображение таблицы полезно, когда она содержит большое число записей, логически разбитых на мелкие группы, а пользователю как раз и необходимо видеть эти мелкие группы данных. Источник данных MSHTML Разработчики Web-доку ментов могут задавать непосредственно в HTML-документе необходимый набор данных и обрабатывать его, используя сам браузер, точнее, — программы из его библиотеки динамической компоновки MSHTML.DLL. Следует отметить, что такой подход к отображению набора данных позволяет работать с ним исключительно как с набором данных, предоставляющим доступ только на чтение. Добавлять записи или корректировать их со страницы HTML нельзя. Отдельная HTML-страница, в которой определяется набор данных, называется страницей данных. Когда MSHTML используется в качестве источника данных, она анализирует содержимое HTML-страницы и определяет элементы с параметрами ID. Содержимое разных элементов с одинаковыми идентификаторами определяет столбец набора данных, т. е. поле с именем, соответствующим значению параметра ID, разных записей набора. Одинаковые идентификаторы могут быть у разных элементов. Для MSHTML это не имеет никакого значения, — все они будут определять один столбец набора данных. Значение параметра ID используется в качестве значения параметра DATAFLD элемента, к которому привязываются данные. Набор данных из предыдущего примера можно определить в файле author. htm следующим образом: <DIV><SPAN ID=series>Мастер</SPAN> <SPAN ID=author>Нортон П.</SPAN> <SPAN ID=title>Разработка приложений в Access 97</SPAN></DIV> <DIVXSPAN ID=series>B подлиннике</ЗРАМ> <SPAN ID=author>Браун М.</SPAN> <SPAN ID=title>HTML 3.2</SPAN></DIV> <DIV><SPAN ID=series>B подлиннике</ЗРАМ> <SPAN ID=author>Нортон Р.</SPAN> <SPAN ID=title>Windows 98</SPAN></DIV> <DIVXSPAN ID=series>Мастер</SPAN> <SPAN ID=author>Мюррей У.</SPAN> <SPAN ID=title>Создание переносимых приложений для Windows</SPAN> </DIV> Когда определен набор данных, можно использовать тег <OBJECT> для привязки данных к HTML-странице: <OBJECT ID=authorDSO DATA="author.htm"> </OBJECT> Теперь набор данных можно обычным способом отображать в HTML-элементах. Динамическая обработка подобных наборов данных требует написания скриптлетов (программных компонентов, используемых в сценариях страниц HTML и написанных на языке VBScript или JScript) и выходит за рамки настоящей книги. На сервере Microsoft по адресу http://msdn.microsoft.com /workshop/author/databind/ можно найти пример динамической обработки данных, присоединенных к странице с помощью MSHTML. Динамический HTML в Netscape Navigator Заключительный раздел этой главы посвящен реализации динамического HTML в популярном браузере Netscape Navigator 4.0. Для создания динамических эффектов в нем также используются каскадные таблицы стилей, язык сценариев JavaScript, язык HTML и объектная модель документа, не соответствующая рекомендациям Консорциума W3. В ней для позиционирования HTML-элементов, представляемых объектами в модели документа, используются слои, а иерархия объектов отличается от рекомендованной Консорциумом W3. Так как эта объектная модель родилась из языка сценариев JavaScript, то мы будем называть ее объектной моделью сценария, чтобы не путать с объектной моделью документа — термином, предложенным Консорциумом W3. В этой связи следует отметить, что многие динамические эффекты, реализованные в объектной модели документа Internet Explorer, не выполняются при просмотре HTML-документа в браузере Netscape Navigator, как, впрочем, и наоборот. В данном разделе также приводятся отличия реализации динамического HTML в Netscape Navigator и Internet Explorer, а также рекомендации по созданию динамических HTML-документов, которые могут одинаково, или почти одинаково, отображаться в обоих браузерах. Примечание В этом разделе нам придется часто упоминать названия двух популярных браузеров. Для экономии места на странице и времени читателя при чтении длинных названий везде в этом разделе браузер Internet Explorer будет обозначаться IE, a Netscape Navigator— NN. Применение каскадных таблиц стилей Каскадные таблицы стилей в NN реализованы в соответствии с рекомендациями REC-CSS1 Консорциума W3 и их применение ничем не отличается от применения в IE. Единственное отличие заключается в том, что в NN реализовано два способа задания правил каскадных таблиц стилей. Первый способ соответствует рекомендациям Консорциума — задавать все правила в тэге <STYLE>, расположенном в головном разделе документа, в соответствии с предложенным там же синтаксисом. В NN добавлена возможность задания правил в тэге <STYLE> с использованием синтаксиса JavaScript и объектной модели сценариев. Рассмотрим традиционное задание правила, определяющего цвет заголовка первого уровня: <STYLE TYPE="text/css"> <!--
</STYLE> При использовании синтаксиса JavaScript это же правило будет выглядеть так: <STYLE TYPE="text/javascript">
</STYLE> Читатель, прочитавший раздел, посвященный объектной модели документа, или просто проницательный читатель без труда поймет, что объект tags, являющийся подобъектом объекта document, содержит все объекты, соответствующие типам HTML-элементов документа, а написанный оператор JavaScript присваивает свойству color объекта H1 строку со значением red. Как и в объектной модели IE, объект document соответствует всему документу и содержит все остальные объекты модели (является их родителем). Сложные названия свойств каскадных таблиц стилей, содержащие дефисы, при использовании синтаксиса JavaScript преобразуются следующим образом: из названия просто убираются дефисы. Например, свойству line-height будет соответствовать название lineheight. Обратим внимание на отличие в задании значения параметра TYPE тега <STYLE>. Его значением является "text/javascript", что сообщает браузеру об использовании синтаксиса JavaScript. При этом содержимое тега <STYLE> не надо комментировать, так как браузер, проанализировав значение параметра TYPE, просто пропустит весь тэг, если он не поддерживает этот синтаксис. Примечание В документации фирмы Netscape обычный способ задания правил каскадных таблиц стилей называется CSS-стиль, а с использованием синтаксиса JavaScript — JavaScript-стиль или стиль сценария. При необходимости мы также будем использовать эту терминологию. В стиле сценария можно использовать оператор with (объект), задающий объект, к которому применяются свойства и методы из тела этого оператора. Он удобен при определении нескольких значений свойств элемента одного типа. Следующий фрагмент определяет свойства заголовка первого уровня: with(tags.H1) {
} В каскадных таблицах стилей широко используется определение классов, позволяющих легко изменять отображение элемента одного и того же типа. В стиле сценария классы задаются следующим образом: classes.GREENBOLD.all.color = "#44СС22" // Эти два оператора определяют classes.GREENBOLD.all.fontWeight = "bold" // класс GREENBOLD, применимый // ко всем элементам документа classes.RED1.P.color = "red"; // Эти два оператора определяют classes.RED1.P.fontWeight = "bold"; // класс RED1 элементов P ids.BLUE1.color = "blue"; // Этот оператор определяет класс элемента // с параметром ID="BLUE1" Свойства контекстных элементов (правила с контекстными селекторами) задаются с помощью функции contextual (), параметрами которой служит список, определяющий контекстный селектор: contextual(tags.HI, tags.EM).color = "green"; Приведенный оператор эквивалентен следующему правилу, записанному в CSS-стиле: H1 EM {color: green;} Оба браузера отображают HTML-элементы с присоединенными стилями в целом одинаково, но существуют некоторые различия в трактовках некоторых свойств. В частности, наблюдается отличие при закрашивании фона абзаца, раздела и всех заголовков. В IE закрашивается все видимое в окне браузера пространство, относящееся к этим элементам, а в NN — только часть, в которой расположен текст. Это расхождение иллюстрируется на рис. 10.29. 
Рис. 10.29. Отображение абзаца в браузерах IE (а) и NN (б) 
Рис. 10.30. Отображение "плавающих" блоковых элементов в браузерах IE (а) и NN (б) По-разному применяется свойство float, что связано с различной интерпретацией перевода элементов в разряд "плавающих". В IE плавающими элементами можно сделать только встроенные элементы, т. е. элементы, которые появляются внутри блоковых. Например, элемент <SPAN> в блоковом элементе <P>. В NN плавающим можно сделать любой блоковый элемент, в том числе и абзац, и заголовок. В этом случае, например, заголовок со значением right свойства float будет выделен из нормального последовательного потока отображения элементов страницы и прижат вправо, а последующий абзац будет отображаться перед ним, обтекая его справа. На рис. 10.30 показано отображение двумя браузерами следующей страницы с установленным свойством float второго заголовка: <HEAD> <STYLE TYPE="text/css">
</STYLE> </HEAD> <Н4>Н4 — обычный, float: none</H4> <P>Это абзац, который в документе следует непосредственно
<Н4 CLASS = FLOATRIGHT>H4 - смещен вправо, float: right</H4> <P>Это абзац, который в документе следует непосредственно
Обратите внимание на то, что установка значения свойства width заголовка совершенно не влияет на его отображение в окне IE, но учитывается при отображении браузером NN. Это связано с различной реализацией позиционирования элементов в этих браузерах. Позиционирование и объектная модель сценария В каскадных таблицах стилей свойство position элемента определяет его положение в плоскости страницы относительно других элементов страницы. Если элемент позиционирован (значение его свойства position равно relative или absolute), то значение свойства z-index определяет, какие позиционированные элементы он перекрывает при отображении и какие элементы перекрывают его. Значение свойства visibility определяет, виден или не виден этот элемент в окне браузера. В Internet Explorer, в соответствии с рекомендациями Консорциума W3 по объектной модели документа, все перечисленные свойства являются обычными свойствами объектов, соответствующих элементам HTML-документа. В Netscape Navigator, в отличие от Internet Explorer, позиционированный элемент реализуется в виде объекта layer со своими свойствами и методами. В этом заключается различие между IE и NN. Они по-разному отражают в объектных моделях позиционированные элементы, что приводит к функциональной несовместимости браузеров при обработке страниц, содержащих сценарии динамического изменения содержимого документа с использованием позиционирования. В NN каждый позиционированный элемент считается слоем и отображается в объектной модели сценария в виде объекта layer, порождаемого корневым объектом document. В документации по динамическому HTML в Netscape Navigator на сервере фирмы Netscape термины "позиционированный элемент", "позиционированный блок" и "слой" являются синонимами и представляют позиционированный элемент вместе со всем его содержимым как одно целое. Слои могут содержать другие слои. Если в каком-либо слое определен еще один слой, то этот слой является вложенным для первого слоя, который, в свою очередь, является содержащим слоем для вложенного. Эти понятия важны для определения положения абсолютно и относительно позиционированных слоев, задаваемых свойствами top и left. Положение абсолютно позиционированного слоя (значение absolute свойства position) отсчитывается от левого верхнего угла содержащего его слоя, тогда как относительно позиционированный слой (значение relative свойства position) располагается относительно текущего положения в документе. В NN для задания слоев можно использовать тэги, являющиеся расширением HTML. Тег <LAYER> определяет слой, а тег <ILAYER> определяет вложенный слой. Однако следует учитывать, что только браузер NN поддерживает эти расширения. Поэтому при разработке HTML-документов лучше ими не пользоваться. Здесь они упомянуты исключительно для полноты изложения позиционирования в NN. Все свойства, применяемые в каскадных таблицах стилей для позиционированных элементов, применимы и для слоев в NN. Размеры слоя определяются значениями свойств width и height, свойство visibility позволяет отображать или не отображать слой и т. д. Таким образом, статическое использование слоев дает одинаковый эффект в обоих браузерах, если только относительно позиционированные слои вложены в абсолютно позиционированные. Если это не так, то могут обнаружиться отличия при отображении документа в IE и в NN. В каждом случае следует просто проверять отображение документа в обоих браузерах. Существенные отличия, как отмечалось выше, появляются при реализации динамических эффектов, что связано с разными объектными моделями, используемыми этими браузерами. Объект document имеет свойство-набор layers, в котором содержатся ссылки на объекты layer, соответствующие созданным в документе слоям. Если известен идентификатор слоя idName, определенный в параметре ID слоя, то получить доступ к объекту, соответствующему этому слою, можно одним из следующих способов: document.idName document.layers[idName] document.layers[index] В последнем случае используется индекс слоя в наборе layers. Все слои документа располагаются в этом наборе в порядке, определяемом значениями их свойства z-index: сначала идут слои, располагающиеся при отображении дальше всего от пользователя, затем те, которые перекрывают предыдущие, и т. д. Каждый объект, соответствующий слою в документе, имеет свойство document, которое, в свою очередь, имеет свойство-набор layers, в котором содержатся ссылки на все вложенные в данный слой слои. Определить число вложенных слоев можно с помощью свойства length набора layers: document.layers[idNameLayer].document.layers.length Каждый объект-слой имеет свойство, соответствующее примененному к нему свойству каскадных таблиц стилей. Например, определить в сценарии значение свойства top слоя с именем layer1 можно следующим оператором: layerlTop=document.layer1. top Все допустимые в объектной модели сценария браузера NN свойства слоев перечислены в табл. 10.14. Таблица 10.14. Свойства объектов-слоев
В объектной модели сценария определены методы объекта-слоя, которые позволяют модифицировать его из сценария JavaScript. Набор допустимых методов един и применяется к слоям, созданным как с помощью тегов <LAYER> и <ILAYER>, так и с помощью CSS-стиля. В табл. 10.15 перечислены все методы объекта layer. Таблица 10.15. Методы объектов-слоев
В сценарии можно динамически создать новый слой в документе. Для этого следует определить новый объект layer с помощью конструктора Layer(): bluelayer = document.bluelayer; newbluelayer = new Layer(300, bluelayer); Первый параметр конструктора — ширина слоя, а необязательный второй — родительский слой для создаваемого слоя. После того как новый объект-слой создан, определить его содержимое можно установкой значения свойства src или выполнением метода load(), а можно и непосредственно записать содержимое в объект document слоя. Примечание Создать новый слой можно только после полной загрузки документа в браузер. Объект document только одного слоя может быть открыт для записи. Чтобы записать содержимое следующего слоя, следует закрыть объект document предыдущего. В данном разделе рассматривается пример создания HTML-страницы с динамическим позиционированием графического изображения, который одинаково отображается в браузерах IE и NN. Прежде всего, разработаем две функции, определяющие, в каком браузере происходит отображение страницы. Функция isNNO возвращает значение true, если браузером является Netscape Navigator версии 4.0 и выше; функция isiEO возвращает значение true, если используется Internet Explorer. Тексты этих функций приведены ниже: function isNN() {
} function isIE() {
} На страницу поместим графическое изображение с именем imgMove, и напишем функцию moveDHTML(), перемещающую это изображение: function moveDHTML() { // Задание объектов перемещения для разных браузеров if (isNN()) targetObj = document.imgMove; if (isIE()) targetObj = imgMove.style; // Перемещаем изображение на 10 пикселов вправо. targetObj.left = parseInt(targetObj.left) + 10; } Обратите внимание, как для каждого браузера задается объект перемещения. Теперь остается привязать перемещение изображения к нажатию кнопки. исходный текст HTML-страницы представлен ниже: <SCRIPT LANGUAGE="JavaScript"> Здесь размещаются тексты трех разработанных функций </SCRIPT> </HEAD> <SPAN ID="imgMove" STYLE="position:relative; top:0; left:0;"> <IMG SRC="Ж.gif" ALT="Перемести меня"> </SPAN> <FORM> <P><INPUT TYPE="button" VALUE="Перемещение" onclick="moveDHTML()"></P> </FORM> При просмотре страницы графическое изображение буквы Ж появляется в левой части окна браузера. Ниже расположена кнопка с надписью Перемещение. При нажатии на нее буква Ж смещается вправо. Это будет происходить при просмотре страницы как в браузере IE, так и в браузере NN. На рис. 10.31 показано смещенное изображение в окне браузера Netscape Navigator. 
Рис. 10.31. Динамическое позиционирование графического элемента Примечание Приведенный пример достаточно прост. Более сложные приемы динамического позиционирования элементов в Netscape Navigator можно найти в документации "Dynamic HTML in Communicator" на сервере разработчика фирмы Netscape по адресу http://developer.netscape.com/. Для повышения привлекательности HTML-документов автор может использовать многочисленные шрифты, находящиеся в его распоряжении. Но что произойдет, если этих шрифтов не окажется на компьютере читателя его документов? Они будут заменены другими в соответствии с установленными на компьютере пользователя правилами подстановки шрифтов. В этом случае, возможно, вся привлекательность HTML-страницы исчезнет. Во избежание подобных ситуаций в браузере NN реализована возможность загрузки необходимых для просмотра страницы шрифтов. Файл описания шрифтов автоматически загружается с хост-сервера, на котором находится просматриваемая страница, во временную кэш-область браузера пользователя и находится там, пока связанная с ним HTML-страница в ней хранится. Загрузить эти шрифты с хост-машины для постоянного использования нельзя. Файл описания шрифтов создается в специальных программах (например НехМас Typograph) или с помощью Font Composer Plugin для Netscape Navigator. Работа в подобных программах достаточно проста: загружается документ, для которого необходимо создать файл описания шрифтов, помечаются все шрифты, которые будут загружаться, и специальной командой создается файл описания шрифтов (расширение PFR), который сохраняется на сервере разработчика. К документу файл описания шрифтов присоединяется либо посредством тега <LINK>, либо через задание свойства gfontdef каскадных таблиц стилей в тэге <STYLE>. Ниже показаны оба способа встраивания ссылки на файл описания шрифтов: <STYLE TYPE="text/css"> <!-- @fontdef url(http://home.netscape.com/fonts/sample.pfr); --></STYLE> <LINK REL=FONTDEF SRC="http://home.netscape.com/fonts/sample.pfr"> использование загружаемых шрифтов ничем не отличается от использования других шрифтов. их имена и параметры можно использовать в качестве значений параметра FACE тега <FONT> или свойств каскадных таблиц стилей из категории шрифтов: <STYLE type="text/css"><!-- H1 {font-family:"Impress ВТ", "Helvetica", sans-serif;} --></STYLE> <H1> <FONT FACE="Impress BT">B H1 используется шрифт
При задании загружаемого шрифта в тэге <FONT> можно использовать дополнительные параметры: FONT-SIZE для определения размера шрифта и WEIGHT для определения степени жирности шрифта. ← к предыдущей главе
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 Обратная@связь | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
