Блочная верстка | Урок 4

Продолжаем разговор за CSS. Вообще в каскадных листах стилей принято некое упорядоченное расположение правил. Вначале указываются общие правила для всей страницы, а потом идут в той очерёдности, в которой появляются элементы на странице сверху вниз. Мы пока указали не все

общие элементы. Нет заголовков, списков, ссылок (тэги 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>ul.

Как видим, тэги имеют парные закрывающие тэги, и тэг li вложен в тэг

Теперь вернёмся к нашему листу стилей. Блок навигации мы обозвали атрибутом 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;}

Это общее для всех ссылок правило. Оно указывает, что все ссылки на странице по умолчанию не используют подчёркивание. Ну согласитесь, в меню навигации это не всегда выглядит красиво. А там, где нужно, мы это правило изменим.

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


Защитный код
Обновить

Комментарии

Реклама