HTML (часть 2)
открыть в окне броузера - не один, а сразу несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и content.html - документ с непосредственным содержанием нашего сайта).
Это можно использовать по разному: некоторые дизайнеры при помощи фреймов воплощают свои сумашедшие задумки и повергают в восхищение публику, некоторые используют фреймы, потому что их сайту просто не возможно без фреймов обойтись, а некоторые используют фреймы, потому что им так удобнее - это все хорошо, главное, чтобы оно не смотрелось ужасно и некрасиво и было удобно для вашего посетителя (прим.).
Итак, для того, чтобы наш любимый броузер показал одновременно несколько документов, надо создать специальный фрейм-документ, в котором мы укажем сколько документов откроется в одном несчастном окне броузера, сколько места будет занимать каждый, каким образом они будут располагаться (не все так просто, как хотелось бы:).
Т.к. первый документ на сайте, который показывается посетителю это index.html (или вроде него), то мы его и будем мучать, пусть он будет фрейм-документом. Создадим документ index.html:
<html>
<head>
<title>Хождение по фреймам</title>
</head>
</html>
На первый взгляд - вполне стандартное начало, только вот... опа! нет тэга body! И это не ошибка, фрейм-документ не содержит тэга body, такого обязательного в других случаях.
Что ж, не будем грустить о тэге body, и найдем ему вполне достойного заместителя:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset></frameset>
</head>
</html>
Здравствуйте Frameset, какое красивое имя, говорят, что вы решили изменить кое-что в жизни нашего сайта и ввести фреймы :), очень приятно, мы всегда рады новым и практичным решениям.
Теперь надо найти frameset достойных помощников и задать ему некоторые жизнено необходимые параметры, но это на следующей ступеньке.
Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Предлагаю классический вариант - logo.html, menu.html, content.html - о котором я упоминала в предыдущей главе.
Итак, сначала создадим такой вариант:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
</frameset>
</head>
</html> (прим.)
Теперь мне следует объясниться...
Начнем с параметра rows - в нашем примере это выглядит так: rows="100,*,150" - а если перевести, то мы получим следующее - "... наш документ делиться на несколько рядов (строк). Высота первого ряда - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство", - полагаю, здесь должно быть все ясно.
Тэг frame сообщает броузеру какие же документы у нас будут в каждом ряду (строке). В нашем случае: первый ряд - logo.html (документ с логотипом), второй ряд - займет документ с непосредственным содержанием (content.html), а третий - меню. Если вы хотите, чтобы меню было во втором ряду, то вам следует поменять его местами с content.html
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Посмотрите что у нас получилось. Опаньки... Поменять-то мы их местами - поменяли, а вот теперь надо задать новые значения параметру rows, чтобы меню у нас снова занимало только 150 пикселов по высоте, а содержание - все остальное:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,150,*">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Вот теперь другое дело:) Все-таки от перемены мест слагаемых кое-что меняется...
Эту главу мы начнем с небольшого фокуса: замените параметр rows, на cols -
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,150,*">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Ну-ка, посмотрите наш пример. Ловкость рук и никакого мошенства :)
Параметр cols делит окно нашего броузера не на ряды, а на колонки. Давайте переведем это - cols="100,150,*": "...наш документ теперь делится на колонки. Первая колонка имеет ширину - 100 пикселов, вторая - 150, а третья занимает все оставшееся место".
Кстати, мы получили еще один из четырех вариантов, которые собирались сделать:
Итак, подведем итоги. Мы можем делить окно нашего броузера либо на ряды, либо на колонки, с помошью параметров тэга <frameset> Cols и Rows. Другого способа деления не существует. Одновременно эти параметры использовать нельзя.
При помощи rows мы разбиваем окно на ряды и задаем какую высоту будет иметь каждый ряд, при помощи cols разбиваем окно на колонки и задаем какую ширину будет иметь каждая колонка.
Кстати, ширина и высота могут задаваться не только в пикселях, но и в процентах от общей ширины (высоты) окна:
<frameset cols="10%,15%,75%">
Помните, что в сумме это все должно равняться 100%. А то бывают же умники...
В этой главе мы разберемся, как расположить документы в окне следующим образом:
или
В предыдущей главе я сказала, что мы можем делить окно только на ряды или колонки. Тогда как же расположить наши документы в окне так, как указано на рисунках? А разве я говорила, что ряд в свою очередь нельзя разбить на несколько колонок, а колонку на несколько рядов? Нет, не говорила :Ъ.
Каким образом мы будем делить окно? - На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на две колонки, в которых будут располагаться документы menu.html и content.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<???>
</frameset>
</head>
</html>
Принцип построения ясен, только вот как обозначить ряд, разбитый на две колонки? Тут нам поможет господин Frameset.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</head>
</html> (прим.)
Для тех, кто не уследил за движениями моих рук, поясняю. Первый ряд мы оформили как положено, при помощи тэга frame. Во втором ряду на сцену выгодит тэг <frameset></frameset>.
С помощью параметра cols тэга <frameset></frameset> мы делим второй ряд на две колонки (первая шириной 150 пикселов, вторая по ширине занимает все оставшееся пространство). А тэги <frame>, которые содержит <frameset></frameset> определяют какие документы будут показаны в колонках (menu.html и content.html).
Здесь мы будем делить окно на колонки. Вторая колонка будет содержать в себе документ content.html (содержание), а первую колонку мы разобьем на два ряда, и поместим в них документы logo.html и menu.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Вот так. Ничего сложного здесь нет:)
Допустим, мы решили остановиться на последнем варианте, значит будем приводит это в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме с logo.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Scrolling - параметр тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появиться только тогда, когда она нужна.
Собственно, параметр scrolling="auto", можно не прописывать, т.к. если параметр scrolling не задан, то полоса прокрутки появиться, если она нужна, а если нет - ее не будет.
Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым мы раньше уже встречались. Итак, border="0".
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Так уже лучше :). Но все же, что-то еще хочеться исправить... А! Картинку с чёртом так и хочется прижать в левый верхний угол:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Прижали. Теперь давайте познакомимся с параметрами тэга <frame> marginheight и marginwidth.
Marginheight определяет ширину (в пикселах) верхнего и нижнего полей фрэйма, а marginwidth определяет ширину левого и правого полей фрэйма. В нашем примере мы избавились от полей во фрейме, содержащим logo.html, задав значение marginheight и marginwidth равное нулю.
Вот такие пироги:) Остальное будет на других ступеньках.
В этой главе мы поговорим о том, что становиться проблемой для каждого человека, начинающего осваивать фреймы.
Итак, обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме. А нам бы надо сделать так, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать?
Для начала, господа, познакомьтесь с новым параметром тэга <frame> - name. Пустим name в дело:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html" name="window-1">
</frameset>
</head>
</html>
Параметр name задает имя для фрейма (в нашем случае для того, который содержит документ content.html).
Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью параметра тэга <a> target (target="имя_фрейма").
Как это выглядит? Обратимся к документу menu.html.
<html>
<head>
<title>Документ с Меню</title>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html">Главная</a>
<a href="tumki.html">Тумки</a>
<a href="bumki.html">Бумки</a>
<a href="tururumki.html">Турурумки</a>
<a href="tra-la-la.html">Траляля</a>
</center>
</body>
</head>
</html>
Вот такой он, в нашем случае. Теперь для каждой ссылки укажем параметр target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).
<html>
<head>
<title>Документ с Меню</title>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html" target="window-1">Главная</a>
<a href="tumki.html" target="window-1">Тумки</a>
<a href="bumki.html" target="window-1">Бумки</a>
<a href="tururumki.html" target="window-1">Турурумки</a>
<a href="tra-la-la.html" target="window-1">Траляля</a>
</center>
</body>
</head>
</html> (прим.)
Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает, при этом мы не приложили никаких особых усилий, а только изменили немного два документа :).
Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top:
<a href="project.html" target="_top">Мой проект о рыбках</a>
Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы).
Вот мы добрались и до последней главы о фреймах. Здесь мы поговорим об IFrame - "плавающем" фрейме и вы получите несколько полезных ссылок напоследок.
Я не буду рассказывать, как делается IFrame (т.к. "плавающие" фреймы поддерживаются только IE), я лишь расскажу, что это такое.
Итак, IFrame - "плавающий" или встроенный фрейм. Пользователи Интернет Искплорер, наверное, много раз встречали его на различных сайтах. Это очень удобно, поэтому некоторые создатели страниц (сайтов) позволяют себе забыть о пользователях Несткейпа, и я их прекрасненько понимаю.
Зайдите на Дефорум.ру. На заглавной странице Новости сделаны при помощи IFrame. Т.е. мы видим, что IFrame позволяет нам вставить в наш документ, другой документ (в нашем примере документ с новостями), мы можем раположить встроенный фрейм по отношению к другим элементам документа (тексту и картинкам) как нам хочется (IFrame имеет фиксированные, неизменяющиеся размеры, поэтому ничего никуда не уползет и не раcширится), и мы также видим, что IFrame - это действительно очень удобно.
Что? Я виду досаду на твоем лице читатель :), тебе хочется узнать как создавать такую замечательную штуку, и ты думаешь, что в этот раз я могла бы отступить от принципа "видно подо всем". Нет уж. Я не особо вредная, но в этот раз буду, не сколько из принципа, сколько мне хотелось бы, чтобы читатель начал сам искать разную информацию по теме, ведь я в учебнике могу дать только основу и дополнительный материал ввиде ссылок и примечаний, а более глубоко придется все же погружаться самим.
Теперь обещанные ссылки:
- Страшный всемирный заговор - почему фреймы не так страшны
- Я люблю фреймы
- Фреймы как альтернативное средство навигации
- Встроенные фреймы : элемент IFRAME
На этом повествование о фреймах закончено, дальше пойдут Дополнительные главы.
На ступеньке 8-ой мы говорили о разных способах выделения текста (курсиве, полужирном шрифте, подчеркивании и других). Эту главу вы можете считать своеобразным продолжение 8-ой главы.
Какие же еще теги определяют стиль шрифта, используются для его форматирования? Это - Big, Small, Strike (или S), Sub и Sup.
1) Big представляется крупным шрифтом, а Small малым шрифтом относительно основного текста:
<small> Малый </small>
Нормальный текст
<big> Большой </big>
2) Тэги Strike и S представляют текст перечеркнутым шрифтом:
<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>
Какая разница между S и Strike? Да никакой. Просто один из них появился в более ранней спецификации, а другой в более поздней, но оба они имеют право на жизнь.
3) Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub - нижний. Где они могут пригодится? Ну, например при написании какой-нибудь формулы - H2O (все, что мы выносим со школьной скамьи:).
Верхний индекс <sup>sup</sup>
Нижний индекс <sub>sub</sub>
Еще в самом начале обучения, в самых первых главах, я говорила о тэге Br, который осуществляет принудительный перевод текста на другую строку (т.е. аналогичен нажатию клавиши Enter, когда мы форматируем текст в обычном текстовом редакторе).
В этой главе мы поговорим о параметре тэга Br - Clear. Зачем он нужен? Допустим текст обтекает какой-либо объект (например, картинку):
А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам. "Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."
Нам нужно, чтобы текст после слов "к моим гранитным ногам" обрывался, и "кушай, великий предок" - уже продолжалось под картинкой. Вы, конечно, можете ввести несколько тэгов br и решить эту проблему. Но если вдруг картинка (объект) будет большой, текста много, то тут вы уже явно не обойдетесь несколькими br, тут вам придется употребить их с десяток и больше. Так вот, чтобы вам не пришлось мучатся в таких ситуациях, и существует параметр clear:
А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.
"Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."
Теперь пример кода:
<img src="clearpri.gif" align="left">
А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.
<br clear="left">
"Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."
У параметра clear существует несколько значений - all, left, right.
All - завершить обтекание объекта текстом. Left - завершить обтекание текстом объекта, выровненного по левому краю. Right - завершить обтекание текстом объекта, выровненного по правому краю.
В нашем примере мы задали clear="left", т.к. наша картинка выровнена по левому краю.
Вот и вся премудрость. Текст примера - это отрывок из стихотворения "Первый!" одного моего знакомого, который в виртуальной реальности величает себя Мирзавчиком, не имеет никакого отношения к нашему обучению, и упомянут лишь из уважения к авторскому праву.
Мы уже говорили о картинках и том, как картинку сделать ссылкой. Вы, наверное, также знаете, что можно сделать так, чтобы при нажатии на разные области (части) одной и той же картинки, вы попадали на разные страницы, это называется - навигационная карта. Разговор о том, как создавать навигационные карты, растянется на несколько глав, но не пугайтесь, на самом деле это совсем не трудно.
Сначала теория.
Навигационные карты задаются тэгом Map. Тэг Map включает себя тэг(и) Area, которые определяют геометрические области внутри карты (в нашем примере это будут прямоугольники) и ссылки, связанные с каждой областью (т.е. куда вы попадете при нажатии на какую-либо часть нашей карты).
<map>
<area ...>
<area ...>
...
<area ...>
</map>
Дальше уже будем тренироваться на кошках :) (на конкретных примерах)
Для начала нам нужна картинка. Возьмем такую:
Картинка простая - всего лишь голубой прямоугольник (240х140 пикселов). Представьте, что прямоугольники №1 и №2, нарисованные на нем, - это изображения каких-либо кнопок, а голубое - какой-то сложный фон. Чтобы не создавать сложную таблицу, вы решили не резать картинку на много частей и не вычленять кнопки, вы решили поступить проще - создать навигационную карту, где области №1 и №2 (прямоугольники) будут ссылками.
Итак, мы уже знаем, что геометрические области и то, куда пользователь попадет при нажатии на них, определяет тэг Area, естественно, при помощи своих параметров. Это параметры shape и coords.
Параметр shape - определяет форму области (будет ли она прямоугольником (shape="rect"), кругом (shape="circle") или многоугольником (shape="poly")). Сейчас мы работаем с прямоугольной областью, поэтому:
<map>
<area shape="rect">
</map>
Параметр coords - определяет координаты (положение нашей геометрической формы). Число координат и порядок их значений зависят от выбранной нами формы.
"Стоп! стоп!" - скажете вы, - "Какие координаты?" - Те самые, вспоминайте школу и уроки геометрии :)
Полагаю, что это всем должно быть ясно. Отсчет ведется от левого верхнего угла картинки, считайте его началом координат (0;0). Если мы работаем с прямоугольной областью, то нам нужны координаты верхнего-левого и нижнего-правого углов области. Порядок записи координат для параметра coords следующий:
<area shape="rect" coords="x1,y1,x2,y2">
В нашем примере у прямоугольника №1 координаты такие:
x1=25, y1=36, x2=114, y2=98
Значит код будет выглядеть следующим образом:
<map>
<area shape="rect" coords="25,36,114,98">
</map>
Теперь пропишем, куда будет ссылаться наша область, для этого нам понадобится уже знакомый нам параметр href:
<map>
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>
Все бы хорошо, но этого все еще не достаточно, чтобы картинка стала ссылкой, нам нужно еще указать имя карты и связать ее с картинкой.
У тэга Map есть параметр name - имя карты, давайте назовем карту - karta1:
<map name="karta1">
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>
Для того, чтобы связать карту с картинкой, надо использовать атрибут usemap="#имя_карты" для картинки:
<img src="bluerects.gif" usemap="#karta1">
... Куча текста и всякого содержания, или ничего...
<map name="karta1">
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>
Теперь сами пропишите Area для прямоугольника №2 для тренировки (x1=153, y1=11, x2=219, y2=127), а затем шагайте на следующую ступеньку, где мы продолжим разговор о картах.
Для создания круглой области нам нужны будут координаты ее центра (x и y) и длинна радиуса (R) в пикселях. Т.е. порядок записи следующий:
<area shape="circle" coords="x,y,R">
Давайте будет опять работать с геометрической областью №1. В нашем случае координаты для маленького круга будут такие: x=46, y=48; а длинна радиуса - R=35. Запишем:
<map>
<area shape="circle" coords="46,48,35">
</map>
Теперь, когда самое главное записано, пропишем имя карты, куда она ссылается и привяжем карту к рисунку:
<img src="mapcircle.gif" usemap="#karta2">
... Куча текста и всякого содержания, или ничего...
<map name="karta2">
<area href="drugoy_document_2.html" shape="circle" coords="46,48,35">
</map>
Кстати, для карты мы можем прописать ALT для каждой области, сейчас у нас только одна область, но все равно, пропишем для нее ALT:
<img src="mapcircle.gif" usemap="#karta2">
... Куча текста и всякого содержания, или ничего...
<map name="karta2">
<area href="drugoy_document_2.html" shape="circle" coords="46,48,35" alt="маленький круг">
</map>
Теперь при наведении на область №1 будет всплывать подсказка, что же это такое :)
Давайте посмотрим результат (нажмите на первый круг):
Теперь вы самостоятельно сделаете ссылкой второй круг (x=158, y=75, R=53), чтобы закрепить пройденное.
Вот мы, наконец, добрались и до многоугольников.
Бу-бу-бу! :) Страшно?
На самом деле тут нет ничего страшного. Вы указываете точки (координаты углов), они как бы соединяются, и мы можем получить очень разнообразные фигуры (посмотрите на фигуру 2, правда здорово?). Используя poly, мы можем делать самые разнообразные области, от скромного треугольника до шикарной звезды.
Сейчас мы будем работать с фигурой №2, потому что у нее меньше углов (да, ленивая я, решила облегчить себе жизнь на один угол:).
Для начала зададим тип области:
<map>
<area shape="poly">
</map>
Координаты пишутся по следующему принципу:
<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">
Расшифровывается это так: "координаты первого угла (x1,y1), координаты второго угла (x2,y2), еще много углов и их координат (...), координаты последнего угла (xN,yN)". Т.е. для нашего пятиугольника запись полностью будет выглядеть так:
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5">
Теперь подставим реальные значения координат в наш код:
<map>
<area shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>
Дальше уже прописываем ссылку, имя карты, и привязываем карту к рисунку (это везде по одному и тому же принципу):
<img src="mappoly.gif" usemap="#karta3">
... Куча текста и всякого содержания, или ничего...
<map name="karta3">
<area href="drugoy_document_3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>
Теперь проверим, получилось ли у нас это безобразие (в этот раз вторая фигура, жмите):
Не забудьте прописать самостоятельно первую область (шестиугольник) - x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.
Теперь я расскажу еще о нескольких нюансах и мы завершим наш разговор о картах:
1 - Мы можем одновременно использовать разные области, например круг и многоугольник:
<img src="mappoly.gif" usemap="#karta3">
... Куча текста и всякого содержания, или ничего...
<map name="karta3">
<area href="drugoy_document_3.html" shape="circle" coords="46,48,35,">
<area href="drugoy_document_3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>
2 - Наши области могут пересекаться (бывает, руки кривые). Это не смертельно, главное помнить, что в этом случае при нажатии на область пересечения приоритет имеет область, которая указана первой (т.е. пользователь пойдет на страницу, куда она ссылается).
3 - Вы можете не мучаться с картами, а найти на просторах интернета специальную программу, с помощью которой вы без труда сможете карту расчертить, и не прописывать все вручную - это может сэкономить ваше время, силы, нервы.
Надеюсь, с картами вам теперь все ясно, и вы можете продолжать обучение :)
В этой главе мы продолжим разговор о ссылках. Иногда возникает такая ситуация: нам нужно сделать ссылку не на другой документ, а внутри того же документа - закладку, в народе называемую якорем (смотрите пример, понажимайте там на ссылочки). Такая навигация внутри одного и того же документа весьма удобна. Создаваться она может двумя способами.
Способ первый - с помощью атрибута name (имя закладки) тега A:
<H2>Григорий Остер, "Вредные советы.<BR>
Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE>
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>
<H3><A name="stih1">Стих первый</A></H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3><A name="stih2">Стих второй</A></H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3><A name="stih3">Стих третий</A></H3>
<PRE>
... тра-ля-ля 3...
</PRE> (прим.)
Заголовки (стих первый, стих второй, стих третий) в нашем примере мы сделали закладками, использовав параметр тега A - name:
<A name="stih3">Стих третий</A>
Затем, без стеснения, мы сделали на них ссылки:
<A href="#stih3">Ссылка на стих третий</A>
Заметьте - <A href="#stih3"> - символ решетки (#) перед именем закладки, на которую мы ссылаемся, обязателен. Вы можете ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом:
<A href="ancorpri.html#stih3"> Ссылка на стих третий из какого-то другого документа </A>
или
<A href="http://www.mysite.ru/ancorpri.html#stih1"> Ссылка на стих третий из какого-то другого документа </A>
Способ второй - есть такой атрибут (параметр) - id, который назначает тегу (элементу) уникальное имя в пределах одного документа (кроме тегов Base, Head, Html, Meta, Script, Style, Title). Что мешает нам задать id, например, тегу H3 (заголовкам)?
<H2>Григорий Остер, "Вредные советы.<BR>
Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE>
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>
<H3 id="stih1">Стих первый</H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3 id="stih2">Стих второй</H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3 id="stih3">Стих третий</H3>
<PRE>
... тра-ля-ля 3...
</PRE> (прим.)
Посмотрите, внешне ничего не изменилось и все действует так же, как и в первом примере, поэтому вы можете использовать спокойно любой из этих двух способов (какой больше нравится).
Также хочу вас преостеречь, никогда не делайте так:
<A href="#stih">Ссылка на ...</A><BR>
...
<A name="STIH">Закладка</A>
Если вы, например, напишите имя закладки большими буквами, а ссылаясь укажете это имя маленькими, то броузер может посчитать это за два разных имени (а может и за одно), поэтому во избежание ошибок учитывайте это, и пишите имена в одном регистре.
На этом мучения с закладками закончены, а напоследок ловите две ссылочки:
- Не взлетим, так поплаваем. Уберите якоря со своих сайтов
- Анкор, еще анкор
- Koje-shto pro jakorja.
Наверное, пройдясь по ступенькам, вы уже поняли, что некоторые теги и некоторые атрибуты (параметры) тегов поддерживаются не всеми броузерами. Не будем искать причин почему (да и откуда мне лично знать, что толкает производителей броузеров придумывать свои специфические теги или атрибуты, о которых в спецификации нет ни слова, а также мне неведомо почему броузеры не поддерживают некоторые теги и атрибуты, которые по идее должны поддерживать, т.к. в той же спецификации эти теги и атрибуты упомянуты), лучше поговорим о некоторых специфических атрибутах для тега Body, которые вам когда-нибудь да пригодятся.
В главе 28-ой мы говорили о атрибутах тега <frame> marginheight (определяет ширину (в пикселах) верхнего и нижнего полей фрэйма) и marginwidth (определяет ширину левого и правого полей фрэйма). Подобные атрибуты можно задать и для тега Body, что весьма полезно, если вы хотите убрать поля, которые есть всегда по умолчанию (см. пример, вот они какие эти отступы (поля) по умолчанию), или наооборот, увеличить их.
Давайте, в наших примерах мы будем рассматривать вариант, когда нам нужно убрать поля документа:
<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0">
Topmargin - определяет ширину верхнего и нижнего полей документа, leftmargin - определяет ширину левого и правого полей документа. Чтобы убрать поля мы приравняли эти параметры к нулю. Можете посмотреть, что у нас получилось.
Вы можете удивиться, в чем же специфичность этих параметров. Дело в том, что topmargin и leftmargin поддерживаются только Internet Explorer.
Но не стоит расстраиваться, Нетскейп не окажется за бортом, т.к. для этого броузера есть свои аналогичные специфические параметры для тега Body - marginheight и marginwidth. Marginheight - аналогичен topmargin, а marginwidth - аналогичен leftmargin.
Теперь, чтобы убрать отступы и для NN, и для IE, надо просто прописать все эти параметры:
<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
Таким образом и в IE все будет хорошо, и NN будет не обижен.
Традиционная ссылка на дополнительный материал:
- Специфические теги, поддерживаемые только браузером Internet Explorer или только Netscape
- Волшебное заклинание (заметки о полях)
В этой главе мы продолжим разговор о специфических тегах, и на этот раз речь пойдет о теге Marquee - бегущей строке (текста).
Тег Marquee поддерживается только Internet Explorer, но многих людей, начинающих осваивать сайтостроение, это не останавливает, и они с удовольствием его употребляют. Т.к. сия болезнь массовая, то мне придется рассказать подробно о теге Marquee (те у кого броузер не IE будут в этой главе оставлены за бортом, т.к. не будут видеть примеров, хотя традиционная ссылка в конце может их утешить).
<marquee height="10" width="270" bgcolor="#99CCFF">
Бегущая строка, высота - 10, ширина - 270 пикселов, фон - 99CCFF
</marquee>Как видите, все просто. Все атрибуты вам уже знакомы: bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.
Также для бегущей строки можно задать и другие знакомые вам атрибуты - hspace, vspace и align (те, кто их не помнит срочно возвращаются к главе 10-той и освежают свою память). В наш пример я их вводить не буду, вы можете сами.
<marquee height="10" width="270" loop="2">
Бегущая строка
</marquee>
Параметр loop задает сколько раз прокрутится строка, в нашем примере указано loop="2" - 2 раза, а это значит, что к тому моменту, когда вы дойдете до этого примера, строка может уже не бежать, поэтому обновите страницу и убедитесь в правоте моих слов - строка пробежит только два раза.
Далее будут лишь описания параметров без примеров, подставляйте их сами в пример, и смотрите, что будет получаться.
Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).
Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию). Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.
Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.
Уф! Все :)
Теперь, когда мы разобрались со всеми параметрами тега Marquee, я немного позанудничаю, призывая читателя все же быть разумным и не особо злоупотреблять этим тегом. Вернитесь хотя бы к первому примеру. Посмотрите на него задумчиво и признайтесь, что он мешал вам сосредоточиться на чтении и ознакомиться с этой главой (да, все со злым умыслом). Посмотрели, поняли, к чему я веду, и решили в дальнейшем не мучать своего посетителя подобным образом без особой нужды.
Обещанное утешение пользователям Netscape и других броузеров, которые не IE - ссылка на скрипты бегущей строки. Я полагаю, что это вы сможете увидеть (кстати, это альтернатива Marquee):
Это можно использовать по разному: некоторые дизайнеры при помощи фреймов воплощают свои сумашедшие задумки и повергают в восхищение публику, некоторые используют фреймы, потому что их сайту просто не возможно без фреймов обойтись, а некоторые используют фреймы, потому что им так удобнее - это все хорошо, главное, чтобы оно не смотрелось ужасно и некрасиво и было удобно для вашего посетителя (прим.).
Итак, для того, чтобы наш любимый броузер показал одновременно несколько документов, надо создать специальный фрейм-документ, в котором мы укажем сколько документов откроется в одном несчастном окне броузера, сколько места будет занимать каждый, каким образом они будут располагаться (не все так просто, как хотелось бы:).
Т.к. первый документ на сайте, который показывается посетителю это index.html (или вроде него), то мы его и будем мучать, пусть он будет фрейм-документом. Создадим документ index.html:
<html>
<head>
<title>Хождение по фреймам</title>
</head>
</html>
На первый взгляд - вполне стандартное начало, только вот... опа! нет тэга body! И это не ошибка, фрейм-документ не содержит тэга body, такого обязательного в других случаях.
Что ж, не будем грустить о тэге body, и найдем ему вполне достойного заместителя:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset></frameset>
</head>
</html>
Здравствуйте Frameset, какое красивое имя, говорят, что вы решили изменить кое-что в жизни нашего сайта и ввести фреймы :), очень приятно, мы всегда рады новым и практичным решениям.
Теперь надо найти frameset достойных помощников и задать ему некоторые жизнено необходимые параметры, но это на следующей ступеньке.
Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Предлагаю классический вариант - logo.html, menu.html, content.html - о котором я упоминала в предыдущей главе.
Итак, сначала создадим такой вариант:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
</frameset>
</head>
</html> (прим.)
Теперь мне следует объясниться...
Начнем с параметра rows - в нашем примере это выглядит так: rows="100,*,150" - а если перевести, то мы получим следующее - "... наш документ делиться на несколько рядов (строк). Высота первого ряда - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство", - полагаю, здесь должно быть все ясно.
Тэг frame сообщает броузеру какие же документы у нас будут в каждом ряду (строке). В нашем случае: первый ряд - logo.html (документ с логотипом), второй ряд - займет документ с непосредственным содержанием (content.html), а третий - меню. Если вы хотите, чтобы меню было во втором ряду, то вам следует поменять его местами с content.html
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Посмотрите что у нас получилось. Опаньки... Поменять-то мы их местами - поменяли, а вот теперь надо задать новые значения параметру rows, чтобы меню у нас снова занимало только 150 пикселов по высоте, а содержание - все остальное:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,150,*">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Вот теперь другое дело:) Все-таки от перемены мест слагаемых кое-что меняется...
Эту главу мы начнем с небольшого фокуса: замените параметр rows, на cols -
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,150,*">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Ну-ка, посмотрите наш пример. Ловкость рук и никакого мошенства :)
Параметр cols делит окно нашего броузера не на ряды, а на колонки. Давайте переведем это - cols="100,150,*": "...наш документ теперь делится на колонки. Первая колонка имеет ширину - 100 пикселов, вторая - 150, а третья занимает все оставшееся место".
Кстати, мы получили еще один из четырех вариантов, которые собирались сделать:
Итак, подведем итоги. Мы можем делить окно нашего броузера либо на ряды, либо на колонки, с помошью параметров тэга <frameset> Cols и Rows. Другого способа деления не существует. Одновременно эти параметры использовать нельзя.
При помощи rows мы разбиваем окно на ряды и задаем какую высоту будет иметь каждый ряд, при помощи cols разбиваем окно на колонки и задаем какую ширину будет иметь каждая колонка.
Кстати, ширина и высота могут задаваться не только в пикселях, но и в процентах от общей ширины (высоты) окна:
<frameset cols="10%,15%,75%">
Помните, что в сумме это все должно равняться 100%. А то бывают же умники...
В этой главе мы разберемся, как расположить документы в окне следующим образом:
или
В предыдущей главе я сказала, что мы можем делить окно только на ряды или колонки. Тогда как же расположить наши документы в окне так, как указано на рисунках? А разве я говорила, что ряд в свою очередь нельзя разбить на несколько колонок, а колонку на несколько рядов? Нет, не говорила :Ъ.
Каким образом мы будем делить окно? - На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на две колонки, в которых будут располагаться документы menu.html и content.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<???>
</frameset>
</head>
</html>
Принцип построения ясен, только вот как обозначить ряд, разбитый на две колонки? Тут нам поможет господин Frameset.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</head>
</html> (прим.)
Для тех, кто не уследил за движениями моих рук, поясняю. Первый ряд мы оформили как положено, при помощи тэга frame. Во втором ряду на сцену выгодит тэг <frameset></frameset>.
С помощью параметра cols тэга <frameset></frameset> мы делим второй ряд на две колонки (первая шириной 150 пикселов, вторая по ширине занимает все оставшееся пространство). А тэги <frame>, которые содержит <frameset></frameset> определяют какие документы будут показаны в колонках (menu.html и content.html).
Здесь мы будем делить окно на колонки. Вторая колонка будет содержать в себе документ content.html (содержание), а первую колонку мы разобьем на два ряда, и поместим в них документы logo.html и menu.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Вот так. Ничего сложного здесь нет:)
Допустим, мы решили остановиться на последнем варианте, значит будем приводит это в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме с logo.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Scrolling - параметр тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появиться только тогда, когда она нужна.
Собственно, параметр scrolling="auto", можно не прописывать, т.к. если параметр scrolling не задан, то полоса прокрутки появиться, если она нужна, а если нет - ее не будет.
Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым мы раньше уже встречались. Итак, border="0".
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Так уже лучше :). Но все же, что-то еще хочеться исправить... А! Картинку с чёртом так и хочется прижать в левый верхний угол:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html> (прим.)
Прижали. Теперь давайте познакомимся с параметрами тэга <frame> marginheight и marginwidth.
Marginheight определяет ширину (в пикселах) верхнего и нижнего полей фрэйма, а marginwidth определяет ширину левого и правого полей фрэйма. В нашем примере мы избавились от полей во фрейме, содержащим logo.html, задав значение marginheight и marginwidth равное нулю.
Вот такие пироги:) Остальное будет на других ступеньках.
В этой главе мы поговорим о том, что становиться проблемой для каждого человека, начинающего осваивать фреймы.
Итак, обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме. А нам бы надо сделать так, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать?
Для начала, господа, познакомьтесь с новым параметром тэга <frame> - name. Пустим name в дело:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html" name="window-1">
</frameset>
</head>
</html>
Параметр name задает имя для фрейма (в нашем случае для того, который содержит документ content.html).
Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью параметра тэга <a> target (target="имя_фрейма").
Как это выглядит? Обратимся к документу menu.html.
<html>
<head>
<title>Документ с Меню</title>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html">Главная</a>
<a href="tumki.html">Тумки</a>
<a href="bumki.html">Бумки</a>
<a href="tururumki.html">Турурумки</a>
<a href="tra-la-la.html">Траляля</a>
</center>
</body>
</head>
</html>
Вот такой он, в нашем случае. Теперь для каждой ссылки укажем параметр target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).
<html>
<head>
<title>Документ с Меню</title>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html" target="window-1">Главная</a>
<a href="tumki.html" target="window-1">Тумки</a>
<a href="bumki.html" target="window-1">Бумки</a>
<a href="tururumki.html" target="window-1">Турурумки</a>
<a href="tra-la-la.html" target="window-1">Траляля</a>
</center>
</body>
</head>
</html> (прим.)
Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает, при этом мы не приложили никаких особых усилий, а только изменили немного два документа :).
Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top:
<a href="project.html" target="_top">Мой проект о рыбках</a>
Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы).
Вот мы добрались и до последней главы о фреймах. Здесь мы поговорим об IFrame - "плавающем" фрейме и вы получите несколько полезных ссылок напоследок.
Я не буду рассказывать, как делается IFrame (т.к. "плавающие" фреймы поддерживаются только IE), я лишь расскажу, что это такое.
Итак, IFrame - "плавающий" или встроенный фрейм. Пользователи Интернет Искплорер, наверное, много раз встречали его на различных сайтах. Это очень удобно, поэтому некоторые создатели страниц (сайтов) позволяют себе забыть о пользователях Несткейпа, и я их прекрасненько понимаю.
Зайдите на Дефорум.ру. На заглавной странице Новости сделаны при помощи IFrame. Т.е. мы видим, что IFrame позволяет нам вставить в наш документ, другой документ (в нашем примере документ с новостями), мы можем раположить встроенный фрейм по отношению к другим элементам документа (тексту и картинкам) как нам хочется (IFrame имеет фиксированные, неизменяющиеся размеры, поэтому ничего никуда не уползет и не раcширится), и мы также видим, что IFrame - это действительно очень удобно.
Что? Я виду досаду на твоем лице читатель :), тебе хочется узнать как создавать такую замечательную штуку, и ты думаешь, что в этот раз я могла бы отступить от принципа "видно подо всем". Нет уж. Я не особо вредная, но в этот раз буду, не сколько из принципа, сколько мне хотелось бы, чтобы читатель начал сам искать разную информацию по теме, ведь я в учебнике могу дать только основу и дополнительный материал ввиде ссылок и примечаний, а более глубоко придется все же погружаться самим.
Теперь обещанные ссылки:
- Страшный всемирный заговор - почему фреймы не так страшны
- Я люблю фреймы
- Фреймы как альтернативное средство навигации
- Встроенные фреймы : элемент IFRAME
На этом повествование о фреймах закончено, дальше пойдут Дополнительные главы.
На ступеньке 8-ой мы говорили о разных способах выделения текста (курсиве, полужирном шрифте, подчеркивании и других). Эту главу вы можете считать своеобразным продолжение 8-ой главы.
Какие же еще теги определяют стиль шрифта, используются для его форматирования? Это - Big, Small, Strike (или S), Sub и Sup.
1) Big представляется крупным шрифтом, а Small малым шрифтом относительно основного текста:
<small> Малый </small>
Нормальный текст
<big> Большой </big>
2) Тэги Strike и S представляют текст перечеркнутым шрифтом:
<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>
Какая разница между S и Strike? Да никакой. Просто один из них появился в более ранней спецификации, а другой в более поздней, но оба они имеют право на жизнь.
3) Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub - нижний. Где они могут пригодится? Ну, например при написании какой-нибудь формулы - H2O (все, что мы выносим со школьной скамьи:).
Верхний индекс <sup>sup</sup>
Нижний индекс <sub>sub</sub>
Еще в самом начале обучения, в самых первых главах, я говорила о тэге Br, который осуществляет принудительный перевод текста на другую строку (т.е. аналогичен нажатию клавиши Enter, когда мы форматируем текст в обычном текстовом редакторе).
В этой главе мы поговорим о параметре тэга Br - Clear. Зачем он нужен? Допустим текст обтекает какой-либо объект (например, картинку):
А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам. "Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."
Нам нужно, чтобы текст после слов "к моим гранитным ногам" обрывался, и "кушай, великий предок" - уже продолжалось под картинкой. Вы, конечно, можете ввести несколько тэгов br и решить эту проблему. Но если вдруг картинка (объект) будет большой, текста много, то тут вы уже явно не обойдетесь несколькими br, тут вам придется употребить их с десяток и больше. Так вот, чтобы вам не пришлось мучатся в таких ситуациях, и существует параметр clear:
А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.
"Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."
Теперь пример кода:
<img src="clearpri.gif" align="left">
А мои дети и внуки будут пользоваться моей славой. Смогут купить сосиски, не стоя в огромной очереди. Отварят их, да побольше, наложат в тарелку горкой. Принесут к моим гранитным ногам.
<br clear="left">
"Кушай, великий предок!" Я посмотрю на них с неба, ласково так, с любовью: "Кушайте сами сосиски. И живите в мире и счастье."
У параметра clear существует несколько значений - all, left, right.
All - завершить обтекание объекта текстом. Left - завершить обтекание текстом объекта, выровненного по левому краю. Right - завершить обтекание текстом объекта, выровненного по правому краю.
В нашем примере мы задали clear="left", т.к. наша картинка выровнена по левому краю.
Вот и вся премудрость. Текст примера - это отрывок из стихотворения "Первый!" одного моего знакомого, который в виртуальной реальности величает себя Мирзавчиком, не имеет никакого отношения к нашему обучению, и упомянут лишь из уважения к авторскому праву.
Мы уже говорили о картинках и том, как картинку сделать ссылкой. Вы, наверное, также знаете, что можно сделать так, чтобы при нажатии на разные области (части) одной и той же картинки, вы попадали на разные страницы, это называется - навигационная карта. Разговор о том, как создавать навигационные карты, растянется на несколько глав, но не пугайтесь, на самом деле это совсем не трудно.
Сначала теория.
Навигационные карты задаются тэгом Map. Тэг Map включает себя тэг(и) Area, которые определяют геометрические области внутри карты (в нашем примере это будут прямоугольники) и ссылки, связанные с каждой областью (т.е. куда вы попадете при нажатии на какую-либо часть нашей карты).
<map>
<area ...>
<area ...>
...
<area ...>
</map>
Дальше уже будем тренироваться на кошках :) (на конкретных примерах)
Для начала нам нужна картинка. Возьмем такую:
Картинка простая - всего лишь голубой прямоугольник (240х140 пикселов). Представьте, что прямоугольники №1 и №2, нарисованные на нем, - это изображения каких-либо кнопок, а голубое - какой-то сложный фон. Чтобы не создавать сложную таблицу, вы решили не резать картинку на много частей и не вычленять кнопки, вы решили поступить проще - создать навигационную карту, где области №1 и №2 (прямоугольники) будут ссылками.
Итак, мы уже знаем, что геометрические области и то, куда пользователь попадет при нажатии на них, определяет тэг Area, естественно, при помощи своих параметров. Это параметры shape и coords.
Параметр shape - определяет форму области (будет ли она прямоугольником (shape="rect"), кругом (shape="circle") или многоугольником (shape="poly")). Сейчас мы работаем с прямоугольной областью, поэтому:
<map>
<area shape="rect">
</map>
Параметр coords - определяет координаты (положение нашей геометрической формы). Число координат и порядок их значений зависят от выбранной нами формы.
"Стоп! стоп!" - скажете вы, - "Какие координаты?" - Те самые, вспоминайте школу и уроки геометрии :)
Полагаю, что это всем должно быть ясно. Отсчет ведется от левого верхнего угла картинки, считайте его началом координат (0;0). Если мы работаем с прямоугольной областью, то нам нужны координаты верхнего-левого и нижнего-правого углов области. Порядок записи координат для параметра coords следующий:
<area shape="rect" coords="x1,y1,x2,y2">
В нашем примере у прямоугольника №1 координаты такие:
x1=25, y1=36, x2=114, y2=98
Значит код будет выглядеть следующим образом:
<map>
<area shape="rect" coords="25,36,114,98">
</map>
Теперь пропишем, куда будет ссылаться наша область, для этого нам понадобится уже знакомый нам параметр href:
<map>
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>
Все бы хорошо, но этого все еще не достаточно, чтобы картинка стала ссылкой, нам нужно еще указать имя карты и связать ее с картинкой.
У тэга Map есть параметр name - имя карты, давайте назовем карту - karta1:
<map name="karta1">
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>
Для того, чтобы связать карту с картинкой, надо использовать атрибут usemap="#имя_карты" для картинки:
<img src="bluerects.gif" usemap="#karta1">
... Куча текста и всякого содержания, или ничего...
<map name="karta1">
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>
Теперь сами пропишите Area для прямоугольника №2 для тренировки (x1=153, y1=11, x2=219, y2=127), а затем шагайте на следующую ступеньку, где мы продолжим разговор о картах.
Для создания круглой области нам нужны будут координаты ее центра (x и y) и длинна радиуса (R) в пикселях. Т.е. порядок записи следующий:
<area shape="circle" coords="x,y,R">
Давайте будет опять работать с геометрической областью №1. В нашем случае координаты для маленького круга будут такие: x=46, y=48; а длинна радиуса - R=35. Запишем:
<map>
<area shape="circle" coords="46,48,35">
</map>
Теперь, когда самое главное записано, пропишем имя карты, куда она ссылается и привяжем карту к рисунку:
<img src="mapcircle.gif" usemap="#karta2">
... Куча текста и всякого содержания, или ничего...
<map name="karta2">
<area href="drugoy_document_2.html" shape="circle" coords="46,48,35">
</map>
Кстати, для карты мы можем прописать ALT для каждой области, сейчас у нас только одна область, но все равно, пропишем для нее ALT:
<img src="mapcircle.gif" usemap="#karta2">
... Куча текста и всякого содержания, или ничего...
<map name="karta2">
<area href="drugoy_document_2.html" shape="circle" coords="46,48,35" alt="маленький круг">
</map>
Теперь при наведении на область №1 будет всплывать подсказка, что же это такое :)
Давайте посмотрим результат (нажмите на первый круг):
Теперь вы самостоятельно сделаете ссылкой второй круг (x=158, y=75, R=53), чтобы закрепить пройденное.
Вот мы, наконец, добрались и до многоугольников.
Бу-бу-бу! :) Страшно?
На самом деле тут нет ничего страшного. Вы указываете точки (координаты углов), они как бы соединяются, и мы можем получить очень разнообразные фигуры (посмотрите на фигуру 2, правда здорово?). Используя poly, мы можем делать самые разнообразные области, от скромного треугольника до шикарной звезды.
Сейчас мы будем работать с фигурой №2, потому что у нее меньше углов (да, ленивая я, решила облегчить себе жизнь на один угол:).
Для начала зададим тип области:
<map>
<area shape="poly">
</map>
Координаты пишутся по следующему принципу:
<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">
Расшифровывается это так: "координаты первого угла (x1,y1), координаты второго угла (x2,y2), еще много углов и их координат (...), координаты последнего угла (xN,yN)". Т.е. для нашего пятиугольника запись полностью будет выглядеть так:
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5">
Теперь подставим реальные значения координат в наш код:
<map>
<area shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>
Дальше уже прописываем ссылку, имя карты, и привязываем карту к рисунку (это везде по одному и тому же принципу):
<img src="mappoly.gif" usemap="#karta3">
... Куча текста и всякого содержания, или ничего...
<map name="karta3">
<area href="drugoy_document_3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>
Теперь проверим, получилось ли у нас это безобразие (в этот раз вторая фигура, жмите):
Не забудьте прописать самостоятельно первую область (шестиугольник) - x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.
Теперь я расскажу еще о нескольких нюансах и мы завершим наш разговор о картах:
1 - Мы можем одновременно использовать разные области, например круг и многоугольник:
<img src="mappoly.gif" usemap="#karta3">
... Куча текста и всякого содержания, или ничего...
<map name="karta3">
<area href="drugoy_document_3.html" shape="circle" coords="46,48,35,">
<area href="drugoy_document_3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>
2 - Наши области могут пересекаться (бывает, руки кривые). Это не смертельно, главное помнить, что в этом случае при нажатии на область пересечения приоритет имеет область, которая указана первой (т.е. пользователь пойдет на страницу, куда она ссылается).
3 - Вы можете не мучаться с картами, а найти на просторах интернета специальную программу, с помощью которой вы без труда сможете карту расчертить, и не прописывать все вручную - это может сэкономить ваше время, силы, нервы.
Надеюсь, с картами вам теперь все ясно, и вы можете продолжать обучение :)
В этой главе мы продолжим разговор о ссылках. Иногда возникает такая ситуация: нам нужно сделать ссылку не на другой документ, а внутри того же документа - закладку, в народе называемую якорем (смотрите пример, понажимайте там на ссылочки). Такая навигация внутри одного и того же документа весьма удобна. Создаваться она может двумя способами.
Способ первый - с помощью атрибута name (имя закладки) тега A:
<H2>Григорий Остер, "Вредные советы.<BR>
Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE>
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>
<H3><A name="stih1">Стих первый</A></H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3><A name="stih2">Стих второй</A></H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3><A name="stih3">Стих третий</A></H3>
<PRE>
... тра-ля-ля 3...
</PRE> (прим.)
Заголовки (стих первый, стих второй, стих третий) в нашем примере мы сделали закладками, использовав параметр тега A - name:
<A name="stih3">Стих третий</A>
Затем, без стеснения, мы сделали на них ссылки:
<A href="#stih3">Ссылка на стих третий</A>
Заметьте - <A href="#stih3"> - символ решетки (#) перед именем закладки, на которую мы ссылаемся, обязателен. Вы можете ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом:
<A href="ancorpri.html#stih3"> Ссылка на стих третий из какого-то другого документа </A>
или
<A href="http://www.mysite.ru/ancorpri.html#stih1"> Ссылка на стих третий из какого-то другого документа </A>
Способ второй - есть такой атрибут (параметр) - id, который назначает тегу (элементу) уникальное имя в пределах одного документа (кроме тегов Base, Head, Html, Meta, Script, Style, Title). Что мешает нам задать id, например, тегу H3 (заголовкам)?
<H2>Григорий Остер, "Вредные советы.<BR>
Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE>
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>
<H3 id="stih1">Стих первый</H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3 id="stih2">Стих второй</H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3 id="stih3">Стих третий</H3>
<PRE>
... тра-ля-ля 3...
</PRE> (прим.)
Посмотрите, внешне ничего не изменилось и все действует так же, как и в первом примере, поэтому вы можете использовать спокойно любой из этих двух способов (какой больше нравится).
Также хочу вас преостеречь, никогда не делайте так:
<A href="#stih">Ссылка на ...</A><BR>
...
<A name="STIH">Закладка</A>
Если вы, например, напишите имя закладки большими буквами, а ссылаясь укажете это имя маленькими, то броузер может посчитать это за два разных имени (а может и за одно), поэтому во избежание ошибок учитывайте это, и пишите имена в одном регистре.
На этом мучения с закладками закончены, а напоследок ловите две ссылочки:
- Не взлетим, так поплаваем. Уберите якоря со своих сайтов
- Анкор, еще анкор
- Koje-shto pro jakorja.
Наверное, пройдясь по ступенькам, вы уже поняли, что некоторые теги и некоторые атрибуты (параметры) тегов поддерживаются не всеми броузерами. Не будем искать причин почему (да и откуда мне лично знать, что толкает производителей броузеров придумывать свои специфические теги или атрибуты, о которых в спецификации нет ни слова, а также мне неведомо почему броузеры не поддерживают некоторые теги и атрибуты, которые по идее должны поддерживать, т.к. в той же спецификации эти теги и атрибуты упомянуты), лучше поговорим о некоторых специфических атрибутах для тега Body, которые вам когда-нибудь да пригодятся.
В главе 28-ой мы говорили о атрибутах тега <frame> marginheight (определяет ширину (в пикселах) верхнего и нижнего полей фрэйма) и marginwidth (определяет ширину левого и правого полей фрэйма). Подобные атрибуты можно задать и для тега Body, что весьма полезно, если вы хотите убрать поля, которые есть всегда по умолчанию (см. пример, вот они какие эти отступы (поля) по умолчанию), или наооборот, увеличить их.
Давайте, в наших примерах мы будем рассматривать вариант, когда нам нужно убрать поля документа:
<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0">
Topmargin - определяет ширину верхнего и нижнего полей документа, leftmargin - определяет ширину левого и правого полей документа. Чтобы убрать поля мы приравняли эти параметры к нулю. Можете посмотреть, что у нас получилось.
Вы можете удивиться, в чем же специфичность этих параметров. Дело в том, что topmargin и leftmargin поддерживаются только Internet Explorer.
Но не стоит расстраиваться, Нетскейп не окажется за бортом, т.к. для этого броузера есть свои аналогичные специфические параметры для тега Body - marginheight и marginwidth. Marginheight - аналогичен topmargin, а marginwidth - аналогичен leftmargin.
Теперь, чтобы убрать отступы и для NN, и для IE, надо просто прописать все эти параметры:
<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
Таким образом и в IE все будет хорошо, и NN будет не обижен.
Традиционная ссылка на дополнительный материал:
- Специфические теги, поддерживаемые только браузером Internet Explorer или только Netscape
- Волшебное заклинание (заметки о полях)
В этой главе мы продолжим разговор о специфических тегах, и на этот раз речь пойдет о теге Marquee - бегущей строке (текста).
Тег Marquee поддерживается только Internet Explorer, но многих людей, начинающих осваивать сайтостроение, это не останавливает, и они с удовольствием его употребляют. Т.к. сия болезнь массовая, то мне придется рассказать подробно о теге Marquee (те у кого броузер не IE будут в этой главе оставлены за бортом, т.к. не будут видеть примеров, хотя традиционная ссылка в конце может их утешить).
<marquee height="10" width="270" bgcolor="#99CCFF">
Бегущая строка, высота - 10, ширина - 270 пикселов, фон - 99CCFF
</marquee>Как видите, все просто. Все атрибуты вам уже знакомы: bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.
Также для бегущей строки можно задать и другие знакомые вам атрибуты - hspace, vspace и align (те, кто их не помнит срочно возвращаются к главе 10-той и освежают свою память). В наш пример я их вводить не буду, вы можете сами.
<marquee height="10" width="270" loop="2">
Бегущая строка
</marquee>
Параметр loop задает сколько раз прокрутится строка, в нашем примере указано loop="2" - 2 раза, а это значит, что к тому моменту, когда вы дойдете до этого примера, строка может уже не бежать, поэтому обновите страницу и убедитесь в правоте моих слов - строка пробежит только два раза.
Далее будут лишь описания параметров без примеров, подставляйте их сами в пример, и смотрите, что будет получаться.
Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).
Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию). Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.
Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.
Уф! Все :)
Теперь, когда мы разобрались со всеми параметрами тега Marquee, я немного позанудничаю, призывая читателя все же быть разумным и не особо злоупотреблять этим тегом. Вернитесь хотя бы к первому примеру. Посмотрите на него задумчиво и признайтесь, что он мешал вам сосредоточиться на чтении и ознакомиться с этой главой (да, все со злым умыслом). Посмотрели, поняли, к чему я веду, и решили в дальнейшем не мучать своего посетителя подобным образом без особой нужды.
Обещанное утешение пользователям Netscape и других броузеров, которые не IE - ссылка на скрипты бегущей строки. Я полагаю, что это вы сможете увидеть (кстати, это альтернатива Marquee):
