Контрольное задание. Организовать сайт Myhouse.ru

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>

</frameset>

……….

Как будет выглядеть фреймовая разметка и почему?

6. Ниже на рисунке приведен вид Web-страницы в броузере и HTML-код создания фреймовой структуры страницы. Найдите несоответствие рисунка страницы и кода программы.

7. Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:

<frameset cols="20%,80%">

<frame>

<frameset rows="20%,80%">

<frame>

</frameset>

8. Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:

<frameset rows="*,*,*">

<frameset cols="*,*">

<frame>

</frameset>

<frameset cols="50%,50%">

<frame>

</frameset>

<frame>

</frameset>

9. Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:

<frameset cols="*,*,*">

<frame>

<frameset rows="20%,40%,40%">

<frame>

</frameset>

<frameset rows="*,*">

<frame>

</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”>? Объясните, что означают все компоненты этой записи.