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

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

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

Механизмы связи таблиц стилей с документами не зависят от языка таблиц стилей.

До появления таблиц стилей возможности управления созданием изображения у авторов были ограничены. Но уже в HTML 3.2 был включен ряд атрибутов и элементов для управления выравниванием, размером шрифта и цветом текста. Авторы также использовали для компоновки страниц таблицы и изображения. Поскольку на обновление браузеров у пользователей уйдет довольно долгое время, эти средства еще будут использоваться в течение какого-то времени. Однако поскольку таблицы стилей обеспечивают более мощные механизмы представления, World Wide Web Consortium существенно сократит число элементов и атрибутов представления в HTML.

В спецификации HTML 4.0 предусматривается использование каскадных таблиц стилей (CSS).

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

Лекция 9

3.9 Автоматизация создания Web-публикаций.

Web-публикации в WWW реализуются в виде Web-страниц и Web-серверов. В современной литературе наряду с термином Web-сервер часто используется термин Web-cайт или Web-узел.

Для подготовки этих электронных изданий создано множество программных продуктов - от простейших HTML-редакторов до средств проектирования Web-страниц и Web-серверов.

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

В традиционной печати сроки выпуска изданий определяются графиками работ типографий и структур распространения. Как правило, новая интересная информация появляется в Internet гораздо раньше. Это объясняется наличием средств автоматизации проектирования Web-страниц и более сложных информационных структур - Web-серверов. Именно в этом особая роль и значение программных пакетов Macromedia Dreamweaver и Microsoft FrontPage.

3.9.1 Назначение и функциональные возможности пакета

Пакет Dreamweaver корпорации Macromedia предназначен для опытных HTML-программистов и позволяет создавать электронные издания в соответствии с замыслом их авторов. В Dreamweaver предусмотрены функции для подготовки и отладки текстов на языке Dynamic HTML (DHTML) и каскадных таблиц стилей Cascading Style Sheets (CSS).

Фактически Dreamweaver - это достаточно сложный HTML-редактор, обеспечивающий режим полного соответствия WYSIWYG и доступ в реальном времени к внутреннему HTML-редактору или подобной программе, встроенной в пакет Dreamweaver. В одно из плавающих окон последнего можно щелчком мыши вставлять изображения, таблицы, Java-апплеты и другие объекты, которые вызывают появление окна свойств для настройки пользовательских объектов.

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

Dreamweaver обеспечивает поддержку многочисленных и довольно разнородных расширений, которые принято объединять термином «динамический HTML». Объекты создаются с абсолютным позиционированием при помощи так называемых layers (слоев). Более того, программный пакет способен преобразовать сверстанную на основе таблиц страницу так, что каждая ячейка таблицы превратится в «слой». Удобная и наглядная панель, напоминающая об интерфейсе программ Director или Flash, позволяет организовать анимационные эффекты с перемещением слоев и сменой изображений. Генерируемый при этом JavaScript-код ориентирован на различные версии браузеров, а все случаи возможной несовместимости оговариваются как в сообщениях пакета, так и в комментариях к генерируемому коду.

Dreamweaver - это среда, открытая на всех уровнях для сторонних разработчиков. Возможности программного пакета (который сам в значительной степени создан с использованием JavaScript и HTML) можно расширять, не дожидаясь выхода новой версии. Аналогичную картину можно увидеть при расширении функциональных возможностей Photoshop путем установки новых plug-in модулей. Для Dreamweaver этот процесс реализуется значительно проще. Существуют, например, расширения для поддержки QuickTime, G2, OpenPix, IBM HotMedia и т. д.

К функциональным возможностям программного пакета Dreamweaver относятся:

Dreamweaver представляет собой профессиональный редактор для создания Web-сайтов (серверов) и управления ими. С помощью Dreamweaver можно создавать Web-сайты, независимые от серверной платформы и браузера конечного пользователя.

Создание и редактирование WWW-документов с помощью стандарта языка HTML. Dreamweaver позволяет использовать возможности Dynamic HTML, например анимированные таблицы, слои, формы, фреймы, объекты, и задавать поведение объектов без необходимости написания кода HTML вручную.

Функция оптимизации под определенный браузер позволяет избежать существующих проблем при работе Web-сервера с различными платформами и браузерами.

Создание карты сайта, позволяющей автору наглядно представлять его структуру.

Создание комплексной компоновки страницы (complex page layout).

Форматирование и редактирование текстового материала Web-публикации; шрифтовое и стилевое оформление Web-документов. Последняя функциональная возможность поддерживается таблицами стилей (CSS) с учетом особенностей отдельных браузеров.

Возможность прямого доступа к HTML-коду (в отдельном окне) и параллельного ручного редактирования.

Поддержка русского языка (включая КОИ-8 и т. п.). Можно указать в настройках набор символов и раскладку клавиатуры (обычно эта возможность реализуется в момент создания новой чистой страницы).

Работа с таблицами.

Возможность работы со слоями. Поддержка позиционируемых динамических слоев (DIV, SPAN, LAYER, ILAYER).

Возможность взаимной конвертации таблиц и слоев.

Встраивание изображений. Контроль над соответствием атрибутов height и width реальным размерам изображения.

Трассировка изображений.

Работа с палитрами цветов.

Работа с формами, фреймами.

Управление объектами.

Поддержка внешних объектов ActiveX, Java, Flash, Shockwave, QuickTime, RealSystem G2.

Автоматизация работы с метаэлементами.

Выделение «потерянных» и неуместных тегов.

Встраивание анимационных Flash-роликов.

Средства контроля за интерактивными анимационными роликами (Timeline).

Функция очистки и оптимизации кода (актуальна при обработке страниц, созданных в редакторах типа FrontPage).

Проверка и корректировка локальных и глобальных ссылок. По умолчанию они могут задаваться внутри сайта.

Возможность применять единый шаблон (template) для всего сайта (сервера) или его части.

Применение нескольких шаблонов к одной Web-странице.

Задание линии поведения (behavior) для элементов страницы.

Проверка кода на совместимость со спецификациями HTML 2.0/3.2/4.0, WebTV и с версиями браузеров Netscape, Explorer, Opera.

Трансляция серверных технологий Server Side Includes (SSI).

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

Удобный менеджер сайтов и обновления по FTP.

Реализация глобального поиска и продвинутая система замены «плоского» текста, тегов или оформленного текста в пределах документа, директории или сайта (сервера).

Развитая система настроек, включающая управление табуляцией, регистром букв в тегах/атрибутах, кавычками, концами строк в HTML-коде.

Плавающие панели (палитры) с доступом к свойствам объектов.

Меню в строке состояния для передвижений по иерархии тегов.

Арсенал событий, генерируемых при загрузке страницы, в том числе зависимости от версии браузера.

Интеграция с другими приложениями.