ЛАБОРАТОРНАЯ РАБОТА
ТЕХНОЛОГИИ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ
Языки логической разметки документов, скриптовые языки программирования, стили визуального оформления
Подготовлена Прохоровым В.С.
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.
h1 {
letter-spacing: 0.2em;
font: bold 1.2em Verdana, Tahoma, Arial, Helvetica, sans-serif;
text-transform: uppercase; }
p {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 150%;
color: #000; }
p.serif { font-family: Georgia, "Times New Roman", Times, serif; }
ТЕХНОЛОГИИ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ
Web-сайт - это большая и сложная система, основанная на тесном взаимодействии множества различных технологий. Клиентские средства разработки используются в основном для форматирования и первичной обработки информации, а также для ее вывода пользователю в красивом и удобном виде. Основу таковых составляют теговые языки логической разметки документов (HTML, XHTML, XML), скриптовые языки программирования (javascript и VBScript), а также стили визуального оформления (CSS).
Самыми распространенными языками считаются XHTML - для разметки (отличия от последней версии HTML 4.01 незначительны, сам же HTML больше не развивается, эстафетная палочка перешла к XHTML), CSS - для оформления стилевого решения документов и javascript - для программирования интерактивных элементов.
Рис.1. Отображение на экране монитора текста оформленного средствами каскадных таблиц стилей CSS.
Рис.2. Отображение на экране монитора текста, не оформленного средствами каскадных таблиц стилей CSS.
2. ВЕРСИЯ СТРАНИЦЫ ДЛЯ ПЕЧАТИ
ТЕХНОЛОГИЯ:CSS
ПОДДЕРЖКА: все распространенные браузеры (проблема с новым цветом страницы для печати в браузере Opera).
Некоторые страницы сайта нужно распечатывать на бумаге. Поэтому создают версию сайта для печати.
Создана страница сайта, основной текст которой помещен в блок
, а меню в блок :Листинг 2_print_version – Версия страницы сайта для печати на бумаге.
body {
background-color: #f0f0f0;
font: 0.8em Verdana, Tahoma, Arial, Helvetica, sans-serif;
}
#text { width: 65%; }
#navigation {
float: right;
width: 30%;
background-color: #ccc;
padding: 1%;
margin-left: 1%;
}
* {
font-family: "Times New Roman", Times, serif;
background-color: #fff;
color: #000;
}
#navigation { display: none; }
Использование языков программирования, работающих на стороне клиента, - javascript, VBScript - ограничено в основном различными визуальными эффектами и повышением удобства работы с веб-сайтом. Главное достоинство клиентских технологий в том, что для взаимодействия с пользователем они не требуют перезагрузки страницы и обмена данными с Интернетом, отсюда и недостаток - эти языки контролируются клиентом и не подходят для решения ответственных задач, например для проверки пароля пользователя при входе на какой-нибудь онлайн-сервис. Впрочем, у каждого средства разработки есть свои плюсы и минусы, которые определяет его сфера применения.
Отличительная особенность клиентских технологий в том, что их работоспособность зависит от "пользовательского агента" (в подавляющем большинстве случаев это обычный интернет-браузер), который и берет на себя всю работу по отображению информации. Отсюда проблема - выбирая серверную основу сайта, вы определяетесь лишь однажды, выбирая клиентские языки, обязательно нужно знать о степени их востребованности среди потенциальной аудитории вашего веб-сайта. Распространенность - одна из важнейших характеристик клиентской технологии.
Для страницы сайта указано два независимых стиля.
● Стиль
Экранный стиль отображает черный текст на светло-сером фоне и темно-серое меню навигации.
Рис.3. Отображение текста на экране монитора.
● Стиль
Для печати описание страницы другое. 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;).
И последний штрих: улучшим удобочитаемость текста врезки с помощью отбивки сверху, снизу, слева и справа от границ блока на 1%.
Поясним CSS-код для обтекания рисунков текстом и создания врезки.
Абзацы текста растянуты по ширине (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 – Верстка таблицы с помощью «продвинутых» тегов.
Заголовок таблицы задан с помощью элемента | ).
В этом простом примере таблица содержит 20 ячеек, а в рабочих таблицах их
значительно больше. Поэтому применение тега Основное содержимое таблицы разделено тегами , | ||||||||||||||||||||||
|
|
|
Статистика файлового архива
Десятка новых файлов | |
121 пользователей за последние 3 минут | |
121 гостей, 0 пользователей, 0 скрытых пользователей
Yandex Bot
|
|
Статистика файлового архива | |
В файловом архиве содержится 220784 файлов в 133 разделах Файлы в архив загрузили 3349 пользователей Файлы с архива были скачаны 13539934 раз Последний добавленный файл: Магнетокалорический эффект от пользователя naqusud (добавлен 23.5.2020, 16:04) |
|
Текстовая версия |
Licensed to: Veni Vidi Vici