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

Посмотреть архив целиком












ЛАБОРАТОРНАЯ РАБОТА

ТЕХНОЛОГИИ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ

Языки логической разметки документов, скриптовые языки программирования, стили визуального оформления


Подготовлена Прохоровым В.С.


Web-сайт — это большая и сложная система, которая основана на тесном взаимодействии множества технологий. Клиентские средства разработки используются в основном для форматирования и первичной обработки информации, а также для ее вывода пользователю в красивом и удобном виде. Основу клиентских средств разработки составляют теговые языки логической разметки документов (HTML, XHTML, XML), скриптовые языки программирования (JavaScript и VBScript), а также стили визуального оформления (CSS).

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

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

Самыми распространенными языками считаются XHTML — для разметки (отличия от последней версии HTML 4.01 незначительны, сам же HTML больше не развивается, эстафета перешла к XHTML), CSS — для оформления стилевого решения документов и JavaScript — для программирования интерактивных элементов.

Все эти технологии тесно связаны друг с другом. XHTML-документ позволяет подключать CSS-стили тегами ,

Для основного текста, каждый абзац которого определяется тегами <р>, выбрана следующая последовательность шрифтов:

рубленый шрифт Verdana;

если этот шрифт отсутствует у посетителя, то Tahoma;

далее Arial, Helvetica;

в крайнем случае, любой рубленый шрифт.

Используют рубленые шрифты, так как они лучше смотрятся на мониторе. Однако для приверженцев шрифтов с засечками создан класс serif. Он внизу, во втором абзаце (<р class="serif">).

Первыми для абзацев указаны рубленый шрифт Verdana и шрифт Georgia с засечками, так как они специально оптимизированы для вывода на экран.

Размер шрифта задан в относительных единицах (em) и составляет 80% от настроек браузера по умолчанию.

Межстрочный интервал — 150%. По умолчанию он равен 120%, однако это не оптимальное для удобочитаемости значение.

Последним для тега <р> определен цвет шрифта — он должен быть черным на белом или светлом фоне.

Заголовок верстают жирным рубленым шрифтом размером 120% от заданного размера по умолчанию. Расстояние между буквами (разрядка) — 20% от размера шрифта. Все буквы заглавные. Эти настройки визуально выделят заголовок.

Листинг 1_usable_text_CSS – Оформление текста средствами каскадных таблиц стилей CSS.

</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="ru-RU">Оформление</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US"> </span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="ru-RU">текста</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US">

head>


<body>


ТЕХНОЛОГИИ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ

Web-сайт - это большая и сложная система, основанная на тесном взаимодействии множества различных технологий. Клиентские средства разработки используются в основном для форматирования и первичной обработки информации, а также для ее вывода пользователю в красивом и удобном виде. Основу таковых составляют теговые языки логической разметки документов (HTML, XHTML, XML), скриптовые языки программирования (JavaScript и VBScript), а также стили визуального оформления (CSS).p>

<p class="serif">Самыми распространенными языками считаются XHTML - для разметки (отличия от последней версии HTML 4.01 незначительны, сам же HTML больше не развивается, эстафетная палочка перешла к XHTML), CSS - для оформления стилевого решения документов и JavaScript - для программирования интерактивных элементов.p>


Рис.1. Отображение на экране монитора текста оформленного средствами каскадных таблиц стилей CSS.


Рис.2. Отображение на экране монитора текста, не оформленного средствами каскадных таблиц стилей CSS.


2. ВЕРСИЯ СТРАНИЦЫ ДЛЯ ПЕЧАТИ


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


ПОДДЕРЖКА: все распространенные браузеры (проблема с новым цветом страницы для печати в браузере Opera).

Некоторые страницы сайта нужно распечатывать на бумаге. Поэтому создают версию сайта для печати.

Создана страница сайта, основной текст которой помещен в блок

, а меню в блок <div id="navigation">
:

Листинг 2_print_version – Версия страницы сайта для печати на бумаге.

ВЕРСИЯ СТРАНИЦЫ ДЛЯ ПЕЧАТИ

<div id="text">

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

Отличительная особенность клиентских технологий в том, что их работоспособность зависит от "пользовательского агента" (в подавляющем большинстве случаев это обычный интернет-браузер), который и берет на себя всю работу по отображению информации. Отсюда проблема - выбирая серверную основу сайта, вы определяетесь лишь однажды, выбирая клиентские языки, обязательно нужно знать о степени их востребованности среди потенциальной аудитории вашего веб-сайта. Распространенность - одна из важнейших характеристик клиентской технологии.p>

Далее >

Для страницы сайта указано два независимых стиля.

Стиль <style media="screen"> для браузеров (отображение на экране монитора):


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

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

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

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

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

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


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


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


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


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

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

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

Основное содержимое таблицы разделено тегами

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


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


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


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


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

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

С помощью тега .

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

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

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

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

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

Пишите на мой .


© 2005


Рис.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.

</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="ru-RU">Форма</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US"> </span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="ru-RU">отзыва</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US">

E-mail отправителя:

Текст письма:

Отправить" />


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


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


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


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


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

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

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

Поиск" onfocus='this.value = "";' />

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

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

Поиск" onmouseover='this.value = ""; this.focus();' />

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

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

</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="ru-RU">Форма</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US"> </span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="ru-RU">поиска</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US">


Поиск" onfocus='this.value = "";' />

Поиск" onmouseover='this.value = ""; this.focus();' />


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


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


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


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

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

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

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

<style type="text/css">

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

#navbody1, #navbody2 { visibility: hidden; }

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

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="ru-RU">Выпадающее</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US"> </span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="ru-RU">меню</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US">

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


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


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


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


Случайные файлы

. Рекомендуется применять и другие теги.

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

</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="ru-RU">ВЕРСТКА ТАБЛИЦ</span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US">

Баланс
Дата Приход Расход Остаток
Дата Приход Расход Остаток
01.01.06 3000 2000 1000
02.01.06 1000 0 2000
03.01.06 500 1500 1000

Заголовок таблицы задан с помощью элемента

. Далее следуют очень полезные теги
). В этом простом примере таблица содержит 20 ячеек, а в рабочих таблицах их значительно больше. Поэтому применение тега
Файл
kursovik.doc
28551.rtf
118594.rtf
61127.rtf
158073.rtf