
- •Практическое занятие №1 посвящено изучению структуры Web-документа
- •Практическое занятие №2 посвящено изучению структуры внутри документа
- •Практическое занятие №3 посвящено изучению и использованию списков
- •Практическое занятие №4 посвящено изучению и использованию тэгов ссылки и изображения
- •Практическое занятие №5 посвящено изучению и использованию таблиц
- •Заголовок таблицы расположен над таблицей
- •Практическое занятие №6 посвящено изучению и использованию кадров (фреймов)
- •Практическое занятие №7 посвящено изучению и использованию форм
- •Практическое занятие №8 посвящено изучению и использованию объектов
- •Практическое занятие №9 посвящено изучению и использованию бегущей строки
- •Практическое занятие №10 посвящено изучению и использованию скриптов
- •Практическое занятие №11 посвящено изучению и использованию стилей
- •Содержание
Заголовок таблицы расположен над таблицей
A1 |
A2 |
A3 |
A4 |
S11 |
S12 |
S13 |
S14 |
S21 |
S22 |
S23 |
S24 |
S31 |
S32 |
S33 |
S34 |
S41 |
S42 |
S43 |
S44 |
<TABLE Border>
<CAPTION>Заголовок таблицы расположен над таблицей<CAPTION>
<TR>
<TH> А1 </TH> <TH> А2 </TH> <TH> А3 </TH> <TH> А4 </TH>
</TR>
<TR>
<TD> S11 </TD> <TD> S12 </TD> <TD> S13 </TD> <TD> S14 </TD>
</TR>
<TR>
<TD> S21 </TD> <TD> S22</TD> <TD> S23</TD> <TD> S24</TD>
</TR>
<TR>
<TD> S31 </TD> <TD> S32</TD> <TD> S33</TD> <TD> S34</TD>
</TR>
<TR>
<TD> S41 </TD> <TD> S42</TD> <TD> S43</TD> <TD> S44</TD>
</TR>
</TABLE>
Опишем стиль для таблицы, который должен быть помещён в заголовок документа.
<STYLE>
TABLE {background-color: White;
border-color: black;
color: Black;
cellspadding=”3”;
cellspacing=”0”;
frame=”hsides”;
border-top: solid 3px black;
border-bottom: solid 3px black;
rules=”cols”;
width: 100%;
}
TD { border-left: solid 1px black;
text-align: center;
border-right: solid 1px black;
}
</STYLE>
Упражнение 5.1. Создайте HTML-файл для раздела 2, в котором представьте информацию в виде колонок, как в газете.
Упражнение 5.2. Добавьте в стилевую таблицу форматирование свойств таблицы.
Практическое занятие №6 посвящено изучению и использованию кадров (фреймов)
Кадры HTML позволяют разбить страницу на независимые с прокруткой окна. Кадры во многом похожи на таблицы. В отличие от таблиц кадры не только организовывают данные, но и размещают их на экране дисплея в разных окнах, вводя данные в каждое окно из отдельного файла. Разбиение экрана на кадры даёт возможность то из них, которое содержит оглавление Web-сайта, оставлять на экране на всё время просмотра сайта и использовать для обращения к его разделам. Содержимое раздела появляется в другом кадре на экране. Отдельный кадр на экране может содержать данные о владельце сайта и его реквизиты для связи. Экран не должен быть перегружен кадрами, иначе он плохо воспринимается. На экране рекомендуется организовывать не более 4-6 кадров. В таблице 12 представлены тэги, используемые для разбиения страницы на кадры.
Таблица 12. Тэги кадра.
Тэги |
Атрибут и его значения |
Пояснение |
<FRAMESET> </FRAMESET> |
|
Контейнер тэга FRAMESET в файле HTML играет роль контейнера тэга BODY, т.е. все описываемые кадры должны быть помещены в этот контейнер. Естественно, что тэг BODY отсутствует в файле описания кадровой структуры документа. |
|
Rows=”список” Cols=”список” |
Должен быть указан хотя бы один из атрибутов. В атрибуте Rows указывается разбиение экрана на части по аналогии разбиения таблицы на строки, а в атрибуте Cols – на столбцы. Списком задаётся размер части и количество частей. Один размер отделяется от другого в списке запятой. Размер задаётся числом пикселей, или процентов, или дробной частью. Если числа выражены в процентах, то размер всего экрана принимается за 100%, а сумма частей не должна превышать 100%, например: Rows=”20%,60%,20%”. Если размер выражен в дробных частях, то предполагается деление экрана на части кратные одной доли и эта доля обозначается звёздочкой, перед ней ставится число долей, приходящихся на часть, например: Cols=”2*,3*”. В примере экран делится на два столбца размером 2/5 и 3/5, а доля составляет 1/5 и обозначается звёздочкой. |
<FRAME> |
|
Определяет отдельный кадр, не является контейнером. Должен размещаться в контейнере тега FRAMESET, и число тэгов FRAME должно равняться количеству кадров, указанных в тэге FRAMESET. |
|
SRC=”URL” |
URL-адрес содержимого кадра. Как правило – это HTML-файл, расположенный в том же каталоге, где находится файл, содержащий описание кадров. |
|
Name=”имя_кадра” |
Имя, которое присваивается кадру и используется в тэге «ссылка» (A) для показа содержимого ссылки в именованном кадре. Пример: если FRAME SRC="k1.htm" NAME="n1" , то A HREF="sd2.htm" TARGET="n1".
|
|
MARGINWIDTH="5" |
Создает внутреннюю рамку на левой и правой границе кадра. Значение - в пикселях. |
|
MARGINHEIGHT="5" |
Создает внутреннюю рамку на верхней и нижней границе кадра. Значение - в пикселях. |
|
SCROLLING="YES | NO | AUTO" |
К кадру добавляются полосы прокрутки. |
|
NORESIZE |
Запрещает изменять размеры ваших кадров на странице. |
Пример описания кадров страницы в соответствии с видом, представленным на рисунке 2.
F1 |
|
F2 |
F3 |
F4 |
Рис. 2. Макет страницы, разбитой на четыре кадра с именами: F1, F2, F3, F4.
<HTML>
<HEAD>
<TITLE> Пример описания кадров. </TITLE>
</HEAD>
<FRAMESET Rows=”10%,80%,10%”>
<FRAME Src=”1.html” Name=”F1” >
<FRAMESET Cols=”20%,80%”>
<FRAME Src=”2.html” Name=”F2” >
<FRAME Name=”F3” >
</FRAMESET>
<FRAME Src=”4.html” Name=”F4” >
</FRAMESET>
</HTML>
Упражнение 6.1. Спроектируйте макет экрана для выбранной темы.
Упражнение 6.2. Создайте HTML-файл, в котором опишите кадровую структуру, соответствующую макету экрана, разработанному для выбранной темы. Один из кадров определите для размещения содержания Web-сайта, причём этот кадр должен постоянно находиться на экране. В других кадрах информация будет появляться при вызове раздела на экран. Все кадры должны быть именованы.
Упражнение 6.3. Внесите атрибут Target=”имя_кадра” в ссылки, находящиеся в файле содержания, чтобы указать в каком кадре будет появляться раздел при вызове его на экран.