Тема: Размещение списков на Web-странице
1 Задание списков на Web-странице средствами HTML
1.1 Нумерованные списки
1.2 Ненумерованные списки
1.3 Списки-определения
2 Использование CSS для задания параметров списков
Задание списков на Web-странице средствами HTML
В текстовых документах используются списки (перечисления элементов) разных типов. HTML поддерживает списки трех видов:
нумерованные списки;
ненумерованные списки;
списки-определения.
Использование CSS для задания параметров списков
Каскадные листы стилей CSS так же, как при форматировании теста, используются для расширения возможности HTML при задании параметров списков.
Для задания параметров списков в CSS имеется два свойства:
list-style-type - задает такие виды знаков при перечислении элементов:
disc - диск;
circle - окружность;
square - квадрат;
decimal - арабские цифры;
lower-roman - строчные римские цифры ;
upper-roman - прописные римские цифры;
lower-alpha - строчные латинские буквы;
upper-alpha - прописные латинские буквы.
list-style-image - задает произвольный (задаваемый разработчиком) знак при перечислении элементов списка в виде ссылки на файл, содержащий изображение знака, в виде list-style-image: url(ссылка).
В примере №2 показано использование свойств list-style-type и list-style-image.
Пример 2
<HTML>
<HEAD>
<TITLE> Создание списков с помощью CSS </TITLE>
<LINK REL= STYLESHEET HREF="my.css">
<STYLE>
UL.image{color:#000070; font:italic 0.5cm; list-style-image: url(tre1.gif)}
</STYLE>
</HEAD>
<BODY>
<H1> Списки на Web-странице </H1>
<P> CSS позволяет формировать на Web-странице списки:
<UL CLASS="image">
<LI> с заданием знаков перечесления с помощью свойства list-style-type:
<UL style="color:#000070; font:italic 0.5cm; list-style-type:decimal; list-style-image:none">
<LI> disc;
<LI> square;
<LI> circle;
<LI> decimal;
<LI> lower-roman;
<LI> upper-roman;
<LI> lower-alpha;
<LI> upper-alpha.
</UL>
<LI> с заданием знаков перечесления в виде произвольных рисунков () с помощью свойства list-style-image.
</UL>
</BODY>
</HTML>
Цвет, размер и тип шрифтов в списках в примере №2 заданы для тэга UL внешнего списка с помощью внутреннего задания CSS, для тэга UL внутреннего списка - с помощью встроенного.
Тема: Размещение таблиц на Web-странице
1 Представление таблиц на Web-странице
1.1 Задание параметров таблицы
1.2. Формирование таблицы
1.3. Использование CSS для задания параметров таблиц
2 Задание движущихся элементов на Web-странице
Представление таблиц на Web-странице
HTML обладает большими возможностями для представления на Web-странице различных таблиц. Необходимо отметить, что средства формирования таблиц используются в HTML не только и, наверно, не столько для изображения собственно таблиц, как для размещения элементов Web-страницы на экране. В этом случае экран браузера представляется в виде таблицы с невидимыми границами, и отдельные элементы Web-страницы помещаются в ту или иную ячейку таблицы.
Задание параметров таблицы
Таблица на языке HTML указывается с помощью тэга-контейнера <TABLE> . . . </TABLE>. Общие параметры таблицы задаются в тэге <TABLE> , который содержит следующие параметры:
ALIGN - выравнивание таблицы:
left - по левому краю;
center - по центру;
right - по правому краю.
WIDTH - ширина таблицы указывается или в пикселях, или в процентах от ширины экрана (по умолчанию берется минимально необходимой для представления данных).
BORDER - ширина границ таблицы, указывается в пикселях (по умолчанию равна 0 - в этом случае границ таблицы не видно);
BORDERCOLOR - цвет границ таблицы;
BGCOLOR - цвет фона таблицы;
CELLSPACING - расстояние в пикселях между соседними ячейками таблицы (по умолчанию равно 3);
CELLPADDING - расстояние в пикселях между границей ячейки и ее содержимым (по умолчанию равно 1).
Заголовок таблицы, если он необходим, задается с помощью тэга-контейнера <CAPTION> . . . </CAPTION>, который содержит параметр ALIGN:
ALIGN - задание расположения заголовка таблицы:
top - сверху таблицы;
bottom - снизу таблицы.
В примере № 1 показано задание параметров таблицы.
Использование CSS для задания параметров таблиц
И при построении таблицы могут быть задействованы расширенные возможности CSS. Для этих целей подходят свойства, задающие параметры границ элементов Web-страници. Они могут быть использованы для задания границ таблицы. Каскадные листы стилей имеют следующие свойства задания параметров границ элементов:
border-color - указывает цвет границы, может быть задано от одного до четырех значений:
если задано одно значение - оно применяется ко всем четырем границам;
если задано два значения - первое относится к верхней и нижней границам, второе - к левой и правой границе;
если задано три значения - первое применяется к верхней границе, второе относится к левой и правой границе, третье - к нижней границе.
border-style - указывает стиль границы:
none - граница не видна (значение, принимаемое по умолчанию);
solid - сплошная линия;
double - двойная сплошная линия;
dotted - линия в виде точек;
dashed - пунктирная линия;
groove - трехмерная вогнутая граница;
ridge - трехмерная выпуклая граница;
inset - трехмерная граница "ступенька вверх";
outset - трехмерная граница "ступенька вниз".
border-width - указывает толщину границ, может быть задано от одного до четырех значений:
если задано одно значение - оно применяется ко всем четырем границам;
если задано два значения - первое относится к верхней и нижней границам, второе - к левой и правой границе;
если задано три значения - первое применяется к верхней границе, второе относится к левой и правой границе, третье - к нижней границе.
Толщина границ может быть задана с помощью числового значения в пикселях, а также можно использовать при предоопределенных значения:
thin - тонкая линия;
medium - линия средней толщины (значение, принимаемое по умолчанию);
thick - толстая линия;
border-collapse - указывает будут ли границы ячеек таблицы и границы самой таблицы сливаться в одну (применяется только для тэга <TABLE>):
separate - разделяет границу таблицы и границы ее ячеек (значение, принимаемое по умолчанию);
collapse - объединяет их.
Параметры границы, как и параметры шрифта можно указывать в сокращенной форме. Например, вместо задания свойств границы в виде:
<TD STYLE="border-style:dotted; border-width:6; border-color:green">
можно использовать такую форму:
<TD STYLE="border:dotted 6 green">
Если при этом указаны не все свойства границы, то остальные наследуются или принимаются по умолчанию.
Помимо задания свойств сразу нескольких границ элемента CSS имеют возможность задания свойств только одной границы:
border-top - верхней границы;
border-bottom - нижней границы;
border-left - левой границы;
border-right - правой границы.
Для указания сразу нескольких свойств каждой из этих границ можно использовать сокращенную форму задания значений, как приведено выше. Для задания одного из свойств границы можно воспользоваться одним из следующих свойств:
border-top-style - задание стиля верхней границы;
border-top-width - задание ширины верхней границы;
border-top-color - задание цвета верхней границы;
border-bottom-style - задание стиля нижней границы;
border-bottom-width - задание ширины нижней границы;
border-bottom-color - задание цвета нижней границы;
border-left-style - задание стиля левой границы;
border-left-width - задание ширины левой границы;
border-left-color - задание цвета левой границы;
border-right-style - задание стиля правой границы;
border-right-width - задание ширины правой границы;
border-right-color - задание цвета правой границы.
В примере № 1 показано использование свойств CSS при построеним таблицы.
Задание движущихся элементов на Web-странице
Для задания движущихся элементов на Web-странице используется тэг-контейнер <MARQUEE> . . . </MARQUEE>. Движущийся элемент (в качестве которого может быть использован текст, рисунок, таблица и другие элементы Web-страницы) помещается внутри контейнера, т.е. между тэгами <MARQUEE> и </MARQUEE>. Тэг <MARQUEE> имеет следующие параметры:
SCROLLDELAY - указывает задержку в мс;
SCROLLAMOUNT - указывает число пикселов, на которое сдвигается элемент (скорость его перемещения);
BEHAVIOR - указывает характер движения:
scroll - элемент перемещается в одну сторону (задается по умолчанию);
alternate - элемент перемещается поочередно то в одну сторону, то в другую;
slide - элемент перемещается до края и останавливается.
DIRECTION - указывает направление движения элемента:;
left - справа налево (задается по умолчанию);
right - слева направо;
up - снизу вверх;
down - сверху вниз;
LOOP - указывает число повторений, если 0 или infinite - бесконечно (задается по умолчанию).
В качестве примера построения таблицы на Web-странице приведем следующий HTML-документ:
Пример 1
<HTML>
<HEAD>
<TITLE> Использование таблиц на Web-странице </TITLE>
<LINK REL=STYLESHEET HREF="my.css">
<STYLE>TABLE{font: italic 6mm; color:#00A}</STYLE>
</HEAD>
<BODY>
<H1> ТАБЛИЦЫ НА WEB-СТРАНИЦЕ </H1>
<TABLE BORDER=2 BORDERCOLOR=RED BGCOLOR= #C0C0C0 CELLSPACING=4 CELLPADDING=2 ALIGN=center HEIGHT=60% WIDTH=80%>
<CAPTION ALIGN=bottom> ТАБЛИЦА 1 </CAPTION>
<TR BGCOLOR=yellow>
<TH COLSPAN=3> Общий заголовок столбцов 1-3 <TH> Столбец 4
<TR>
<TD ALIGN=right> 1/1 <TD ALIGN=center STYLE="border-width:thick medium"> 1/2
<TD ROWSPAN=2 VALIGN=top>
<MARQUEE BEHAVIOR=slide DIRECTION=down SCROLLAMOUNT=2> 1-2/3 </MARQUEE><TD> 1/4
<TR>
<TD COLSPAN=2 BGCOLOR=#E0E0FF STYLE="font-size:8mm; border:blue 10 dotted">
<MARQUEE BEHAVIOR=alternate SCROLLAMOUNT=10 LOOP=4> 2/1-2 </MARQUEE>
<TD VALIGN=bottom ALIGN=center
STYLE="font-size:12mm; border-left: dashed 12 #F00" > 2/4
</TABLE>
</BODY>
</HTML>
Тема: Размещение изображений на Web-странице
1. Представление изображений на Web-странице
1.1 Задание параметров изображения
1.2 Задание фона в виде изображения
1.3 Позиционирование элементов на Web-странице
2 Представление видеофрагментов и звука на Web-странице
Представление изображений на Web-странице
Задание параметров изображения
Для помещения графических изображений на Web-страницу применяется тэг <IMG>, который использует следующие параметры:
SRC - URL- адрес файла с графическим изображением. URL (Universal Resource Locator) имеет следующий формат: http://host[:port][Path], где
http (hypertext transfer protocol) - название протокола передачи гипертекста (Web-страниц);
host - IP-адрес или доменное имя компьютера;
port - номер порта;
Path - путь к файлу на компьютере.
ALT - текстовая строка, которая выводится на экран вместо изображения в случаях, когда изображение по какой-то причине (например, в параметрах браузера установлен запрет на загрузку изображений) не может быть помещено на Web-страницу;
ALIGN - выравнивание изображения относительно текста:
left - изображение располагается слева от текста;
right - изображение располагается справа от текста;
top - верхний край изображения выравнивается по по верхнему краю текста;
middle - центр изображения выравнивается по нижней строке текста;
bottom - нижний край изображения выравнивается по базовой линии текста (задается по умолчанию);
textop - верхний край изображения выравнивается по по верхнему краю самого высокого символа в строке;
absmiddle - центр изображения выравнивается по центру окружающего текста;
baseline - то же, что bottom;
absbottom - нижний край изображения выравнивается по нижнему краю строки с учетом нижних "хвостиков".
HEIGHT - высота изображения в пикселях или в % от величины экрана;
WIDTH - ширина изображения в пикселях или в % от величины экрана;
HSPACE - отступ в пикселях от текста по горизонтали;
VSPACE - отступ в пикселях от текста по вертикали;
С помощью параметров HEIGHT и WIDTH осуществляется масштабирование изображений. Масшабирование позволяет уменьшить размер файла с изображением для его более быстрой передачи по сети.
Можно отметить и следующую особенность - если указаны параметры HEIGHT и WIDTH, то на экране сначала появляется прямоугольник без изображения, затем текст и только потом изображение. Если из текста следует, что даннаяWeb-страница не представляет интереса, можно не дожидаясь загрузки изображения, перейти к следующей странице. В противном случае чтобы получить текстовую информацию, необходимо дождаться полной загрузки изображения.
Если HTML-документе указан только один из параметров (HEIGHT или WIDTH), то второй параметр будет изменен пропорционально изменению первого.
В примере №1 показано задание параметров изображения при помещении его на экран (файл "fish.gif").
Задание фона в виде изображения
Для задания фона в виде изображения в тэгах, в которых можно указывать фон (BODY, TABLE, TR, TH или TD), вместо параметра BGCOLOR, необходимо использовать параметр BACKGROUND, значением которого является адрес графического файла. Если указанное изображение меньше области экрана, для которой создается фон, то оно повторяется и по горизонтали и по вертикали, заполняя полностью всю указанную область (весь экран, таблицу или ячейку в таблице).
Например, если файл "bg.gif" содержит изображение , то в результате выполнения тэга
<BODY BACKGROUND="bg.gif">
весь экран заполниться сеткой, состоящей из таких синих квадратов.
Наряду с параметром BACKGROUND при задании фона в виде изображения можно также использовать параметр BGPROPERTIES со значением FIXED. В этом случае при прокрутке страницы фоновое изображение останется неподвижным (эффект водяных знаков).
Каскадные листы стилей CSS для задания фона на Web-странице используют следующие свойства:
background-color - указывает цвет фона, имеет такие значения:
имя цвета;
#RrGgBb;
#RGB;
transparent (фон прозрачен).
background-image - задает фон в виде изображения, имеет такие значения:
none - фон в виде изображения не задан ;
url(имя графического файла) .
background-repeat - указывает на повторяемость изображения:
repeat - изображение повторяется по горизонтали и по вертикали (принимается по умолчанию);
repeat-x - изображение повторяется по горизонтали;
repeat-y - изображение повторяется по вертикали;
norepeat - изображение не повторяется.
background-attachment - указывает свойства скольжения фона:
scroll - фон скользит вместе с содержимым Web-страницы при ее прокрутке;
fixed - фон остается неподвижным при прокрутке Web-страницы (этот параметр применяется только для тэга <BODY>).
position - задает позицию фонового изображения относительно верхнего левого края области. Для данного свойства обычно задают два значения, разделенные пробелами:
[top|center|bottom][left|center|right];
[pt mm cm][[pt mm cm];
[px %][px %].
Если вместо двух значений задается одно, то считается, что указана позиция по горизонтали, а позиция по вертикали принимается равной 50%
Для свойства background можно указать сокращенный способ задания значений, например, background: url(bg.gif) fixed.
Использование каскадных листов стилей для задания фона на Web-странице показано в примере №1.