Практическое задание по теме 5
ИСПОЛЬЗОВАНИЕ СТИЛЕВЫХ НАПРАВЛЕНИЙ В ВЕБ-ДОКУМЕНТАХ»
Учебные и воспитательные цели практического занятия:
Образовательные: подготовка обучающихся к организационно-управленческой деятельности посредством формирования у них знаний, умений и компетенций по вопросам применения каскадных таблиц стилей для форматирования веб-документов.
Развивающие:актуализироватьопорныезнания по дисциплине, а также межпредметные связи; для развития и активации у слушателей самостоятельного мышления, логических способностей и профессиональной лексически и терминологически грамотной речи, в процессе проведения занятия решать практические задачи с использованием веб-технологий.
Воспитательные и личностно-формирующие:формирование информационно-технической культуры и кругозора; стимулирование активной познавательной деятельности и мотивации, способствование выработке у слушателей убежденности в важности освоения рассматриваемых вопросов для будущей практической деятельности.
Категория обучающихся:слушатели 2 курса факультета заочного обучения
Время:2 час (90 мин).
Место проведения:компьютерный класс.
Материально-техническое обеспечение:
1. Мультимедийное оборудование (проектор, экран, ноутбук, колонки).
2. Интерактивная доска.
3. Компьютерный класс.
Программное обеспечение:
1. Операционная система: Microsoft Windows.
2. Текстовый редактор: Блокнот или Atom.
|
|
|
3. Веб-браузер: IE, Opera или Mozilla.
ПЛАН практического ЗАНЯТИЯ
| Учебные вопросы | Время, мин |
| Вступительная часть …………………………..……………………… Использование каскадных таблиц стилей для форматирования веб-документо…………………..…………..…………………………. Выполнение практической части: Создание каскадных таблиц стилей…………… …………………… Взаимосвязь каскадных таблиц стилей и веб-документов ………… Заключительная часть ………………………………………………... | 10 20 20 30 10 |
| Всего……………………………………………………………………. | 90 |
МЕТОДИЧЕСКИЕ УКАЗАНИЯ ПО ОТРАБОТКЕ УЧЕБНЫХ
ВОПРОСОВ
1. Создать каскадную таблицу стилей CSS.
2. Вынести описание стилей во внешний файл. Организовать связь этого файла с несколькими HTML-документами.
3. Произвольным образом определить стилевые параметры тэгов в теле html-документа.
4. Представить результаты выполнения лабораторной работы преподавателю в электронном виде.
Задание №1. Отформатировать (изменить внешний вид) веб-документ с помощью каскадной таблицы стилей CSS.
Пример выполнения задания:
1. С помощью текстового редактора создать таблицу стилей в по следующему образцу:
|
|
|
<STYLE TYPE="TEXT/CSS">
<!--
BODY {background-color: #c4d5ff }
H2 {font-size: 22pt; color: green; text-align: center}
P {font-size: 18pt; color: red; text-align: right}
HR {width: "50%"}
-->
</STYLE>
2. Сохранить таблицу стилей в отдельном файле mystyle.css.
3. При помощи тэга <LINK> связать таблицу стилей с документом 1.html. Для этого
<LINK rel="stylesheet" type="text/css" href="mystyle.css">
В результате внешний вид документа 1.html поменяется в соответствии со стилевыми направлениями, заданными в таблице стилей.
Задание №2. Отформатировать (изменить внешний вид) веб-документ с помощью фрагмента каскадной таблицы стилей CSS.
1. С помощью текстового редактора скопировать фрагмент таблицы стилей в заголовок html-документа (2.html), изменив стиль для тэга параграфа <P>:
<HEAD>
<STYLE TYPE="TEXT/CSS">
<!--
BODY {background-image:url(fon.jpg) }
P {font-size: 16pt; font-style:italic}
HR {width: 50%}
-->
</STYLE>
В результате внешний вид документа 2.html поменяется в соответствии со стилевыми направлениями, заданными в таблице стилей, внедренной в раздел заголовка html-документа.
Задание №3. Отформатировать веб-документ с помощью стилевых направлений CSS.
1. Другим способом создания стилевых направлений является использование атрибута STYLE в тэгах ранее созданных документов: в тело документа3.html добавить следующие стилевые направления:
|
|
|
<OL style="text-align: center">
<UL style="background-color: yellow">
<TABLE style="width: 50%; background-color: pink">
В результате внешний вид документа 3.html поменяется в соответствии со стилевыми направлениями, заданными с помощью атрибута STYLE для верхней горизонтальной черты и двух абзацев текста.
Контрольные вопросы:
1. В каком случае целесообразно размещение всей стилевой информации в одном внешнем файле?
2. При помощи какого дополнительного атрибута можно определить нужные стилевые параметры в любом тэге?
3. При каком способе подключения таблиц стилей действие распространяется на страницу?
4. Как происходит определение стилей в секции заголовка?
Задание на самостоятельную работу:
Измените таблицу стилей, дополнив ее соответствующими стилевыми правилами. Свяжите дополненную таблицу стилей со всеми ранее созданными html-документами, предварительно удалив из них иное стилевое форматирование.
Дата добавления: 2018-08-06; просмотров: 263; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!