ЛАБОРАТОРНАЯ РАБОТА №5 <ГИПЕРССЫЛКИ> ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ

ЛАБОРАТОРНАЯ РАБОТА №5
<ГИПЕРССЫЛКИ>
ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
Организация гиперссылок. Виды гиперссылок
Навигация – это наука или даже искусство перемещения из одного места в другое. Однако
Web не является физическим местом, пользователи используют навигационные указатели,
чтобы перемещаться в информационном пространстве. Многие идеи из навигации в реальном
мире могут быть адаптированы для применения в Web. Тем не менее, разработчикам сайта
следует помнить, что Web – это не реальный мир, и прямое копирование этих идей будет не
всегда работоспособным. Навигация в Web должна помогать пользователям ориентироваться с
тем, чтобы они могли определить свое текущее местоположение, направление, куда им
следует двигаться, и то, как можно попасть куда-либо еще. Наиболее важной особенностью
Web является использование гипертекста.
Гипертекст – это система, предназначенная для связывания между собой различных
объектов: текста, изображений, анимационных последовательностей и т.д. Для организации
гипертекстовых данных используются гипертекстовые ссылки.Гипертекстовая ссылка в
составе электронного документа указывает на определенную позицию того же документа или
на другой документ. Обычно гипертекстовые ссылки активизируются щелчком мыши. При
отсутствии гипертекстовых ссылок пользователь вынужден был бы вручную вводить URL
интересующей его Web-страницы. Посредством гипертекстовых ссылок связаны практически
все документы, представленные в Web.
Какими средствами можно объяснить пользователю, что данный объект является
гиперссылкой? Обычно текст, оформленный в виде гипертекстовой ссылки, отображается
синим цветом, но для представления ссылок может быть выбран любой цвет. В большинстве
случаев текст ссылки отображается с подчеркиванием, но это можно отменить специальными
установками. Гипертекстовая ссылка может быть оформлена как изображение; для
активизации такой ссылки пользователь должен щелкнуть на изображении. Это удобно,
например, в Интернет-магазине, когда пользователь с помощью мыши заполняет «корзинку»
покупателя. Курсор мыши, помещенный на гипертекстовую ссылку, изменяет свой вид.
Щелчок мышкой над ссылкой вызывает переход к новому документу или к другой части
текущего документа.
Видимость, обозначение и размещение навигационных элементов имеет большое значение,
они должны делать перемещение по сайту простым и понятным для пользователей. Поскольку
навигация является такой сложной задачей, этот урок знакомит с ее теоретическими основами
и иллюстрирует их практическое применение.
Внутридокументные ссылки
Такие гиперссылки предназначены для навигации в пределах одного документа (одной Webстраницы), когда вы хотите организовать быстрый переход к конкретным разделам большого
документа. Создание таких типов гиперссылок проходит в два этапа:
1) Расстановка в тексте Web-страницы специальных невидимых меток (anchor).
Такие метки ставят в те места документа, на которые хотят организовать переход по
гиперссылке. Для вставки метки используют следующую конструкцию:
<A NAME="имя_метки"></A>
2) Создание гиперссылок на метки. В значении атрибута HREF тэга <A> используют
имя метки. <A HREF="#имя_метки"> Ссылка на другой раздел документа</A>
Создание внутридокументных ссылок в Macromedia Dreamweaver
1. Расставить метки в определенных местах документа командой Insert - Named Anchor, задав
для каждой метки свое уникальное имя (имя метки должно быть написано обязательно
латинскими буквами!)
2. Выделить объект, который будет являться гиперссылкой. В поле Link палитры свойств
написать: #имя_метки
Ссылки между документами
Для задания ссылки на другие Web-страницы или объекты используют следующую
конструкцию: <A HREF="имя_файла">Ссылка на другую страницу</A> От корректности
указания имени файла зависит работоспособность ссылки.
Создание междокументных ссылок в Macromedia Dreamweaver


Выделить объект, который будет являться гиперссылкой.
Справа от поля Link щелкнуть на изображении папки и выбрать файл, который будет
связан с этой гиперссылкой.
Чтобы организовать переход к определенному месту внешней Web-страницы, то в значении
атрибута HREF помимо имени файла нужно приписать еще и имя метки.
Например: <A HREF="test1.htm#p3">Ссылка для перехода на страницу с именем test1.htm к
метке с именем p3</A>
Иногда приходится отслеживать корректность задания значения атрибута HREF в
междокументных ссылках. Познакомтесь с такими понятиями как абсолютный и
относительный пути к файлам.
Абсолютный и относительный пути
Существует три типа путей к внешним объектам



Абсолютный путь (например, http://www.impuls-spb.ru/index.html);
Путь относительно просматриваемого документа (например, dreamweaver/
contents.html);
Путь относительно корневой папки (например, /support/dreamweaver/contents.html).
Абсолютный путь - абсолютные ссылки представляют собой полный URL к связанному
документу, включая используемый протокол (часто http:// для Web-страниц).
Например,
<A HREF="http://www.impuls-spb.ru/index.html">абсолютная ссылка</A>
Нужно пользоваться абсолютными ссылками, если документ размещен на другом сервере.
При изменении структуры сайта или сервера, на котором располагается сайт, такие ссылки
работать не будут.
Путь относительно документа - путь относительно документа является наиболее
популярным для локальных ссылок на большинстве Web-сайтов. Он часто используется:


если текущий документ и связанный ссылкой документ находятся в одной папке;
для связи с документами, которые находятся в других папках, указывая путь к папке
иерархично от текущего документа к связанному документу.
При указании пути относительно документа обычно задается та часть URL, которая
отличается у двух связываемых документов.Для примера рассмотрим сайт со следующей
структурой:
site

test
o
o

test1.htm
test2.htm
index.htm
Для ссылки на файл, который находится:



в одной папке с текущим, нужно указать только имя файла (например, для ссылки из
файла test1.htm на test2.htm указываем test2.htm).
в папке, имеющей тот же уровень иерархии, что и текущий документ, нужно
набрать название папки и через слеш (/) имя файла (например, для ссылки из файла
index.htm на test1 указываем /test1.htm).
в "отцовской" папке (т.е. имеющей более высокий уровень иерархии), нужно набрать
две точки и слеш (../), а потом имя файла. Две точки указывают на то, что данный
документ находится на один уровень выше по иерархии папок (например, для ссылки
из файла test2.htm на index.htm указываем ../index.htm).
Замечания:


При перемещении группы файлов, например, целой папки, все ссылки с указанием пути
относительно документа будут сохранены.
При перемещении одного файла, содержащего такие ссылки, нужно обновлять все
ссылки этого документа (например, с использованием палитры Site). Dreamweaver эту
операцию проводит автоматически.
Путь относительно корневой папки
Путь относительно корневой папки представляет собой путь к документу по отношению к
корневой папке web-сайта. Он начинается со слеша, который стоит для обозначения
корневого каталога. Например, /index.htm или /test/test1.htm для предыдущего
примера.Корневые ссылки интерпретируются серверами, а не браузером, если вы откроете
локальную страницу, в которой используются корневые ссылки без использования режима
Preview in Browser, ссылки не будут работать. При использовании Preview in Browser
Dreamweaver временно преобразует их в абсолютные file:// путь.
Ссылки на e-mail, сценарии, пустые ссылки
Ссылка на E-mail. При нажатии на ссылку на e-mail запускается установленная в системе
почтовая программа. В окне электронного сообщения в поле Кому автоматически заносится
адрес, который указан в ссылке.Для того, чтобы создать ссылку на E-mail в атрибуте HREF
тэга <A> используется следующая конструкция:
<A HREF="mailto:адрес_электронной_почты">Пишите мне</A>
Создание ссылки e-mail в Macromedia Dreamweaver
3) В окне документа поставьте курсор в нужном месте или выделите текст, к которому
хотите применить ссылку.
4) Выберите Insert > E-Mail Link;
5) В поле Text диалогового окна, введите или измените текст, по которому будет
осуществлена ссылка.
6) В поле E-Mail укажите нужный почтовый адрес (e-mail).
Пустые ссылки. Большинство привычных ссылок связывают объекты в теле документа с
другими документами, пустые ссылки и ссылки на сценарии отличаются от привычных.
Пустая ссылка никуда не указывает. Она используется для активизации объектов или
текста на странице. Активным объектам или тексту можно назначить некоторые режимы
работы (behavior), например, изменяющуюся картинку без использования анимированных
GIF-файлов или появление слоя при перемещении указателя мыши над ссылкой. Чтобы
создать пустую ссылку, нужно атрибуту HREF тэга <A> присвоить значение "#"
Например, <A HREF="#">Пустая ссылка</A>
Ссылки на сценарии
Ссылки на сценарии тоже никуда не указывают, а выполняют коды и функции JavaScript.
Они являются полезными для предоставления дополнительной информации посетителям об
объекте без перехода на другую страницу, а также могут использоваться для выполнения
математических действий, использования форм и других задач.Чтобы создать скрипт-ссылку,
нужно атрибуту HREF тэга <A> присвоить конструкцию языка клиентских сценариев.
Например, <A HREF="JavaScript:alert('Ресурс недоступен')">Ссылка на сценарий</A>
В результате щелчке на данной ссылке, появится предупреждающее окно с сообщением
"Ресурс недоступен".
ЛАБОРАТОРНАЯ РАБОТА
1. Создание внутридокументных ссылок
1) Откройте страницу teor5.htm.
2) Поставьте курсор вначале описания первого языка серверных сценариев («Perl») и в
палитре объектов щелкните на объекте Named Anchor
3) В появившемся диалоговом окне введите название «метки», например, «с1».
4) Вставьте такие «метки» (Named Anchor) во всем тексте страницы в начале описаний
языков серверных сценариев. Всего должно быть 6 метки: c1, c2, c3, c4, с5, с6.
5) Выделите название первого языка серверных сценариев (Perl) в вводном тексте (первый
абзац на данной странице) и в палитре свойств в поле Link напишите #c1.
6) Выделите название второго языка серверных сценариев (ASP) в вводном тексте и в
палитре свойств в поле Link напишите #c2.
7) Аналогичную операцию сделайте для всех последующих языков серверных сценариев.
8) Нажмите F12 и проверьте работу ссылок в браузере.
2. Создание ссылок между страницами
1)
2)
3)
4)
5)
6)
Откройте страницу index.htm.
Выделите пункт "Web-страница, Web-сайт, Web-сервер".
Справа от поля Link палитры свойств щелкните на изображении папки.
Выберите файл web-страницы teor1.htm
Нажмите F12 и проверьте работу ссылки в браузере.
Создайте аналогичные ссылки на других пунктов теории.
3. Создание ссылки на E-mail
1) Откройте страницу Avtor.htm.
2) Напишите в конце страницы фразу «Пишите нам».
3) Выделите эту фразу и в поле Link палитры свойств напишите следующее: mailto:[email protected]. (как вы догадались, здесь вы можете написать свой электронный адрес)
4) Испытайте ссылку в браузере.
4. Создание ссылки на сценарий
1) Откройте страницу index.htm.
2) Допустим, у нас не готовы пока теоретические сведения по языкам клиентских
сценариев, о чем мы должны сообщить посетителю странички. Выделите пункт
«Сценарии на стороне клиента».
3) В поле Link палитры свойств напишите: javascript:alert(‘Данный раздел находится в
стадии разработки’)
4) Испытайте работу ссылки в браузере.
Создание кнопок в программе Macromedia Fireworks MX
1. Запустите программу Macromedia Fireworks MX.
2. Создадим новое изображение. Выберите File > New.
3. В появившемся диалоговом окне поставьте следующие значения: Width: 100; Height: 35;
Resolution: 72; Canvas Color: Transparent. Нажмите кнопку ОК.
4. Выберите инструмент Rectangle Tool и нарисуйте прямоугольник, чтобы он покрывал всю
область изображения (размеры прямоугольника были равны размерам холста).
5. Выберите инструмент Pointer Tool (указатель) и щелкните по прямоугольнику.
6. В палитре свойств установите следующие значения в полях. W: 100; H: 35; X: 0; Y: 0;
выберите цвет для заливки.
7. В панели инструментов выберите инструмент Text Tool.
8. Щелкните указателем мыши на области прямоугольника и введите текст кнопки, например,
Теория . Не обращайте пока внимание на размер и гарнитуру шрифта.
9. Выберите инструмент Pointer Tool (Указатель) и выберите указателем текст.
10. В палитре свойств подберите значения для размера и гарнитуры шрифта, заливки и др.
Важно, чтобы был контраст между фоном кнопки и надписью.
11. Создадим эффект для кнопки – сделаем ее рельефной.
12. Инструментом Pointer Tool (Указатель) выберите прямоугольник.
13. В палитре свойств щелкните на кнопке «+» рядом с надписью Effect.
14. Выберите из контекстного меню пункты: Bevel and Emboss > Inner Bevel.
15. В появившемся окне настройки свойств эффекта установите в поле Width значение 3,
чтобы уменьшить высоту рельефа кнопки.
16. Разберитесь с назначением других параметров эффекта.
17. Откройте палитру Optimize и в раскрывающемся списке Export File Format выберите
GIF.
18. Сохраним изображение кнопки. Выберите пункты меню File > Export…
19. В появившемся диалоговом окне выберите корневую папку сайта и введите имя файла
button-up. Нажмите кнопку ОК.
20. Выберите инструмент Pointer Tool (Указатель) и выберите прямоугольник.
21. С помощью палитры свойств измените для прямоугольника цвет заливки.
22. Сохраним изображение кнопки. Выберите пункты меню File > Export…
23. В появившемся диалоговом окне выберите корневую папку сайта и введите имя файла
button-over. Нажмите кнопку ОК.
Создание изображения Rollover
1. Запустите программу Dreamweaver.
2. Сразу сохраните новый документ под именем menu.htm в папку сайта.
3. Поставьте курсор в начало документа в режиме Design.
4. В панели объектов щелкните на пиктограмме Rollover Image (или выберите пункты
главного меню Insert > Interactive Images > Rollover Image)
5. В появившемся диалоговом окне в поле Original Image с помощью кнопки Browse
выберите файл нормального состояния кнопки (button-up.gif).
6. В поле Rollover image выберите файл (button-over.gif) для состояния при наведении на
кнопку указателя.
7. В поле Alternate Text укажите текст подсказки для кнопки, например, «всплывающая
подсказка».
8. В поле When Clicked, Go To URL выберите страничку, на которую будет происходить
переход при щелчке на данной кнопке. Например, kursy.htm.
9. Испытайте работу кнопки в браузере, предварительно сохранив страницу.
САМОСТОЯТЕЛЬНАЯ РАБОТА СТУДЕНТА
Создайте гиперссылки для последовательного просмотра пользователем пунктов теории. Для
этого, в конце каждой страницы с теорией напишите фразу «переход к следующей теме» и
сделайте ее ссылкой на следующую страницу теории.
ТЕСТ
1. Каков цвет посещенной ссылки по умолчанию?
синий
темно-красный
сиреневый
2. Какой тип ссылок задает следующая конструкция?
<a href="#curs-comp">Компьютерные курсы</a>
ссылка на сценарий
междокументная ссылка
внутридокументная ссылка
3. Какой тип ссылок задает следующая конструкция?
<a href="curs-comp.htm">Компьютерные курсы</a>
ссылка на e-mail
междокументная ссылка
внутридокументная ссылка
4. Какой тип ссылок задает следующая конструкция?
<a href="mailto:[email protected]">Компьютерные курсы</a>
ссылка на e-mail
междокументная ссылка
внутридокументная ссылка
5. Путь ../sourse/foto.jpg является
абсолютным
относительным
корнезависимым