Быстрый поиск

Лабораторная работа: Технологии создания гипертекстовых документов

<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 АДРЕСА ОТ СПАМА

ТЕХНОЛОГИЯ: Java Script

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

Чтобы спрятать 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;),

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

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

● текст гиперссылки (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. Страница сайта, содержащая ссылку на электронный адрес.

Рис.6. Форма для электронного письма, которая открывается, если щелкнуть ссылку на электронный адрес.

6. ПРОВЕРКА ПОЛЕЙ ФОРМЫ

ТЕХНОЛОГИЯ: Java Script

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

Часто на web-сайте размещают форму для отправки сообщений на e-mail:

E-mail отправителя:<br /> <input type="text" name="mailsender" id="mailsender" /><br />

Текст письма:<br /> <textarea name="mailtext" id="mailtext" cols="35" rows="5"></textarea><br />

</form>

Она состоит из полей ввода e-mail, текста и кнопки отправки данных серверному скрипту mail.php. Для формы и полей данных в атрибутах id и name указаны уникальные имена, которыми оперируют из JavaScript. С помощью события документа (action) onsubmit, возникающего при отправке формы, вызывают функцию JavaScript:

function checkmailform()

{

if ( (document.forms.mailer.mailsender.value == null) || (document.forms.mailer.mailsender.value.length < 7) )

{

alert("Заполните поле: E-mail отправителя");

document.forms.mailer.mailsender.focus();

return false;

}

if (! (/\w+@\w+\.[a-z]{2,4}/.test(document.forms.mailer.mailsender.value)) )

{

alert("Введите правильный e-mail адрес");

document.forms.mailer.mailsender.focus();

return false;

}

if ( (document.forms.mailer.mailtext.value == null) || (document.forms.mailer.mailtext.value.length < 10) )

{

alert("Заполните поле: Текст письма");

document.forms.mailer.mailtext.focus();

return false;

}

return true;

}

Функция делает три проверки:

● введен ли текст в поле «E-mail» и не меньше ли он 7 символов;

● является ли адрес правильным e-mail-адресом;

● введен ли текст сообщения и не меньше ли он 10 символов.

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

Листинг 6_form_check - Проверка полей формы для отправки сообщений на e-mail.

<head>

<title>Форма отзыва</title>

//<!--

//<![CDATA[

function checkmailform()

{

if ( (document.forms.mailer.mailsender.value == null) || (document.forms.mailer.mailsender.value.length < 7) )

{

alert("Заполните поле: E-mail отправителя");

document.forms.mailer.mailsender.focus();

return false;

}

if (! (/\w+@\w+\.[a-z]{2,4}/.test(document.forms.mailer.mailsender.value)) )

{

alert("Введите правильный e-mail адрес");

document.forms.mailer.mailsender.focus();

return false;

}

if ( (document.forms.mailer.mailtext.value == null) || (document.forms.mailer.mailtext.value.length < 10) )

{

alert("Заполните поле: Текст письма");

document.forms.mailer.mailtext.focus();

return false;

}

return true;

}

//]]>

//-->

</script>

</head>

<body>

E-mail отправителя:<br /> <input type="text" name="mailsender" id="mailsender" /><br />

Текст письма:<br /> <textarea name="mailtext" id="mailtext" cols="35" rows="5"></textarea><br />

</form>

</body>

</html>

Рис.7. Отображение формы для отправки сообщений на e-mail.

Рис.8. Сообщение о неправильно введенном адресе электронной почты (пропущена собака).

7. ПОВЫШЕНИЕ УДОБСТВА РАБОТЫ С ФОРМАМИ

ТЕХНОЛОГИЯ: Java Script

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

Форма поискового запроса размещена на каждой странице современного сайта. Не всегда дизайнер может выделить для нее достаточно места, и тогда приходится разъяснять назначение формы текстом внутри нее. Это допустимое решение, но трудно осуществимое. Чтобы отправить поисковый запрос, пользователю приходится кликнуть внутри формы мышью, выделить объяснительный текст, удалить его уже с клавиатуры, вписать свой поисковый запрос и нажать кнопку поиска или «Enter».

Простой код на JavaScript избавляет посетителя от этих многочисленных действий:

</form>

Эта форма передает запрос серверному скрипту search.php. Форма состоит из текстового поля для ввода запроса и кнопки отправки данных на сервер. Фраза «Поиск», вписанная в текстовое поле, задана атрибутом value. С помощью события документа onfocus запускают код на JavaScript. Можно использовать событие onclick, срабатывающее при клике на элементе, но оно менее универсально. В любом случае событие запускает программный код. В этот раз код не вынесен в отдельную функцию, а записан в качестве значения this.value = "" и фактически означает «установить значение текущего (this) поля равным пустоте».

События обеспечивают большой простор для деятельности, например, есть форма, мимо которой посетитель не должен пройти:

</form>

Используя onmouseover='this.value = ""; this.focus();', можно поймать курсор мыши, очистить форму ввода и переместить в нее курсор. Событие onmouseover срабатывает при прохождении курсора мыши над объектом, a this.focus() активизирует текущий объект.

Листинг 7_input_reset - Формы поискового запроса.

<head>

<title>Форма поиска</title>

</head>

<body>

</form>

</form>

</body>

</html>

Рис.9. Формы поискового запроса – выбирайте лучшую!

8. ВЫПАДАЮЩЕЕ МЕНЮ

ТЕХНОЛОГИЯ: Java Script, CSS

ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script и W3C DOM (IE5 и старше, Mozilla, Opera)

Если на сайте много ссылок в меню, необходимо сделать его ниспадающим:

<div class="navhead">Информация</div>

<a href="/news.html">Новости</a><br />

<a href="/products.html">Учебные планы</a><br />

<a href="/pchela.html">Пчеловодство</a><br />

<a href="/about.html">Об авторе</a>

</div>

<div class="navhead">Учебные дисциплины</div>

<a href="/buy1.html">Схемотехника</a><br />

<a href="/buy2.html">Теория информации</a><br />

<a href="/buy3.html">Надежность, эргономика, качество АСОИУ</a><br />

<a href="/buy4.html">Интернет-технологии</a>

</div>

Первый блок ссылок имеет уникальное имя navbodyl, второй — navbody2. Для каждого раздела при наведении мыши на элемент и уходе мыши с элемента вызывается функция JavaScript.

CSS-оформление минимально:

.navhead { font-weight: bold; background-color: #ccc; }

#navbody1, #navbody2 { visibility: hidden; }

</style>

Для navbodyl и navbody2 указано свойство visibility: hidden;. При этом JS получает номер блока и меняет его атрибут видимости:

//<!--

//<![CDATA[

function menuhide(menunum)

{

var currentmenu = document.getElementById("navbody" + menunum);

currentmenu.style.visibility = 'hidden';

}

function menushow(menunum)

{

var currentmenu = document.getElementById("navbody" + menunum);

currentmenu.style.visibility = 'visible';

}

//]]>

//-->

</script>

При наведении мыши на блок активизируется функция menushow(menunum). Menunum переменная, хранящая строку с номером меню. Функция выбирает элемент страницы, имя складывается из navbody и номера (menunum). Далее для элемента задается свойство visibility: visible. Функция menuhide() срабатывает, когда курсор мыши покидает область меню.

Листинг 8_menu – Выпадающее меню.

<head>

<title>Выпадающее меню</title>

//<!--

//<![CDATA[

function menuhide(menunum)

{

var currentmenu = document.getElementById("navbody" + menunum);

currentmenu.style.visibility = 'hidden';

}

function menushow(menunum)

{

var currentmenu = document.getElementById("navbody" + menunum);

currentmenu.style.visibility = 'visible';

}

//]]>

//-->

</script>

.navhead { font-weight: bold; background-color: #ccc; }

#navbody1, #navbody2 { visibility: hidden; }

</style>

</head>

<body>

<div class="navhead">Информация</div>

<a href="/news.html">Новости</a><br />

<a href="/products.html">Учебные планы</a><br />

<a href="/pchela.html">Пчеловодство</a><br />

<a href="/about.html">Об авторе</a>

</div>

<div class="navhead">Учебные дисциплины</div>

<a href="/buy1.html">Схемотехника</a><br />

<a href="/buy2.html">Теория информации</a><br />

<a href="/buy3.html">Надежность, эргономика, качество АСОИУ</a><br />

<a href="/buy4.html">Интернет-технологии</a>

</div>

</body>

</html>

Рис.10. Выпадающее меню на экране монитора.

ЗАДАНИЕ НА САМОСТОЯТЕЛЬНУЮ РАЗРАБОТКУ

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

ЛИТЕРАТУРА

1. Земсков Ю. Тайны гипертекста. CHIP SPECIAL 08.05. c. 26-31.

Страницы: 1, 2

Меню

Быстрый поиск

Лабораторная работа: Технологии создания гипертекстовых документов

Новости

Быстрый поиск

Группа вКонтакте: новости

Новости в Twitter и Facebook

Новости

Обратная связь