МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ 1. DHTML 2. Редакторы web- документов

Язык НТМL задает общую структуру НТМL-документа, он предназначен для построения документов, отображающихся одинаково, независимо от платформы и типа программы просмотра.

Динамический HTML (DHTML) является дальнейшим развитием языка НТМL, добавляет к HTML набор свойств, позволяющих определять внешний вид документа и управлять слоями. При создании web-страницы с помощью DHTML у разработчика появляются дополнительные возможности.

Динамический HTML (DHTML)

DHTML (Dynamic hypertext markup language) - расширение языка гипертекстовой разметки документов HTML. Позволяет добавить "динамику" в статические страницы HTML. Содержит ряд событий и позволяет предпринимать определенные действия соответствующие данным событиям.

Dynamic HTML или DHTML это способ создания интерактивного веб-сайта, используя сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) DOM (объектной модели документа).

Все элементы страницы доступны для просмотра и управления Возможно детальное форматирование документов HTML с помощью CSS Пользователь может управлять отображением элементов на странице Для элементов страницы предусмотрены различные способы позиционирования их на странице; абсолютное позиционирование позволяет создавать, в частности, анимационные эффекты

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

Реализация DHTML покоится на трех "китах": непосредственно HTML, каскадных таблицах стилей (CSS) и языке сценариев (JavaScript или VBScript). Эти три компонента DHTML связаны между собой объектной моделью документа (DOM), являющейся, по сути, интерфейсом прикладного программирования (API). DOM связывает воедино три компонента, придавая простому документу HTML новое качество, возможность динамического изменения своего содержимого без перезагрузки страницы.

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

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

Параметр id задаёт уникальное имя элемента, которое можно использовать для ссылок на элементы в сценариях. Параметр id можно задать в любом теге. Все объекты, расположенные на странице, содержатся в наборе document.all.

Доступ к свойствам элемента с уникальным именем el1 осуществляется с помощью конструкции document.all['el1'].style. Если бы требовалось изменить цвет шрифта элемента el1, то сделать это можно было бы с помощью оператора присваивания document.all['el1'].style.color = 'blue'

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

Изменение цвета заголовка: Изменение цвета заголовка Изменение цвета заголовка

Ключевое слово this языка JavaScript используется для ссылки на текущий объект (в данном случае тег), применяется при вызове функции обработки события.

Многих анимационных эффектов можно достичь, скрывая или отображая некоторые элементы на странице. В DHTML предусмотрены средства, которые позволяют управлять отображением и скрытием элементов на странице HTML. Свойство visibility управляет отображением элемента. Если его значение равно visible, то элемент отображается, если значение равно hidden, то элемент на странице не отображается. По умолчанию элемент отображается на странице.

Напишем сценарий, который позволяет отображать или скрывать фрагмент текста. При щелчке на соответствующей кнопке изменяется значение свойства объекта, управляющего отображением элемента на странице. Тег используется в случаях, когда требуется отметить фрагмент текста для задания его свойств. В приведённом примере вместо тега можно использовать тег. Доступ к свойству отображения осуществляется с помощью конструкции document.all["l1"].style.visibility. Значение этого свойства зависит от текущего состояния и кнопки, которая была нажата.

Отображение или скрытие фрагмента текста <!-- // function showsl (n) { var el=document.all["l1"].style if (n==1) el.visibility='visible' else el.visibility='hidden' } //-->

Скрытие и отображение текста Текст в документе Текст, который либо показываем, либо скрываем

Напишем сценарий, который позволяет скрывать и отображать изображение. Воспользуемся для управления отображением свойством visibility. Управлять отображением будем с помощью одной кнопки. На кнопке помещается надпись с указанием действия, которое можно выполнить. Когда изображение отображено на странице, то его можно скрыть, и, наоборот, когда изображение скрыто, его можно отобразить.

Каждый раз при выполнении сценария меняется свойство value кнопки, поэтому надпись на кнопке соответствует действию, которое можно выполнить применительно к изображению. Если нажать на кнопку Скрыть, то рисунок не отображается в документе, но место под него оставлено. После нажатия на кнопку Отобразить документ примет первоначальный вид.

Объект со свойством visibility Текст и изображение. Свойство visibility <!-- // var d=document function showsl() { if (d.form1.but1. value == "Отобразить") {d.all["mypict"].style.visibility='visible' d.form1.but1.value="Скрыть" } else { d.all["mypict"].style.visibility='hidden' d.form1.but1.value="Отобразить"}} //-->

Отображение элемента на странице Работа неизвестного фотографа

Управление отображением с помощью свойства DISPLAY Управлять отображением документа на странице можно и с помощью свойства display. Объект со свойством display ведёт себя иначе, чем объект со свойством visibility. Если значение display равно none, то элемент не только не отображается на странице, но на странице нет и пустого блока, соответствующего этому элементу. Используя свойства объекта visibility и display, можно создавать простые анимационные эффекты.

Для создания простого анимационного эффекта можно управлять свойством visibility объекта. Например, для создания эффекта движения слева направо можно лишь изменять значения свойства visibility рядом расположенных элементов. Для создания более сложных эффектов, например, светящейся гирлянды на новогодней ёлке, можно изменять свойства отображения случайно выбранных элементов и т.п. Свойство display часто используется для организации меню. Для того, чтобы "раскрыть" пункт меню, следует "раздвинуть" пункты основного меню, вставив подпункты следующего уровня.

Напишем сценарий управления отображением на странице объекта, обладающего свойством display. Как и в предыдущем примере, будем использовать одну кнопку для выполнения действий. После нажатия кнопки Cкрыть на странице не останется пустого блока под изображение, иными словами, элемент не только не отображается, а исключается из потока отображения в отличие от случая, рассмотренного ранее.

Объект со свойством display: Текст и изображение. Свойство display

Отображение элемента на странице Работа неизвестного фотографа

Разнообразные мультимедийные эффекты можно получить, если применить к элементам страницы фильтры

Браузер IE, начиная с версии 4, имеет специфическое CSS-свойство Filter, с помощью которого можно создать какой-либо визуальный эффект. Синтаксис использования CSS свойства Filter (фильтр) в IE имеет следующий вид. Filter: ( ); Атрибуты отделяются друг от друга символом «запятая». Объявление атрибута состоит из двух частей: названия атрибута и его значения, разделенных знаком «равно». Значение атрибута может быть взято в кавычки. Кроме того начиная с версии IE 5.5 доступны и так называемые «трансформации», в этом случае имя фильтра необходимо использовать с «приставкой» progid:DXImageTransform.Microsoft.

Фильтр Alpha - устанавливает уровень непрозрачности объекта Параметры: opacity – степень прозрачности в начальной точке градиента; finishOpacity – степень прозрачности в конечной точке градиента; style – тип градиента прозрачности: 0 – равномерный, 1 – линейный, 2 – радиальный, 3 – прямоугольный.

Пример использования данного фильтра css:

Применение фильтра Alpha под популярные браузеры: a:hover img { filter: progid: DXImageTransform.Microsoft.Alpha (opacity=50); -moz-opacity: 0.5; /* Mozilla Firefox 2.0, 3.0 */ -khtml- opacity: 0.5; /* Safari 1.1, 2.0, Google Chrome */ opacity: 0.5; /* CSS3 - Opera 9 */ filter: alpha(opacity=50); /* Internet Explorer (IE) 5.5, 6.0, 7.0 */ }

Комбинируя значения свойств фильтра alpha можно создавать разнообразные эффекты отображения объекта.

Слои Один из способов представления информации на web-странице – представление с помощью слоев. Слои являются элементами окна, они могут перекрываться. С помощью JavaScript слои можно перемещать, скрывать или отображать. Слои, известные как перемещаемые элементы составляют часть технологии CSS.

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

Чтобы задать слои с помощью тега, следует заключить содержимое слоя в пару тегов и и определить свойства слоя с помощью параметра STYLE, например так

Пример <div id=11 style=position: absolute; left=300; top=150; width=120; visibility: visible> Данный фрагмент кода определяет слой 11. Это перемещаемый слой, содержащий изображение, смещенный относительно левого верхнего угла окна браузера на 300 пикселов по горизонтали и 150 пикселов по вертикали, ширина слоя – 120 пикселов.

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

Свойство z-index задает слой, в котором располагается элемент при отображении. Если значение свойства z-index равно р, слой перекрывает все слои со значением параметра, меньшим, чем р. Слой с максимальным значением параметра z-index расположен ближе к пользователю, чем остальные слои.

Редакторы Web-документов

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

Создавать HTML-документы можно двумя способами: написать HTML-документ вручную с помощью любого текстового редактора (например, Блокнота от Windows); воспользоваться визуальными средствами создания web-документов. Их еще называют WYSIWYG- редакторами, то есть what-you-see-is- what-you-get.

Блокнот Windows Эта программа относится к типу простых текстовых HTML-редакторов, применяемых для создания HTML-кода вручную. В Блокноте можно сохранять обычные текстовые файлы с расширением htm и html, но можно также сохранять файлы, которые содержат PHP-код. Эти файлы имеют расширение php. Для того, чтобы текст правильно интерпретировался Браузером компьютера в окне пользователя, надо не забыть его отделить тегами и. И надо знать все команды, теги, дескрипторы, чтобы создавать технически грамотные web-страницы.

Notepad++ многофункциональный блокнот

Notepad++Notepad++ это очень простой, бесплатный, и в тоже время функциональный текстовый редактор. Идея его разработки заключалась в создании редактора, позволяющего заменить стандартный редактор «блокнот», идущий в составе ОС Windows. Кроме того, редактор имеет расширенные функции для работы с листингами программ.

Основные особенности Notepad++ : подсветка текста и возможность сворачивания блоков, согласно синтаксису языка программирования настраиваемый пользователем режим подсветки синтаксиса авто-завершение набираемого слова одновременная работа с множеством документов одновременный просмотр нескольких документов поддержка регулярных выражений поиска / замены

Основные особенности Notepad++ : полная поддержка перетягивания фрагментов текста динамическое изменение окон просмотра автоматическое определение состояния файла изменение масштаба поддержка большого количества языков заметки выделение скобок при редактировании текста запись макроса и его выполнение

Macromedia HomeSite

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

Macromedia HomeSite обеспечивают удобную подсветку синтаксиса не только HTML-страниц, но и файлов PHP, Perl, ASP, MySQL и других популярных средств разработки. Если не устраивает текущая цветовая схема подсветки синтаксиса, то можно отредактировать существующую, или даже создать собственную схему оформления документов. HomeSite имеет мощную справочную систему, содержащую кроме описания возможностей программы спецификации языка HTML, справочник тегов и включающая удобные всплывающие подсказки по текущему дескриптору - для их вызова достаточно нажать F2, и пользователю демонстрируются все возможные атрибуты для данного тега.

Для ускорения доступа к часто используемым группам тегов в верхнем правом углу имеются несколько панелей, вид и расположение которых к тому же можно изменять. Панель разделена на несколько вкладок, на каждой из которых представлены теги, относящиеся к одной группе. Например, вкладка Fonts содержит кнопки для быстрого увеличения размера шрифта, смены его начертания, местоположения относительно строки и для вставки заголовков трех уровней. Альтернативным способом ввода вручную всех атрибутов тега является, так называемый, Tag Editor - редактор тегов, с помощью которого можно существенно облегчить процесс присвоения значений различным атрибутам. Наличие средств для создания и конфигурирования таблиц и фреймов - Table Wizard и Frame Wizard, позволяющих существенно облегчить жизнь разработчику при создании таблиц и фреймов сложной структуры.

Содержит встроенный модуль проверки орфографии, проверяющий не только корректность использованных дескрипторов, но и непосредственно правильность самого текста, а также редактор файлов CSS - каскадных листов стилей под названием TopStyle. Для повышения скорости создания документов можно воспользоваться клавиатурными сокращениями - HomeSite предоставляет обширное поле деятельности для любителей клавиатуры. Например, тегу соответствует комбинация клавиш Ctrl+Break. Впрочем, пользователь волен назначить практически любой команде удобное ему сочетание клавиш. Плюсы. К достоинствам программы можно отнести функциональность, универсальность, поддержку различных языков программирования, понятный интерфейс, широкие возможности и мощную справочную систему. Минусы. Отсутствие поддержки русского языка, высокая цена, необходимо хотя бы поверхностное знание языка HTML для создания страничек, высокая цена программы. Резюмируя вышесказанное, можно порекомендовать Macromedia HomeSite для пользователей средней и высокой квалификации, которые не ограничиваются возможностями языка HTML при создании веб-документов.

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

PHP Designer 2008

Редакторы Web документов Macromedia HomeSite

Microsoft FrontPage

Macromedia Dreamweaver