Dreamweaver MX. Гиперссылки
Dreamweaver MX. Гиперссылки
Сегодня мы поговорим о ссылках. Именно они позволяют объединить набор разрозненных страниц в целостную конструкцию. Это один из краеугольных элементов гипертекстовых документов. Осмелюсь утверждать, что построить вменяемый сайт без их использования просто нельзя. Поэтому рассмотрение соответствующих элементов языка HTML, а также процесса работы со ссылками с помощью пакета Macromedia Dreamweaver MX вполне заслуживает отдельной статьи.
Вначале определимся с терминами. Для обозначения рассматриваемого элемента используются такие синонимы, как link, hyperlink и web link. На русский язык их обычно принято переводить как "ссылка" или "гиперссылка", хотя довольно часто можно встретить и прямые кальки с английского: "линк", "залинковать" и т.п. Название элемента anchor переводят как "якорь".
Ссылка может соответствовать фрагменту текста, изображению либо другому объекту. Ссылаться можно как на HTML-страницы, так и на определенные места в них, а также на другие файлы.
Сама по себе конструкция ссылки несложна, однако в ходе их создания могут встретиться некоторые нюансы, о которых лучше узнать заранее. Наиболее распространены ссылки, которые ведут на внешние страницы или ресурсы. Схематически гиперссылка в простейшем случае выглядит следующим образом:
<a href="http://адрес_файла/имя_файла.html"> Отображаемый текст или картинка</a>
Давайте разберемся с отдельными частями ссылки. Href содержит URL того ресурса, на который ведет ссылка. В своем полном виде URL содержит указание протокола, адрес хоста (может использоваться числовой IP-адрес), порт, путь к файлу и его имя. Вместо упомянутого в примере http:// можно указывать и другие протоколы — например, ftp:// или же file:// — в том случае, когда нужно сослаться на файл, находящийся на диске компьютера клиента.
Id — уникальное имя ссылки. Title полезен в некоторых конструкциях, требующих описания отношений файлов. В частности, он необходим при использовании внешних CSS. Rel позволяет указать некоторые смысловые отношения между страницей, на которой расположена ссылка, и тем документом, на которую она ведет. Могут использоваться такие значения, как Start, Next, Prev, Alternate, Stylesheet, Contents, Chapter, Section, Subsection, Appendix, Index, Glossary, Copyright, Help и Bookmark. Назначение перечисленных опций, в принципе, понятно из их названий. Смысл Rev противоположен Rel — в данном случае имеется в виду отношение объекта ссылки к документу, ее содержащему. Допустимые значения при этом те же самые.
Назовем еще один атрибут гиперссылки, при некорректном использовании которого возможно возникновение проблем. Это target, который обязательно стоит указать, если вы работаете с фреймами. В противном случае помещенные на страницах фреймов ссылки могут вести себя не так, как вы задумывали. Target может принимать следующие значения:
_blank — открывает ссылку в новом окне;
_parent — открывает ссылку в том окне, из которого она была вызвана;
_top — ссылка открывается на все окно вне зависимости от разбивки на фреймы;
_self — документ загружается в том же фрейме, в котором располагалась ссылка.
Кроме установления связи с отдельными самостоятельными документами, ссылка может использоваться для указания на конкретный фрагмент документа. Принцип работы такой гиперссылки состоит в том, что она указывает на заранее определенные точки (якоря), поставленные в нужном месте целевой страницы. Таким образом, ссылка и якорь могут находиться как на одной, так и на разных страницах. Якорь устанавливается с помощью конструкции <a name="имя_якоря"> </a> . Имя якоря, как вы понимаете, позволяет однозначно опознать нужный фрагмент. После этого можно делать непосредственно саму ссылку. В случае, если и ссылка, и якорь расположены в одном документе, она будет выглядеть так: <a href="#имя_якоря"> Текст ссылки</a> .
Неплохие результаты дает совместное использование таких якорей и заголовков различных уровней. В этом случае можно использовать еще один способ создания якоря — с помощью добавления к нужному элементу атрибута id: <H2 id="имя_якоря"> Глава 1</H2> . Гиперссылка на такой элемент выполняется тем же способом, что и на <a name> . В результате получается весьма логичная разбивка документа на разделы, по которой можно легко построить, например, оглавление.
На этом закончим краткий экскурс в теорию ссылок и посмотрим, как организована работа с ними в пакете Dreamweaver MX.
Начнем с простого — с создания ссылок. Как вы уже могли заметить, в Dreamweaver одну и ту же операцию, как правило, можно выполнить несколькими способами. Это в полной мере относится и к гиперссылкам.
Первый и наиболее очевидный способ добавить ссылку — воспользоваться панелью Properties. Для этого вначале необходимо выделить на странице фрагмент текста или картинку, от которых вы желаете сделать ссылку, после чего внести адрес файла, на который вы ссылаетесь, в поле Link. Если ссылка ведет на другую страницу вашего сайта, можно указать его с помощью диалога выбора файла, который вызывается кнопкой с изображением папки. Здесь стоит отметить только опцию Relative To, от установки которой зависит, будет ли адрес ссылки прописан относительно документа или же корневого каталога сайта.
Второй способ — пункт Hyperlink меню Insert или одноименная кнопка на панели Common группы Insert. В поле Text вносится видимый текст ссылки, ну, а в Link — адрес файла или страницы.
Еще быстрее ссылку можно сделать, если у вас открыта панель Site. Вызвать ее можно через меню Window — Site или же клавишей F6. Там открывайте вкладку Files. Теперь выберите на панели Properties кнопку, на которой изображен своеобразный "прицел" (Point to file), и, удерживая левую клавишу мыши нажатой, тащите появившуюся стрелку на тот файл, отображаемый в списке панели Site, к которому вы хотите сделать ссылку. Наконец, того же эффекта можно добиться и без кнопки Point To File, если шелкнуть по выделенному фрагменту левой кнопкой мыши, удерживая при этом нажатой кнопку Shift. Появится все та же стрелка с прицелом, которую можно тащить на нужный файл или якорь. Таким образом, изготовление ссылки происходит максимально наглядно и достаточно быстро.
Работа со ссылками на якоря в тексте документа очень похожа на работу с обычными ссылками. Для вставки такого якоря в режиме визуального отображения нужно установить курсор на желаемую позицию, после чего использовать меню Insert — Named Anchor, одноименную кнопку панели Common группы Insert или же горячую комбинацию Ctrl+Alt+A. В открывшемся диалоге указывается имя новоиспеченного якоря. Помните, что пробелов там быть не должно. В результате на вашей странице должен появиться небольшой значок с символическим изображением якоря.
Второй этап — изготовление самой ссылки. Его отличие от уже рассмотренного нами процесса вставки ссылки на документ заключается в том, что в поле Link вписывается знак "#" и имя требуемого якоря. Если вы хотите сделать ссылку на якорь, который находится в другом документе, пишете вначале имя файла с расширением, после которого без пробела ставите "#" с именем якоря, то есть: имя_файла.html#имя_ якоря.
Работают и описанные ранее приемы с перетаскиванием. Так, например, ссылку от выделенного фрагмента текста к нужному якорю также можно сделать мышью при удержании нажатой кнопки Shift или кнопочкой на панели Properties. Если у вас открыто несколько документов, такими способами можно делать ссылки на якоря, расположенные на других страницах.
Если вам понадобится открыть для редактирования страницу сайта, на которую ведет ссылка активного в данный момент документа, дважды щелкните по ней с нажатой клавишей Ctrl или откройте меню Modify — Open Linked Page.
Как вы могли заметить, мы пока не затронули ни одной операции, которую нельзя было бы сделать в обычном "Блокноте" или напрямую в коде. Действительно, иногда "ручной" набор строки кода занимает меньше времени, чем возня с диалоговыми окнами. Прелесть специализированных программ в полной мере ощущается на уровне менеджмента ссылок.
На активно развивающемся сайте количество ссылок может исчисляться многими десятками, а то и зашкаливать за сотни. Пакет Dreamweaver MX обладает рядом инструментов, облегчающих управление большим количеством ссылок.
Первый "бонус" — автоматическое отслеживание и корректирование входящих и исходящих ссылок документа при его перемещении или переименовании. Проверить состояние этой опции можно в меню Edit — Preferences (Ctrl+U). На вкладке General окна Preferences найдите секцию Document Options, где нас будет интересовать выпадающий список, озаглавленный Update Links when Moving Files. Там доступно три варианта поведения программы. При Always коррекция ссылок производится во всех случаях автоматически без вашего вмешательства. Выбрав пункт Never, можно полностью отключить данный инструмент. В случае включения Prompt Dreamweaver MX будет каждый раз вежливо спрашивать вашего согласия на выполнение замен.
Еще один способ оптовой обработки ссылок — инструмент Change Link Sitewide. C его помощью можно заменить все ссылки на определенный файл, которые имеются на вашем сайте. Диалог предельно прост — просто указываем, что именно надо менять, и новое значение. Данное средство весьма полезно при удалении страниц сайта.
Для ускорения работы названных инструментов при работе над большими сайтами пакет может создавать особый служебный кэш-файл, в котором хранится информация о ссылках. Включить его использование можно с помощью диалога свойств сайта, о котором уже было рассказано в одной из предыдущих статей. В разделе Local Info есть пункт Enable Cashe, который в данном случае и нужно отметить. Для перестройки названного файла служит пункт Recreate Site Cache меню Site, которое, в свою очередь, доступно на панели Site.
Панель инструментов Site предоставляет доступ еще к одному инструменту визуализации структуры ссылок на сайте. Откройте данную панель в расширенном режиме, для чего служит кнопка Expand/ Collapse. Теперь переключаемся в режим карты сайта. Это можно сделать, как вы уже, наверное, привыкли, тремя способами: кнопкой Site Map, меню View — Site Map или же комбинацией Alt+F8. Связи между файлами представляются в виде наглядной структуры вашего проекта. На любой странице можно щелкнуть правой кнопкой мыши и вызвать контекстное меню, в котором находится ряд полезных пунктов. Мы не будем подробно рассматривать все команды, куда интересней и полезней будет самостоятельно потренироваться в их использовании — команды достаточно очевидны, и после некоторой практики все быстро станет на свои места.
Весьма удобной следует признать возможность проверки всего разрабатываемого сайта на наличие "потерянных" файлов и "битых" ссылок.
Так, для проверки ссылок, ведущих на различные позиции от конкретной открытой в редакторе страницы, служит команда Check Links из меню File — Check Page. Результаты работы инструмента Link Checker будут выведены в панели Properties. Этот отчет можно сохранить с помощью соответствующей кнопки.
Таким же образом можно проверить группу страниц, которые для этого надо выделить в списке панели Site. Сайт целиком проверяется посредством пункта Check Links Sitewide меню Site или же комбинацией Ctrl+F8. Некорректные ссылки можно сразу же исправить, указав правильные значения.
Кроме подробно рассмотренных сегодня ссылок на файлы и якоря, в документах существует еще несколько видов ссылок. Такие элементы могут использоваться в динамических элементах страницы и скриптах. Их мы будем рассматривать отдельно и несколько позже, а вот почтовые ссылки упомянем сейчас.
Ссылка на почтовый адрес в HTML реализована очень просто. Для этого используется элемент mailto:, после которого указывается необходимый адрес электронной почты. Соответственно, можно либо вписать данную конструкцию в поле Link панели Properties, либо использовать кнопку E-Mail Link панели Common группы Insert и сделать все "с нуля". Вообще-то размещение на web-странице таких простых почтовых ссылок считается не совсем удачным решением с точки зрения безопасности — существует ряд приемов, позволяющих "спрятать" эту информацию от недобросовестных людей и роботов, однако их рассмотрение выходит за рамки сегодняшней статьи.
Как обычно, подведем краткие итоги. Мы ближе познакомились с такими важными элементами web-страницы, как ссылки, а также с реализацией работы с ними в пакете Dreamweaver MX. Кроме этого, были рассмотрены встроенные в данный редактор инструменты управления ссылками как в масштабе отдельной страницы, так и сайта в целом, которые способны значительно повысить эффективность работы над проектами с большим количеством взаимосвязанных страниц.
Алексей Кутовенко, alteridem@tut.by
Вначале определимся с терминами. Для обозначения рассматриваемого элемента используются такие синонимы, как link, hyperlink и web link. На русский язык их обычно принято переводить как "ссылка" или "гиперссылка", хотя довольно часто можно встретить и прямые кальки с английского: "линк", "залинковать" и т.п. Название элемента anchor переводят как "якорь".
Ссылка может соответствовать фрагменту текста, изображению либо другому объекту. Ссылаться можно как на HTML-страницы, так и на определенные места в них, а также на другие файлы.
Сама по себе конструкция ссылки несложна, однако в ходе их создания могут встретиться некоторые нюансы, о которых лучше узнать заранее. Наиболее распространены ссылки, которые ведут на внешние страницы или ресурсы. Схематически гиперссылка в простейшем случае выглядит следующим образом:
<a href="http://адрес_файла/имя_файла.html"> Отображаемый текст или картинка</a>
Давайте разберемся с отдельными частями ссылки. Href содержит URL того ресурса, на который ведет ссылка. В своем полном виде URL содержит указание протокола, адрес хоста (может использоваться числовой IP-адрес), порт, путь к файлу и его имя. Вместо упомянутого в примере http:// можно указывать и другие протоколы — например, ftp:// или же file:// — в том случае, когда нужно сослаться на файл, находящийся на диске компьютера клиента.
Id — уникальное имя ссылки. Title полезен в некоторых конструкциях, требующих описания отношений файлов. В частности, он необходим при использовании внешних CSS. Rel позволяет указать некоторые смысловые отношения между страницей, на которой расположена ссылка, и тем документом, на которую она ведет. Могут использоваться такие значения, как Start, Next, Prev, Alternate, Stylesheet, Contents, Chapter, Section, Subsection, Appendix, Index, Glossary, Copyright, Help и Bookmark. Назначение перечисленных опций, в принципе, понятно из их названий. Смысл Rev противоположен Rel — в данном случае имеется в виду отношение объекта ссылки к документу, ее содержащему. Допустимые значения при этом те же самые.
Назовем еще один атрибут гиперссылки, при некорректном использовании которого возможно возникновение проблем. Это target, который обязательно стоит указать, если вы работаете с фреймами. В противном случае помещенные на страницах фреймов ссылки могут вести себя не так, как вы задумывали. Target может принимать следующие значения:
_blank — открывает ссылку в новом окне;
_parent — открывает ссылку в том окне, из которого она была вызвана;
_top — ссылка открывается на все окно вне зависимости от разбивки на фреймы;
_self — документ загружается в том же фрейме, в котором располагалась ссылка.
Кроме установления связи с отдельными самостоятельными документами, ссылка может использоваться для указания на конкретный фрагмент документа. Принцип работы такой гиперссылки состоит в том, что она указывает на заранее определенные точки (якоря), поставленные в нужном месте целевой страницы. Таким образом, ссылка и якорь могут находиться как на одной, так и на разных страницах. Якорь устанавливается с помощью конструкции <a name="имя_якоря"> </a> . Имя якоря, как вы понимаете, позволяет однозначно опознать нужный фрагмент. После этого можно делать непосредственно саму ссылку. В случае, если и ссылка, и якорь расположены в одном документе, она будет выглядеть так: <a href="#имя_якоря"> Текст ссылки</a> .
Неплохие результаты дает совместное использование таких якорей и заголовков различных уровней. В этом случае можно использовать еще один способ создания якоря — с помощью добавления к нужному элементу атрибута id: <H2 id="имя_якоря"> Глава 1</H2> . Гиперссылка на такой элемент выполняется тем же способом, что и на <a name> . В результате получается весьма логичная разбивка документа на разделы, по которой можно легко построить, например, оглавление.
На этом закончим краткий экскурс в теорию ссылок и посмотрим, как организована работа с ними в пакете Dreamweaver MX.
Начнем с простого — с создания ссылок. Как вы уже могли заметить, в Dreamweaver одну и ту же операцию, как правило, можно выполнить несколькими способами. Это в полной мере относится и к гиперссылкам.
Первый и наиболее очевидный способ добавить ссылку — воспользоваться панелью Properties. Для этого вначале необходимо выделить на странице фрагмент текста или картинку, от которых вы желаете сделать ссылку, после чего внести адрес файла, на который вы ссылаетесь, в поле Link. Если ссылка ведет на другую страницу вашего сайта, можно указать его с помощью диалога выбора файла, который вызывается кнопкой с изображением папки. Здесь стоит отметить только опцию Relative To, от установки которой зависит, будет ли адрес ссылки прописан относительно документа или же корневого каталога сайта.
Второй способ — пункт Hyperlink меню Insert или одноименная кнопка на панели Common группы Insert. В поле Text вносится видимый текст ссылки, ну, а в Link — адрес файла или страницы.
Еще быстрее ссылку можно сделать, если у вас открыта панель Site. Вызвать ее можно через меню Window — Site или же клавишей F6. Там открывайте вкладку Files. Теперь выберите на панели Properties кнопку, на которой изображен своеобразный "прицел" (Point to file), и, удерживая левую клавишу мыши нажатой, тащите появившуюся стрелку на тот файл, отображаемый в списке панели Site, к которому вы хотите сделать ссылку. Наконец, того же эффекта можно добиться и без кнопки Point To File, если шелкнуть по выделенному фрагменту левой кнопкой мыши, удерживая при этом нажатой кнопку Shift. Появится все та же стрелка с прицелом, которую можно тащить на нужный файл или якорь. Таким образом, изготовление ссылки происходит максимально наглядно и достаточно быстро.
Работа со ссылками на якоря в тексте документа очень похожа на работу с обычными ссылками. Для вставки такого якоря в режиме визуального отображения нужно установить курсор на желаемую позицию, после чего использовать меню Insert — Named Anchor, одноименную кнопку панели Common группы Insert или же горячую комбинацию Ctrl+Alt+A. В открывшемся диалоге указывается имя новоиспеченного якоря. Помните, что пробелов там быть не должно. В результате на вашей странице должен появиться небольшой значок с символическим изображением якоря.
Второй этап — изготовление самой ссылки. Его отличие от уже рассмотренного нами процесса вставки ссылки на документ заключается в том, что в поле Link вписывается знак "#" и имя требуемого якоря. Если вы хотите сделать ссылку на якорь, который находится в другом документе, пишете вначале имя файла с расширением, после которого без пробела ставите "#" с именем якоря, то есть: имя_файла.html#имя_ якоря.
Работают и описанные ранее приемы с перетаскиванием. Так, например, ссылку от выделенного фрагмента текста к нужному якорю также можно сделать мышью при удержании нажатой кнопки Shift или кнопочкой на панели Properties. Если у вас открыто несколько документов, такими способами можно делать ссылки на якоря, расположенные на других страницах.
Если вам понадобится открыть для редактирования страницу сайта, на которую ведет ссылка активного в данный момент документа, дважды щелкните по ней с нажатой клавишей Ctrl или откройте меню Modify — Open Linked Page.
Как вы могли заметить, мы пока не затронули ни одной операции, которую нельзя было бы сделать в обычном "Блокноте" или напрямую в коде. Действительно, иногда "ручной" набор строки кода занимает меньше времени, чем возня с диалоговыми окнами. Прелесть специализированных программ в полной мере ощущается на уровне менеджмента ссылок.
На активно развивающемся сайте количество ссылок может исчисляться многими десятками, а то и зашкаливать за сотни. Пакет Dreamweaver MX обладает рядом инструментов, облегчающих управление большим количеством ссылок.
Первый "бонус" — автоматическое отслеживание и корректирование входящих и исходящих ссылок документа при его перемещении или переименовании. Проверить состояние этой опции можно в меню Edit — Preferences (Ctrl+U). На вкладке General окна Preferences найдите секцию Document Options, где нас будет интересовать выпадающий список, озаглавленный Update Links when Moving Files. Там доступно три варианта поведения программы. При Always коррекция ссылок производится во всех случаях автоматически без вашего вмешательства. Выбрав пункт Never, можно полностью отключить данный инструмент. В случае включения Prompt Dreamweaver MX будет каждый раз вежливо спрашивать вашего согласия на выполнение замен.
Еще один способ оптовой обработки ссылок — инструмент Change Link Sitewide. C его помощью можно заменить все ссылки на определенный файл, которые имеются на вашем сайте. Диалог предельно прост — просто указываем, что именно надо менять, и новое значение. Данное средство весьма полезно при удалении страниц сайта.
Для ускорения работы названных инструментов при работе над большими сайтами пакет может создавать особый служебный кэш-файл, в котором хранится информация о ссылках. Включить его использование можно с помощью диалога свойств сайта, о котором уже было рассказано в одной из предыдущих статей. В разделе Local Info есть пункт Enable Cashe, который в данном случае и нужно отметить. Для перестройки названного файла служит пункт Recreate Site Cache меню Site, которое, в свою очередь, доступно на панели Site.
Панель инструментов Site предоставляет доступ еще к одному инструменту визуализации структуры ссылок на сайте. Откройте данную панель в расширенном режиме, для чего служит кнопка Expand/ Collapse. Теперь переключаемся в режим карты сайта. Это можно сделать, как вы уже, наверное, привыкли, тремя способами: кнопкой Site Map, меню View — Site Map или же комбинацией Alt+F8. Связи между файлами представляются в виде наглядной структуры вашего проекта. На любой странице можно щелкнуть правой кнопкой мыши и вызвать контекстное меню, в котором находится ряд полезных пунктов. Мы не будем подробно рассматривать все команды, куда интересней и полезней будет самостоятельно потренироваться в их использовании — команды достаточно очевидны, и после некоторой практики все быстро станет на свои места.
Весьма удобной следует признать возможность проверки всего разрабатываемого сайта на наличие "потерянных" файлов и "битых" ссылок.
Так, для проверки ссылок, ведущих на различные позиции от конкретной открытой в редакторе страницы, служит команда Check Links из меню File — Check Page. Результаты работы инструмента Link Checker будут выведены в панели Properties. Этот отчет можно сохранить с помощью соответствующей кнопки.
Таким же образом можно проверить группу страниц, которые для этого надо выделить в списке панели Site. Сайт целиком проверяется посредством пункта Check Links Sitewide меню Site или же комбинацией Ctrl+F8. Некорректные ссылки можно сразу же исправить, указав правильные значения.
Кроме подробно рассмотренных сегодня ссылок на файлы и якоря, в документах существует еще несколько видов ссылок. Такие элементы могут использоваться в динамических элементах страницы и скриптах. Их мы будем рассматривать отдельно и несколько позже, а вот почтовые ссылки упомянем сейчас.
Ссылка на почтовый адрес в HTML реализована очень просто. Для этого используется элемент mailto:, после которого указывается необходимый адрес электронной почты. Соответственно, можно либо вписать данную конструкцию в поле Link панели Properties, либо использовать кнопку E-Mail Link панели Common группы Insert и сделать все "с нуля". Вообще-то размещение на web-странице таких простых почтовых ссылок считается не совсем удачным решением с точки зрения безопасности — существует ряд приемов, позволяющих "спрятать" эту информацию от недобросовестных людей и роботов, однако их рассмотрение выходит за рамки сегодняшней статьи.
Как обычно, подведем краткие итоги. Мы ближе познакомились с такими важными элементами web-страницы, как ссылки, а также с реализацией работы с ними в пакете Dreamweaver MX. Кроме этого, были рассмотрены встроенные в данный редактор инструменты управления ссылками как в масштабе отдельной страницы, так и сайта в целом, которые способны значительно повысить эффективность работы над проектами с большим количеством взаимосвязанных страниц.
Алексей Кутовенко, alteridem@tut.by
Компьютерная газета. Статья была опубликована в номере 21 за 2004 год в рубрике soft :: интернет
