Шаг 7. Ссылки на другие страницы
1. Отредактируйте файл liza.html, внеся в него гиперссылку на файл ira.html:
<html>
<head>
<title>Лиза</title>
</head>
<body>
Лиза<p>
Навестите мою подругу <a href="ira.html">Иру</a>
</body>
</html>
2. Сохраните файл liza.html, обновите окно браузера, проверьте работу гиперссылки. В результате в левом фрейме информация о Лизе будет замещена информацией об Ире, что не всегда приемлемо.
3. Настройте работу Web-страницы так, чтобы при щелчке по гиперссылке информация загружалась в правый нижний фрейм. Для этого необходимо откорректировать два документа:
а) в файле frames.html дать имя правому нижнему фрейму, например, content, при помощи атрибута name= тега <frame>:
<html>
<head>
<title>Фреймы</title>
</head>
<frameset cols="100,*" >
<frame src="liza.html">
<frameset rows="*,2*" >
<frame src="katya.html">
<frame src="sveta.html" name="content">
</frameset>
</frameset>
</html>
б) при помощи атрибута target= тега <a> в файле liza.html явно указать имя фрейма, в который необходимо загружать документ:
<html>
<head>
<title>Лиза</title>
</head>
<body>
Лиза<p>
Навестите мою подругу <a href="ira.html" target="content">Иру</a>
</body>
</html>
4. Сохраните отредактированные документы, обновите окно браузера, проверьте работу гиперссылки.
Шаг 8. Создание миниWeb-сайта
Создайте миниWeb-сайт для отображения личных страниц Лизы, Иры, Кати, Светы и Наташи. Он должен иметь такую структуру:
| Меню | Логотип |
| Содержание |
В левом фрейме должно располагаться меню, при помощи которого в правый нижний фрейм будут загружаться персональные страницы. В правом верхнем фрейме должен отображаться логотип.
1. При помощи графического редактора Paint создайте логотип размером 80×80 пикселей, например, кружочек зеленого цвета, и сохраните его в формате .gif в папке для создания HTML-документов под именем logo.gif.
2. Создайте файл menu.html, содержащий гиперссылки на страницы HTML с информацией о Лизе, Ире, Кате, Свете и Наташе:
<html>
<head>
<title>Меню</title>
</head>
<body>
<h3>Меню</h3>
<a href="liza.html" target="content">Лиза</a>
<a href="ira.html" target="content">Ира</a>
<a href="katya.html" target="content">Катя</a>
<a href="sveta.html" target="content">Света</a>
<a href="natasha.html" target="content">Наташа</a>
</body>
</html>
3. Отредактируйте файл frames.html следующим образом:
<html>
<head>
<title>Фреймы</title>
</head>
<frameset cols="80,*" frameborder="no">
<frame src="menu.html">
<frameset rows="80,*" >
<frame src="logo.gif" marginwidth="0" marginheigh="0"
noresize scrolling="no">
<frame src="liza.html" name="content">
</frameset>
</frameset>
</html>
В нем с помощью атрибута cols="80,*" тега <frameset> установлена высота верхнего фрейма по размеру логотипа; атрибут frameborder="no" запрещает вывод разделяющих рамок вокруг фреймов. Ширина левого фрейма под меню также установлена в 80 пикселей. Атрибуты тега <frame> marginwidth="0" и marginheigh="0" убирают свободные поля во фрейме вокруг логотипа.
4. Проверьте работу созданного миниWeb-сайта.
Индивидуальные задания
1. Создайте архив frame.zip и добавьте в него все файлы, учавствующие в выполнении шага 8.
2. Отправьте результаты выполнения индивидуального задания преподавателю на проверку.