Технологии создания гипертекстовых документов (стр. 2 из 3)

Рис.3. Отображение текста на экране монитора.

● Стиль <style media="print"> для печатающих устройств:

* {

font-family: "Times New Roman", Times, serif;

background-color: #fff;

color: #000;

}

#navigation { display: none; }

</style>

Для печати описание страницы другое. CSS-селектор «*» означает, что выбираются все элементы страницы. Для них используется шрифт Times New Roman черного цвета и белый фон, так как не в каждом офисе есть цветные принтеры. С помощью свойства display: none полностью удаляется с печатной версии блок навигации — на бумаге он бесполезен.

В результате получается качественная версия страницы для печати.

Рис.3. Отображение того же текста на бумаге.

3. ОБТЕКАНИЕ РИСУНКА ТЕКСТОМ И ВРЕЗКА К СТАТЬЕ

ТЕХНОЛОГИЯ:CSS

ПОДДЕРЖКА: все распространенные браузеры.

В предыдущем примере свойство CSS float использовалось, чтобы поместить в правой части страницы блок навигации. На самом деле у него иное предназначение — определять обтекание одного элемента другим.

Листинг 3_float – Обтекание рисунка текстом и врезка к статье.

<html>

<head>

<title>ОБТЕКАНИЕ РИСУНКА ТЕКСТОМ И ВРЕЗКА К СТАТЬЕ </title>

body {

background-color: #e5f8be;

font: 0.8em Verdana, Tahoma, Arial, Helvetica, sans-serif;

}

p { text-align: justify; }

p img {

float: left;

margin-right: 8px;

}

.vrezka {

float: right;

margin-left: 8px;

width: 30%;

background-color: #99cc33;

padding: 1%;

}

</style>

</head>

<body>

<p><img src="3_picture.png" />Поясним CSS-коддляобтеканиярисунковтекстомисозданияврезки. Абзацы текста растянуты по ширине (text-align: justify;) исключительно ради того, чтобы нагляднее показать расположение врезки к статье. Текст внутри врезки выровнен по умолчанию по левому краю. CSS-селектор p.img означает "определить свойства всех элементов (тегов) <img>, вложенных в элементы <р>". Первым делом для вложенных в абзацы текста картинок задаем обтекание float: left. Это свойство указывает браузеру, что элемент помещается в крайней левой части экрана, а все остальные элементы должны обтекать его справа. Чтобы буквы не прилипали к картинке, мы создаем прозрачное внешнее поле шириной 8 пикселей справа от нее (margin-right: 8px;).</p>

<div class="vrezka">Врезка помещается к правому краю контейнера, основной текст обтекает ее слева. Внешнее поле шириной 8 пикселей создано слева от врезки. Ширина блока (свойство width:) - 30% окна браузера. Чтобы визуально выделить врезку на странице, мы залили ее темно-зеленым фоном.</div>

И последний штрих: улучшим удобочитаемость текста врезки с помощью отбивки сверху, снизу, слева и справа от границ блока на 1%.</p>

</body>

</html>

Поясним CSS-код для обтекания рисунков текстом и создания врезки.

Абзацы текста растянуты по ширине (text-align: justify;) исключительно ради того, чтобы нагляднее показать расположение врезки к статье. Текст внутри врезки выровнен по умолчанию по левому краю. CSS-селектор p.img означает «определить свойства всех элементов (тегов) <img>, вложенных в элементы <р>». Первым делом для вложенных в абзацы текста картинок задано обтекание float: left. Это свойство указывает браузеру, что элемент помещается в крайней левой части экрана, а все остальные элементы должны обтекать его справа. Чтобы буквы не прилипали к картинке создано прозрачное внешнее поле шириной 8 пикселей справа от нее (margin-right: 8px;).

Врезка помещается к правому краю контейнера, основной текст обтекает ее слева. Внешнее поле шириной 8 пикселей создано слева от врезки. Ширина блока (свойство width:) — 30% окна браузера. Чтобы визуально выделить врезку на странице, ее залили темно-зеленым фоном. И последний штрих: для улучшения удобочитаемости текста врезки применена отбивка сверху, снизу, слева и справа от границ блока на 1%.

Рис.4. Обтекание рисунка текстом и врезка к статье улучшают качество страницы сайта.

4. ВЕРСТКА ТАБЛИЦ

ТЕХНОЛОГИЯ: XHTML

ПОДДЕРЖКА: InternetExplorer поддерживает все функции, тег <col> не работает в Mozilla, в Opera не работает стилевое оформление <col>.

Верстать таблицы в (X)HTML — утомительное занятие. Упростить эту работу можно с помощью табличных тегов. Структура таблицы не ограничивается элементами <table>, <tr> и <td>. Рекомендуется применять и другие теги.

Листинг 4_table – Верстка таблицы с помощью «продвинутых» тегов.

<html>

<head>

<title>ВЕРСТКА ТАБЛИЦ</title>

</head>

<body>

<caption>Баланс</caption>

</colgroup>

<thead>

<tr>

<th>Приход</th>

<th>Расход</th>

<th>Остаток</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Приход</td>

<td>Расход</td>

<td>Остаток</td>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

Заголовок таблицы задан с помощью элемента <caption>. Далее следуют очень полезные теги <col/>, каждый из которых отвечает за столбец таблицы. Без использования этого тега пришлось бы прописывать код для каждой ячейки таблицы (<td>). В этом простом примере таблица содержит 20 ячеек, а в рабочих таблицах их значительно больше. Поэтому применение тега <col/> очень упрощает и ускоряет создание таблицы.

Основное содержимое таблицы разделено тегами <thead>, <tfoot> и <tbody> на шапку, нижнюю часть и тело таблицы соответственно. Эти теги должны следовать в указанном порядке. В <thead> помещены ячейки с заголовками столбцов, в <tbody> — основные данные, в <tfoot> продублированы названия столбцов для удобства, если таблица получится большой.

Рис.5. Таблица, при верстке которой применены «продвинутые» теги.

5. ЗАЩИТА E-MAIL АДРЕСА ОТ СПАМА

ТЕХНОЛОГИЯ: JavaScript

ПОДДЕРЖКА: все распространенные браузеры с поддержкой JavaScript.

Чтобы спрятать e-mail от спам-роботов применяют функцию на языке JavaScript. Она получает части адреса e-mail и собирает из них гиперссылку. Внутри секции документа <head> размещают следующий код:

//<!--

//<![CDATA[

function maillink(mailprefix, maildomain, mailsuffix, mailname)

{

var mailprefix; // первая часть адреса до @

var maildomain; // домен

var mailsuffix; // зонадомена (ru, com ит. п.)

var mailname; // текст ссылки (имя получателя)

if (mailname == null) { mailname = "e-mail"; }

document.write('<a href="mailto:' + mailprefix + '%40' + maildomain + '.' + mailsuffix + '">' + mailname + '</a>');

}

//]]>

//-->

</script>

Спомощьютега<script>объявляют, чтовдокументвстроенкод JavaScript. Функция JavaScript получает четыре параметра:

● первую часть e-mail-адреса до @ (var mailprefix;),

● домен почтового сервера (varmaildomain;),

● зону домена (varmailsuffix;),

● текст гиперссылки (var mailname;).

Последний параметр необязателен, и, если он не задан, для ссылки используется текст «e-mail». В финале JavaScript печатает («document.write()») на странице гиперссылку с адресом электронной почты.

Использовать эту функцию в документе необходимо следующим образом:

Пишитенамой <script language="javascript" type="text/javascript">maillink("e-teach","mail","ru");</script>.

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

Листинг 5_js_email - Полный код страницы со ссылкой на адрес e-mail электронной почты.

<head>

<title>ЗАЩИТА E-MAIL АДРЕСА ОТ СПАМА</title>

//<!--

//<![CDATA[

function maillink(mailprefix, maildomain, mailsuffix, mailname)

{

var mailprefix; // первая часть адреса до @

var maildomain; // домен

var mailsuffix; // зонадомена (ru, com ит. п.)

var mailname; // текст ссылки (имя получателя)

if (mailname == null) { mailname = "e-mail"; }

document.write('<a href="mailto:' + mailprefix + '%40' + maildomain + '.' + mailsuffix + '">' + mailname + '</a>');

}

//]]>

//-->

</script>

</head>

<body>

<p>Для того, что бы спрятать e-mail от спам-роботов размещают внутри секции документа код JavaScript. С помощью тега script объявляют, что в документ встроен код JavaScript. Функция JavaScript получает четыре параметра: первую часть e-mail-адреса до @, домен почтового сервера, зону домена, текст гиперссылки. Последний параметр необязателен, и, если он не задан, для ссылки используется текст "e-mail". В финале JavaScript печатает ("document.write()") на странице гиперссылку с адресом электронной почты.</p>

<p>С радостью отвечу на все вопросы.

Пишитенамой <script language="javascript" type="text/javascript">maillink("e-teach","mail","ru");</script>.</p>

<hr />

</body>

</html>

Рис.6. Страница сайта, содержащая ссылку на электронный адрес.