Практический пример применения стилей

2015-11-10

1069

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 2 3 4 5 6 7 8910 11 Следующая ⇒

Предположим, что требуется сверстать сайт, имеющий такой внешний вид:

Сразу условимся, что все файлы с изображениями будут находиться в папке images, размещенной в той же папке, что и веб-страницы сайта.
А CSS-стили будут вынесены в отдельный файл sp-style.css.

Прежде всего определим, что фоновое изображение sp-fon-1.jpg

будет задано для всего документа, т.е. для элемента BODY; здесь же укажем, что текст документа будет черного цвета:

BODY { background-image: URL(images/sp-fon-1.jpg); color: black }

Выделим блоки, из которых будет сформирована структура сайта (цвет, которым написано название блока, совпадает с цветом рамки на рисунке):

· main — основной блок шириной 800 пикселов и размещенный по центру; все остальные блоки должны быть расположены внутри него.

· head — головная часть сайта шириной 100 %, реализована как таблица с невидимыми границами.

· punkt — пункты меню сайта.

· text — содержимое отдельных страниц сайта.

Поскольку блоков для пунктов меню несколько, то для них создадим селектор по классу. Тогда как блоки main, head и text будут в единственном экземпляре, а значит для них применим селекторы по идентификатору.

Чтобы блок main разместился по центру окна браузера установим значения свойств margin-left и margin-right равными auto.

Для блока head укажем его ширину: 100 %.

Блоки punkt сделаем плавающими, прижатыми к левому краю;
их ширину зададим равной 24 % (чтобы они уместились в одну линию)
и установим размер отступов сверху и снизу по 10 пикселов.

Блок text тоже разместим по центру,
установим размер всех отступов в 1 em,
и зададим для него другой фоновый рисунок (sp-fon-2.jpg)

Для этих блоков CSS-правила будут такими:

#main { width: 800px; margin-left: auto; margin-right: auto; }

#head { width: 100% }

.punkt { float: left; width: 24%;

padding-top:10px; padding-bottom:10px; }

#text { background-image: URL(images/sp-fon-2.jpg);

margin-left: auto; margin-right: auto;

padding: 1em; }

Создадим класс menu для описания свойств текста в пунктах меню (в том числе, в таблице — головной части сайта).
Эти свойства должны быть такими: размер шрифта — 12 пунктов, гарнитура — Comic Sans MS, шрифт полужирный.

.menu { font-size: 12pt; font-family: Comic Sans MS; font-weight: bold }

Сформируем «каркас» сайта без таблицы и текста страницы, но с пунктами меню и стрелками (файл arrow.gif):

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//RU">

<html>

<head>

<title>Пример верстки сайта</title>

</head>

<body>

<i>Головная часть сайта</i>

</div>

<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> За бугром</span></div>

<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Родные осины</span></div>

<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Тоска объявлений</span></div>

<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Пальцем в небо</span></div>

<i>Текст страницы</i>

</div>

<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> За бугром</span></div>

<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Родные осины</span></div>

<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Тоска объявлений</span></div>

<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Пальцем в небо</span></div>

</div>

</body>

</html>

Демонстрация примера

В блоке <div id="text" style="clear:left"> мы добавили атрибут style= со значением clear:left чтобы текст страницы шел заведомо ниже пунктов меню.

Блоки <div class="punkt"> размещают пункты меню, а элементы <span class="menu"> — отображают пункты меню требуемыми свойствами шрифта.

Создадим таблицу внутри блока head, т.е. в головной части сайта.

Ширина этой таблицы равна 800 пикселов, отступ содержимого от границ ячеек — 5 пикселов.
Её структура (если рамку сделать видимой) должна быть такой:

Логотип	Пункт меню
Пункт меню

К содержимому в ячейках таблицы с пунктами меню применим тот же класс menu, что и в плавающих блоках.

Ячейка с логотипом содержит 2 элемента:

· текст «Газета от сохи» отображаемый полужирным шрифтом размером 14 пунктов, гарнитурой Comic Sans MS

· gif-файл собственно с логотипом газеты (sp-logo.gif) шириной 475 пикселов и высотой 70 пикселов.

Для текста «Газета от сохи» создадим класс menu-big и запишем CSS-правило:

.menu-big { font-weight: bold; font-size: 14pt; font-family: Comic Sans MS; }

А в html-документе заменим «заглушку» <i>Головная часть сайта</i> на таблицу:

<tr>

<td rowspan=2><div class="menu-big">Газета от сохи</div>

</td>

<td><span class="menu"><img src="images/arrow.gif" width=24 height=18> Толкователь</span></td>

</tr>

<tr>

<td><span class="menu"><img src="images/arrow.gif" width=24 height=18> Емеля</span></td>

</tr>

</table>

</div>

Демонстрация примера

Вот теперь перейдём к формированию стилей для текста страницы.

В содержательной части страницы присутствуют два вида заголовков:
Н3 — прижатый к правой стороне блока и отображаемый гарнитурой Comic Sans MS
и Н4 — размещаемый по центру.

А также абзацы, имеющие выравнивание по ширине.

Добавим соответствующие CSS-правила в файл sp-style.css:

H3 { font-family: Comic Sans MS; text-align: right }

H4 { text-align: center }

P { text-align: justify }

Кроме того, в тексте есть слово выделенное полужирным курсивом. Предположим, что такое выделение будет встречаться и на других страницах сайта. Чтобы каждый раз не использовать по две команды курсива и полужирного шрифта, добавим стиль полужирного шрифта в команду CITE(есть такая команда в языке HTML, используется для выделения цитат, как правило текст отображается просто курсивом).

CITE { font-weight: bold; }

В html-документе заменим «заглушку» <i>Текст страницы</i> на то, что там должно быть (правда, пока без картинки):

<h3>Толкователь</h3>

<h4>Толковый словарь Ожегова</h4>

<p>СЕРМЯЖНЫЙ

<p>1. см. сермяга.

<p>2. перен. Относящийся к бедному крестьянскому быту старой России. <i>Сермяжная Русь</i>.

<p><cite>Сермяжная правда</cite> (шутл.) — безыскусственная, идущая от самого существа чего-н.

<i>В его словах есть своя сермяжная правда</i>.

<h4>«НАУКА И ЖИЗНЬ»</h4>

С. Редичев<br>

СЕРМЯЖНАЯ ПРАВДА </p>

<p>Что такое сермяга? ...

<p>Вот какой длинный и трудный путь был у сермяги. Оставалось сшить из этого материала нужные вещи.

Шили вручную, как правило, льняными нитками.

<br><i>Получил сермяжные портки, теперь носи и смены не проси</i>.

</div>

Демонстрация примера

И, наконец, последнее, что осталось — это создать плавающий блок, в котором будет размещена иллюстрация к тексту и подпись под ней.

Для этого применим селектор по классу foto (ведь иллюстраций на странице может быть несколько) со следующими свойствами:

· плавающий блок должен быть прижат к правой стороне,

· левое и нижнее поля равны по 15 пикселов (чтобы текст страницы не подступал вплотную к иллюстрации),

· текст подписи должен отображаться шрифтом размером 10 пунктов, гарнитурой Arial и прижат к правому краю.

.foto { float: right;

margin-left: 15px; margin-bottom: 15px;

font-size: 10pt; font-family: Arial; text-align: right }

В html-документе добавим блок <DIV> с атрибутом class="foto". Во втором атрибуте — style="width:357px" — явно укажем ширину блока, равную ширине картинки из файла serm.gif

Файл с таблицей стилей sp-style.css можно посмотреть здесь.

Итог всех трудов:

Задание

Спецкурс
«Интернет-технологии»

Лабораторная работа № 3
Теория

Понятие гипертекстовой ссылки
Гиперссылки-метки
Гиперссылки на другие html-документы
Абсолютные и относительные URL-адреса
Картинки-гиперссылки
E-mail-гиперссылки
Атрибут target
Атрибут title
Установка цвета гиперссылок — псевдоклассы
Контекстный селектор
Практический пример применения стилей
Альтернативная таблица стилей для вывода на печать
Задание
Спецификация HTML 4.0

2015-11-10

1069

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 2 3 4 5 6 7 8910 11 Следующая ⇒

Обсуждение в статье: Практический пример применения стилей

Обсуждений еще не было, будьте первым... ↓↓↓