Web дизайн с Macromedia HOMESITE



 

Создание гипертекстовых ссылок

В данном случае в категорию гипертекстовых ссылок включены все виды ссылок, создаваемых с помощью тегов <А> и <IMG>. Однако сразу оговоримся: создание сенсорных карт будет рассмотрено в следующем разделе.
Итак, для создания ссылок на основе тегов <А> и <IMG> могут использоваться следующие средства:

  • перетаскивание мышью значка файла из окна ресурсов в окно документа;
  • команда Insert as Link (Вставить как ссылку) контекстного меню файла;
  • вставка ссылки с помощью окна редактора тегов.

При использовании первого способа курсор в окне документа перемещается вслед за контуром файла. Поэтому тег ссылки будет помещен в ту позицию документа, где будет находиться курсор в тот момент, когда вы отпустите кнопку мыши. Это требует определенной аккуратности при выполнении операции.

При использовании команды Insert as Link и редактора тегов ссылка будет вставлена в ту позицию, где находился курсор перед выбором команды или перед вызовом редактора тегов.

Если ссылка создастся перетаскиванием или с помощью команды Insert as Link, для тегов <А> и <IMG> генерируется предопределенный набор атрибутов.

Для тега <А> таким атрибутом является HREF с адресом соответствующего файла. При этом возможны следующие варианты:

  • если ссылка создастся в сохраненном ранее документе, то HomeSite автоматически генерирует относительный адрес вставляемого файла;
  • если вы перетаскиваете значок файла в документ, который ни разу не был сохранен на диске, то на экран выводится сообщение, что относительный адрес не может быть вычислен, пока документ не будет сохранен (рис. 5.7); в окне сообщения имеются две кнопки:
    • кнопка Yes позволяет сохранить документ, после чего в него будет вставлена ссылка с относительным адресом;
    • щелчок на кнопке No приводит к отмене операции создания ссылки.

Рис. 5.7. Напоминание о том, что для создания относительной ссылки требуется сохранить документ на диске

При создании ссылки на основе тега <А> HomeSite автоматически, генерирует текст ссылки, в качестве которого используется заголовок документа.

Замечание
Напомним, что от этой услуги можно отказаться, сняв флажок Use <title> of dragged documents... на вкладке HTML/XHTML диалогового окна Settings.

При создании ссылки на основе тега <IMG> в код документа вставляются атрибуты SRC, WIDTH, HEIGHT, ALT и BORDER. При этом значение атрибута SRC генерируется по тем же правилам, что и для атрибута HREF тега <А>: относительный адрес будет вычислен только после сохранения документа на диске.

Значения атрибутов WIDTH, HEIGHT устанавливаются на основе фактичес-ких параметров изображения, атрибут ALT вставляется с пустым значением, а атрибут BORDER равен 0.

Чтобы создать ссылку с помощью редактора тегов, следует на вкладке Common панели быстрой вставки щелкнуть на кнопке Anchor (Якорь).

Обязательные атрибуты тега устанавливаются на вкладке A Tag, которая содержит следующие элементы управления (рис. 5.8):

  • текстовое поле HREF, которое предназначено для ввода значения одноименного атрибута; адрес-ссылку можно либо ввести вручную, либо выбрать с помощью одной из трех расположенных справа кнопок: первая из них открывает список файлов текущей папки, вторая — список файлов в папке Favorites броузера MSIE, а третья — список закладок (Bookmarks), созданных с помощью броузера Netscape; если маршрут ссылки был выбран с помощью кнопок, то при работе с несохраненным документом на экране появится сообщение, что в ссылке будет использован абсолютный адрес (рис. 5.9); для подтверждения следует щелкнуть на кнопке ОК (правда, если просто закрыть окно, все равно в поле будет помещен абсолютный адрес); если вы работаете с сохраненным документом, то HomeSite вычислит относительный адрес;

Рис. 5.8. Вкладка A Tag окна редактора тегов

Замечание
Если при работе с не сохраненным документом ввести в поле HREF вручную относительный адрес, то HomeSite его «проглотит» и вставит в код документа. Однако созданная ссылка останется неработоспособной до тех пор, пока вы не сохраните документ на диске.
Ручной ввод адреса целесообразно использовать при создании ссылок на внешние ресурсы. При этом URL внешнего ресурса следует ввести полностью, например: http://www.wsoort.ru.

  • раскрывающийся список Protocol (Протокол), позволяющий выбрать протокол, который должен использоваться при закачке документа;
  • поле Name, предназначенное для ввода значения атрибута NAME; этот атрибут необходим для создания локальных ссылок (якорей); пример создания локальной ссылки будет рассмотрен ниже;
  • поле Title, предназначенное для ввода значения одноименного атрибута (позволяющего использовать для ссылки всплывающую подсказку); атрибут поддерживается только броузером MSIE;
  • многострочное поле Description, в котором может быть введен текст ссылки; этот текст HomeSite поместит между тегами <А> и </А>.

На вкладке HTML 4.0 окна редактора тегов дополнительно может быть задан атрибут TARGET. Он позволяет указать окно, в которое требуется вывести содержимое документа, вызванного по ссылке. Выбор значения атрибута выполняется с помощью одноименного раскрывающегося списка, который содержит следующие варианты:

_self — вызванный документ будет загружен в то же окно броузера, в котором содержится ссылка;

Рис. 5.9. Предупреждение о том, что при работе с несохраненным документом в поле HREF создается абсолютный адрес

_parent — вызванный документ будет загружен в окно, которое является родительским по отношению к окну, содержащему ссылку;
_top — вызванный документ будет загружен в окно, которое будет открыто поверх всех существующих на данный момент окон;
_blank — вызванный документ будет загружен в новое пустое окно.

Кроме того, в поле списка может быть вручную введено имя любого окна, либо созданного с помощью тега <FRAME>, либо открываемого с помощью метода (функции сценария) window_ореn.

По умолчанию вызванный документ открывается в том же окне, в котором содержится ссылка на него.

Подробнее об управлении окнами броузера при работе с фреймами будет рассказано в разделе «Создание фреймов».

Теперь вернемся к обещанному примеру, поясняющему создание с помощью HomeSite локальных ссылок.

Формирование локальных ссылок (то есть ссылок, обеспечивающих переход на некоторый подраздел внутри документа) предполагает выполнение двух шагов: присвоение имени (метки) целевому подразделу и создание ссылки на эту метку.

С точки зрения HTML-кода создание локальной ссылки основано на совместном использовании атрибутов NAME и HREF тега <А>. В этом случае атрибут NAME служит для описания метки, на которую должен происходить переход; эта метка должна быть указана в качестве адреса перехода в атрибуте HREF (перед именем метки должен стоять символ #).

Предположим, что документ представляет собой глоссарий, и в нем требуется обеспечить быстрый переход между двумя взаимосвязанными терминами, которые не видны одновременно на экране. Пусть первый из этих терминов -«Маркированный список», а второй — «Нумерованный список». Предположим также, что в качестве метки первого термина выбран идентификатор label1, < качестве метки второго — label2 (вообще имя метки — это произвольная пос ледовательность латинских букв и цифр).

Тогда фрагмент HTML-кода страницы, обеспечивающий переход к термину «Нумерованный список», должен выглядеть так:

NAME =« label1">Маркированный список</А> представляет собой последовательность элементов, каждый из которых снабжен графичес ким маркером в виде кружка или квадратика (сравните с <А HREF=«#label2"> нумерованным списком </А>).

Фрагмент кода, обеспечивающий переход к термину «Маркированный список», должен быть построен аналогичным образом, но метки label1 и label2 меняются ролями.

Чтобы создать локальную ссылку с помощью HomeSite, необходимо:

    1. В окне документа установить курсор в ту позицию, куда требуетcя поместить метку (то есть в начало вызываемого раздела) и на панели быстрой вставки щелкнуть кнопку Anchor.
  1. 2. В открывшемся окне редактора тегов ввести в поле Name имя метки а в поле Description — название раздела (или его первую фразу, если раздел не имеет отдельного заголовка), как показано на рис. 5.1 вверху; щелкнуть на кнопке ОК.
  2. 3. В окне документа выделить фрагмент текста, который будет ис-пользоваться в качестве текста ссылки (например, «см. Маркированный список»), и на панели быстрой вставки щелкнуть на кнопке Anchor.
  3. 4. В окне редактора тегов ввести в поле HREF имя метки с префиксом (рис. 5.10, внизу) и щелкнуть на кнопке ОК.

С помощью редактора тегов может быть создана ссылка еще одного специ ального типа — почтовая. Правда, кнопка вызова соответствующего диалогово го окна отсутствует на панели быстрой вставки, поэтому необходимо использо вать утилиту Tag Chooser. Окно, предназначенное для создания почтовой ссыл ки, называется MAILTO. В списке тегов утилиты Tag Chooser оно входит категорию Page Elements, раздел General.

Окно содержит следующие поля (рис. 5.11):

  • Email address (Адрес электронной почты); оно предназначено для вво да адреса, который будет помещен в поле «Куда» почтового клиента установленного на компьютере;

Рис. 5.10. Пример создания локальной ссылки

Рис. 5.11. Окно редактора тегов для создания почтовой ссылки

  • Subject (Тема); оно предназначено для ввода произвольного текста, поясняющего содержание письма; введенный текст будет вставлен поле «Тема» почтового клиента;
  • Link image (Значок ссылки); в нем может быть указан адрес графического файла, который будет использоваться в качестве значка, отобр жаемого на странице возле текста ссылки;
  • Addressee/ link text (Адресат/текст ссылки); в нем следует ввести текст ссылки (в качестве такого текста может быть непосредственно указан имя адресата или наименование организации-адресата).

HTML-код, который будет сгенерирован редактором тегов и помещен в дoкумент, показан на рис. 5.12 (применительно к параметрам примера, приведи ного на рис. 5.11).

Рис. 5.12. HTML-код, сгенерированный редактором тегов

Замечание
После того как почтовая ссылка будет помещена в код документа, для ее редактирования с помощью команды Edit Current Tag будет вызываться окно тега <А>.