Создать сайт самому? Не проблема! Все о создании сайтов – как создать дизайн сайта, верстка сайта, уроки HTML, сайт на WordPress, как выбрать хостинг сайтов

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

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

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

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

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

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

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

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

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

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

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