WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!

Pages:     || 2 | 3 | 4 |
-- [ Страница 1 ] --

X. Вильямсо технологии, используемые при создании интерактивных сайтов сходство и различие функций Netscape Navigator и Internet Explorer элементы языка сценария и HTML, одинаково воспринимаемые обоими

браузерами параметры HTML и CSS, обеспечивающие общедоступность сайта и многое другое...

СЕРИЯ Heather Williamson Dynamic X. Вильямсон Санкт-Петербург Москва • Харьков • Минск 2001 Хэйзер Универсальный Dynamic HTML.

Библиотека программиста Перевел с английского А. Марков Главный редактор Е. Строганова Заведующий редакцией И.

Руководитель проекта А. Васильев Научный редактор А.

Художник Корректоры А. Н. Лукина Верстка ББК 32.988.02 УДК 681.324 Вильямсон X.

В46 Универсальный Dynamic HTML. Библиотека программиста. — СПб.: Питер, — 304 ил.

ISBN 5-318-00368-0 Эта книга адресована всем, кто разрабатывает web-страницы назло заложенным в су ществующее программное обеспечение. На ее страницах вы найдете всесторонний анализ программной поддержки, необходимой для размещения динамического сайта в Интернете. Все web-разработчики насколько сложно сделать страницу, одинаково выглядящую при четырех разрешениях монитора и во всех существующих браузерах. С помощью автора вы освоите тонкости DHTML, и разработанный вами web будет радовать вас, его хозяина и посетителей.

© Перевод на русский язык, А. Марков, © Издательский дом «Питер», Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было фор ме без письменного разрешения владельцев авторских прав.

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

ISBN 5-318-00368- ЗАО «Питер Бук», Санкт-Петербург, Благодатная ул., д. 67.

Лицензия ИД № от 05.06.00.

Налоговая льгота — общероссийский классификатор продукции ОК 005-93, том 2;

95 3000 — книги и брошюры.

Подписано к печати 17.09.01. Формат 70x100/16. Усл. п. л. Тираж 5000. Заказ Отпечатано с готовых в ордена Трудового Красного Знамени «Техническая книга» Министерства Российской Федерации по делам печати, телерадиовещания и средств массовых коммуникаций Санкт-Петербург, пр., Краткое содержание Глава 1. DHTML: Обзор Глава 2. Обзор объектной модели документа Глава 3. Реализация каскадных таблиц стилей Глава 4. Обзор языков сценария Глава 5. Определение настроек среды пользователя Глава 6. Подготовка к войне браузеров Глава 7. Подготовка к реализации взаимодействия Глава 8. Реализация взаимодействия Глава 9. Работа со слоями Глава 10. Еще один вариант использования имеющихся возможностей Глава 11. Создание web-сайта Глава 12. Планирование сайта разработчиком Глава 13. Общедоступность Глава 14. Последние подсказки, уловки и хитрости Приложение 1. Элементы HTML, поддерживаемые новыми браузерами Приложение 2. Совместимость каскадных таблиц стилей Приложение 3. Совместимость объектных моделей документа Приложение 4. Совместимость JavaScript и JScript Алфавитный указатель Содержание Благодарности Предисловие Структура книги Чего вы не найдете в этой книге Глядя в будущее Куда обратиться? Краткая биография автора От издательства Глава 1. DHTML: Обзор Что такое DHTML? Объектная модель документа Каскадные таблицы стилей Почему необходимо использовать DHTML? DHTML-решение Серверные решения DHTML и Microsoft Использование инструментальных средств корпорации Microsoft Команды Microsoft Microsoft и DOM Microsoft и каскадные таблицы стилей DHTML и Netscape Использование инструментальных средств компании Netscape Команды Netscape Netscape и DOM Netscape и CSS В чем схожи оба браузера? Глава 2. Обзор объектной модели документа Что же такое DOM? Структура документа с точки зрения объектной модели Содержание Реализация DOM корпорацией Microsoft Модель событий Microsoft Изменение текста в реальном масштабе времени Реализация DOM компанией Netscape Рост компании Netscape Поддерживаемые объекты В чем схожи оба браузера? Совместимая модель событий Совместимые объекты и свойства Глава 3. Реализация каскадных таблиц стилей Реализация CSS корпорацией Microsoft Соответствие шрифтов ОрепТуре Дополнительные элементы оформления текста и другие эффекты Отступы, контуры и другие свойства блоков Слои и позиционирование Фильтры Реализация CSS компанией Netscape Соответствие шрифтов TrueDoc Дополнительное оформление текста контуры и другие свойства контейнеров Слои и позиционирование Фильтры В чем схожи два браузера? Глава 4. Обзор языков сценария Краткий обзор языка Java Семейство JavaScript ECMAScript JScript: реализация Microsoft JavaScript: реализация Netscape В чем схожи два браузера? Глава 5. Определение настроек среды пользователя Определение среды Определение размеров экрана Глава 6. Подготовка к войне браузеров Использование DOM при создании API Настройка внутренних разветвлений страницы Создание таблиц стилей Использование графики Определение слоев 8 Содержание Глава 7. Подготовка к реализации взаимодействия Установка переменных Предварительная загрузка изображений Перехват событий изображений-карт Использование форм Глава 8. Реализация взаимодействия Использование событий мыши Перемещение мыши Нажатие кнопок мыши Изменение размера страницы Использование событий клавиатуры Использование событий, связанных с формами Загрузка документа Загрузка объекта Загрузка страницы Выгрузка (закрытие) документа Ошибки Глава 9. Работа со слоями Позиционирование и индексирование слоев Относительное позиционирование Абсолютное позиционирование Фиксированное позиционирование Свойства каскадных таблиц стиля Свойство position Свойство left Свойство top Свойство right Свойство bottom Свойство width Свойство height Свойство z-index Полное определение слоя Функция Change Property Управление видимостью слоя Обеспечение «динамичности» слоев Анимация слоев Определение «поведения» слоев Изменение содержания слоя Общий вид сайта-примера Глава 10. Еще один вариант использования имеющихся возможностей Титульная страница: index.htm Содержание Основной документ: webravinmain.htm Основной файл сценариев: webravin.js Содержание прокручиваемого слоя: wrscrolling.js Работа с остальными документами: refs.htm Глава 11. Создание web-сайта Команда по созданию сайта Продюсер сайта Разработчик сайта Художник Администратор web-сервера Тестер Заповеди успеха продюсера Ни один вопрос не является бессмысленным Будьте учителем, проповедником и пацифистом Надо все записывать Организация — это не шутка Будьте последовательны! У вас есть рот — пользуйтесь им Подгоняйте, льстите и находите причины, но ни за кого не делайте его работу Телепатия — не мистика Принесите пиво и останьтесь до конца вечеринки Это ваша лодка, а вы — ее капитан С прокаженными не общаются Подпишите Улыбнитесь! Утро вечера мудренее Отдыхать тоже иногда надо Регулярно проводите резервное копирование своих данных Составление плана работы Вопросы, на которые необходимо ответить перед созданием схемы Основы дизайна: разработка схемы План-схема сайта Acropolis (пример) Глава 12. Планирование сайта разработчиком Разработка основной страницы: предварительная подготовка Определение способа перемещения по сайту Создание графики Планирование взаимодействия Определение слоев Планирование тестирования Глава 13. Общедоступность Руководящие принципы при создании общедоступных сайтов 10 Содержание Использование атрибутов alt, title и longdesc Акустические таблицы стиля и синтезаторы речи UNICODE и использование шрифтов Глава 14. Последние подсказки, уловки и хитрости Советы по завоеванию популярности у посетителей Подумайте, пожалуйста, об этикете Добавление функций электронного магазина ;

Запись и чтение cookies Печать Уловки, позволяющие привлечь внимание посетителей Оформление текста Не связывайтесь с фреймами Старайтесь не использовать кнопку Submit Размещайте текст в нескольких колонках Что ждет нас в будущем Новшества в HTML Каскадные таблицы стиля Объектная модель документа Разработка расширяемого языка разметки Приложение 1. Элементы HTML, поддерживаемые новыми браузерами Приложение 2, Совместимость каскадных таблиц стилей Приложение 3. Совместимость объектных моделей документа Приложение 4. Совместимость JavaScript и Алфавитный указатель Всем, кто пытается разрабатывать web-страницы существующему программному Благодарности Преклоняюсь перед великолепной командой за их веру в меня в ходе реализации трудновыполнимой задачи подготовки этой книги к изданию. Без их помощи у меня ничего бы не получилось. Спасибо Гари Корнелу Cornell), Валери Перри (Valerie Perry), Бурк (Kiersten Burke), Энн Наварро (Ann Гарри Возняку (Harry Грэйс Вонг (Grace Wong) и тем, кого я никогда не видела, но с чьей помощью удалось достичь столь изумительного результата. Не хотелось бы также забыть переплетчиков, производителей бумаги и всех, кто принимал участие в издании этой книги.

Я не знаю ваших имен, но я всем благодарна.

Я бы хотела поблагодарить Энн, которая заставляла меня отвлечься от компь ютера для чтобы поиграть с ней. Ты постоянно будешь в моей жизни неис сякающим источником шуток и любви, только не расти слишком быстро! Луис, спасибо тебе за то, что ты был так терпелив к тому, кто, по-видимому, получал удовольствие от работы по часов в день. Обещаю, что больше не буду тебя игнорировать, по крайней мере до тех пор, пока не придется писать следующую книгу.

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

Как менеджер компании Cat's Back Consulting, находящейся в Wallowa Valley (шт. Орегон), я заметила, что клиенты, которые хотят «оживить» сайты, также хотят, чтобы все, включая бабушек, могли в них разобраться, спокойно переме щаться по ним и получать от этого удовольствие. Поскольку лишь около 80 % используемых в настоящее время web-браузеров «умеют» правильно воспроиз водить DHTML-сайты, вы должны быть уверены, что вашему клиенту доста точно, что лишь эти 80 % получат удовольствие от его сайта. А также вы должны сделать так, чтобы эти 80 % действительно получили истинное наслаждение, убедившись, что каждый разработанный вами web-сайт можно просматривать любым браузером, начиная с версии 4.0.

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

Когда вы работаете на заказчика, вы должны сделать его самого и его клиентов счастливыми. А для этого требуется полная совместимость с различными браузе рами. Ваши заказчики вряд ли останутся довольны, если их сайты смогут про сматривать лишь пользователи Internet Explorer. Ваши клиенты вряд ли станут счастливее, если их сайты будут корректно воспроизводиться только Netscape Navigator. Я потратила очень много времени на изучение поддержки HTML, CSS и сценариев обоими браузерами. За счет нахождения «наименьшего общего зна менателя» HTML и а также разработкой для сценариев вашего сайта API можно создать полноценный интерактивный сайт, который может доставить удо вольствие всем пользователям. Таким образом, вы можете гарантировать своим заказчикам, что все посетители, или по крайней мере, пользующиеся новейшими браузерами, смогут испытать удовольствие при работе с web-сайтом их компании.

14 Структура книги Структура книги Я использовала ряд приемов, в наибольшей облегчить вос приятие информации. Как и в большинстве справочников по компьютерной те матике, для важных терминов используется курсив, а для представления листингов программ используется соответствующий стиль. Это по зволяет легко определять наиболее важные и их от основного текста. в тексте встречаются примечания и советы, которые пред ставляют собой «информацию для служебного пользования» или разъяснения способов устранения проблем, которые можно «обойти» предлагаемым образом.

При книги вы что она разделена на три части. В первой рассматриваются технологии, используемые при создании интерактивных сай тов. Особое внимание уделено сходству (и функций Netscape Navigator и Internet Explorer, связанных с вопросами. В ней также со держится к частям Здесь содержится объяс нение, почему в конкретных случаях при написании сценариев используется некоторое «упрощенчество» или обходные методы, а также приводятся приме ры того, как можно быстро распознать тин браузера для различных уровней поддержки HTML, CSS и Вторая часть в большей степени и является обучающей. Однако вы здесь не увидите пошаговых типа:

1. Наберите:

DHTML и Netscape Microsoft и каскадные таблицы стилей Конечно же, для того чтобы использовать преимущества DOM-структуры, тре буется применение каскадных таблиц стилей. Это позволит манипулировать объектами документа. Наилучшую поддержку CSS обеспечивают браузеры Internet Explorer 5.x, которые были выпущены в середине 2000 года, но появле ние Netscape Navigator 6 заставит Microsoft предпринять дополнительные шаги.

При отсутствии поддержки таблиц стилей невозможно изменить стиль шрифта, как это можно было сделать в упоминавшемся выше примере.

DHTML и Netscape Компания Netscape всегда стремилась «персонализировать» свое программное обеспечение, сделать его несовместимым с программным обеспечением других компаний. По реализации некоторых параметров продукты Netscape хуже, чем аналогичные продукты корпорации Microsoft. (Вспомните, например, элемент BLINK — одну из наиболее неудачных попыток проявить оригинальность. При его активном использовании в документе создается впечатление, что вы сидите перед стробоскопом.) А в некоторых вопросах программные продукты Netscape лучше (например, в них отсутствует избыток событий, которые работают только в пре делах своего браузера.) Использование инструментальных средств компании Netscape В отличие от Microsoft компания Netscape до сих пор не выпустила программ ного обеспечения, обеспечивающего всестороннюю работу с DHTML. Composer — это наилучшее средство работы со страницами, позволяющее разработчику не множко приукрасить свои странички, но оно не идет ни в какое сравнение с пре красно продуманным FrontPage, предлагаемым корпорацией Microsoft. Netscape допускает, чтобы при разработке страниц реализация DHTML осуществлялась программным обеспечением сторонних производителей, хотя эта возможность поддерживается и собственным браузером.

Команды Netscape Netscape была первой компанией, реализовавшей идею использования переме щаемых и изменяемых слоев на web-сайтах. Это была замечательная идея, но Netscape выбрала неверный путь, создав свой элемент <1 ауег>. Интернет-консор циум (World Wide Web Consortium, W3C) и Microsoft предпочли осуществлять те же самые эффекты перемещения при помощи новых свойств позиционирова ния, которые используются в таблицах работающих с уже существующими элементами HTML. Единственным положительным результатом разработки 24 Глава 1 • DHTML: Обзор компанией Netscape тега <1ауег> стало стимулирование Интернет-консорциума и Microsoft на разработку интерактивного содержания HTML-страниц.

Существует всего два элемента, созданных компанией Netscape и поддержи ваемых только их браузером:

BLINK LAYER Элементы BLINK и LAYER не реализуются браузером Internet Explorer, можете не пытаться! Эффект, создаваемый тегом можно реализовать при помо щи свойства таблицы стилей, назначив значение свойству Не имеет значения, как вы будете создавать этот эффект, но поверьте, он очень раздражающий! Вместо тега можно осуществлять позиционирование объекта

, задав его при необходимости.

Netscape и Осенью 2000 года компания Netscape выпустила браузер Navigator 6. Он полнос тью поддерживает предложенную Интернет-консорциумом реализацию объект ной модели документов, без всяких новых дополнений от компании Netscape. Новая версия Netscape Navigator все еще поддерживает такие собственные старые эле менты, как но в дальнейшем планируется отказаться от поддержки этих элементов после, того как текущая разработка будет широко распространена.

Netscape наконец-то делает достойный шаг к полной поддержке стандарта и обес печению совместимости. Это будет большим событием для разработчиков, ориен тирующихся на различные браузеры, поскольку им теперь не придется сдерживать творческую фантазию и идеи, приводя их к «наименьшему общему знаменателю» различных реализаций объектной модели документа.

Netscape и CSS Существующий браузер осуществляет расширенную поддержку CSS, охватыва ющую поддержку большинства свойств CSS 2 (Cascading Style Sheets Level 2).

Поскольку новый браузер пока еще официально не выпущен, о чем мы уже упоминали, сложно сказать, что действительно будет поддерживаться. Однако планировалась полная поддержка требований Cascading Style Sheet 2.0, пред ставленных Интернет-консорциумом.

В чем схожи оба браузера?

Этот вопрос, возможно, звучит вызывающе, как будто между двумя самыми по пулярными браузерами существует слишком много различий в поддержке DHTML.

Нет, сходства значительно больше, чем различий. Это видно из табл. 1.2, в кото рой представлены функциональные возможности обоих браузеров.

В чем схожи оба браузера? Таблица 1.2. Характеристики, поддерживаемые Netscape Navigator и Internet Explorer Свойство Наличие в Navigator Наличие в Internet Explorer GIF-анимация Да Да Нет Да

Да Да Да Да Фреймы Да Да Плавающие фреймы Нет Да Цвет шрифта Да Да Формы Да Да Java Да Да JavaScript Да Да Нет Да Нет Да Нет Да Нет Да Основные свойства CCS 1 Да Да Основные свойства CCS 2 Да Да Свойства Да (хотя полная поддержка Да позиционирования CSS всех пар «свойство-значение» все еще разрабатывается) Поддерживаемые JavaScript JScript VBScript ECMAScript языки сценариев Таблицы Да Да Цвет фона ячейки таблицы Да Фоновое изображение Нет Да в ячейке таблицы Встроенные таблицы Нет Нет Автоматический перенос Да Да текста на следующую строку Вы можете отметить, что иногда Netscape Navigator и Internet Explorer имеют явные противоречия при воспроизведении одного и того же документа DHTML.

Однако по большинству вопросов они имеют одинаковый подход. Оба браузера имеют ряд собственных, несовместимых с другими элементов, и оба браузера ре ализуют большинство (но не все) характеристик стандарта HTML 4.O. Понятно, что различия добавляют головной боли разработчикам, однако если вы сосредо 26 Глава 1 • DHTML: Обзор точитесь на вопросе, что у них то вы просто сможете определить области, которых пока необходимо избегать.

Несколько лет назад, когда использовались браузеры версий 2.0 и 3.0, основны ми темами обсуждения были таблицы, фреймы и формы. Именно по поддержке этих элементов пользователь и делал выбор подходящего ему браузера. В настоя щее время все изменилось, теперь приходится думать об изменении свойств CSS и DOM с помощью сценария. В Интернете проблемы для разработчиков никогда не исчезают, а просто переходят на более высокий технический уровень.

Обзор объектной модели документа (World Wide Web известный также под со кращением W3C, издал документ, описывающий объектную модель документа (Document Object Model, DOM). В целях ее понимание требуется всякому, кто разобраться в сложности блочной структуры HTML-доку ментов, особенно при переходе к XHTML.

Вам необходимо уяснить, что объектная модель документа — это не программа или пакет. Это описание всех частей документа, к которым может обращаться разработчик. W3C рекомендует, чтобы воспринималась как стандарт для согласованности моделей и работы разра ботчиков, использующих языки сценариев, независимо от используемого про граммного обеспечения.

Что же такое DOM?

DOM характеризует содержание web-документа как набора объектов. Обращаться к этим объектам и манипулировать ими можно различными способами, в том числе с помощью сценариев, исполняемых как на сервере, так и на стороне кли ента. Под объектом понимается стандартный блок, множество которых и обра зует документ. Например, в масштабе этой книги данный абзац — это объект.

Абзац является индивидуальным элементом, обладающим определенными свой ствами (размером, и т. д.). Слова составляют содержание абзаца.

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

Все объекты в web-документе Для описания их взаимоотно шений используется понятие дерево поскольку, подобно реальному дере ву, структура данных «разветвляется» от корня. В HTML-документе корнем 28 Глава 2 • Обзор объектной модели документа документа является элемент . Элементы и происходят от корня и продолжают разветвляться далее. Например, элемент может иметь ветки, представленные элементами 1 X. Вильямсо технологии, используемые при создании интерактивных сайтов сходство и различие функций Netscape Navigator и Internet Explorer элементы языка сценария и HTML, одинаково воспринимаемые Heading

Add some introductory paragraph material here.

Heading 2

Рис. 2.2. Узлы документа, поддерживающего DOM, к которым можно обращаться раздельно Как видно из рис. 2.2, DOM представляет логическую структуру в виде пе ревернутого дерева. Более сложные документы можно представить в виде леса, который имеет множество корневых элементов, хотя отдельный документ мо жет иметь только один корневой элемент.

Структура документа с точки зрения объектной модели Помните, что объектная модель не определяет, как должен реализован документ, она лишь предлагает логическую модель, подходящую для интерпрета ции структуры документа. Одним наиболее важных свойств объектной модели является (structural то есть DOM не за висит от конкретной программной реализации. Она реализуется вне зависимости от того, как было создано данное программное обеспечение. Вслед ствие не имеет никакого значения, какая реализация DOM будет использо ваться при воссоздании документа на компьютере посетителя, — любая из них ту же структурную модель с теми же объектами и их взаимосвязями.

Если изучать DOM с точки зрения объектно-ориентированного программирования, то она действительно является объектной моделью, поскольку документы в ней состоят из объектов, а сама модель отражает структуру документа, сам документ и поведение документа. Подобная модель отличается от традиционного абстрактного данных, используемого в SGML-доку ментах. (

Abstract

data сосредоточена на данных, в то время как объектная модель инкапсулирует данные, защищая их от изменения.

Если DOM с точки зрения модели, то она определяет:

• объекты, с помощью которых представляется и видоизменяется документ, • интерфейсы, для представления и видоизменения документа, • поведение и атрибуты и объектов, используемых в документе, • взаимоотношения между всеми и объектами.

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

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

Реализация поддержки DOM теоретически выглядит довольно просто, но при практической реализации существуют некоторые сложности, с которыми вы во второй части данной Как потребитель и/пли разработчик вы зависите от других разработчиков, которые осуществляют поддержки тех функций, которые бы вы хотели использовать. Зачастую различные компании предоставляют поддержку но совершенно не поддерживают другие. В этом нет ничего удивительного: даже продукты Microsoft и Netscape не полностью удовлетворя ют всем требованиям DOM-стандарта.

32 Глава 2 • Обзор объектной модели документа Реализация DOM корпорацией Microsoft В Internet Explorer 5 Microsoft обеспечила довольно полную реали зацию объектной модели документа. Она значительно улучшена по сравнению с Internet Explorer 4, хотя он и обеспечивал поддержку большинства объектов документа. Microsoft обеспечила доступ к объектам двумя способами. Тот способ, которому посвящена данная книга, заключается в использовании языков сцена риев. Кроме того, к объектам можно обращаться при помощи набора интерфейсов модели многокомпонентных объектов (Component Object Model, COM).

ПРИМЕЧАНИЕ COM является моделью, которая идентифицирует последовательности объектов, используемых программистами, для создания таких новых технологий, как Active X и технология «связывания и внедрения объектов» (object linking and embedding, OLE). Microsoft разработала данную мо дель как средство, допускающее распространение программных решений, которые могли бы быть легко развернуты и реализованы в системах Windows.

Поддержка DOM корпорацией Microsoft выполнена практически в соответ ствии со всеми рекомендациями Интернет-консорциума. Осуществлена поддерж ка большинства отдельных идентификаторов, связанных с объектами HTML, используемых в web-документах на основе HTML 4.x. Задача DOM — предста вить каждый HTML-элемент как объект, а каждый атрибут HTML или CSS как свойство. Microsoft вплотную приблизилась к такому подходу. И если еще в Internet Explorer 4.5 большинство свойств не поддерживалось, то в Internet Explorer 5 поддерживаются почти все свойства.

При использовании модели разработчики, использующие продук ты корпорации Microsoft, могут обращаться ко всем объектам на странице или оперативно изменять документ, в зависимости от введенных пользователем дан ных, его поведения или настроек его оборудования. Одним из наиболее полез ных свойств DHTML и DOM является поддержка в Internet Explorer модели всех событий. К сожалению, ее поддерживают далеко не все web-браузеры.

Модель событий Microsoft Основным недостатком предшествующих объектных моделей Microsoft была несовершенная модель событий. Только незначительная часть событий была доступна для ограниченного набора тегов. А в IE 5 все элементы связаны с пол ным набором специальных событий, событий клавиатуры и выделения.

IE 5 поддерживает практически весь набор событий, включая даже те события, которые не поддерживаются Netscape Navigator 4.5:

onrowen'ter onbeforeupdate onfilterchange onscroll onselect onchange onhelp ondataavailable onreadystatechange ondatachanged onreset onsubmit Реализация DOM компанией Netscape Изменение текста в реальном масштабе времени Следующей областью DOM, в которой Internet превосходит предыду щие версии продуктов Netscape, включая Navigator 4.7, является реализация замены текста и HTML-кода. Применение Internet Explorer позволяет исполь зовать свойства innerHTML, outerHTML, и outerText. Эти свойства позволя ют обращаться к основному HTML-коду и текстовому содержанию объектов документа. Свойства innerHTML и innerText работают только с объектами-контей нерами, такими как SPAN и заголовки. Свойства outerHTML и outerText могут применяться ко всем HTML-тегам в теле документа, поэтому они могут исполь зоваться для замены всего элемента и его содержимого, а не только его тексто вого содержимого.

Свойства и outerText возвращают строку HTML-кода лишь как тексто вую информацию, найденную в той области, к которой осуществляется обращение, в то время как свойства innerHTML и outerHTML считывают всю HTML-информацию, включая настройку атрибутов. При использовании свойства HTML Internet Explorer обращается к строке, представляемой как HTML-код, и соответствующим образом ее обрабатывает, обновляя формат текста на основе представленных HTML-эле ментов. Если осуществляется манипулирование строкой при помощи свойства Text, то она будет буквально вставлена в документ, без обработки HTML-команд, поэто му в вашем документе может появиться строка типа «My Father Fred is a cool guy» вместо строки «My Father Fred is a cool guy».

Реализация DOM компанией Netscape Хотя Netscape поддерживает DOM, но ее реализация, как и ожидалось, отлича ется от реализации DOM корпорации Microsoft. Netscape занимается реализа цией DOM несколько медленнее, чем ее главный соперник. Я не собираюсь определять, что является причиной этого, но с выпуском Netscape Navigator 4.7, а особенно давно ожидаемого Netscape Navigator 6, наконец появилась необхо димая поддержка.

Netscape Navigator 3 был первым браузером, позволяющим изменять значе ния свойств объектов «на лету». Первым таким объектом был атрибут scr тега Конечно этого эффекта можно было достичь, поместив объект в элемент а и использовать свойство которое доступно для этого элемента.

Рост компании Netscape Компании Netscape не удалось полностью реализовать свойства каскадных таб лиц стиля и свойства HTML 4, ограничивающие возможности реализации DOM, которые не претерпели значительных изменений с момента выхода Navigator 2.

Тем не менее Navigator 4 поддерживает позиционирование CSS, общие свойства CSS и язык сценариев JavaScript. Однако с помощью JavaScript определяются не объекты, и реализуется этот процесс несколько иначе, чем определение таких же или подобных объектов в Internet Explorer.

2 34 Глава 2 • Обзор объектной модели документа Поддерживаемые объекты В с принятым в Netscape Navigator 4.x, необходимо, чтобы объект (tag) был размещен перед идентификатором элемента. Данный объект позволяет при помощи JavaScript обращаться к HTML-элементам опре деленного типа. Ниже объекты и свойства, поддерживаемые только Netscape Navigator 4.x:

above home previous anchor print anchors innerWidth releaseEvents applet layer reset area locationbar right below menubar routeEvents bottom next scrollbar captureEvents siblingAbove classes siblingBelow current pageX statusbar disableExternalCapture submit elements pageY tags enableExternalCapture textarea parentLayer toolbar password toString find personalBar pixelDepth valueOf В чем схожи оба браузера?

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

onkeydown onmouseout onblur onkeypress onmouseover onclick onkeyup onmouseup ondblclick onload onmove ondragdrop onmousedown onresize onerror onmousemove onunload В чем схожи оба браузера? Эти события позволяют манипулировать элементами при стандартном пози и при помощи массивов и ключевых кадров, а также при общей корректировке документа или объектов. Помимо указанных событий существует множество схожих, но не совпадающих собы тий. Конечно же, вы сами можете создать свой пользовательский интерфейс или объектную модель, которая будет использовать сценарии сервера, что позволит поддерживать множество платформ, но привязка к сценариям сервера не всегда будет наилучшим решением для многих web-разработчиков, создающих дина мические web-сайты. Использование сценариев сервера, скорее всего, потребует от вас основательного изучения нового языка, на изучение которого у вас про сто может не хватить времени. Вы также можете остановиться на разработке web-сайтов, основанной на использовании программного обеспечения опреде ленного типа web-сервера, что приведет к усложнению переноса сайта или даль нейшего обновления сервера.

Совместимые объекты и свойства Ниже представлены объекты и свойства, поддерживаемые обоими несмотря на различия в синтаксисе.

А EM file ACRONYM EMBED hidden ADDRESS embeds image APPLET event password FIELDSET applets radio anchors FONT reset areas FORM submit В forms text BASE FRAME INS BASEFONT frames KBD BIG FRAMESET LABEL BLOCKQUOTE LAYER BODY H2 LI BR LINK BUTTON H4 links CAPTION H5 location CENTER H6 MAP CITE HEAD MENU CODE history COL HR navigator COLGROUP HTML I OBJECT DD IFRAME OL DEL images OPTION DFN P IMG INPUT PLAINTEXT Input Types: plugins DL document button PRE checkbox DT Q 36 Глава 2 • Обзор объектной модели документа S style TITLE SAMP SUB TR screen SUP SCRIPT TABLE U SELECT TBODY UL SMALL TD VAR SPAN window STRIKE TFOOT XMP STRONG TH STYLE THEAD Используя эти объекты и немного поколдовав над сценарием, вы можете со здавать интерактивные сайты, которые будут работать как с Internet Explorer и Netscape Navigator 4.x, так и с их новыми «собратьями» — Internet, Explorer 5.x и Netscape Navigator 6.x.

Реализация каскадных таблиц стилей HTML-программистам, желающим максимально использовать все интерактив ные эффекты и возможности HTML 4.0, которые могут быть воспроизведены самыми последними браузерами, просто не обойтись без использования каскад ных таблиц стилей. Таблицы стилей — это списки свойств, определяющие, как будут выглядеть объекты при просмотре web-страниц. Например, таблица стиля позволяет создавать текст или изображения с помощью определенного тега HTML или указав определенное имя, выполняющее те же действия для всего документа. При использовании таблицы стиля можно управлять внешним ви дом таблиц, заголовков, маркеров списков и стилем нумерованных списков, а так же определять отступы страниц, лишь указывая наименование стиля.

Предложенная Интернет-консорциумом спецификация Cascading Style Sheets Level 1 (CSS 1) является простым механизмом, позволяющим авторам HTML документов применять к тексту определенные шрифты, цвета и интервалы, свя занные с определенным указателем стиля (style guide). Сначала эта спецификация была ограничена лишь управлением внешнего вида текста и некоторых общих свойств объектов, поддерживаемых HTML. В 1998 году, сразу после выхода брау зеров четвертой версии, Интернет-консорциум завершил работу над специфика цией CCS 2. Среди прочих нововведений в данную спецификацию было включено управление печатью документа и звуковым сопровождением докумен тов. CSS 2 включает также множество дополнительных свойств для работы с кон тейнерами (containment boxes), блоками (blocks), таблицами (tables), новыми форматами дисплея (new display formats) и контурами (outlines).

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

38 Глава 3 • Реализация каскадных таблиц стилей «Лучшая десятка» самых полезных возможностей, которые привнесли CSS в web-дизайн, выглядит следующим образом:

1. Соответствие шрифтов (подробности можно узнать на сайте корпорации Microsoft:

2. цветами и (будет рассмотрено в главе 8).

3. Добавление заранее установленных элементов текста.

4. Управление страниц (page margins), заполнением объекта (object padding) и контурами (outlines).

5. Выделение текста отступами.

6. Управление и межбуквенными 7. Создание больших заглавных букв 8. «Вырезание» объектов (см. главу 8).

9. Позиционирование и объектов (см. главу 6).

10. Добавление фильтров.

Еще одной важной возможностью, которой обладают CSS, является автома тическое создание «на лету» эффектов помощи псевдоэлементов и after, а также свойства counter. Псевдоэлементы задают просмотра структуры документа собственно в самом языке HTML. этот язык не к первой букве или первой строке содер жания элемента. Псевдоэлементы позволяют разработчикам обращаться к дан ным элементам, недоступным никаким иным способом. Псевдоэлементы также обеспечивают возможность содержания web-страниц «на лету». Про блема заключается лишь в том, что эффекты, создаваемые и after, не реализуются браузерами четвертой и более «старых» версий. Internet Explorer в некоторой степени поддерживает свойство counter, что является мини мальным требованием поддержки эффектов before и after. Netscape заявила, что браузер Navigator 6 обеспечивает полную поддержку этих эффектов.

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

ВНИМАНИЕ Ни один из браузеров третьей версии (1995) не будет правильно считывать или импортировать файл CSS, а также не будет воспринимать элемент STYLE. Эти возможности появились только в браузерах четвертой версии (1998).

Реализация CSS корпорацией Microsoft Корпорация Microsoft приступила к реализации CSS на этапе разработки Explorer 4.0. Получилась довольно удачная реализация, и сейчас ведется работа по се совершенствованию.

Реализация CSS корпорацией Microsoft Реализация CSS Microsoft отличается по некоторым моментам от реализации CSS в Netscape Navigator 4.0. Полный список команд, поддержи ваемых одним, но не другим браузером, вы можете найти в ложении 2 «Совместимость каскадных стилей». Наиболее очевидные отличия касаются соответствия шрифтов которое позво ляет посетителям в документ с теми шрифтами, которые выбрал автор. Помимо этой технологии в браузере Internet Explorer реализова ны и другие CSS:

• элементы оформления текста и прочие эффекты;

• отступы, контуры и другие свойства контейнеров;

• слои и • фильтры.

Соответствие шрифтов ОрепТуре Microsoft использует метод — это средство, обеспечивающее ствие на компьютере посетителя, со шрифтом, установлен ным автором в (соответствие указанного автором шрифта максимально схожему шрифту из набора имеющихся на компьютере теля иногда называют внедрением шрифта (ОрепТуре Font Компания Netscape использует систему соответствия шрифтов под названием (будет рассмотрена далее в данной главе) и не поддерживает механизм ОрепТуре, используемый в продуктах Microsoft.

ПРИМЕЧАНИЕ ОрепТуре — то же самое, что и Microsoft TrueType Open второй версии, — является расширени ем исходного формата шрифтов TrueType. Шрифтовая система ОрепТуре — это действующий расширенный набор существующих форматов TrueType и Туре 1. Он был разработан в ходе совершенствования поддержки как экранных, так и неэкранных шрифтов. Технология сжатия, применяемая в формате ОрепТуре, позволяет организовать очень эффективную схему когда необходимый для соответствия может быть загружен из Интернета.

шрифтов ОрепТуре в разработчикам со здавать более полноценные документы без увеличения размеров что обес печивает быструю загрузку и воспроизведение. Формат шрифтов ОрепТуре разработан для следующих требований:

• поддержка в различных ОС;

• поддержка шрифтов;

• защита данных шрифта;

• сокращенный размер файла, позволяющий более осуществ лять распространение шрифта;

• возможность типографской разметкой шрифта.

Для создания требуемых или преобразования существующих шриф тов в формат ОрепТуре разработчикам, же, придется обратиться к сред ствам Microsoft или Adobe. Однако любые TrueType, имеющиеся у разработчика, могут использоваться без всякого преобразования. Все шрифты 40 Глава 3 • Реализация каскадных таблиц стилей ОрепТуре могут иметь расширение файла либо OTF (OpenType Font) либо TTF (TrueType Font).

ПРИМЕЧАНИЕ не «читаются» такими 16-разрядными версиями Windows, как Windows 3.1 или Windows для рабочих групп. Они работают только в 32-разрядных операционных системах типа Windows 95/98 или Windows NT/2000.

Дополнительные элементы оформления текста и другие эффекты В соответствии со спецификацией CSS 2 возможно использование заранее опре деленных элементов оформления текста. К этим элементам относятся мигание (blinking), подчеркивание (underlines), зачеркивание и надчерки (overlines) (см. рис. 3.1).

Л Document - Microsoft Internet Overline Text:

This text is shown with a line over all of the characters.

Underline:

This text with a underline.

Line through:

text is shown with the Blinking text blinks.

Рис. З.1. Каждый из этих эффектов в CSS 2 определяется свойством text-decoration За счет изменения цвета фона, межстрочного интервала, межсимвольного интервала, высоты символов и использования тени возможно создание и других текстовых эффектов. Теперь все эти эффекты можно создать без использования графики. Используя псевдоэлементы: и можно создавать такие Сопровождение чертой над строкой.

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

Кроме того, Internet Explorer осуществляет поддержку таких свойств, как shadow, и word-spacing. Каждое из этих свойств по может сделать ваши web-странички красивыми и уникальными, но увидеть все эти эффекты можно только с помощью Internet Explorer 5. И даже в этом слу чае возможны в реализации, которые могут привести к тому, что эф фект просто не будет представлен.

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

контуры и другие свойства блоков Internet Explorer поддерживает большинство свойств блоков (контейнеров), до бавленных в CSS 2. И хотя большинство из них не поддерживаются браузером Netscape Navigator 4, реализация этих свойств добавлена в Netscape Navigator 6.

Internet Explorer позволяет использовать сочетания или сокращения свойств (та ких как border, margin, и padding) в качестве отдельных команд. Напри мер, Internet Explorer поддерживает команды, которые устанавливают верхнюю (top), нижнюю (bottom), левую или правую (right) ширину рамки (border), отступа (margin), заполнения (padding) или контура с помощью кото рых можно установить индивидуальную ширину для каждой рамки или одновременно указав цвет и стиль.

В табл. 3.1 представлены все свойства блоков. Различия в поддержке всех свойств смотрите в приложении 2 «Совместимость каскадных таблиц стилей».

(Более подробные сведения об этих командах представлены в главе 6 «Подго товка к войне Таблица 3.1. Свойства блоков CSS- Синтаксис Описание border border: , Устанавливает параметры рамки для всех сторон контейнера border-color border-color: colorname Устанавливает цвет рамки border-style border-style: none | hidden | dotted | Управляет внешним видом рамки dashed | solid | double | groove | ridge | inset | outset border-top border-top: , Устанавливает параметры рамки верхней части объекта border-right border-right: , Устанавливает параметры рамки правой части объекта 42 Глава 3 • Реализация каскадных таблиц стилей Таблица 3.1 (продолжение) CSS- Синтаксис Описание свойство border-left border-left: , Устанавливает параметры рамки левой части объекта border-bottom border-bottom: , Устанавливает параметры рамки нижней части объекта border-top-color Устанавливает цвет верхней рамки объекта border-right-color border-right-color: colorname Устанавливает цвет правой рамки объекта border-left-color border-left-color: colorname Устанавливает цвет левой рамки объекта border-bottom- border-bottom-color: colorname, Устанавливает нижней color рамки объекта border-top-style border-top-style: none | hidden | dotted | Устанавливает внешний вид dashed | solid | double | groove | рамки верхней части объекта | inset | outset border-right-style border-right-style: none | hidden | dotted | Устанавливает внешний вид рамки dashed | solid | double | groove | правой части объекта inset | outset border-left-style border-left-style: none | hidden | dotted | Устанавливает внешний вид рамки dashed | solid | double | groove | левой части объекта inset | outset border-bottom-style border-bottom-style: none | hidden | Устанавливает внешний вид рамки dotted | dashed | solid | double | groove | нижней части объекта inset | outset border-top-width border-top-width: medium | thin | Устанавливает высоту и ширину thick | length рамки border-right-width border-right-width: medium | thin | Устанавливает ширину правой рамки thick | border-left-width medium | thin | Устанавливает ширину левой рамки thick | length border-bottom- border-bottom-width: medium | thin | Устанавливает ширину width thick | length нижней рамки border-width border-width: medium | thin | Устанавливает ширину рамки объекта thick | length bottom bottom: length | percentage | auto Устанавливает интервал между нижним краем объекта и содержащим его контейнером (глава 6) clear clear: none | left | right | both Определяет, допускает ли данный элемент обтекание объекта с обеих сторон clip clip: shape | auto какая часть объекта будет видима (глава 8) float float: left | none | right Определяет положение плавающего блока Реализация CSS корпорацией Microsoft CSS- Синтаксис Описание height height: length | percentage Задает высоту объекта (глава б) left left: length | percentage | auto Задает интервал между левым краем объекта и содержащим его блоком (глава 6) margin margin: margin width Задает отступы на странице margin-bottom margin-bottom: margin width Задает нижний отступ на странице margin-left margin-left: margin width Задает левый отступ на странице margin-right margin-right: margin width Задает правый отступ на странице margin-top margin-top: margin width Задает верхний отступ на странице marks marks: crop | cross | none Заставляет принтеры отмечать вывод HTML-страницы max-height none | length | percentage Принудительно задает высоту объекта max-width none | length | percentage Принудительно задает ширину объекта none | length | percentage Задает минимальную высоту объекта none | length | percentage Задает минимальную ширину объекта orphans orphans: integer Назначает минимальное количество строк абзаца, которым разрешено «плавать» в конце страницы outline outline: | | Управляет внешним видом контура объекта outline-color outline-color: Задает цвет контура рамки outline-style outline-style: none | hidden | dotted | Управляет стилем контура рамки ' dashed | solid | double | groove | | inset | outset outline-width outline-width: medium | thin | thick | Задает ширину линии контура length Управляет тем, как информация overflow overflow: visible | scroll | hidden | auto будет появляться на экране Управляет заполнением или padding padding: padding-width пространством между объектом и содержащим его контейнером padding-bottom padding-bottom: padding-width Управляет заполнением или пространством между нижней границей объекта и содержащим его контейнером Управляет заполнением или padding-left padding-left: padding-width пространством между левой границей объекта и содержащим контейнером Управляет заполнением или padding-right padding-right: padding-width пространством между правой границей объекта и содержащим контейнером продолжение 44 Глава 3 • Реализация каскадных таблиц стилей Таблица 3.1 (продолжение) CSS- Синтаксис Описание padding-top padding-top: padding-width Управляет заполнением или пространством между верхней границей объекта и содержащим его контейнером page page: Управляет размером и расположением страницы, а также расположением объектов на странице. В качестве идентификатора (identifier) может использоваться любое имя, но оно будет связано с указателем @раде.

Например, @раде narrow (size: landscape) page-break-after page-break-after: auto | always | Вставляет разрыв страницы после avoid | left | right указанного объекта page-break-before page-break-before: auto | always | Вставляет разрыв страницы перед avoid | left | right указанным объектом position position: static | relative | absolute | fixed Управляет способом позиционирования объекта в документе (глава 6) quotes quotes [ | none Устанавливает символы кавычек, которые будут вставляться в начале и конце блока текста right right: length | percentage | auto Устанавливает интервал между правым краем объекта и содержащим его контейнером (глава 6) size size: [1,2] | auto | portrait Устанавливает размер и ориентацию landscape страницы top top: length | percentage | auto Устанавливает интервал между верхним краем объекта и содержащим его контейнером (глава 6) visibility visibility: visible | hidden | collapse Определяет, как будет формироваться изображение объекта в документе (глава 8) widows widows: integer Определяет минимальное количество строк абзаца, которые должны остаться в верхней части страницы, когда абзац оказывается расположенным на двух страницах width width: length | percentage | auto Управляет шириной блоков, которые создаются группой элементов (глава б) z-index auto | integer Регулирует последовательность слоев документа (глава 6) Реализация CSS корпорацией Microsoft Слои и позиционирование Хотя Netscape и была первой компанией, которая реализовала систему слоев при представлении страниц, корпорация Microsoft поддержала и развила эту идею в соответствии со спецификацией Интернет-консорциума. В табл. 3.2 представле ны стандартные элементы, касающиеся позиционирования и использования сло ев, а также свойства CSS.

Таблица 3.2. Элементы и свойства позиционирования и управления слоями Элемент/ Синтаксис Описание Свойство DIV (элемент)