49255 (Технологии создания гипертекстовых документов), страница 2
Описание файла
Документ из архива "Технологии создания гипертекстовых документов", который расположен в категории "". Всё это находится в предмете "информатика" из 1 семестр, которые можно найти в файловом архиве . Не смотря на прямую связь этого архива с , его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "информатика, программирование" в общих файлах.
Онлайн просмотр документа "49255"
Текст 2 страницы из документа "49255"
Абзацы текста растянуты по ширине (text-align: justify;) исключительно ради того, чтобы нагляднее показать расположение врезки к статье. Текст внутри врезки выровнен по умолчанию по левому краю. CSS-селектор p.img означает «определить свойства всех элементов (тегов) , вложенных в элементы ». Первым делом для вложенных в абзацы текста картинок задано обтекание float: left. Это свойство указывает браузеру, что элемент помещается в крайней левой части экрана, а все остальные элементы должны обтекать его справа. Чтобы буквы не прилипали к картинке создано прозрачное внешнее поле шириной 8 пикселей справа от нее (margin-right: 8px;).
Врезка помещается к правому краю контейнера, основной текст обтекает ее слева. Внешнее поле шириной 8 пикселей создано слева от врезки. Ширина блока (свойство width:) — 30% окна браузера. Чтобы визуально выделить врезку на странице, ее залили темно-зеленым фоном. И последний штрих: для улучшения удобочитаемости текста врезки применена отбивка сверху, снизу, слева и справа от границ блока на 1%.
Рис.4. Обтекание рисунка текстом и врезка к статье улучшают качество страницы сайта.
4. ВЕРСТКА ТАБЛИЦ
ТЕХНОЛОГИЯ: XHTML
ПОДДЕРЖКА: Internet Explorer поддерживает все функции, тег
Верстать таблицы в (X)HTML — утомительное занятие. Упростить эту работу можно с помощью табличных тегов. Структура таблицы не ограничивается элементами
| . Рекомендуется применять и другие теги. |
Листинг 4_table – Верстка таблицы с помощью «продвинутых» тегов.
ВЕРСТКА ТАБЛИЦ
Баланс
Заголовок таблицы задан с помощью элемента . Далее следуют очень полезные теги , каждый из которых отвечает за столбец таблицы. Без использования этого тега пришлось бы прописывать код для каждой ячейки таблицы (
Основное содержимое таблицы разделено тегами ,
и на шапку, нижнюю часть и тело таблицы соответственно. Эти теги должны следовать в указанном порядке. В помещены ячейки с заголовками столбцов, в — основные данные, в продублированы названия столбцов для удобства, если таблица получится большой. 
Рис.5. Таблица, при верстке которой применены «продвинутые» теги.
5. ЗАЩИТА E-MAIL АДРЕСА ОТ СПАМА
ТЕХНОЛОГИЯ: Java Script
ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script.
Чтобы спрятать e-mail от спам-роботов применяют функцию на языке JavaScript. Она получает части адреса e-mail и собирает из них гиперссылку. Внутри секции документа размещают следующий код:
//
С помощью тега объявляют, что в документ встроен код JavaScript. Функция JavaScript получает четыре параметра:
● первую часть e-mail-адреса до @ (var mailprefix;),
● домен почтового сервера (var maildomain;),
● зону домена (var mailsuffix;),
● текст гиперссылки (var mailname;).
Последний параметр необязателен, и, если он не задан, для ссылки используется текст «e-mail». В финале JavaScript печатает («document.write()») на странице гиперссылку с адресом электронной почты.
Использовать эту функцию в документе необходимо следующим образом:
Пишите на мой maillink("e-teach","mail","ru");.
Спамерским роботам, собирающим на сайтах почтовые адреса, будет непросто разобраться в подобном представлении электронного адреса.
Листинг 5_js_email - Полный код страницы со ссылкой на адрес e-mail электронной почты.
//
Для того, что бы спрятать e-mail от спам-роботов размещают внутри секции документа код JavaScript. С помощью тега script объявляют, что в документ встроен код JavaScript. Функция JavaScript получает четыре параметра: первую часть e-mail-адреса до @, домен почтового сервера, зону домена, текст гиперссылки. Последний параметр необязателен, и, если он не задан, для ссылки используется текст "e-mail". В финале JavaScript печатает ("document.write()") на странице гиперссылку с адресом электронной почты.
С радостью отвечу на все вопросы.
Пишите на мой maillink("e-teach","mail","ru");.
© 2005 maillink("e-teach","mail","ru","Прохоров Виктор Сергеевич");
Рис.6. Страница сайта, содержащая ссылку на электронный адрес.
Рис.6. Форма для электронного письма, которая открывается, если щелкнуть ссылку на электронный адрес.
6. ПРОВЕРКА ПОЛЕЙ ФОРМЫ
ТЕХНОЛОГИЯ: Java Script
ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script.
Часто на web-сайте размещают форму для отправки сообщений на e-mail:
E-mail отправителя:
Текст письма:
Она состоит из полей ввода 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.
Форма отзыва
//
E-mail отправителя:
Текст письма:
Рис.7. Отображение формы для отправки сообщений на e-mail.
Рис.8. Сообщение о неправильно введенном адресе электронной почты (пропущена собака).
7. ПОВЫШЕНИЕ УДОБСТВА РАБОТЫ С ФОРМАМИ
ТЕХНОЛОГИЯ: Java Script
ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script.
Форма поискового запроса размещена на каждой странице современного сайта. Не всегда дизайнер может выделить для нее достаточно места, и тогда приходится разъяснять назначение формы текстом внутри нее. Это допустимое решение, но трудно осуществимое. Чтобы отправить поисковый запрос, пользователю приходится кликнуть внутри формы мышью, выделить объяснительный текст, удалить его уже с клавиатуры, вписать свой поисковый запрос и нажать кнопку поиска или «Enter».
Простой код на JavaScript избавляет посетителя от этих многочисленных действий:
Эта форма передает запрос серверному скрипту search.php. Форма состоит из текстового поля для ввода запроса и кнопки отправки данных на сервер. Фраза «Поиск», вписанная в текстовое поле, задана атрибутом value. С помощью события документа onfocus запускают код на JavaScript. Можно использовать событие onclick, срабатывающее при клике на элементе, но оно менее универсально. В любом случае событие запускает программный код. В этот раз код не вынесен в отдельную функцию, а записан в качестве значения this.value = "" и фактически означает «установить значение текущего (this) поля равным пустоте».
События обеспечивают большой простор для деятельности, например, есть форма, мимо которой посетитель не должен пройти:
Используя onmouseover='this.value = ""; this.focus();', можно поймать курсор мыши, очистить форму ввода и переместить в нее курсор. Событие onmouseover срабатывает при прохождении курсора мыши над объектом, a this.focus() активизирует текущий объект.
Листинг 7_input_reset - Формы поискового запроса.
Форма поиска
Рис.9. Формы поискового запроса – выбирайте лучшую!
8. ВЫПАДАЮЩЕЕ МЕНЮ
ТЕХНОЛОГИЯ: Java Script, CSS
ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script и W3C DOM (IE5 и старше, Mozilla, Opera)
Если на сайте много ссылок в меню, необходимо сделать его ниспадающим:
Информация
Новости
Учебные планы
Пчеловодство
Об авторе
Учебные дисциплины
Схемотехника
Теория информации
Надежность, эргономика, качество АСОИУ
Интернет-технологии
Первый блок ссылок имеет уникальное имя navbodyl, второй — navbody2. Для каждого раздела при наведении мыши на элемент и уходе мыши с элемента вызывается функция JavaScript.
