- •Основы html
- •Инструментарий
- •Теги (дескрипторы) в html
- •Структура html-документа
- •Атрибуты
- •Создание Web-страниц
- •Определение цветов
- •Расположение рисунков на странице.
- •Лабораторная работа №1 Знакомство с таблицами
- •Формирование таблиц
- •Лабораторная работа №2 Форматирование текста в html-документах
- •Заголовки
- •Текстовые абзацы
- •Принудительный разрыв строки
- •Изменение шрифта
- •Начертания шрифтов
- •Нижние и верхние индексы
- •Горизонтальные линии на html – странице
- •Бегущая строка
- •Маркированные и нумерованные списки
- •Лабораторная работа №3 Организация гиперссылок
- •Элементы привязки
- •Адрес гиперссылки
- •Внутренние и внешние гиперссылки
- •Задание цвета гиперссылок
- •Лабораторная работа №4 Создание фреймовой структуры html-страниц
- •Что такое фрейм?
- •Организация фреймов
- •Лабораторная работа №5 Использование иерархических стилевых спецификаций (css)
- •Применение css
- •Внешняя стилевая спецификация
- •Внедренные стилевые таблицы
- •Внутренние стили
- •Классы в стилевых спецификациях
- •Определение стиля для специфического элемента
- •Работа со специальными элементами
- •Лабораторная работа №6 Организация форм
- •Создание формы
- •Описание элементов формы
- •Лабораторная работа №7 Создание клиентских сценариев
- •Размещение сценария
- •Выполнение сценария
- •Функции JavaScript
- •Пример проверки заполнения обязательных текстовых полей
- •Пример обработки кнопок с зависимой фиксацией (radio)
- •Пример для элементов select (option)
Лабораторная работа №5 Использование иерархических стилевых спецификаций (css)
На предыдущих занятиях Вы оформили и связали гиперссылками несколько Web-страниц в соответствии с принятой ранее структурной схемой сайта. При оформлении каждой страницы Вам неоднократно пришлось описывать параметры отдельных абзацев, заголовков, шрифтов, подбирать фон страниц и фрагментов таблицы. Поскольку Вы наверняка старались оформлять страницы в едином стиле, эта работа была достаточно однообразной. Возможно, Вам приходила в голову мысль об автоматизации процесса описания параметров оформления. А приходила она не зря.
Дело в том, что в Web существует очень полезная технология – иерархические стилевые спецификации ‑ CSS. Использование CSS позволяет разработчикам отделить описание особенностей оформления Web-страниц от определения структуры документа, то есть восстановить смысл и значение HTML.
На этом занятии Вы научитесь оформлять документ так, чтобы потом его можно было при необходимости переоформить без лишних затрат времени и сил, изменив лишь таблицу стилей.
CSS - это язык, который содержит набор свойств для определения внешнего вида документа.
Средства CSS можно разделить на категории:
Средства управления позиционированием;
Средства для управления шрифтами;
Средства для управления фоновым цветом и изображением;
Средства выравнивания текста.
Применение css
Стилевые спецификации не заменяют языка разметки, они являются самостоятельной технологией, которая применяется непосредственно к тегу HTML. Чтобы назначить элементу HTML стилевое описание, необходимо в стилевой спецификации указать сам элемент и записать после него в фигурных скобках всю информацию о его форматировании: имя элемента {стилевые_спецификации}.
Например, необходимо задать правило форматирования элемента <H1> так, чтобы использовался шрифт гарнитуры Arial, размером 14 пунктов. Стилевая спецификация выглядит следующим образом:
h1 {font-family:”Arial”; font-size:”14pt”;}
Итак, стилевые спецификации являются просто набором правил, которые включают в себя селектор (проще говоря – имя HTML-элемента, атрибута CLASS или ID), связанный со стилевым свойством (например, font-family), после которого следует двоеточие и допустимое значение (или значения) этого свойства. В стилевую спецификацию может быть включено несколько правил, разделенных точкой с запятой.
Задание 1
Откройте файл справочника “Sprav_CSS.doc” на компакт-диске. Найдите разделы “Свойства шрифта“ и раздел “Свойства текста“. Ознакомьтесь со стилевыми свойствами шрифта и текста. Выясните, к каким HTML-элементам можно применить эти свойства.
Информация о стиле оформления элементов может быть включена в документ тремя основными способами. Вы можете связать документ с внешней стилевой спецификацией. Можно внедрить глобальную стилевую спецификацию, действующую в пределах одной Web-страницы, в заголовок гипертекстового документа. И, наконец, можно определить внутренний стиль для отдельного HTML-элемента.
Внешняя стилевая спецификация
Внешний стиль - наиболее абстрактный и мощный метод. Используется для определения стиля отдельно в другом документе. Обычно с помощью этого метода определяют стиль всего сайта.
Внешняя стилевая спецификация является обычным текстовым файлом, содержащим описание оформления для HTML-элементов и классов и имеющим расширение css.
Например, создаем файл “style1.css”, где определены следующие стили:
body {background:”#ffffff”; color:”#000000”;}
h1 {font-size:”24pt”; text-align:”center”;}
p {font-size:”12pt”; font-family:”arial”;}
HTML-документ, использующий такую стилевую спецификацию, должен иметь на нее ссылку. Такая ссылка реализуется при помощи элемента <LINK>, который располагается в элементе <HEAD>:
<link rel=”stylesheet” href="style1.css" type=”text/css”>
Файлы стилевых спецификаций могут располагаться где угодно, но лучше размещать их в специально созданном для этого каталоге.
Задание 2
При изучении раздела «Форматирование текста в HTML-документах» Вы создали Web-страницу, изображенную на рис. 14, и сохранили ее в файле “basset.htm”. Откройте файл “basset.htm” и на его основе подготовьте файл “basset1.htm”. Для этого:
Удалите из HTML-кода все атрибуты, связанные с форматированием текста (параметры абзаца и параметры шрифта);
Создайте текстовый файл “style.css”, в котором опишите стилевые спецификации заголовка, текстовых абзацев, шрифта.
Для заголовка: имя шрифта «Comic Sans MS», цвет шрифта 7B68EE, размер шрифта – 18pt.
Для абзацев: имя шрифта «Arial», цвет шрифта «black», размер шрифта – 13pt;
Создайте папку CSS и в ней ‑ папку “style” и сохраните в ней файл “style.css”;
Свяжите файл с описанием стилевых спецификаций “style.css” с файлом “basset1.htm”.
Формат записи:
<link rel="stylesheet" href="style1.css" type="text/css">.
Сохраните файл “basset1.htm” в папке “CSS”.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
Рис. 14. Пример оформления текстового фрагмента