Узнайте, как настроить навигацию между веб-страницами. В Dreamweaver можно связывать ссылками файлы и документы, обновлять, изменять и проверять эти ссылки.
Перед созданием ссылки следует разобраться в работе абсолютных ссылок и ссылок относительно документа и корня сайта. В документе можно создать несколько типов ссылок.
- Ссылка на другой документ или файл — графический, звуковой, видеофайл или PDF-файл.
- Именованная ссылка на привязку документа, с помощью которой можно переместиться в определенное место документа.
Ссылка на адрес электронной почты, при щелчке на которую открывается окно нового письма с заполненной строкой адресата.
Нулевые ссылки или ссылки на сценарии, с помощью которых можно присоединять поведение к объектам или выполнять код JavaScript.
Ссылки на изображение, объекты, текст или другие документы или файлы можно создавать с помощью инспектора свойств или значка «Указать файл».
Dreamweaver создает ссылки на другие страницы сайта с помощью путей относительно документа. Можно настроить Dreamweaver таким образом, что новые ссылки будут создаваться с помощью путей относительно корневого каталога.
Следует всегда сохранять новый файл перед созданием пути относительно документа. Подобные пути не работают без определенной начальной позиции. Если перед сохранением файла создать путь относительно документа, Dreamweaver будет использовать абсолютный путь, который начинается с file://, пока файл не будет сохранен. После сохранения файла Dreamweaver преобразует путь file:// в относительный путь.
Добавление вариантов поведения JavaScript к ссылкам
Присоединить поведение можно к любой ссылке в документе. При вставке связанных элементов в документы можно использовать следующие варианты поведения.
Задать текст строки состояния.
Определяет текст сообщения и отображает его на панели состояния в нижнем левом углу окна браузера. Например, с помощью этого поведения можно отображать на панели состояния целевой объект ссылки, а не отображать в ней URL-адрес.
Открытие окна браузера.
Открывает URL-адрес в новом окне. Можно указать свойства нового окна: имя, размер, атрибуты (а также задать, доступны ли для изменений его размеры, отображается ли строка меню и т. д.).
Меню переходов.
Редактирует меню переходов. Можно изменить список элементов меню, определить другой связанный файл или изменить расположение браузера, в котором открывается связанный документ.
Создание ссылок на документы с помощью инспектора свойств
Для создания ссылок на изображение, объект, текст или другой документ или файл можно использовать значок папки в инспекторе свойств или поле «Ссылка».
Щелкните значок папки
, находящийся справа от поля «Ссылка», и укажите нужный файл.Путь к связанному документу появится в поле URL-адреса. С помощью всплывающего меню «Относительно» в диалоговом окне «Выбор файла» создайте путь относительно документа или относительно корня сайта и нажмите кнопку «ОК». Выбранный тип пути применяется только к текущей ссылке. (Установленную по умолчанию настройку поля «Относительно» можно изменить для каждого сайта.)
Введите путь и имя документа в поле «Ссылка».
При создании ссылки на документ на текущем сайте введите путь относительно документа или корня сайта. При создании ссылки на документ на другом сайте введите абсолютный путь вместе с протоколом (например, http://). Аналогичные действия можно выполнить при вводе ссылки на еще не созданный файл.
В раскрывающемся списке «Назначение» выберите расположение документа:
- _blank означает загрузку связанного документа в новом окне браузера без имени.
- _parent загружает связанный документ в родительский фрейм или родительское окно фрейма, содержащего ссылку. Если содержащий ссылку фрейм не является вложенным, то связанный документ загружается в полное окно браузера.
- _self загружает связанный документ в тот же фрейм или то же окно, в котором находится ссылка. Это назначение установлено по умолчанию, поэтому обычно его можно не определять.
- _top загружает связанный документ в полное окно браузера, тем самым удаляя все фреймы.
- _new означает загрузку связанного документа в новом окне.
Создание ссылок на документы с помощью значка «Указать файл»
Перетащите значок «Указать файл»
(значок назначения) в правую часть поля «Ссылка» инспектора свойств и укажите на видимую привязку в текущем документе, видимую привязку в другом открытом документе, элемент с уникальным идентификатором или документ на панели «Файлы».Удерживая клавишу «Shift», перетащите выделенный фрагмент и укажите на видимую привязку в текущем документе, видимую привязку в другом открытом документе, элемент с уникальным идентификатором или документ на панели «Файлы».
Создавать ссылки на другой открытый документ можно только в том случае, если документы не развернуты в окне документа. Чтобы разместить документы мозаикой, выберите «Окно > Упорядочить > Каскад» или «Окно > Упорядочить > Замостить». При указании на открытый документ этот документ перемещается на передний план экрана на время выделения.
Добавление ссылки с помощью команды «Гиперссылка»
Команда «Гиперссылка» позволяет создавать текстовые ссылки на изображения, объекты, а также на другие файлы и документы.
Чтобы отобразить диалоговое окно «Гиперссылка», выполните одно из следующих действий.
Выберите «Вставка» > «Гиперссылка».
В категории «Общие» на панели «Вставка» нажмите кнопку «Гиперссылка».
В поле «Текст» введите текст ссылки.
В раскрывающемся меню «Ссылка» выберите имя файла, на который нужно создать ссылку.Также можно щелкнуть значок папки
, чтобы перейти к файлу, на который необходимо создать ссылку.
Имена всех фреймов текущего документа отобразятся во всплывающем списке. При указании несуществующего фрейма связанная страница откроется в новом окне, которое будет иметь указанное ранее имя. Имя можно выбрать также из следующих зарезервированных имен назначений.
- _blank — загрузка связанного файла в новом окне браузера без имени.
- _parent — загрузка связанного файла в родительском наборе фреймов или окне фрейма, содержащего ссылку. Если фрейм, содержащий ссылку, не является вложенным, связанный файл загружается в полном окне браузера.
- _self — загрузка связанного файла в том же фрейме или окне, что и ссылка. Этот целевой объект установлен по умолчанию, поэтому обычно ее не требуется указывать.
- _top — загрузка связанного файла в полном окне браузера с удалением всех фреймов.
- _new означает загрузку связанного документа в новом окне.
Создание ссылки на документ Word или Excel
В существующую страницу можно вставить ссылку на документ Microsoft Word или Excel.
Находясь в представлении «Дизайн», откройте страницу, в которую требуется добавить ссылку.
Перетащите файл из его текущего расположения на страницу Dreamweaver и расположите ссылку в нужном месте. Открывается диалоговое окно «Вставить документ».
Выберите команду «Создать ссылку» и нажмите кнопку «ОК».
Если документ, на который указывает ссылка, расположен вне корневой папки вашего сайта, Dreamweaver предложит скопировать документ в корень сайта.
Копирование документа в корневую папку сайта позволяет гарантировать доступность документа при публикации веб-сайта.
При загрузке страницы на веб-сервер следует загружать и файл Word или Excel. Теперь страница содержит ссылку на документ Word или Excel. Текст ссылки представляет собой имя файла, на который она указывает. Этот текст можно изменить в окне документа.
Установка относительного пути для новых ссылок
По умолчанию Dreamweaver создает ссылки на другие страницы сайта с путями относительно документа. Чтобы использовать путь относительно корня сайта, сначала следует определить локальную папку в Dreamweaver. Для этого нужно выбрать локальную корневую папку, которая будет выступать в роли корневой папки сервера. Dreamweaver использует эту папку для определения путей к файлам относительно корня сайта.
Изменение данного параметра не приведет к преобразованию путей существующих ссылок после нажатия на кнопку «ОК». Этот параметр будет применяться только для новых ссылок, созданных с помощью Dreamweaver.
Новые параметры пути будут применены только к текущему сайту.
Ссылка на определенное место документа
Создать ссылки на определенную часть документа можно с помощью инспектора свойств (прежде всего необходимо создать именованные привязки). Именованные привязки позволяют установить маркеры в документе, которые обычно отмечают заголовки документа или его начало. Затем можно создать ссылки на данные именованные привязки, что позволит посетителям сайта быстро переходить в нужное место документа.
Ссылка на именованную привязку создается в два этапа. Сначала создается именованная привязка, а затем ссылка на нее.
Создание привязки
В окне «Документ» выберите и выделите элемент, который нужно установить в качестве привязки.
Откройте инспектор свойств и проверьте, имеет ли выделенный объект идентификатор. Если поле идентификатора пусто, добавьте идентификатор. Например, используйте значение «Привязка».
После добавления идентификатора обратите внимание на изменение в коде. Фрагмент id="<ID name>" будет вставлен в код на месте выделения.
Создание ссылки обратно на привязку
Имена привязок обрабатываются с учетом регистра.
Создание ссылок на именованные привязки с помощью метода «Указать файл»
Если привязка не отображается, выберите в представлении «Дизайн» меню «Просмотр > Параметры представления "Дизайн" > Средства визуализации > Невидимые элементы», чтобы сделать привязки видимыми.
Щелкните значок «Указать файл»
(значок назначения) справа от поля «Ссылка» инспектора свойств и перетащите его на привязку, на которую нужно создать ссылку: привязку того же документа или привязку другого открытого документа.Удерживая клавишу Shift, перетащите указатель в окне документа с выделенного текста или изображения на нужную привязку: привязку того же документа или привязку другого открытого документа.
Создание ссылки на адрес электронной почты
При переходе по ссылке на адрес электронной почты открывается пустое окно создания сообщения (в почтовой программе, настроенной в браузере). В окне сообщения электронной почты в поле «Кому» автоматически вставляется адрес, указанный в ссылке.
Создание ссылки на адрес электронной почты с помощью команды «Вставка ссылки на адрес электронной почты»
Выберите «Вставка» > «Ссылка на адрес электронной почты».
В категории «Общие» на панели «Вставка» нажмите кнопку «Ссылка на адрес электронной почты».
Создание ссылки на электронную почту с помощью инспектора свойств
Нельзя помещать пробелы между двоеточием и адресом электронной почты.
Автоматическое заполнение строки темы в электронном письме
Полная запись будет выглядеть следующим образом:
mailto:someone@yoursite.com?subject=Mail from Our Site
Создание нулевых ссылок и ссылок на сценарии
Нулевой ссылкой называется необозначенная ссылка. Нулевые ссылки используются для добавления поведения в объекты или текст на странице. Например, можно добавить такое поведение, при котором будет заменяться изображение или отображаться элемент с абсолютным позиционированием при наведении курсора на ссылку.
Ссылки на сценарии выполняют код JavaScript или вызывают функцию JavaScript. С их помощью удобно предоставлять пользователям дополнительные сведения об элементах без ухода с текущей веб-страницы. Ссылки на сценарии также можно использовать для выполнения вычислений, заполнения форм или выполнения других задач обработки при выборе определенных элементов.
Создание нулевой ссылки
Создание ссылки на сценарий
Автоматическое обновление ссылок
В Dreamweaver есть возможность обновления ссылок в документе при перемещении или переименовании документа в пределах локального сайта. Эту функцию удобнее всего использовать, если весь сайт (или целый его раздел) хранится на локальном диске. Dreamweaver не изменяет файлы в удаленной папке до помещения или возврата локальных файлов на удаленный сервер.
Для ускорения процесса обновления в Dreamweaver можно создать файл кеша, в котором будут храниться сведения обо всех ссылках в локальной папке. Файл кеша незаметно обновляется при каждом добавлении, изменении или удалении ссылок на локальном сайте.
Включение автоматического обновления ссылок
Всегда
Автоматическое обновление всех ссылок в выбранном документе или на выбранный документ при его перемещении или переименовании.
Никогда
Отсутствие автоматического обновления всех ссылок в выбранном документе или на выбранный документ при его перемещении или переименовании.
Запрос
Отображение диалогового окна со списком всех файлов, в которые необходимо внести изменения. Выберите «Обновить» для обновления ссылок в этих файлах либо «Не обновлять», чтобы изменения не вносились.
Создание файла кеша для сайта
При первом изменении или удалении ссылок на файлы локальной папки после запуска Dreamweaver появится запрос на загрузку кеша. При нажатии кнопки «Да» Dreamweaver загрузит кеш и обновит все ссылки на измененные файлы. При нажатии кнопки «Нет» изменения запишутся в кеш, но Dreamweaver не загрузит кеш и не выполнит обновление ссылок.
Загрузка кеша для больших сайтов может занять несколько минут, так как Dreamweaver должен определить наличие обновлений кеша путем сравнения временных меток файлов на локальном сайте с записанными в кеше метками. Если вне Dreamweaver файлы не изменялись, то при появлении этого запроса можно спокойно нажимать кнопку «Остановить».
Повторное создание кеша
Изменение ссылки по всему сайту
В дополнение к автоматическому обновлению программой Dreamweaver ссылок при перемещении или переименовании файла можно вручную изменить все ссылки (включая ссылки на электронную почту, ссылки на FTP, нулевые ссылки и ссылки на сценарии).
Эту функцию удобнее всего использовать при удалении файла, на который были ссылки в других файлах. Однако ее можно использовать и в других целях. Например, предположим, вы создаете ссылку со словами «фильмы этого месяца» на /movies/july.html по всему вашему сайту. А 1 августа можно изменить все эти ссылки на путь /movies/august.html.
При изменении ссылки на электронную почту, ссылки на FTP, нулевой ссылки или ссылки на сценарий выбирать файл не требуется.
Выберите «Веб-сайт > Параметры веб-сайта > Изменить ссылку на всем веб-сайте».
Изменить все ссылки на
Щелкните значок папки
и выберите файл, ссылки на который следует убрать. При изменении ссылки на электронную почту, ссылки на FTP, нулевой ссылки или ссылки на сценарий введите полный текст изменяемой ссылки.
В ссылки на
Щелкните значок папки
для выбора файла, на который следует установить ссылку. При изменении ссылки на электронную почту, ссылки на FTP, нулевой ссылки или ссылки на сценарий введите полный текст новой ссылки.
Dreamweaver внесет изменения во все документы, в которых есть ссылка на выбранный файл, создаст ссылки на новый файл с уже используемым в документе форматом пути (например, если старый путь был относительно документа, то и новый будет таким же).
После изменения ссылки по всему сайту выбранный файл станет потерянным (на локальном диске не будет файлов, указывающих на него). Его можно будет безопасно удалить, не нарушая связей локального сайта Dreamweaver.
Так как эти изменения вносятся локально, необходимо вручную удалить соответствующий потерянный файл из удаленной папки и проверить все файлы, в которых были изменены ссылки. Иначе посетители сайта не увидят изменений.
Проверка ссылок в Dreamweaver
В Dreamweaver ссылки являются неактивными. Поэтому нельзя открыть связанный документ путем перехода по ссылке в окне документа.
Щелкните правой кнопкой мыши по ссылке и выберите «Открыть страницу, на которую указывает ссылка».
Нажмите кнопку «Ctrl» (Windows) или «Command» (Macintosh) и дважды щелкните ссылку.
Связанный документ должен быть расположен на локальном диске.
Связанные материалы
- Видеоруководство. Как добавлять гиперссылки к целому или части изображения
- Абсолютные пути, пути относительно документа и корня сайта
- Руководство по созданию ссылок
- Применение встроенных вариантов поведения JavaScript
- Работа с сайтами Dreamweaver
- Исправление неработающих ссылок
- Применение поведения
- Поиск поврежденных, внешних и потерянных ссылок
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.