Блочная верстка | Урок 1 · Websovet | Полезные советы по созданию веб сайтов

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

Дата: 16.12.2007 | Автор: Игорь Квентор | Рубрика: Верстка |

Данный цикл статей-уроков был опубликован в моем блоге Вебмастеринг. Решил перенести его сюда с некоторыми поправками и уточнениями.

Итак, приступим:

Что есть такое блочная верстка и с чем ее едят? Ранее сайты верстали при помощи таблиц. Каждый элемент страницы — заголовок, текст, картинка — располагался в собственной ячейке, ячейки кучно роились в других, более крупных ячейках, те в свою очередь лежали в главной ячейке, сиречь самой странице сайта. Табличная верстка сейчас уже морально устарела, хотя очень многие вебмастера продолжают ее использовать. Большим минусом ее является тяжеловесный код. Ведь каждую мало-мальскую ячейку нужно обозначить определенными тэгами. Поэтому более не станем говорить за таблицы, а таки плавно перейдем к блочной верстке.

Для начала немного теории. Блок — это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы. Содержимым блока может быть что угодно — кусок текста, картинка, список, форма для заполнения, меню навигации и т.п.

Рамка (border) — это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).
Поля (padding) — отделяют содержимое блока от его рамки, чтобы текст, например, не был “впритык” к стенкам блока.
Отступы (margin) — это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блоки, как и таблицы — это элементы всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся такой параметр как “обтекание” (float). Но об этом чуть позже.

Тэг — это особая конструкция языка HTML. Различают открывающий и закрывающий тэги. В самом простом случае тэг — это как деталь детского конструктора, которая имеет своё строгое предназначение: планка — значит планка, колесо — значит колесо и ничто иное. К примеру тэг абзаца:

<p>Текст абзаца.</p>

всегда обозначается буквой “p” и никак иначе.
Тэги всегда заключены в угловые скобки. Как видно из примера, наличествуют как открывающий тэг, так и закрывающий. У последнего перед именем добавлен “слэш” — косая черта, наклоненная вправо.
Не все тэги имеют закрывающую пару. Например тэг изображения img его не имеет вовсе. Но чтобы соответствовать современным стандартам и требованиям спецификации XHTML, ему все-таки добавляют перед закрывающей угловой скобкой пробел со слэшем. Выглядит это примерно так:

<img src="images/risunok.jpg" mce_src="images/risunok.jpg" alt="" />

Тэг div

В отличии от строгих привязок стандартных HTML-тэгов к своему содержимому (”р” — к абзацам, “а” — к ссылкам, “img” — к изображениям), тэг div является по-сути нейтральным. То есть ему всё равно что содержать, хоть всё разом. Его используют для задания функциональных областей на странице, таких как: “шапка” (header), блок навигации, блок основного содержимого, “футер” (footer) или подвал по-нашему.
У данного тэга, как и у любого другого, имеются свои собственные атрибуты.

Атрибут — описательная характеристика тэга. То есть что он может делать и каким образом. Например, опять же возьмём тэг изображения:

<img src="images/risunok.jpg" mce_src="images/risunok.jpg" width="200px" height="50px" alt="Рисунок меня, где я кормлю собаку, а она кусает меня зачем-то" />

В данном случае src, width, height, alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны значения атрибутов. Расшифровать такую запись несложно. Тэг указывает, что в данном месте страницы нужно прилепить изображение risunok.jpg из папки images, шириной 200 пикселей, высотой 50 пикселей. И + альтернативный текст, который всплывает на страничке при наведении мышки на рисунок. Это не блажь, а тоже необходимое требование. Не все пользователи сети обладают хорошим зрением. Кто-то пользуется программой распознавания и чтения текста. А кто-то просто выключает показ картинок в браузере. Вот для них и существуют альтернативные подписи к рисункам. Если же их нет смысла подписывать (например маркер списка или стрелка какая), то у атрибута alt оставляют пустое место — alt=”".

Итак, атибуты тэга div. Их есть всего два:

id — атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например “header” (про кавычки не забываем), или “footer“. Таким образом мы сможем задать затем в листе стилей для тэга div с атрибутом id и значением “header” (шапка) одни настройки, а для подвала “footer” совсем другие, и браузер верно распознает, что вот этот абзац, обозначенный тэгом р относится к “шапке” и будет набран крупным и красным шрифтом, а вот этот к “подвалу” и будет мелким и серым. И никакой путаницы!

class — атрибут, позволяющий одно и то же значение придать нескольким элементам. Например всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использовать.

Вебсовет

1 2 3 4 5 6 7 8 9

Подпишитесь на RSS

Комментарии (51) на запись “Блочная верстка | Урок 1”

Z-Den 23.12.2007 05:47

Автор пишет, что у тэга div существует всего два атрибута. Но это не так. В действительно у этого тэга существует намного больше атрибутов:
- id, class (идентификаторы в пределах документа);
- lang (информация о языке), dir (направление текста);
- title (заголовок элемента);
- style (встроенная информация о стиле information);
- align (выравнивание);
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события).
Kventor 23.12.2007 16:56

Спасибо за комментарий! Если честно, то в такие подробности не вникал, ибо не использую сам. Хотя вот style - как встроенный кусочек правил иногда прописываю, если нет нужды использовать часто.
seo специалист 01.05.2008 15:47

C нетерпением жду вторую книгу! Спасибо
Анатолий 17.10.2008 14:07

Ошибка перевода - padding отступ
margin - поле
(от латинского marginal - заметки на полях)
Та же ошибка у Влада Мержевича
И кочует эта ошибка с сайта на сайт..
Игорь Квентор 17.10.2008 15:02

:) Это если дословный перевод. К тому же только слова margin, которое и правда означает поле, но также еще и “край, граница”. Padding же переводится как “набивка, заполнение”.
Чтобы не путаться, нужно запомнить, что margin - это внешнее, padding - внутреннее.
Zodios 26.10.2008 12:30

Интересный у тебя блог, добавил в ридер. Правда заметка похожа на раздел из книги Энди Бадда “Мастерсткая css” хотя, может мне и показалось)
Alexander 31.01.2009 15:29

Здравствуйте, Игорь! Поскажите, плс, как Вы создали квадратики-ссылки на конкретные уроки этого раздела. Из исходного кода непонятно…
1
Буду очень благодарен!
Игорь Квентор 31.01.2009 21:50

Здравствуйте, Александр. Эта навигация прописана обыкновенными ссылками. Делается просто: в конце поста добавляете блок со списком ссылок, исключив текущий пост. Например, есть статья, разбитая на 3 отдельныых поста. В первом посте в конце добавляем div:

<div class="navi">1 <a href="ссылка на пост 2">2</a> <a href="ссылка на пост 3">3</a></div>

Во втором посте будет уже такой код:

<div class="navi"><a href="ссылка на пост 1">1</a> 2 <a href="ссылка на пост 3">3</a></div>

и так далее. В листе стилей CSS соответственно создаете для класса navi необходимый набор правил - те же квадратики.
Alexander 01.02.2009 20:09

Самое интересное, что пришлось написать такое нагромождение кода для класса navi, что никак не вписывается в один блок , Кстати, в исходнм коде пишется для дескриптора . Если не коммерческая информация, опишите, плс, сам набор правил. Я считаю, это оригинальным решением написания меню для размещения новостей одной рубрики.
Игорь Квентор 02.02.2009 00:26

У меня этот блок идет с классом str. Соответственно, набор правил такой:

.str a {
color: #3589FC;
padding: 5px 8px;
border: #999 solid 1px;
text-decoration: none;
}

.str a:hover {
color: #fff;
background: #333;
}

Все просто :)
Alexander 02.02.2009 13:34

Отлично! Все получилось! Спасибо за безценный сайт.Удачи!
ps: решение оригинальное, нигде больше не встречал…
Игорь Квентор 02.02.2009 21:18

:) Спасибо! И вам тоже успехов!
Николай 09.02.2009 19:09

Привет Игорь.Скачал,прочел Вашу книгу и приступил к верстке.Дошел до шапки и хотел просмотреть(как Вы советуете)как все отцентрировано в браузере,но…одна лишь белая страница.Сверху название присутствует-то-есть тэг TITLE прочитан,а самой шапки нет.На диске D: я создал папку”Мой сайт”-в ней еще 4 папки:image.jpg,Главная,Стили,Статьи.В “Главной” я сохранил страничку index.html,а шапку в папке image.jpg,а css-в папке Стили”.
Ссылка у меня выглядит так:
url(D:Мой сайт/image.jpg/shapka.jpg)
Подскажите в чем проблема может заключаться?
И играют ли роль пробелы в таблице стилей после двуеточий?
Спасибо.Очень надеюсь на ответ.Николай.
Игорь Квентор 09.02.2009 21:13

Здравствуйте, Николай. Дело в том, что у вас папка названа именем изображения. Расширение .jpg может быть только у картинки, но не у папки. Назовите папку просто image. И соответственно путь к картинке будет:
url(D:Мой сайт/image/shapka.jpg)
Николай 09.02.2009 23:56

Спасибо,Игорь за ответ.
Папку переименовал-то-есть убрал расширение.jpg,но
проблему это не решило-тот же белый экран в IE и Мо-
зиле,а Опера в левом верхнем уголке еще продублировала содержимое тэга TITLE.
Где же здесь “заковыка”?Бог его знает.
Может что-то еще влияет на данную проблему?
Намекните,пожалуйста.
Спасибо.С ув. Николай.
Игорь Квентор 10.02.2009 00:05

Сложно сказать, не видя прэдмет. Пришлите мне в мыло архив с папками и файлами. Тогда смогу подсказать.
Дмитрий 16.02.2009 02:22

Здравствуйте Игорь. Прочитал Вашу книгу - очень понравилась! Очень хорошо объясняете. Но есть одна проблема. Когда Вы выравниваете “div id=”container”
по центру: “margin: 0 auto;”, то Firefox его нормально выравнивает, а IE - нет. Если можно, то расскажите, как это исправить. Спасибо.
Дмитрий 16.02.2009 02:25

хотя я тут прикинул, что можно же указать отступ слева просто в процентах или пикселях. Есть более правильный метод?
Игорь Квентор 16.02.2009 09:43

Здравствуйте, Дмитрий. Если в ИЕ страница отображается неправильно, то это, скорее всего, где-то ошибка затесалась. Опера и Фокс прощают некоторые ошибки, но не ИЕ.
Делать большой отступ слева - это неправильно. На больших мониторах все равно центр не поймаешь, а на маленьких страница уползет вправо за край экрана, а слева будет пусто.
Нужно искать ошибку :)
bastti 21.02.2009 00:45

Аффтару большой респект и уважуха, спасибки, спасибки, спасибки, спасибки :)
Игорь Квентор 21.02.2009 11:11

И вам всего и с горкой! :)
Alex 27.02.2009 01:27

Здравствуйте Игорь. Прочитал Вашу книгу - очень понравилась! спасибо!вот возник один вопрос:я увидел у вас календарь-красиво сделать сам календарь я могу в html но как потом чтоб это работало
он-лаин не знаю не могу наити мозет быть подскажете если не трудно,а вообще все написано очень доступно много что можно поучить-спасибо
Игорь Квентор 27.02.2009 09:53

Здравствуйте, Alex. Календарик сей - это работа самого движка. Я лишь прописал в нужном месте код вывода. А как он формируется - даже не знаю, честно. Все, что я могу с ним сделать, это задать внешнее оформление. Если вы используете тоже Вордпресс, то для вывода календаря достаточно добавить там, где вы его хотите видеть, вот такой код:
<?php get_calendar(); ?>
Айрат 10.03.2009 15:46

Здравствуйте,Игорь,очень понравилось ваше творение,я воодушевился и принялся творить,только у меня таже проблема,что и у Николая в 15 сообщении,такое ощущение,что папка style.css не находится html’ной страничкой,поудалял,буду делать заново,если опять получится таже петрушка-Вы не взгляните на мои ошибки?
с/у Айрат
Игорь Квентор 10.03.2009 20:36

Здравствуйте, Айрат! Да, если что - присылайте в мыло, посмотрю.
Айрат 10.03.2009 21:25

Спасибо за отзывчивость и оперативность,и за простое и понятное изложение.
Reason 17.03.2009 14:39

Спасибо за книгу как раз сейчас изучаю блочную верстку.
Евгений 07.04.2009 15:04

Здравствуйте Игорь, ваша книга очень хорошая и понятная. Я сделал сайт, на основе примера сайта из вашей книги. И вот у меня возник такой вопрос:
Как сделать так, чтобы footer не приближался к menu и header-у ЕСЛИ в текстовом блоке мало текста?
то есть, КАК сделать область для текста фиксированной(например 300 пикселей), но при этом, при наличии большого текста, этот самый текст не наезжал на footer?

Надеюсь, что я понятно описал свою проблему :).
Айрат 07.04.2009 17:13

решил вышеуказанную проблему,дело в том,что при сохранении документа нужно указывать-”всё документы” :) кто не понял-пишите на мыло - постараюсь объяснить подробнее
Игорь Квентор 07.04.2009 17:18

Да, Евгений, все понятно. Вот здесь я рассказал о способе как это дело поправить:
http://www.websovet.com/kak-prizhat-podval-k-nizu-ekrana
Евгений 07.04.2009 19:52

Спасибо за помощь, Игорь.

Еще вопрос: а когда будет продолжение книги “Блочная верстка веб сайта”? (хотя бы приблизительно)
Игорь Квентор 08.04.2009 10:30

Если честно, то пока не знаю даже приблизительно :) С недавних пор я стал 100% фрилансером, поэтому занят сейчас исключительно на этой ниве.
kavzik 08.05.2009 19:40

у меня возник вопросик может и не потеме. Но все же я не знаю куда писать
вобщем после добавления <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”?> у меня перестал работать javascript, какой !DOCTYPE поставить что бы он заработал?
Ольга 22.05.2009 14:25

Проблема, как у Дмитрия (17) - выравнивание container посередине в IE - решается, если в начале документа определен доктайп

С чем это связано? Почему нельзя без использования доктайп?
Игорь Квентор 22.05.2009 20:14

Ольга, вы сами ответили на свой вопрос :) Доктип браузеры учитывают. Более того, есть масса ситуаций, когда верстка, несоответствующая доктипу, плывет в разные стороны.
Айрат 22.05.2009 20:15

ооо,спасибо за замечание
Ольга 24.05.2009 14:46

Спасибо, Игорь! Хотелось бы про доктайпы более подробно изучить.. Потомучто, были подобные проблемы, как у kavzik(33): при определении доктайп начинались проблемы с подключенным файлом скрипта.

Не посоветуете ли какой-нибудь материалл на эту тему? Статью, книгу и пр.
Игорь 12.08.2009 21:31

А стоит ли вписывать все в “wrap”???

Заголовок страницы

Раздел 1
Раздел 2

Колонка 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit…

Колонка 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit…

Ссылка 1
Ссылка 2

Подвал
Игорь Квентор 12.08.2009 22:00

Тезка, поясните, что вы имеете в виду? В данном посте нет ни слова о wrap
loc_host 18.08.2009 00:20

Спасибо, всё доступно и понятно объясняете.
Мне как зелёному новичку в веб-деве, статейка очень понравилась.
Будим значит учиться! (=
Игорь 24.08.2009 17:47

А можно ли записать так: float: center???
В случае если на одной высоте необходимо поместить три блока???
Игорь Квентор 25.08.2009 10:56

Нет, float: center; не существует. Как размещать три блока на одной высоте я рассказывал здесь:
http://www.websovet.com/razmeshhenie-trex-blokov-kolonok-na-stranice
Александр 08.10.2009 12:40

Игорь приветствую,
скачал Вашу книгу “Блочная верстка веб-сайта” и сверстал страничку про Пиггасов. Все понятно хорошо написано. Но есть одна проблема в ИЕ страница смотрится как и положено, все блоки на местах. А вот в ФФ и Опере блок “Самые последние новости:” залез под “Список новых учаснегов:” растянувшись на всю ширину сверстанной странички. В чем же проблема понять не могу. Буду весьма признателен если подскажете в чем же проблема. Спасибо
Игорь Квентор 12.10.2009 14:52

Здравствуйте, Алекссандр! Нужно посмотреть страницу. Заранее подсказать в чем причина я не могу, пока ее не увижу.
WebNata 25.10.2009 23:48

Статья интересная… А вот еще кому интересно по теме: ссылка
Рассказывается о приемах блочной верстки. Подробно и с примерами=)))
Marina 27.11.2009 18:14

Игорь, здравствуйте!
А не могли бы Вы посоветовать, какие-нибудь программы для создания сайтов? (часто пользуюсь pspad редактором, у меня есть adobe dreamweaver, но может есть совсем простенькие?)
Игорь Квентор 28.11.2009 12:48

Здравствуйте, Марина! Посоветовать могу лишь то, чем сам пользуюсь постоянно. Это уже упомянутый вами PSPad, потом классика жанра - Photoshop и, наконец, домашний сервер по имени Денвер. Больше мне ничего не нужно.
Владимир 30.11.2009 12:27

Приветствую Игорь!
Очень рад что есть такие полезные статьи. По Вашей книге я сделал веб страницу, но у меня возник один вопрос: почему-то вся страница, кроме headera, расположилась вне #containerа. Подскажите в чем причина?
Игорь Квентор 30.11.2009 17:12

Здравствуйте, Владимир! И вам спасибо на добром слове!
По поводу расползания страницы - проверьте все ли закрывающие “дивы” </div> на своих местах