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

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

<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, но это уже будет не просто тавтология, а прям графоманство какое-то.

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

Еще раз для тех кто в танке с заваренной башней:

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

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


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

Комментарии

Реклама
Siteblogger.ru - как создать и раскрутить свой сайт