• Глава 3. Начинаем с текста
      Форматирование отдельных символов
      Использование HTML-стилей
      Работа с гиперссылками
      Общие свойства веб-страницы
  
  Содержание

Работа с гиперссылками

В главе 1 мы уже говорили о гиперссылках. Пора научиться создавать их в среде Dreamweaver.
Для того чтобы описать личность нашего незабвенного Ивана Ивановича Иванова, нам нужно пять Web-страниц: главная, список увлечений, список проектов, более подробные сведения об авторе и любимые ссылки. В данный момент у нас готова только главная страница. И прежде, чем мы приступим к созданию других страниц, узнаем, как же создаются гиперссылки.

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

А создаются они очень просто. И в этом — большая заслуга разработчиков Dreamweaver, сделавших продукт, реализующий просто даже весьма сложные задачи.

Но хватит петь дифирамбы Dreamweaver. Давайте попробуем его в настоящем деле! Вставим в текст нашей пока что единственной Web-страницы две гиперссылки, указывающие "вовне" нашего сайта: на "домашний" сайт фирмы Macromedia — создателя Dreamweaver и на почтовый адрес гипотетического Ивана Ивановича. Щелкнув по первой из них, пользователь сможет попасть на сайт http://www.macromedia.com, а щелкнув на второй — написать письмо Ивану Ивановичу. Второй ссылкой мы займемся чуть позже, а пока...

Выделим название фирмы Macromedia и обратим внимание на редактор свойств. Мы сразу заметим большое поле ввода интернет-адреса для гиперссылки (рис. 3.39).

Рис. 3.39. Поле ввода интернет-адреса в редакторе свойств

Все, что нам нужно сделать, — это ввести в него интернет-адрес сайта Macromedia и нажать клавишу <Entcr>. Результат появится сразу (рис. 3.40). Теперь при просмотре в Web-обозревателе пользователь может просто щелкнуть мышью по слову "Macromedia", чтобы перейти на "домашний" сайт этой фирмы.

Вы уже заметили, что после вставки гиперссылки слово "Macromedia" изменило свой цвет на синий и стало подчеркнутым, хотя мы явно не задавали для него никакого HTML-форматирования. Дело в том, что, согласно стандарту HTML, текст-содержимое гиперссылок форматируется особым образом, чтобы его всегда можно было отличить от остального текста. И по умолчанию все ссылки, еще не посещенные пользователем, выделяются синим цветом.

Рис. 3.40. Гиперссылка, указывающая на сайт Macromedia

Для создания гиперссылки из выделенного текста вы также можете воспользоваться пунктом Make Link меню Modify или контекстного меню или нажать комбинацию клавиш <Ctrl>+<L>. После этого на экране появится диалоговое окно Select File, показанное на рис. 3.41. Нужный адрес вводится в поле ввода URL этого окна. Остальные элементы управления лучше пока не трогать — мы рассмотрим их позже, когда будем связывать воедино все Web-страницы нашего сайта. Не забудьте нажать кнопку ОК, чтобы Dreamweaver создал эту гиперссылку.

Рис. 3.41. Диалоговое окно Select File

Просматривая рис. 3.39, вы, вероятно, обратили внимание, что справа от поля ввода интернет-адреса находятся две небольшие кнопки. Кнопка в виде мишени, находящаяся левее, нам пока бесполезна — мы рассмотрим ее, когда будем говорить об управлении сайтом, в главе 6. Кнопка в виде папки, находящаяся правее, позволит вам открыть то же самое диалоговое окно Select File.

Впоследствии вы можете изменить интернет-адрес вашей гиперссылки. Для этого поставьте текстовый курсор на текст гиперссылки, измените адрес и нажмите кнопку <Enter>. Вы также можете воспользоваться пунктом Change Link меню Modify или контекстного меню или нажмите комбинацию клавиш <Ctrl>+<L>. После этого на экране появится все то же незаменимое диалоговое окно Select File, в котором вы сможете изменить интернет-адрес.

Для удаления гиперссылки и превращения ее содержимого в обычный текст воспользуйтесь пунктом Remove Link меню Modify или контекстного меню или нажмите комбинацию клавиш <Ctrl>+<Shift>+<L>.

Отлично! Мы имеем гиперссылку для перехода на сайт Macromedia. Чего еще желать?

Много чего. Например, мы можем сделать так, что при переходе на сайт Macromedia пользователь будет иметь возможность просматривать также и сайт Иванова. Как это сделать? Очень просто: мы откроем сайт Macromedia в новом окне Web-обозревателя.

Поставьте текстовый курсор где-нибудь в тексте гиперссылки и снова посмотрите на редактор свойств. На рис. 3.42 показан раскрывающийся список задания цели гиперссылки.

Рис. 3.42. Раскрывающийся список задания цели гиперссылки, расположенный в редакторе свойств

Этот список содержит четыре пункта, но сейчас полезными для нас будут только два: _blank и _self. Первый из них позволит вывести страницу, на которую указывает гиперссылка, в новом окне Web-обозревателя, а второй — в том же окне. (Вместо того чтобы выбирать второй пункт списка, вы можете просто оставить его содержимое пустым.) В данном случае вам нужно выбрать пункт _blank.

Для задания цели гиперссылки вы также можете воспользоваться подменю Link Target меню Modify или подменю Target Frame контекстного меню. Для этого выберите нужный пункт-переключатель. Пункт Default Frame задает цель по умолчанию.

Примечание

Гиперссылка создается с помощью парного тега <А>, внутри которого помещается текст. Этот тег содержит обязательный атрибут HREF, задающий интернет-адрес назначения. Кроме того, данный тег может включать атрибут TARGET, задающий цель гиперссылки.

Вот мы и сделали первую нашу гиперссылку. Теперь примемся за вторую.

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

Вторая гиперссылка будет слегка отличаться от первой. Хотя бы потому, что она указывает не на Web-страницу, а на почтовый адрес, и при щелчке на ней пользователь попадет в окно открывшейся программы почтового клиента, установленного в системе по умолчанию. И еще: гиперссылку, указывающую на почтовый адрес, нужно записать особым образом.

Давайте вспомним интернет-адрес сайта Macromedia: http://www.macromedia.com и придумаем почтовый адрес, который может быть у нашего гипотетического Web-дизайнера Ивана Иванова:
ivanov@somemail.ru

Немного теории. Почтовый адрес состоит из имени почтового ящика и имени сервера почты, разделенных символом "@" ("коммерческое эт", также известен как "собака", "ухо" или "улитка"). Вы можете провести аналогии между номером абонементного ящика и адресом почтового отделения, где этот ящик находится. Значок "коммерческое эт" - первый признак, что перед нами почтовый адрес.

Согласно стандарту HTML, этот почтовый адрес должен быть записан так: mailto:ivanov@somemail.ru причем между двоеточием после "mailto" и собственно адресом не должно быть пробела.

В последнем абзаце, где говорится об авторских правах, есть имя автора. Из него-то мы и сделаем гиперссылку, указывающую на почтовый адрес. Для этого выделим имя автора и введем почтовый адрес в приведенном выше формате в поле адреса редактора свойств. После нажатия клавиши <Enter> мы получим результат, показанный на рис. 3.43.

Рис. 3.43. Гиперссылка, указывающая на почтовый адрес

Как видите, эта гиперссылка внешне ничем не отличается от сделанной нами ранее. Фактически, гиперссылки, указывающие на Web-страницы и почтовые адреса, ничем не отличаются друг от друга. И чтобы не обескуражить пользователя, вам придется самим дать понять ему, что он получит в результате. Вы можете написать где-то в тексте, что это почтовый адрес, или сделать что-то еще.

К несчастью, из-за ошибки в Dreamweaver невозможно отредактировать почтовый адрес, помещенный в гиперссылку. Если вы выберете пункт Change Link в меню Modify (или нажмете комбинацию клавиш <Ctrl>+<L>), то вместо полного адреса в диалоговом окне Select File появится только адрес почтового сервера. Так что вам для этих целей лучше воспользоваться редактором свойств.

Есть еще один способ создать гиперссылку, указывающую на почтовый адрес, более элегантный. Для этого необходимо либо переключиться на страницу Common панели объектов и щелкнуть кнопку Email Link (рис. 3.44), либо выбрать пункт Email Link в меню Insert. В результате этих действий на экране появится небольшое диалоговое окно Email Link, показанное на рис. 3.45.

Рис. 3.44. Кнопка Email Link панели объектов

Рис. 3.45. Диалоговое окно Email Link

В поле Text самим Dreamweaver подставляется текст, который будет являться содержимым гиперссылки — имя, выделенное нами в окне документа. К сожалению, при этом Dreamweaver портит русский текст, превращая его в набор невразумительных черточек и квадратиков, так что вам, скорее всего, придется ввести его заново. В поле E-Mail вам нужно будет ввести почтовый адрес, причем ввести его нужно без "mailto:". После этого остается нажать кнопку ОК для создания гиперссылки или Cancel — для отказа от этого.

Использование "якорей"

Теперь самое время узнать еще об одном виде гиперссылок, весьма специфичном. Это так называемые "якоря" (по-английски — anchors). В отличие от других гиперссылок, они не указывают на другую страницу (файл, адрес электронной почты), а помечают некоторый участок текста текущей страницы, чтобы другая гиперссылка могла на него сослаться.

Зачем это нужно? Ну, например, если ваша Web-страница содержит большой текст, разбитый на главы (кто знает, может, вы написали роман и выложили его в Сети), вы можете поместить в начале нее оглавление. При щелчке на пункте оглавления пользователь тотчас перескакивает на соответствующую главу вашего труда. Очень удобно!

"Якорь" не отображается Web-обозревателем. Однако Dreamweaver, чтобы помочь Web-дизайнеру, показывает на странице специальный значок.

Для того чтобы научиться работать с "якорями", создадим небольшую учебную страничку. Ничего особенного на ней нет: просто небольшой фрагмент текста из этой книги, разумеется, отформатированный. После этого напишем в начале страницы небольшое оглавление. И, наконец, сохраним ее в файле 3.3.htm. Получившаяся страничка показана на рис. 3.46.

Теперь вставим на эту страницу первый "якорь", для чего поместим текстовый курсор в начало первого абзаца, после заголовка, и переключимся на страницу Common панели объектов. Кнопка вставки "якоря" Named Anchor показана на рис. 3.47. Нажмите ее. Вы также можете воспользоваться пунктом Named Anchor меню Insert или просто нажать комбинацию клавиш <Ctrl>+<Alt>+<A>.

В результате этих действий на экране появится диалоговое окно Named Anchor, показанное на рис. 3.48. В поле ввода Anchor Name введите имя вставляемого "якоря"; в нашем случае это будет pari. Имена "якорей" должны состоять из латинских букв и цифр, причем первым символом должна быть буква. После этого нажмите кнопку ОК, чтобы вставить "якорь", или Cancel — для отказа от этого.

Dreamweaver отобразит значок "якоря" (рис. 3.49) в позиции, где тот был вставлен. Это делается только для удобства Web-дизайнера, Web-обозреватель, как вы помните, "якоря" на страницах вообще не отображает.

Если вы выделите значок "якоря", редактор свойств изменит свой вид. На нем появится единственное поле ввода Name, в котором вы сможете изменить имя "якоря".

Рис. 3.46. Учебная Web-страница, где будут использованы "якоря"

Рис. 3.47. Кнопка Named Anchor панели объектов

Рис. 3.48. Диалоговое окно Named Anchor

Рис. 3.49. Значок "якоря" в окне документа Dreamweaver

Теперь создадим гиперссылку, ссылающуюся на "якорь". Выделим строку "Абзац 1" в оглавлении. Адрес, на который она ссылается, будет выглядеть так: #par1.

Значок "решетки" (#) означает, что перед нами имя "якоря". Введите его в поле адреса редактора свойств и нажмите клавишу <Enter>. Полученная нами гиперссылка ничем не будет отличаться от обычной, указывающей на другую страницу.

Из другой Web-страницы на этот "якорь" можно сослаться, написав перед "решеткой" имя файла этой страницы: 3.3.htm#par1.

Вот и все! Нам теперь только осталось разместить остальные три "якоря", помечающие второй, третий и четвертый абзацы, и три гиперссылки, ссылающиеся на них. Не будем описывать это — вы уже знаете, как это делается.

Закончив страницу, сохраните ее и вызовите для предварительного просмотра в Web-обозревателе. Теперь уменьшите его окно так, чтобы в нем не помещалось текста больше одного абзаца, и щелкните по гиперссылке, указывающей на третий абзац текста. Содержимое окна Web-обозревателя будет тотчас прокручено вверх так, что в нем появится третий абзац, т. е. вставленные нами "якоря" и гиперссылки, составляющие оглавление, работают.

<<- Содержание
Содержание учебника

Далее ->>
Общие свойства веб-страницы