Упражнение 6.8. Создание описания фреймов

1. Запустите текстовый редактор Блокнот.

2. Введите следующий текст:

<DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 3.2//EN”>

<HTML>

<HEAD>

<TITLE>Описание фреймов</TITLE>

</HEAD>

<frameset rows="30%,*">

<FRAME SRC="table.htm" NORESIZE>

<frameset cols="20%,*">

<FRAME SRC="first.htm">

<FRAME SRC="links.htm">

</FRAMESET>

</HTML>

3. Сохраните этот документ под именем frameset.htm.

4. Запустите обозреватель Internet Explorer.

5. Дайте команду Файл®Открыть. Щелкните на кнопке Обзор и откройте файл frameset.htm.

6. Изучите представление нескольких созданных ранее документов в отдельных фреймах.

7. Посмотрите, что происходит при изменении ширины окна обозревателя.

8. Выясните, у каких фреймов можно изменить положение границ методом перетаскивания при помощи мыши.

9. Щелкните на ссылке, имеющейся в одном из фреймов, и посмотрите, как будет отображен новый документ.

10. Щелкните на кнопке Назад на панели инструментов и убедитесь, что возврат к предыдущему документу не нарушает структуру фреймов.

11. Вернитесь в программу Блокнот и измените структуру и параметры фреймов по своему усмотрению. Сохраните документ под тем же именем.

12. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Убедитесь, что измененный вид Web-страницы соответствует замыслу. Если это не так, вернитесь в программу Блокнот, найдите и исправьте ошибки.

Упражнение 6.9. Работа с таблицами стилей

1. Запустите текстовый редактор Блокнот.

2. Введите следующий текст:

.bigletter {font-family: Garamond, "Times New Roman"; font-size: 130pt; font-style: italic; color: #666633}

.maintext {font-family: "Times New Roman", Times, serif; font-size: 14pt; color: #990000; text-align: center; font-weight: bold}

.catHeader {font-family: "Times New Roman", Times, serif; font-size: 14pt; color: #666633; font-weight: bold}

.catText {font-family: Georgia, "Times New Roman", Times, serif; font-size: 12pt; color: #666633; text-align: justify; font-style: italic}

.catPrice {font-family: "Times New Roman", Times, serif; font-size: 16pt; font-style: italic; color: #666633; text-align: right; font-weight: bold}

a.changecolor {color:black;text-decoration: none}

a.changecolor:Hover {color:blue;text-decoration: underline}

3. Сохраните файл под именем mystyle.css.

4. Создайте новый файл и введите текст:

<DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 3.2//EN”>

<html>

<head>

<title>style</title>

<link href="mystyle.css" rel=stylesheet>

</head>

<body>

<div class="bigletter">Bigletter</div>

<p class="maintext">Это шрифт Times New Roman и т.п., размер 14 пт, цвет #990000, выравнивание по центру</p>

<p class=”catHeader”>Это шрифт Times New Roman и т.п., размер 14 пт, цвет #666633</p>

<p class=”catText”>Это шрифт Georgia и т.п., размер 12 пт, цвет #666633, курсив, выравнивание по ширине окна</p>

<p class=”catPrice”>Это шрифт Times New Roman и т.п., размер 16 пт, курсив, цвет #666633, выравнивание по правому краю окна</p>

<p class="maintext">Эта <a class = "changecolor" href = "http://www.spbstu.ru/mmf/index.html"> ссылка</a> меняет цвет на синий только в Internet Explorer</p>

</body>

</html>

5. Сохраните этот файл под именем style.htm.

6. Запустите обозреватель Internet Explorer.

7. Дайте команду Файл®Открыть. Щелкните на кнопке Обзор и откройте файл style.htm.

8. Изучите, как разные стили отображаются в браузере.

9. Вернитесь в программу Блокнот и вместо тегов <div>, </div> поставьте теги <H1>, </H1>, а вместо тегов <p>, </p> поставьте теги <div>, </div>; сохраните файл под тем же именем.

10. Вернитесь в Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Проанализируйте изменение начертания текста на экране.