Файловый архив студентов. Файловый архив студентов.
1306 вузов, 5174 предметов.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Санкт-Петербургский политехнический университет Петра Великого (бывш. СПбГПУ)
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
ОСНОВЫ ИНТЕРНЕТА.doc
Скачиваний:
0
Добавлен:
01.05.2025
Размер:
1.37 Mб
Скачать
☆
►Содержание►

Упражнение 6.7. Создание таблиц

  1. Откройте документ first.htm в программе Блокнот.

  2. Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>. В данном упражнении используется список номеров телефонов адресов электронной почты.

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

<TABLE BORDER=3 WIDTH=”50%” ALIGN=CENTER>

<CAPTION ALIGN=”TOP”>Состав группы</CAPTION>

<TR>

<TH ALIGN=CENTER ROWSPAN=2>Фамилия, и., о.</TH>

<TH ALIGN=CENTER COLSPAN=2>Связь</TH>

</TR>

<TR>

<TH ALIGN=CENTER>Телефон</TH>

<TH ALIGN=CENTER>e-mail</TH>

</TR>

<TR>

<TD ALIGN=LEFT>Иванов А.И.</TD>

<TD ALIGN=RIGHT>123-4567</TD>

<TD ALIGN=CENTER>alex@mail.ru</TD>

</TR>

<TR>

<TD ALIGN=LEFT>Петров С.Б.</TD>

<TD ALIGN=RIGHT>123-4568</TD>

<TD ALIGN=CENTER>serg@mail.ru</TD>

</TR>

<TR>

<TD ALIGN=LEFT>Сидоров В.В.</TD>

<TD ALIGN=RIGHT>123-4569</TD>

<TD ALIGN=CENTER>vova@mail.ru</TD>

</TR>

</TABLE>

  1. Сохраните документ под именем table.htm.

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

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

  4. Изучите, как созданная таблица отображается в программе Internet Explorer, обращая особое внимание на влияние заданных атрибутов.

  5. Измените ширину окна обозревателя и установите, как при этом изменяется внешний вид таблицы.

Упражнение 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>

</FRAMESET>

</HTML>

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

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

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

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

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

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

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

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

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

  5. Вернитесь в программу 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}

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

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

<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>

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

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

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

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

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

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

Работа 7

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности