Итак, Вы хотите построить Web Страницу!
Урок 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://home.netscape.com/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68></A>
<BODY>

Go to



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

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://home.netscape.com/"><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б

Все редактирование изображения было выполнено Paint Shop Pro.

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


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


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


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

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

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

Давайте сделаем это. Мы используем Corvette (он синий). Поместите полноразмерное изображение и малое изображение в вашу рабочую папку. Еще раз, пользователи Netscape щелкают правой кнопкой мыши и 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.html">здесь</A> , чтобы волшебно перенестись...


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

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

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

<--ОБРАТНО        ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Указатель