Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Учебно-методический комплекс дисциплины по направлению подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность», профиль
.pdf
Схема 2
Схема 3
2. При создании сайта используйте материалы интернет-ресурса
«Мир библиотек» (http://www.library.ru/3/)
Контрольные вопросы
1. Как создать таблицу на web-странице?
2. Какие атрибуты используются для горизонтального и вертикаль-
ного выравнивания ячеек в таблице, для определения высоты и ширины
ячеек, их цвета?
3. Перечислите способы создания таблиц в MS FrontPage 2003.
4. Что такое макетная таблица
?
Лабораторная работа № 6
Форматирование с использованием каскадных таблиц стилей
6 часов
Цель работы: получить представление о технологии CSS.
Задачи работы:
1) ознакомиться с понятием каскадных таблиц стилей;
2) овладеть практическими навыками использования технологии CSS
для оформления внешнего вида документов средствами MS FrontPage
2003.
Формируемые компетенции:
готовность к овладению основными методами, способами и средст-
вами получения, хранения, переработки информации, наличие навы-
61
ков работы с компьютером как средством управления информацией
(ОК-12);
готовность к овладению перспективными методами библиотечно-ин-
формационной деятельности на основе информационно-коммуникационных технологий (ПК-4).
В результате выполнения лабораторной работы студент должен:
знать:
язык описания стилей CSS (ОК-12, ПК-4);
уметь:
применять внутренние и внешние стили в документе (ОК-12, ПК-4);
владеть:
практическими навыками использования технологии CSS для оформ-
ления внешнего вида HTML-документов (ОК-12, ПК-4).
Обеспечивающие средства: персональный компьютер, операционная
система Windows, Microsoft FrontPage 2003.
Задание: выполнить оформление сайта при помощи CSS стилей.
Требования к отчету: итоги выполнения лабораторной работы пред-
ставить в виде html-документа и ответов на контрольные вопросы.
Теоретические сведения
Каскадные таблицы стилей CSS (Cascading Style Sheets) предназна-
чены для определения внешнего вида web-страниц и предоставляют
возможность воздействовать на выбор шрифта, параметры форматирования
текста, установку фонового цвета, ширину полей и т. д. То есть CSS представляет собой средство разделения логической структуры документа и
формы его представления.
Логическая структура документа определяется элементами HTMLразметки, в то время как форма представления каждого из этих элементов
задается CSS-описателем элемента.
Применение CSS состоит из двух этапов.
1) Определение стиля. Стиль – это набор каких-либо свойств. На-
пример, к таким свойствам может относиться: выбранный шрифт, цвет,
размер и т. д. В CSS стиль называется селектором.
2) Применение стиля к объектам. В зависимости от выбранного
подхода стиль может применяться автоматически или же область его при
менения необходимо указывать вручную. В CSS выражение, которое применяется к одному или нескольким стилям, называют правилами CSS.
62
-
Существует три метода добавления таблиц стилей на web-страницу.
1) Использование внутренних стилей для определения стилей непо-
средственно в том или ином элементе.
2) Использование внедренных таблиц стилей для определения сти-
лей в начале web-страницы. При этом правила будут применяться только
к элементам данного документа.
3) Использование внешних таблиц стилей для определения
стилей
отдельно в другом документе. Применение этого метода является наиболее
рациональным способом с точки зрения разработки web-сайта и его сопровождения. При необходимости можно вносить нужные изменения в файлы
описаний, и внешний вид документов web-сайта соответственно будет изменяться при отображении браузером.
Работа с каскадными таблицами стилей в Microsoft FrontPage
Внутренние стили
Внутренние стили CSS применяются в программе FrontPage 2003 автоматически при использовании кнопок Стиль – Формат в различных
диалоговых окнах (например: Свойства рисунка, Свойства таблицы,
Свойства ячейки, Список, Разрыв) (рис. 1). При этом каждый объект настраивается индивидуально.
Рисунок 1 – Настройка внутренних стилей
63
Внедренные стили
Для определения стилей в начале web-страницы используется команда Формат – Стиль. В появившемся диалоговом окне Стиль (рис. 2)
можно создать описание для селекторов тегов и селекторов классов.
В списке Стили отображается список или тегов html или селекторов
созданных пользователем, в зависимости от выбора в выпадающем меню
Список. При выборе любого
из селекторов в окнах Абзац и Знаки отображается, как будет выглядеть объект, к которому будет применен стиль,
а в окне Описание выводится текстовое описание атрибутов данного стиля.
Кнопка Удалить позволяет удалить выделенный селектор из списка
Пользовательские стили. Кнопка Создать открывает диалоговое окно
Создание стиля, в котором создаются новые селекторы. Кнопка
Изме-
нить открывает диалоговое окно Изменение стиля, которое полностью
совпадает с окном Создание стиля и служит для изменения описания вы-
деленного селектора. В случае изменения стиля для тега из списка Теги
HTML этот селектор тэга переносится в список Пользовательские стили.
Рисунок 2 – Диалоговое окно Стиль
При работе с диалоговым окном Создание (Изменение) стиля
рис. 3) используются следующие поля и кнопки.
(
В поле Имя (для выбора) вводится имя селектора; имя селектора
класса начинается с точки (.).
64
Кнопка Формат позволяет получить доступ к выпадающему списку,
в котором можно выбрать следующие пункты:
Шрифт – открывает диалоговое окно Шрифт, позволяющее создать
стилевые настройки шрифта.
Абзац – открывает диалоговое окно Абзац, которое позволяет уста-
новить абзацные отступы (слева и справа) от окна браузера, отступ
для первой строки, настроить интервалы между
строками и абзаца-
ми, настроить интервалы между словами в абзацах;
Граница – открывает диалоговое окно Границы и заливка, с по-
мощью которого можно установить границу для выделенного абзаца,
залить абзац каким-либо цветом;
Нумерация – открывает диалоговое окно Список, с помощью кото-
рого можно создать нумерованные, маркированные и другие
списки;
Положение – открывает диалоговое окно Положение, с помощью
которого можно точно разместить различные элементы на странице.
Рисунок 3 – Окно Создание стиля
65
Поле Образец отображает, как будет выглядеть объект, к которому
будет применен созданный стиль.
В поле Описание выводится текстовое описание атрибутов данного
стиля.
Выпадающее меню Тип стиля активно в случае создания селектора
класса. При выборе типа Знак, в начало имени селектора добавляется слово span.
К выделенным объектам селекторы применяются по-разному
Селекторы тегов применяются автоматически после выбора соот-
ветствующих команд.
Селекторы классов применяются:
путем выбора их из числа прочих
стилей в выпадающем списке Стиль
(рис. 4) на панели инструментов Форматирование;
путем выбора из выпадающего окна
Класс диалогового окна Изменение
стиля, которое открывается кнопкой
Стиль из различных диалоговых окон
например, Свойства рисунка, Свой-
(
ства таблицы, Свойства ячейки,
Список, Разрыв).
.
Рисунок 4 – Список стилей
При использовании внедренных таблиц стилей их необходимо
настраивать для каждой web-страницы.
Внешние таблицы стилей
В этом случае для определения стилей CSS отводится отдельный
файл, на который будут ссылаться web-страницы. Такой подход:
1) обеспечивает централизованное управление стилями CSS на всех
web-страницах (внесенные изменения
будут автоматически применяться
сразу на всех web-страницах, которые ссылаются на файл, содержащий
CSS);
2) уменьшается суммарный размер web-сайта;
3) увеличивается скорость загрузки web-страниц.
Для создания внешнего файла, содержащего каскадные таблицы стилей, необходимо выполнить команду Файл – Создать и перейти по гиперссылке Другие шаблоны страниц из области задач Создание (рис. 5).
66
В открывшемся диалоговом окне Шаблоны страниц следует выбрать вкладку Таблицы стилей, на которой показаны шаблоны таблиц
стилей, входящие в состав FrontPage 2003. Для самостоятельного создания
таблицы стилей нужно выбрать шаблон Обычная таблица стилей.
Полученную страницу с расширением .css необходимо сохранить
в одну из папок web-сайта с именем, заданным обязательно латинскими
буквами и
расширением .css. Далее следует создать описание для селекторов тегов и селекторов классов, используя команду Формат – Стиль,
которая открывает диалоговое окно Стиль (рис. 2).
Рисунок 5 – Создание внешнего файла стилей
Созданную таблицу стилей нужно связать со страницами web-сайта.
Для этого необходимо выполнить команду Формат – Связи с таблицами
стилей.
В открывшемся диалоговом окне Связать с таблицей стилей
(рис. 6) переключатели и кнопки выполняют следующие действия:
1) переключатель все страницы применяет стили ко всем выделенным
страницам web-сайта;
2) переключатель выделенные страницы применяет стили
к текущей
странице или к web-страницам, выделенным на панели Список па-
пок;
67
3) кнопка Добавить служит для добавления файла, содержащего кас-
кадные таблицы стилей;
4) кнопка Удалить служит для удаления файла, содержащего каскад-
ные таблицы стилей, из списка используемых таблиц стилей;
5) кнопки Вниз, Вверх позволяют регулировать порядок присоедине-
ния файлов с таблицами каскадных стилей к web-страницам (если
используется несколько таблиц каскадных стилей
);
6) кнопка Изменить открывает выделенный в окне адрес URL
css-файла для редактирования.
Рисунок 6 – Окно Связать с таблицей стилей
Технология работы
Работа в программе Блокнот
1. Создайте HTML-документ index.htm. Между тегами <HEAD>
добавьте следующий текст:
<STYLE TYPE="text/css">
Н1, Н2 {text-align: center;}
</ STYLE >
При этом заголовки будут выровнены по центру. Чтобы применить
выравнивание сразу на несколько блоков, определим выравнивание при
помощи тега <DIV> </DIV>. Для этого, вместо определения стилей для HI
и Н2, определим стиль для <DIV></DIV>:
68
DIV {text-align: center;}
2. Затем вложим оба заголовка в тег <DIV> </DIV>. В результате
получим следующее:
<HTML>
<HEAD>
<TITLE> Главная страница </TITLE>
<STYLE TYPE="text/css">
DIV {text-align: center;}
</ STYLE >
</HEAD>
<BODY>
<DIV>
<Н1>Web-технологии</Н1>
<Н2>Каскадные таблицы стилей </Н2>
</BODY>
</HTML>
Таблицы стилей позволяют очень гибко оформлять документ – выравнивать заголовки и абзацы, задавать цветовое и шрифтовое оформление, создавать рамки вокруг объектов и многое другое. Причем действие
таблиц стилей может распространяться как на конкретный элемент, так и
целиком на страницу или даже на множество страниц сразу. Именно поэтому они и называются каскадными. Для того, чтобы не возникали конфликты между таблицами различных уровней, определены приоритеты области воздействия. Суть их сводится к тому, что чем ближе к элементу
находится описание стиля, тем бόльший приоритет он имеет. Рассмотрим
это более подробно.
3. Для этого в файл index.htm добавим к открывающему тегу <Н2>
атрибут STYLE, в котором укажем, что выравнивание элемента надо проводить по правому краю:
<Н2 STYLE="text-align:right"> Каскадные таблицы стилей </Н2>
При открытии этого документа в браузере строка «Каскадные таблицы стилей» будет выровнена не по центру, а по правому краю. Таким образом, мы убедились, что встроенные при помощи атрибута STYLE таблицы
стилей имеют наибольший приоритет.
69
Ранее было отмечено, что действие каскадных таблиц стилей может
распространяться на несколько документов сразу. Для этого их выносят
в отдельный CSS-файл, а затем ссылаются на него из других документов.
4. Создадим файл mystyle1.css такого содержания:
Н1, Н2 {color: red;}
Затем добавим в тег <HEAD> </HEAD> файла index.htm строку:
<LINK REL=STYLESHEET HREF="mystyle1.CSS"
TYPE="text/CSS">
Теперь заголовки стали красного цвета. И любой документ, имеющий
ссылку на "mystyle1.css", будет иметь заголовки HI и Н2 красного цвета, если только в самом документе значение цвета для этих тегов не будет переопределено. То есть если в файле "index.html" мы в определении STYLE
добавим
H1 {color: green;}
теперь строка «Web-технологии» будет написана зеленым цветом.
5. Создание классов элементов
Для того чтобы в одном и том же документе одни абзацы выравнивались по центру, а другие – по ширине, создадим соответствующие классы
для тега <P> </P>.
<STYLE TYPE="text/CSS">
P.Center {text-align: center;}
P.Both {text-align: justify;}
</STYLE>
<P CLASS="Center"> – некоторый текст, который надо разместить по
центру. </Р>
<Р CLASS="Both"> – некоторый текст, который должен быть выров-
нен по обоим краям. </Р>
Таким образом, в определении стиля было создано два класса для те-
га <P> </P>: Center и Both. Для первого класса указано форматирование
текста по центру, а для второго – по ширине. Для того чтобы указать, к какому именно классу принадлежит конкретный тег, используется атрибут
CLASS. Если атрибут CLASS не указан, то будет применено форматирование, принятое по умолчанию (в случае с абзацем – выравнивание по левому краю).
70
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]