Эта книга адресована всем, кто разрабатывает web-страницы назло препятствиям, заложенным в существующее программное обеспечение. На ее страницах вы найдете всесторонний анализ программной поддержки, необходимой для размещения динамического сайта в Интернете. Все web-разработчики знают, насколько сложно сделать страницу, одинаково выглядящую при четырех разрешениях монитора и во всех существующих браузерах. С помощью автора вы освоите тонкости DHTML, и разработанный вами web-сайт будет радовать вас, его хозяина, и посетителей.
СОДЕРЖАНИЕ
Благодарности
Предисловие
Структура книги
Чего вы не найдете в этой книге
Глядя в будущее
Куда обратиться?
Краткая биография автора
От издательства
Глава 1. DHTML: Обзор
Что такое DHTML?
Объектная модель документа
Каскадные таблицы стилей
Почему необходимо использовать DHTML?
DHTML-решение
Plug-in-решения
Серверные решения
DHTML и Microsoft
Использование инструментальных средств корпорации Microsoft
Команды Microsoft
Microsoft и DOM
Microsoft и каскадные таблицы стилей
DHTML и Netscape
Использование инструментальных средств компании Netscape
Команды Netscape
Netscape и DOM
Netscape и CSS
В чем схожи оба браузера?
Глава 2. Обзор объектной модели документа
Что же такое DOM?
Структура документа c точки зрения объектной модели
Реализация DOM корпорацией Microsoft
Модель событий Microsoft
Изменение текста в реальном масштабе времени
Реализация DOM компанией Netscape
Рост компании Netscape
Поддерживаемые объекты
В чем схожи оба браузера?
Совместимая модель событий
Совместимые объекты и свойства
Глава 3. Реализация каскадных таблиц стилей
Реализация CSS корпорацией Microsoft
Соответствие шрифтов OpenType
Дополнительные элементы оформления текста и другие эффекты
Отступы, контуры и другие свойства блоков
Слои и позиционирование
Фильтры
Реализация CSS компанией Netscape
Соответствие шрифтов TrueDoc
Дополнительное оформление текста
Отступы, контуры и другие свойства контейнеров
Слои и позиционирование
Фильтры
В чем схожи два браузера?
Глава 4. Обзор языков сценария
Краткий обзор языка Java
Семейство JavaScript
ECMAScript
JScript: реализация Microsoft
JavaScript: реализация Netscape
В чем схожи два браузера?
Глава 5. Определение настроек среды пользователя
Определение среды
Определение размеров экрана
Глава 6. Подготовка к войне браузеров
Использование DOM при создании API
Настройка внутренних разветвлений страницы
Создание таблиц стилей
Использование графики
Определение слоев
Глава 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. Общедоступность
Руководящие принципы при создании общедоступных сайтов
Использование атрибутов alt, title и longdesc
Акустические таблицы стиля и синтезаторы речи
UNICODE и использование шрифтов
Глава 14. Последние подсказки, уловки и хитрости
Советы по завоеванию популярности у посетителей
Подумайте, пожалуйста, об этикете
Добавление функций электронного магазина
Запись и чтение cookies
Печать
Уловки, позволяющие привлечь внимание посетителей
Оформление текста
Не связывайтесь с фреймами
Старайтесь не использовать кнопку Submit
Размещайте текст в нескольких колонках
Что ждет нас в будущем
Новшества в HTML
Каскадные таблицы стиля
Объектная модель документа
Разработка расширяемого языка разметки
Приложение 1. Элементы HTML, поддерживаемые новыми браузерами
Приложение 2. Совместимость каскадных таблиц стилей
Приложение 3. Совместимость объектных моделей документа
Приложение 4. Совместимость JavaScript и JScript
Алфавитный указатель
ОТРЫВОК
Глава 1DHTML: Обзор
Что такое DHTML?
Объектная модель документа
Каскадные таблицы стилей
Почему необходимо использовать DHTML?
DHTML-решение
Plug-in-решения
Серверные решения
DHTML и Microsoft
Использование инструментальных средств корпорации Microsoft
Команды Microsoft
Microsoft и DOM
Microsoft и каскадные таблицы стилей
DHTML и Netscape
Использование инструментальных средств компании Netscape
Команды Netscape
Netscape и DOM
Netscape и CSS
В чем схожи оба браузера?
Пользователи постоянно жалуются на "разрастающееся программное обеспечение" различных продуктов, которое не имеет практического применения. В компаниях зачастую используется программное обеспечение одного направления, например текстовой процессор, и осуществляется его комбинирование с крупными таблицами, базами данных и графическими программами. Хорошо, если все эти программы действительно используются, в противном случае они просто занимают место на диске. Сейчас программисты пытаются сделать то же самое с web-приложениями и web-страницами за сч
ет разработки динамических документов. Они не вызывают перегрузки дисковой подсистемы и не приводят к активному использованию оперативной памяти. Пока это удается. Язык DHTML наряду с базовым набором команд языка HTML основывается на создании сценариев, использовании объектной модели документа и таблиц стилей. Помимо этого имеется возможность использовать на страницах огромное разнообразие аудиофайлов и изображений при помощи оперативных, быстро загружаемых, легко управляемых интерактивных интерфейсов, которые без труда могут создаваться любым web-про
граммистом.
Квалифицированные web-разработчики активно применяют преимущества динамического HTML (Dynamic HTML). DHTML-сайты используют расширенный набор HTML-элементов и атрибутов, а также элементы таблиц стилей. Кроме того, при помощи сценариев можно осуществлять динамическое изменение сайта. Все вместе это позволяет создавать странички, которые "оживают" благодаря перемещающемуся тексту, подвижной графике и наличию интерактивных элементов. В настоящее время глобальная сеть предоставляет пользователям давно ожидаемые ими функциональность и интерактивность без исполь
зования подключаемых модулей (plug-ins), добавок (add-ons), серверных программ, не вызывая увеличения времени загрузки и нагрузки процессора.
По мере того как Интернет становится основным источником информации для компаний и частных лиц, возникает потребность в том, чтобы HTML-авторы сознательно обеспечивали достоверность представления документа независимо от используемого пользователем Интернета оборудования и программного обеспечения. И хотя HTML-документы никогда не смогут представить документ в том же виде, в котором он был создан, HTML в настоящее время является одним из самых популярных форматов представления документов.
Что такое DHTML?
Динамический HTML (Dynamic HTML, DHTML), видимо, недооценен разработчиками-новичками. Это не отдельный язык HTML и не расширенный набор команд, собранных из разных языков. DHTML соответствует требованиям HTML 4.0 и 4.1, поддерживает каскадные таблицы стилей (Cascading Style Sheets, CSS), объектную модель документа (Document Object Model, DOM), а также языки сценариев JavaScript, JScript, ECMAScript и VBScript, что позволяет создавать действительно интерактивные web-сайты.
Если вы являетесь web-программистом, то DHTML может кардинальным образом изменить ваш мир. Однако от вас потребуется больше, чем просто знание элементов HTML и их атрибутов. Для изменения внешнего вида и форматирования каждого объекта и элемента документа вы должны уметь использовать каскадные таблицы стилей. Вы должны четко представлять, как работает объектная модель документа и как она связана со структурой документа, а также как при использовании этих знаний можно изменять содержание и внешний вид вашего документа при взаимодействии читателя с вашими
страницами. Вы также должны уметь создавать сценарии на языках JavaScript, JScript, VBScript или ECMAScript. Всестороннее знание любого из этих языков позволит вам определять, а затем изменять любой объект, входящий в структуру документа, которая, в свою очередь, определяется объектной моделью документа.
Объектная модель документа
Объектная модель документа (Document Object Model, DOM) является независимой от операционной системы и используемого языка системой взаимодействия, которая предоставляет программам и сценариям динамический доступ и возможность обновления содержания, структуры и стиля документа. DOM определяет последовательную модель, используемую при создании HTML-документов. Кроме того, она обеспечивает стандартный интерфейс, используемый для доступа к HTML-объектам, управлению ими и организации их взаимодействия. DOM отвечает требованиям web-разработчиков, которые при разработк
е документов основываются на единых универсальных требованиях, а не на требованиях программы определенного производителя. В общем, эта модель расширяет возможности взаимодействия в сети. Не имея четкого представления об объектной модели документа, очень сложно создавать странички, которые бы использовали все достоинства сети и web-браузеров. Более подробно объектная модель документа рассмотрена в главе 2.
Каскадные таблицы стилей
Каскадные таблицы стиляей (Cascading Style Sheets, CSS) являются довольно простой технологией, позволяющей подключать к HTML-документам набор свойств, определяющих шрифты, цвета и интервалы, относящиеся к текстовой информации, размещаемой в HTML-документах. Для реализации всех преимуществ HTML 4.1 и возможностей динамических интерактивных эффектов CSS требуется использование браузеров версии 4.0 и выше. Более подробно каскадные таблицы стилей рассмотрены в главе 3.
Почему необходимо использовать DHTML?
Почему из всех возможных решений, обеспечивающих персонализацию и интерактивное содержание вашего web-сайта, вы должны использовать совокупность HTML, CSS, DOM и сценария? Почему бы не навязать клиенту использование таких вставок, как Flash и Real Player? Почему бы не продолжить использование таких серверных решений, как Active Server Pages (ASP) и Cold Fusion? На вопрос, какое из решений будет наилучшим, не существует готового ответа. Все зависит от конкретной ситуации. Для сравнения в табл. 1.1 приведено несколько "за" и "против" использования различных решений.
Таблица 1.1. Сравнение решений, обеспечивающих содержание вашего сайта
Свойство DHTML Вставки Серверные решения
Клиент независим от операционной системы Частично Да Да
Сервер независим от операционной системы Да Да Нет
Стоимость для клиента Бесплатно Бесплатно Бесплатно
Стоимость разработки программного обеспечения (для заказчика) Определяется только временем работы В среднем $300 В среднем $1000
Производительность В зависимости от мощности оборудования клиента Высокая В зависимости от скорости соединения с Интернетом
Доступ к базам данных Нет Нет Есть
На выбор решения частично влияют ваше финансовое положение, операционная система, в которой ведется разработка, операционная система сервера и желаемый уровень быстродействия.
DHTML-решение
DHTML-решения обеспечивают относительно универсальные средства создания интерактивных web-сайтов. Они требуют, чтобы посетитель использовал браузер версии 4.0 и выше, поддерживающий JavaScript или все языки сценариев. Возможно, вам будет интересно, что в середине 2000 года, согласно данным трех статистических организаций сети (web-Snapshot, Internet.com и web-Statistics.com), приблизительно 70 % рынка браузеров принадлежит Internet Explorer корпорации Microsoft, а оставшиеся 30 % - Netscape Navigator. Из них только 1 % пользователей браузера корпорации Microsoft и менее 2 % пользователей браузера компании Netscape исп
ользуют браузеры версий более старых, чем 4.0. При использовании данного решения основные усилия разработчика должны быть направлены на изучение различных технологий и языков, необходимых для создания динамических сайтов. После овладения этими знаниями они могут быть применены для "доработки" статических сайтов. Недостатком DHTML-сайта является то, что его производительность определяется аппаратными и программными настройками компьютера посетителя. Это в известной мере верно для всех методов создания интерактивности, но наиболее остро снижение произв
одительности может быть связано с использованием DHTML-страниц.
Plug-in-решения
Plug-in-решения (использование подключаемого модуля) позволяют быстро создавать высококачественные динамические страницы. Основной недостаток заключается в том, что посетитель должен установить подключаемый модуль на своем компьютере. Большинству людей не нравится дополнительная загрузка и установка, когда им лишь надо просмотреть страничку. Кроме того, данное решение требует наличие у вас, разработчика, программы, с помощью которой создаются файлы, воспроизводимые подключаемым модулем. Эта программа может стоить от $200 до $1000 и, кроме того, для работ
ы с ней требуются соответствующие знания.
Серверные решения
Серверные решения, такие как Active Server Pages (ASP) и Cold Fusion, предназначены для работы на специальных серверах или требуют серверной поддержки. Изначально технология ASP предназначалась для работы с информационным сервером Интернета (Internet Information Server, IIS) корпорации Microsoft, но впоследствии была адаптирована под другие платформы. Теперь она, так же как и Cold Fusion, поддерживается Windows- и Unix-серверами. При использовании большинства серверных решений ваши возможности зависят от используемой вами операционной системы. Эти решения дорогостоящи и требуют наличия у вас дов
ольно больших полномочий в отношении вашего сервера.
DHTML и Microsoft
Компании, занимающиеся производством программного обеспечения, особенно "программные гиганты", стремятся использовать все новейшие технологии, связанные с компьютерной индустрией. Корпорация Microsoft имеет три различные среды web-программирования - JScript, ActiveX (COM) и VBScript. Корпорация занимается обеспечением возможности их взаимодействия помимо поддержки стандартных команд HTML, каскадных таблиц стилей и реализации DOM.
Использование инструментальных средств корпорации Microsoft
В данной книге мы кратко рассмотрим использование программы FrontPage. Пакет разработки FrontPage корпорации Microsoft является мощнейшим средством, полезным не только для разработчика, но и для пользователей и администраторов сервера. FrontPage является программой, позволяющей создавать динамические сайты за счет множества различных встроенных средств и при использовании специальных расширений, устанавливаемых на web-сервер. Проблема заключается в том, что эти расширения доступны не на всех типах web-серверов, а некоторые серверы вообще не способны поддерживать рас
ширения FrontPage. Основная цель создания этого программного гиганта - обеспечить разработчикам, которые хотят создавать страницы, корректно воспроизводимые различными браузерами и всеми серверами, непрерывный конвейер. Если вы являетесь преданным сторонником Microsoft, то вы просто получите удовольствие от работы с программой FrontPage. Должна заметить, что все примеры, приведенные в данной книге, могут быть составлены при помощи FrontPage.
С практической точки зрения FrontPage является основным средством, с помощью которого обеспечивается доступ ко всем возможностям DHTML, реализованным Microsoft, несмотря на то что разработчик может воспользоваться информационным сервером Интернета (IIS). Предлагаемый подход включает множество серверных сценариев, требующих использования расширений FrontPage на сервере, и поддерживает JScript и те элементы JavaScript, которые совпадают с JScript. Я бы назвала код, сгенерированный программой FrontPage, "господин HTML". Должна признать, что текст HTML-документа, создаваемый программой Front
Page 2000, получается более высокого качества, чем у его предшественников. Данный вариант HTML великолепно подходит для корпоративных сетей, построенных на базе продуктов Microsoft или на базе web-сервера NT, если вы знаете, что в ближайшее будущее не собираетесь переходить на другой сервер.
Команды Microsoft
А теперь давайте рассмотрим элементы, которые были созданы корпорацией Microsoft для использования в документах HTML:
BGSOUND LISTING MARQUEE
Список выглядит очень маленьким, но подождите, мы перейдем к рассмотрению параметров, созданных для работы с этими элементами, в главах 2 (DOM) и 4 (JavaScript/JScript).
Только что упомянутые элементы BGSOUND, LISTING и MARQUEE не могут использоваться при просмотре документов продуктами компании Netscape, хотя при помощи элемента EMBED можно реализовать поддержку элемента BGSOUND браузером Netscape Navigator. Использование элемента LISTING можно обойти при помощи элементов LI, OL, UL и MENU, содержащихся в HTML 4.0. Ваш список может выглядеть иначе, чем при использовании стандартных элементов HTML 4.0, но, по крайней мере, он будет доступен всем посетителям вашей странички. Эффект, реализованный с помощью элемента MARQUEE, можно создать за счет последовательного пер
емещения слоя, поэтому данная команда не является необходимой, хотя для реализации данной задачи потребуется поддержка сценариев. (Список всех элементов приведен в приложении 1.)
Microsoft и DOM
В вопросах поддержки функций и свойств DHTML браузер Internet Explorer 5 значительно обогнал Netscape Navigator 4.x. Да, компания Netscape сейчас разработала новую версию браузера (Netscape Navigator 6), но если сравнить Internet Explorer 4 и Navigator 4, то в поддержке DHTML Explorer занимает лидирующую позицию.
В настоящее время Microsoft поддерживает большинство свойств DOM, а также свойства CSS. Язык JScript позволяет осуществить взаимодействие как DOM-объектов, так и свойств CSS. (Internet Explorer поддерживает каждый из этих стандартов - см. приложения 2, 3 и 4.)
Язык JScript будет подробно рассмотрен в главе 4, а сейчас вам достаточно представлять, что JScript является версией языка JavaScript, реализованной корпорацией Microsoft. По сути он похож на JavaScript компании Netscape, но имеет более детальную поддержку DOM, а также дополнительные функции и объекты, не поддерживаемые JavaScript. Каждая из этих функций внедрена для обеспечения взаимной поддержки JScript и VBScript, а также для того, чтобы дать больше преимуществ пользователям Internet Explorer.
И хотя реализация DOM в Internet Explorer 5 осуществлена не полностью, но то, что уже сделано, очень полезно для программистов, создающих сценарии, или "сценаристов", как я их называю. Эта поддержка дает возможность обращаться к любым параметрам любого объекта, используемого в вашем документе, и изменять их. Например, в документах, использующих объектную модель, при помощи сценария можно изменить стиль шрифта, используемый в конкретном заголовке H2. Вы можете осуществить анимацию слоев текста, изменять изображения "на лету" и менять реальность мира сети, если захот
ите это сделать.
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 выбрала неверный путь, создав свой элемент . Интернет-консорциум (World Wide Web Consortium, W3C) и Microsoft предпочли осуществлять те же самые эффекты перемещения при помощи новых свойств позиционирования, которые используются в таблицах CSS, работающих с уже существующими элементами HTML. Единственным положительным результатом разработки компанией Netscape тега стало стимулирование Интернет-консорциума и Microsoft на разраб
отку интерактивного содержания HTML-страниц.
Существует всего два элемента, созданных компанией Netscape и поддерживаемых только их браузером:
BLINK LAYER
Элементы BLINK и LAYER не реализуются браузером Internet Explorer, можете не пытаться! Эффект, создаваемый тегом |