Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Всероссийский государственный университет кинематографии им. С.А. Герасимова "ВГИК"

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Создай свою Web.doc

Скачиваний:

Добавлен:

13.02.2015

Размер:

458.24 Кб

Скачать

☆

<<< < Предыдущая 1 23 / 33

Вы можете использовать для выбора цвета эту таблицу: Коды цветов

alrcebtue	#FOF8FF	fuchsia	#FFOOFF
antiguewhite	#FAEBD7	ghostwhite	#F8F8FF
agua	#OOFFFF	gainsboro	#DCDCDC
aguamarine	#7FFFD4	palegofdenrod	#EEE8AA
azure	#FOFFFF	palegreen	#98FB98
beige	#F5F5DC	paleturguoise	#AFEEEE
bisgue	#FFE4C4	palevbletred	#DB7093
black	#000000	papayawhip	#FFEFD5
blanchedalmond	#FFEBCD	reachpuff	#FFDAB9
blue	#OOOOFF	peru	#CD853F
blueviolet	#8A2BE2	pink	#FFCOCB
brown	#A52A2A	plum	#DDAODD
burlywood	#DEB887	powderblue	#BOEOE б
cadetblue	#5F9EAO	purpte	#800080
chartreuse	#7FFFOO	red	#FFOOOO
chocolate	#02691 E	rosybrown	#BC8F8F
coral	#FF7F50	royaibtue	#4169E1
comtiowerblue	#6495ED	saddlebrown	#884513
comsilk	#FFF8DC	salmon	#FA8072
cnmson	#DC143C	sandybrown	#F4A460
cyan	#OOFFFF	seagreen	#2E8B57
darkblue	#000088	seashell	#FFF5EE
darkcyan	#008888	sienna	#A05220
darkgoldenrod	#B88608	silver	#COCOCO
darkgray	#A9A9A9	skyblue	#87CEEB
darkgreen	#006400	slateblue	#6A5ACD
darkkhaki	#BDB768	slategray	#708090
darkmagenta	#8B008B	snow	#FFFAFA
darkolivegreen	#556B2F	springgreen	#OOFF7F
darkorange	#FF8COO	steelbiue	#4682B4
darkorchid	#9932CC	tan	#D2B48C
darkred	#8BOOOO	teal	#008080
darksalmon	#E9967A	thistte	#D8BFD8
darkseagreen	#8FBC8F	tomato	#FF6347
darkslateblue	#483D8B	turguoise	#40EODO
darkslategray	#2F4F4F	violet	#EE82EE
darkturguoise	#OOCCED1	wheat	#F5DEB3
darkviolet	#940003	whrte	#FFFFFF
deeppink	#FF1493	whitesmoke	#F5F5F5
deepskyblue	#OOBFFF	yellow	#FFFFOO
dimgray	#696969	yelowgreen	#9ACD32
dodgerblue	#1E90FF	gold	#FFD700
firebrick	#822222	goldenrod	#DAA520
floratwhite	#FFFAFO	gray	#808080
forestgreen	#228822	green	#008000
greenyeltow	#ADFF2F	lightpink	#FFB6C1
honeydew	#FOFFFO	lightsalmon	#FFA07A
hotpink	#FF69B4	lightseagreen	#20B2AA
indianred	#CD5C5C	lightskybtue	#87CEFA
indigo	#4B0082	lightslategra	#778899
ivory	#FFFFFO	lightsteelblue	#BOC4DE
khaki	#FOE68C	tightyellow	#FFFFEO
lavender	#E6E6FA	lime	#OOFFOO
lavenderbluch	#FFFOFF5	limegreen	#32CD32
lawngreen	#7CFCOO	linen	#FAFOE6
lemonchiffon	#FFFACD	magenta	#FFOOFF
lightblue	#ADD8E6	maroon	#800000
sightcoral	#F08080	mediumaguamarine	#66CDAA
lightcyan	#EOFFFF	mediumblue	#OOOOCD
lightgoldenrodyellow	#FAFAD2	mediumorchid	#BA55D3
lightgreen	#90EE90	mediumpurpie	#9370DB
lighgtgrey	#D3D3D3	mediumseagreen	#3CB371
mistyrose	#FFE4E1	mediumslateblue	#7B68EE
moccasin	#FFE4E1	mediumsprirggren	#OOFA9A
navajowhite	#FFDEAD	mediumturgi oise	#48D1CC
navy	#000080	mediumviole red	#C71585
oldlace	#FDF5E6	midnightblue	#191970
otive	#808000	mintcream	#F5FFFA
olivedrab	#6B8E23	orange	#FFA500
orangered	#FF4500	orchid	#DA70D6

ПРИМЕР ПРОСТОЙ СТРАНИЧКИ

<HTML>

<HEAD>

<TITLE> Welcome to my home page </TITLE>

</HEAD>

<BODY>

<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички

</BODY>

</HTML>

А такой вид имеет документ при просмотре через Internet Explorer:

Текст Содержимое странички Поместив текст между тегами ...

Шаг4

А теперь как выглядит программа в HTML-коде, с зеленым цветом фона.

<HTML>

<HEAD>

<TITLE> Welcome to my home page </TITLE>

</HEAD>

<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " >

<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички

<font color="#FF0000">Поместив</font><font color="#CF2CD4">текст </font><font color="#0000FF">между</font><font color="silver">тегами </font><font color="green" size="4">...</font> </BODY> </HTML>

А такой вид имеет документ при просмотре через Internet Explorer:

Для создания графического фона используются небольшие картинки в формате gif и jpeg. Броузер автоматически заполняет ими весь экран. Они должны быть небольшие и формировать однородный фон, а с помощью небольшой полоски с плавным переходом цвета можно создавать интересный градиентный фон. Экспериментируйте! Для задания фона используется атрибут BACKGROUND тега <BODY>.

Шаг5

А теперь рассмотрим как просто вставить картинку в web-страничку. Для этого лучше всего использовать форматы gif и jpg. Первый популярен из-за возможности использовать прозрачный цвет (тогда изображения могут иметь прозрачные участки), а второй - имеет малый размер и удобен для фотографий. Для вставки картинки используется тег IMG. Его синтаксис следующий:

<IMG SRC="имя файла" ALT="текст" ALIGN=расположение WIDTH=ширина HEIGHT =высота >, где имя файла - это имя картинки. Если она находится в той же директории, что и ваша страничка, то это просто имя файла. Если картинка находится в ином месте (например где-то в Интернете), то указывайте имя с полным путем. текст - это сообщение, которое выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой броузер так, что тот не показывает картинки). Кроме того, вы увидите этот текст, когда курсор мыши находится над картинкой. расположение - место расположния изображения. Может иметь следующие значения: TOP - последующий текст располагается в верхней части изображения; BOTTOM - последующий текст располагается в нижней части изображения; LEFT - изображение находится в левой части листа, текст обтекает изображение справа; MIDDLE - изображение находится в центре листа, RIGHT - изображение находится в правой части листа, текст обтекает изображение слева. ширина - ширина изображения в пикселях. высота - высота изображения в пикселях. Атрибуты alt, align, width, height являются необязательными.

пример тегов

что получится

<А HREF="guidance. html#chapter4.">

А теперь как выглядит программа в HTML-коде:

<HTML>

<HEAD>

<TITLE> Welcome to my home page </TITLE>

</HEAD>

<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " >

<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички

Шаг6

Горизонтальные линии

В качестве дополнительного элемента оформления Web-страниц можно использовать горизонтальные линии. Этот элемент позволяет отделять друг от друга различные части документа, расположенные на одной странице. Для вставки горизонтальных разделительных линий применяется непарный тег HTML <HR>. Этот тсг имеет следующий формат:

Параметр ALIGN используется для указания режима выравнивания. Линия может быть выровнена по левому краю (значение left), по правому краю (значение right) или по центру страницы (значение center).

Параметр SIZE позволяет указать толщину линии в пикселах.

Параметр WIDTH используется для указания ширины линии. Значение этого параметра может быть задано как в пикселах, так и в процентах относительно ширины страницы. Указание ширины в процентах в большинстве случаев является более предпочтительным, поскольку в этом случае ширина линии будет изменяться в зависимости от размера окна броузера, в котором выполняется просмотр страницы. Если же ширину линии указать в пикселах, то при просмотре страницы в системах с низким разрешением экрана линия может не уместиться в пределах видимого окна броузера.

При использовании параметра NOSHADE линия будет отображаться со сплошной заливкой, в то время как, если этот параметр опущен, броузер будет отображать горизонтальную линию с применением эффекта объема.

Вкачестве горизонтальных разделительных линий можно также использовать графические элементы. В таком случае линия может статьдекоративным элементом, увязанным с общей концепцией оформления свита. Для этой цели можно воспользоваться тегом <IMG>.

А теперь как выглядит программа в HTML-коде:

<HTML>

<HEAD>

<TITLE> Welcome to my home page </TITLE>

</HEAD>

<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " >

<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички

<IMG SRC="064.gif" ALT=""Стрелочка" width="147" height="147" >

<HR ALIGN=center SIZE=10 Width = 525 NOSHADE>

</BODY>

</HTML>

Шаг7

Списки

Списки позволяют выделять в тексте документа определенные логические cруктуры, такие как описание последовательности действий, перечни предметов и понятий и т. д. Язык HTML позволяет создавать в Web-документах списки трех различных типов, которые будут рассмотрены в этом разделе книги.

Маркированный список

Маркированные списки служат для оформления перечней различных объектов и понятий, возможных вариантов действий и т. д. Маркированный список представляет собой группу абзацев, в начале каждого из которых ставится специальный символ - маркер.

Для определения маркированного списка язык HTML позволяет использовать тег <UL>...</UL>. Этот тег имеет следующий формат:

</UL>

Тег <UL>...</UL> определяет границы списка и общие параметры форматирования всех его элементов. Параметр ALIGN задает режим выравнивания элементов списка аналогично одноименному параметру тега <Р>.. .</Р> (см. раздел <Абзац>). Параметр TYPE определяет тип маркеров списка: при указании значения disk используются круглые закрашенные маркеры, значения circle - круглые незакрашенные маркеры, а значения square - квадратные маркеры.

Текст каждого из элементов списка заключается в пределах парного тега <LI>... </LI>. Параметры этого тега аналогичны параметрам тега <UL>, однако их действие распространяется только на отдельный элемент списка, а не на список целиком.

Нумерованный список

В отличие от маркированного, нумерованный список состоит из набора последовательно пронумерованных абзацев. Для определения маркированного списка в языке HTML применяется парный тег <OL>.. .</OL>. Этот тег имеет следующий формат:

<LI ALIGN=center|left|right|justify TYPE=A|b|a|I|i|i VALUE=Номер элемента списка>Текст элемента списка</Li>

</OL>

В целом формат этого тега сходен с форматом тега <UL>, требуемого для определения маркированных списков: между открывающей и закрывающей частями тега располагаются элементы списка, каждый из которых определяется с использованием тега <LI>.. .</LI>. Тем не менее тег <01> допускает указание большего количества параметров форматирования, нежели тег <UL>. Рассмотрим эти параметры.

Значение параметра ALIGN определяет режим выравнивания текста в пределах нумерованного списка. Подробнее о режимах выравнивания говорилось в разделе <Абзац>.

Параметр START позволяет указать значение, с которого должна начинаться нумерация списка. Этот параметр полезно использовать, если требуется включить в список ненумерованные элементы, например иллюстрации, таблицы с пояснительной информацией или примеры программного кода.

Значение параметра TYPE определяет тип нумерации списка. Элементы списка могут иметь алфавитную нумерацию (латинский алфавит, значение А или а) либо нумероваться римскими (значение I или i) или арабскими (значение 1) цифрами.

Ter <LI> также позволяет указывать ряд параметров форматирования элементов нумерованного списка. Параметры ALIGN и TYPE имеют то же значение, что и в контексте тега <OL>, однако их действие распространяется лишь на отдельный элемент нумерованного списка, а не на весь список. Кроме того, тег <LI> допускает использование параметра VALUE. Этот параметр позволяет явно указать номер элемента списка. Явное указание номера элемента также приводит к изменению последовательности нумерации. То есть, если для определенного элемента списка был указан параметр VALUE=100, то этот элемент получает номер 100, следующий - номер 101 и т. д. Параметр VALUE позволяет продолжить прерванную ранее нумерацию аналогично параметру START тега <OL>, однако последний подход является более предпочтительным, поскольку облегчает восприятие структуры списка при правке HTML-кода страницы.

А теперь как выглядит программа в HTML-коде(эта программа составлена с маркированным списком). По аналогии мы сами можете составить программу с нумерованным списком.

<HTML>

<HEAD>

<TITLE> Welcome to my home page </TITLE>

</HEAD>

<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " >

<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ>

<HR ALIGN=center SIZE=10 Width = 525 NOSHADE>

<UL ALIGN=center justify TYPE=dlske>

<LI ALIGN=center justify TYPE=disk|>ТЕКCT элемента списка</LI>

<LI> Это вторая строка списка</LI>

<LI> Это третья строка списка</LI> </UL> </BODY> </HTML>

Шаг8

Таблицы

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

Для создания таблиц в HTML-документах используется тег <TABLE>...</TABLE>, имеющий следующий формат:

<TABLE ALIGN=left|right|center WIDТН="Ширина таблицы BORDER= "Толщина границы" CELLSPACING="Интервал между ячейками" CELLPADDING="Paзмep полей ячеек">

</TR>

</TABLE> Рассмотрим назначение отдельных параметров тега TABLE.

Параметр ALIGN определяет режим выравнивания таблицы (но не текста в ячейках таблицы!). Таблица может быть выровнена по центру (значение ALIGN= center), по левому краю (значение ALIGN=left) или по правому краю страницы (значение ALIGN=right).

Параметр WIDTH позволяет указывать ширину таблицы в пикселах или процентах от ширины области окна броузера, отведенной под отображение документа. В первом случае достаточно указать значение ширины, например:

WIDTH=200

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

Если необходимо, чтобы ширина таблицы изменялась в зависимости от ширины рабочей области окна броузера, можно указать значение ширины в процентах:

WIDTH=75%

Параметр BORDER определяет толщину линий границы в пикселах. Если границы необходимо скрыть, следует присвоить этому параметру значение 0:

BORDER=0

Каждая из строк таблицы определяется тегом <TR>...</TR>. Этот тег позволяет указывать основные параметры форматирования для каждой из строк таблицы в отдельности.

Параметр ALIGN управляет режимом выравнивания текста в ячейках строки по горизонтали. Эти режимы выравнивания аналогичны режимам выравнивания текста основного абзаца документа. В то же время параметр VALIGN позволяет устанавливать режим выравнивания текста по вертикали. Текст может быть выровнен по верхнему (top) или нижнему (bottom) краю ячейки, а также по середине ячейки (middle).

Все данные, которые должны отображаться в таблице, необходимо размещать в пределах тегов <TD>...</TD>, между их открывающими и закрывающими частями. Положение на странице остальных данных и объектов, размещенных в пределах тега <TABLE>...</TABLE>, но не заключенных между тегами <TD> и </TD>, при их отображении в броузере окажется неопределенным: они могут быть размещены в л Параметр WIDTH определяет ширину ячейки. Ширина может быть указана в пикселах или процентах. В первом случае ширина будет установлена вне зависимости от общей ширины таблицы. При отображении в броузере ячейка таблицы будет иметь указанную ширину, если только эта ширина является достаточной для отображения содержащихся в ячейке данных (в противном случае броузер может выбрать ширину ячейки по собственному усмотрению). При указании процентного значения ширина ячейки будет зависеть от ширины таблицы.

Параметр BGCOLOR позволяет указать цвет фона ячейки. Более подробно коды цветов были рассмотрены в разделе <Раздел основного текста страницы>. Если этот параметр не указан, для ячейки устанавливается <прозрачный> цвет фона; в таком случае фоном для ячейки будет служить основной фон страницы - цвет или рисунок.

Для создания ячеек, занимающих несколько строк или столбцов таблицы, используются параметры ROWSPAN и COLSPAN. Значение этих параметров определяет, соответственно, сколько строк и столбцов должна охватывать соответствующая ячейка.

Чтобы лучше разобраться в структурной организации таблиц, представим ее в несколько упрощенном варианте:

<TABLE>

<TR>

<TН>Заголовок столбца 1</ТН>

<TH>3аголовок столбца 3</ТН>

<ТН>Заголовок столбца 3</ТН>

</TR>

<TR>

<TD>Текст ячейки 1:1</TD>

<TD>Текст ячейки 1:2</TD>

<TD>ТЕCT ячейки 1:3</TD>

</TR>

<TR>

<TD>Текст ячейки 2:1</TD>

<ТD>Текст ячейки 2:2</TD>

<TD>ТЕКСТ ячейки 2:3</ТD>

</TR>

</TABLE>

Приведенный выше HTML-код представляет собой пример таблицы размером 3х3 ячейки. Каждая из строк таблицы представлена парой тегов <TR>...</TR>. Первая строка содержит заголовки столбцов, для представления которых используются парные теги <ТН>...</ТН>. Остальные две строки содержат обычные ячейки, предназначенные для размещения основных данных таблицы. Каждой из ячеек соответствует пара тегов <TD>.. .</TD> HTML>

А теперь как выглядит программа в HTML-коде

<HEAD>

<TITLE> Welcome to my home page </TITLE>

</HEAD>

<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " >

<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички

<HR ALIGN=center SIZE=10 Width = 525 NOSHADE>

<UL ALIGN=center justify TYPE=dlske>

<LI ALIGN=center justify TYPE=disk|>ТЕКCT элемента списка</LI>

<LI> Это вторая строка списка</LI>

<LI> Это третьяя строка списка</LI>

</UL>

<TABLE ALIGN=center WIDТН=300 BORDER= 2 CELLSPACING=10 CELLPADDING=5>

<TR>

<TD>Заголовок столбца 1</TD>

<TD>3аголовок столбца 2</TD>

<TD>Заголовок столбца 3</TD>

</TR>

<TR>

<TD>Текст ячейки 1:1</TD>

<TD>Текст ячейки 1:2</TD>

<TD>ТЕCT ячейки 1:3</TD>

</TR>

<TR>

<TD>Текст ячейки 2:1</TD>

<TD>Текст ячейки 2:2</TD>

<TD>ТЕКСТ ячейки 2:3</TD>

</TR> </TABLE> </BODY>.</HTML>

Шаг9

Формы

Формы являются основным элементом Web-страниц, позволяющим осуществлять взаимодействие с пользователем. Используя элементы форм, пользователь может передавать автору страницы определенные сведения, передавать данные программам, работающим на сервере, осуществлять переход к определенным страницам Web-сайта и выполнять другие операции, делающие Web действительно интерактивной средой.

Таблица 10.3. Типы элементов форм

Тип	Элемент формы	Описание
Text	. Поле ввода текста	Используется для ввода произвольных данных
Password	Поле ввода пароля	Используется для ввода пароля. Отличается от поля ввода текста тем, что вместо всех вводимых в это поле символов отображаются символы звездочки (*)
Checkbox	Флажок	Используется для выбора одного из двух вариантов типа <да-нет>
Radio	Переключатель	Используется для выбора одного из нескольких взаимоисключающих вариантов
submit	Кнопка передачи данных	Используется для передачи данных формы программе-обработчику
reset	Кнопка очистки формы	Используется для очистки формы. При щелчке на этой кнопке все введенные пользователем данные заменяются на принятые по умолчанию

Параметр NAME позволяет указать имя элемента формы. Это имя используется программой-обработчиком для идентификации получаемых данных.

Параметр VALUE может быть указан для полей ввода текста и пароля, а также для кнопок передачи данных и очистки формы. При указании для полей ввода этот параметр определяет значение поля формы по умолчанию (текст, отображаемый в поле на момент загрузки формы). В случае кнопок параметр VALUE имеет совершенно иное назначение - он определяет текст, отображаемый на кнопке.

Параметр CHECKED используется совместно с флажками и переключателями. Этот параметр указывается в том случае, когда флажок или переключатель должен быть установлен по умолчанию.

Параметр SIZE определяет ширину полей ввода, а параметр MAXLENGTH - максимально допустимую длину строки, которую можно ввести в это поле.

Параметр ALIGN используется для указания режима выравнивания элемента формы. Элементы формы выравниваются аналогично графическим объектам.

Многострочные текстовые поля

Многострочные текстовые поля форм позволяют вводить крупные текстовые фрагменты. Для определения многострочного текстового поля используется тег <TEXTAREA>...</TEXTAREA>, имеющий следующий формат:

<TEXTAREA NAME="Имя поля" ROWS="Количество строк"COLS="Количество столбцов">Текст по умолчанию</ТЕХТАRЕA>

Параметр NAME используется для указания имени, служащего для идентификации текстового поля. Значения параметров ROWS и COLS определяют высоту и ширину текстового поля в строках и столбцах символов соответственно.

Используя предыдущие механизмы формы создайте самостоятельно.

Поля списков

Формы могут включать в себя поля многострочных и раскрывающихся списков. Такие списки применяются для выбора одного или нескольких вариантов из предопределенного набора. Для определения этих полей используется тег <SELECT>... </SELECT>, имеющий следующий формат:

<OPTION SELECTED VALUE="Зачение">Символы</ОРТION>

</SELECT>

Параметр NAME используется для указания имени поля.

Значение параметра SIZE определяет высоту поля в строках. По умолчанию создается раскрывающийся список. Для создания обычного списка следует указать значение параметра SIZE не менее 2.

Параметр MULTIPLE позволяет выделять в списке несколько различных вариантов. Если этот параметр не указан, пользователь сможет выбирать только один из содержащихся в списке вариантов. И наконец, параметр ALIGN определяет режим выравнивания поля списка.

Каждый из представленных в списке вариантов определяется тегом <OPTION>... </OPTION>. Этот тег допускает задание двух параметров. Параметр SLELECTED указывает на то, что соответствующий вариант выбирается по умолчанию. Параметр VALUE определяет значение, передаваемое программе-обработчику данных формы при выборе соответствующего варианта.

Списки могут включать в себя любое число вариантов, поэтому их рекомендуется использовать в тех случаях, когда количество возможных вариантов выбора слишком велико для их представления переключателями.

Шаг10

Фреймы

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

Следует отметить, что какой-либо русский аналог английского термина frames нельзяназвать безусловно устоявшимся. В то время как в Microsoft Word 2000 применяется термин <рамки>, в Microsoft Internet Explorer 5 можно встретить вариант перевода этого термина <кадры>. На наш взгляд, оба эти перевода нельзя назвать удачными. С другой стороны, в русскоязычной литературе нередко употребляется термин <фреймы>, который попросту взят из английского языка. В нашей книге будет употребляться именно этот вариант.

HTML-страница с фреймами состоит из нескольких компонентов: страницы, содержащей набор фреймов, и страниц, предназначенных для отображения в каждом из фреймов этого набора. Набор фреймов можно представить себе как своеобразные ячейки, предназначенные для загрузки HTML-документов. Для определения набора фреймов в языке HTML имеется тег <FRAMESET>...</FRAMESET>. Этот тег имеет следующий формат:

<FRAMESET ROWS="Вертикальная структура фрейма" COLS="Горизонтальная структура фрейма">

</FRAMESET>

<BODY> Код страницы для отображения в броузерах, не поддерживающих фреймы

</BODY>

</NOFRAMES>

Параметры ROWS и COLS тега <FRAMESET> используются для определения структуры набора фреймов по вертикали и горизонтали. Допустим, необходимо создать набор из двух фреймов, расположенных горизонтально, в верхнем из которых необходимо отображать логотип Web-сайта и ссылки на основные страницы (панель навигации), а нижний предназначен для отображения информационных страниц. Верхний фрейм должен иметь высоту 60 пикселов, а нижний - занимать всю оставшуюся часть рабочей области окна броузера. Для создания такого набора будет использоваться следующий тег:

Символ звездочки (*) в данном случае означает, что второй (нижний) фрейм набора занимает по высоте всю рабочую область экрана, не используемую для отображения других фреймов (в данном случае такой фрейм один).

Аналогично, если требуется создать набор, в левом фрейме которого располагается вертикальная панель навигации шириной 100 пикселов, а всю оставшуюся часть справа занимает область для отображения основных страниц сайта, тег <FRAMESET> будет иметь следующий вид:

</FRAMESET>

После определения общей структуры набора фреймов необходимо описать каждый из фреймов, входящих в набор. Для этой цели служит тег <FRAME>. Этот тег является непарным.

Параметр SRC позволяет указать URL страницы, отображаемой во фрейме непосредственно после загрузки набора (или исходной страницы фрейма).

Параметр NAME определяет имя фрейма. Указание имени фрейма позволяет загружать в него документы по щелчку на гиперссылках, расположенных в других фреймах. Чтобы обеспечить открытие целевого документа гиперссылки в определенном фрейме, имя этого фрейма должно быть указано в качестве значения параметра TARGET этой гиперссылки. Например, при щелчке на гиперссылке, определенной с использованием представленного ниже тега, содержащийся в документе prices, html прейскурант продукции будет отображен с именем information:

<А HREF="prices.html" TARGET="information">Товары и цены</А>

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

Параметры MARGINWIDTH и MARGINHEIGHT определяют размеры полей фрейма.

Для установки режима отображения полос прокрутки во фрейме используется параметр SCROLLING. Если значение этого параметра равно yes, во фрейме отображаются полосы прокрутки. Если значение параметра равно по, полосы прокрутки не отображаются. При указании значения auto (а также если этот параметр не указан) полосы прокрутки отображаются только в том случае, если вся информация документа не умещается в пределах видимой области фрейма, и для просмотра этой ин4юрмации необходима полоса прокрутки.

Указание параметра NO RESIZE запрещает изменение размеров фрейма в ходе просмотра.

Обратите внимание, что тег <FRAMESET> замещает собой тег <BODY>, используемый на всех HTML-страницах, но не в наборах фреймов. Дело в том, что набор фреймов сам по себе не является Web-страницей. Он лишь определяет структуру, в пределах которой будут отображаться другие Web-cтраницы. Таким образом, наборы фреймов не допускают указания каких бы то ни было отображаемых элементов Web-страниц, будь то текст, рисунки, гиперссылки или другие элементы.

Тем не менее в настоящее время по-прежнему используются броузеры, не поддерживающие фреймы. Чтобы в таких броузерах просматривать страницы, содержащие фреймы, язык разметки HTML предоставляет тег <NOFRAMES>.. .</NOFRAMES>. Этот тег должен также включать в себя тег <BODY>...</BODY>, ограничивающий текст и объекты отображения страницы в броузерах, не поддерживающих фреймы.

Используя предыдущие материалы, фреймы на станице создайте самостоятельно.

А теперь рассмотрим последнюю и, пожалуй, самую важную часть странички - ссылки. Ссылки - это основа Internet`а, главный его принцип. И, соответственно, важнейшая часть web-страниц. Ссылки могут вести на другую страничку, на картинку (удобно не показывать большую картинку, а показать её уменьшенную копию, щелкнув на которую можно увидеть большое изображение в высоком качестве), на любой файл, на адрес электронной почты. Для перехода на другую страничку используется тег <A HREF="URL"> Название ссылки </A>, где URL (унифицированный локатор ресурсов, адрес любого файла в Интернете, например, http://ic.vrn.ru/~ppmagnum - адрес (url) моей странички) - адрес файла, куда, щелкнув на ссылку, вы перейдете, название ссылки - текст самой ссылки, например "домашняя страничка Вадима Николаева". Для создание ссылки на e-mail в качестве url`a вставте mailto: адрес электронной почты. Например, mailto: vvv-magnum@geocities.com. Щелкнув на такую ссылку вы откроете окно своей почтовой программы с уже записанным адресом. Останется толко написать письмо и отправить. Часто используют не текстовую ссылку, а картинку, щелкнув на которую вы перейдете в другое место. Для этого вместо названия ссылки вставте тег <IMS SRC="имя файла" >.

пример тегов

что получится

<a href="http://ic.vrn.ru/~ppmagnum">Домашняя страничка Вадима Николаева</a>

Домашняя страничка Вадима Николаева

a href="mailto:vvv@magnum.vrn.ru" Напишите мне письмо</a>

Напишите мне письмо

Используя предыдущие материалы, ссылки на станице создайте самостоятельно

<<< < Предыдущая 1 23 / 33

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

#
01.05.2025600.06 Кб0Словарь, звукорежиссеры с переводом.doc
#
24.08.201994.72 Кб18Словообразование_Лабораторные работы_2к_4с.doc
#
01.05.20256.58 Mб0смешанные материалы 9-11.doc
#
13.02.20151.67 Mб190Смирнова. Формат разметки сценария.doc
#
13.02.2015154.86 Кб38Содержание программы ПОКиВ 13-14 дневное.pdf
#
13.02.2015458.24 Кб36Создай свою Web.doc
#
27.08.20191.84 Mб53Соколов - Внутрикадровый монтаж.docx
#
11.03.20162.09 Mб829Соколов - Монтаж изображения. Простейшие принципы.pdf
#
11.03.201617.11 Кб56Список вопросов для подготовки к экзамену по киноаппаратуре.docx
#
13.02.201515.21 Кб109Список документальных фильмов.docx
#
13.02.201526.11 Кб73Список лит по театру.doc