Как создать гиперссылку на сайте в Dreamweaver | Как создать свой сайт

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

Июн-1-2009 Автор: VeryOldMan

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

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

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

Итак, создание гиперссылок

Давайте сделаем ссылку из главной страницы на страницу Черные. Откроем в Dreamweaver страницу  index.html. В меню выделим слово Черные:

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

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

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

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

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

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

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

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

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

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

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

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

Жмем ОК и видим якорь:

В конце страницы сделаем надпись Наверх:

Выделим ее и в окошке Ссылка (Link) привяжем к адресу якоря:

Не забывайте про знак решетки! Жмем Enter. Откроем страницу браузером, прокрутим ее в самый конец, щелкнем по ссылке Наверх и попадаем в начало страницы.  Чтобы изменить адрес якоря, достаточно щелкнуть по нему мышкой и проделать это в панели Свойства (Properties).

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

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

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

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

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

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

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

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

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

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






6 комментариев
  1. Дин Пишет,

    Здравствуйте! Мне нужна ваша помощь этак сказать жизненно важный вопрос. Я создал сайт в Dreamweaver применив шаблон. Страница сайта на таких браузерах как Internet Explorer и Opera работает и отображает нормально, А ВОТ в Mozilla Firefox текст в странице всё время мигает и при нажатии ссылок выделяет квадратики по бокам ссылки. Помогите пожалуйста очень очень помощь нужна.

  2. Иван Пишет,

    Огромное спасибо! Всё работает!

  3. Артём Пишет,

    Все работает) только я не могу вехать что делать дальше?

  4. Artem Пишет,

    Скажите пожалуйста почему мой сайт в мозиле отражается корректно, а в Explorer только текст и содержимое?

  5. VeryOldMan Пишет,

    Почитайте — вот это

  6. Ольга Пишет,

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

Добавить комментарий