Узнайте, как настроить навигацию между веб-страницами. В Dreamweaver можно связывать ссылками файлы и документы, обновлять, изменять и проверять эти ссылки.

Перед созданием ссылки следует разобраться в работе абсолютных ссылок и ссылок относительно документа и корня сайта. В документе можно создать несколько типов ссылок.

  • Ссылка на другой документ или файл — графический, звуковой, видеофайл или PDF-файл.

  • Именованная ссылка на привязку документа, с помощью которой можно переместиться в определенное место документа.

  • Ссылка на адрес электронной почты, при щелчке на которую открывается окно нового письма с заполненной строкой адресата.

  • Нулевые ссылки или ссылки на сценарии, с помощью которых можно присоединять поведение к объектам или выполнять код JavaScript.

Ссылки на изображение, объекты, текст или другие документы или файлы можно создавать с помощью инспектора свойств или значка «Указать файл».

Dreamweaver создает ссылки на другие страницы сайта с помощью путей относительно документа. Можно настроить Dreamweaver таким образом, что новые ссылки будут создаваться с помощью путей относительно корневого каталога.

Примечание.

Следует всегда сохранять новый файл перед созданием пути относительно документа. Подобные пути не работают без определенной начальной позиции. Если перед сохранением файла создать путь относительно документа, Dreamweaver будет использовать абсолютный путь, который начинается с file://, пока файл не будет сохранен. После сохранения файла Dreamweaver преобразует путь file:// в относительный путь.

Присоединить поведение можно к любой ссылке в документе. При вставке связанных элементов в документы можно использовать следующие варианты поведения.

Задать текст строки состояния.

Определяет текст сообщения и отображает его на панели состояния в нижнем левом углу окна браузера. Например, с помощью этого поведения можно отображать на панели состояния целевой объект ссылки, а не отображать в ней URL-адрес.

Открытие окна браузера.

Открывает URL-адрес в новом окне. Можно указать свойства нового окна: имя, размер, атрибуты (а также задать, доступны ли для изменений его размеры, отображается ли строка меню и т. д.).

Меню переходов.

Редактирует меню переходов. Можно изменить список элементов меню, определить другой связанный файл или изменить расположение браузера, в котором открывается связанный документ.

Для создания ссылок на изображение, объект, текст или другой документ или файл можно использовать значок папки в инспекторе свойств или поле «Ссылка».

  1. Выберите текст или изображение в представлении «Дизайн» окна документа.
  2. Откройте инспектор свойств («Окно» > «Свойства») и выполните одно из следующих действий.
    • Щелкните значок папки , находящийся справа от поля «Ссылка», и укажите нужный файл.

      Путь к связанному документу появится в поле URL-адреса. С помощью всплывающего меню «Относительно» в диалоговом окне «Выбор файла» создайте путь относительно документа или относительно корня сайта и нажмите кнопку «ОК». Выбранный тип пути применяется только к текущей ссылке. (Установленную по умолчанию настройку поля «Относительно» можно изменить для каждого сайта.)

    • Введите путь и имя документа в поле «Ссылка».

      При создании ссылки на документ на текущем сайте введите путь относительно документа или корня сайта. При создании ссылки на документ на другом сайте введите абсолютный путь вместе с протоколом (например, http://). Аналогичные действия можно выполнить при вводе ссылки на еще не созданный файл.

  3. В раскрывающемся списке «Назначение» выберите расположение документа:

    • _blank означает загрузку связанного документа в новом окне браузера без имени.
    • _parent загружает связанный документ в родительский фрейм или родительское окно фрейма, содержащего ссылку. Если содержащий ссылку фрейм не является вложенным, то связанный документ загружается в полное окно браузера.
    • _self загружает связанный документ в тот же фрейм или то же окно, в котором находится ссылка. Это назначение установлено по умолчанию, поэтому обычно его можно не определять.
    • _top загружает связанный документ в полное окно браузера, тем самым удаляя все фреймы.
    • _new означает загрузку связанного документа в новом окне.
  1. Выберите текст или изображение в представлении «Дизайн» окна документа.
  2. Создайте ссылку одним из двух способов:
    • Перетащите значок «Указать файл»  (значок назначения) в правую часть поля «Ссылка» инспектора свойств и укажите на видимую привязку в текущем документе, видимую привязку в другом открытом документе, элемент с уникальным идентификатором или документ на панели «Файлы».

    • Удерживая клавишу Shift, перетащите выделенный фрагмент и укажите на видимую привязку в текущем документе, видимую привязку в другом открытом документе, элемент с уникальным идентификатором или документ на панели «Файлы».

    Примечание.

    Создавать ссылки на другой открытый документ можно только в том случае, если документы не развернуты в окне документа. Чтобы разместить документы мозаикой, выберите «Окно > Упорядочить > Каскад» или «Окно > Упорядочить > Замостить». При указании на открытый документ этот документ перемещается на передний план экрана на время выделения.

Команда «Гиперссылка» позволяет создавать текстовые ссылки на изображения, объекты, а также на другие файлы и документы.

  1. Поместите курсор вставки в то место документа, где должна быть ссылка.
  2. Чтобы отобразить диалоговое окно «Гиперссылка», выполните одно из следующих действий.

    • Выберите «Вставка» > «Гиперссылка».

    • В категории «Общие» на панели «Вставка» нажмите кнопку «Гиперссылка».

  3. В поле «Текст» введите текст ссылки.
    В раскрывающемся меню «Ссылка» выберите имя файла, на который следует установить ссылку. Также можно щелкнуть по значку папки, чтобы перейти к файлу, на который необходимо создать ссылку.

  4. В раскрывающемся списке «Целевой объект» выберите окно, в котором следует открыть файл, либо введите его имя.

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

    • _blank — загрузка связанного файла в новом окне браузера без имени.
    • _parent — загрузка связанного файла в родительском наборе фреймов или окне фрейма, содержащего ссылку. Если фрейм, содержащий ссылку, не является вложенным, связанный файл загружается в полном окне браузера.
    • _self — загрузка связанного файла в том же фрейме или окне, что и ссылка. Этот целевой объект установлен по умолчанию, поэтому обычно ее не требуется указывать.
    • _top — загрузка связанного файла в полном окне браузера с удалением всех фреймов.
    • _new означает загрузку связанного документа в новом окне.
  5. В поле «Индекс вкладки» введите число очередности переключения.
  6. В поле «Название» введите название ссылки.
  7. В поле «Ключ доступа» введите значение (одну букву) для выбора ссылки в браузере.
  8. Нажмите кнопку «ОК».

По умолчанию Dreamweaver создает ссылки на другие страницы сайта с путями относительно документа. Чтобы использовать путь относительно корня сайта, сначала следует определить локальную папку в Dreamweaver. Для этого нужно выбрать локальную корневую папку, которая будет выступать в роли корневой папки сервера. Dreamweaver использует эту папку для определения путей к файлам относительно корня сайта.

  1. Выберите «Веб-сайт» > «Управление веб-сайтами».
  2. В диалоговом окне «Управление веб-сайтами» дважды щелкните нужный сайт в списке.
  3. В диалоговом окне «Настройка сайта» разверните «Дополнительные параметры» и выберите категорию «Локальная информация».
  4. Установите относительный путь к новым ссылкам. Для этого выберите параметр «Документ» или «Корень сайта».

    Изменение данного параметра не приведет к преобразованию путей существующих ссылок после нажатия на кнопку «ОК». Этот параметр будет применяться только для новых ссылок, созданных с помощью Dreamweaver.

  5. Нажмите кнопку «Сохранить».

    Новые параметры пути будут применены только к текущему сайту.

Создать ссылки на определенную часть документа можно с помощью инспектора свойств (прежде всего необходимо создать именованные привязки). Именованные привязки позволяют установить маркеры в документе, которые обычно отмечают заголовки документа или его начало. Затем можно создать ссылки на данные именованные привязки, что позволит посетителям сайта быстро переходить в нужное место документа.

Ссылка на именованную привязку создается в два этапа. Сначала создается именованная привязка, а затем ссылка на нее.

Создание привязки

  1. В окне «Документ» выберите и выделите элемент, который нужно установить в качестве привязки.

  2. Откройте инспектор свойств и проверьте, имеет ли выделенный объект идентификатор. Если поле идентификатора пусто, добавьте идентификатор. Например, используйте значение Anchor.

    Создание привязки
    Создание привязки

    После добавления идентификатора обратите внимание на изменение в коде. Фрагмент id="<ID name>" будет вставлен в код на месте выделения.

    Идентификатор привязки в коде
    Добавление привязок для организации ссылок

  1. В представлении «Дизайн» окна документа выберите текст или изображение для размещения ссылки.
  2. В поле «Ссылка» инспектора свойств введите знак номера (#) и имя привязки. Например, для создания ссылки на привязку с именем «top» в текущем документе введите #top. Для создания привязки с именем «top» в другом документе той же папки введите filename.html#top.

    Примечание.

    Имена привязок обрабатываются с учетом регистра.

  1. Откройте документ с именованной привязкой.

    Примечание.

    Если привязка не отображается, выберите в представлении «Дизайн» меню «Просмотр > Параметры представления "Дизайн" > Средства визуализации > Невидимые элементы», чтобы сделать привязки видимыми.

  2. В представлении «Дизайн» окна документа выберите текст или изображение, в которые нужно поместить ссылку. (Если открыт другой документ, переключитесь на нужный.)
  3. Выполните одно из следующих действий.
    • Щелкните значок «Указать файл»  (значок назначения) справа от поля «Ссылка» инспектора свойств и перетащите его на привязку, на которую нужно создать ссылку: привязку того же документа или привязку другого открытого документа.

    • Удерживая клавишу Shift, перетащите указатель в окне документа с выделенного текста или изображения на нужную привязку: привязку того же документа или привязку другого открытого документа.

При переходе по ссылке на адрес электронной почты открывается пустое окно создания сообщения (в почтовой программе, настроенной в браузере). В окне сообщения электронной почты в поле «Кому» автоматически вставляется адрес, указанный в ссылке.

  1. В представлении «Дизайн» окна документа поместите курсор вставки в нужное место либо выберите текст или изображение, которые должны стать ссылкой.
  2. Чтобы вставить ссылку, выполните одно из следующих действий.
    • Выберите «Вставка» > «Ссылка на адрес электронной почты».

    • В категории «Общие» на панели «Вставка» нажмите кнопку «Ссылка на адрес электронной почты».

  3. В поле «Текст» введите или измените текст электронного письма.
  4. В поле «Электронная почта» введите адрес электронной почты и нажмите кнопку «ОК».
  1. Выберите текст или изображение в представлении «Дизайн» окна документа.
  2. В поле «Ссылка» инспектора свойств введите mailto: и адрес электронной почты.

    Нельзя помещать пробелы между двоеточием и адресом электронной почты.

Автоматическое заполнение строки темы в электронном письме

  1. Создайте ссылку на электронное письмо с помощью инспектора свойств, как описано выше.
  2. В поле «Ссылка» инспектора свойств после адреса электронной почты добавьте ?subject=, после чего введите тему. Между знаком вопроса и концом адреса электронного письма не должно быть пробелов.

    Полная запись будет выглядеть следующим образом:

    mailto:someone@yoursite.com?subject=Mail from Our Site

Нулевой ссылкой называется необозначенная ссылка. Нулевые ссылки используются для добавления поведения в объекты или текст на странице. Например, можно добавить такое поведение, при котором будет заменяться изображение или отображаться элемент с абсолютным позиционированием при наведении курсора на ссылку.

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

  1. Выберите текст, изображение или объект в представлении «Дизайн» окна документа.
  2. В инспекторе свойств введите javascript:; (слово javascript, затем двоеточие, затем точка с запятой) в окне «Ссылка».
  1. Выберите текст, изображение или объект в представлении «Дизайн» окна документа.
  2. В окне «Ссылка» инспектора свойств введите javascript: , затем код JavaScript или вызываемую функцию. (Нельзя помещать пробелы между двоеточием и кодом или вызываемой функцией.)

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

Для ускорения процесса обновления в Dreamweaver можно создать файл кэша, в котором будут храниться сведения обо всех ссылках в локальной папке. Файл кэша незаметно обновляется при каждом добавлении, изменении или удалении ссылок на локальном сайте.

  1. Выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh).
  2. В диалоговом окне «Настройки» выберите в списке слева категорию «Общие».
  3. В разделе «Параметры документа» установок «Общие» выберите во всплывающем меню параметр «Обновлять ссылки в случае перемещения файлов».

    Всегда

    Автоматическое обновление всех ссылок в выбранном документе или на выбранный документ при его перемещении или переименовании.

    Никогда

    Отсутствие автоматического обновления всех ссылок в выбранном документе или на выбранный документ при его перемещении или переименовании.

    Запрос

    Отображение диалогового окна со списком всех файлов, в которые необходимо внести изменения. Выберите «Обновить» для обновления ссылок в этих файлах либо «Не обновлять», чтобы изменения не вносились.

  4. Нажмите кнопку «ОК».

Создание файла кэша для сайта

  1. Выберите «Веб-сайт» > «Управление веб-сайтами».
  2. Выберите сайт и нажмите кнопку «Редактировать».
  3. В диалоговом окне «Настройка сайта» разверните «Дополнительные параметры» и выберите категорию «Локальная информация».
  4. В категории «Локальная информация» выберите «Включить кэш».

    При первом изменении или удалении ссылок на файлы локальной папки после запуска Dreamweaver появится запрос на загрузку кэша. При нажатии кнопки «Да» Dreamweaver загрузит кэш и обновит все ссылки на измененные файлы. При нажатии кнопки «Нет» изменения запишутся в кэш, но Dreamweaver не загрузит кэш и не выполнит обновление ссылок.

    Загрузка кэша для больших сайтов может занять несколько минут, так как Dreamweaver должен определить наличие обновлений кэша путем сравнения временных меток файлов на локальном сайте с записанными в кэше метками. Если вне Dreamweaver файлы не изменялись, то при появлении этого запроса можно спокойно нажимать кнопку «Остановить».

Повторное создание кэша

  1. На панели «Файлы» выберите «Веб-сайт» > «Дополнительно» > «Перестройка кэша веб-сайта».

В дополнение к автоматическому обновлению программой Dreamweaver ссылок при перемещении или переименовании файла можно вручную изменить все ссылки (включая ссылки на электронную почту, ссылки на FTP, нулевые ссылки и ссылки на сценарии).

Эту функцию удобнее всего использовать при удалении файла, на который были ссылки в других файлах. Однако ее можно использовать и в других целях. Например, по всему сайту с фразой «Фильмы месяца» связана ссылка /film/aprel.html. 1 августа можно изменить все эти ссылки на путь /film/may.html.

  1. Выберите файл в локальном представлении панели «Файлы».

    Примечание.

    При изменении ссылки на электронную почту, ссылки на FTP, нулевой ссылки или ссылки на сценарий выбирать файл не требуется.

  2. Выберите «Веб-сайт > Параметры веб-сайта > Изменить ссылку на всем веб-сайте».

  3. Установите следующие параметры в диалоговом окне «Изменить ссылку на всем сайте»:

    Изменить все ссылки на

    Щелкните значок папки  и выберите файл, ссылки на который следует убрать. При изменении ссылки на электронную почту, ссылки на FTP, нулевой ссылки или ссылки на сценарий введите полный текст изменяемой ссылки.

    На ссылку на

    Щелкните значок папки  для выбора файла, на который следует установить ссылку. При изменении ссылки на электронную почту, ссылки на FTP, нулевой ссылки или ссылки на сценарий введите полный текст новой ссылки.

  4. Нажмите кнопку «ОК».

    Dreamweaver внесет изменения во все документы, в которых есть ссылка на выбранный файл, создаст ссылки на новый файл с уже используемым в документе форматом пути (например, если старый путь был относительно документа, то и новый будет таким же).

    После изменения ссылки по всему сайту выбранный файл станет потерянным (на локальном диске не будет файлов, указывающих на него). Его можно будет безопасно удалить, не нарушая связей локального сайта Dreamweaver.

    Примечание.

    Так как эти изменения вносятся локально, необходимо вручную удалить соответствующий потерянный файл из удаленной папки и проверить все файлы, в которых были изменены ссылки. Иначе посетители сайта не увидят изменений.

В Dreamweaver ссылки являются неактивными. Поэтому нельзя открыть связанный документ путем перехода по ссылке в окне документа.

  1. Выполните одно из следующих действий.
    • Щелкните правой кнопкой мыши по ссылке и выберите «Открыть страницу, на которую указывает ссылка».

    • Нажмите кнопку Ctrl (Windows) или Command (Macintosh) и дважды щелкните ссылку.

    Примечание.

    Связанный документ должен быть расположен на локальном диске.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет