МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ БАШКОРТОСТАН
ГОУ СПО КУШНАРЕНКОВСКИЙ ПЕДАГОГИЧЕСКИЙ КОЛЛЕДЖ
Лабораторная работа №3
Тема: Динамический HTML. Создание динамических страниц с помощью классов.
Дисциплина: Компьютерные сети, Интернет и мультимедиа технологии.
Автор-составитель
Преподаватель информатики КПК Минигалиев А.Н.
Кушнаренково 2007
Цель:
Получить представление о создании динамических страниц с помощью классов.
2) Приобрести навыки создания и применения классов.
Задачи работы:
Изучить примеры, разобраться в технологии создания классов продемонстрировать работающие примеры и выполненные задания преподавателю.
Критерий оценивания:
Оценка «5» ставится за все шесть выполненных заданий и работающих примеров.
Оценка «4» за все выполненные кроме одной (пять выполненных работ).
Классы
Так почему классы? Когда у вас на странице есть множество объектов примерно одинакового назначения, вы можете использовать для них глобальные стилевые установки, применяя для всех этих объектов один стиль. Каждый объект имеет атрибут, который связывает его с определенным классом. Через этот атрибут легко задать стиль объекта, сопоставляя его определенному классу. Кроме того, вы можете динамически изменять атрибут класса, соответственно меняя стиль объекта.
Кроме того, стили можно устанавливать не только с помощью CSS. Очень удобно использовать для установления стилей объектов классы. Под классом здесь подразумевается набор неких свойств и их значений, объединенный в один класс. Классу присваивается имя, а затем весь этот набор свойств можно установить для какого-либо конкретного объекта. Это очень удобно, если, например, у вас имеется несколько ссылок и для каждой из них надо установить красный цвет текста и нежно-голубой цвет фона, а также жирный шрифт, то не надо мучать себя и набивать каждый раз эти установки в свойстве Style каждого объекта, например, наберите следующий код:
Пример 1 /2/
<HTML> <HEAD> <STYLE> .myStyle {color: red; background-color: lightblue; font-weight: bold} </STYLE> </HEAD> <BODY> <!-- ... Какой-то код > <A HREF="gotonowhere.html" CLASS=myStyle>Ссылка с применением класса</A> <!-- ... Еще какой-то код> </BODY> </HTML>
Как видите, здесь приведен пример использования класса, он же набор свойств. Класс определяется в блоке <HEAD> с помощью блока <STYLE> Таких классов может быть определено великое множество и у них могут быть любые дозволительные имена.
Пример 2 /1/
<html>
<head> <title>Описание и использование классов</title>
<style>
<--
p.elleft {color:red; text-align:left}
p.elcenter {color:green; text-align:center}
p.elright {color:blue; text-align:right}
h5.elleft {color:red; text-align:left}
h5.elcenter {color:green; text-align:center}
h5.elright {color:blue; text-align:right}
//-->
</style>
</head>
<body>
<h5 class=elleft>Диана</h5>
<p class=elleft>
Диана почиталась как богиня охоты, владычица зверей.
В произведениях искусства Диана чаще всего предстает вооруженной луком со стрелами, в сопровождении собак и лани.</p><hr>
<h5 class=elcenter>Гермес</h5>
Гермес- вестник богов, проводник душ умерших в подземное царство Аида,
а также хитрый и изворотливый покровитель торговли.
Иногда Гемес почитался и как покровитель искусства.</p><hr>
<h5 class=elright>Амур</h5>
<p class=elright>
Амур - крылатый бог любви, сын Венеры, ее посланник
и неизменный спутник. Стрелы Амура, пронзая сердца богов и людей,
пробуждали любовь.</p><hr>
<h5 class=elleft>Афродита</h5>
<p class=elleft>
В античной мифологии Афродита - богиня любви и красоты,
покровительница брака. Во многих мифах Афродита воспевалась
как богиня плодородия, дарующая жизнь растительному
и животному миру.</p><hr>
<h5 class=elcenter>Гера</h5>
<p class=elcenter>
В античной мифологии Гера - супруга Зевса, главная среди богинь Олимпа,
покровительница брака и семьи.
В произведениях искусства богиня Гера изображалась в диадеме,
со скипетром, часто с символом звездного неба - павлином. </p><hr>
</body>
</html>
Задание по 2 примеру.
Создайте свой класс, испытайте его и продемонстрируйте преподавателю.
Почему классы?
Есть два способа задания стиля объекта: первый - это напрямую, как мы это делали на предыдущих лабораторных работах.
И второй способ - это использование классов. Используя их, вы можете задать сразу несколько строк. Так почему классы? Когда у вас на странице есть множество объектов примерно одинакового назначения, вы можете использовать для них глобальные стилевые установки, применяя для всех этих объектов один стиль. Каждый объект имеет атрибут, который связывает его с определенным классом. Через этот атрибут легко задать стиль объекта, сопоставляя его определенному классу. Кроме того, вы можете динамически изменять атрибут класса, соответственно меняя стиль объекта.
Пример 3 /2/
В этом примере показано, как можно производить динамическую смену класса.
<HTML> <HEAD> <STYLE> .textRed {color:red} .textBlack {color:black} </STYLE> </HEAD> <BODY> <H1 class=textBlack onmouseover="this.className='textRed'" onmouseout="this.className='textBlack'"> Наведи на меня мышь, чтобы посмотреть, как классы динамически меняются </H1> </BODY> </HTML>
Определено два класса под именами textRed и textBlack. При инициализации, объекту <H1> присваивается класс textBlack, обратите внимание, что в этом случае используется атрибут class, а имя класса пишется без кавычек. Это происходит потому, что этот код является частью языка HTML, а вот когда имя класса надо сменить, в двойных кавычках находится часть Script-языка, поэтому используется атрибут className, и имя класса пишется в одинарных кавычках.
С помощью классов вы можете менять все атрибуты стиля за исключением позиционирования (position).