Лабораторная работа 6. Технологии создания сложных Web-страниц и минисайтов

 

Мультимедийные элементы

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

Файлы изображений - это мультимедийные элементы, на которые можно ссылаться с помощью якорей в документе для их загрузки и отображения посредством браузера. В отличие от других мультимедийных данных, стандарт HTML имеет явные средства, обеспечивающие вывод картинок вместе с текстом, при этом на картинках можно создавать сложные карты гиперссылок. Это связано с тем, что существует корпоративный стандарт, касающийся применения только определенных форматов файлов изображений, а именно форматов GIF, JPEG и PNG, и графические браузеры имеют встроенные декодеры, которые включают изображения этих типов в документы.

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

HTML - тег для встроенных изображений - это <img>; его обязательным атрибутом src является URL файла с расширением GIF, JPEG или PNG, который нужно вставить в документ. Браузер загружает изображения и вставляет их в поток текста, представляя как бы специальными, возможно, очень большими, символами. Обычно браузер выравнивает изображения и текущую строку по нижней границе. Такое расположение можно изменить с помощью специального атрибута align тега <img>, значение которого вы устанавливаете равным top, middle или bottom, чтобы изображение позиционировалось по верхней границе, середине или нижней границе примыкающего текста. Проверьте, какое выравнивание вам больше нравится. Значение атрибута align, равное left или right, вызывает обтекание рисунка текстом, прижимая рисунок к левому или правому краю окна браузера. Пример использования тега <img>:

 

<img src="photo1.jpg" alt="Название_рисунка" border="0" align="left" hspace="5" vspace="5" height="75" width="100">

 

Опытные Web – дизайнеры используют рисунки не только как иллюстрации, но и добавляют маленькие встроенные символы или глифы (glyph), чтобы помочь читателю при просмотре и подчеркнуть разделы документа, имеющие особое значение. Изображения также применяют в качестве маркеров элементов списка и более четких разделителей, чем стандартные горизонтальные линейки, они могут быть включены в гиперссылку, так что пользователи смогут выбирать вставленную в строку маленькую пиктограмму, чтобы загрузить полноэкранное изображение и т.д. Нет числа способам применения встроенных изображений.

Изображения – карты

Карты - это изображения в теге якоря со специальными атрибутами. Они могут содержать несколько гиперссылок. Изображения – карты в HTML поддерживаются с помощью тегов <img> с атрибутом usemap, <map> с атрибутом name и <area>. Две первые координаты coords в теге <area> определяют левый верхний угол задаваемой прямоугольной области на изображении карте в пикселях, две последних координаты – нижний правый угол этой области.

Пример использования изображения - карты:

 

<img src="photo1.jpg" usemap="#map1" align="right" border="0">

<map name="map1">

<area coords="0;0;100;40" href="link1.html">

<area coords="0;40;100;75" href="link2.html">

</map>

 

Неупорядоченные, упорядоченные списки и списки определений

Заголовки, абзацы и концы строк - это наиболее употребительные составляющие для организации текста в документе. Кроме них HTML предлагает несколько продвинутых текстовых структур, включая три вида списков и формы.

Неупорядоченные, упорядоченные списки и списки определений – это три типа списков, с которыми мы наиболее знакомы.

Неупорядоченный список, в котором порядок элементов не имеет значения, заключается в парный тег <ul>.. </ul>. Каждый элемент списка, чаще всего слово или короткая фраза, помечается парным тегом <li>.. </li> (list item, пункт списка). Отображается список обычно с отступом от левого края. Как правило, браузер снабжает его элементы маркерами.

 

<ul>

<li> элемент 1</li>

<li> элемент 2</li>

…

</ul>

 

Упорядоченные списки, заключенные между тегами <ol> и </ol>, совпадают по формату с неупорядоченными. Однако порядок составляющих списка здесь важен, например, последовательность сборки оборудования. Браузер отображает каждый элемент списка, ставя перед ним его номер, и располагает их в возрастающем порядке.

 

<ol>

<li> элемент 1</li>

<li> элемент 2</li>

…

</ol>

 

Список определений несколько сложнее предыдущих двух. В списке определений, заключаемом в теги <dl> и </dl>, каждый элемент состоит из двух частей: имени (термина) или заголовка в теге <dt> и значения или определения в теге <dd>. При отображении браузер обычно помещает имя элемента на отдельной строке с отступом, а определение, которое может состоять из нескольких абзацев, без отступа под именем:

 

<dl>

<dd><b>Термин 1</b></dd><dt>Определение термина 1</dt>

<dd><b>Термин 2</b></dd><dt>Определение термина 2</dt>

</dl>

 

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

Формы

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

Вы создаете один или несколько специальных разделов формы в документе при помощи парного тега <form>.. </form>, внутри которых можно разместить как жестко определенные, так и настраиваемые окна ввода, допускающие однострочный или многострочный ввод. Туда можно вставить переключатели выбора между двумя и большим числом вариантов, кнопки специального назначения для приведения содержимого формы в начальное состояние и для отправки его на сервер. Пользователи заполняют форму по своему усмотрению, возможно, прочитав перед этим остальные части документа, и нажимают специальную кнопку Отправить, которая приказывает браузеру послать данные формы серверу. Специальная программа со стороны сервера обрабатывает данные и соответствующим образом отвечает браузеру, например, запрашивая дополнительную информацию или модифицируя документы, отсылаемые затем пользователю, и т. д.

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

Таблицы

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

Пять тегов обеспечивают формирование таблицы, включая собственно тег <table> и тег <caption>, нужный для задания описания таблицы. Специальные атрибуты позволяют изменять размер и внешний вид таблицы. Вы создаете ее строка за строкой, располагая между тегом строки таблицы (<tr>) и его закрывающим тегом (</tr>) теги данных (<td>) или теги заголовка (<th>), и их содержимое для каждой ячейки таблицы (а в случае XHTML еще и закрывающие теги). Заголовки и данные могут содержать практически все что угодно: текст, изображения, формы и даже другие таблицы. Поэтому разумно использовать таблицы для сложного форматирования текста, располагая его, скажем, в нескольких колонках, или создания боковых заголовков.

Пример таблицы:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Поволжский государственный университет сервиса</title>

<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<link href="/css/site.css" rel="stylesheet" type="text/css">

</head>

<body>

<h3 style="text-align:center;margin:3">ИНСТИТУТ ЭКОНОМИКИ</h3>

<TABLE align=center cellspacing=0 cellpadding=3 width=80% border=1>

<CAPTION>

<b>Расписание работы института экономики</b>

</CAPTION>

<TR>

<TH width=130 align=center>День<BR>недели</TH>

<TD width=140 align=center><STRONG>Директор ИЭ<BR>А.Н.Кара</STRONG></TD>

<TD width=170 align=center><STRONG>Зам.директора ИЭ <BR>Т.С.Вешнякова</STRONG></TD>

<TD width=180 align=center><STRONG>Декан факультета ЭС С.Д.Кукина</STRONG></TD>

<TD align=center><STRONG>Декан факультета ИУиФ<BR> И.А.Соколова</STRONG></TD>

</TR>

<TR>

<TH align=center>Понедельник</TH>

<TD align=center>8.00-17.00</TD>

<TD align=center>8.00-17.00</TD>

<TD align=center>методический день</TD>

<TD align=center>10.00-14.00</TD>

</TR>

<TR>

<TH align=center>Вторник</TH>

<TD align=center>8.00-17.00</TD>

<TD align=center>8.00-17.00</TD>

<TD align=center>8.00-14.00</TD>

<TD align=center>8.00-16.00</TD>

</TR>

</TABLE>

</body>

</html>

Фреймы

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

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

Фреймы определяются в специальном документе, в котором на месте тега <body> находятся один или несколько тегов <frameset>; они и сообщают браузеру, как разделить его окно на несколько отдельных фреймов. Особые теги <frame> содержатся в теге <frameset> и указывают на документы, входящие во фреймы.

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

Набор фреймов описывается с помощью пары тегов<FRAMESET> и </FRAMESET>. Эта пара тегов заменяет хорошо знакомые вам теги <BODY> и</BODY>.

 

<FRAMESET ROWS|COLS="{Размеры фреймов}"[BORDER="{Толщина границы}"] {BORDERCOLOR="{Цвет границы}"][FRAMEBORDER="yes|no|0"] [FRAMESPACING="{Расстояние между фреймами}"]>

.........

</FRAMESET>

 

Сначала поговорим об атрибутах ROWS и COLS. Именно они определяют разбиение Web- страницы на фреймы.

Атрибут ROWS задает разбиение на строки. То есть, пространство страницы набора фреймов будет разделено на две строки, разделенные границей (вообще-то, границу можно убрать). Ниже мы приведем формат этого атрибута.

 

ROWS="{Абсолютное значение размера}| {Относительное значение размера}%}|*"

 

Абсолютное значение задает высоту строки в пикселях. Относительное значение - в процентах от высоты окна; в этом случае не забудьте поставить знак "%". Символ звездочки "*" указывает, что под строку нужно отвести все оставшееся пространство, и всегда используется для указания размера последнего фрейма в наборе.

Атрибут COLS также определяет размеры фреймов, но на этот раз имеющих вид столбцов. Он имеет точно такой же формат, как и ROWS, поэтому формат приводиться не будет.

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

Атрибут BORDERCOLOR задает цвет границы между фреймами; по умолчанию она имеет серый цвет.

Атрибут FRAMEBORDER позволяет включить или отключить границу между фреймами; по умолчанию граница показывается.

Атрибут FRAMESPACING позволяет задать расстояние между фреймами в пикселях.

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

Пример использования фреймов:

 

Файл frameset.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Раскладка фреймов</title>

</head>

<frameset cols="25%,*">

<frame name="fr1" src="f1.htm" scrolling="yes">

<frame name="fr2" src="f2.htm" scrolling="yes">

</frameset>

</html>

 

Файл f1.htm:

<HTML>

<HEAD>

<TITLE>Содержимое фрейма 1</TITLE>

</HEAD>

<BODY>

<h3>СОДЕРЖАНИЕ</h3>

<a href="f2.htm" target="fr2">Начальный файл</a><br>

<a href="file1.htm" target="fr2">Файл 1</a><br>

<a href="file2.htm" target="fr2">Файл 2</a>

</BODY>

</HTML>

 

Файл f2.htm:

<HTML>

<HEAD>

<TITLE>Содержимое фрейма 2</TITLE>

</HEAD>

<BODY>

Это начальный файл фрейма 2

</BODY>

</HTML>

 

Файл file1.htm:

<HTML>

<HEAD>

<TITLE>Файл 1</TITLE>

</HEAD>

<BODY>

Это файл 1

</BODY>

</HTML>

 

Файл file2.htm:

<HTML>

<HEAD>

<TITLE>Файл 2</TITLE>

</HEAD>

<BODY>

Это файл 2

</BODY>

</HTML>

 

Обратите внимание, что вместо пары тегов <BODY> и </BODY> используется соответственно< FRAMESET> и </FRAMESET>. И еще одна важная особенность в странице набора фреймов указывается только описание набора фреймов - никакого содержимого.

Чтобы увидеть приведенный пример в действии, создайте перечисленные HTML - файлы, поместив их в одну папку, и откройте в обозревателе Интернет файл описания фреймов frameset.htm.

 

Каскадные таблицы стилей

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

W3C - организация, устанавливающая стандарты, - рекомендует использовать для проектирования документов модель каскадных таблиц стилей (CSS). CSS - это всеми одобренный и всеми поддерживаемый способ управления тем, как может (но не обязательно будет) отображаться ваш документ браузером пользователя.

Чтобы проиллюстрировать CSS, покажем способ представления заголовков самого верхнего уровня (H1) красным цветом и введем класс.btxt для отображения текста жирным шрифтом:

 

<html>

<head>

<title> Пример использования CSS </title>

<style type = “text/CSS”>

H1 {color:red}

.btxt {font-weight:bold}

</style>

</head>

<body>

<h1> Заголовок уровня 1 </h1>

<p>

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

</p><p class = “btxt”>

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

</p>

</body>

</html>

 

Полную справочную информацию по каскадным таблицам стилей вы можете найти на странице администрации сайта www.tolgas.ru.

Язык написания сценариев JavaScript. Динамический HTML

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

Динамический HTML (DHTML) базируется на объектной модели документа (Document Object Model – DOM). Идея этой модели заключается в том, почти всем тегам HTML можно присвоить имя или идентификатор (из простого элемента он превращается в объект программирования), например, <img name = “btn” src = “button_off.gif”> или <div id = “layer1”> </div>, а затем управлять свойствами тега и его внутренним содержимым с помощью языка написания сценариев. Используя обработчики событий, написанных на языке JavaScript, Web – страницам можно придать исключительную динамичность: Например, если пользователь наводит указатель мыши на ссылку, то происходит событие onMouseOver. Обработчик этого события может динамически подсветить ссылку другим цветом, показать всплывающее меню (сделав скрытый раздел <div> видимым) и т.д.

Обработчики событий

Событие	Когда происходит
onLoad	После загрузки объекта
onUnload	При выгрузке объекта
onFocus	При получении элементом фокуса
onBlur	При потере элементом фокуса
onMouseOver	Указатель мыши находится над объектом
onMouseOut	Указатель мыши уходит с объекта
onClick	При щелчке мышью на объекте
onMouseDown	Кнопка мыши нажата
onMouseUp	Кнопка мыши отпущена
onMouseMove	Мышь двигается
onKeyDown	Клавиша на клавиатуре нажата
onKeyUp и др.	Клавиша на клавиатуре отпущена

 

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

Задание для выполнения

1. С помощью текстового редактора Блокнот создайте собственный минисайт на тему в области дизайна.

2. При разработке минисайта примените такие дизайнерские средства, как рисунки, изображение – карту, форматирование текста с помощью таблиц, каскадные таблицы стилей, фреймы.

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

4. В отчете приведите текст созданных вами HTML – документов и снимки окна браузера с их отображением.

 

Литература

[1] Тиге, Дж. К. DHTML и CSS. – Пер. с англ. – М.: ДМК Пресс, 2003. – 560 с.: ил.

[2] Муссиано, Ч. HTML и XHTML. Подробное руководство / Ч. Муссиано, Б. Кеннеди. – Пер.с англ. – СПб: Символ-Плюс, 2002. – 752 с.

[3] Дейтел, Х.М. Как программировать для Интернет и WWW / Х. М. Дейтел,
П. Дж. Дейтел, Т. Р. Нието. – Пер. с англ. – М.: ЗАО «Издательство БИНОМ», 2002. – 1184 с.: ил.

[4] Вайк, А.Р. JavaScript. Полное руководство, 4-е издание / А. Р. Вайк, Дж. Д. Джиллиам. – Пер. с англ. – М.: Издательский дом «Вильямс», 2004. – 720 с.: ил.