Microsoft Expression Web - гиперссылки

В этой главе мы узнаем, как использовать гиперссылки на вашем веб-сайте. Одна из вещей, которая делает Интернет настолько обширным, - это способность веб-страниц ссылаться на другие веб-страницы.Hyperlinks или ссылки находятся почти на всех веб-страницах.

Гиперссылки также позволяют пользователям щелкнуть и перейти на другую страницу, место на странице, изображение или другое место в Интернете. Ниже приведены некоторые из важных функций гиперссылки.

Инструменты и параметры гиперссылок Expression Web упрощают работу с гиперссылками.
Представления и отчеты по гиперссылкам Expression Web также упрощают поиск и исправление неработающих и неправильных ссылок.
Гиперссылка может быть словом, группой слов или изображением, при нажатии на которую вы перейдете в новый документ или в место в текущем документе.

Якорный тег

В HTML <a>тег, известный как тег привязки, используется для создания ссылки на другой документ. Якорь может указывать на другую страницу html, изображение, текстовый документ или файл pdf среди прочего. Вот базовый код якоря<a> тег.

<a href = "url">Text to be displayed as link<a>

В <a> , атрибут «href» используется для адресации ссылки на документ, а слова между открытием и закрытием тега привязки будут отображаться в виде гиперссылки.
Когда вы наводите курсор на ссылку на веб-странице, стрелка превращается в маленькую стрелку.
URL-адрес - это адрес, указывающий протокол, веб-сервер и путь к файлу.
Есть два типа URL-адресов: absolute и relative. Anabsolute URL содержит полный адрес, а relative URLотсутствует одна или несколько частей адреса. Однако веб-браузер получает недостающую информацию со страницы, содержащей URL-адрес.

пример

Давайте посмотрим на простой пример, в котором мы будем использовать оба absolute и relative URLs.

Step 1 - Сначала откройте index.html страницу и добавьте следующие строки в main content раздел.

<div id = "main-content">  
   <p> Absolute URL Example: </p> 
   <p>  Google </p> 
   <p>  Youtube </p> 
   <p> Relative URL Example: </p> 
   <p>  Home Page 2 </p>  
</div>

Ниже приводится полная реализация index.html страница.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"> 
         #left-nav ul li a:hover { 
            color: #000000; background-color: #116611; 
         } 
      
         #left-nav ul li a:hover { 
            color: #000000; background-color: #66FF99; 
         } 
      </style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head> 
   <body> 
      <div id = "container"> 
         <div id = "header"> </div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li> 
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li> 
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li> 
            </ul> 
         </div> 
  
         <div id = "main-content">  
            <p> Absolute URL Example: </p> 
            <p>  Google </p> 
            <p>  Youtube </p> 
            <p> Relative URL Example: </p> 
            <p>  Home Page 2 </p> 
         </div> 
         <div id = "footer"> </div> 
      </div> 
   </body> 
</html>

Step 2 - Давайте сохраним веб-страницу, и вы увидите текст в разделе основного содержимого.

Step 3 - В представлении «Дизайн» щелкните правой кнопкой мыши Google и выберите «Гиперссылка…» в меню, которое откроет Insert Hyperlink диалог.

Step 4- В поле «Адрес» укажите URL-адрес домашней страницы Google и нажмите «ОК». Точно так же щелкните правой кнопкой мыши YouTube в режиме просмотра и выберите Гиперссылка…

Step 5- В поле «Адрес» укажите URL-адрес домашней страницы YouTube и нажмите «ОК». Теперь для относительного щелчка правой кнопкой мыши на «Домашней странице 2» и выберите «Гиперссылка…» в меню, которое откроет диалоговое окно «Вставить гиперссылку».

Step 6- Для относительного пути выберите index_2.html в поле адреса, и Expression Web получит оставшийся путь из файла index.html, потому что оба эти файла находятся в одном каталоге. Щелкните ОК.

Как видно, эти слова теперь подчеркнуты, что означает создание гиперссылок.

Step 7- Цвет шрифта по умолчанию - синий, и цвет шрифта по умолчанию для гиперссылок также синий. Чтобы изменить цвет гиперссылки по умолчанию, выберите любую гиперссылку и перейдите наFormat меню и выберите Background… пункт меню.

Теперь вы увидите следующий диалог.

Step 8 - Давайте изменим цвет гиперссылки на зеленый.

На следующем снимке экрана вы увидите, что цвет гиперссылки изменился на зеленый.

Step 9 - Давайте теперь просмотрим эту веб-страницу в браузере.

Если вы нажмете ссылку Google, она направит вас на главную страницу Google.

Step 10- Аналогично, если вы вернетесь на главную страницу и нажмете ссылку YouTube, она направит вас на главную страницу YouTube. Вернемся на главную страницу.

Щелкните значок Home Page 2 ссылку, и вы увидите, что она открывает index_2.hmtl file.