Разработка website с использованием css
материал по информатике и икт (11 класс)
Практическая работа
Скачать:
Вложение | Размер |
---|---|
![]() | 694.58 КБ |
Предварительный просмотр:
Разработка клиентских приложений Web-сайтов
Работа с каскадными таблицами стилей
Урок мы начнем с разбора различных способов добавления каскадных таблиц стилей к документу. Одним из таких способов является внедрение - запись правил непосредственно в (X)HTML-коде внутри контейнера
"Ад и рай - в небесах", - утверждают ханжи.
Я, в себя заглянув, убедился во лжи:
Ад и рай - не круги во дворе мирозданья,
Ад и рай - это две половины души.
/Омар Хайам/
Результат:
Рис. 5.2.
Рассмотрим связывание CSS с помощью ссылки.
Пример. 3. Связывание каскадной таблицы стилей с web-страницей с помощью ссылки
Создайте новую таблицу стилей со следующим содержимым:
body { background-color: Transparent}
h3 { font-family: Calibri; font-size:16pt; color: Navy}
h4{font-family: Courier New CYR; font-size:14pt; color: Orange}
Далее, создайте новый HTML-документ и введите в него следующий код ():
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"Надо жить, - нам внушают, - в постах и в труде!"
"Как живете вы - так и воскреснете-де!"
Я с подругой и чашей вина неразлучен,
Чтобы так и проснуться на страшном суде.
/Омар Хайам/
Результат:
Рис. 5.3.
Стиль можно встраивать непосредственно в HTML-тэг с помощью атрибута style. Продемонстрируем такую возможность в следующем примере.
Пример 4. Встраивание стиля непосредственно в HTML-тэг
Создайте новый HTML-документ. В контейнер вставьте следующий код ():
Онегин, добрый мой приятель,
Родился на брегах Невы.
Где может родились и вы,
Или блистали, мой читатель.
/А.С. Пушкин/
Результат:
Рис. 5.4.
В вышеприведенных примерах стили применялись к отдельным тэгам. Однако можно применять единые правила оформления и для разных тэгов. В следующем примере мы применим одинаковый шрифт и цвет для тэгов разного размера.
Пример 5. Применение общих правил оформления к разным тэгам
Создайте новую HTML-страницу со следующим кодом ():
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
h3,h4,h5,h6 {font-family:Comic Sans MS;color:Red}
Над кем глумятся, тот уж не смеется,
Кто платит подать, тот и разорен,
Кто жертвует - с рубашкой расстается,
Ссудил на грош, потребует мильон.
Кто слово дал, держись: оно - закон,
Кто ходит в церковь, тот и к Богу вхож,
Подует ветер - меркнет небосклон,
Но Рождество наступит, если ждешь.
/Франсуа Вийон/
Результат:
Рис. 5.5.
Вместе с тем, можно применять правила форматирования к отдельно взятым тэгам. Для этого используется атрибут id. В следующем примере мы покажем, как можно покрасить в разный цвет текст в одном и том же тэге.
Пример 6. Применение правила форматирования по атрибуту id
Создайте новый HTML-документ и введите в него следующий код ():
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
#code_1 {color:Blue;font-family:Comic Sans MS}
h3{color:Red; font-family:Verdana}
Без труда не выловишь и рыбку из пруда
Что посеешь, то и пожнешь
Результат:
Рис. 5.6.
Из одного и того же элемента можно назначить несколько разновидностей стилей, называемых классами. Класс применяется к тем элементам, у которых значение атрибута class является имя этого класса.
Пример 7. Использование классов в CSS
Создайте новый HTML-документ и введите в него следующий код ():
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
p.a {font-family: Tahoma; text-align: center; font-size:12pt}
p.b {font-family:Comic Sans MS; text-align:justify; font-size:14pt}
ВИЙ?Н (Villon) Франсуа (наст. имя и фамилия Франсуа де Монкорбье, Montcorbier)
(1431, Париж - после 1463), выдающийся французский поэт позднего Средневековья.
О Франсуа Вийоне известно очень немного. Его отец умер, когда он был ребенком,
и мальчика усыновил родственник Гийом де Вийон, капеллан церкви Святого Бенедикта.
Результат:
Рис. 5.7.
Краткие итоги
Каскадные таблицы стилей делают возможным разделение кода и представления. Это облегчает объединение усилий кодировщиков и дизайнеров в рамках одного проекта. Дизайнеры формируют концепцию внешнего оформления сайта и сохраняют ее в виде каскадных таблиц стилей, или CSS. CSS можно связывать с документом несколькими способами: непосредственно размещая правила форматирования в (X)HTML-коде, с помощью директив импорта и ссылок на внешние файлы с расширением .css, или применяя правила внутри тэгов. Одни и те же правила оформления можно применять к разным тэгам, возможно и обратное - применение разных правил к одному тэгу.
Набор для практики
Вопросы:
- Какими способами можно связывать web-страницы с каскадными таблицами стилей?
- Что такое атрибут id?
- Что такое класс?
Упражнения:
- Создайте небольшой сайт туристического агентства. Разработайте фирменный стиль заголовка и подвала (нижней части) web-страницы и сохраните его во внешнем файле с расширением .css. Примените стиль на всех страницах сайта с помощью директивы импорта.
- Создайте небольшой сайт, посвященный охране диких животных. Разработайте для него CSS, форматирующую фон, заголовки и абзацы. Используйте в работе атрибуты id и классы.
По теме: методические разработки, презентации и конспекты
Методическая разработка по теме: использование современных технических и информационных средств обучения на уроках географии.
Аннотация.Методическая разработка посвящается вопросам применения современных информационных технологий на уроках географии в учебных заведениях среднего профессионального образовани...
Методическая разработка урока с использованием электронных образовательных ресурсов
Данный урок способствует развитию социокультурной компетенции учащихся.Используется игровая технология обучения и групповые формы работы. Применение цифровых образовательных ресурсов делае...
Разработка открытого урока «Использование элементов хорового пения при музицировании в классе фортепиано».
Открытый урок по хору, творческий отчет...

Разработка урока с использованием ИКТ "Я и мой мобильный телефон"
Данная разработка актуальна и будет интересна учителям английского языка....
Разработка урока с использованием проблемного метода обучения в 7 классе к УМК "New Millennium English". «Использование настоящего совершенного длительного времени".
Цель данного урока: ознакомить учащихся с Настоящим Совершенным длительным временем в процессе решения проблемной ситуации....
Методические рекомендации по использованию презентаций в учебной деятельности . Разработки уроков с использованием ИКТ
Информационные технологии способствуют развитию и распространению электронных образовательных ресурсов (ЭОР) в образовательном процессе. ЭОР легко копируются на различные электронные носители: л...

Методическая разработка мастер-класса «Использование возможностей сервисов Google в педагогической практике. Создание коллективных презентаций с использованием сервиса Google»
Мастер-класс «Использование возможностей сервисов Google в педагогической практике. Создание коллективных презентаций с использованием сервиса Google» – новый мастер-класс в цикле ма...