Чувашский государственный университет имени И.Н. Ульянова
Кафедра Вычислительной техники
ЛАБОРАТОРНАЯ РАБОТА №1
Разработка статических НТML-страниц
Выполнил студент гр. ИВТ № 41-10:
Макаров Д.А.
Проверил ст.преп.:
Первова Н.В.
Чебоксары, 2012
Цель работы:
Научиться создавать документы, предназначенные для использования на Web-страницах с использованием языка разметки документов HTML.
Задание
Разработать Web-страницы в соответствии с заданием. Для реализации задания использовать любой текстовый редактор.
Для всех вариантов страницы должны содержать следующее:
начальная страница содержит карту-изображение и, как альтернативу ей, обычные ссылки на части документа. Должен быть реализован клиентский вариант карты-изображения;
-
дочерние окна должны содержать два фрейма. Один фрейм предназначен для навигации по этому дочернему документу (нумерованный список ссылок на части документа), а второй фрейм содержит соответствующую информацию;
-
в дочерних документах должны быть реализованы ссылки назад, вперед и содержание;
-
информация, предоставляемая пользователю, должна содержать также графическую информацию (файлы .jpeg или .gif), картинки должны иметь соответствующий масштаб, обтекание и выравнивание;
-
задание фонового изображения;
-
использование списков. При использовании ненумерованных списков в качестве маркера использовать картинку;
-
использование таблиц;
Индивидуальное задание: реализовать таблицу вида:
|
R |
С |
L |
L |
|
1
|
2
|
3
|
4
|
1 |
|
|
|
|
2 |
|
|
|
|
3 |
|
|
|
|
4 |
|
|
|
|
5 |
|
|
|
|
Решение
Имеется 2 фрейма (меню, содержание):
<Frameset Cols = "20%,80%" background = img/qwe.jpg>
<Frame src = "menu.html" scrolling = "no" noresize name = "menu">
<Frame src = "body.html" noresize name = "body">
</Frameset>
Имеются ссылки назад, вперёд, главная:
<td width=1200><p><a href="messi.html"><img src="img/L.png" width="80" border=0 alt="Назад"></a></p>
<td><p><a href="ronaldinho.html"><img src="img/R.png" width="80" border=0 alt="Вперёд"></a></p>
Имеются изображения:
<img src = img/leo.jpg> </left>
Задание фонового изображения:
<BODY background="img/qwe.jpg">
Таблица по индивидуальному заданию:
<table ALIGN = CENTER width = "500" height = "500" cellpadding = 0 border=3 cellspacing = 0 rules = "all" frame = "vsides">
<Col align = right>
<COl align = center>
<Colgroup span = 2 valign = left>
<tr>
<td colspan = 4>11</td>
<tr>
<td colspan = 4>12</td>
</tr>
<tr>
<td colspan = 2>13</td>
<td style='border-top:none'>33</td>
</tr>
<tr>
<td colspan = 2 style='border-top:none'>14</td>
<td style='border-top:none'>34</td>
</tr>
<tr>
<td colspan = 4>15</td>
</tr>
</table>
<Table border=0 >
<tr >
<td width=1200><p><a href="ronaldinho.html"><img src="img/L.png" width="80" border=0 alt="Назад"></a></p>
</tr>
</table>