Лабораторная работа №8. Работа с границами и рамками Web-страницы

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

Свойство Значение NC IE Op Описание Пример

padding-top padding-right padding- bottom padding-left padding Значение % 4+ Отступ от границы элемента до его содержимого table {padding: 15px 15px}

border-top- width border-right- Thin Medium Thick Ширина границы P {border-top-width: 4px}

width border- bottom-width border-left- width border-width Значение

border-color цвет + Цвет границы P {border-color: red}

border-style None Dotted Dashed Solid Double Groove Ridge Inset Outset Стиль рамки table {border-style: double}

border-top border-right border-bottom border-left border-top-width border-style цвет Определяет толщину, стиль и цвет каждой границы table {border-top: solid 4px red; border-left: solid 4px blue}

border см. выше Задает толщину, стиль и цвет рамки table {border: solid 4px red}

NC - Netscape Communicator, IE - Microsoft Internet Explorer, Op - Opera; 4+ означает, что свойство поддерживается в браузере 4 версии и выше.

Типы рамок

Для управления видом рамки предоставляется восемь значений параметра border-style. Результат их действия представлен на рисунке 1.

Первые две - dotted и dashed стали поддерживаться браузерами Netscape и Internet Explorer только со старших версий.

<p style-’color: yellow;

background-color: deepskyblue; text-decoration: underline; text-transform: uppercase;

border: pink inset 25;

PADDING: 20; font-size: larger; line-height: 40px; text-align: center;"> ... </p>

Атрибут style="..." задает стилевое оформление абзаца Атрибут color: yellow; задает цвет текста

Атрибут background-color: deepskyblue; задает цвет фона для абзаца Атрибут text-decoration: underline; задает подчеркивание для текста Атрибут text-transform: uppercase; задает режим заглавных букв для текста

Атрибут border: pink inset 25; задает рамку вокруг абзаца, соответственно, розовую выпуклую толщиной 25 пикселей Атрибут PADDING: 20; задает Атрибут font-size: larger; задает размер шрифта АТРИБУТ line-height: 40px; задает межстрочный интервал АТРИБУТ text-align: center; задает выравнивание текста внутри абзаца по центру

Задание 1

Создать в графическом редакторе Paint небольшой рисунок, который будет использоваться в качестве маркера списка. Создать маркированный список со своим маркером, используя стилевое свойство LIST-STYLE-IMAGE: url(имя_рисунка).

Например, <UL style="LIST-STYLE-IMAGE: url(star2.jpg)"> Задание 2

Используя свойства блоков текста, создать любую страницу.

Лабораторная работа №9.Технология Server Side Include (SSI)

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

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

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

Необходимо понимать, что невозможно экспериментировать с механизмом SSI на машине, на которой не установлен Web-сервер. Функционирование SSI обеспечивается именно сервером, поэтому при просмотре HTML-файлов с локального жесткого диска браузер проигнорирует директивы SSI — ведь они, с точки зрения HTML, являются обычными комментариями (заключены в скобки <!- -...- ->). Кроме того, сервер должен быть настроен на обработку SSI-директив.

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

Отметим, что директива #include не единственная SSI-директива и возможности технологии SSI достаточно широки.

Лабораторная работа №10.Скрипты в HTML-документах

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

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

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

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

Пример HTML-документа со скриптом на языке JavaScript, вычисляющим сумму двух чисел:

<html>

<head>

{

var x= 12; var y= 5; var result= x + y; alert ("Result="+);

}

</script>

</head>

<body>

Пример крипта в HTML-документе

<form>

</form>

</body>

</html>

1 2 345 6

Не нашли, что искали? Воспользуйтесь поиском по сайту: