Lt;head><title></head></title> — НЕПРАВИЛЬНО!
Тэг <body>
Вот мы и добрались до тЕльца нашей странички, которое и обзывается соответствующим тэгом <body>. Пока давайте допишем код страницы до конца (он ещё будет впоследствии дополнен):
<body>
</body>
</html>
Сохраним документ в отдельной папке. Сохраняем как index.html. Почему именно index? Любой сервер, при заходе пользователя по адресу www.piggs.ru станет сразу же искать у себя в заначке страницу с этим названием. Устроены они так. Индексная страница для них всегда является главной, то есть — стартовой.
CSS
В листе стилей код называют правилами. Каждое правило состоит из селектора(читай - атрибута) и объявления. Объявление, в свою очередь, состоит из свойстваи значения.
Рассмотрим пример:
p {color: #000;}
Данная запись означает, что все абзацы будут набраны чёрным шрифтом. Здесь “р” — это атрибут, а то, что находится в фигурных скобках и есть Объявление правила для этого атрибута. Слово colorявляется Свойством объявления, а “решётка” с тремя нулями — Значением. В данном случае значение записано в виде шестнадцатиричного числа, обозначающего цвет. Всем, кто пользуется Фотошопом это должно быть известно. Почему всего три нуля, ведь в данном обозначении должно быть шесть цифр (или букв)? Когда пары знаков одинаковы 00 00 00, то допускается писать сокращённо — 000. Все браузеры это понимают правильно.
Правило можно писать как угодно — хоть в строку, как у нас, хоть в столбик — это роли не играет. Важно только не забывать две вещи:
1. После каждого Свойства необходимо ставить двоеточие.
2. После каждого Значения — точку с запятой.
Если пропустить хотя бы в одном месте эти знаки, то IE и Firefox будут глючить, а Opera, возможно, и покажет всё без ошибок.
Сначала зададим общие правила для страницы:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
padding: 2% 0 0;
background: #fff;
color: #333;
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
}
#container {
width: 760px;
margin: 0 auto;
}
Поясним:
1. В первом правиле звёздочка означает не что иное, как всю страницу разом. Сама звёздочка — это не тэг и нигде потом в коде страницы не указывается. Браузеры прекрасно понимают её значение и применяют данные с ней правила ко всей странице. В правиле мы указали последовательно:
Отступы - 0,
Поля - 0,
Рамка - 0.
Это нужно для того, чтобы ни поля, ни отступы, ни рамки не появлялись там, где нам не нужно. Если этого специально не указывать, то например тот же IE (Internet Explorer) напихает этого добра куда ни попадя, испортив нам всю кухню. Уж лучше мы в следующих правилах сами добавим что нужно и где нужно. Значения указываются либо в процентах, либо в пикселах. Если стоит ноль, то единицу измерения не нужно указывать.
2. Следующим правилом мы задали для тела страницы следующие указания: поля — сверху 2%, с боков по нулям, снизу тоже ноль. Это значит, что наша страничка не будет лепиться к верхушке окна браузера, а отступит от него на 2% размера окна. Тут значения идут подряд без запятых и только после последнего ставится точка с запятой.
Вообще у любого прямоугольника есть 4 стороны. Кто не верит — бегом читать учебник геометрии. И значения для них задаются по часовой стрелке, начиная сверху, затем правое, низ и левое (для особо дотошных, кто никак не может определиться откуда начинать смотреть: мы смотрим на экран монитора в упор, право — это там где часики, а лево — где кнопка Пуск).
Так как у нас по бокам должно быть одинаковое расстояние от края экрана (в нашем случае ноль, то есть на всю ширину экрана), то и значений мы дали всего три — 2% 0 0. Кого смущают проценты, могу написать так: 15px 0 0. Это будет почти то же самое. Средняя цифра в этой записи — ноль — означает что она одинакова как для правой, так и для левой стороны.
Ещё раз:
а) 5px 10px 15px 20px; — сверху будет поле в 5 пикселов, справа 10, снизу 15, слева 20.
б) 5px 10px 15px; — сверху 5, с боков по 10, снизу 15.
в) 5px 10px; — сверху и снизу по 5, с боков по 10.
г) 5px; — со всех сторон по 5.
Пункты б), в) и г) здесь — это просто сокращенная запись. Думаю, принцип понятен.
Остальное несложно: фон белого цвета, цвет шрифта тёмно-серый (#333 или, если угодно #333333), ниже перечислены в порядке предпочтения используемые семейства шрифтов. Тут есть одно замечание: если имя шрифта состоит более чем из одного слова, то его нужно взять целиком в кавычки. Например:
"Times New Roman"
3. А вот в следующем правиле уже что-то новенькое — появилось незнакомое слово containerс решёткой (#). Данная решётка и означает уникальность атрибута. То есть тэг divс данным атрибутом будет использован только одинраз на странице.
Зачем вообще нужен контейнер? А затем, чтобы поместить нашу страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. Сие и означает, что при любом размере экрана наш сайт всегда будет строго по центру. Ширина страницы при этом равна 760 пикселям.
Возникает вопрос: а почему бы у тэга bodyне указать такую же ширину страницы и авто-выравнивание? Дело в том, что браузеры читают данный тег (body) по-своему и отдают под него ВСЮ видимую область экрана. Тоесть, если бы мы даже и захотели задать авто-выравнивание для body, но при этом ширину страницы задали в 760 пикселей, то страничка все равно «лепилась» бы к левому краю экрана. А нам это не нужно. Вот мы и приспособили эдакую “коробочку” под нашу страничку.
Предвосхищая вопрос о так называемой «резиновой» верстке, когда страница сама подстраивается под любой размер экрана (во всяком случае, это подразумевается, но работает не всегда корректно), то скажу прямо и откровенно: я против такого подхода. Во-первых, это блажь чистой воды Угодить всем просто невозможно. Кто-то уже приобрел монитор в 22 дуйма, а кто-то до сих пор щурится в 14”. И ежу понятно, что на большом мониторе все элементы страницы расползутся как тараканы, а на маленьком сгрудятся в непонятную и перемешанную кучку. Оно вам надо?
Во-вторых, в дизайне, как и в любом другом виде творчества, центральное положение занимает гармония, а не количество контента на 1 см2. В случае «резиновой» верстки мы получаем нарушение пропорций при изменении размеров монитора, и говорить о какой-то там гармонии уже не приходится. Это примерно то же самое, как смотреть широкоэкранный фильм в старом телевизоре.
Вообще в каскадных листах стилей принято некое упорядоченное расположение правил. Вначале указываются общие правила для всей страницы, а потом идут в той очерёдности, в которой появляются элементы на странице сверху вниз. Мы пока указали не все общие элементы. Нет заголовков, списков, ссылок (тэги h, ul, ol, a). Их мы добавим позже, а пока начнём уже хоть что-нибудь прицеплять весомое к нашей странице.
Из нарисованного в Фотошопе макета вырезем целиком шапку (её мы используем не как картинку, а как фон), оба рисунка с поросями, рисунки вензеля, зелёной линии внизу, фон полосы навигации (не весь, а только отрезанный кусочек 8х35 пикселей) и зеленой галки у списка новостей.
Итого у нас вышло 7 изображений. Их поместим в той же папке, где у нас лежит сама страничка и лист стилей. Тут необходимо сразу сделать небольшое замечание: мы с вами сейчас верстаем очень простую страницу, можно сказать — весь наш сайт и есть эта одна страница. Поэтому мы не мудрствуя лукаво положили все в одну корзинку, то есть папку. Но когда вы сами уже станете верстать свои многостраничные сайты, то распределяйте файлики по темам и по назначению. То есть, все картинки в одну отдельную папку Images, все статьи в папку Articles и т.д. Чтобы у вас всегда в папках был порядок. Иначе просто потом заплутаете.
Далее в листе стилей запишем правило для “шапки” (header):
#header {
background: url(header.jpg) no-repeat;
width: 760px;
height: 158px;
}
Здесь мы указали, что вся наша шапка залита фоном-картинкой с размерами 760х158 пикселей (такая у меня вышла при разрезании макета). url(header.jpg)— это ссылка на картинку. Важный момент(!) — почему ссылка выглядит как простое имя с расширением для картинки? Да потому, что сама картинка лежит в той же самой папке, где и лист стилей. Это так называемая относительная ссылка. Если бы была абсолютной, то выглядела бы примерно так:
url(http://www.мой-сайт.ru/header.jpg)
Запись no-repeatозначает, что картинка не должна повторяться. По-умолчанию браузеры любой фон множат на экране до бесконечности. Если их не урезонить вовремя. Вот этой записью мы как раз и прекратили его вольности. Попутно замечу, что если бы нам потребовалось размножить фон только по горизонтали (как мы и сделаем потом с фоном для менюшки), то вместо no-repeat мы должны будем записать repeat-x, а если только по вертикали, то соответственно repeat-y.
А теперь сохраним наш лист стилей в ту же самую папочку, где лежит Главная страница и картинки. Сохраняем таким же образом, как и раньше, только в имени добавляем расширение .css — style.css
Теперь мы снова откроем нашу Главную страницу. Между тегами <body></body>добавляем следующий код:
<div id="container">
<div id="header">
</div>
</div>
Сохраняемся. Открываем нашу страничку браузером и любуемся на ровно посерёдке отцентрованную шапку. Мы добавили в тело страницы нашу “коробочку” — контейнер, а уже в него положили шапку. Опять же, наблюдаем последовательность открытия и закрытия тэгов. Вначале мы открыли тэг контейнера <div id="container">следом открыли тэг шапки <div id="header">, далее тэг шапки закрывается </div>, и затем так же закрывается тэг контейнера </div>. То есть вложенность тэгов налицо. Понятное дело, что у закрывающих тэгов divне нужно снова приписывать атрибут.
div id— это и есть тэг с индивидуальным атрибутом, и idдает это явно понять. Атрибут же стоит после знака равенства и должен быть обязательно заключен в кавычки.
Теперь продолжим писать код для листа стилей. Открываем его и следом за правилом для шапки запишем правило для блока навигации:
#nav {
background: url(nav-bg.jpg) repeat-x;
color: #f00;
font-size: 120%;
font-weight: bold;
line-height: 1.8em;
text-align: center;
}
#nav ul {
list-style-type: none;
}
#nav li {
display: inline;
margin: 0 8px;
}
#nav li a {
color: #0c0;
}
#nav li a:hover {
color: #f00;
}
Панель навигации будет у нас одна — сразу под шапкой, горизонтальная (в подвале мы сделаем простое дублирование обычными ссылками). Для её реализации мы воспользуемся таким элементом как маркированный список.
Маркированный список— это список из нескольких пунктов, записанных в столбик, у которых слева взаместо порядковых чисел стоят маркеры(кружки, квадратики, и пр.)
Данный список в HTML обозначается тэгом ul. Элементы списка (а попросту говоря — строчки) обозначаются тэгом li. Выглядит это примерно так:
<ul>
<li>Утром надел трусы.</li>
<li>Не забыл про часы.</li>
<li>Снова не забыл.</li>
</ul>
Как видим, тэги имеют парные закрывающие тэги, и тэг liвложен в тэг ul.
Теперь вернёмся к нашему листу стилей. Блок навигации мы обозвали атрибутом nav. Вначале укажем общие настройки для него: бэкграунд — это картинка с именем nav-bg.jpgразмером 8х35 пикселей. Это обычный такой “столбик” с градиентом от белого к серому сверху вниз. Чтобы растянуть его по всей полосе навигации, мы указали в значении слово repeat-x, что означает “повторить по оси х”, то есть по горизонтали (об этом уже говорилось в чуть выше).
Далее мы указали цвет шрифта ярко-красного цвета #f00для активного раздела. Он у нас не будет ссылкой, а останется простым текстом (делать на Главной странице ссылку на самое себя — тавтология). Остальное в этом правиле несложно: размер шрифта, толщина, высота по вертикали (тут появилась новая единица измерения em, которая равна высоте прописной буквы выбранного шрифта. Значение 1.8emпоказывает, что шрифт увеличен на 1.8 высоты стандартной буквы), ну и выравнивание текста по центру.
Следующее правило указывает, что у нашего списка не должно быть никаких маркеров. Это задаётся значением none. И правда, зачем нам в меню лишние точки, кружочки или квадратики?
По-умолчанию строки списков всегда располагаются в столбик. Чтобы этого не происходило, мы далее указываем для строк списка расположение по горизонтали, то есть в линию — display: inline;
И еще добавляем отступы: сверху и снизу по нулям, с боков по 8 пикселей.
А теперь укажем, каким образом наши менюшки будут раегировать на наведение мышки. Понятное дело, что менюшки — это ссылки на другие разделы нашего сайта. А каким тэгом означаются ссылки? Правильно, тэгом a. Поэтому пропишем ещё пару правил для ссылок.
#nav li a {
color: #0c0;
}
#nav li a:hover {
color: #f00;
}
В первом мы обозначили цвет ссылки в спокойном состоянии, а во втором — в активном, то есть при наведении мыши.
Ну а теперь следом добавим вот такое правило:
a {
text-decoration: none;
}
Это общее для всех ссылок правило. Оно указывает, что все ссылки на странице по умолчанию не используют подчёркивание. Ну согласитесь, в меню навигации это не всегда выглядит красиво. А там, где нужно, мы это правило изменим.
Следом за шапкой добавим блок навигации. Находим в коде следующее место:
<div id="header">
</div>
и сразу же за ним запишем следующее:
<div id="nav">
<ul>
<li>Главная</li>
<li><a href="#">О нас</a></li>
<li><a href="#">О летучести</a></li>
<li><a href="#">О везучести</a></li>
<li><a href="#">Свинки-герои</a></li>
<li><a href="#">Подружиццо</a></li>
</ul>
</div>
Как видим — всё просто: наши разделы оформлены как пункты списка, и каждый пункт, кроме первого, является ссылкой. В данном случае вместо адреса несуществующих страниц мы просто вставили решётку (#), которая всегда возвращает нас на текущую страницу.
Теперь настала пора сказать пару слов о каскадности стиля. В 4-м уроке в правилах для блока навигации мы вначале указали настройки для всего блока #nav, затем для маркированного списка, обозначенного тэгом ul, далее показали правила для строк li… Каждое последующее правило получает “в наследство” характеристики предыдущего: от navк ul, от ulк li. Все вместе они являются вложенными в тэг контейнера и получают также от него часть правил (в частности, центрирование посередине экрана и заданную ширину в 760 пикселей). Это и является своеобразным каскадом.
Ну а теперь пора уже, наконец, наполнить нашу страницу чем-нибудь полезным, то есть Контентом(”…как много в этом слове…”). На макете во втором уроке видно, что полезная площадь страницы разделена на две функциональные области:
1. Основной текст (с картинками и пр.)
2. Блок новостей.
Обычно, такую вёрстку называют двухколоночной. Как сделать так, чтобы текст остался слева, а новости справа я расскажу чуть позднее, когда мы займёмся листом стилей. А пока давайте запишем на страничке сразу после этого места:
………
<li><a href="#">Свинки-герои</a></li>
<li><a href="#">Подружиццо</a></li>
</ul>
</div>
Следующий код:
<div id="text">
<img class="img1" src="pig1.jpg" alt="Летящий свин" />
<p>Летать всегда! Летать везде! Летать много, очень-очень много и всегда с улыбкой на морде лица — вот наше кредо!</p>
<p>Все пиггасы рано или поздно приходят к осмыслению никчемной жизни в грязной луже и подаются в лёччики-пилоты. Причём для летания вовсе не нужна никакая посторонняя техника. Только сильное и несокрушимое желание, а также упорство, спортивная злость и немного вредности. Оно того стоит! Уж поверьте.</p>
<p>Всего лишь после недели тренировок на брезентовом батуте и трёх зачотных прыжков с крыши сарая, адепт получает звание летуна-прыгуна. При этом заработанные синяки, ссадины и шишки также засчитываются в +</p>
<img class="venzel" src="venzel.gif" alt="" />
<img class="img2" src="pig2.jpg" alt="Пиггсы на проводе" />
</div>
Впечатав приведённый выше код и сохранившись, откроем страницу в браузере и посмотрим, что получилось. Пока что фигня получилась. Текст появился, но всё наперекосяк. Это мы поправим в листе стилей, а пока давайте немного разберём, что же это мы намудрили.
Тэг divс атрибутом text— это и есть область полезного содержимого странички, иначе называемое контентом. Как и в любом тексте тут мы видим абзацы, обрамленные тэгами р, а также несколько изображений (тэги img).
С тэгами абзаца всё понятно: открылся один, за ним кусок текста, закрылся; открылся следующий, за ним опять кусок текста, закрылся, и т.д.
А вот у тэгов изображений появилось нечто новое — это слово class. Если кто помнит, то оно означает многоразовость использования данного атрибута (в противовес индивидуальному id). Кроме того, classможно использовать и вовсе без тэга div! Что мы и сделали. У тэгов изображения мы просто вписали это слово сразу же за самим тэгом.
Поясним на примере:
Обычно строку для вставки изображения записывают так:
<img src="папка_где_она_лежит/picture.jpg" alt="" />
Мы же записали это следующим образом:
<img class="img1" src="папка_где_она_лежит/picture.jpg" alt="" />
Мы просто добавили к тэгу новый атрибут classс именем img1, для которого и укажем в листе стилей всё что пожелаем. Это очень удобная запись. Можно, конечно же, влепить сюда и обычный div, но это уже будет не просто тавтология, а прям графоманство какое-то.
Открываем лист стилей. Мы закончили на правиле для всех ссылок страницы. Теперь нам надо красиво оформить основное содержимое страницы. Его мы обзовём атрибутом text.
Запишем далее в листе стилей CSS:
#text {
width: 545px;
font-size: .8em;
color: #333;
margin: 10px auto;
float: left;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: 0;
padding: 0 15px;
}
#text a {
color: #396;
}
#text a:hover {
color: #f36;
border-bottom: #f36 dotted 1px;
}
В первом правиле мы указали, что ширина у области текста будет равна 545 пикселям. Размер шрифта 0.8em (в данном правиле ноль можно не писать, .8em — обозначает тоже самое). С отступами понятно — верх и низ по 10 пикселей, по бокам на автомате. А вот последняя строчка как раз и задаёт местоположение нашего блока текста ни где попало, а с левой стороны. Слово floatпереводится как “обтекание“. Но тут есть одна фишка. Читаем: “обтекание — слева”. Но ведь это сам текст находится слева! А обтекает его всё остальное справа. В этом есть некая путаница. Чтобы не заплутать, просто запомните: left— сам объект слева, а течёт всё правее. И наоборот, right— объект справа, а течёт всё левее.
Для чего это нужно? Скопировав (а еще лучше — набрав ручками) приведённые выше правила в свой лист стилей и сохранившись, посмотрите, что получилось — текст выровнялся по левому краю странички, оставив справа пустое место. В это пустое место мы потом и вставим блок новостей, присвоив ему в листе стилей значение rightдля атрибута float.
В следующем правиле мы для абзацев нашего текста задали выравнивание по всей выделенной площади. Слово justifyкак раз это и означает. Если этого не указать, то по умолчанию весь текст выровняется по левому краю. В англоязычных странах это всегда было нормой, и норма эта исходила из размеров английских слов и букв. Но в кириллице такое выравнивание смотрится неаккуратно — весь правый край текста становится будто рваный. Поэтому мы выровняли его по обоим краям. Это не выравнивание по центру! Это скорее равномерное распределение слов в строке.
Слово indentозначает не что иное как обычную “красную строку“. Размер её также указан в полтора размера шрифта.
Ссылки. Для неактивной задали цвет эдакий салатовый, а для активной красный, да ещё и с подчёркиванием точечной (dotted) полоской в 1 пиксель толщиной.
А теперь давайте укажем правила для наших картинок. Запишем в листе стилей:
.img1 {
width: 200px;
height: 287px;
margin: 0 0 0 15px;
float:right;
}
.img2 {
width: 200px;
height: 200px;
margin: 10px 10px 0 15px;
float: left;
}
.venzel {
width: 300px;
height: 23px;
margin: 10px 10px 0 15px;
float: left;}
Здесь также нет ничего сложного. Каждую картинку мы обозвали своим атрибутом img1, img2, venzel, указав в каждом правиле размеры картинок и отступы для них. Вообще отступы и поля проще всего подбирать опытным путём. То есть вначале просто без них кидаем блоки или картинки на страницу, а потом смотрим, куда все это оно сползло и чуток корректируем, добавляя где надо и убавляя, где не надо. Кстати, значения можно указывать и с минусом. Например -10px. И картинка сдвинется в противоположную сторону, хоть даже и за край экрана.
Каждой картинке мы задали обтекание в соответствии с её расположением на странице. Первая картинка будет справа от текста, вторая — слева, и вензель тоже слева.
И ещё одна вещь. Как видите, данные правила начинаются не с решётки #, а с точки. Это и есть признак того, что правило относится не к id, а к class.
Теперь сохраняемся и любуемся на то, что у нас получилось. Если всё выполнили правильно, то на страничке будет красиво выровненный текст с рисунками свинов-летунов и завитушкой-вензелем под текстом.
В блоке текста мы разместим список новых участников. Вообще за это отвечает какой-нибудь php-скрипт, но так как мы делаем простую статичную страницу, то оформим эту штуку обычным списком. Только на этот раз не маркированным, а нумерованным. Задаётся такой список тэгом ol.
Откроем в текстовом редакторе нашу страничку и сразу после вот этого места:
……………..
<img class="venzel" src="venzel.gif" alt="" />
<img class="img2" src="pig2.jpg" alt="Пиггсы на проводе" />
вставим следующий кусок:
<div id="members">
<h2>Список новых учаснегов:</h2>
<ol>
<li><a href="#">Рыжий</a></li>
<li><a href="#">Брат Корнелий</a></li>
<li><a href="#">Муха</a></li>
<li><a href="#">Пигфлай</a></li>
<li><a href="#">Нигга Боб</a></li>
<li><a href="#">Помидорка</a></li>
</ol>
<ol>
<li><a href="#">Косолапыч</a></li>
<l><a href="#">Тушка</a></li>
<li><a href="#">Свин Полезный</a></li>
<li><a href="#">Сало</a></li>
<li><a href="#">Кнопка</a></li>
<li><a href="#">Васёк</a></li>
</ol>
</div>
<img class="line" src="line.gif" alt="" />
Что мы тут видим? Появился новый атрибут members. Так мы обозвали наш список. Тэг h2— это заголовок второго уровня. Первый уровень, как леххко догадаться, это чаще всего название сайта или страницы.
Далее у нас идут подряд аж целых два нумерованных списка. Зачем два? На макете мы разместили новых участников в две колонки с вертикальной нумерацией в каждой. Можно было бы, конечно, занести всех в один общий список, сделать ширину одной ячейки ровно вполовину отведённого под список места, и тогда ячейки автоматом переносились бы на новую строчку. Но тогда нумерация выглядела бы так:
1 2
3 4
5 6
и так далее.
Каждому в листе стилей задали обтекание слева. Об этом чуть позднее. Сразу после списков мы положили картинку волнистой линии.
Ну, а теперь откроем наш лист стилей и запишем ещё кусочек красивых правил.
#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;
}
#members li {
margin: 0 5px;
}
#members li a {
color: #0c0;
}
#members li a:hover {
color: #f00;
}
.line {
width: 304px;
height: 13px;
float: right;
}
Расшифруем. Для начала мы задали всему блоку размер. Причём на этот раз не только ширину, но и высоту. Для чего это нужно? Если, например, в нашем списке было бы чуток меньше народу, то картинка волнистой линии “поджимала” бы список снизу, а нам надо, чтобы она была почти под срез картинки с летящим поросенком слева. Поэтому мы задали жёсткий размер как по ширине, так и по высоте. И обтекание справа. Ну, это уже понятно — список должен быть правее указанного рисунка.
Далее задали правило для заголовка второго уровня. Здесь нам уже всё знакомо.
Для самого нумерованного списка с тэгом olмы указали обтекание слева. То есть оба наших списка (помним, что в коде страницы их два подряд) будут идти не в столбик, а один подле другого рядышком оба-два.
Все имена в списке оформлены в виде ссылок (типо на странички профиля участников). Для них мы задали только цвета, без всяких подчёркиваний. Но почему-то на страничке они всё равно подчёркиваются при наведении мышки, да ещё точечной линией! Вот тут как раз и сработал так называемый каскад— список-то лежит в зоне действия атрибута textи поэтому просто перенял от него часть правил.
Последнее правило здесь для рисунка линии. Оно так же, как и предыдущие картинки, оформлено классом.
Открываем нашу страничку index.html. Находим вот это место:
……….
<li><a href="#">Васёк</a></li>
</ol>
</div>
<img class="line" src="line.gif" alt="" />
и следом сразу вставляем вот этот кусочек:
</div>
<div id="news">
<h3>Самые распоследние новости:</h3>
<ul>
<li>Всю прошедшую неделю лил жуткий дождь, и полёты временно приостановились. Самые безбашенные пиггасы, однако, всё равно кучковались стаями на проводах местной радиолинии и дружно создавали помехи. Малаццы!</li>
<li>Пиггас Хмурый Пятак снова хмурый. Обещал всех урыть. Злой сильно.</li>
<li>У нашего друга Боббса завтра ДР! Поздравления и подарочки просил вручать возле новой будки и непременно на виду у соседского пса Мухомора, чтобы тому завидно стало. Пляски намечаются до самого утра. При наличии на небе луны — будет весело.</li>
</ul>
</div>
<div class="clearfloat"></div>
Что мы тут видим? Во-первых, закрывающий тэг </div>, который показывает, что область основного текста закончилась. Далее идёт маркированный список новостей с заголовком 3-го уровня (h3).
В самом низу мы добавили “очистку обтекания” — clearfloat(для неё также в листе стилей пропишем свои правила, а именно очистку с обоих сторон). Для чего это? Вообще наша вёрстка является “плавающей“. Вон сколько у нас уже обтекаемых элементов. При этом разные браузеры по-разному воспроизводят такую вёрстку (о том, что IE по-своему “видит” поля и отступы уж и не говорю). В Opera и Firefox можно было бы обойтись и без очистки и сразу ниже писать код футера. Но в IE в таком случае появляются странные подёргивания фона у футера при наведении на ссылки мышки. Браузер словно хочет подпрыгнуть и заполнить все пустующие места какие есть. Поэтому мы просто добавим эту строчку и не станем заморачиваться.
А теперь открываем наш лист стилей и допишем следующий код:
#news {
background: #ffc;
width: 185px;
color: #665;
margin: 10px 5px;
float: right;
}
#news h3 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#news ul {
list-style: url(marker.jpg) inside;
}
#news li {
font-size: 75%;
padding: 5px 10px;
}
Здесь мы для начала поменяли фон для блока новостей, чтобы визуально отделить колонку от основного содержимого. Затем задали ширину блока, цвет для шрифта и обтекание справа. С заголовком получилось хитро. Если вернуться чуток назад, то можно заметить, что у заголовка 2-го уровня (у списка учаснегов), также задан размер шрифта в 120%.
Вообще по-умолчанию браузеры сами определяют размеры для заголовков в зависимости от их ранга. То есть по логике вещей, заголовок 3-го уровня должен быть мельче 2-го. А у нас наоборот! Это произошло потому, что заголовок списка учаснегов находится в блоке основного текста, для которого мы задали размер всего шрифта в 0.8em.
Следующим правилом мы задали для списка стиль маркеров. По-умолчанию любой браузер отображает маркеры в виде чёрных кружков. Но можно задать и другое отображение — окружностей, квадратов, без маркеров, или вообще свой собственноручно нарисованный маркер. Как раз так мы и поступили. Нарисовали симпатишную зелёную галку с размерами 14х17 пикселей и указали в стиле ссылку на неё — url(marker.jpg). Следом приписали слово inside. Что это значит? Маркеры по-умолчанию не входят в сам блок текста. Когда мы задаём поля для текста, то маркеры не слушаются и вылезают за края. Это не всегда есть гут. Поэтому мы принудительно указали им быть inside, то есть внутри колонки с текстом.
Подвал сайта
Подвал, он же “футер” — это весьма важная часть сайта, хотя и мало кто туда добирается, особенно при очень длинных страницах. Там обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация. Очень часто можно наблюдать такую картину: верхнее горизонтальное меню под “шапкой” практически без изменений дублируется в левой колонке. Выглядит это, по меньшей мере, бестолково. Уж лучше продублировать основные разделы сайта в подвале. Пользы будет несомненно больше.
Футер не должен доминировать над шапкой, но и не должен теряться, делая страницу неуравновешенной. Мы сделаем его немного контрастным по цвету, но небольшой высоты.
Запишем в коде страницы сразу после этого места:
……………..