“Блочная верстка веб-сайта” моя первая книга для изучающих HTML и CSS. Просто и доступно о блочной верстке и не только. Если вы хотите быстро разобраться в основах верстки веб-сайтов, то данная книга будет в самый раз.Данный цикл статей-уроков был опубликован в моем блоге Вебмастеринг. Решил перенести его сюда с некоторыми поправками и уточнениями.
Итак, приступим:
Что есть такое блочная верстка и с чем ее едят? Ранее сайты верстали при помощи таблиц. Каждый элемент страницы — заголовок, текст, картинка — располагался в собственной ячейке, ячейки кучно роились в других, более крупных ячейках, те в свою очередь лежали в главной ячейке, сиречь самой странице сайта. Табличная верстка сейчас уже морально устарела, хотя очень многие вебмастера продолжают ее использовать. Большим минусом ее является тяжеловесный код. Ведь каждую мало-мальскую ячейку нужно обозначить определенными тэгами. Поэтому более не станем говорить за таблицы, а таки плавно перейдем к блочной верстке.
Для начала немного теории. Блок — это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы. Содержимым блока может быть что угодно — кусок текста, картинка, список, форма для заполнения, меню навигации и т.п.
Рамка (border) — это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).
Поля (padding) — отделяют содержимое блока от его рамки, чтобы текст, например, не был “впритык” к стенкам блока.
Отступы (margin) — это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.
Блоки, как и таблицы — это элементы всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся такой параметр как “обтекание” (float). Но об этом чуть позже.
Тэг — это особая конструкция языка HTML. Различают открывающий и закрывающий тэги. В самом простом случае тэг — это как деталь детского конструктора, которая имеет своё строгое предназначение: планка — значит планка, колесо — значит колесо и ничто иное. К примеру тэг абзаца:
<p>Текст абзаца.</p>
всегда обозначается буквой “p” и никак иначе.
Тэги всегда заключены в угловые скобки. Как видно из примера, наличествуют как открывающий тэг, так и закрывающий. У последнего перед именем добавлен “слэш” — косая черта, наклоненная вправо.
Не все тэги имеют закрывающую пару. Например тэг изображения img его не имеет вовсе. Но чтобы соответствовать современным стандартам и требованиям спецификации XHTML, ему все-таки добавляют перед закрывающей угловой скобкой пробел со слэшем. Выглядит это примерно так:
<img src="images/risunok.jpg" alt="" />
Тэг div
В отличии от строгих привязок стандартных HTML-тэгов к своему содержимому (”р” — к абзацам, “а” — к ссылкам, “img” — к изображениям), тэг div является по-сути нейтральным. То есть ему всё равно что содержать, хоть всё разом. Его используют для задания функциональных областей на странице, таких как: “шапка” (header), блок навигации, блок основного содержимого, “футер” (footer) или подвал по-нашему.
У данного тэга, как и у любого другого, имеются свои собственные атрибуты.
Атрибут — описательная характеристика тэга. То есть что он может делать и каким образом. Например, опять же возьмём тэг изображения:
<img 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 уже нельзя использовать.
Автор пишет, что у тэга div существует всего два атрибута. Но это не так. В действительно у этого тэга существует намного больше атрибутов:
- id, class (идентификаторы в пределах документа);
- lang (информация о языке), dir (направление текста);
- title (заголовок элемента);
- style (встроенная информация о стиле information);
- align (выравнивание);
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события).
Ответить
Спасибо за комментарий! Если честно, то в такие подробности не вникал, ибо не использую сам. Хотя вот style - как встроенный кусочек правил иногда прописываю, если нет нужды использовать часто.
Ответить
C нетерпением жду вторую книгу! Спасибо
Ответить
Ошибка перевода - padding отступ
margin - поле
(от латинского marginal - заметки на полях)
Та же ошибка у Влада Мержевича
И кочует эта ошибка с сайта на сайт..
Ответить
:) Это если дословный перевод. К тому же только слова margin, которое и правда означает поле, но также еще и “край, граница”. Padding же переводится как “набивка, заполнение”.
Чтобы не путаться, нужно запомнить, что margin - это внешнее, padding - внутреннее.
Ответить
Интересный у тебя блог, добавил в ридер. Правда заметка похожа на раздел из книги Энди Бадда “Мастерсткая css” хотя, может мне и показалось)
Ответить
Здравствуйте, Игорь! Поскажите, плс, как Вы создали квадратики-ссылки на конкретные уроки этого раздела. Из исходного кода непонятно…
1
Буду очень благодарен!
Ответить
Здравствуйте, Александр. Эта навигация прописана обыкновенными ссылками. Делается просто: в конце поста добавляете блок со списком ссылок, исключив текущий пост. Например, есть статья, разбитая на 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 необходимый набор правил - те же квадратики.
Ответить
Самое интересное, что пришлось написать такое нагромождение кода для класса navi, что никак не вписывается в один блок , Кстати, в исходнм коде пишется для дескриптора . Если не коммерческая информация, опишите, плс, сам набор правил. Я считаю, это оригинальным решением написания меню для размещения новостей одной рубрики.
Ответить
У меня этот блок идет с классом str. Соответственно, набор правил такой:
.str a {
color: #3589FC;
padding: 5px 8px;
border: #999 solid 1px;
text-decoration: none;
}
.str a:hover {
color: #fff;
background: #333;
}
Все просто :)
Ответить
Отлично! Все получилось! Спасибо за безценный сайт.Удачи!
ps: решение оригинальное, нигде больше не встречал…
Ответить
:) Спасибо! И вам тоже успехов!
Ответить
Привет Игорь.Скачал,прочел Вашу книгу и приступил к верстке.Дошел до шапки и хотел просмотреть(как Вы советуете)как все отцентрировано в браузере,но…одна лишь белая страница.Сверху название присутствует-то-есть тэг TITLE прочитан,а самой шапки нет.На диске D: я создал папку”Мой сайт”-в ней еще 4 папки:image.jpg,Главная,Стили,Статьи.В “Главной” я сохранил страничку index.html,а шапку в папке image.jpg,а css-в папке Стили”.
Ссылка у меня выглядит так:
url(D:Мой сайт/image.jpg/shapka.jpg)
Подскажите в чем проблема может заключаться?
И играют ли роль пробелы в таблице стилей после двуеточий?
Спасибо.Очень надеюсь на ответ.Николай.
Ответить
Здравствуйте, Николай. Дело в том, что у вас папка названа именем изображения. Расширение .jpg может быть только у картинки, но не у папки. Назовите папку просто image. И соответственно путь к картинке будет:
url(D:Мой сайт/image/shapka.jpg)
Ответить
Спасибо,Игорь за ответ.
Папку переименовал-то-есть убрал расширение.jpg,но
проблему это не решило-тот же белый экран в IE и Мо-
зиле,а Опера в левом верхнем уголке еще продублировала содержимое тэга TITLE.
Где же здесь “заковыка”?Бог его знает.
Может что-то еще влияет на данную проблему?
Намекните,пожалуйста.
Спасибо.С ув. Николай.
Ответить
Сложно сказать, не видя прэдмет. Пришлите мне в мыло архив с папками и файлами. Тогда смогу подсказать.
Ответить
Здравствуйте Игорь. Прочитал Вашу книгу - очень понравилась! Очень хорошо объясняете. Но есть одна проблема. Когда Вы выравниваете “div id=”container”
по центру: “margin: 0 auto;”, то Firefox его нормально выравнивает, а IE - нет. Если можно, то расскажите, как это исправить. Спасибо.
Ответить
хотя я тут прикинул, что можно же указать отступ слева просто в процентах или пикселях. Есть более правильный метод?
Ответить
Здравствуйте, Дмитрий. Если в ИЕ страница отображается неправильно, то это, скорее всего, где-то ошибка затесалась. Опера и Фокс прощают некоторые ошибки, но не ИЕ.
Делать большой отступ слева - это неправильно. На больших мониторах все равно центр не поймаешь, а на маленьких страница уползет вправо за край экрана, а слева будет пусто.
Нужно искать ошибку :)
Ответить
Аффтару большой респект и уважуха, спасибки, спасибки, спасибки, спасибки :)
Ответить
И вам всего и с горкой! :)
Ответить
Здравствуйте Игорь. Прочитал Вашу книгу - очень понравилась! спасибо!вот возник один вопрос:я увидел у вас календарь-красиво сделать сам календарь я могу в html но как потом чтоб это работало
он-лаин не знаю не могу наити мозет быть подскажете если не трудно,а вообще все написано очень доступно много что можно поучить-спасибо
Ответить
Здравствуйте, Alex. Календарик сей - это работа самого движка. Я лишь прописал в нужном месте код вывода. А как он формируется - даже не знаю, честно. Все, что я могу с ним сделать, это задать внешнее оформление. Если вы используете тоже Вордпресс, то для вывода календаря достаточно добавить там, где вы его хотите видеть, вот такой код:
<?php get_calendar(); ?>Ответить
Здравствуйте,Игорь,очень понравилось ваше творение,я воодушевился и принялся творить,только у меня таже проблема,что и у Николая в 15 сообщении,такое ощущение,что папка style.css не находится html’ной страничкой,поудалял,буду делать заново,если опять получится таже петрушка-Вы не взгляните на мои ошибки?
с/у Айрат
Ответить
Здравствуйте, Айрат! Да, если что - присылайте в мыло, посмотрю.
Ответить
Спасибо за отзывчивость и оперативность,и за простое и понятное изложение.
Ответить
Спасибо за книгу как раз сейчас изучаю блочную верстку.
Ответить
Здравствуйте Игорь, ваша книга очень хорошая и понятная. Я сделал сайт, на основе примера сайта из вашей книги. И вот у меня возник такой вопрос:
Как сделать так, чтобы footer не приближался к menu и header-у ЕСЛИ в текстовом блоке мало текста?
то есть, КАК сделать область для текста фиксированной(например 300 пикселей), но при этом, при наличии большого текста, этот самый текст не наезжал на footer?
Надеюсь, что я понятно описал свою проблему :).
Ответить
решил вышеуказанную проблему,дело в том,что при сохранении документа нужно указывать-”всё документы” :) кто не понял-пишите на мыло - постараюсь объяснить подробнее
Ответить
Да, Евгений, все понятно. Вот здесь я рассказал о способе как это дело поправить:
http://www.websovet.com/kak-prizhat-podval-k-nizu-ekrana
Ответить
Спасибо за помощь, Игорь.
Еще вопрос: а когда будет продолжение книги “Блочная верстка веб сайта”? (хотя бы приблизительно)
Ответить
Если честно, то пока не знаю даже приблизительно :) С недавних пор я стал 100% фрилансером, поэтому занят сейчас исключительно на этой ниве.
Ответить
у меня возник вопросик может и не потеме. Но все же я не знаю куда писать
вобщем после добавления <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”?> у меня перестал работать javascript, какой !DOCTYPE поставить что бы он заработал?
Ответить
Проблема, как у Дмитрия (17) - выравнивание container посередине в IE - решается, если в начале документа определен доктайп
С чем это связано? Почему нельзя без использования доктайп?
Ответить
Ольга, вы сами ответили на свой вопрос :) Доктип браузеры учитывают. Более того, есть масса ситуаций, когда верстка, несоответствующая доктипу, плывет в разные стороны.
Ответить
ооо,спасибо за замечание
Ответить
Спасибо, Игорь! Хотелось бы про доктайпы более подробно изучить.. Потомучто, были подобные проблемы, как у kavzik(33): при определении доктайп начинались проблемы с подключенным файлом скрипта.
Не посоветуете ли какой-нибудь материалл на эту тему? Статью, книгу и пр.
Ответить
А стоит ли вписывать все в “wrap”???
Заголовок страницы
Раздел 1
Раздел 2
Колонка 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
Колонка 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
Ссылка 1
Ссылка 2
Подвал
Ответить
Тезка, поясните, что вы имеете в виду? В данном посте нет ни слова о wrap
Ответить
Спасибо, всё доступно и понятно объясняете.
Мне как зелёному новичку в веб-деве, статейка очень понравилась.
Будим значит учиться! (=
Ответить
А можно ли записать так: float: center???
В случае если на одной высоте необходимо поместить три блока???
Ответить
Нет, float: center; не существует. Как размещать три блока на одной высоте я рассказывал здесь:
http://www.websovet.com/razmeshhenie-trex-blokov-kolonok-na-stranice
Ответить
Игорь приветствую,
скачал Вашу книгу “Блочная верстка веб-сайта” и сверстал страничку про Пиггасов. Все понятно хорошо написано. Но есть одна проблема в ИЕ страница смотрится как и положено, все блоки на местах. А вот в ФФ и Опере блок “Самые последние новости:” залез под “Список новых учаснегов:” растянувшись на всю ширину сверстанной странички. В чем же проблема понять не могу. Буду весьма признателен если подскажете в чем же проблема. Спасибо
Ответить
Здравствуйте, Алекссандр! Нужно посмотреть страницу. Заранее подсказать в чем причина я не могу, пока ее не увижу.
Ответить
Статья интересная… А вот еще кому интересно по теме: ссылка
Рассказывается о приемах блочной верстки. Подробно и с примерами=)))
Ответить
Игорь, здравствуйте!
А не могли бы Вы посоветовать, какие-нибудь программы для создания сайтов? (часто пользуюсь pspad редактором, у меня есть adobe dreamweaver, но может есть совсем простенькие?)
Ответить
Здравствуйте, Марина! Посоветовать могу лишь то, чем сам пользуюсь постоянно. Это уже упомянутый вами PSPad, потом классика жанра - Photoshop и, наконец, домашний сервер по имени Денвер. Больше мне ничего не нужно.
Ответить
Приветствую Игорь!
Очень рад что есть такие полезные статьи. По Вашей книге я сделал веб страницу, но у меня возник один вопрос: почему-то вся страница, кроме headera, расположилась вне #containerа. Подскажите в чем причина?
Ответить
Здравствуйте, Владимир! И вам спасибо на добром слове!
По поводу расползания страницы - проверьте все ли закрывающие “дивы” </div> на своих местах
Ответить
Спасибо Вам за эти уроки.
Ответить
Рустик, вэлкам! :)
Ответить
Здравствуйте все. Ну вот и я сподобился занятся созданием сайта(идиот). Тупо застрял- не появляется ничего в браузере(IE), ЧИСТЫЙ ЛИСТ: нету никакой шапки . Коментарии прочел, пробовал всяко разно- “шиш вам”.
Ответить
Павел, ответил на ваше письмо. Проверьте почту
Ответить
Игорь, СПАСИБО ЗА ОПЕРАТИВНУЮ ПОМОЩЬ!!!
Касаемо книги: лично я впервые встретил доступную, не посвященому в html и css, информацию о создании сайта. Да еще даром! Эта книга - БУКВАРЬ. С нее и только с нее надо начинать обучение.
Всем удачи!
Ответить
Здравствуйте, Игорь! Делаю сайт по Вашей книге. Спасибо огромное, почти все получилось, только одна закавыка, один блок перекрывает вертикальную панель навигации, а с остальными все нормально. Как ни бьюсь, ничего не выходит.
Ответить
Спасибо, друзья, на добром слове!
Ответить
Спасибо за уроки. Надеюсь они помогут мне постигать азы!
Ответить
Здравствуйте Игорь!
В очередной раз хочу выразить благодарность за книгу, за уроки.
Мне, чайнику, это позволило создать сайт за короткое время.
Есть небольшой вопрос, не получается разместить объект, скажем картинку, чтобы она располагалась точно в центре экрана. По горизонтали - без проблем, а вот по вертикали никак не хочет вставать.
Подскажите пожалуйста решение по этому вопросу.
Ответить
Здравствуйте, Олег! К сожалению, правило auto позволяет отцентровать блок лишь по горизонтали. По вертикали оно не действует. Как вариант можно использовать следующий набор правил для одной картинки:
img {position: absolute;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
margin: -100px 0 0 -200px;
}
Здесь размеры картинки 400х200. Соответственно, margin задан с отрицательными значениями сверху и слева ровно наполовину размеров картинки.
Ответить
Спасибо Игорь за подсказку, сработало! :)
только опечатка видимо, margin: -200px 0 0 -100px;
Ответить
Счел своим долгом выразить благодарность Игорю.
Игорь, от души, ОГРОМНОЕ СПАСИБО ЗА КНИГУ. Благодаря ей проявился интерес к изучению програмирования. Сейчас, всего через пол-года изучения HTML и CSS, установил в сети свой первый сайт. Перехожу на изучение PHP, жаль, что нет книжки по php “от Квентора”… Удачи вовсех делах!!!
Ответить
Игорь Квентор 16.01.2011
@Павел, спасибо на добром слове! :)
Ответить
Добрый день! Вопрос такой. Я решил в поле body вставить рисунок. Он вставился, но отображается только слева. Как добавить его и в право???
код такой
body {
background-repeat: repeat-y;
background-image: url(images/dody-bg.jpg) repeat-y;
background: #010101 url(images/dody-bg.jpg) repeat-y;
color: #ee0e19;
font-size: .75em;
font-family: Arial, Helvetica, Verdana, Sans-Serif;
}
Спасибо.
Ответить
Игорь Квентор 07.04.2011
@дрон, никак. Кроме того, первые две строки правил лишние.
Ответить
mce_src=”images/risunok.jpg” width=”200px”
я доконца немогу понять зачем в img “mce_src”
Ответить
Игорь Квентор 09.06.2011
@Михаил, упс! Спасибо, что заметили. Это ошибка, конечно же. Исправил.
Ответить
Добрый день!
Подскажите, может здесь кто-нибудь помочь начинающему?
Насмотрелась видео от Lynda.com и других, а теперь такая каша в голове%) Мне непонятно, как из макета сверстать сам сайт? Эти divы, таблицы, floatы, positioning столку сбивают.
Можете посоветовать что-нибудь. Попробовала сделать наипримитивнейший сайт в Dreamweaver CS3, но ступор оттого, что помимо картинки и таблицы ничего не могу сделать.
Вообще как лучше верстать при помощи divов или при помощи таблиц? Поделитесь опытом, пожалуйста.
Ответить
Павел 12.09.2011
@Анастасия, прикольно… на странице с первым уроком по блочной верстке такие вопросы…:)))
Читайте и верстайте, не спеша, от урока к уроку…
Дримвиром CS3 не пользуйтесь - это визуальный редактор, с ним вы не научитесь верстке. Во втором уроке есть ссылка где скачать PSPad, этим пользуйтесь.
Верстать учитесь блочной верстке хотя бы потому, что будующее за HTML5 и CSS3, но для таблиц нужно использовать естественно табличную верстку, но только для таблиц.
Читайте уроки и учитесь у Квентора, уникальный расказчик…
Ответить
Игорь Квентор 17.09.2011
@Павел, спасибо на добром слове!
Ответить
Добрый день!
Хочу сделать блоки на сайте с заокруглеными углами подскажите как сделать луче!
Ответить
Игорь Квентор 30.10.2011
@Витёк, лучше использовать инструменты современного CSS3:
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
Да, старые браузеры не поддерживают. Но смотреть нужно вперед, а не морочиться о старье.
Ответить
Павел 30.10.2011
@Игорь Квентор, при всем уважении, как К учителю :), не согласен. Да, нужно осваивать CSS3 и пользоваться им, но махнуть рукой на “старье” нельзя, около 40% пользователей, я это вижу по логам, заходят именно с IE6-7.
Как пример: http://test.emelyaplusweb.ru/hoods/klasik.html
Использовал CSS3, именно это:
-webkit-border-radius: 7px 7px 0 0;;
-moz-border-radius: 7px 7px 0 0;;
border-radius: 7px 7px 0 0;;
-webkit-box-shadow: #666666 2px 2px 4px;
-moz-box-shadow: #666666 2px 2px 4px;
box-shadow: #666666 2px 2px 4px; */
background: #D0D1E3;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#829A9A), to(#DBDAEA));
background: -moz-linear-gradient(#829A9A, #DBDAEA);
background: linear-gradient(#829A9A, #DBDAEA);
-pie-background: linear-gradient(#829A9A, #DBDAEA);
IE6-8 все прекрасно отображает радиусы, тени, градиенты, если руки приложить и есть желание. А вот Опера 9 не понимает.
Ответить
Игорь Квентор 30.10.2011
@Павел, все верно, стремиться можно к лучшему всегда :)
Ответить
Помогите создать шапку в блочном виде и один блок и всё ето с заокруглеными углами!Пожалуйста!
Ответить
Игорь Квентор 30.10.2011
@Витёк, а в чем сложности? Код дан выше. Добавляете его к нужному блоку, задаете нужный радиус (в примере 15px) и все.
Ответить
Вот код для вызова css файла:
А мне нужен для вызова html файла!Подскажите кто знает.
Ответить
Игорь Квентор 30.10.2011
@Витёк, коды в комментах не отображаются.
Ответить
Как вызвать код html в другом файле напешыте на мыло
Ответить
Я использую хостинг народ подскажыте как луче зделать все блоки шапку чтобы когда я хотел допустим изменит содержимое я не менял его на каждой странице а изменил в одном файле и просто перезалил index.html
Ответить