До сих пор мы

Рисунок 2.2

0 . Пример таблицы с пустой ячейкой До сих пор мы рассматривали только атрибуты тега <TABLE> . Однако теги <TR> и <TD> тоже могут иметь собственные атрибуты, такие, как BGCOLOR=, BORDERCOLOR=, BORDERCOLORLIGHT=, BORDERCOLORDARK= и ALIGN=. Их значения распространяются только на одну строку или ячейку таблицы. Кроме того, имеется атрибут VALIGN=, с помощью которого можно управлять вертикальным выравниванием текста строки или ячейки. Этот атрибут может принимать значения top (выровнять по верхнему краю), middle

(по середине) и bottom (по нижнему краю). Кроме того, в некоторых броузерах, например Opera, поддерживается также атрибут NOWRAP, запрещающий перенос текста ячейки на следующую строку.

Исходная

Рисунок 3.11. Исходная

Самое главное на любой вебстранице — гиперссылки

2.2. Самое главное на любой веб-странице — гиперссылки

В предыдущем разделе мы рассмотрели различные способы форматирования текста веб-страницы. Однако созданная нами в качестве примера “Домашняя страница Сергея Сергеева” имеет существенный недостаток: она представляет собой голый текст. И дело тут вовсе не в отсутствии графики или звуковых фрагментов (графика и звук, конечно, украшают страничку, но в данном случае не это главное). Дело в отсутствии гиперссылок. Гилерссылки — контекстные связи между расположенными в Интернете материалами. Они являются основой построения World Wide Web. Обычно пользователи любят страницы, насыщенные гиперссылками, и это естественно: приятно, когда есть возможность легко получить более подробную информацию по каждой представленной теме.

В принципе, любое слово, встречающееся на веб-странице, можно превратить в гиперссылку, если известны какие-либо другие страницы, описывающие этот предмет более подробно. Так, например, на странице, посвященной описанию жизни в блокадном Ленинграде, в том месте, где речь идет об исполнении седьмой симфонии Шостаковича, помещена гиперссылка на страницу с биографией этого композитора. А на странице, посвященной компьютерной игре Quake, в углу указано, что теперь в нее можно играть и на компьютерах с операционной системой Linux — и в этом месте есть гиперссылка на страницу, с которой можно загрузить дистрибутив этой операционной системы. Щелкая кнопкой мыши по гиперссылкам, можно в принципе обойти хоть весь Интернет (точнее, его службу WWW).

Давайте рассмотрим, каким образом можно вставлять гиперссылки в тексты веб-страниц. Для этого еще немного потерзаем пример из предыдущего раздела (надеюсь, что этот Сергей Сергеев еще не надоел вам, а если уже надоел, то потерпите еще немного — скоро начнутся другие примеры). Вообще говоря, в текст веб-страницы можно вставлять гиперссылки трех типов:

• ссылки в другие места той же страницы; • ссылки на другие страницы этого же сайта или сервера;

• ссылки на страницы, расположенные на любом другом сервере в Интернете.

Локальные гиперссылки

Итак, начнем. На нашей страничке, представленной выше, есть три раздела: вступительный текст, сказка и рассказ. Конечно, поскольку это только пример, то все тексты небольшие (сочинять полностью сказки за Сергея Сергеева автору было недосуг) и, скорее всего, на экране эта страничка видна почти целиком. Однако представьте себе, что и вступительный текст, и рассказы занимают довольно большой объем (например, два экрана). В этом случае некорректно вынуждать пользователя перемещаться по странице только с помощью полос прокрутки. Кроме того, он может и не заметить, что помимо вступительного текста, на страничке есть еще что-то, если не дочитает текст до конца. В этом случае хорошим тоном будет прямо наверху странички поставить гиперссылки на оба рассказа.

Чтобы это сделать, надо сначала определить места, где эти рассказы начинаются, как “якоря” (места, к которым можно будет быстро переместиться). Для этого используют тег <А> . Это можно сделать, например, так:

<A NAME="skazka">ИВАН- ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ</А>

В данном случае мы определяем атрибут NAME= — имя якоря. По этому имени мы и будем на него ссылаться.

Для установки гиперссылки также используется тег <А> , но с установленным атрибутом HREF=. Значение этого атрибута определяет, что отобразится на экране, если пользователь щелкнет кнопкой мыши на гиперссылке. Чтобы сослаться на якорь, нужно просто указать в качестве значения HREF= имя этого якоря, перед которым расположен знак #:

<A HREF="#skazka">Сказка «Иван-царевич и серый заяц&raquо;</А>

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

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

Точно таким же образом можно поставить гиперссылку на второй рассказ. По умолчанию в большинстве броузеров гиперссылки отображаются синим цветом, что совершенно не гармонирует с цветовой гаммой нашей странички. К счастью, мы можем сами задать нужный цвет отображения гиперссылок. Для этого нужно в теге <BODY> установить значение атрибута LINK=. Цвет можно выбрать по своему усмотрению, можно даже сделать гиперссылки тем же цветом, что и основной текст. Но вот этого как раз делать не рекомендуется, поскольку читатель не сможет быстро понять, где гиперссылка, а где нет. Обычно лучше всего подобрать цвет, близкий по оттенку к основному, однако отличающийся от него, например, по яркости. В нашем случае можно написать так:

Однако этого недостаточно. Дело в том, что броузер обычно отображает гиперссылки, которыми читатель еще не пользовался, одним цветом, а “посещенные” — другим. Этот цвет выбирается с помощью атрибута VLINK= тега <BODY> . Кроме того, есть еще атрибут ALINK=, который определяет цвет так называемой активной ссылки, то есть той, на которой в данный момент происходит щелчок кнопкой мыши. В большинстве случаев он почти не заметен (ведь появляется он только на долю секунды, если только у читателя нет привычки нажать кнопку мыши и долго ее не отпускать). Полное определение цветовой схемы страницы в теге <BODY> может выглядеть так:

<HTML>

<HEAD>

<TITLE>Домашняя страница Сергея Cepreesa</TITLE>

</HEAD>

<DIV aling="center"><h1>Домашняя страница Сергея Сергеева</h1> </div>

</FONT><FONT SIZE=1><P><BR>

<div align="center"><a href="#skazka">Сказка «Иван-царевич и серый заяц»</A> 

<A HREF="#rasskaz">Рассказ «Молоток»</a></div>

</FONT><B><FONT FACE="Times New Roman">Сергей Сергеев - писатель-авангардист, автор 20 рассказов. <BR>

В жизни большой любитель собак и компьютерных игр. <BR>

<BR>

Некоторые его рассказы вы можете прочитать прямо здесь. </P>

</FONT><P><HR WIDTH="75%"></P>

</B><FONT FACE="Times New Roman"><H2 ALIGN="CENTER">ИBAH-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ <BR>

сказка</H2>

<P ALIGN="RIGHT">Hy, погоди!.. <BR>

(Из мультфильма)</Р></FONT> </P>

<FONT FACE="Times New Roman"><P ALIGN="JUSTIFY">      Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный... <BR>

      Долго ли, коротко ли ... <BR>

      И они жили долго и счастливо и умерли в один день.</Р></FONT> </P>

<FONT FACE="Times New Roman"><H2 ALIGN="CENTER">MOЛOTOK <BR>

рассказ</H2>

<P ALIGN="RIGHT">Mы кузнецы, и дух наш молод. <BR>

(Из песни)</P>

<P>      Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </P></FONT>

</BODY>

</HTML>

Результат показан на Рисунок 2.7. Если мы теперь щелкнем на какой-либо из гиперссылок, то страница “скакнет” вниз, так, чтобы текст нашего якоря отображался вверху экрана. (Однако, если при этом для заполнения экране не будет хватать текста, то текст якоря может оказаться не на самом верх страницы, а несколько ниже.)

Схема сайта

Средства третьей вкладки — Site View (Схема сайта) — предназначены для просмотра схемы разрабатываемого веб-сайта. Связи между HTML- документами, рисунками и прочими объектами на схеме показаны пунктирными наглядно увидеть связи между элементами. Щелчок мыши на каком-либо элементе схемы приводит к выделению соответствующего элемента в окне редактирования.

Выделив какой либо элемент, являющийся HTML- документом, можно перейти к его редактированию на правой панели окна программы. Для того щелкните на данном элементе правой кнопкой мыши и выберите в контекстном меню команду Edit (Правка). Схему сайта можно просмотреть как в виде диаграммы, так и в виде обычного дерева каталогов. Для переключения с одного вида на другой, нужно щелкнуть правой кнопкой мыши и любом месте вкладки Site View (Схема сайта), выбрать в контекстном меню пункт View Style (Метод просмотра) и установить флажок либо Tree (Дерево), либо Chart (Диаграмма).

Щелчок на “гиперссылке” изменяет текст в нижней части страницы

Рисунок 7.12. Щелчок на “гиперссылке” изменяет текст в нижней части страницы

Соративовка данных

Рисунок 9.2. Соративовка данных

Сортировка таблицы

Теперь давайте осуществим сортировку списка книг. Добавим для начала две кнопки — для сортировки по алфавиту, соответственно, авторов и названий книг:

<INPUT TYPE="button"VALUE="Сортировать по названию" onClick="sort_name()"> Теперь напишем сами функции сортировки. Для этого нам подойдет чудес-ное свойство элементоуправления Tabular Data, которое называется SortColumn. В качестве его значения нужно указать поле, значения которого нужно сортировать. Для сортировки по фамилиям авторов в данном случае сле-дует указать поле Author, а для сортировки по названиям книг — поле Name. После этого нужно не забыть применить метод Reset(), чтобы заново “перерисовать” весь список:

function sort_auth() { hudlit.SortColumn="Author"; hudlit.Reset() ;

} . function sort_name() { hudlit.SortColumn="Name" ; hudlit.Reset();

Кстати, применение метода сортировки может избавить от необходимости заботиться о расположении записей в файле базы данных Например, в данном случае при поступлении нового архива с текстом книги можно просто добавлять запись о нем в конец файла. При загрузке файла можно сразу применить сортировку. Кстати, это можно сделать и с помощью тега <PARAM>, который должен быть внутри тега <OBJECT> элемента управле-ния Tabular Data:

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

Давайте посмотрим на текст получившейся страницы.

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

<HTML>

<HEAD>

<TITLE>Электронная библиотека</TITLЕ>

<STYLE> BODY { background-color: #F4FFEF;

color: #182F1A; font-family: sans-serif; font-size: 120%;

} </STYLE> <SCRIPT LANGUAGE""JavaScript" TYPE="text/javascript">

function auth() { document.all.book.value="";

hudlit.Filter="Author="+document.all.auth.value;

hudlit.Reset () ;

} function bookname() {

document.all.auth.selectedlndex=0;

hudlit.Filter="Name="+document.all.book.value;

hudlit.Reset (); } function sort auth()

{ hudlit.SortColumn="Author";

hudlit.Reset () ;

}

function sort_name()

{ hudlit.SortColumn="Name";

hudlit.Reset() ;

//-->

</SCRIPT>

</HEAD>

<BODY>

<Н1>Художественная литература</Н1>

Выберите автора:

<OPTION VALUE="">Bce

<OPTION VALUE="Дюма">Дюма

<OPTION VALUE="Достоевский">Тостоевский

<OPTION VALUE ="Толстой">Толстой ;</SELECT>

<BR><BR> Или введите название книги:

<TD><SPAN DATAFLD="Author"></SPAN>, «

<SPAN DATAFLD="Name"></SPAN>»,

<SPAN DATAFLD="Size"> </SPAN>Snbsp;кбайт.

</TR> </TABLE>

</BODY>

</HTML>

Результат показан на Рисунок 9.2. Конечно, это очень простой пример, который хочется еще улучшить. Например, перед поиском введенного пользователем названии книги хорошо бы сначала удалить лишние пробелы и кавычки, а если введенное название не найдено, то вывести сообщение oб этом. Можно использовать файл базы данных для построения нескольких различных страниц и т. д. Однако приведенный пример уже дает некоторое представление о возможностях элемента Tabular Data. Читателям, заинтересовавшимся использованием элементов управления в Internet Explorer, можно рекомендовать обратиться к специальной литературе по этой теме.

Создание графических карт ссылок

Для создания графической карты ссылок служит кнопка New Image Map (Создать изображение-карту) на верхней панели инструментов. Она открывает диалоговое окно, в котором можно выбрать какое-либо изображение, уже имеющееся на странице, или загрузить новое. После этого открывается окно редактора графической карты ссылок (Image Map Editor)

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

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

Итак, мы рассмотрели некоторые полезные возможности панели редак тирования. Однако помимо вкладки Edit (Правка) на ней имеются еще две вкладки.

Создание ячеек таблицы

Теперь нужно определить сами ячейки. Если посмотреть на Рисунок 8.4, то может показаться, что их меньше, чем на самом деле. В процессе опреде-ления ячеек бывает удобно временно установить в теге <TABLE> атрибут BORDER=. В этом случае все границы между ячейками будут видимы.

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

Как видите, высота этой строки равна 20 пикселам. Пустые ячейки в осталь ных строках используются для задания ширины столбцов, например, так.

<TD><IMG SRC="Images/diafanol.gif" WIDTH="20" HEIGHT="3"

BORDER="0" ALT=""></TD>

Здесь помещен прозрачный рисунок, “растянутый” по горизонтали. Остальные “пустые” ячейки также заполнены прозрачными рисунками. размеры которых проставлены, исходя из того, что ширина каждого рисунка гиперссылки равна 120 пикселам, а ширина всех отступов — 20 пикселе и

Давайте окинем взглядом весь текст этой страницы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.О Transitional//EN">

<HTML>

<HEAD>

<ТITLЕ>Электронная библиотека</ТIТLЕ>

<STYLE> BODY { background-color: #FOE7F1;

} H2 { text-align: center;

} TD { font-family: MS Comic Sans, sans-serif;

text-align: center; }

</STYLE>

</HEAD>

<BODY>

<Н2>Электронная библиотека</Н1>

</ТD>

</ТR>

<TR>

<BR>Xyдoжecтвeннaя литература </TD>

</TR>

<IMG SRC="Images/diafanol.gif" WIDTH="120" HEIGHT="3"

BORDER="0" ALT=""></TD><TD>

<IMG SRC="Images/naulit.gif" WIDTH="120" HEIGHT="120" BORDER="0" ALT="Hayчнaя"><BR>Hayчнaя литература</ТD><ТD>

<IМG SRC="Images/diafanol.gif" WIDTH="20" HEIGHT="3"BORDER="0" ALT=""></TD><TD>

<IMG SRC="Images/detlit.gif" WIDTH="120" HEIGHT="120" BORDER="0" ALT=""><BR>Детская литература</ТD></ТR>

</TABLE>

</HTML>

В этом примере не поставлены сами гиперссылки, т. е. теги <А>, поскольку ни самой библиотеки, ни ее разделов пока что не существует. Добавить их не составит труда.

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

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

Создание нового изображения в программе Photoshop

Рисунок 3.10. Создание нового изображения в программе Photoshop

Итак, определяем ширину рисунка: 1024 и высоту: 2 пиксела. Остальные параметры нам сейчас не важны. После щелчка на кнопке ОК откроется окно рисунка. Чтобы лучше видеть результаты своих действий, желательно увеличить масштаб изображения, нажав несколько раз комбинацию клавиш CTRL++.

Теперь надо выбрать цвета для создаваемого градиента, например, как в нашем примере: зеленый и светло-зеленый. Для выбора первого цвета дважды щелкните на значке Основной цвет (Foreground Color) — откроется окно выбора цвета (Color Picker), в котором можно визуально выбрать необходимый цвет. Для выбора второго (конечного) цвета градиента дважды щелкните на значке Цвет фона (Background Color).

Выбрав цвета, можно определить характер градиента. Для этого выберите инструмент Градиент (Linear Gradient Tool) на Панели инст- рументов. Далее, удерживая в нажатом положении клавишу SHIFT, проведите линию от левого края рисунка до приблизительно 200-й слева точки 1 . Когда кнопка мыши будет отпущена, вы увидите градиентную заливку. Осталось только сохранить рисунок.

Однако, выбрав пункт Сохранить (Save) из меню файл (File), вы, скорее всего, увидите, что среди предлагаемых форматов, в которых можно сохранить изображение, есть только формат PSD (собственный формат программы Adobe Photoshop). Это происходит потому, что наше изображение содержит более одного слоя. Выберите из меню Слой (Layer) команду Склеить все слои (Flatten Image), после чего вновь попытайтесь сохранить файл. Теперь в окне сохранения вам будет предложено множество форматов, из которых следует выбрать формат JPEG. Далее требуется выбрать качество сжатия по десятибалльной шкале. В данном случае для приемлемого результата достаточно выбрать значение 3 или 4.

И еще несколько замечаний по поводу первого примера. Во-первых, избран ный нами размер 1024 точки по горизонтали явно избыточен, ведь нари сованный нами градиентный перелив заканчивается уже на 200-й точке. Если вы используете каскадные таблицы стилей (CSS) на веб-странице, у вас будет возможность НЕ повторять фоновый рисунок по горизонтали. Тогда можно спокойно создать рисунок шириной 200 точек и запомнить конечный цвет градиента (разумеется, не на глаз, а в цифровом выра жении — в окне выбора цвета отображаются значения R, G, В, то есть крас ной, зеленой и синей составляющих). А затем помимо фонового рисунка определить на веб-странице цвет фона, совпадающий с конечным цветом градиента. Далее можно таким же способом назначить вертикальный градиент, однако делать это следует только если используются каскадные таблицы стилей CSS, поскольку лишь в этом случае можно не повторять фоновый рисунок по вертикали.

И, наконец, можно создать многократный градиентный перелив. Для этого, выбрав инструмент Градиент (Linear Gradient Tool), выберите в служебной палитре Навигатор/Инфо/Опции (Navigator/Info/ Options) вкладку Опции линейного градиента (Linear Gradient Options) и нажмите кнопку Правка (Edit)— откроется диалоговое окно Редактор градиента I (Gradient Editor), представленное на Рисунок 3.11. Здесь можно по желанию добавить в любое место градиента любой цвет, а также цвет пере- днего плана и цвет фона, пользуясь, соответственно, одним из трех значков настройки параметров градиента. Все изменения немедленно отображаются на экране. Таким образом, наш градиент может переливаться не двумя, а тремя, четырьмя и более цветами. Когда найдете нужное сочетание цветов, нажмите кнопку ОК и затем, как и ранее, проведите линию инструментом Градиент (Linear Gradient Tool).

Создание таблиц

2.4. Создание таблиц

Для того чтобы двигаться дальше, давайте рассмотрим такой пример. Допустим, мы хотим поместить на свою страничку таблицу результатов хоккейного турнира. Поскольку для хорошего восприятия вид у таблицы должен быть стандартный, придумывать здесь особенно нечего — надо только правильно расположить имеющийся материал. Это вполне можно сделать стандартными средствами HTML. В результате может получиться вполне симпатичная табличка, как на Рисунок 2.1 2.

Создание вебстраниц при помощи программы Allaire Homesite/Cold Fusion

1.6. Создание веб-страниц при помощи программы Allaire Homesite/Cold Fusion

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

Однако прежде всего необходимо отметить, что использование программы Homesite подразумевает знание пользователем языка HTML (а также, по желанию, JavaScript и др.) Программа автоматизирует ввод кода, проверяет ошибки и т. д., но она не в силах помочь, если пользователь не представляет себе, что такое HTML.

В этом разделе мы будем оперировать понятиями и тегами, значения которых поясняются в главах 2-8 этой книги. Поэтому, если вы сейчас еще не очень хорошо представляете, что означает тот или иной тег, не волнуйтесь — прочтите этот раздел бегло, а затем вернитесь к нему после прочтения всей книги (если, конечно, захотите использовать в своей работе программы Homesite/ColdFusion).

На момент написания этих строк последней версией программы Homesite является версия 4.5. На нее мы и будем ориентироваться в дальнейшем.

Итак, давайте начнем. Основное окно программы Homesite представлено на Рисунок 1.20. Как видите, оно разделено на две панели. Левая панель называется Resource Tab (Панель ресурсов) — она предназначена для различных вспомогательных функций. На правой панели (Панели редактирования) происходит собственно редактирование текста HTML.

Сначала давайте рассмотрим левую панель (Resource Tab). На ней располагаются шесть вкладок, обозначенных следующими значками (слева направо): Files (Файлы), Projects (Проекты), Site View (Схема сайта), Snippets (Отрывки), Help (Справка) и Tag Inspector (Средство просмотра тегов). Если почему-либо образы значков кажутся неочевидными, их можно заменить на текстовые обозначения командой Options > Settings > General > Tab Style (Параметры > Установки > Общие > Стиль ярлыков вкладок).

Списки

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

Выбор возрастной категории можно организовать в виде раскрывающегося списка. Для создания такого списка используется тег <SELECT> . Между ним и его закрывающим тегом </SELECT> можно поместить несколько пунктов будущего списка. Каждый из них должен начинаться с тега <OPTION> . В данном случае мы можем написать так:

<OPTION VALUE="10">менее 20

<OPTION VALUE="20">20–30

<OPTION VALUE="30">30–40

<OPTION VALUE="40">40–50

<OPTION VALUE="50">50–60

Список слоев в программе Photoshop

Рисунок 3.21. Список слоев в программе Photoshop

Стили элементов

Таблица стилей обычно располагается в заголовке HTML-документа, в разделе <HEAD> . Она занимает место между тегами <STYLE> и </STYLE> . Синтаксис таблицы стилей таков. Вы пишете имя элемента HTML, для которого определяете стиль, а после него следует блок определения стиля, заключенный в фигурные скобки. Например, в нашем примере можно написать так:

<STYLE> BODY { background-color: #ВАВААО; color: rgb(29,29,24); }

</STYLE>

Пробелы здесь не имеют никакого значения, так же, как и переводы строк. После этого в самом тексте HTML-документа достаточно указать тег <BODY> , и к нему автоматически будут применены данные цвета фона и текста.

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

Н1,Н2 { text-align: center; }

и после этого просто указывать в документе теги <Н1 > или <Н2> , содержи мое которых будет автоматически центрироваться. Обратите внимание на то, что в таблице стилей, чтобы определить стиль сразу для нескольких элементов, мы перечислили их через запятую.

Если вы помните, у нас еще оставались в теге <BODY> три “отмененных” атрибута: LINK=, ALINK= и VLINK=. Вместо них рекомендуется определить стили для различных псевдоклассов элемента <А>. Это делается так:

A:link,A:visited { color: #634438; } A:active { color: black; }

Как видите, для элемента <А> определены три псевдокласса (имена кото рых отделяются двоеточием): link — для гиперссылок, visited — для посе щенных гиперссылок и active — для активных. Кроме того, во второй версии CSS (CSS Level 2) для тега <А> определены еще псевдоклассы hover (гиперссылка, над которой находится указатель мыши) и focus (выбран

ная гиперссылка). Однако в броузере Internet Explorer версии 5 поддерживается только первый из них. Например, если написать

A:hover { color: white; }

то при наведении указателя мыши на ссылку она будет подсвечиваться белым цветом. Это уже похоже на динамическое взаимодействие с пользователем!'

Далее, в нашем примере мы два раза определяли одинаковый стиль для горизонтальной линии. Проще, конечно, написать в таблице стилей:

HR { margin-top: 24px; width: 75%; }

и потом в текст документа вставлять только тег <HR> , и тогда, если не указано иное, линия получится такой, какой нужно.

Стили классов

Все это хорошо, конечно, но как быть дальше? Ведь в тексте нашего примера несколько раз (в данном случае два, но могло бы быть и гораздо больше!) определяется один и тот же стиль для текста эпиграфа, другой стиль для основного текста и третий для подписи к эпиграфу... Хорошо бы тоже определить их в таблице стилей, однако в нашем HTML--документе все они расположены внутри элементов <DIV> , поэтому надо определить несколько различных стилей для одного элемента. Оказывается, это тоже можно сделать! Для этого, правда, придется использовать несколько более длинную запись, однако это все равно удобнее и короче, чем всякий раз определять атрибут STYLE= или задавать другие атрибуты.

Итак, у нас должно быть три различных стилевых варианта для элемента <DIV> . В CSS они называются классами. Чтобы отличить эти элементы друг от друга, у них придется установить атрибут CLASS=, приблизительно так:

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

DIV.epig { text-align: justify; font-size: smaller; width: 130; }

DIV.pdps { font-style: italic;

text-align: right; }

DIV.ab { text-align: justify;

text-indent: 2em; }

Между прочим, другие элементы (причем практически все) также могут иметь атрибут CU\SS=. Если надо, чтобы определение класса было доступно всем элементам, его можно определить так:

pdps { font-style: italic;

text-align: right; }

То есть, при определении не указывается имя конкретного элемента HTML, а указывается только имя класса, которое в любом случае начинается с точки (но только в таблице стилей, а при обращении к классу в тексте документа точка не ставится). В данном примере мы определяли классы только для элемента <DIV>. Более того, в таком определении предполагается (то есть мы как бы помним), что элемент класса pdps будет вложен в элемент класса epig. Хотя, с другой стороны, наше определение pdps годится не только для подписи под эпиграфом, но и для любой другой, если она вдруг потребуется.

Кстати, кроме стилевых свойств элементов HTML и классов, мы можем определять свойства так называемых идентификаторов. Дело в том, что у каждого элемента HTML может быть атрибут ID= — его уникальное имя в данном документе (этот атрибут играет большую роль при динамическом взаимодействии с пользователем, так что с ним нам еще придется не раз столкнуться). Если вы хотите определить в таблице стилей свойства для элемента, имеющего определенный идентификатор ID=, это можно сделать так:

#соо1 { color: white; background-color: black; )

Тогда элемент по имени cool (например <DIV ID="cool"> ) будет наделен указанными свойствами (в данном случае белым цветом символов на черном фоне). Только не забывайте, что в каждом HTML-документе каждый идентификатор ID= должен быть уникальным, то есть не может быть двух и более элементов с одинаковым значением атрибута ID=.

Ладно, это мы немного отвлеклись, так что давайте посмотрим на новый вариант странички Сергея Сергеева целиком.

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

<HTML>

<HEAD>

<ТITLE>Домашняя страница Сергея Cepreeвa</TITLE>

<STYLE>

<!--

BODY { background-color: #BABAAO;

color: rgb(29,29,24);

}

H1,H2 { text-align: center;

} A:link,A:visited { color: #634438;

} A:active { color: black;

} HR { margin-top: 24px;

width: 75%; ) DIV.epig { text-align: justify;

font-size: smaller;

width: 130; } DIV.pdps { font-style: 'italic;

text-align: right;

} DIV.ab { text-align: justify;

text-indent: 2em; }

-->

</STYLE>

</HEAD>

<BODY> <Н1>Домашняя страница Сергея Сергеева</Н1>

<DIV STYLE="text-align: center;"><A HREF="#skazka">CKА3KА &1аquо;Иван-царевич и серый зaяц»</A> 

<А HREF="#rasskaz">PaccKa3 «МОЛОТОK»</A>

</DIV>

<BR>

<SPAN STYLE="font-weight:

bold;">Сергей Сергеев</SPAN> Smdash; писатель-авангардист, автор 20 рассказов.<BR>

В жизни большой любитель собак и компьютерных игр.<ВR>

<ВR>

Некоторые его рассказы вы можете прочитать прямо здесь.</DIV>

<HR>

<Н2><А NAME="skazka">ИBAH-ЦAPEВИЧ И СЕРЫЙ ЗАЯЦ</А><ВR>

Ну, погоди!..

<DIV CLASS="pdps">(Из мультфильма)</DIV>

</DIV>

</DIV> <BR>

<DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV>

<DIV CLASS="ab">Дoлгo ли, коротко ли, ...</DIV>

<DIV CLASS="ab">...И они жили долго и счастливо и умерли в один день.</DIV>

<HR>

<Н2><А NAME="rasskaz">МОЛOTOK</A>

<BR>

<SPAN STYLE="font-style: italic; ">paccкaз</SPAN>

</H2>

<DIV CLASS="epig"> Мы кузнецы, и дух наш молод. <DIV CLASS="pdps">(Из песни)</DIV>

</DIV>

<BR>

<DIV CLASS="ab">Этo случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>

</BODY>

</HTML>

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

Наверное, вы обратили внимание на странные сочетания  , которые появились в нашем примере около тегов <STYLE> . Вообще говоря, в такие символьные сочетания (это, кстати, тоже теги) в HTML-докумен-тах заключают комментарии. То есть все, что находится между этими тегами, игнорируется броузером. Но в данном случае мы пользуемся тем, что внутри STYLE -блока действуют законы синтаксиса не HTML, a CSS. Так что те броузеры, которые “понимают” тег <STYLE> и, следовательно, CSS, “поймут” и то, что в данном случае это не символы комментария, и проинтерпретируют таблицу стилей, как положено. А те броузеры (в основном, старые), которые CSS не понимают, воспримут содержимое таблицы стилей как комментарий. (Если не поставить теги комментариев, то эти броузеры, проигнорировав тег <STYLE> как непонятный им, скорее всего станут выводить на экран все содержимое таблицы стилей.) Таким же образом мы будем “обманывать” старые броузеры при использовании тега <SCRIPT>.

Страница графически оформленных гиперссылок

Рисунок 7.13. Страница графически оформленных гиперссылок

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

Страница иллюстрирующая игру “Пятнадцать”

Рисунок 7.7. Страница, иллюстрирующая игру “Пятнадцать”

и в каждую ячейку этой таблицы поместить заранее подготовленное изображение плашки с цифрой', например, вот так:

Вообще говоря, поскольку ширина (и высота) рисунков определены в 100 пикселов, атрибут WIDTH= указывать для тега <TD> совсем не обязательно. Что же касается атрибута ID=, то мы здесь указали его с расчетом на то, что плашки придется переставлять, и тогда потребуется доступ к ячейкам таблицы.

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

Во-первых, при нажатии кнопки мыши нужно определить, в каком месте окна броузера она нажата. Если нажатие произошло на рисунке плашки, нужно сразу же “привязать” этот рисунок к указателю мыши, чтобы он передвигался вместе с ним, пока кнопка не будет отпущена.

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

И, в-третьих, при отпускании кнопки мыши нужно оставить рисунок на том месте, куда он был передвинут.

Страница на которой цвет строк может изменяться

Рисунок 7.5. Страница, на которой цвет строк может изменяться

Кнопки, влияющие на вид страницы

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

Для начала в соответствии с требованиями HTML 4.0 заменим атрибуты BGCOLOR= и BACKGROUND= тега <BODY> на соответствующие стилевые свойства:

<STYLE> BODY { background-color: #BFFFBF;

background-image: url("Images/gradi.jpg"); }

</STYLE>

Что же касается тега <BODY> , то ему желательно присвоить имя для облегчения доступа к его свойствам:

Теперь добавим сверху две кнопки: одну для выключения фонового рисунка, а другую — для смены цвета фона на белый:

Кнопки созданы, но пока при их нажатии ничего не происходит. Нам надо написать функцию, убирающую фоновый рисунок. Для этого нужно всего лишь стилевому свойству background-image присвоить значение none:

function noBg() { document.all.doc.style.backgroundlmage='none'; }

Обратите внимание на то, что в тексте на языке JavaScript (а не на языке CSS) нужно обязательно преобразовать название стилевого свойства с дефисом, как объяснялось выше.

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

Аналогично создадим функцию для смены цвета фона на белый:

function colChangeO ( document.all.doc.stylе.backgroundColor='white'; } и добавим ко второй кнопке обработчик события onClick:

Если теперь открыть эту страницу в броузере, то при нажатии на кнопку Убрать фоновый рисунок градиентный фоновый перелив исчезнет, уступив место зеленоватому цвету, а при нажатии на кнопку Сделать фон белым фон страницы действительно станет белым.

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

Можно было, разумеется, использовать и атрибут ID= вместо NAME=. Для того чтобы изменить надпись на первой кнопке, достаточно изменить значение ее атрибута VALUE=:

document.all.butti.value='Вернуть фоновый рисунок';

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

function noBg() { if (document.all.doc.style.backgroundlmage="none") { document.all.doc.style.backgroundlmage='none' ;

document.all.butti.value='Вернуть фоновый рисунок';

} else { document.all.doc.style.backgroundlmage="url('Images/gradi.jpg')"'; document.all.butti.values'Убрать фоновый рисунок'; } }

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

Таким же способом мы переделываем функцию colChange(). Сначала проверим значение свойства backgroundColor, и, если оно не совпадает со значением white (белый), присвоим ему это значение, а в противном случае присвоим первоначальное значение #BFFFBF. Одновременно будем изме нять и надпись на второй кнопке: function colChange() { it (document.all.doc.style.backgroundColor!='white'){ document.all.doc.style.backgroundColor"'white' ;

document.all.butt2.value='Сделать фон зеленым';

}

else { document.all.doc.style.backgroundColor='#BFFFBF' ; document.all.butt2,value='Сделать фон белым'; } } Теперь пользователь может с помощью первой кнопки включать и вык- лючать фоновый рисунок по желанию, а с помощью второй — переклю чать цвет фона с зеленоватого на белый и обратно. Однако остался еще один нерешенный вопрос. Дело в том, что если включен фоновый рису- нок, то переключение цвета фона не дает никакого видимого результат”, что может смутить пользователя. Поэтому, пока включен фоновый рису нок, лучше вообще не давать возможности нажимать на вторую кнопку. Internet Explorer позволяет сделать ее недоступной с помощью атрибут DISABLED. Поскольку изначально фоновый рисунок включен, установим этот атрибут сразу же при создании второй кнопки:

А в функцию noBg( ) следует включить сброс атрибута DISABLED для второй кнопки при выключении фонового рисунка и, соответственно, уста новку этого атрибута при включении фона:

function noBg() { if (document.all.doc.style.backgroundlmage!="none") {

document.all.doc.style.backgroundlmage='none'; document.all.butti.value='Вернуть фоновый рисунок'; document.all.butt2.disabled=false; } else { document.a 11.doc.style.backgroundlmage="url('Images/gradi.jpg')"; document.all.butti.value='Убрать фоновый рисунок'; document.all.butt2.disabled=true; } }

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"> <HTML> <HEAD> <TITLE>CKА3KА</TITLE> <STYLE> BODY { background-color: #BFFFBF; background-image: url("Images/gradi.jpg") ; } </STYLE> <SCRIPT> <!--function noBg() { if (document.all.doc.style.backgroundlmage!="none") { document.all.doc.style,backgroundlmage='none' ; document.all.butti.value='Вернуть фоновый рисунок'; document.all.butt2.disabled=false; } else {

document.all.doc.style.backgroundlmage= "url('Images/gradl.jpg')";

document, all .buttl .value='Убрать фоновый рисунок'; document.all.butt2.disabled=true;

} }

function colChangef)

{ if (document.all.doc.style.backgroundColor!='white')

{ document.all.doc.style.backgroundColor='white' ;

document.all.butt2.value='Сделать фон зеленым'; }

else { document.all.doc.style.backgroundColor='#BFFFBF'' document.all.butt2.value='Сделать фон белым';

}

//-->

</SCRIPT>

</HEAD>

</DIV>

<BR>

<H2> О ТОМ, КАК ИВАН-ДУРАК ПОСРАМИЛ ЦАРЯ ГOPOXA</H2></DIV>

авным-давно жил-был на белом свете царь Горох. И были у него поля гороховые, и леса гороховые, и степи гороховые, и даже моря гороховые. Все было гороховым. И была у него дочь — царевна Горошина. Волосы у нее были зеленые, и глаза тоже зеленые, потому что с детства только на горох и смотрела. Но вообще-то она была писаной красавицей. Все придворные царские, и бояре, и пажи, и лакеи, и даже слуги и повара дворцовые были по уши влюблены в нее. Но была у царевны Горошины одна странность — любила она смотреть по ночам на далекую звезду Адырлетавру, которая светила в том царстве так ярко, что обычные люди на той стороне, где звезда была, даже окон в домах не делали. <BR><BR>

<FONT SIZE="+3">............................................

</FONT><BR><BR>

Тут и сказке конец, а кто слушал — молодец, ему пряник в награду и кило мармеладу.<BR> </DIV>

</BODY>

</HTML>

Результат показан на Рисунок 7.6. Так страница будет выглядеть сразу после загрузки. Обратите внимание на то, что вторая кнопка изначально недоступна. Для красоты мы отделили наши кнопки от основного текста тем же разделителем, который использован в конце страницы.

Страница на которой используются данные из базы

Рисунок 9.1. Страница, на которой используются данные из базы

(мало ли, может быть, он и не помнит имя автора). Кроме того, пусть него будет возможность отсортировать список книг по имени автора и. по названию книги.

Поскольку мы используем элемент управления Tabular Data, обе эти зада решаются очень просто. Чтобы пользователь мог сам ввести название ну ной книги, создадим для этого текстовое поле и кнопку Поиск рядом с ним

Как видите, кнопке Поиск мы назначили обработчик событий onClick. Тепе; при нажатии этой кнопки будет выполняться еще не написанная функция booknameO, которая должна выбрать из “базы данных” только те записи, в которых присутствует введенное пользователем название книги. Скорее всего, это будет одна запись, если, конечно, в базе нет книг с одинаковыи названиями, как, например, “ Записки сумасшедшего” Гоголя и “Записки сумасшедшего” Толстого.

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

hudlit. Filter="Name="+document. all. book. value;

hudlit.Reset() ;

Правда, для наглядности хорошо бы при поиске введенной пользовате-лем книги вернуть список выбора автора в исходное состояние, иначе может возникнуть следующая ситуация. Допустим, пользователь сначала выбрал из списка одного автора (например, пункт Толстой) и увидел на экранe список имеющихся книг Толстого. Затем он решил поискать книгу под названием “Тихий Дон” (которой в нашей базе данных пока нет). Он вводит в строку поиска название книги и, естественно, не получает ничего в ответ .В этот момент он смотрит на экран и видит, что у него в списке авторов выбран Толстой. Тогда он начинает думать, что, наверное, компью- тер искал “Тихий Дон” Толстого, хотя на самом деле фильтр применялся ко всей базе. Пользователь начинает раздражаться и нервничать.

Чтобы не возникало подобных недоумении, давайте просто при поиске введенного пользователем названия книги автоматически выбирать из списки авторов пункт Все. Для этого достаточно изменить свойство selectedlndex

списка выбора:

document. all. auth. selectedlndex=0 ; Эту строку мы добавим в функцию booknameO. Аналогично можно посту-пить и при поиске книг одного автора - на всякий случай очищать поле ввода названия книги. Для этого добавим в функцию auth() следующую строку:

document.all.book.value="";

Страница управляемая при помощи мыши

7.2. Страница, управляемая при помощи мыши

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

Помните, как в примерах Главы 4 мы изменяли цвет гиперссылки при наведении на нее мыши? Это происходило с помощью псевдокласса :hover. Однако этот псевдокласс пока что определен только для тега <А> . А как быть, если мы хотим изменить цвет обычного текста при наведении на него мыши?

Рассмотрим, как это делается. Допустим, мы написали небольшую тесто вую страницу.

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

<HTML>

<HEAD>

<ТIТLЕ>Обработка событий мыши</ТIТLЕ>

</HEAD>

<BODY> Этот текст не изменит свой цвет. Этот текст изменит свой цвет, если навести на него мышь! Этот текст не изменит свой цвет.

</BODY>

</HTML>

Страничка отформатированная с помощью тега

Рисунок 1.4. Страничка, отформатированная с помощью тега

<PRE>

заключенный между тегами <PRE> и </PRE> , именно так. Во-вторых (и это главное), в том, что броузер игнорирует разбиение текста на строки, есть свой глубокий смысл. Например, написанная строка может не поместиться в окне просмотра, и тогда, если бы не было тега <PRE> , броузер автоматически перенес бы ее часть на следующую строку, чтобы пользователю было удобно читать весь текст. Тег <PRE> не позволяет этого сделать, и если строка “вылезет” за пределы окна просмотра, то для ее чтения придется воспользоваться горизонтальной полосой прокрутки, что неудобно и обычно раздражает. Другими словами, если вы используете тег <PRE> , вам придется специально заботиться о длине строк, а это затруднительно, поскольку никто заранее не знает, какой размер окна броузера будет у пользователя. Без тега <PRE> броузер позаботится об удобстве просмотра сам (это будет проиллюстрировано далее на Рисунок 1.6).

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

<HTML>

<HEAD>

<ТIТLЕ>Домашняя страница Сергея Сергеева.</TITLE>

</HEAD>

<BODY>

Домашняя страница Сергея Сергеева.

<BR>

Сергей Сергеев - писатель-юморист, автор 20 рассказов.<BR>

В жизни большой любитель собак и компьютерных игр.

</BODY>

</HTML>

Результат показан на Рисунок 1.5. Как видите, форматирование текста сохранено, шрифт остался пропорциональным и не превратился в моноширинный, а кроме того, если пользователь почему-либо будет просматривать страничку в очень узком окне, он все равно увидит весь текст (Рисунок 1.6).

И, наконец, еще одна деталь: иногда броузеры или другие программы обработки требуют, чтобы в начале HTML-документа обязательно стоял служебный тег <!DOCTYPE> , в атрибутах которого должна быть указана версия языка и некоторая другая информация. Так что в корректном виде наша страничка будет выглядеть вот так:

Страничка с графической картой ссылок

Рисунок 3.5. Страничка с графической картой ссылок

Страничка с круглой фотографией

Рисунок 3.6. Страничка с круглой фотографией

Во-первых, GIF-рисунок может быть “прозрачным”. То есть, можно один цвет удалить из палитры GIF, определив его как прозрачный. Тогда при отображении, сквозь точки, окрашенные в этот цвет, на рисунке будет виден фон веб-страницы. Это очень помогает при создании рисунков фигурной формы. Например, этим приемом можно поместить на веб-страницу круглую фотографию. На самом-то деле она, конечно, прямоугольная, просто края ее сделаны прозрачными (Рисунок 3.6).

Исходный текст этой странички самый простой:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">

<HTML>

<HEAD>

<TITLE>Круглая фотография</ТITLE>

</НЕАD>

<FONT SIZE="+3">HA ЭТУ СТРАНИЧКУ ПОМЕЩЕНА </FONT>

<BR>

<FONT SIZE="+3">КРУГЛАЯ ФОТОГРАФИЯ! </FONT>

</DIV>

</BODY>

</HTML>

Однако дело здесь не в HTML-коде, а в GIF-файле. Цвет в его углах объявлен как прозрачный, и в результате мы можем видеть “сквозь него” фон странички, так что создается впечатление, фотография действительно круглая. Этим приемом иногда оживляют “прямоугольный” мир компьютерных окон...

Другое достоинство GIF-рисунков — возможность загружать их чересстрочным методом. Если графический файл имеет большой размер и грузится из Интернета долго, пользователь увидит сначала как бы нечеткие контуры будущего рисунка, а по мере загрузки изображение будет постепенно “проявляться”, что достигается очень простым приемом — изменением порядка загрузки строк изображения. Для этого необходимо при сохранении GIF-файла не забыть включить режим Interlaced (Чересстрочный).

И, наконец, еще одно достоинство GIF-файлов — они могут содержать не только статичные рисунки, но и целые анимационные фрагменты! На самом деле эти фрагменты представляют собой последовательности нескольких статичных кадров, а также информацию о том, сколько времени каждый кадр должен задерживаться на экране. Для создания подобных анимаций существуют специальные программы, например WWW Gif Animator (Рисунок 3.7). В такую программу можно загрузить несколько графических файлов подряд, а также использовать некоторые встроенные эффекты. Однако помните, что каждый лишний кадр ведет к увеличению размера файла, и если сделать анимированный GIF-файл, например из 500 кадров, очень мало кто сможет дождаться окончания его загрузки.

Сжатие звука

Итак, звук записан и теперь его надо сжать. Кстати говоря, если вы его записывали программой Sound Forge, то можно, прямо не выходя из нее, сжать звук в формат RealAudio. Для этого дайте команду File > Save As (Файл > Сохранить как) — откроется диалоговое окно сохранения файла. В раскрывающемся списке Files of Type (Тип Файла) выберите тип RealNetworks G2 или Real Media для совместимости со старыми версиями — в этом случае качество звучания будет чуть хуже. После щелчка на кнопке Save (Сохранить) откроется окно, в котором можно выбрать параметры сжатия в виде описания. Если же использовать кнопку Advanced (Дополнительно), то можно выбрать степень сжатия в явном виде.

Сжатие звуковых файлов

Как уже говорилось выше, несжатые звуковые данные CD-качества занимают приблизительно 10 Мбайт на минуту звучания. Поэтому были разра ботаны специальные алгоритмы сжатия звуковых файлов. К сожалению, все они обладают одним и тем же недостатком: чем сильнее снижается объем файла звукозаписи, тем хуже становится ее качество. Поэтому приходится балансировать, выбирая между качеством записи и размером файла. На многих веб-страницах музыкальной тематики даже предлагаются несколько вариантов одного и того же музыкального фрагмента — более качественный для загрузки через JSZW-линию и несколько менее качественных для загрузки по модемным линиям с различной скоростью.

Наиболее популярны на сегодняшний день три формата сжатия звуковых файлов: RealAudio, MPEG 1 Layer 3 и TwinVQ.

Формат RealAudio был разработан фирмой RealNetworks. Это самый ран ний из форматов сжатия звукозаписи, и потому он наиболее распростра нен в Интернете. В настоящее время он поддерживает сжатие для потока (скорости загрузки) от 5 до 96 килобит в секунду. Низкие значения этого параметра (от 5 до 16 Кбит/с) предназначены для медленных модемов. Их предпочтительнее использовать лишь для речевых записей, поскольку при скорости потока 16 Кбит/с максимальная воспроизводимая частота звука не превышает 8 КГц, то есть при прослушивании пользователь практически не услышит высоких частот, а при более сильном сжатии (до 5 Кбит/с) о каком-то адекватном восприятии вообще говорить не приходится. Для сжатия музыки лучше использовать скорость потока не менее 32 Кбит/с, что дает вполне приемлемые результаты для монофрагментов.

Вы можете спросить, а почему это степень сжатия мы вдруг стали измерять в единицах величины потока (скорости загрузки)? На самом деле это имеет смысл! Дело в том, что главной проблемой использования звука в Интернете было то, что пользователь просто уставал ждать, пока загрузится большой файл — ведь воспроизведение его могло начинаться только по окончании полной загрузки. Компания RealNetworks предложила нов шество, называемое потоковым методом воспроизведения звуковых (а впоследствии и видео-) файлов. При использовании этого метода воспроизведение может начаться почти сразу же после начала загрузки файла. Пока одна часть файла загружается, другая уже воспроизводится!

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

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

Та же страница после щелчка на “гиперссылке”

Рисунок 7.13. Та же страница после щелчка на “гиперссылке”

} Н1,Н2 { text-align: center;

} .Ink ( color: #634438; text-decoration: underline; cursor: hand;

} HR ( margin-top: 24px; width: 75%;

) DIV.epig { text-align: justify; font-size: smaller; width: 130;

} DIV.pdps { font-style: italic; text-align: right;

} DIV.ab { text-align: justify; text-indent: 2em; } --> </STYLE>

<!--

function show_hammer()

{ document. all. rasskaz . innerHTML='

<H2>MOЛOTOK<BR>

<SPAN STYLE="font-style: italic;">paccкaз</SPAN></H2>

<DIV STYLE="text-align: right; "><DIV CLASS="epig">Mы кузнецы, и дух наш молод.<DIV CLASS="pdps">(Из песни) </DIV>

</DIV>

</DIV><BR>

<DIV CLASS="аЬ">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>';

} //-->

</SCRIPT> </HEAD>

<BODY> <Н1>Домашняя страница Сергея Сергеева</Н1>

<DIV STYLE="text-align: center;">Сказка «Иван-царевич и серый заяц&гаquо; 

<SPAN CLASS="lnk" onClick="show_hammer()">Рассказ &laquo ;МОЛОTOK»</SPAN></DIV>

<BR>

<SPAN STYLE="font-weight: bold;"> Сергей CepreeB</SPAN> — писатель-авангардист, автор 20 рассказов.<BR>

В жизни большой любитель собак и компьютерных игр.<ВR><ВR> Некоторые его рассказы вы можете прочитать прямо здесь.</DIV> <HR>

<Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR>

<SPAN STYLE="font-style: italic;">CАKЗKА</SPAN></H2>

<DIV STYLE="text-align: right;"> <DIV CLASS="epig"> Ну, погоди!..

<DIV CLASS="pdps">(Из мультфильма)</DIV> </DIV> </DIV> <BR>

<DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе -как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV>

<DIV CLASS="аЬ">Долго ли, коротко ли ...</DIV>

<DIV CLASS="ab">И они жили долго и счастливо и умерли в один день.</DIV>

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

Та же страничка в форматированием текста узком окне броузера

Рисунок 1.6. Та же страничка в форматированием текста узком окне броузера

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

<HTML>

<HEAD>

<ТIТLЕ>Домашняя страница Сергея Сергеева </TITLE>

</HEAD>

<BODY>

Домашняя страница Сергея Сергеева <BR><BR>

Сергей Сергеев - писатель-юморист, автор 20 рассказов.<BR>

В жизни большой любитель собак и компьютерных игр.

</BODY>

</HTML>

В данном случае в первой строке стоит указание, что в документе использована версия 4.0 языка HTML. В дальнейшем мы будем ориентироваться именно на нее, хотя приведенный выше пример с таким же успехом мог бы быть написан и с использованием версии 3.2, и даже более ранней. Однако HTML 4.0 предоставляет такие возможности создания веб-страниц, которых не было в предыдущих версиях. И хотя некоторые старые программы просмотра не в силах адекватно отобразить страницы, написанные с использованием особенностей новой версии, все же подавляющее большинство читателей сегодня пользуются новыми броузерами. Мы будем ориентироваться именно на них.

Теги HTML

Пользователь увидит эту страничку так, как показано на Рисунок 1.2. Это уже что-то, хотя и не слишком привлекательно: во-первых, исчезло форматирование текста (абзацы), во-вторых, — как-то скучно смотрится. Кроме того, есть такие строгие броузеры, которые вообще не отобразят этот текст, если не увидят в нем подтверждение того, что он написан на языке HTML (языке гипертекстовой разметки, на котором и пишутся веб-страницы). Расширение .html такой броузер может посчитать недостаточным подтверждением, поэтому придется написать несколько дополнительных строк:

<HTML>

<BODY>

Домашняя страница Сергея Сергеева

Сергей Сергеев - писатель-юморист, автор 20 рассказов.

В жизни большой любитель собак и компьютерных игр.

</BODY>

</HTML>

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

Существуют разные транскрипции слова browser, означающего просто программу просмотра веб-странип. Некоторые пишут “броузер”, а другие — “браузер”. Мы будем придерживаться второго варианта.

Тег <HTML> , который вы видите в первой строке, означает, что наш текст действительно написан на языке HTML. Большинство тегов языка HTML — парные. Они обязательно требует присутствия закрывающего тега. Например, в этом примере в первой строке стоит открывающий тег <HTML> , а в последней — закрывающий тег </HTML>. Все, что расположено между ними, считается .HTML-документом.

В языке HTML совершенно не имеет значения, строчными или прописными буквами записаны теги. Можно написать </HTML> или <html> — для броузера это одно и то же. Однако принято писать теги HTML прописными буквами, чтобы они лучше выделялись на фоне основного текста.

В рассмотренном примере вы видите еще один тег — <BODY> . Все, что расположено между ним и его закрывающим тегом ( </BODY> ), считается “телом” документа и отображается на экране. HTML,-документы, помимо “тела”, обычно содержат еще и заголовок, в котором заключена различная служебная информация. Заголовок располагается между тегами <HEAD> и </HEAD> . Например, следующий код будет отображен в броузере так, как показано на Рисунок 1.3.

<HTML>

<HEAD>

<ТIТLЕ>Домашняя страница Сергея Сергеева </TITLE>

</HEAD>

<BODY>

Домашняя страница Сергея Сергеева.

Сергей Сергеев - писатель-юморист, автор 20 рассказов.

В жизни большой любитель собак и компьютерных игр.

</BODY>

</HTML>

Текстовая база данных

Для этого давайте создадим файл базы данных, в которой хранятся все сведения об имеющихся в библиотеке книгах. Для примера предположим, что у нас всего восемь книг. Файл базы данных будет представлять собой обычный текстовый файл (с расширением txt), в котором каждая строка является записью — данными об одной книге. Каждая запись состоит из нескольких полей: автор, название книги, размер файла и имя файла для загрузки. Чтобы не усложнять код, будем в этом месте просто ставить гиперссылку. Поля будем отделять друг от друга запятыми, например, так:

Толстой,Анна Каренина,305,<А HREF="anna.ziр">загрузить</А>

Как видите, заполнение базы данных вполне можно поручить любому человеку, умеющему использовать компьютер как пишущую машинку. (В принципе, можно избавить его и от необходимости писать страшную конструкцию <А HREF> .) В начале файла базы данных напишем заголовок каждого поля. Вот что у нас получится:

Author,Name,Size:INT, File Дюма,Три мушкетера,250

<A HREF="trim.zip">3arpyзить</A> Дюма,Десять лет спустя,198,<А HREF="deslet.zip"> загрузить </А> Дюма,Двадцать лет спустя,170,

<А HREF="dvlet.zip"> загрузить </А> Толстой/Война и мир,1045,

<А HREF="vojna.rar"> загрузить </А> Толстой,Анна Каренина,305,<А HREF="anna.zip"> загрузить </А> Достоевский,Идиот,560,

<А HREF="idiot.zip"> загрузить </А>

Достоевский,Преступление и наказание,710,

<А HREF="prest.rar"> загрузить </А>

Достоевский,Двойник,432,

<А HREF="doppel.zip"> загрузить </А>

Обратите внимание на то, что в первой строке мы написали просто заго- ловки полей. При этом можно было использовать любые слова — мы про- сто обозначили их так, чтобы было понятно, о чем речь. Поскольку в третьем поле каждой записи у нас будут храниться только числа (размер архивного файла книги в килобайтах), для экономии памяти мы можем указать, что это поле — числовое. Это делается с помощью ключевого слова

INT

Теперь давайте создадим саму веб-страницу. Сначала, как обычно, напи-шем заголовок и определим стиль вывода на экран:

<ТIТLЕ>Электронная библиотека</ТIТLЕ>

<STYLE> BODY { background-color: #F4FFEF;

color: #182F1A;

font-family: sans-serif; font-size: 120%;

} </STYLE>

</HEAD>

<BODY>

<Н1>Художественная литература</Н1>

Учет различий между броузерами

Такие вопросы обычно решаются не просто. Но в данном случае мы можем осуществить проверку версии броузера и, в зависимости от ее результата, присвоить переменной textl либо значение document.all.textl, либо значение document.getElementByld("text1"). А затем в функциях замены цвета просто подставлять эту переменную. То же самое можно проделать и с переменной text2. Только нужно не забыть заранее определить эти переменные:

var text1, text2; function brws()

{ if (navigator.appName!="Net scape")

{ textl=document.all.textl; text2=document.all.text2 ;

} else { textl=document.getElementById("textl") ;

text2=document.getElementById("text2"); } }

Теперь необходимо сделать так, чтобы нагла функция brws( ) выполнялась сразу после загрузки страницы. Для этого установим в теге <BODY> обработчик событий, реагирующий на загрузку элемента. Он называется onLoad:

Посмотрим, что у нас получается в целом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transional//EN">

<HTML>

<HEAD>

<TITLE>06pa6oткa событий мыши (1Е4, NN6)</TITLE>

var textl, text2; function brws()

{ if (navigator.appName!="Netscape") ( textl=document.all.textl; text2=document.all.text2;

} else { textl=document.getElementById("textl") ; text2=document.getElementById("text2") ;

} } function change () { textl.style.color="red"; text2.style.color="green";

}

function change2() { textl.style.color="black"; text2. style. color="blacl<";

} //-->

</SCRIPT>

</HEAD>

<BODY onLoad="brws()"> Этот текст не изменит свой цвет.

Этот текст изменит свой цвет, если

навести на него мышь!

</DIV> <DIV !D="text2">Этот текст изменит свой цвет, если мышь навести на вторую строку!</DIV>

</BODY>

</HTML>

Результат можно увидеть на Рисунок 7.5. Теперь этот пример работает и в броузере Internet Explorer, и в броузере Netscape 6. Конечно, хотелось бы создавать такие страницы, которые бы работали по крайней мере в этих двух броузерах, потому что в Netscape версии 4 поддержка динамических страниц вообще очень слабая. Однако это не всегда возможно. В этой книге в дальнейшем все примеры будут ориентированы на броузер Internet Explorer версии 4 и выше (если специально не оговорено обратное).

Учет версии броузера

Теперь давайте рассмотрим простой пример. Предположим, что у нас уже имеются страницы, созданные специально для броузера Internet Explorer 4, Netscape 4 или Netscape 6. Мы хотим написать код, который бы определял тип броузера пользователя и, в зависимости от этого, загружала бы одну из наших страниц. Кроме того, он должен выдавать предупреждение, если обнаружит устаревший броузер (версии 3 и ниже).

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

Как определить номер версии броузера? Для этого существует свойство navigator.appVersion. Однако его значением является не число (собственно номер версии), а целая строка. Например, если написать:

document.write(navigator.appVersion) ; то в броузере Internet Explorer 5 будет выдано такое сообщение:

4.0 (compatible; MSIE 5.0; Windows 98; DigExt)

Netscape и другие броузеры также выдают подобную длинную строку. Как же выделить из нее номер версии?

К счастью, первая цифра этой строки во всех броузерах указывает именно на номер версии (в Internet Explorer 5 на этом месте оставили цифру 4, чтобы подчеркнуть сходство этих версий.) Поскольку после этого номера стоит точка, то есть не цифра, его легко выделить из всей строки с помощью функции parselnt(). Она всегда выделяет целое число из строки, останавливаясь на первой не цифре.

В данном случае нам надо, если номер версии меньше 4, выдать предупреждающее диалоговое окно. Для проверки условия в JavaScript существует оператор if, после которого в скобках следует поставить условие. Поэтому мы можем написать так:

if (parseint(navigator.appVersion)<4)

alert("Вы используете старую версию броузера.\nВ ней страница может отображаться неправильно") ;

При этом метод alert будет выполнен только тогда, когда условие номер версии меньше 4 выполняется, а иначе он будет просто пропущен.

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

Хорошо, предупреждение мы написали, теперь нужно определить тип броузера. Для этого существует свойство navigator.appName. В Internet Explorer его значением является “Microsoft Internet Explorer”, а в броузерах компании Netscape — просто “Netscape”. Поскольку для каждого случая нам надо предусмотреть ряд действий, удобно использовать оператор switch (пере ключатель). Схематично его использование можно изобразить так:

switch (условие) { case "первый случай":

какие-то действия case "второй случай": какие-то действия

и т. д. default: действия во всех остальных случаях

В нашем примере условием является значение navigator.appName, а случаи могут быть такими: "Microsoft Internet Explorer" и "Netscape".

switch (navigator.appName) { case "Microsoft Internet Explorer": какие-то действия

case "Netscape": какие-то действия

действия во всех остальных случаях

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

Чтобы загрузить другую веб-страницу вместо данной, нужно присвоить новое значение свойству window.location.href. Например, если написать:

window.location.href = "msie4.html";

то текущая страница будет заменена в окне броузера на страницу msie4.html. Давайте перед загрузкой новой страницы создадим соответствующее сообщение:

document-write ("Сейчас будет загружена страница для Internet Explorer 4") ;

setTimeout("window.local ion.href = 'msie4.html'", 3000);

При этом нам пришлось использовать функцию setTimeout, чтобы пользователь успел увидеть нашу надпись.

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

Если тип броузера определился как Netscape, нам нужно опять смотреть его версию. Мы можем использовать для этого оператор if...else:

if (parseint(navigator.appversion)<=4)

{ document.write ("Сейчас будет загружена страница для Netscape 4");

setTimeout("window, location.href = 'nn4.html'", 3000); } else

{ document.write ("Сейчас будет загружена страница для Netscape 6") ;

setTimeout("window.location.href = 'nn6.html'", 3000); } Если условие parselnt(navigator.appversion)<=4 верно, то выполняется блок операторов, следующий сразу после условия, а если неверно, то выполняется блок, следующий после ключевого слова else.

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

alert ("Вы используете неизвестный нам тип броузера. \пСейчас вам будет предложено выбрать версию страницы, которую следует загрузить");

document.write ("<A HREF='msie4.html'>Страница для Internet Explorer 4</A><BR>");

document.write ("<A HREF='nn4.html'>Страница для Netscape 4 </A><BR>") ;

document.write ("<A HREF='nn6.html'>Страница для Netscape 6 </A>");

Итак, теперь посмотрим, что же у нас получается в целом:

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

<HTML>

<HEAD> <ТIТLЕ>Автоматический выбор нужной версии cтpaницы</TITLE>

</HEAD>

<BODY> <SCRIPT> < ! -- if (parseint(navigator.appVersion)<4)

alert("Вы используете старую версию броузера.\nВ ней страница может отображаться неправильно") ;

switch (navigator.appName)

case "Microsoft Internet Explorer":

document.write ("Сейчас будет загружена страница для Internet Explorer 4");

setTimeout ("window.location.href = 'msie4.html'", 3000); break; case "Netscape": if (parseint(navigator.appversion)<=4)

{ document.write ("Сейчас будет загружена страница для Netscape 4") ;

setTimeout("window.location.href = 'nn4.html'", 3000);

} else

{ document.write ("Сейчас будет загружена страница для Netscape 6");

setTimeout("window.location.href = 'nn6.html'", 3000);

} break;

default:

alert ("Вы используете неизвестный нам тип броузера.><nСейчас вам будет предложено выбрать версию страницы, которую следует загрузить");

document.write ("<A HREF='msie4.html'>Страница для Internet Explorer 4</A><BR>") ;

document.write ("<A HREF='nn4.html'>Страница для Netscape 4</A><BR>") ;

document.write ("<A HREF='nn6.html>Страница для Netscape 6</A>");

} //—> </SCRIPT>

</BODY>

</HTML>

Результат просмотра этой страницы зависит от броузера. На Рисунок 6.3 изображено предупреждение, которое получит пользователь при просмотре этой страницы в броузере Internet Explorer.

Удаление “лишней” тени из слоя

Рисунок 3.26. Удаление “лишней” тени из слоя

Теперь осталось собственно наложить тень. Из меню Слой (Layer) выберите пункт Эффекты (Effects) и далее команду Наложить тень (Drop Shadow). Откроется диалоговое окно настройки эффектов (Рисунок 3.27). Обратите внимание на то, что если отмечен флажком пункт Применить (Apply), то, настраивая эффект, можно непосредственно наблюдать результат его действия на изображение.

Указание языка сценариев

Прежде чем пойти далее, давайте рассмотрим еще вот какой вопрос. Дело в том, что тег <SCRIPT> , так же как и другие теги, может иметь свои атри буты. Это LANGUAGE= (язык) и TYPE= (тип). В первом указывается язык, на котором написан сценарий. По умолчанию, значением этого атрибута явля ется JavaScript, так что если вы пишете обычный JavaScript-сценарий, то можете спокойно не указывать этот атрибут. Однако, если вы используете особенности версий 1.1 или 1.2 этого языка, то это необходимо указать:

ИЛИ

Правда, распознать это смогут только броузеры Netscape последних версий. А если вы пишете страницу для отображения в броузере Internet Explorer, то можете использовать вообще другой язык — VBScript. Для этого необходимо указать соответствующее значение атрибута LANGUAGE=:

ИЛИ

что, вообще говоря, одно и то же. В отдельных случаях могут применяться другие языки, для чего определены такие значения атрибута LANGUAGE=, как LiveScript, tal, PHP и другие.

Что касается атрибута TYPE=, то в нем можно на всякий случай указать тип сценария. В большинстве случаев это text/javascript (или text/vbscript для сценариев, написанных на VBScript).

Управление амплитудой

Кроме того, фонограмма может иметь слишком малую амплитуду. Как .правило, с меньшими потерями сжимаются фонограммы, максимальная амплитуда которых достигает приблизительно -1 дБ. Если фонограмма слишком тиха, увеличьте ее уровень, а если он достигает 0 дБ, то лучше ero немного уменьшить. Для этого лучше всего пользоваться функцией нормализации. Например, в программе Sound Forge выберите из меню Process (Обработка) пункт Normalize (Нормализация). Установите уровень на отметку -1 дБ. Программа сама определит максимальный уровень амплитуды в записи и пересчитает в соответствии с ним все остальные уровни. Только обратите внимание, что при нормализации следует производить увеличение уровня до -1 дБ пиковой амплитуды — в Sound Forge это переключатель Peak. Если включить переключатель RMS, то все операции будут производиться со средним значением амплитуды сигнала, что для данного случая не подходит.

Но это еще не все. Описанная выше операция помогает, если уровень сигнала в записи остается практически постоянным. Однако бывают случаи, когда при наличии нескольких пиков на уровне около 0 дБ уровень всей остальной записи не поднимается, например, выше -30 дБ. В этом случае для получения лучшего звучания при сжатии необходимо уменьшить динамический диапазон записи. Для этого в Sound Forge существует функция Dynamics (Динамический диапазон). В других программах она может называться как-нибудь вроде Compressor/Expander/Limiter. В программе Sound Forge из меню Effects (Эффекты) выберите пункт Dynamics (Динамический диапазон) и далее — Graphic (Графическое представление). В открывшемся окне в большинстве случаев можно просто выбрать один из предварительно заданных наборов настроек. Нажав на кнопку Preview (Предварительное прослушивание), можно проверить результат.

Обратите также внимание на ползунковые регуляторы Threshold (Порог) и Ratio (Степень). Первый определяет порог уровня сигнала, ниже которого начинает действовать компенсация — соответствующее усиление сигнала. Регулятор Ratio определяет степень этой компенсации.