
- •Тема 4: «фреймы. Гиперссылки. Создание главной страницы сайта»
- •Что такое фрейм?
- •Организация фреймов.
- •Организация гиперссылок
- •Элементы привязки (якорь – anchor)
- •Адрес гиперссылки
- •Внутренние и внешние гиперссылки
- •Задание цвета гиперссылок
- •В результате выполнения лабораторной работы у Вас в папке Lab_4 должны быть шесть файлов:
Задание цвета гиперссылок
Принятые в Web по умолчанию цвета для гиперссылок: синий – для еще непосещенных гиперссылок, красный – для активизированных гиперссылок (в момент щелчка), фиолетовый – для уже посещенных.
Если используемые по умолчанию значения этих атрибутов явно не согласуются с дизайном Вашей страницы, то значения можно поменять. Для этого у тега <BODY> есть соответствующие атрибуты.
LINK |
Цвет гиперссылки (по умолчанию светло-голубой) |
VLINK |
Цвет использованной гиперссылки (по умолчанию темно-фиолетовый) |
ALINK |
Цвет активизированной гиперссылки (в момент щелчка) |
В результате выполнения лабораторной работы у Вас в папке Lab_4 должны быть шесть файлов:
frames_2.html,
frames_3.html,
frame_zachet.html,
proekt_D-152-1D.html,
proekt_H-173-1P.html,
proekt_R-189-1P.html
Выполните контрольное задание
Контрольное задание. Организовать сайт Myhouse.ru
На предыдущих занятиях Вы разработали Web-страницы:
proekt.html,
proekt_spisok.html,
proekt_stroka.html,
proekt_townhouse.html,
proekt_D-152-1D.html,
proekt_H-173-1P.html,
proekt_R-189-1P.html.
Создайте файл с фреймовой структурой сайта, состоящей из трех фреймов (рис. 9). Сохраните его под именем index.html
Правому фрейму присвойте имя main.
В верхнем фрейме расположите бегущую строку (файл proekt_stroka.html)
В левом фрейме расположите список проектов (файл proekt_spisok.html).
В правом фрейме оставьте общую информацию о сайте. Для этого в файле proekt.html удалите список проектов, сохраните файл под новым именем main.html и разместите его в правом фрейме.
Для пункта списка проектов «Проекты таунхаусов и блокированных домов», сделайте гиперссылку, целевым адресом которой является web-страница – proekt_townhouse.html таким образом, чтобы информация о проектах грузилась в правый фрейм. Напомним, для того, чтобы ссылка грузила документ в нужный фрейм в теге <a> необходимо указать атрибут target, который содержит имя фрейма, в который должен быть загружен документ. Например, <a href=”proekt_townhouse.html” target=”main”>.
Убедитесь, что при щелчке по ссылке с изображением проекта D-152-1D со страницы proekt_townhouse.html в этот же фрейм грузится более полная информация об этом проекте (файл proekt_ D-152-1D.html).
Вверху левого фрейма сделайте логотип графической гиперссылкой таким образом, чтобы при ее активизации в правый фрейм загружалась страница о сайте (файл main.html).
Убедитесь в работоспособности всех гиперссылок. Ваш сайт должен выглядеть примерно так, как показано на рис. 9, а при переходе по ссылке «Проекты таунхаусов и блокированных домов» так, как на рис. 10
Рис. 9. Главная страница сайта MyHouse.ru
Рис. 10. Вид web-сайта при активной ссылке «Проекты таунхаусов и блокированных домов»
Контрольные вопросы:
Почему при указании размеров строк и столбцов фрейма лучше использовать относительные значения?
В каком случае необходимо задавать имя фрейма?
Как организовать загрузку нового документа при щелчке на гиперссылке во фрейме в окно, не поделенное на фреймы?
Каждой Web-странице можно поставить в соответствие один URL. Если Web-страница имеет фреймовую структуру, то ее URL – это URL какого из файлов?
Как будет интерпретировать броузер следующий фрагмент:
………..
<frameset cols=25%,50%, 25%>
<frame>
<frame>
<frame>
</frameset>
……….
Как будет выглядеть фреймовая разметка и почему?
Ниже на рисунке приведен вид Web-страницы в броузере и HTML-код создания фреймовой структуры страницы. Найдите несоответствие рисунка страницы и кода программы.
<html>
<frameset cols="*,*,*">
<frameset rows="*,*,*">
<frame>
<frame>
</frameset>
<frame>
<frameset cols="10%,*">
<frame>
<frame>
<frame>
</frameset>
</frameset>
</html>
Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:
<frameset cols="20%,80%">
<frame>
<frameset rows="20%,80%">
<frame>
<frame>
</frameset>
</frameset>
Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:
<frameset rows="*,*,*">
<frameset cols="*,*">
<frame>
<frame>
</frameset>
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
<frame>
</frameset>
Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:
<frameset cols="*,*,*">
<frame>
<frameset rows="20%,40%,40%">
<frame>
<frame>
<frame>
</frameset>
<frameset rows="*,*">
<frame>
<frame>
</frameset>
</frameset>
Напишите HTML-код создания приведенной ниже Web-страницы.
Напишите HTML-код создания приведенной ниже Web-страницы.
Что такое элемент привязки?
Какие категории гиперссылок Вы знаете?
Что такое относительный адрес гиперссылки? Абсолютный адрес?
Как создать графический элемент привязки?
В гиперссылке в качестве элемента привязки используется рисунок. Как при отключенном режиме отображения рисунков пояснить пользователю цель гиперсвязи?
Какими способами можно изменить цвет гиперссылки? Шрифт?
HTML-документ содержит следующую гиперссылку <A HREF=”content.htm”><IMG SRC=”2.jpg”></A>. Каким должен быть ALT-текст, если рисунок 2.jpg выглядит следующим образом:
?
HTML-документ содержит следующую гиперссылку <A HREF=”#metka”> Посмотрим? </A>. Как должен быть помечен нужный фрагмент текста для организации этой гиперссылки?
Верна ли следующая запись: <A HREF=”glava1# my.htm”>? Объясните, что означают все компоненты этой записи.