Урок 6. Наполнение сайта

Перед наполнением страницы создадим 2 картинки:

piс1.jpg – размером 200х287

piс2.jpg – размером 200х250

Укажем правила для картинок. Запишем в листе стилей:

.img1 {width: 200px; height: 287px; margin: 0 0 0 15px; float:right;
}

.img2 { width: 200px; height: 250px; margin: 10px 10px 0 15px; float: left;
}

Каждой картинке мы присвоили атрибут img1, img2, указав в каждом правиле размеры картинок, обтекание текстом и отступы для них.
Еще раз отметим, что правила начинаются не с решётки, а с точки. Это и есть признак того, что правило относится не к id, а к class.
Сохраним картинки в папке img.

После блока меню добавим блок с контентом

Следующий код:

<div id=»text» >
<h1>Электронное правительство</h1>
<img class=»img1″ src=»img/piс1.jpg» alt=»Электронное правительство» />
<р>Электронное правительство — способ предоставления информации и оказания уже сформировавшегося набора государственных услуг гражданам, бизнесу, другим ветвям государственной власти и государственным чиновникам, при котором личное взаимодействие между государством и заявителем минимизировано и максимально возможно используются информационные технологии. </p>

<р> В 2010 году в десятку лидеров рейтинга вошли такие страны, как 1 – Республика Корея; 2 – США; 3 – Канада; 4 – Великобритания; 5 – Нидерланды; 6 – Норвегия; 7 – Дания; 8 – Австралия; 9 – Испания; 10 – Франция. Россия в рейтинге занимает 59 место, что на строчку выше, чем в аналогичном исследовании за 2008 год.</p>

<р>Предоставление информации и оказание гос. услуг реализовано через сайт государственных услуг – http://www.gosuslugi.ru . Все услуги, размещенные на портале, соотнесены с конкретным регионом Российской Федерации: место получения услуги определяет как наличие самой услуги, так и условия ее предоставления. </p>

Сохраним страницу и смотрим, что получилось в браузере

Текст появился, но всё расползлось. Все дело в том, что мы задали параметры в стилях.

Тэг div с атрибутом text — это и есть область полезного содержимого странички, иначе называемое контентом. Как и в любом тексте мы видим абзацы, обрамленные тэгами р, а также несколько изображений.

Далее в листе стилей CSS запишем:

#text {
width: 545px;
font-size: .8em;
color: #333;
margin: 10px auto;
float: left;
}

Мы указали, что ширина у области текста будет равна 545 пикселям. Размер шрифта 0.8em (в данном правиле ноль можно не писать). Отступы сверху и снизу по 10 пикселей, по бокам автоматическое выравнивание. Последняя строчка задаёт местоположение блока текста с левой стороны (слово float означает обтекание“)

#text p {
text-align: justify;
text-indent: 1.5em;
margin: 0;
padding: 0 15px;
}

В правиле для абзацев мы задали выравнивание по всей выделенной площади (justify). Если этого не указать, то по умолчанию весь текст выровняется по левому краю.

Слово indent означает «красную строку». Размер её также указан в полтора размера шрифта.

#text a {
color: #396;
}

#text a:hover {
color: #f36;
border-bottom: #f36 dotted 1px;
}

Для неактивной ссылки мы задали салатовый цвет, а для активной красный, да ещё и с подчёркиванием точечной (dotted) полоской в 1 пиксель толщиной.

После блока text вставим следующий код:

<div id=»members» >
<h2>Сайты субъектов РФ</h2>

<ol>
<li><a href=»http://gu.nnov.ru/»>Нижегородская область</a></li>
<li><a href=»http://pgu.mos.ru/»>г. Москва</a></li>
<li><a href=»http://pgu.spb.ru/»>г.Санкт-Петербург</a></li>
<li><a href=» http://uslugi.tatar.ru/» >Республика Татарстан</a></li>
<li><a href=»http://pgu.admlr.lipetsk.ru»>Липецкая область</a></li>
</ol>

В коде тэг h2 — это заголовок второго уровня. Далее идут подряд два нумерованных списка.

Откроем лист стилей и запишем ещё ряд правил.

#members {
width: 300px;
height:190px;
float: right;
}

Мы задали всему блоку размер — задана не только ширина, но и высота. Если бы в нашем списке было бы меньше субъектов, то картинка волнистой линии “поджимала” бы список снизу, а нам надо, чтобы она была почти под срез картинки с летящим поросенком слева. Поэтому мы задали жёсткий размер как по ширине, так и по высоте. И обтекание справа. Ну, это уже понятно — список должен быть правее указанного рисунка.

#members h2 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}

Задано правило для заголовка второго уровня.

#members ol {
color: #999;
font-size: 120%;
margin: 10px;
float: left;
}

Для самого нумерованного списка с тэгом ol мы указали обтекание слева. То есть оба наших списка будут идти не в столбик, а рядом друг с другом.

#members li {
margin: 0 5px;
}

#members li a {
color: #0c0;
}

#members li a:hover {
color: #f00;
}

Все имена в списке оформлены в виде ссылок. Для них мы задали только цвета, без подчёркиваний. Но на страничке они всё равно подчёркиваются при наведении мышки. Здесь работает каскад — список-то лежит в зоне действия атрибута text и поэтому просто перенял от него часть правил.

Сохранимся и посмотрим, что получилось.

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.