Мы с вами изучили основы языка HTML и сделали простую, но красивую и содержательную страницу. Казалось бы, что еще нужно? На самом деле HTML таит в себе потрясающие возможности, о которых мы сейчас и поговорим.
Во-первых, одним из преимуществ и особенностей Сети является ее способность включать не только графику, но еще и видео и звук - в дополнение к форматированному тексту. Во-вторых, вы можете упростить навигацию по сайту, если разобьете свою страничку на так называемые рамки, или фреймы. В этом случае панель навигации по сайту всегда будет находиться перед глазами пользователя. В-третьих, вы сможете сделать панель навигации вашего сайта в виде красивого графического изображения, используя карты ссылок. И, наконец, вам представится возможность оживить свою страничку с помощью Java- и флэш-технологий.
Но обо всем по порядку.
Итак, еще одно важное дополнение к основе изготовления веб-сайтов - фреймы. Это мощный механизм представления информации на веб-страницах. Не зря мы отводим так много места в этой книге для ознакомления с ним. С помощью фреймов экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже веб-сайта.
Для создания фреймов (областей страницы) используют тег <FRAMESET>
и парный ему тег </FRAMESET>
, а для их описания -
теги <FRAME>
. Чтобы сделать вебстраницу с фреймами,
недостаточно одного HTML-документа. Обычно создается главный документ и
второстепенные или включенные в него документы.
Чтобы разбить страницу на фреймы в программе Macromedia Dreamweaver, нужно выбрать команду меню Modify ► Frameset (Изменить ► Набор фреймов). Далее вы должны выбрать расположение фрейма. Вам будет предложено четыре варианта: Split Frame Right (Расположить фрейм справа), Split Frame Left (Расположить фрейм слева), Split Frame Up (Расположить фрейм сверху) или Split Frame Down (Расположить фрейм снизу).
В программе FrontPage следует выбрать команду Frame ► Split Frame (Рамки ► Разделить рамку). В этом же меню вы найдете команду для просмотра и изменения свойств фрейма - Frame Properties (Свойства рамки).
Давайте сделаем следующее: в программе Dreamweaver выберем команду Modify ► Frameset ► Split Frame Right (Изменить ► Набор фреймов ► Расположить фрейм справа). Затем сдвинем среднюю границу вправо, чтобы экран был разделен на две части - правая занимает примерно 20%, левая - 80%. Затем сохраним этот файл командой меню File ► Save Frameset (Файл ► Сохранить набор фреймов) под именем index.htm. Сохранять будем в новую папку, назовем ее НР1. Это будет наш главный документ. Теперь нам надо сохранить второстепенные документы. Слева на страницах сайта у нас будет располагаться панель навигации. Установим курсор в левый фрейм и выберем команду File ► Save Frame (Файл ► Сохранить фрейм). Сохранять этот фрейм мы будем также в папку НР1 (там будут храниться все элементы нашего нового сайта), под именем menu.htm. Затем переместим курсор во фрейм, расположенный справа, и сохраним этот документ как home.htm.
Внимание
Не забудьте установить свойства каждого файла из набора фреймов (название, кодировку; в файлах menu.htm и home.htm можно залить фон или наклеить «обои»), пользуясь командой меню Modify ► Page Properties (Изменить ► Параметры страницы).
Теперь посмотрим на HTML-код каждого файла. Сделать это просто: если вы располагаете курсор в области левого фрейма, то видите перед собой код файла menu.htm, а если в области правого - home.htm.
Поставив курсор четко на границу, вы увидите код главного файла (index.htm) (листинг 6.1).
Листинг 6.1. Главный файл набора фреймов - index.htm
<html>
<head>
<title>Страничка с фреймами</title>
<meta http-equiv="Content-Type" content="text/html; charset = windows-1251">
</head>
<frameset cols="20%,80%" rows="*">
<frame src="menu.htm">
<frame src="home.htm">
</frameset&#gt;
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
Как вы уже заметили, второстепенные документы вставляются в
главный с помощью тегов <FRAMESET>
и <FRAME>
.
В теге <FRAMESET>
с помощью атрибута COLS
указывается, что экран разделяется на две колонки (COLS="20%,
80%"
).
Размер фрейма может быть указан не только числовым
значением, но и символом *
, например COLS="150,*"
.
Это означает, что данный фрейм должен занимать всю оставшуюся площадь
главной страницы. Употребление символа *
связано с тем, что
созданные вами страницы будут просматривать пользователи, у которых
мониторы имеют разное разрешение. Использование абсолютных величин может
привести к нежелательным эффектам - страница, которая прекрасно
смотрится на экране с разрешением 1024×768, может выглядеть совсем
по-другому при разрешении 800×600, и наоборот. Поэтому если вам
необходимо задать размер левого фрейма в пикселях, то размер правого
обязательно должен быть задан символом *
.
Внимание
Тег <FRAMESET> представляет собой тег-контейнер, то есть тег, который может включать в себя другие теги. Он заканчивается парным ему тегом </FRAMESET>. Тег <FRAME> не является тегом-контейнерhм и не требует парного закрывающего тега.
Откройте страницу index.htm в браузере, и вы увидите, что она состоит из двух областей.
Рис. 6.1. Панель форматирования фреймов в Macromedia Dreamweaver
Вы можете задать тегу <FRAMESET>
необходимые атрибуты. Сделать это в программе Macromedia Dreamweaver
очень просто: когда ваш курсор находится на средней границе фреймов,
панель Properties (Свойства)
отвечает за форматирование фреймов (рис. 6.1).
Если добавить в тег <FRAMESET>
атрибут BORDER
,
присвоив ему значение 10, то можно изменить ширину обрамления (границы
фрейма). Можно также отрегулировать ширину, записав в HTML-коде
следующий тег: <FRAME FRAMESPACING=n>
, где n
- ширина границы фрейма, заданная в пикселях.
Если вы хотите избавиться от границы, то тег нужно изменить
так: <FRAME FRAMEBORDER=NO>
. Например:
<frameset cols="20%,80%"
rows="*" frameborder="NO"
border="0" framespacing="0">
Если вы все-таки решили оставить границу, можно просто
заменить слово no
словом yes
: <FRAME
FRAMEBORDER=YES>
.
Задание. Как разделить страницу на большее число фреймов?
Внимание
Не располагайте на экране более трех фреймов. Это мощное и удобное средство, но не следует им злоупотреблять!
Далее нам надо добавить в панель навигации нашего сайта ссылки на разделы сайта. Сделаем три тестовых раздела: Главная страница, Спортивная секция, Еще о спорте. Мы должны обеспечить навигацию по разделам сайта следующим образом: при щелчке на ссылке Главная страница или Спортивная секция содержание должно будет открываться в правом фрейме (это наши внутренние ссылки). При щелчке на ссылке Еще о спорте должен будет открыться сайт в Интернете. Это будет наша внешняя ссылка, которую мы «выпустим» из фрейма для того, чтобы этот веб-сайт открывался отдельно, без фреймов.
Чтобы содержание вашего сайта открывалось в правом фрейме, проделайте следующие действия в режиме просмотра HTML-кода:
<head></head>
вставьте <base
target="main">
: <head>
<title>Правый фрейм</title>
<meta http-equiv="Content-Type"
content="text/html"; charset = windows-1251">
<base target="main">
</head>
<frame>
, который соответствует правому фрейму,
напишите <frame src="home.htm"
name="main">
: <frameset cols="20%,80%" rows="*"
frameborder="NO"
border="0" framespacing="0">
<frame src="menu.htm">
<frame src="home.htm" name="main">
</frameset>
Если вы все сделаете правильно, то все разделы сайта будут открываться в правом фрейме, даже если к вашим двум основным внутренним разделам прибавятся другие.
Теперь разберемся с внешней ссылкой. Для того чтобы
«выпустить» страницу из фрейма, достаточно лишь указать другое значение
атрибута TARGET
. В программе Dreamweaver нужно
ориентироваться на панель Properties
(Свойства). Выделите слова Еще о спорте,
введите URL-адрес ссылки в поле Link.
(Ссылка) и выберите значение _blank
в поле Target (Окно назначения).
В программе FrontPage нужно выбрать команду Insert ► Hyperlink (Вставка ► Гиперссылка). Далее следует ввести URL-адрес ссылки, щелкнуть на кнопке с изображением карандаша и в раскрывающемся списке выбрать значение New Window (В новом окне). Соответствующий фрагмент HTML-кода показан ниже:
<а href="http://www.sport.ru" target="_blank">Еще
о спорте</а>
В результате при выборе ссылки Еще о спорте сайт www.sport.ru будет открываться в отдельном окне (рис. 6.2).
Рис. 6.2. Загрузка сайта в отдельном окне
Заметим, что значение _blank
является одним из
четырех значений атрибута TARGET
. Другими значениями могут
быть _top
, _self
и _parent
:
_blank
- содержимое страницы, заданной ссылкой,
загружается в новое пустое окно;_self
- содержимое страницы, заданной ссылкой,
загружается в окно, которое содержит ссылку;_parent
- содержимое страницы, заданной ссылкой,
загружается в окно, являющееся непосредственным владельцем набора
фреймов;_top
- содержимое страницы, заданной ссылкой,
загружается в окно, причем используемые фреймы игнорируются.Давайте проделаем один эксперимент. Возьмите какую-нибудь картинку в формате .gif или .jpg. Причем выбирайте такую картинку, которая будет чуть больше ширины левого фрейма. Вставьте картинку в левый фрейм и посмотрите, что у вас получилось. Внизу появилась горизонтальная полоса прокрутки (Scrolling). Если вы будете еще увеличивать количество разделов вашего сайта и вставлять графические изображения, то у вас может появиться и вертикальная полоса прокрутки (рис. 6.3).
Рис. 6.3. Фрейм с графическим изображением с полосами прокрутки
Управлять появлением полос прокрутки на экране можно с
помощью атрибута SCROLLING
тега <FRAME>
.
Возможные значения атрибута SCROLLING
:
SCROLLING=YES
- у фрейма всегда будут полосы
прокрутки, независимо от того, нужны они или нет;SCROLLING=NO
- у фрейма не будет полос прокрутки,
независимо от того, нужны они или нет;SCROLLING=AUTO
- у фрейма будут полосы прокрутки
только в случае необходимости.Поэкспериментируйте с полосами прокрутки в вашем файле index.htm:
<frameset cols="20%, 80%"
rows="*" frameborder="NO" border="0"
framespacing="0">
<frame src="menu.htm" SCROLLING=NO>
<frame src="home.htm" name="main">
</frameset>
Внимание
Старайтесь подбирать графические изображения так, чтобы они не были шире вашего левого фрейма. Количество разделов также надо рассчитывать так, чтобы они уместились на странице, и вам не понадобилось использовать полосу прокрутки!
Обратите внимание на то, что после установки атрибута SCROLLING=NO
в левом фрейме, где размещено графическое изображение, исчезла полоса
прокрутки. Но теперь мы не можем просмотреть изображение полностью.
Если вы не можете уменьшить изображение, лучше увеличить ширину левого фрейма:
<frameset cols="30%,70%"
rows="*" frameborder="NO" border="0"
framespacing="0">
Мы с вами рассмотрели использование вертикальных фреймов.
Можно ли расположить фреймы горизонтально? Конечно! Обратите внимание,
что для файла index.htm вы
использовали тег <FRAMESET COLS>
. Для создания
горизонтальных фреймов следует применять атрибут ROWS
тега
FRAMESET
.
Будем экспериментировать дальше. Создайте еще одну папку, НР2, в которую вы запишете следующий пример использования фреймов.
В программе Dreamweaver создайте новый документ, выберите команду Modify ► Frameset ► Split Frame Up (Изменить ► Набор фреймов ► Расположить фрейм сверху). Сдвинем среднюю горизонтальную границу вверх, чтобы верхний фрейм составлял примерно 15% высоты страницы, а нижний - 85%. Установим курсор в нижний фрейм и выберем теперь команду Modify ► Frameset ► Split Frame Right (Изменить ► Набор фреймов ► Расположить фрейм справа). Сдвинем среднюю границу вправо, чтобы нижний фрейм был разделен на две части, так что правая составляет примерно 20% ширины страницы, а левая - 80%. Затем сохраним набор фреймов (File ► Save Frameset (Файл ► Сохранить набор фреймов)) под именем index.htm - это будет наш главный документ. Далее сохраним все три второстепенных документа (File ► Save Frame (Файл ► Сохранить фрейм)). Слева у нас будет панель навигации по сайту - menu.htm, справа - home.htm, а верхний горизонтальный фрейм, используемый для заголовка сайта, назовем up.htm.
Код главного файла index.htm показан в листинге 6.2.
Листинг 6.2. Файл index.htm - страница из трех фреймов
<html>
<head>
<title>Сайт с тремя фреймами</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<frameset rows="50,*" cols="*">
<frame src="up.htm">
<frameset cols="150.*" rows="*">
<frame src="menu.htm">
<frame src="home.htm">
</frameset>
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
Далее действуйте по схеме, описанной выше: напишите названия разделов, установите ссылки и задайте все необходимые параметры, о которых вы также уже все знаете. В горизонтальном фрейме мы напишем название нашего информационного ресурса, и оно всегда будет находиться перед глазами посетителей сайта (рис. 6.4).
Рис. 6.4. Пример использования вертикальных и горизонтальных фреймов
В принципе, фреймы вы можете расположить и по-другому - все зависит от вашей фантазии!
Взгляните на конкретный пример использования фрейма. Зайдите на главную страницу веб-сайта Академического хора Российского химико-технологического университета (РХТУ): http://www.belti.msk.ru/chorus (рис. 6.5).
Рис. 6.5. Использование фрейма для создания панели навигации внизу страницы
Рис. 6.6. Еще одна страница сайта хора РХТУ
Внизу страницы вы видите панель навигации по сайту, расположенную во фрейме без отображения границы. На какую бы страницу этого сайта вы ни попали, эта панель будет постоянно оставаться внизу страницы, упрощая навигацию. Попробуйте убедиться в этом сами (рис. 6.6).
Задание. Создайте свой сайт с использованием
фреймов. Подумайте, в каком случае удобнее использовать атрибут TARGET=_blank
,
чтобы открывать новую страницу без фрейма, а когда фрейм выгоднее
оставить. Посмотрите, как это сделано на других сайтах.
Как отображать информацию в тех случаях, когда есть
вероятность того, что браузер пользователя не поддерживает фреймы? Чтобы
все увидели вашу страницу, следует воспользоваться специальным тегом <NOFRAMES>
.
Ниже показан шаблон страницы, использующей фреймы, и приведен текст для
тех пользователей, которые их не видят.
<FRAMESET>
...Здесь располагаются фреймы
</FRAMESET>
<NOFRAMES>
<BODY>
...Здесь располагается текст без фреймов
<BODY>
Вы можете также расположить какой-нибудь пояснительный текст в разделе, предназначенном для тех пользователей, которые не видят фреймов, например:
Чтобы увидеть фреймы, вам следует использовать более новую версию браузера.
Укажите адрес, где можно бесплатно получить эту версию программы, например http://www.freeware.ru.
Вам, конечно же, интересно узнать, что думают люди о вашей странице? Вы хотите дать объявление о том, что на вашем сайте появился новый раздел? Собрать необходимую информацию или разместить свою вам помогут гостевые книги и другие заполняемые формы. Вы также сможете предложить посетителям вашей страницы заполнить анкету или написать вам сообщение с помощью различных заполняемых форм.
Кстати, вы уже сталкивались с одной из заполняемых форм немного раньше, когда мы с вами говорили о заполнении анкеты на Mail.ru. Как вы помните, браузеры дают возможность пользователю заполнить форму, вводя текст в специально отведенные для этого поля с помощью клавиатуры. Чтобы начать печатать текст, необходимо дважды щелкнуть мышью на поле ввода или переместить внутрь поля курсор мыши.
Можно также, щелкая кнопкой мыши, установить флажки, выбирая из заранее подготовленного списка нужный элемент. После того как форма заполнена, следует щелкнуть на кнопке Послать запрос (Submit). Эта кнопка может называться по-другому. Некоторые программы предлагают вам выбрать необходимое из команд Записать, Я еще подумаю, Ни в коем случае! и т.д.
Теперь пришло время узнать, как же устроены эти формы, и познакомиться с ними поближе. Браузер посылает вашу информацию на указанный веб-сервер, который передает ее конкретным, специально предназначенным для обработки информации программам, которые называются CGI-программами, или CGI-скриптами (CGI - Common Gateway Interface), и создаются профессиональными программистами. После обработки сервер посылает браузеру ответ, который вы видите.
CGI-программы для обработки информации устанавливают на веб-сервер системные администраторы. Если вы убедились в необходимости установки такой формы на вашей веб-странице, проконсультируйтесь у администратора своего сервера, какие программы обработки информации там установлены и как ими пользоваться. Возьмите образец заполняемой формы и отредактируйте его в соответствии с вашими желаниями, используя специальные теги, о которых мы поговорим ниже. Затем попросите установить результат вашей работы на сервере.
Однако использование CGI для обработки информации не является обязательным, есть и другие способы. Например, введенная в форму информация может обрабатываться локально, без взаимодействия с сервером, средствами языка JavaScript, а данные из нее могут высылаться по электронной почте.
Посмотрим, с помощью каких тегов создаются простые заполняемые формы. Создайте файл form.htm, обращая внимание на выделенные полужирным шрифтом теги (листинг 6.3).
Листинг 6.3. Код страницы с заполняемой формой
<HTML>
<HEAD>
<TITLE>Простая заполняемая форма</TITLE>
</HEAD>
<BODY>
<h3>Простая заполняемая форма</h3>
<FORM METHOD=POST ACTION="mailto: katerina@belti.msk.ru"><BR>
<HR SIZE=3 ALIGN=Center>
<h4>Текст</h4>
<INPUT TYPE="text" NAME="name" SIZE="25">Пожалуйста, напишите свое имя:
<BR><hr SIZE=3 ALIGN=Center>
<h4>Кнопки (выбор ответов)</h4>
<H3><IMG SRC="1.gif" ALT="-">Почему вам нравится работать в сети Интернет?</Н3><br>
<INPUT TYPE="radio" NAME="choice 1" VALUE="information">Много интересной информации<br>
<INPUT TYPE="radio" NAME="choice 1" VALUE="pictures">Много картинок, аудио- и видеоинформации<br>
<INPUT TYPE="radio" NAME="choice 1" VALUE="communication">Общение с людьми<BR>
<INPUT TYPE="radio" NAME="choice 1" VALUE="free time">Способ проведения досуга<BR>
<INPUT TYPE="radio" NAME="choice 1" VALUE="Другое">Другое<BR>
<BR><HR SIZE=3 ALIGN=Center>
<h3><IMG SRC="red.gif" ALT="-">Вы используете Windows 2000</h3>
<INPUT TYPE="checkbox" NAME="choice 2" VALUE="Win95">Да<BR>
<BR><HR SIZE=3 ALIGN=Center>
<h2>Выбор ответов</h2>
<h4><IMG SRC="1.gif" ALT="-">Как вы оцениваете предоставление и содержание информации в Интернете?</h4>
<select NAME="choice 3" SIZE="5">
<option value="1" selected>Отлично
<option value="2">Хорошо
<option value="3">Средне
<option value="4">Ниже среднего
<option value="5">Плохо
</select><BR>
<BR><HR SIZE=3 ALIGN=Center>
<h2>Текст</h2>
<h4><IMG SRC="1.gif" ALT="-">Ваши комментарии, пожалуйста.</h4>
<TEXTAREA NAME="comment" R0WS=6 COLS=60>очень хорошо</TEXTAREA><BR>
<BR><HR SIZE=3 ALIGN=Center>
<h2>Послать информацию или отказаться</h2>
<INPUT TYPE="submit" VALUE="SUBMIT">
<INPUT TYPE="reset" VALUE="RESET">
</FORM>
</BODY></HTML>
Посмотрите, как эта страница выглядит на экране (рис. 6.7).
Для того чтобы сделать гостевую книгу или форум для своего сайта, можно воспользоваться готовыми скриптами. Главное - настроить их в соответствии с настройками вашего провайдера. Сам скрипт может быть написан на одном из языков программирования, применяемых в Веб: CGI, Perl, PHP, Java. Вам не обязательно знать эти языки, обычно к скрипту прилагается инструкция, которую вам надо обязательно прочитать и внимательно изучить, - в большинстве случаев там описано все необходимое!
Рис. 6.7. Пример заполняемой формы
По этим адресам вы найдете много бесплатных скриптов для вашего сайта:
Рис. 6.8. Готовые скрипты для гостевых книг и форумов
Карты бывают географические, игральные... Что же такое карты на веб-страницах? Помните, мы говорили, что гиперссылками может быть не только вся картинка, но и ее часть? Мы уже умеем вставлять в свои страницы большие изображения. Умеем делать это изображение якорем гиперссылки. Но представьте себе фотографию какой-то группы людей, например учеников вашего класса. Разве не заманчиво получить полную информацию о каком-нибудь ученике, просто щелкнув мышью на его изображении? Для того чтобы сделать различные части одного графического изображения гиперссылками на различные документы и используются карты ссылок (иногда их называют «карты-меню»).
Чтобы научиться творить такие чудеса, нужно овладеть технологией изготовления карт. Карта может выглядеть как настоящая географическая карта: щелкнете на кружочке, обозначающем город, и отправитесь на виртуальную экскурсию по нему. Она также может представлять собой набор кнопок или значков, нарисованных художником-дизайнером, или же список текстовых пунктов меню.
Вы можете использовать разные способы изготовления карт. Первый способ - использование специальных программ создания карт-меню. Например, программу Mac-Imagemap для обработки карт вы найдете по адресу http://weyl.zib-berlin.de/imagemap/rriac-imagemap.html.
Итак, во-первых, необходимо создать изображение, содержащее кнопки или иные приспособления для навигации. Во-вторых, разметить на этом изображении активные области, связывая с каждой областью некоторую веб-страницу, с помощью программ создания карт-меню. Когда разметка готова, реакция на щелчок мышью на данной карте-изображении будет зависеть от координат курсора в момент щелчка. На первый взгляд это выглядит достаточно просто. На самом деле существует ряд тонкостей, влияющих на производительность веб-сайта.
С помощью каких тегов изображение становится картой? Прежде
всего, это уже знакомый нам тег IMG
. Необходимо добавить к
тегу <IMG...>
специальный атрибут ISMAP
или USMAP
и пояснить, что данное изображение является
картой (map). Стандарт HTML 2.0 определяет только атрибут ISMAP
,
который предусматривает обработку щелчка на карте на веб-сервере при
помощи CGI-запросов, аналогичных применяемым для обработки заполняемых
форм. Давайте разберемся, как это происходит. Пусть, например,
изображение включено в документ следующим образом:
<А
HREF="http://www.test.test/cgi-bin/imagemap/example.map"><IMG
SRC="example.gif" ISMAP></A>
В тот момент, когда посетитель сайта щелкает мышью на карте, браузер посылает на сервер пару координат. Эти координаты определяют только точку на карте, а не выбор пользователя. При таком способе обработки координатных запросов читатель веб-документа должен щелкнуть на интересующей его точке и дождаться отклика сервера, прежде чем он хотя бы получит возможность узнать, соответствует данная точка какой-нибудь гиперссылке или нет. Пока пользователь ждет ответа, браузер посылает координаты точки щелчка CGI-программе, которая сравнивает их с файлом определения карты - стандартным текстовым файлом (map-definition file), определяющим форму и URL-адреса для активных областей карты. Таким образом, преобразование координат в URL-адрес - дело сервера. Щелчок на точке с координатами (в пикселях) 98,80 относительно верхнего левого угла изображения вызовет такой CGI-запрос:
http://www.test.test/cgi-bin/imagemap/example.map?98.80
,
где example.map - имя файла специального формата, в котором указано, какие области на карте являются якорями гиперссылок и на какие URL-адреса они ссылаются. Формат этого описания зависит от типа вебсервера. Недостатком этого подхода является медленная реакция на щелчок и дополнительная загрузка сетей и сервера. Но самый существенный недостаток - невозможность работы с документами, использующими ISMAP-карты, без обращения к веб-серверу.
Если вы захотите включить ISMAP-карту в свой документ, то вам придется узнать формат *.map - файла, поддерживаемого вашим сервером, а также попросить системного администратора разместить созданный вами *.map-файл в каталоге cgi-bin, который в системе UNIX, как правило, закрыт для обычных пользователей.
Существует также альтернативный механизм обработки щелчков
на карте самим браузером. Он поддерживается большинством современных
графических программ просмотра, например Netscape Navigator 2.0 и старше
и Internet Explorer 3.0 и старше. Карты такого рода определяются при
помощи атрибута USEMAP
. Карта-изображение также включается
в HTML-документ при помощи уже хорошо знакомого нам тега
<IMG>
. Но в данном случае, в отличие от рассмотренных ранее
«пассивных» изображений, при помоши атрибута USEMAP="#map1"
мы сообщаем браузеру, что он должен интерпретировать это изображение как
карту и искать информацию о его разбиении на активные области в
HTML-файле по символическому имени карты map1
. Имя карты
может состоять из латинских букв и цифр и не должно содержать пробелов;
прописные и строчные буквы различаются. Следует обратить внимание на
обязательный значок #
в атрибуте USEMAP="#map1"
.
Перед этим значком может находиться URL файла, если карта описана в нем
отдельно от файла того документа, с которым она используется (размещение
описания в отдельном файле практически не применяется). Описание
активных областей карты начинается тегом <МАР
NAME="имя_карты">
и заканчивается тегом </МАР>
.
Каждая область описывается при помощи тега <AREA
SНАРЕ="форма" COORDS="список координат"
HREF="url">
, где атрибут SHAPE
может
принимать одно из четырех значений:
rect
- прямоугольник;poly
- многоугольник;circle
- окружность;default
- «по умолчанию», то есть все части
изображения, оставшиеся не описанными явно.Атрибут COORDS
задает список координат.
Внимание
Все координаты отсчитываются в пикселях от левого верхнего угла экрана.
Для прямоугольной области x,y
- это координаты
левого верхнего и правого нижнего углов, для многоугольной - координаты
каждого из углов, для окружности - координата центра и радиус. Для
значения default
координаты не задаются, и атрибут COORDS
опускается. Атрибут HREF="url"
задает URL или
путь к файлу с документом, на который данная область рисунка ссылается.
Если вместо HREF="url"
записано NOHREF
,
то данная область не является якорем гиперссылки, и щелчок на ней будет
проигнорирован.
Рис. 6.9. Пример карты ссылок
Ознакомьтесь с примером карты, взятым с веб-сайта City.Ru (http://www.city.ru) (рис. 6.9).
Не забудьте посмотреть, как устроена эта карта, открыв исходный код (листинг 6.4) в Блокноте, используя в браузере команду меню Вид ► Просмотр в виде HTML.
Листинг 6.4. Файл, определяющий карту ссылок
<МАР NAME="ind">
<AREA SHAPE=RECT C00RDS="6,15,42,31" HREF="http://www.city.ru:8101/index-r.html">
<AREA SHAPE=RECT COORDS="48,15,85,31" HREF="http://www.city.ru:8100/index-r.html">
<AREA SHAPE=RECT COORDS="2,58,88,77" HREF="/nw.htm">
<AREA SHAPE=RECT COORDS="2,81,88,100" HREF="/central.htm">
<AREA SHAPE=RECT COORDS="2,104,88,123" HREF="/south.htm">
<AREA SHAPE=RECT COORDS="2,127,88,146" HREF="/ural.htm">
<AREA SHAPE=RECT COORDS="2,150,88,169" HREF="/Siberia.htm">
<AREA SHAPE=RECT COORDS="2,173,88,192" HREF="/fareast.htm">
<AREA SHAPE=RECT COORDS="2,200,88,219" HREF="/list.htm">
<AREA SHAPE=default HREF="/">
</MAP>
Как видите, формат описания карт ссылок на языке HTML
довольно прост. Но как же вычислить координаты областей гиперссылок на
рисунке, хранящемся в графическом файле, чтобы указать эти координаты в
атрибутах COORDS
? Именно этим и занимаются специальные
программы, о которых мы уже упоминали выше. Они значительно облегчают
разметку и даже автоматически генерируют описание карты.
Внимание
Следует дублировать все гиперссылки, созданные при помощи карт, обычными гиперссылками. Это связано с тем, что карты поддерживаются не всеми программами просмотра. К тому же, если тот или иной пользователь отключил загрузку изображений, карты так и не появятся на экране.
Второй способ создания карты ссылок - это использование графического редактора Adobe Image Ready.
Вам также надо сначала нарисовать или обработать графическое изображение, которое вы хотите сделать картой, в графическом редакторе Adobe Photoshop. Затем следует щелкнуть на специальной кнопке, расположенной внизу панели инструментов (рис. 6.10), которая перенесет вас с вашим изображением в программу Adobe ImageReady.
Рис. 6.10. Кнопка загрузки редактора Adobe ImageReady
Возьмите инструмент Slice (Фрагмент) и нарежьте на нужные кусочки ваше изображение. Каждый кусочек в дальнейшем станет ссылкой на другой документ (рис. 6.11).
Затем выберите команду File ► Save Optimized As (Файл ► Сохранить с оптимизацией). Программа сформирует HTML-документ и папку Image с графикой. Далее откройте этот документ, скопируйте таблицу, которую создаст программа, и вставьте ее в свой документ или же сразу используйте получившийся файл. Пример карты ссылок, созданной таким способом, вы можете увидеть по адресу http://tours.belti.ru/uhodovo/index.htm (рис. 6.12).
Рис. 6.11. Резка изображения на фрагменты в программе Adobe ImageReady
Рис. 6.12. Карта ссылок, сделанная с помощью редактора Adobe ImageReady
Помимо достоинств карты имеют небольшие недостатки, на которые следует обратить внимание. Во-первых, они замедляют работу сервера. Конечно, заглянуть в файл карты и извлечь оттуда URL не такая уж сложная операция. Но нужно учитывать число посетителей, которые щелкают на картах ссылок, и время обработки. Во-вторых, отсутствует обратная связь. Когда вы щелкаете на каком-то слове, которое является якорем гиперссылки, оно окрашивается в другой цвет. С картой-меню такого не происходит. Когда курсор мыши попадает на обычную гиперссылку, браузер показывает соответствующий URL. Когда же курсор перемещается по карте-меню, меняются только координаты после URL страницы. Но это не значит, что вам следует совсем отказаться от использования карт-меню. Тем не менее, прежде чем начать делать карту самостоятельно, попробуйте посетить несколько серверов, использующих карты, и посмотреть, что подходит для вашего собственного сайта.
Очень интересное графическое решение, которое может
украсить вашу страничку, - это бегущая строка. Но перед тем как
использовать ее, тщательно продумайте текст и место бегущей строки.
Тегом, создающим бегущую строку, является тег <MARQUEE>ТЕКСТ</MARQUEE>
.
На место слова ТЕКСТ
подставляется любое слово
или фраза, которую надо заставить бежать по экрану компьютера. Вот и
все. Самый простой вариант расположения текста в бегущей строке - когда
вставленная фраза появляется из-за правого края окна браузера и, пройдя
через всю страницу, скрывается за левым краем. Направление движения
бегущей строки можно менять. Для этого применяется специальный атрибут
направления.
В том случае, если бегущую строку нужно направить справа
налево, тег принимает вид <MARQUEE
DIRECTIONS=left>TEKCT</MARQUEE>
.
Тег сохранит движение слева направо, если использовать
значение right
атрибута DIRECTION
: <MARQUEE
DIRECTION=right>TEKCT</MARQUEE>
.
Чтобы задавать характер движения надписи по странице, применяется другая группа атрибутов:
scroll
- стандартное движение от правого края к
левому. Этот атрибут организует бесконечный цикл. Число циклов можно
ограничить, указав атрибут LOOP
, например:<MARQUEE
LOOP=n BEHAVIOR=scroll>TEKCT</MARQUEE>
. Значение n
атрибута LOOP
указывает число повторений цикла. В данном
случае, поскольку в тег включен еще атрибут BEHAVIOR
со
значением scroll
, надпись совершит стандартное движение от
правого до левого края веб-страницы три раза;slide
- надпись один раз пробегает от правого края к
левому и там остается;alternate
- движение от правого края страницы к левому
и обратно. Бесконечный цикл.Внимательно посмотрите, как выглядят теги бегущей строки с включенными в них атрибутами характера движения:
<MARQUEE BEHAVIOR=scroll>TEKCT</MARQUEE>
<MARQUEE BEHAVIOR=slide>TEKCT</MARQUEE>
<MARQUEE BEHAVIOR=alternate>TEKCT</MARQUEE>
Нет необходимости растягивать бегущую строку на всю ширину раскрытой веб-страницы, так как вы можете указать ширину участка, занимаемого бегущей строкой. Тег бегущей строки в этом случае приобретает вид:
<MARQUEE WIDHT=n>TEKCT</MARQUEE>
где n
- ширина той части страницы, на которой
расположена бегущая строка. Значение n
указывается как в
пикселях, так и в процентах от общей ширины видимой части страницы.
Для того чтобы регулировать движение надписи по экрану, указывается, какое число пикселов должен пройти текст надписи, чтобы снова появиться на экране:
<MARQUEE scrollamount=n>TEKCT</MARQUEE>
.
Здесь n
- число пикселов.
Для задания скорости указывается интервал времени, через
который текст будет перерисован на экране. В данном случае переменная
величина - время t
- измеряется в миллисекундах:
<MARQUEE scrolldelay=t>TEKCT</MARQUEE>
.
В заключение скажем еще несколько слов о внешнем виде пробегающей надписи. Например, есть возможность указывать величину шрифта текста в строке:
<FONTSIZE=n><MARQUEE>TEKCT</MARQUEE></FONT>
.
Можно окрасить поверхность бегущей строки в какой-либо цвет:
<MARQUEE BGCOLOR=n>TEKCT</MARQUEE>
где n
, как обычно при задании цвета, можно
указать в виде шестнадцатеричного числа или названия цвета на
английском.
Можно указать высоту бегущей строки, задавая величину n
в пикселях:
<MARQUEE HEIGHT=n>TEKCT</MARQUEE>
Задание. Вставьте в свою веб-страницу бегущую строку. Сделайте так, чтобы она была в тон цвету вашей странички или была контрастной. Надпись должна совершить стандартное перемещение от левого до правого края веб-страницы пять раз. Затем попробуйте проверить различные варианты цикличности движения строки и выберите оптимальный.
Итак, вы научились вставлять в свои страницы картинки,
таблицы, фреймы, бегущую строку. Скорее всего, вы уже встречались с так
называемыми «живыми», или анимированными картинками. Они являются
промежуточным звеном между статичными графическими изображениями и
настоящими мультимедийными файлами. Секрет их прост: в графический файл
в формате Animated GIF (.gif)
при помощи различных программ для работы с графикой, скажем Adobe
ImageReady или Weblmage, записывается несколько изображений или кадров,
а также время демонстрации каждого кадра и количество прокруток такого
мини-мультфильма. Ну а включить такое «живое» изображение в свою
HTML-страницу очень просто. Это делается точно так же, как с
обыкновенной картинкой, при помощи тега IMG
:
<IMG SRC="ani.gif">
.
Браузер, загрузив такой файл, приступает к демонстрации мультфильма, показывая кадр за кадром. Но по возможности не используйте их слишком часто и ни в коем случае не располагайте их кучно. Один мигающий символ может смотреться довольно неплохо, одно мигающее слово при определенных обстоятельствах может быть приемлемо, но когда мигают несколько слов подряд, такую страницу хочется поскорее закрыть. Старайтесь не перегружать свои сайты анимационными файлами - мелькание на вашей страничке может вызвать раздражение у посетителей.
Очень много красивых графических изображений, а именно кнопок, линий, картинок, «обоев», можно найти в Сети. Есть специальные серверы, которые предлагают это добро для всех и совершенно бесплатно! Некоторые адреса таких страниц даны в приложении к этой книге. Чтобы сохранить понравившееся вам изображение на своем жестком диске, надо всего лишь поместить на него указатель мыши, щелкнуть правой кнопкой и выбрать в появившемся меню пункт Сохранить рисунок как. Но все же старайтесь сделать свою страницу так, чтобы даже при использовании чужой графики она не потеряла свою индивидуальность.
Может быть, вы желаете поприветствовать посетителя своей страницы собственным голосом? Или же хотите разместить на вашем сайте речь президента и сделать это так, чтобы ваш посетитель услышал его голос? Нет ничего проще! Для этого необходимо добавить простой тег разметки:
<а href="file">...</a>
Разумеется, слово file
нужно заменить
названием файла, подготовленным в формате .wav:
<а href="prezident.wav">Послушайте президента! (90 Кбайт).</а>
Совет
Запомните, что нельзя злоупотреблять аудио- и видеофрагментами. Поскольку веб- страницы могут воспроизводить музыку в фоновом режиме, некоторые горе- экспериментаторы считают, что все должны быть в восторге от их любимой мелодии. Ох, как они ошибаются! Видеофрагмент тоже должен представлять интерес не только для вас. Иначе вы будете единственным человеком, который его просмотрит. Внимательно относитесь к выбору аудио- и видеофайлов.
Обратите внимание, что необходимо указать размер звукового файла в килобайтах! Работая со звуковыми файлами, не забывайте, что фрагменты звука должны быть короткими. Попробуйте самостоятельно объяснить это требование.
По такому же принципу добавляется видеоизображение, но используются файлы видеофрагментов в формате .avi (рис. 6.13).
Рис. 6.13. Использование видеоизображений
Если при загрузке чьей-либо веб-страницы в браузер вы становитесь свидетелем каких-то странных и непонятных событий, подчас наводящих на мысль о нашествии компьютерных вирусов, не пугайтесь.
Выглядит это примерно так: после паузы Netscape Navigator в нижней строке окна сообщает нечто вроде Applet ScrewUpThePage loaded, а затем там же появляется сообщение типа Applet ScrewUpThePage running. После этого в окне возникает какая-то жизнь (пустые черные или белые прямоугольники, некоторое количество текста, но окно может оставаться и пустым). Некоторое время ровным счетом ничего заслуживающего внимания не происходит. Проведя с полминуты в предвкушении захватывающего зрелища и устав от долгого ожидания, вы уже собираетесь навсегда покинуть разочаровавшую вас страницу, как вдруг в этих прямоугольниках появляются всевозможные движущиеся и неподвижные картинки, и на вас обрушивается каскад звуков из динамиков компьютера. Дальнейшие события зависят от того, что предлагает нам автор просматриваемой страницы, а также от ваших собственных действий. Процесс этот, правда, часто заканчивается «безвременной кончиной» этих самых прямоугольников, которые немеют, застывают и перестают реагировать на ваши отчаянные щелчки мышью и мощные удары по клавиатуре. При этом программа Netscape Navigator не упускает возможности выдать в строке состояния эпитафию типа Applet ScrewUpThePage exception: java. lang. Null Pointer Exception.
Бывает, что «прямоугольники» действительно поддерживают с вами некий осмысленный диалог, демонстрируют красивые видеоэффекты и ведут себя вполне пристойно. Вы также можете увидеть более простые и понятные эффекты, например изменения цвета кнопки, когда вы касаетесь ее курсором мыши, или же различные подвижные элементы графических изображений. Это достигается не анимацией графического файла, а использованием апплета.
Таким образом, апплеты заслуживают того, чтобы вы смогли представить себе их происхождение.
Вы можете брать уже готовые апплеты и использовать их в своем сайте. Например, хорошие апплеты предлагаются вам на сайтах Anfy Team Home Page (http://www.anfyteam.com/ln/russian/) и «Лучшие Java-апплеты» (http://www.caravan.ru/~javaapp/).
Рис. 6.14. Пример использования апплета
Зайдите на сайт http://www.caravan.ru/~javaapp/ (раздел Графика ► Fishy) и посмотрите, как выглядит апплет на языке HTML:
<applet code="fishy.class" width="300" height="225" name="fishy">
<param name="bkimage" value="bgnight.jpg">
<param name="bubblecount" value="20">
<param name="fishcount" value="5">
</applet>
А на экране вы увидите аквариум с симпатичными рыбками (рис. 6.14).
На этом же сайте вы получите подробную информацию о том, как надо переносить апплеты к себе на сайт и редактировать их (http://www.caravan.ru/~javaapp/vazhno.html).
Итак, с помощью каких тегов мы можем включить апплеты в
свой HTML-документ? Теги <APPLET>
и </APPLET>
обозначают начало и конец включения в страницу так называемого
Java-приложения, или Java-aапплета (Java-applet). Апплет представляет
собой компьютерную программу для включения в HTML-документы. Такая
программа пишется на языке программирования высокого уровня Java.
Браузер, встретив при загрузке страницы фрагмент HTML-текста,
промаркированного тегами <APPLET>
и </APPLET>
,
отводит в окне с документом прямоугольник с размерами (в пикселях),
определенными атрибутами WIDTH
и HEIGHT
, и
пытается загрузить файл с сервера. Имя такого файла, всегда имеющее
суффикс class, указывается при
помощи атрибута CODE
, а местонахождение - при помощи
атрибута CODEBASE
. При успешной загрузке файла браузер
запускает приложение, передавая ему значения параметров, заданные при
помощи атрибутов <PARAM NAME="..."
VALUE="...">
. Разумеется, речь идет только о
программах просмотра, поддерживающих Java. Если программа не
поддерживает Java или эта поддержка в ней отключена, то она игнорирует
теги <APPLET>
, <PARAM>
и </APPLET>
.
В таком случае вместо апплета на экран будет выведен рисунок из файла и
текст: Your browser does not support
Java applets. The image is shown.
Но это вряд ли случится, так как все последние версии
браузеров все-таки поддерживают Java. Хотя в Интернете все очень
динамично, например не далее как в начале 2003 года произошли некоторые
изменения в мире Java. Компания Microsoft полностью прекращает
разработку, поддержку и распространение Microsoft Java. Если Microsoft и
будет куда-либо включать Java, то это будет Sun Java. Поддержка Sun Java
будет осуществляться непосредственно фирмой Sun, a Microsoft этим
заниматься не будет. Но не волнуйтесь: если на вашем компьютере
установлено программное обеспечение для поддержки Microsoft Java, то оно
не будет удаляться. Однако будущие версии будут принудительно включать
Sun Java для обработки тега <applet>
. Вы можете сами
ознакомиться с этой информацией по адресу http://www.microsoft.com/windowsxp/pro/evaluation/news/jre.asp.
Итак, если ваш браузер поддерживает Java, то апплет начинает свою работу, выполняя задачи, предусмотренные его автором, и выводя результаты этой работы в выделенный прямоугольник в окне с веб-документом, запустившим этот апплет. Апплет может создавать свои окна, независимые от окна с HTML-документом, и выводить в них текст и изображения, проигрывать звуковые файлы и обмениваться информацией с веб-сервером. Как и любая компьютерная программа, работающая в графической среде, апплет способен воспринимать ввод пользователя с клавиатуры и манипуляции мышью. Кроме того, апплет может заставить браузер выполнить определенные действия, например загрузить тот или иной документ с веб-сервера.
Несмотря на наложенные ограничения, связанные с безопасностью при запуске приложений, потенциальные возможности апплетов весьма велики. Кроме ставшего уже традиционным рисования всевозможных красивых «живых» заставок на веб-страницах, апплет, не повышая при этом нагрузку на веб-сервер, может производить сложные вычисления, выводить на экран файлы в нестандартных специализированных форматах (например, трехмерные изображения, графики и т.п.), играть с пользователем в компьютерные игры и многое, многое другое.
Если вы заинтересовались языком Java, то более подробную информацию о нем, документацию и программное обеспечение для запуска Java-приложений на различных компьютерных платформах, а также набор средств для разработки собственных Java-программ можно получить совершенно бесплатно на сайте компании Sun http://java.sun.com/.
Когда мы создаем веб-страницы, нам всегда хочется сделать их просмотр более удобным и придать им некоторые дополнительные функциональные возможности, отсутствующие в языке HTML. Как это сделать? Наиболее часто средств стандартного HTML не хватает при создании интерактивных документов, заданным образом откликающихся на внешние события, например действия читателя или сигналы таймера. Фирма Netscape Corporation, создатель одного из самых популярных в настоящий момент браузеров Netscape Navigator, разработала специальный язык программирования JavaScript, поддержка которого включена в Netscape Navigator начиная с версии 2.0. Сейчас уже можно определенно сказать, что JavaScript скоро станет стандартом, поддерживаемым подавляющим большинством браузеров других фирм. Действительно, уж если корпорация Microsoft снизошла до включения интерпретатора этого языка в свой Internet Explorer 3.0, то JavaScript заслуживает самого пристального внимания.
Внимание
Несмотря на сходство названий, JavaScript и Java (о котором речь шла выше) - это два совершенно разных языка, созданных независимыми группами разработчиков.
JavaScript можно рассматривать как расширение HTML - фрагменты программ на JavaScript включаются непосредственно в текст HTML-документа и интерпретируются браузером при его загрузке. Java Script предоставляет следующие основные возможности:
Чтобы увидеть страницы, написанные с использованием JavaScript, необходимо пользоваться браузером, поддерживающим JavaScript. Предварительно убедитесь в том, что интерпретатор JavaScript не отключен. Подключить его можно следующим образом:
По JavaScript, так же как и по языку Java, имеется множество учебных пособий, как в печатном виде (например, книга Вадима Дунаева «Самоучитель JavaScript», выпущенная издательством «Питер» в 2003 году), так и в электронном, доступном через Сеть (http://www.webclub.ru/library/programming.html). Если вас заинтересовали эти языки, попробуйте самостоятельно найти описание и руководства к ним в Сети, используя различные поисковые системы и каталоги.
Существует множество подобных серверов на английском языке. Авторитетное справочное руководство по JavaScript, написанное самими разработчиками этого языка, доступно по адресу: http://home.Netscape.com/eng/mozilla/3.0/handbook/JavaScript/index.html.
В настоящее время, скорее всего, уже нет ни одного человека, который бы не слышал о флэш. Благодаря... Масяне. О ней пишут в газетах, ее показывают по телевидению. А ведь это не что иное, как мультфильм, созданный с помощью флэш-технологий. И, конечно же, если вы хоть раз играли в компьютерную игру, то помните ее заставку. Что-то ездит по экрану, выезжая и уезжая за его пределы, меняется цвет, слышится музыка, что-то лихорадочно мигает и вертится. Одни фрагменты сменяют другие. Эти заставки компьютерных игр очень похожи на те флэш-фильмы, которые сегодня можно увидеть на сайтах сплошь и рядом.
Давайте разберемся, что же такое флэш. В книге «Flash 4. Анимация в Интернете» Дерека Франклина и Брукса Паттона мы читаем, что «Macromedia Flash - это очень мощное и при этом простое в использовании средство создания анимированных проектов на основе векторной графики со встроенной поддержкой интерактивности». Флэш - это технология, объединяющая в себе средства создания графики, анимации и видеофильмов. Вы можете добавить на ваш веб-сайт анимационный ролик и озвучить его, и для этого совсем не обязательно уметь писать программы, потому что если вы создаете интерактивные веб-сайты с помощью Macromedia Flash, вам не нужно писать коды на JavaScript, Java или HTML.
У флэш-технологий много сторонников, но много и противников. С одной стороны, сайты, написанные при помощи флэш (можно создать собственный флэш-сайт, не имея представления о языке HTML), выглядят довольно забавно, если их сделал человек, умеющий хорошо рисовать и обладающий вкусом и фантазией. И конечно, флэш-объекты, включенные в обычные HTML-документы, могут оживить их и сделать более динамичными.
Рис. 6.15. Журнал для веб-мастеров: Все, что вы хотели знать о веб-дизайне
С другой стороны, флэш-ролик является особым элементом веб-страницы и его применение в Веб связано с некоторыми ограничениями:
Так что если применять флэш, то только в меру!
В Сети вы сможете найти различные руководства по изучению и использованию флэш-технологий как для начинающих пользователей, так и для опытных. Для начинающих в издательстве «Питер» выпущена книга П. Лапина «Самоучитель Flash MX», а для более продвинутых пользователей - книга Э. Уотролла, Н. Гербера «Эффективная работа: Flash MX (+CD)». Вы можете, например, обратиться на сайт «Flasher.ru. Международный клуб флэшеров» (http://www.flasher.ru) или http://www.webmascon.com - журнал для веб-мастеров (рис. 6.15), который мы очень рекомендуем вам почитать, а также поискать информацию на эту тему через поисковые системы.
Пользователь, раз уж ты добрался до этой строки, ты нашёл тут что-то интересное или полезное для себя. Надеюсь, ты просматривал сайт в браузере Firefox, который один правильно отражает формулы, встречающиеся на страницах. Если тебе понравился контент, помоги сайту материально. Отключи, пожалуйста, блокираторы рекламы и нажми на пару баннеров вверху страницы. Это тебе ничего не будет стоить, увидишь ты только то, что уже искал или ищешь, а сайту ты поможешь оставаться на плаву.