19-11-2017

Dreamweaver — создание гиперссылок.

    Ну вот, кажется, и последний урок верстки страниц сайта в  Dreamweaver.  Хотя может быть и не последний...  В этом уроке речь пойдет о связывании страниц сайта между собой в одно целое — сайт.  Вполне возможно, что Вам знакомо такое слово — гиперссылка.  Так вот, речь именно об этом. И наша тема сегодня — создание гиперссылок.

    Создавая сайт, не забывайте о такой ответственной задаче, как создание навигации по сайту. Создается навигация для сайта с помощью гиперссылок.  Как создать гиперссылку? В редакторе  Dreamweaver несложно, как, впрочем, и все остальное. Убедитесь сами. В общем-то сайт — это комплект web- страниц, которые связаны одна с другой.  Если возникнет необходимость сделать ссылку на какую-либо страницу сайта, то здесь и приходят на помощь так называемые гиперссылки.

    Гиперссылки — особенные связи, которые ведут от одной страницы сайта к другой. Они представляют собой фрагменты текста, выделенные особенным образом (как правило с помощью синего цвета и подчеркивания. Что стало уже стандартом). Когда на подобной гиперссылке кликнуть мышкой, web- обозреватель загрузит страницу, интернет-адрес которой указан в параметрах гиперссылки. Гиперссылкой может быть и изображение.

    Давайте сделаем ссылку из страницы (онлайн-сервисы - статьи - продажа готовых сайтов) на страницу рекламы. Откроем в Dreamweaver страницу index_ххх.html. В меню выделим слова "что на сайтах можно зарабатывать деньги":

Связываем страницы сайта. Гиперссылки

    В правом нижнем углу нижнего дока найдите окошко Ссылка (Link) и введите в него название страницы, на которую будем ссылаться, нажмите Enter:

Связываем страницы сайта. Гиперссылки

    Ссылка готова. Точно так же можно и нужно создавать гиперссылки  на другие страницы  и.т.д.
Откроем теперь наш шаблон. Проще всего это сделать в панели Файлы (File) двойным щелчком левой клавиши мышки. Выделим фразу На главную:

    В окошке Ссылка (Link) введите адрес главной страницы и нажмите Enter:

Связываем страницы сайта. Гиперссылки

    Сохраняем шаблон. На вопрос редактора Обновить все файлы, основанные на этом шаблоне? — ответить Обновить. После обновления, в окошке Обновление страниц нажать Закрыть.

    Откройте страницу с сылкой на "главную" в редакторе. Откройте страницу браузером. Видите, надпись На главную стала ссылкой? Правда вид у нее не очень … Ну, это мы решим чуть позже. А теперь щелкните левой клавишей мышки на ней. Если вы все сделали правильно, то перейдете на главную страницу.

    Точно так же можно создавать гиперссылки на ресурсы Сети. Только нужно задавать полный адрес, вот такой, например http://www.yandex.ru. Это ссылка на Яндекс.

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

Связываем страницы сайта. Гиперссылки

    Есть еще одна разновидность гиперссылок, которая позволяет указать на часть какой-либо web-страницы. Правильнее, не на какую-либо часть, а на особенную метку, которую ставят в нужном месте на странице, якорь (по-английски — anchor). Давайте разберемся, как создаются якоря и гиперссылки, которые на них указывают.

    Очень часть якорь используется для перехода из конца страницы в начало, если она очень длинная, чтобы не прокручивать ее мышкой. Давайте проделаем эту операцию. Откройте страницу.  Добавим в страницу побольше текста, чтобы она стала длиннее. Ставим текстовый курсор в начало страницы, в место установки якоря. Пусть это будет перед заглавием. В панели инструментария объектов активируем пункт Общий (Common). И щелкнем левой клавишей мышки на значке якоря:

Связываем страницы сайта. Гиперссылки

    В появившемся окошке задаем имя якоря – например r1:

Связываем страницы сайта. Гиперссылки

    Жмем ОК и видим якорь:
    В конце страницы сделаем надпись span style="color: green;">Наверх::
    Выделим ее и в окошке Ссылка (Link) привяжем к адресу якоря:

Связываем страницы сайта. Гиперссылки

Не забывайте про знак решетки! Жмем span lang="EN-US" style="color: green">Enter. Откроем страницу браузером, прокрутим ее в самый конец, щелкнем по ссылке Наверх и попадаем в начало страницы.  Чтобы изменить адрес якоря, достаточно щелкнуть по нему мышкой и проделать это в панели Свойства (Properties).

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

  • a:link — обычная гиперссылка
  • a:active — стиль активной гиперссылки (той, на которой посетитель кликает мышкой в данный момент)
  • a:visited — стиль посещенной гиперссылки (указывающей на страницу, где
    посетитель уже побывал)
  • a:hover — стиль гиперссылки, на которой в настоящий момент находится курсор мыши

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

Связываем страницы сайта. Гиперссылки

    Жмем ОК. В категории Тип – шрифт Arial, цвет – белый, декорирование – нет. Жмем ОК.

    Создаем еще один стиль:

Связываем страницы сайта. Гиперссылки

Жмемspan style="color: green;"> ОК. В категории Тип – шрифт Arial, цвет – красный, декорирование – нет. Жмем ОК. Все. Проверяем браузером.

Надеюсь вам теперь понятно, как сделать гиперссылку на webстранице и что создание гиперссылок в редакторе Dreamweaver — дело не сложное.

Вот так и создаются страницы сайта. C одной стороны вроде бы и не сложно, а с другой, если пропустишь какую-то, казалось бы незначительную мелочь, то долго потом разбираешься где же я так влетел. Поэтому будьте внимательны, почаще проверяйте свою работу браузерами. Загрузите их штуки три. Оперу, «лису» и обязательно, Internet Explorer. Если будут вопросы – отвечу. Успехов Вам!

Класс!
Яндекс.Метрика
Копирование возможно при указании прямой индексируемой гиперссылки
п»ї