Учебник по HTML (HTML Уроки)

Главная » Мастерская » Статьи » УЧЕБНИК (HTML Уроки)

Учебник по HTML (HTML Уроки) - Урок 4

Давайте изучим связи.

Это действительно очень просто. Мы построим связь с Yahoo.
Начните с этого...

<BODY BGCOLOR="#FFFFFF"> Go to Yahoo! <BODY>

Go to Yahoo!

Затем добавьте пару меток анкеров.

<BODY BGCOLOR="#FFFFFF"> Go to <A>Yahoo!</A> <BODY>

Go to Yahoo!

Добавьте URL и связь построена! (URL - Universal Resource Locator - Универсальный Локатор Ресурсов). По существу это только адрес.

<BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://www.yahoo.com/">Yahoo!</A> <BODY>

Go to Yahoo!

Давайте сделаем еще одну связь.

<BODY BGCOLOR="#FFFFFF"> Go to Netscape! <BODY>

Go to Netscape!

<BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://home.netscape.com/">Netscape!</A> <BODY>

Go to Netscape!

Связь электронной почты создается таким же способом. Мы только используем адрес электронной почты вместо адреса страницы.

<BODY BGCOLOR="#FFFFFF"> Send me <A HREF="mailto:forrest@bubbagump.com">Mail!</A> <BODY>

Send me Mail!

Мы можем сделать изображение связью, если хотим. Используя пример выше 'Go to Netscape!' мы просто подставим метку <IMG> вместо слова Netscape!

<BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://www.doxx.tr.dn.ua/manuals.htm"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68></A> <BODY>

Go to

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

<BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://www.doxx.tr.dn.ua/manuals.htm"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68 BORDER=0></A> <BODY>

Go to

Когда Вы включаете изображения в вашу страницу, не забудьте, что они содержат достаточно много данных и следовательно могут не спешить загружаться. Один способ уменьшать размер (под размером мы понимаем Кб) состоит в том, чтобы уменьшить размерности. Урезание длины и ширины на половину дает результат 1/4 размера изображения в Кб. Также Вы можете уменьшать число цветов. Например:


Размерность 272 x 394 # цветов - 229 Размер- 21.5 Kб	Размерность 144 x 269 # цветов - 15 Размер - 4.7 Kб

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

Gif Wizard - очень полезный инструмент от Raspberry Hill Publishing, который поможет Вам уменьшить размер ваших изображений. Просто наберите в URL (адрес) изображения, которое Вы хотите уменьшить, и ваш фоновый цвет (не обязательно), и Вы получите обратно несколько версий вашего изображения с различными степенями "сжатия".

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

Щелкните на эскизе, чтобы увидеть увеличенное изображение

Первое дело, которое Вы должны выполнить - вызвать ваш редактор изображений и сделать меньшие версии ваших изображений. Это также помогло бы уменьшить цветную глубину. Пункт создания меньшей версии очень важен. Многие пытаются сделать эскиз, простым уменьшением размерности в метке <IMG>. Они все равно загружают полное изображение в меньшее пространство. Что Вам необходимо сделать - создать меньшую копию изображения и использовать ее как связь с большим изображением.

Эскизы просто изготовить.
В Photoshop откройте ваше полноразмерное изображение.
Выберите Image Size... в меню Image:
Убедитесь, что переключатель File Size выключен.
Примечание: Можно работать в пикселях или в дюймах. Выбрать единицы можно в всплывающем меню.
В поле Width наберите новую ширину.
Если Вы делаете отдельные эскизы из различных файлов, делайте их одинаковыми по ширине и/или высоте. Это упростит просмотр ваших эскизов.
В PhotoPaint в меню Image Menu выберите Resample... Проделайте то же самое, что Вы делали в Photoshop.
Когда выберите размер, сохраните ваш эскиз как JPEG с LOW качеством/HIGH сжатием. Например, можно из исходного изображения размером 38K изготовить эскиз менее 2K.

Давайте сделаем это. Мы используем Corvette (он синий). Поместите полноразмерное изображение и малое изображение в вашу рабочую папку. Еще раз, щёлкаем правой кнопкой мыши и save as.

Начните с вашей метки <IMG> .

<BODY BGCOLOR="#FFFFFF"> <IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60> <BODY>

Добавьте ваши метки <A> .

<BODY BGCOLOR="#FFFFFF"> <A><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60><A> <BODY>

Добавьте URL и связь создана!

<BODY BGCOLOR="#FFFFFF"> <A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60><A> <BODY>

Вы можете, если Вы хотите, избавиться от синей рамки. Хотя, Вы можете и сохранить ее, чтобы ваши читатели знали, что это - связь.

<BODY BGCOLOR="#FFFFFF"> <A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60 BORDER=0><A> <BODY>

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

Во первых начните с места (ячейки), куда люди будут переноситься по Вашему желанию. Выберите слово и заключите его в меткиe <A> .

<A>Добавьте</A> URL и Вы выполнили!

Затем дайте имя анкера - места (ячейки) атрибутом NAME.

<A NAME="upabit">Добавьте</A> URL и Вы выполнили!

Вы маркировали место (ячейку). Теперь оно может быть вызвано.

Теперь начните формировать связь.

Щелкните <A>здесь</A> , чтобы перенестись...

Добавьте документ, который будет вызван ...

Щелкните <A HREF="lesson04.htm">здесь</A> , чтобы перенестись...

И наконец, добавьте имя анкера подобно этому ...

Щелкните <A HREF="lesson04.htm#upabit">здесь</A> , чтобы перенестись...

И это - все, что требуется для построения такой связи! Это точно не хирургия мозга.

[назад] [дальше]