Каскадные таблицы стилей(CSS)

⇐ ПредыдущаяСтр 5 из 6Следующая ⇒

Cascading Style Sheets (Каскадные таблицы стилей) - это язык, содержащий набор средств для описания внешнего вида отображения HTML-документов. С его помощью можно управлять стилем и расположением каждого элемента Web-страницы, что проще и функциональнее использования обычного набора HTML-тегов.

Предположим, что текст нужно оформить с помощью CSS так же, как в предыдущем примере, где HTML-код выглядел следующим образом:

<font face="Arial" size="3"><i><b><font color="#6600CC">оформленный текст</font></b></i></font>

Определить стиль можно с помощью элемента style:

<style type="text/css">

<p><!- -.mystyle { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: italic; font-weight: bold; color: #6600CC}- ->

</style>

Тег определения стиля содержит атрибут type="text/css", значение которого указывает,

что текст элемента на языке CSS. Определение стиля помещается в скобки HTML

комментария:"<!--...-- >". В начале следует "селектор стиля" - идентификатор ".mystyle".

В фигурных скобках перечисляются свойства данного стиля и их значения. Каждое

свойство задается парой "имя:значение". Прокомментируем данное определение стиля:

.mystyle (селектор стиля)

font-family: Arial, Helvetica, sans-serif (семейство шрифтов; лучше указывать не один шрифт, который может отсутствовать на компьютере пользователя, а семейство, обладающее схожими свойствами).

font-size: 12pt (размер шрифта; в данном случае он указан в пунктах).

font-style: italic(стиль шрифта - курсив); font-weight: bold("вес" шрифта - полужирный)

color: #6600CC (цвет шрифта, заданный в системе RGB)

Описание стиля помещается в заголовок <head>...</head> HTML-документа.

Теперь, если мы хотим применить этот стиль к определенной части текста, например, размещенной в элементе span, то создаем такой код:

<span сlаss="mуstуlе">оформленный текст</span>

Здесь атрибут class вводит для элемента span так называемое "имя класса". В документе может быть много элементов, но стиль нашего примера будет "действовать" только на те из них, у которых имя класса совпадает с идентификатором mystyle, входящим в селектор стиля.

Полный HTML-код будет выглядеть так:

<html>

<head>

<title>пример использования CSS</title>

<style type-"text/css">

<!--

.mystyle {font-family: Arial, Helvetica, sans-serif;

font-size: 12pt; font-style: italic;

font-weight: bold; color: #6600CC }

-->

</style>

</head>

<body>

<span class="mystyle">оформленный текст</span>

</body>

</html>

Т.о., использование CSS позволяет определить все необходимые стили в отдельном элементе <style type="text/css">, а затем применять их к нужным элементам документа простым указанием селектора стиля в качестве значения атрибута class:<span class="mystyle">oфopмлeнный текст</span>. Применение таблиц стилей удобно в тех случаях, когда требуется одинаково оформлять много элементов одной HTML-страницы или всех многочисленных страниц одного Web-сайта. В этом случае при необходимости изменить оформление документа достаточно лишь изменить необходимые свойства стиля в его определении. Тогда все элементы, связанные с этим стилем, автоматически изменятся.

Применение CSS позволяет вводить одну таблицу стилей для всего сайта. Для этого можно создать отдельный файл с расширением .css со всеми описаниями стилей. Тогда на конкретной странице сайта можно лишь указать ссылку на этот файл, и все описанные в нем стили станут доступными для элементов страницы: в элементе <head>...</head> HTML-документа помещается ссылка на файл стилей, например, на файл с именем main.css:

Сам файл стилей main.css содержит только набор определений стилей, например, его текст может быть таким:

.link1 {font-family: Arial, Helvetica, sans-serif; font-size: x-small; font-style: normal;

line-height: normal; font-weight: bold; font-variant: normal; text-transform: none;

color: #663300; text-decoration: none}

.normal {font-family: Arial, Helvetica, sans-serif; font-size: x-small; font-style: normal;

line-height: normal; font-weight: bolder; font-variant: normal; text-transform: none;

color: #333333; text-decoration: none}

Можно создавать разные файлы стилей для разных разделов сайта.

Таблицы и слои

Стандартные HTML-теги имеют ограниченные возможности для управления взаимным расположением различных элементов на Web-странице. Web-дизайнеры обычно используют для этих целей таблицы. Рассмотрим кратко правила создания таблиц и их применение для размещения элементов на странице. Допустим, мы создаем таблицу, содержащую 3 столбца и 2 строки:

(таблица шириной в 100% по отношению к отображению страницы, толщина рамки 0, расстояние между ячейками 0, отступ содержимого ячейки от ее границ 0).

<tr> (начало 1-й строки таблицы)

<td></td> (ячейка 1-го столбца 1-й строки)

<td></td> (ячейка 2-го столбца 1-й строки)

<td></td> (ячейка 3-го столбца 1-й строки)

</tr>

<tr> (начало 2-й строки таблицы)

<td></td> (ячейка 1-го столбца 2-й строки)

<td></td> (ячейка 2-го столбца 2-й строки)

<td></td> (ячейка 3-го столбца 2-й строки)

</tr>

</table> (конец таблицы)

В примере дана только схема таблицы. Элементы td пусты. Именно в них должны размещаться данные, определяющие содержимое ячеек таблицы. В качестве содержимого ячеек таблицы могут использоваться текстовые данные и изображения. Оформлять в табличном виде текстовые данные совсем несложно.

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

Соответствующий HTML-код будет выглядеть так:

<tr>

<td height="50"

</tr>

<tr>

<td height="87"

<td height="235" rowspan="2"

<td height="87"

</tr>

<tr>

<td height="148"

<td height="148" src="rams.jpg"

height="148"></td>

</tr>

</table>

В таблице 3 строки и 4 колонки ячеек разной величины.

Как в предыдущем примере, атрибуты в теге <table> означают: cellspacing - расстояние между ячейками; cellpadding - отступ содержимого ячейки от ее границ; border - толщина рамки таблицы, равная нулю, поэтому рамка изображаться не будет.

Атрибуты в тегах <td>: width - ширина ячейки (в пикселах); height - высота ячейки (в пикселах); valign ="top" - размещение содержимого вверху ячейки.

rowspan = "2" - увеличение высоты за счет объединения двух ячеек смежных строк (текущей и следующей). Именно в эту ячейку под действием элемента

помещается изображение из файла tiger.jpg.

В последней, третьей, строке всего 3 элемента td, которые определяют 1-, 3- и 4-ю ячейки таблицы. Вторая ячейка "слилась" со второй ячейкой строки 2, и соответствующий элемент td здесь не нужен.

Четвертая ячейка строки 3 включает изображение из файла rams.jpg.

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

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

Разместим "вызовы" тех же самых изображений внутри контейнерных элементов div. В качестве атрибутов элементов div используем style - определяющий стиль отображения в соответствии с правилами CSS:

<div style="position:absolute;

left:159px; top:61px; width:180px; height:135px;z-index:1">

<img src="tiger.jpg" height="135">

</div>

<div style="position:absolute;

left:340px; top:148px; width:154px; height:148px; z-index:2">

<img src="rams.jpg height="148">

</div>

Слои можно перемещать по странице, накладывать друг на друга и делать их видимыми и невидимыми, когда страница уже отображена в рабочем поле браузера. Слой в нашем примере начинается тегом <div>. Его атрибут style определяет стилевые свойства слоя. Среди них свойство position:absolute (position - имя свойства, absolute- его значение) означает абсолютное позиционирование слоя: положение левого верхнего угла слоя имеет жесткие координаты относительно левого верхнего угла страницы, обозначаемые свойствами: left:159px; top:61px (px - обозначение единицы измерения "пиксел"). Далее указаны размеры слоя:width:180px - горизонтальный и height:135px - вертикальный. Смысл свойства z-index мы рассмотрим чуть позже. А дальше следует тег вставки изображения:

<img src="tiger.jpg" height="135">

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

Cлои позволяют ввести в расположение элементов третье измерение, перпендикулярное плоскости страницы. В этом и состоит смысл свойства z-index:n, где n - целое число. Чем больше значение z-index, тем выше в иерархии слоев (ближе к зрителю) располагается данный слой. Приведем пример, в котором те же изображения из файлов tiger.jpg и rams.jpg частично наложены друг на друга за счет изменения значений соответствующих свойств left, top, width, height:

<div style="position:absolute; left:142px; top:82px; width:152px; height:145px; z-index:2">

<img src="rams.jpg" height="148">

</div>

<div style="position:absolute; left:45px; top:37px; width:167px; height:136px; z-index:1">

<img src="tiger.jpg" height="135">

</div>

Изображение из файла tiger.jpg, помещенное в первом из слоев, располагается над изображением (ближе к зрителю) из файла rams.jpg потому, что первый слой имеет z-index:2, а следующий - z-index:1. Продемонстрируем наложение слоя с текстом на слой, включающий изображение:

<div style="position:absolute; left:52px: top:45px; width:154px;height:148px;z-index:1">

<img src="tiger.jpg" height="148">

</div>

<div style="position:absolute; left:100px; top:150px; width:121px; height:23px; z-index:2;

layer-background-color: #CCFFCC; border: 1px none #000000">

Тигр

</div>

В данном примере во втором слое задан фоновый цвет layer-background-color: #CCFFCC.

ФРЕЙМЫ

Фрейм — кадр, окно. Вводя тег <FRAME>, дизайнер НТМL-страницы разделяет экран на части. Браузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана. Например, можно построить страницу т.о., что фирменный знак будет зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь пролистывает обычным способом.

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

Построим страницу с двумя фреймами. Зададим слева фрейм оглавления с заголовками статей, а справа поместим страницу с самими статьями. Сделаем так, что когда пользователь щелкает мышкой на ссылке в той части экрана, где находится оглавление, сама статья появляется в правом фрейме.

<HTML>

<HEAD>

<TITLE>Пример фреймов</TITLE>

</HEAD>

</FRAMESET>

</HTML>

В результате мы получили экран, разделенный на два окна. Левое окно занимает 25% экрана и отображает файл menu.html. Окно справа займет 75% экрана и содержит файл main.html. Правое окно мы назвали "main" с помощью строки:

menu.html — это НТМL-документ, построенный как оглавление: в нем необходимо связать с пунктами оглавления с помощью гиперссылки документы, отражающие содержание того или иного пункта.

Поскольку мы хотим, чтобы они отображались в правом фрейме, используем в ссылке атрибут ТАRGET (TARGЕТ="main"). Это означает, что, когда пользователь щелкает на ссылке, вызываемый документ появляется в фрейме main. Если мы не определим атрибут ТАRGЕТ, то документ появится там, где мы щелкнули мышкой, — в левом фрейме.

FRAMESET

Теги <FRAMESET> обрамляют текст, описывающий компоновку фреймов. Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной). У <FRAMESET> два атрибута: ROWS, задающий число строк (горизонтальных полос), и СОLS, задающий число столбцов (вертикальных полос). Пересечения этих строк и столбцов и образуют окна. Единственными тегами, которые могут находиться между тегами <FRAMESET> и </FRAMESET>, являются <FRAME> и <FRAMESET>.

Атрибут ROWS

Атрибут ROWS задает число и размер строк на странице. В нем можно определить размер каждой строки в пикселах, процентах от высоты экрана или в относительных величинах (обычно это указание занять оставшуюся часть места). Например, следующая запись формирует экран, состоящий из трех строк: высота верхней — 20 пикселов, средней — 80 пикселов, нижней — 20 пикселов:

В следующем примере создается экран, на котором верхняя строка занимает 10% высоты экрана, средняя — 60%, а нижняя — оставшиеся 30%:

В следующем примере создается экран, на котором верхняя строка имеет высоту 20 пикселов, средняя — 80 пикселов, а нижняя занимает все оставшееся место:

Атрибут СOLS

Столбцы определяются так же, как строки.

FRАМЕ

Тег <FRАМЕ> определяет содержание окна и имеет шесть атрибутов: NАМЕ, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE и SRC.

Атрибут NАМЕ

Позволяет определить имя фрейма, для того, чтобы использовать его в гиперсcылке в атрибуте Target, что позволяет отобразить документ в нужном окне. Например:

<FRАМЕ SRC="my.html" NАМЕ="main">

Имена фреймов должны начинаться с буквы или цифры.

Атрибут МАRGINWIDTH

Задает горизонтальный отступ между содержимым кадра и его границами. Наименьшее значение этого атрибута равно 1 ( по умолчанию - 6).

Атрибут МАRGINHEIGHT

Действует так же, как и МАRGINWIDTH. Он задает поля в верхней и нижней частях фрейма.

Атрибут SCROLLING

Дает возможность пользоваться прокруткой во фрейме. Возможные варианты: SCROLLING=yes, SCROLLING=nо, SCROLLING=аutо. SCROLLING=yes означает, что во фрейме всегда будут полосы прокрутки. Если задать SCROLLING=no, полос прокрутки не будет. SCROLLING=аutо предоставляет браузеру самому решать, требуются полосы прокрутки или нет.

Атрибут NORESIZE

Как правило, пользователь может, перемещая границу фрейма мышкой, изменить его размер. При использовании NORESIZE все границы фрейма становятся неподвижными.

Атрибут SRС

Применяется в теге FRАМЕ для ссылки на документ, который должен появиться в том или ином кадре.

Возможно создание вложенных фреймов.

Формы и CGI

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

<form method="POST" action="/cgi-bin/prog1.p1">

(!)Ваше имя: <input type="text" name= "realname"size="40"><p>

E-mail:<input type="text" name="email" size="40"><br>

Город:<input type="text" name="city" size="30"><p>

Ваши комментарии <br><textarea name="comments" cols="40" rows="8"></textarea><p>

<input type="submit" name="submit" value= "Подача запроса">

<input type="reset" name="reset" value= "C6poc">

</form>

Контейнер form имеет два атрибута, которые указывают, каким образом (method) и какой программе (action) отсылаются данные из формы. Внутри контейнера form помещены обычный текст с элементами разметки р и br (Ваши комментарии), четыре элемента input и один - textarea.

Элементы input с атрибутом type="text" формируют "поля ввода" в виде строк, длина которых определяется значениями атрибутов size. Input с атрибутом type="submit" создает кнопку отправки информации от формы к Web-серверу. Атрибут value="Подача запроса" определяет надпись на кнопке. Input с атрибутом type="reset" создает кнопку сброса (очистки) полей формы. Атрибут value="C6poc" определяет надпись на изображении кнопки сброса. Textarea формирует "многостроковое" поле ввода, при этом rows - количество строк, cols - длина каждой строки (в символах). Атрибуты name во всех случаях служат для указания имен, которые используются в данных, пересылаемых к Web-серверу. По этим именам программа prog1.p1 определяет, в какое поле ввода какую информацию ввел пользователь. В данном примере текст, внесенный в поля "Ваше имя", "E-mail", "Город" и "Ваши комментарии", при нажатии кнопки "Подача запроса" будет отправлен программе cgi-bin/prog1.p1 методом post на сервер. Понятное объяснение метода post требует более детального знакомства с протоколом HTTP (Hypertext Transfer Protocol) , что выходит за рамки нашего курса.

Такой механизм обмена данными между клиентом и программами, выполняемыми на сервере, регламентируется унифицированным интерфейсом шлюзов - Common Gateway Interface (CGI). Обычно CGI применяется в Web-серверах, функционирующих на платформе UNIX, и в классических Web-серверах (например, Apache), которые перенесены и в другие ОС (Windows, MacOS).

На базе OS Windows с использованием Web-сервера US (Internet Information Server) используется и другой механизм - "активные серверные страницы" (ASP - Active Server Pages). Аналогом механизма ASP служит технология РНР, которая применима не только на серверах фирмы Microsoft.

Важно понимать, что наличие на Web-странице формы само по себе не обеспечивает интерактивности. Необходимо наличие на сервере программы, в нашем примере она имеет название prog1.p1, обрабатывающей данные, передаваемые браузером от формы.

Мы рассмотрели здесь только один пример форм, чтобы продемонстрировать общие принципы их создания. Существует большое многообразие различных HTML-средств для создания разных форм, но их изучение требует знакомства не только с Web-протоколами, но и с языками программирования, используемыми для написания CGI-программ, выполняемых на серверной стороне. Важно отметить, что при разработке и отладке форм и CGI-программ Web-сервер и Web-браузер могут размещаться на одной и той же ЭВМ.

Технология Server Side Include (SSI)

Server Side Include в переводе - "включаемый на стороне сервера". Эта технология позволяет Web-серверу включать в текст HTML-страниц любой другой текст: содержимое текстовых файлов или результат работы программ на сервере. Происходит это "включение" непосредственно перед передачей текста HTML-страницы браузеру пользователя. Запрос браузера отсылается Web-серверу, а Web-сервер по указанному адресу (URL) "выбирает" нужную страницу и отсылает ее браузеру для отображения. Перед пересылкой HTML-страницы Web-сервер "прочитывает" ее текст и, обнаружив директивы SSI, выполняет их. Что дает технология SSI?

Пусть на каждой странице сайта размещен список его разделов. Потребовалось добавить еще один раздел. Обычными средствами придется исправлять каждую страницу сайта, содержащую этот список. Если использовать SSI, достаточно создать текстовый файл (например, с именем menu.html) и занести туда HTML-код списка разделов. Непосредственно в страницы сайта, в те места, где должен находиться список разделов, нужно вставить инструкцию (SSI-директиву):

<!- -#include virtual="menu.html"-->

При запросе этой страницы сервер заменит указанную инструкцию #include содержимым файла menu.html. Если изменить файл menu.html, то все страницы, где использовалась инструкция #include, обновятся автоматически. При этом в HTML-файлах на сервере ничего не меняется - сервер производит вставку текста "на лету", перед тем, как отправить HTML-страницу браузеру. Вместо имени текстового файла в инструкции #include можно указывать имя программы, результаты выполнения которой нужно вставить в текст HTML-страницы. Так можно реализовать, например, счетчик посещений, оповещающий клиента о том, каким по счету посетителем сайта он является.

При включении указанной настройки на исполнение SSI-директив сервер просматривает все страницы, разыскивая в них SSI-директивы, что увеличивает нагрузку на сервер. Чтобы не выполнять эту работу для обычных HTML-страниц, для страниц имен файлов с использованием SSI дается специальное расширение - обычно .shtml, при наличии которого Web-сервер автоматически выполняет обработку SSI-директив в тексте из этого файла. Отметим, что директива #include не единственная SSI-директива и возможности технологии SSI достаточно широки.

Скрипты в HTML-документах

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

Скриптовый язык обычно не содержит всех возможностей настоящих языков программирования. Созданные с помощью скриптовых языков программы (называемые скриптами или сценариями) после включения в HTML-страницу не могут выполняться самостоятельно - они работают только в контексте браузера, поддерживающего их выполнение. Скрипты включаются в состав Web-страниц и распознаются и обрабатываются браузером при отображении остального HTML-кода той же страницы.

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

В настоящее время существуют два языка для написания скриптов для Web-страниц - JavaScript и Visual Basic Script. Visual Basic Script - это разработка Microsoft. JavaScript был первоначально разработан компанией Netscape, а затем Microsoft разработала свою версию этого же языка, названную JScript. К сожалению, это привело к возникновению разных, не всегда совместимых, версий языка JavaScript.

Код JavaScript начинается тегом <script language="JavaScript">. Далее располагается сама скриптовая программа. Закрывающий тег строится по обычным правилам: </script>.

Динамический HTML(DHTML)

Сценарии (скрипты), исполняемые на клиентской стороне, увеличивают гибкость HTML, но их использование тем не менее ограничено. Эта ограниченность заложена в самой природе HTML. HTML-текст поступает в программу просмотра посимвольно, и эта программа (браузер) "конструирует" и отображает Web-страницу по мере этого поступления. Как только символы текста HTML-документа прекращают поступать к программе просмотра, "конструирование" заканчивается и HTML-страницу уже нельзя изменить. Программа просмотра (браузер), исполняя программу сценария (скрипта), может только в ограниченной мере модифицировать HTML-текст по мере того, как он поступает к ней, либо может целиком заменить отображенную страницу новой.

Для преодоления этого ограничения Microsoft предложила технологию DHTML. Dynamic HTML позволяет изменять содержимое HTML-страницы при помощи скриптов после окончания конструирования. Такая возможность появляется за счет того, что каждый элемент HTML-документа рассматривается как объект со своими свойствами. Эти свойства доступны в коде скрипта на JavaScript или VBScript. Взаимодействуя с отображением документа, пользователь посредством скриптов изменяет свойства объектов, например, значения атрибутов элемента. Браузер на основе новой информации изменяет отображение документа.

Dynamic HTML строится на основе JavaScript или VBScript, причем функционирование скриптов (сценариев) соответствует функционированию программ, управляемых событиями. Это означает, что код скрипта выполняется с учетом взаимодействия пользователя с элементами Web-страницы. Основная особенность этой схемы состоит в том, что поддерживать взаимодействие с пользователем в Dynamic HTML может любой элемент Web-страницы. Т.о., DHTML обеспечивает автора Web-документов средствами программирования, позволяющими полностью управлять HTML-документом на стороне клиента.

Дата добавления: 2018-04-05; просмотров: 225; Мы поможем в написании вашей работы!
Поделиться с друзьями:

⇐ Предыдущая 1 2 3 456 Следующая ⇒

Мы поможем в написании ваших работ!