Списки определений:
Списки определений имеют следующий вид:
<DL> <DT> Термин <DD> Определение термина <DD> Определение термина <DD> Определение термина <DD> Определение термина </DL> |
Термин Определение термина Определение термина Определение термина Определение термина |
С элементом DL можно использовать атрибут COMPACT для установки более компактного размещения пунктов списка.
<DL COMPACT>
Именно так используется данный атрибут - никакие числовые значения ему не присваиваются.
Фрэймы. (в начало) |
С помощью фреймов Вы можете разделить экран Обозревателя на части. В результате человек, просматривающий страницу, может изучать одну часть страницы независимо от остальной части.
Обозреватель, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана. Например, вы можете построить страницу таким образом, что Ваш логотип будет зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь пролистывает обычным способом.
Именно в вестке страниц с помощью фреймов лучше всего использовать апплеты, т.к здесь можно сделать так, чтобы пользователь, заходя на Ваш сайт, загружал апплет меню (к примеру) только один раз.
Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL-страницы с фреймами и для чего нужны основные тэги и атрибуты:
-
<!--Файл Index.htm--> <HTML> <HEAD> <TITLE>Фреймы</TITLE> </HEAD>
<FRAMESET COLS="20%, 75%"> <FRAME SRC="menu.htm" NAME="main"> <FRAME SRC="base.htm" NAME="bases"> </FRAMESET>
<NOFRAMES> Установите себе Обозреватель, который поддерживает фреймы! </NOFRAMES>
</HTML>
В результате мы получим экран, разделенный на два окна. Левое окно занимает 20 процентов экрана и содержит страницу с названием menu.htm. Окно справа займет 75 процентов и отобразит файл base.htm. Пока у нас их нет, то при запуске index.htm Вы увидите только страницу с двумя пустыми фреймами. Заметьте, что правую страницу мы назвали bases (это важно). К тому же, как Вы успели заметить, наш файл index.htm не имеет тела <BODY>. Фреймовая структура находится между открывающим тэгом <FRAMESET> и закрывающим </FRAMESET>. Между тэгами <NOFRAMES></NOFRAMES> находится текст, который будет отображен пользователю, если его Обозреватель не поддерживает фреймы. Имейте в виду, что поддерживающий фреймы броузер проигнорирует все, что находится между тэгами <NOFRAMES> и </NOFRAMES>. И наоборот, не поддерживающий фреймы Обозреватель проигнорирует все, что находится между тэгами <FRAMESET> и </FRAMESET>. Код без фреймов можно поместить и в начало, и в конец страницы.
Теперь приступим к созданию меню - menu.htm:
-
<!--Файл menu.htm--> <HTML> <HEAD> <!-Здесь мы определяем базовый элемент: присваиваем методу target значение bases. А это означает, что ссылки, находящиеся в этом документе должны открываться в окне, которое имеет имя bases. Данное окно расположено у нас в правой части фрейма.--> <base target="bases"> <TITLE>Меню</TITLE> </HEAD> <BODY>
<H5 ALIGN="left">Наше меню:</H5> <a href="base.htm">Главная</a><p> <a href="http://lenininc.narod.ru/">LENIN INC</a><br> <a href="http://www.listsoft.ru/">ListSoft</a><br> <a href="http://www.msdn.microsoft.com/">Microsoft MSDN</a>
</BODY> </HTML>
Нам осталось создать файл base.htm, который может содержать любой текст, например:
-
<!--Файл base.htm--> <HTML> <HEAD> <TITLE>Главная страница</TITLE> </HEAD> <BODY>
<H1 ALIGN="CENTER">Новости сайта:</H1> Ничего нового...
</BODY> </HTML>
А вот и результат нашей работы:
Теперь давайте подробно рассмотрим тэги <FRAMESET> и <FRAME>.
В тэге <FRAMESET> задается количество рядов или столбцов ROWS и COLS соответственно, а также их размеры и расположение. Существует три способа задания их размера:
по пикселям - просто напишите высоту или ширину в пикселах.
процентами - пишите сколько процентов от окна Обозревателя вы хотите отдать фрейму и после цифр ставите знак % Также позаботьтесь чтобы все ваши проценты в суме составляли 100%.
звездочка - все оставшееся место в окне равняется значку *. Например вы можете написать 20%,20%,60% или 20%,20%,* и никакой разницы не будет.
В этом же тэге можно задать толщину разграничительной линии и окаймляющей рамки командами FRAMEBORDER="X" и BORDER="Y" где X и Y толщина в пикселях.
Синтаксис:
<FRAMESET COLS="величины" ROWS="величины">
В тэге <FRAME> задаются атрибуты для каждого фрейма персонально. Команда SRC задает имя файла который загрузится в этом фрейме. Команда NAME задает имя данного фрейма. Имя необходимо для того чтобы в последствии указать к какому фрейму использовать ссылку. Также в этом тэге можно задать величину граници фрейма за которую ничего кроме фона не может заходить. Это делается командами MARGINWIDTH="X" и MARGINHEIGHT="Y", где X и Y величина в пикселях. Существует иногда очень нужный атрибут SCROLLING, который позволяет задавать наличие полос прокрутки у фрэйма. Может иметь значения: YES, NO или AUTO. И конечно же следует упомянуть о атрибуте NORESIZE. Он позволяет создавать фрэймы без возможности изменения размеров. По умолчанию, размер фрэйма можно изменить при помощи мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность.
Синтаксис:
<FRAME SRC="URL" NAME="имя фрейма" MARGINWIDTH="величина" MARGINHEIGHT="величина" SCROLLING="yes|no|auto" NORESIZE>
Вот несколько примеров создания фреймов:
-
*
140
<FRAMESET cols="*,140"> <FRAME SRC="homepage.htm" NAME="frame1"> <FRAME SRC="menu.htm" NAME="frame2"> </FRAMESET>
100
*
<FRAMESET cols="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET>
100
*
<FRAMESET rows="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET>
*
60
<FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET>
*
45%
55%
<FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="45%,55%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> </FRAMESET> </FRAMESET>
*
15%
15%
70%
<FRAMESET cols="*,55%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET rows="15%,15%,70%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET> </FRAMESET>
50%
50%
50%
50%
<FRAMESET cols="50%,50%"> <FRAMESET rows="50%,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="homepage2.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame3"> <FRAME SRC="menu2.htm" NAME="Frame4"> </FRAMESET> </FRAMESET>
Я создал сайт. Что дальше? (в начало) |
Это, наверное, самый популярный вопрос, который возникает у начинающих WEB-прогриммистах. Ответ очень прост: Вам нужно найти хостинг! Хостинг - это место под сайт, которое предоставляют Интернет провайдеры. Хостинг бывает платным или бесплатным. Как правило бесплатный всегда со множеством ограничений, но для начала подойдет и такой:
http://narod.ru/ - Здесь предоставляют неограниченное дисковое пространство, готовые варианты дизайна, счетчики, статистику посещений, гостевую книгу, персональный форум, чат и почтовый ящик - ИмяСайта@narod.ru. В определенной среде Народ.ру пользуется активной нелюбовью (отчасти, от того, что здесь нельзя дать прямой ссылки на файл, расположенный на данном хостинге). Без поддержки наворотов - скриптов и т.п.
http://www.hut.ru/ - Здесь предоставляют неограниченное дисковое пространство, простой и легко запоминающийся адрес Вашего сайта: name.hut.ru. Вы можете использовать собственные PHP-скрипты, собственные cgi-скрипты, доступ к БД MySql, доступ к файлам .htaccess, .htpasswd, FTP-доступ и shell-аккаунт. Есть возможность использования директив SSI, доступ к лог-файлам, поддержка доменных имен второго уровня, удобный отдельный почтовый ящик, мощный сервер и быстрый канал.
http://boom.ru/ - Здесь предоставляют 50 Мб, быстрое создание страниц по готовым шаблонам, возможность редактирования страниц в режиме онлайн, доступ к файлам и папкам как через веб-интерфейс, так и по FTP, возможность использования на своем сайте гостевой книги, голосования, счетчиков посещений, а также других сервисов Mail.ru. Если Ваш сайт нуждается в большем дисковом пространстве Вы сможете подать заявку администрации сайта на предоставление Вам нужного количества мегабайт.
Естественно, компаний, предоставляющих хостинг, в сети достаточно много, поэтому не поленитесь поискать, может, найдете что-то получше.
Итак, Вы выбрали себе место под сайт, теперь нужно зарегистрироваться. В процессе регистрации Вас ознакомят с условиями Вашего проживания на хостинге компании. Все нужно внимательно прочитать или просто согласиться. После этого у Вас будет свой собственный сай. Нет смысла описывать работу с сайтом на хостинге т.к. она у всех компаний различна, к тому же там будут свои конструкторы, которые помогут Вам редактировать сайт, загружать файлы на сервер и т.п. Нужно только найти время и внимательно со всем ознакомится, а если что-то непонятно то связаться с тамашними администраторами по почте.
ГЛАВА 2 (в начало) |
Формы и сенсорные изображения (в начало) |
До сих пор мы обсуждали аспекты реализации Интернет-сайтов, практически не связанные с обменом данными с пользователем. Все, что он мог сделать, — это выбрать или не выбрать ссылку. На самом деле, язык HTML предлагает достаточно развитые возможности для интерактивного взаимодействия с клиентом. В данной главе мы изучим элементы, позволяющие получать информацию от клиента и отправлять ее на сервер для обработки.
Прежде всего, необходимо четко разграничить полномочия и обязанности элементов интерактивного обмена информацией.
Когда пользователь загружает Web-страницу в свой браузер, то, в соответствии с возможностями языка HTML, он может выполнить следующие действия:
1. Ввести некоторые данные в соответствующие поля на сайте.
2. Указать путь к некоторому файлу, для его последующей отправки.
3. Выбрать одно или несколько значений из представленных в форме, размещенной на странице.
После выполнения таких действий и нажатия кнопки для передачи, должна загрузиться новая страница, а данные определенным образом отправлены на сервер. Сам процесс отправки нас не должен интересовать, поскольку это уже прерогатива протокола передачи данных HTTP. Все, что необходимо обеспечить программисту, — это возможность свободы выполнения вышеуказанных действий пользователя. Разумеется, реализация этого происходит путем создания Web-страницы. Нужно отметить, что после отправки данные принимаются "на другой стороне" клиент-серверного взаимодействия самим Web-сервером, а затем в строго стандартизированном виде передаются программе-обработчику, которая была указана на Web-странице в качестве таковой.
Программист, который пишет серверный модуль, тоже избавлен от необходимости вникать во все подробности получения сервером информации от клиента. Эти аспекты находятся в поле ответственности создателя Web-сервера. Все, что сервер должен сделать, — это корректно считать данные в соответствии со спецификацией интерфейса обмена данными между сервером и программой (CGI — Common Gateways Interface), который будет подробно описан в следующей главе, сгенерировать новую страницу и отправить ее клиенту.
В данной главе будут рассмотрены аспекты создания Web-страниц с интерактивными возможностями. Несмотря на то, что реальная интерактивность подразумевает обработку полученных данных сервером, на этом этапе мы будем преследовать одну цель: научиться создавать такие страницы с расчетом на то, что, прочитав следующую главу, можно уже будет полностью реализовывать схему клиент-серверного взаимодействия (см. рис. 1.1).
Форма в языке HTML (в начало) |
Поскольку понятие формы, как элемента HTML, имеет принципиальное отличие от его значения в Delphi, где под формой понимается окно приложения, то необходимо делать различия между этими двумя элементами. В данной главе мы будем вести разговор только о формах HTML. Итак, что же такое форма?
Форма — это элемент разметки Web-страницы, который может содержать в себе различные интерактивные элементы, определяемые спецификацией. Пример формы приведен в листинге 7.1.
Листинг 7.1. Пример описания формы в теле страницы
<HTML>
<МЕТА http-eguiv="Content-Type" content="text/html; charset=windows-1251">
<ТIТLЕ>Пример формы</ТIТLЕ>
<BODY>
<Р> Это форма, в которой предусмотрено поле для ввода текста, а также кнопки для отправки данных и сброса введенных значений
<Р>
<FORM method="post" action="http://www.server.com/scripts/modulel.exe">
<TEXTAREA style="WIDTH: 257px; HEIGHT: 90px" name="Info" rows=ll cols=42>
В это поле вводится текст </TEXTAREA>
<Р> <INPUT type="submit" value="Submit" name="Sub">
<INPUT type="reset" value="Reset" name="Res">
</FORM>
</BODY>
</HTML>
Листинг 2.1 имеет отображение в браузере, приведенное на рис. 2.1.
Область кода страницы, содержащая интерактивные элементы, начинается с тега <FORM>, в атрибутах которого находится информация о методе отправки данных и адресе серверного модуля, используемого для обработки данных. Метод отправки данных влияет лишь на работу серверного модуля, а значит, пока этого атрибута мы касаться не будем, полагая его равным post. В значении атрибута action должен указываться URL-адрес программы-обработчика пользовательских данных.
Следом за открывающим тегом могут быть размещены уже изученные и интерактивные элементы языка HTML.
В приведенном выше примере используется элемент TEXTAREA, позволяющий вводить несколько строк текста, и две кнопки, с зарезервированными значениями типов: submit и reset. Первый тип означает, что после нажатия на эту кнопку, данные, содержащиеся в элементах формы, будут отправлены на сервер, по указанному выше пути, а второй — что все состояние элементов формы будет сброшено до начального. То есть, если пользователь введет в форму некий текст, а затем нажмет кнопку reset, то в поле TEXTAREA введенный пользователем текст будет уничтожен и опять появится надпись "В это поле вводится текст".
После описания всех интерактивных элементов в HTML-документе форму нужно закрыть тегом </FORM>.
Таким образом, на Web-странице могут создаваться блоки, представляющие собой удобные структуры для ввода данных, на базе которых строится клиент-серверное взаимодействие в среде WWW (справедливости ради следует заметить, что это не единственный, хотя и самый распространенный способ отправки данных клиента).
Для ввода и отправки данных предусмотрено несколько элементов языка HTML, и для удобства и ясности материала мы будем описывать их, исходя из их функционального назначения.
Поле для ввода строки текста (в начало) |
Такое поле внутри формы задается сочетанием элемента и атрибута, приведенным в листинге 2.2.
Листинг 2.2. Пример описания поля для ввода строки
<FORM action="myscript.exe" method="Post">
<INPUT type="text" name="sometext" size="20" maxlength="25">Sometext
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
В приведенном листинге кроме описания поля присутствует также элемент отправки данных (в данном случае — кнопка). Его присутствие обязательно.
Атрибут type определяет тип элемента для ввода. В случае строки, его значение должно устанавливаться в text.
Атрибут name определяет уникальное имя элемента, что в последующем позволит серверному модулю установить принадлежность полученных данных именно к этому полю ввода данных.
Атрибут size задает ширину поля (количество символов, отображаемых на экране).
Maxlength ограничивает максимальное число символов, которое может ввести пользователь. Как и предыдущий параметр, не является обязательным.
Поле для ввода пароля (в начало) |
Это поле внутри формы задается приведенным в листинге 2.3 сочетанием элемента INPUT с атрибутом type, равным password. Роль данного элемента заключается лишь в замене на экране вводимых символов звездочками. При этом при передаче по сети информация никак не защищается.
Листинг 2.3. Пример определения в HTML-документе поля для ввода пароля
<FORM action="myscript.exe" method="Post">
<INPUT type="password" name="somepass" size="20" maxlength="25">
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
Роль атрибутов элемента password аналогична элементу text.
Выбор одного или нескольких значений из определенных на странице
Для пометки нужных сведений флажками используется элемент checkbox, (листинг 2.4).
Листинг 2.4. Пример использования элемента checkbox
<FORM action="myscript.exe" method="Post">
<Р>Я люблю...<Р>
<INPUT type="checkbox" name="fruct" value="apple">Яблoки
<INPUT type="checkbox" name="fruct" value="0range" checked>Aпeльcины
<INPUT type="checkbox" name="fruct" value="Lime" checked disabled>flMMOHH
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
Обратите внимание, что группа этих флажков помечена одним именем fruct, в то время, как каждый из них имеет свое уникальное значение. Атрибут checked означает, что по умолчанию данный флажок уже выбран, а disabled — изменение состояния недоступно. На сервер отправляются значения, указанные в поле value, а не значения, следующие после указания тега и отображаемые на экране.
Выбор одного значения из нескольких (в начало) |
Для обеспечения такой возможности применяется элемент Radiobutton. Его использование аналогично предыдущему, за исключением того, что свойство checked может быть установлено только у одного элемента и значение надписи каждой позиции элементов хранится в атрибуте value (листинг 2.5).
Листинг 2.5. Пример использования элемента Radiobutton
<INPUT type="radio" name="fruct" value=" Яблоки"> .
<INPUT type=" radio" name="fruct" value=" Апельсины" checked>
<INPUT type=" radio" name="fruct" value=" Лимоны" >
Элемент ввода текста (в начало) |
Описывается в теле документа тегом <TEXTAREA> (листинг 2.6). Служит для отправки больших объемов текстовой информации и, при необходимости, может иметь полосы прокрутки.
Листинг 2.6. Пример использования элемента ТЕХТАКЕА
<FORM action="myscript.exe" method="Post">
<Р>Опишите свои впечатления<Р>
<TEXTAREA name="minds" rows="200 px" cols="300 px"> </TEXTAREA>
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
Атрибут rows означает высоту, a cols — ширину поля ввода. Если между открывающим и закрывающим тегами поместить текст, то он будет отображаться на экране по умолчанию. Возможна установка свойства readonly, делающего редактирование поля невозможным.
Выпадающее меню (в начало) |
Для реализации этого элемента служит конструкция, приведенная в листинге 2.7.
Листинг 2.7. Пример реализации выпадающего меню
<FORM action="myscript.exe" method="Post">
<Р> Какая у вас сейчас погода?<Р>
<SELECT name="sel" size="l" >
<OPTION name="good">Xopoшая</OPTION>
«OPTION selected name="bad" >Плохая</ОРТ10Ы>
<OPTION>He скажу</ОРТЮЫ>
</SELECT>
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
В рассмотренном примере атрибут size как раз и устанавливает форму элемента, как выпадающего списка (значение этого атрибута равно 1). Внутри тегов <OPTION> задаются возможные значения для выбора. Если тег <OPTION> содержит атрибут selected, то это значение будет установлено по умолчанию. При отсутствии атрибута name, в качестве выбранного значения, на сервер отправляется текст между открывающим и закрывающим тегами <OPTION>.
Организация меню (в начало) |
В случае, когда значение атрибута size элемента SELECT установлено больше единицы, то вместо выпадающего списка создается меню с числом одновременно отображаемых строк равным SIZE и пунктами, указанными с помощью тегов <OPTION> (листинг 7.8). Атрибут multiple разрешает одновременно выбирать несколько пунктов.
Листинг 2.8. Пример создания меню
<SELECT multiple name="sel" size="3" >
<OPTION name="good">MoM город уютный</ОРТ10Ы>
«DPTION selected name="bad" >Мой город красивый</ОРТЮЫ>
<OPTION> Мой город тихий</ОРТION>
</SELECT>
Скрытые элементы (в начало) |
Поскольку далеко не всегда удобно сохранять информацию, которая неизбежно накапливается в клиент-серверном обмене данными на стороне сервера, в языке HTML присутствует тип элемента INPUT, позволяющий сохранять значения, которые никак не отображаются на Web-странице, но отправляются вместе с содержимым запроса. Это так называемый скрытый элемент hidden (ЛИСТИНГ 2.9).
Листинг 2.9. Использование элемента hidden
<FORM ..описание параметров формы...>
...элементы формы...
<INPUT type="hidden" name="somename" value="somevalue">
...элементы формы...
</FORM>
Выбор файлов для отправки на сервер (в начало) |
Для указания пути к файлу и последующей его загрузки на сервер используется конструкция, приведенная в листинге 2.10.
Листинг 2.10. Реализация отправки файлов на сервер
<INPUT type="file" enctype="multipart/form-data" name="fl" value="c:\autoexec.bat">
Атрибут value устанавливает путь и имя файла по умолчанию, a enctype — тип передаваемых данных. В остальных элементах форм этот атрибут можно не использовать. Вместе с полем для ввода расположения и имени файла появляются кнопки обзора для поиска файла и отправки.
Кнопки (в начало) |
Кроме уже отмеченных стандартных кнопок Submit и Reset, существует возможность использовать на Web-странице и другие кнопки. Однако, для того чтобы при нажатии на кнопку совершалось определенное действие, необходимо использовать скрипты, что выходит за рамки излагаемого в данной главе материала, и поэтому не будем останавливать на этом внимание.
В качестве управляющих кнопок формы, можно использовать графические картинки, загружаемые из определенных файлов.
Заменим стандартную кнопку submit на изображение из файла (листинг 2.11).
Листинг 2.11. Использование картинок вместо стандартных кнопок
<BUTTON name="submit" value="Submit" type="submit">
Отправить<1МС src="filename.gif" value="Отправить"></ВОТТON>
Как видим, в приведенном примере вместо тега <INPUT> использовался тег <BUTTON>. Это более общее описание кнопок и при указании значения атрибута type равным submit или reset описанные кнопки могут использоваться вместо стандартных для отправки и/или сброса содержимого формы. Приведенный в листинге 7.11 пример демонстрирует, как вместо кнопок в при-вычом понимании используются картинки для потверждения отправки содержимого формы.
Навигационные карты (в начало) |
Очень часто бывает необходимо предусмотреть различные варианты поведения серверного модуля в зависимости от того, по какой части изображения, загруженного в Web-страницу, щелкнул мышью пользователь. Это можно реализовать с помощью сенсорных изображений (навигационных карт).
Язык HTML предусматривает два способа реализации этих возможностей: с использованием клиентских и серверных карт.
Клиентские карты представляют собой картинку и информацию о том, какие части изображения соответствуют каким ссылкам. Вся картинка как бы "нарезана" на несколько фрагментов, каждому из которых соответствует определенная ссылка. Причем, изображение загружается из одного графического файла, и ему соответствует текстовое описание его фрагментов.
Серверные карты — это обычные изображения, но если к ним подвести указатель мыши и щелкнуть им, то автоматически на сервер будет отправлен GET-запрос с указанием в качестве параметров координат указателя. Пример серверной карты приведен в листинге 2.12.
Листинг 2.12. Пример серверной карты
<HTML>
...тело документа...
<А href="someurl"><IMG src="somegraph.jpg" ismap></A>
...продолжение документа...
</HTML>
Как видим, включение серверной карты в документ аналогично помещению изображения в качестве визуализации ссылки, но здесь должен присутствовать параметр ismap, указывающий браузеру на то, что при переходе по ссылке на сервер должны быть отправлены координаты указателя мыши в момент нажатия ее клавиши. Координаты передаются относительно левого верхнего угла изображения.
Для работы с клиентскими картами необходимо "нарезать" изображение на области, каждой из которых присвоить свою ссылку. Делается это посредством описания нескольких геометрических фигур: прямоугольника, многоугольника или круга.
Мы можем присвоить каждому участку изображения свою ссылку. Для этого необходимо включить в HTML-код описание клиентской карты и ее участков (листинг 2.13).
Листинг 2.13. Описание клиентской карты
<P><IMG src="ris.gif" usemap="#mymap"> <MAP name="mymap">
<A href="filel.htm" shape="rect" coords="48,60,339,191">Ссылка №1</А> <A href="file2.htm" shape="circle" coords="217,476,145">Ссьлка №2</A> <A href="file3.htm" shape="poly" coords=
"432,258,601,411,522,520,621,635,917,646,1009,
457,928,263,818,312,700,141 ">Ссылка №3</А>
<A href="fil4.htm" shape="default">Bcя область</А> </MAP>
Таким образом, в тексте HTML-файла были описаны 3 геометрические фигуры и ссылка, относящаяся ко всей остальной области. В качестве параметров четырехугольника (rect) выступают координаты левого верхнего и правого нижнего углов относительно левого верхнего угла изображения. Сначала указывают координату X, а затем Y. Параметрами многоугольника выступают последовательные координаты его вершин, а круга — сначала координаты центра, затем — радиус. Разумеется, разметка клиентской карты определяется задумками Web-мастера, а не содержимым графического файла.
Существуют и иные способы описания клиентских карт, которые подробно описаны в спецификации языка HTML.
Слои (в начало) |
Вот такой эффект можно получить, используя слои. Собственно, точно такого же эффекта можно достичь и одним из множества фильтров Ехплорера, но второе решение будет отображаться правильно только в самом Ехплорере.
Итак, что же из себя представляет слой?
Код слоя:
<div id="имя слоя" style="position:absolute; left:204px; top:143px; width:171px; height:62px; z-index:2">содержимое слоя</div>
id - это индивидуальное имя слоя, совпадать и повторяться оно не должно!
style - это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста - без главных особенностей, присущих слоям - таких, как расположение поверх чего угодно.
left - расстояние от левого края: может быть как в пихелях, так и в процентах от общей ширины экрана.
top - расстояние от верха.
Ну, ширина и высота вам уже известны, их не упоминаю.
z-index - значение может быть только цифрой. Причем, чем меньше эта цифра, тем выше находится слой по отношению к другим слоям.
Казалось бы, дизайн, построенный на слоях, намного удобнее и проще, чем дизайн на банальных таблицах, но есть нюансы, как положительные, так и отрицательные.
В числе положительных:
удобство для дизайнера - большая свобода и больше эффектов.
быстрее загрузка и не ждать закрытия замыкающего тега.
удобнее манипулировать их содержимым
отрицательные стороны:
сложно подстраиваться под меняющееся разрешение монитора. И еще сложнее делать такой дизайн гибким - чтобы ширина слоя менялась сообразно ширине окна. Это, конечно, можно сделать при помощи весьма громоздкого скрипта, но... второе преимущество из списка положительного мы теряем.
поисковики... многие последовательности тегов, как ни вопят владельцы поисковых машин - а находятся хуже! Вывод - будь проще, и к тебе потянутся.