Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Informatics.doc
Скачиваний:
6
Добавлен:
21.08.2019
Размер:
1.33 Mб
Скачать

4.2. Форматирование таблиц

Таблицы создаются парным тэгом <table>, который имеет много организационных атрибутов. Перечислим некоторые.

Align= Left, Center, Right выравнивает таблицу.

Border=n определяет границу в n пунктов. Если этот атрибут не

указан, либо n = 0, граница таблицы при просмотре отсутствует.

Width=n определяет ширину таблицы в пикселах, если n натураль-

ное число, либо как доля ширины экрана, если n – в процентах.

Указывать размеры в процентах бывает удобнее при различной

настройке экрана (относительные размеры сохраняются).

Cellspacing=n определяет расстояние между ячейками таблицы (по

умолчанию n = 1 пикселу).

BGColor= цвет фона таблицы, BorderColor= цвет границы.

Граница таблицы может выглядеть объемной благодаря различ-ной раскраске "светлой" и "темной" частей границы.

Таблица может иметь заголовок, определяемый парным тэгом <caption> ("контейнер заголовка"). Конструкция

<caption> текст заголовка </caption>

должна располагаться между <table> и </table>.

Кадый ряд (строка) таблицы описывается парным тэгом <TR>. Пару <TR> … </TR> нужно указывать столько раз, сколько строк в таблице. Внутри этой пары перечисляются все ячейки ряда парными тэгами <TD> …</TD>. Основные атрибуты ячеек: Width (ширина) и Height (высота). Каждая ячейка может иметь свой цвет фона, свой

шрифт и т. д. Более того, поскольку определяющие тэги суть просто операторные скобки, то между ними можно вставить любую мысли-мую конструкцию, определяемую аналогичными скобками. Таким об-разом, содержимым ячейки таблицы может быть произвольный текст, рисунок, ссылка на другой документ, другая таблица и т. д.

Внутри пары <TR> …</TR> можно поместить заголовок ряда: <TH> текст заголовка </TH>. Как и в Word конструирование таблицы помогает аккуратнее расположить и оформить текст, особенно если он включает нетекстовые элементы (например, рисунки, графику).

4.3. Фреймы

Язык HTML позволяет создать еще одну отличительную констру-кцию: объединить в одном документе несколько документов, сохранив при этом возможность их совместного и раздельного просмотра, вклю-чая взаимные и перекрестные ссылки. Фрейм (frame – рамка) – это способ разбиения просматриваемой страницы на прямоугольные час-ти. Способ задается парным тэгом <FrameSet>, который имеет атри-бут Cols="m, n" (где m и n - ширина каждой из двух вертикальных частей экрана) или Rows="m, n" (если экран разбивается на две гори-зонтальные части). Полезно иметь в виду, что сумма m + n должна быть равна соответствующему размеру экрана, поэтому эти размеры лучше указывать в процентах. Можно указать атрибут, например, Cols="25%,*,2*", который означает, что экран разбивается на три час-ти: первая занимает 25% экрана, вторая и третья – остальные 75%, причем третья занимает в два раза больше места, чем вторая. Атрибу-ты Border=n и BorderColor=цвет (или шестнадцатеричный код цвета) определяют толщину (в пунктах) и цвет границы между областями. Непарный тэг <frame> "открывает" информацию части экрана (по по-рядку: слева направо и сверху вниз): можно вводить произвольные тексты, таблицы, картинки и т. д., таким образом, каждая часть экрана оформляется как отдельный документ. Каждый из построенных доку-ментов может быть связан с остальными. Для построения этой связи полезно использовать атрибут name="…" тэга <frame> и тогда не-обходимую засылку в нужную часть можно выполнить тэгом <A> с атрибутом target="имя части". Если есть необходимость заполнить фрейм некоторым готовым HTML-документом, то следует использо-вать тэг <frame> с атрибутами src="адрес документа" и target="имя фрейма". Рассмотрим следующий пример.

Пример. Построим Htm – документ с использованием фреймов.

Тема документа – моя семья. Разобьем экран сначала на две равные вертикальные части. Вторую обозначим "frC", первую разобьем на две равные горизонтальные части, обозначив верхнюю "frA", нижнюю – "frB". Заготовим документ "Part_С.htm", который будет загружен во фрейм "frС", содержащий полезные общие сведения о семье. Общую схему кода этого документа можно представить следующим образом:

<html>

<!- - необходимая часть, заполняемая редактором -->

<head> <title> Part_С </title> </head>

<body>

<h2 align=center>

<!- - красный заголовок -->

<font color=red> Как мы живем </font>

</h2>

<!- - далее произвольная информационная часть - ->

. . .

</body>

</html>

(в угловых скобках <! - - комментарий - -> не воспроизводится брау-

зером).

Далее, заготовим файлы фотографий членов семьи, например, в формате .jpg (или .gif, .tiff, .xbm) и на каждого члена семьи небольшой документ для загрузки фотографии. Возьмем для примера отца и назо-

вем документ father.htm:

<html>

… <! - - заголовки - ->

<body>

<h2 align=center> Портрет отца </h2>

<image align=bottom src="(адрес файла)....jpg">

</body>

</html>

Пусть наша семья состоит из родителей и троих детей (два брата

и сестра). Подготовим документ, загружаемый во фрейм "frA":

<html>

<head > <title> Part_A </title> </head>

<body>

<!- - подчеркнутый заголовок - ->

<h2> <u> <center> Моя семья </center> </u> </h2>

<UL> <!- - список - ->

<Li> <b> <i> Родители </i> <b> <!- - жирный курсив - ->

<UL> <!- - подсписок - ->

<Li> <a href="father.htm" target="frB">

Отец </a>

<!- - загрузка фотографии при щелчке мышкой по слову "Отец" - ->

<Li> <a href="mother.htm" terget="frB">

Мать </a>

<!- - загрузка фотографии при щелчке мышкой по слову "Мать" - ->

</UL>

<Li> <b> <i> Дети </i> <b>

<UL>

<Li> <!- - подсписок детей - >

</UL>

</UL>

</body>

</html>

Наконец, соберем все в едином документе "Main.htm" с кодом:

<html>

<head> <title> Main </title> </head>

<!- - разбиение экрана на две вертикальные рамки - ->

<frameset cols="50%,50%">

<!- - разбиение первой части на две горизонтальные

половины - ->

<frameset rows="50%,50%">

<frame src="Part_A.htm" name="frA">

<frame src="Part_B.htm" name="frB">

<!- - документы в окна загружены - ->

</frameset>

<frame src="Part_C.htm" name="frC">

</frameset>

</html>

(здесь документ Part_B.htm содержит один заголовак "Фото"; эту строчку можно опустить). Созданный таким образом документ состо-ит из трех связанных частей (фреймов): в левой верхней части – спи-сок членов семейства, в правой – все, что хотелось сообщить о семье. При щелчке мышкой по какому-нибудь элементу списка в левом ниж-нем фрейме появляется соответствующая фотография с подходящей надписью.

HTML-документы позволяют использовать так называемые "пла-вающие" фреймы. Они остаются на той же странице просмотра, зани-мая место наподобие поля вставленного рисунка в Word. Плавающий фрейм определяется парным тэгом <IFrame> с атрибутами align= вы-равнивание (left, center, right), height= высота в пунктах или процентах от общего экрана, width= ширина фрейма, src="адрес загружаемого документа". Содержимое плавающего фрейма можно менять в зависи- мости от состояния основного документа (документ в документе). Ес-ли загружаемый документ не помещается в поле фрейма, то последний

снабжается полосой прокрутки.

Безусловно, некоторые текстовые редакторы имеют, как уже от-мечалось выше, достаточно подробное меню, набор шаблонов для ав-томатизации создания Web-документов. Базовые знания HTML суще-ственно упрощают и облегчают эту работу. Кроме того, HTML допу-скает использование Visual Basic (в слегка урезанном варианте – так

называемый VBScript, а также JavaScript), а вместе с ним уже извест-ные элементы управления, подпрограммы и макросы. Все это позволя-ет превратить Web-документ в очень "живое" Internet-приложение.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]