Создание сайта. Блочная верстка сайта | Урок 5

16.12.2007 Верстка сайта 3930 2 комментария

Блочная верстка сайта

Напоминаю, что это цикл статей, посвященный блочной верстке сайтов. Добро пожаловать!

Привет, друзья! Сегодня уже пятый урок, по основам блочной верстки веб-сайтов. А всего их будет девять. Вэлкам! Уроки на самом деле совсем не сложные, освоить их может любой человек, никогда ранее не занимавшийся сайтами вообще. И не только освоить, но создать свой сайт самостоятельно. А это дорогого стоит, уж поверьте.

Сегодня мы продолжим верстать нашу Главную страницу. В этом уроке будет мнооого кода… Самое главное — записывайте код очень внимательно. Порой нехватка всего лишь одного единственного знака может порушить всю верстку. Так что бдите!

Что у нас уже есть? Контейнер, в котором лежит шапка. Следом за шапкой добавим блок навигации. Находим в коде следующее место:

<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>

Как видим — всё просто: наши разделы оформлены, как пункты списка, и каждый пункт, кроме первого, является ссылкой. В данном случае вместо адреса несуществующих страниц мы просто вставили решётку (#), которая всегда возвращает нас на текущую страницу.

О каскадности файла стилей CSS

Теперь настала пора сказать пару слов о каскадности стилей. В правилах для блока навигации мы вначале указали настройки для всего блока, затем для маркированного списка, обозначенного тэгом 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 — это и есть область полезного содержимого странички, иначе называемое контентом. Как и в любом тексте тут мы видим абзацы, обрамленные тэгами p, а также несколько изображений (тэги img).

С тэгами абзаца всё понятно: открылся один, за ним кусок текста, закрылся; открылся следующий, за ним опять кусок текста, закрылся, и т.д.

Что такое class

А вот у тэгов изображений появилось нечто новое — это слово class. Если кто помнит, то оно означает многоразовость использования данного атрибута, в противовес индивидуальному id. Кроме того, class можно использовать и вовсе без тэга div! Что мы и сделали. У тэгов изображения мы просто вписали это слово сразу же за самим тэгом.

Поясним на примере. Обычно строку для вставки изображения записывают так:

<img src="папка_где_она_лежит/picture.jpg" alt="" />

Мы же записали это следующим образом:

<img class="img1" src="папка_где_она_лежит/picture.jpg" alt="" />

Так мы добавили к тэгу новый атрибут с именем класса img1, для которого и укажем в листе стилей всё что пожелаем. Это очень удобная запись. Можно, конечно же, влепить сюда и обычный div, но это уже будет не просто тавтология, а прям графоманство какое-то.

Код — вещь красивая!

Еще раз для тех кто в танке с заваренной башней:
Атрибут можно и НУЖНО прицеплять к существующему уже тэгу, будь то тэг абзаца, рисунка, списка и т.п. Не надо перенасыщать страницу div-ами!

Окей! Хватит на сегодня. Хорошего понемногу. Продолжение следует!

Автор: Игорь Квентор
www.websovet.com