-
При создании Web-сайта в числе прочих решаются две основные задачи, связанные с графикой: | графическое оформление или, иначе говоря, создание стильного, привлекательного внешнего вида страниц сайта; | размещение на страницах графической информации, которая может и не быть обусловлена целями оформления.
-
Описание Web-страницы содержится в HTML-программе (HTML-коде), который хранится в обычном текстовом файле с расширением htm или html. Иногда эти программы называют HTML-документами, но обычно HTML-документом считается то, что можно видеть в окне браузера.
-
Страница обычно содержит тексты – простой и наиболее распространенный способ представления информации, хотя далеко не единственный. Вы можете создать текст, не уделяя особого внимания тому, как он будет выглядеть в окне браузера.
-
Для выбора размера шрифта можно использовать тэги так называемых логических стилей. Их всего шесть и обычно они используются для определения заголовков различного уровня. При переходе от первого стиля к шестому постепенно уменьшаются размер и толщина букв шрифта.
-
Кроме использования стандартных размеров и начертаний (гарнитуры) шрифтов, можно определять шрифты для каждого текстового фрагмента с помощью специальных тэгов. Самый простой способ – использование так называемых физических стилей: | Стиль | Тэг | Полужирный (Bold) | <В>
-
По умолчанию браузеры заполняют фон сплошным цветом, определенным настройкой браузера: серым, белым или черным. Пользователи по-разному настраивают цвета, поэтому иногда имеет смысл принудительно зафиксировать цвет фона или создать фоновое изображение.
-
Браузер обычно преобразует текст HTML-файла при выводе его на экран, т. е. игнорирует лишние пробелы, символы табуляции и символы конца строки. Если вы хотите, чтобы текст на экране выглядел так, как вы его ввели в документ HTML, то воспользуйтесь тэгом предварительного форматирования <PRE>.
-
При оформлении текста, чтобы отделить один раздел от другого, нередко используют разделительные полосы. Можно задать ширину, толщину и способ выравнивания разделительной полосы. Разделительная полоса задается тэгом <HR>, внутри которого можно вставить атрибуты: | SIZE – толщина в пикселах;
-
Internet Explorer поддерживает тэг <MARQUEE>, который позволяет создать так называемую бегущую строку, т. е. эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следующими атрибутами: | WIDTH – ширина поля бегущей строки в пикселах или процентах от ширины окна;
-
При формировании документа HTML может потребоваться ввести символы, которые воспринимаются браузером как служебные. Например, нельзя использовать символы < и > для обозначения знаков "меньше" и "больше", т. к. они интерпретируются как символы тэгов.
-
В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать длинное текстовое описание. | Существуют два способа размещения графических изображений на странице: | вставка отдельных картинок;
-
Чтобы украсить страницу, можно заполнить фон картинкой из графического файла. Фоновое изображение – это графический файл, содержащий картинку (желательно небольшого размера), которая многократно выводится на экран, заполняя все окно.
-
Ссылки (или гиперссылки) позволяют щелчком кнопки мыши на выделенном тексте или изображении перейти к другому файлу или фрагменту страницы. Ссылки применяются в большинстве существующих страниц. Они могут быть текстовыми и графическими.
-
…
-
В рассмотренных выше примерах в качестве адреса ссылки использовалось имя файла. В общем случае можно применять URL-адрес (Uniform Resource Locator, Унифицированный указатель ресурса). Формат URL-адреса включает: тип сетевой службы (протокол связи), адрес сервера, путь поиска и имя файла.
-
Иногда оказывается полезным организовать ссылки на разделы одного и того же документа. Например, на своей странице вы размещаете статью объемом в несколько десятков страниц как единый HTML-документ. Скорее всего, вам захочется сделать ссылки на предыдущие или последующие разделы этого документа.
-
Довольно часто на Web-страницах встречаются таблицы. Простейший пример табличной организации данных – прайс-лист. Однако таблицы можно использовать просто как способ форматирования текста, поскольку таблица в HTML-документе может не содержать всех или некоторых разграничительных линий (сетки).
-
Существует еще один прием позиционирования элементов и достижения внешних эффектов, которые могут украсить страницу и привлечь к ней внимание читателей. Этот прием основан на определении пользовательских стилей и задании таблицы стилей.
-
Выше мы говорили о том, что позиционировать элементы страницы можно путем использования таблиц. Но это же можно делать и с помощью стилей. Среди параметров стиля имеются специальные свойства для позиционирования: | left – для задания расстояния в пикселах от левого края окна (х-координата);
-
Фильтры – это эффекты изменения внешнего вида графики и текста на странице. С помощью фильтров вы можете отражать тексты и графику, создавать эффект движения и другие, как это делается в графических редакторах.
-
Эффекты постепенного появления (исчезновения) графического изображения и преобразования одной картинки в другую можно получить с помощью совместного применения динамического фильтра и сценария (скрипта). Разумное использование таких эффектов украшает Web-страницу.
-
При использовании тэга <STYLE> требуется вставлять таблицу стилей в каждый документ. Это может показаться довольно неэкономным как с точки зрения объема файлов, так и с точки зрения времени, необходимого для разработки страницы.
-
Flash-мультфильм содержится в SFW-файле, т. е. в файле с расширением swf, созданном в программе Macromedia Flash. Чтобы вставить его в Web-страницу (в соответствующий ей HTML-документ), надо написать несколько строк HTML-кода.
-
При создании интерактивных страниц может потребоваться передать ряд символов от пользователя. Например, мы можем попросить пользователя ввести его адрес электронной почты. Для этого необходимо поле ввода. Затем все то, что было введено, можно обработать с помощью программы-сценария.
-
Тэг <INPUT> позволяет вывести на страницу не только поле ввода, но и другие элементы. Например, если использовать атрибут TYPE= "RADIO, то можно создать набор переключателей (radio-button) – кружков, щелчок на одном из которых делает его отмеченным (выбранным), а все остальные – неотмеченными.
-
Флажки (checkbox) аналогичны переключателям за исключением внешнего вида и того, что в одном наборе можно установить/снять любое количество флажков. Задаются флажки так же, как переключатели, однако аргументом атрибута TYPE должен быть аргумент CHECKBOX: | <HTML> | <HEAD>
-
На странице можно разместить обычную кнопку, нажатие (щелчок кнопкой мыши) на которой обрабатывается программой-сценарием. Например, вы можете создать кнопку с надписью Поиск. Что произойдет, если пользователь нажмет эту кнопку, – зависит от вашего сценария.
-
Чтобы Web-страница была интерактивной (могла взаимодействовать с пользователем) и динамичной, необходимо использовать так называемые скрипты или, иначе говоря, сценарии. Сценарий (script, скрипт) – программа, написанная на специальном языке программирования, которая встраивается в HTML-документ.
-
Теперь рассмотрим объектную модель подробнее. Сразу предупредим, что это рассмотрение не исчерпывающее. Как уже отмечалось, каждый элемент страницы (HTML-документа) предстает в виде объекта со своими свойствами и методами.
-
Объект window имеет свойства, методы, события, а также дочерние объекты. Приведем их полные перечни и рассмотрим, с разной степенью подробности, только наиболее важные с практической точки зрения. | Свойства объекта window: | parent – возвращает родительское для текущего окно;
-
Объект document является центральным в иерархической объектной модели и представляет всю информацию о документе HTML с помощью коллекций и свойств. Он также предоставляет множество методов и событий для работы с документами.
-
Объект history содержит информацию об адресах, которые браузер посетил во время текущего сеанса. Мы можем передвигаться по этому списку с помощью сценария, загружая страницы, которые он содержит. Объект history имеет только одно свойство и три метода. | Свойство объекта history:
-
Объект navigator содержит информацию о производителе браузера, его версии и возможностях. | Свойства объекта navigator: | appCodeName – название кода браузера; | appName – название браузера; | appVerston – версия браузера;
-
Объект location содержит информацию об URL-адресе текущей страницы, а также методы, позволяющие обновлять страницы. | Свойства объекта location: | href – URL-адрес в виде строки; | hash – строка, следующая в URL за символом #; | host – часть URL ("хост:порт"); | hostname – часть URL "хост";
-
Объект event позволяет получить информацию о каком-либо событии, происходящем в браузере. | Свойства объекта event: | aitKey – возвращает состояние клавиши ALT, когда происходит событие; | button – кнопка мыши, вызывающая событие;
-
Объект screen содержит информацию о возможностях экрана пользователя и может применяться, например, при определении размеров создаваемых окон, а также разрешения, с которым нужно передавать графику (нет смысла загружать 32-битное изображение, если монитор и видеокарта пользователя поддерживают только 256 цветов).
-
Объект TextRang (текстовая область) отображает разделы потока текста, формирующего документ HTML. Может быть использован для управления текстом внутри страницы. | Свойства объекта TextRange: | htmlText – возвращает содержимое TextRange как текст и код HTML;
-
Применяя скрипты (сценарии), мы обрабатываем различные события (например, щелчок кнопкой мыши), анализируем введенные пользователем данные, изменяем внешний вид некоторой части страницы или даже всей страницы.
-
Здесь мы приведем несколько простых скриптов, которое в том или ином виде часто применяются в Web-страницах. Все они создают некоторые визуальные эффекты. | Другие примеры с пояснениями можно найти на сайте автора по адресу www.admiral.ru/~dunaev.
