Чертёж восьмой Карта ссылок

У тебя возник вопрос – кто это так поиздевался над «фотографией» Васиных друзей и зачем он это сделал?

Ответ – эта разметка, сделанная в редакторе Paint, поможет разбить «фотографию» на области, каждая из которых будет являться ссылкой на какую-нибудь страничку и иметь свою подпись-подсказку.

1. Открой файл drug.jpg в графическом редакторе Paint и сделай разметку, запомнив необходимые координаты:

c если статусная строка не отображается, включи её – меню Вид à Строка состояния;

c выбери инструмент овал и возьми мордочку Дуси в круглую рамку;

c не отпуская кнопку мыши, посмотри на правую часть статусной строки – в двух полях там выведены две пары чисел (на рисунке это 16,16 и 148х148) – слева координаты точки, с которой ты начал рисование фигуры, справа ширина и высота фигуры;

c вычисли координаты центра нарисованной окружности и её радиус: ;

c сохранять картинку с разметкой, конечно же, не надо, но и закрывать её пока рано;

c в файл glav.htm добавь выделенный текст:

<IMG usemap=#karta src="images/drug.jpg" align=right

width=395 height=194 alt="Мои друзья">

<MAP name=karta>

<AREA shape=circle coords=90,90,74 href=dusja.htm

alt="Дуся">

</MAP>

В тег <IMG> добавлен новый атрибут usemap, значением которого является имя карты после знака #.

Тег <MAP></MAP> задаёт описание карты, в атрибут name записывается имя карты (то самое, которое записано в атрибуте usemap тега <IMG>). Внутри этого тега размещается один или несколько тегов <AREA> со следующими атрибутами:

shape – форма области (circle – круг, rect – прямоугольник, poly – многоугольник);

cords – координаты (для круга – координаты центра и радиус, для прямоугольника – координаты левой верхней и правой нижней вершин, для многоугольника – координаты всех его вершин), отсчитываются от левого верхнего угла рисунка;

href – уже знакомый атрибут, указывающий, какой файл загрузится при щелчке по этой области;

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

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

2. Открой страничку в браузере и наведи указатель мыши на мордочку кошки Дуси. Указатель превратился в лапку? Всплыла подсказка Дуся? Щёлкни по мордочке. Если загрузилась Дусина страничка, значит, ты всё сделал правильно.

3. Закончи формирование карты:

c вернись к рисунку, открытому в Paint, и нарисуй прямоугольник вокруг мордочки пса Погромыча; не забудь запомнить координаты, прежде чем отпустить кнопку мыши (пусть это будут, например, 209,42 и 142х105);

c подсчитай координаты правого нижнего угла прямоугольника (209+142=351 и 42+105=147) или просто посмотри их в том же поле, наведя перекрестие мыши на вершину прямоугольника;

c нарисуй вокруг головки синички многоугольник, запоминая координаты каждой вершины – они записываются в том поле, которое левее (в нашем примере изображён шестиугольник, поэтому координат будет 6х2=12);

c добавь в файл glav.htm выделенные строки:

<IMG usemap=#karta src="images/drug.jpg" align=right

width=395 height=194 alt="Мои друзья">

<MAP name=karta>

<AREA shape=poly

coords=125,114,126,160,180,187,235,160,235,112,180,74

href=klava.htm alt="Клава">

<AREA shape=rect coords=209,42,351,147 href=pogrom.htm

alt="Погромыч">

<AREA shape=circle coords=90,90,74 href=dusja.htm

alt="Дуся">

</MAP>

4. Проверь работу карты. Обрати внимание, что при щелчке по области вокруг неё появляется тоненькая рамка, показывающая границу области. Её вполне можно использовать для более точной подгонки границ.

5. И ещё небольшое замечание. Совсем необязательно использовать карту ссылок для ссылок. Иногда бывает нужно просто сделать подсказки для отдельных областей изображения. В этом случае атрибут href не пишется. И всё!

На этом позвольте считать сей чертёж законченным и, немного отдохнув, перейти к следующему.

Чертёж девятый
CSS или каскадные таблицы стилей,
половина первая

Работа, которой мы займёмся сегодня, значительно отличается от всего, что мы делали до сих пор. Можешь считать, что мы переходим на иной уровень, где нам доступно то, чего раньше мы не могли сделать. Например, красная строка. Попробуй-ка создать её средствами HTML – вставить несколько пробелов подряд в начале строки не получится, браузер все пробелы объединит в один. Единственный способ – использовать символ, называемый неразрывным пробелом и обозначаемый &nbsp;. Красиво? Удобно?

Использование CSS (Cascading Style Sheet) позволяет просто и быстро решить эту и другие проблемы с оформлением странички, создать свой стиль.

Другая проблема, с которой легко справляются CSS – расположение объектов в окне браузера. Мы не можем, используя стандартные средства HTML, накладывать текст или рисунки друг на друга. А с помощью CSS можно сделать страничку многослойной…

Короче говоря, CSS сейчас стремительно входят в моду, от которой мы отставать не желаем, поэтому запасаемся терпением и вперёд!

1. В файле glav.htm в раздел <HEAD> допиши выделенные строки:

<HEAD>

<TITLE>Моя домашняя страничка</TITLE>

<STYLE type=text/css>

H2{ text-align:center;

color:#ff0088;

font-style:italic;

font-family:arial,sans-serif;

letter-spacing:0.3em;

}

P{ text-indent:3em;

text-align:justify;

font-size:110%;

}

</STYLE>

</HEAD>

Тег <STYLE></STYLE> содержит описание стилей, его атрибут type указывает, что мы имеем дело с CSS.

Строчка вида H2{ что-то там записано } задаёт описание стиля заголовков H2. В фигурных скобках задаются значения параметров. Это очень похоже на атрибуты тегов, только вместо знака «=» используется «:» и разделителем служит не пробел, а «;».

Как же мы оформили заголовок H2?

text-align:center; – выравнивание абзаца по центру (а ещё могут быть значения left, right, justify);

color:#ff0088; – цвет шрифта. В CSS цвет можно задавать и десятичными числами rgb(255,0,136), и даже в процентах rgb(100%,0%,53%);

font-style:italic; – курсивное начертание (значение normal отменяет курсив);

font-family:arial,sans-serif; – гарнитура шрифта – довольно опасный параметр, ведь на компьютере посетителя может не оказаться такого шрифта, и тогда он увидит какую-нибудь абракадабру. Поэтому в этом параметре обычно выводят список из нескольких шрифтов через запятую. Браузер, не найдя первого, будет искать второй, третий… Вместо или вместе с гарнитурой можно указать тип шрифта: serif – с засечками, sans-serif – без засечек, monospace – моноширинный, cursive – рукописный, fantasy – фантазийный;

letter-spacing:0.3em; – разрядка шрифта, которую можно задавать в миллиметрах (mm), сантиметрах (cm), дюймах (in), пикселах (px), но самая удобная единица em – ширина буквы m данного шрифта.

Для оформления тега <P> мы тоже задаём несколько параметров:

text-indent:3em; – это и есть красная строка величиной в 3 буквы m;

font-size:110%; – размер шрифта (можно задавать в mm, cm, in, px, pt, а можно и словесно: medium – базовый, large – крупнее базового, x-large – ещё крупнее, xx-large – совсем крупный, small – мельче базового, x-small – ещё мельче, xx-small – самый мелкий).

2. Мы задали стиль оформления текста в тегах <H2> и <P>, поэтому теперь за ненадобностью уберём теги и атрибуты, которыми мы оформляли заголовок:

<H2 align=center > <font color=#ff0088> Здравствуйте! Меня зовут Вася! </font> </H2>

<P> <font size=+1> Я учусь в 9 классе одиннадцатой школы

Дата добавления: 2014-11-16