1. На предыдущих занятиях Вы разработали 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.
2. Создайте файл с фреймовой структурой сайта, состоящей из трех фреймов (рис. 9). Сохраните его под именем index.html
3. Правому фрейму присвойте имя main.
4. В верхнем фрейме расположите бегущую строку (файл proekt_stroka.html)
5. В левом фрейме расположите список проектов (файл proekt_spisok.html).
6. В правом фрейме оставьте общую информацию о сайте. Для этого в файле proekt.html удалите список проектов, сохраните файл под новым именем main.htmlи разместите его в правом фрейме.
7. Для пункта списка проектов «Проекты таунхаусов и блокированных домов», сделайте гиперссылку, целевым адресом которой является web-страница – proekt_townhouse.html таким образом, чтобы информация о проектах грузилась в правый фрейм. Напомним, для того, чтобы ссылка грузила документ в нужный фрейм в теге <a> необходимо указать атрибут target, который содержит имя фрейма, в который должен быть загружен документ. Например, <a href=”proekt_townhouse.html” target=”main”>.
8. Убедитесь, что при щелчке по ссылке с изображением проекта D-152-1Dсо страницы proekt_townhouse.htmlв этот же фрейм грузится более полная информация об этом проекте (файл proekt_ D-152-1D.html).
9. Вверху левого фрейма сделайте логотип графической гиперссылкой таким образом, чтобы при ее активизации в правый фрейм загружалась страница о сайте (файл main.html).
10. Убедитесь в работоспособности всех гиперссылок. Ваш сайт должен выглядеть примерно так, как показано на рис. 9, а при переходе по ссылке «Проекты таунхаусов и блокированных домов» так, как на рис. 10
Рис. 9. Главная страница сайта MyHouse.ru
Рис. 10. Вид web-сайта при активной ссылке «Проекты таунхаусов и блокированных домов»
Контрольные вопросы:
1. Почему при указании размеров строк и столбцов фрейма лучше использовать относительные значения?
2. В каком случае необходимо задавать имя фрейма?
3. Как организовать загрузку нового документа при щелчке на гиперссылке во фрейме в окно, не поделенное на фреймы?
4. Каждой Web-странице можно поставить в соответствие один URL. Если Web-страница имеет фреймовую структуру, то ее URL – это URL какого из файлов?
5. Как будет интерпретировать броузер следующий фрагмент:
………..
<frameset cols=25%,50%, 25%>
<frame>
<frame>
<frame>
</frameset>
……….
Как будет выглядеть фреймовая разметка и почему?
6. Ниже на рисунке приведен вид Web-страницы в броузере и HTML-код создания фреймовой структуры страницы. Найдите несоответствие рисунка страницы и кода программы.
7. Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:
<frameset cols="20%,80%">
<frame>
<frameset rows="20%,80%">
<frame>
<frame>
</frameset>
</frameset>
8. Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:
<frameset rows="*,*,*">
<frameset cols="*,*">
<frame>
<frame>
</frameset>
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
<frame>
</frameset>
9. Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:
<frameset cols="*,*,*">
<frame>
<frameset rows="20%,40%,40%">
<frame>
<frame>
<frame>
</frameset>
<frameset rows="*,*">
<frame>
<frame>
</frameset>
</frameset>
10. Напишите HTML-код создания приведенной ниже Web-страницы.
11. Напишите HTML-код создания приведенной ниже Web-страницы.
12. Что такое элемент привязки?
13. Какие категории гиперссылок Вы знаете?
14. Что такое относительный адрес гиперссылки? Абсолютный адрес?
15. Как создать графический элемент привязки?
16. В гиперссылке в качестве элемента привязки используется рисунок. Как при отключенном режиме отображения рисунков пояснить пользователю цель гиперсвязи?
17. Какими способами можно изменить цвет гиперссылки? Шрифт?
18. HTML-документ содержит следующую гиперссылку <A HREF=”content.htm”><IMG SRC=”2.jpg”></A>. Каким должен быть ALT-текст, если рисунок 2.jpg выглядит следующим образом: ?
19. HTML-документ содержит следующую гиперссылку <A HREF=”#metka”> Посмотрим? </A>. Как должен быть помечен нужный фрагмент текста для организации этой гиперссылки?
20. Верна ли следующая запись: <A HREF=”glava1# my.htm”>? Объясните, что означают все компоненты этой записи.