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

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

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

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

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

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

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

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

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

Все эти технологии тесно связаны друг с другом. XHTML-документ позволяет подключать CSS-стили тегами , и атрибутом style; программы на JavaScript подключаются элементом и могут вызываться с помощью событий документа. Атрибуты CSS всесторонне характеризуют элементы XHTML. Язык JavaScript посредством Document Object Model (DOM) имеет доступ ко всем элементам и атрибутам XHTML-документа.

Такая тесная интеграция технологий позволяет web-разработчикам создавать функциональные интерактивные сайты.

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

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

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

1. ОФОРМЛЕНИЕ ТЕКСТА

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

ПОДДЕРЖКА: все распространенные браузеры (шрифты Verdana и Georgia могут отсутствовать в Unix-подобных операционных системах).

Оформление текста — задача, вызывающая много проблем. Требуется сверстать текст, который удобно читать, и оформить его средствами каскадных таблиц стилей. Для этого в разделе страницы размещают код:

Экранный стиль отображает черный текст на светло-сером фоне и темно-серое меню навигации.

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

● Стиль для печатающих устройств:

* {

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

background-color: #fff;

color: #000;

}

#navigation { display: none; }

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

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

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

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

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

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

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

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

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%;

}

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

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

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

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