(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Уроки Photoshop. Веб-дизайн. Создание Web-страниц (часть 5)- гиперссылки

Источник: globator
globator

Приветствую вас дорогие друзья! Вообще-то я планировал сделать урок более обьемным. Но по многочисленным вашим просьбам выпускаю внеочередную версию. Сообщество будущих web-мастеров требует продолжения банкета! Всех интересует вопрос - а ссылки где? Или точнее - а гиперссылки как назначаются?! Итак займемся гиперссылками... И в очередной раз убедимся, что работа с гиперссылками в Macromedia Dreamweaver - это просто!

Вначале немного теории - а что же такое гиперссылка? Вот например такое определение, hyperlink (гиперссылка) - встроенная в документ ссылка на другой документ. При прохождении курсора над такой ссылкой (обычно обозначаемой также выделяющимся фрагментом текста или изображения) - он принимает вид руки с вытянутым указательным пальцем. Если щелкнуть в этот момент левой кнопкой мыши, документ, на который указывает ссылка, будет автоматически передан на Ваш компьютер - независимо от того, где в Интернете он хранится. Ну понятно, если в бумажном документе встречается ссылка на какую-нибудь книгу, нужно искать ее самому, а на web-сайте все автоматизировано. Достаточно кликнуть мышкой на каком - либо изображении или надписи - и вы на нужной странице.

Теперь - как же это сделать в Macromedia Dreamweaver?

1. Запускаем Macromedia Dreamweaver

2. Откроем файл нашей туристической фирмы. Ну или какой-то свой - это не важно. Теперь щелкаем на каком либо изображении. Оно выделится. В точности как на картинке внизу (тут мы будем назначать гиперссылку на пункт меню "О фирме" и будет вести эта ссылка, или указывать на файл about.htm который УЖЕ СУЩЕСТВУЕТ, вы можете использовать любой другой файл НАХОДЯЩИЙСЯ в Интернете. Почему в Интернете? Да потому, что файлы вашего компьютера не видны в сети интернет! Потому не забывайте перемещать на хостинг ВСЕ файлы которые входят в состав web - сайта. )

 
Кликните для увеличения
Создание Web-страниц (часть 5)- гиперссылки

3. Итак, повторимся, мы ссылаемся на файл about.htm, который лежит в одной папке с нашим файлом index.htm. И на хостинге они будут в одной папке! Это важно! Иначе ссылка не сработает... А мы таки выделили - теперь смотрим вниз на панель свойств. Там нас интересует свойство нашей картинки - Link. Т.е. вот она - ссылка! Жмем на значок желтой папки правее. Появляется окно выбора файла. Выбираем about.htm - щелкаем ОК - все, готово!


Кликните для увеличения
Создание Web-страниц (часть 5)- гиперссылки

Ссылка готова. Ну а если нужна ссылка на некий сайт находящийся в сети? Например на страницу нашего сайта Глобатор? Все тоже очень просто - в окошко правее надписи Link введите, а лучше вставьте, предварительно скопировав из адресной строки браузера - http://globator.net и все! Вот как на картинке внизу.

Кликните для увеличения
Создание Web-страниц (часть 5)- гиперссылки

Итак мы назначили на картинку-пункт меню ссылку. Абсолютно аналогично вы теперь сможете самостоятельно назначить ссылки на остальные картинки - пункты меню. Т.е. выделяем изображение - назначаем на него ссылку на панели свойств!

4. Пока мы с вами назначали ссылки на изображения (картинки), очень похожая процедура по назначению ссылок на текстовые фрагменты. Предположим мы решили назначить ссылку. Слово "подробнее >" - должно стать ссылкой на страницу нашего Глобатор. Выделяем слово "подробнее" ... и смотрим на картинку внизу!. В поле Link я вставил ссылку на главную страницу сайта Глобатор.

 
Кликните для увеличения
Создание Web-страниц (часть 5)- гиперссылки

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

Создание Web-страниц (часть 5)- гиперссылки

В случае если нужна ссылка на файл входящий в состав вашего будущего сайта - то обратите внимание - правее поля ввода имеется значок желтой папочки. Нажав на него вы сможете вызвать, окно выбора файлов и указать какой - либо файл на который хотите организовать ссылку. Все как с картинками! Главное опять таки - не забудьте потом переместить все нужные файлы на сервер провайдера (на хостинг).

А чтоб "все работало" - два небольших совета. Держите поначалу ВСЕ файлы вашего сайта на компьютере в ОДНОЙ ПАПКЕ. И расставив по новому гиперссылки или произведя другие модификации файлов - не забывайте скопировать (выставить) их новые версии на сервер!

А наша учебная страница изменилась - http://www.urokafrika.narod.ru

Ну вот и все - ссылки расставлены, жребий брошен, Рубикон перейден! До скорого и удачи вам друзья!

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 28.12.2012 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
TeeBI for RAD Studio Suite with source code single license
ESET NOD32 Антивирус на 1 год для 3ПК или продление на 20 месяцев
Stimulsoft Reports.Ultimate Single License Includes one year subscription, source code
ARCHICAD 21, локальная лицензия на 12 месяцев
Microsoft Office 365 для Дома 32-bit/x64. 5 ПК/Mac + 5 Планшетов + 5 Телефонов. Подписка на 1 год.
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование в AutoCAD
Компьютерный дизайн - Все графические редакторы
СУБД Oracle "с нуля"
Программирование на Visual С++
Все о PHP и даже больше
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100