Создание сайта. Блочная верстка сайта
Авторский цикл статей, посвященный основам блочной верстки сайтов. Это первое, с чего стоит начать изучение темы создания сайта. Уроки будут полезны тем, кто хочет изучить основы HTML и CSS не только в теории, но на практике.
По ходу изучения темы мы создадим сайт, обычный сайт, без особых наворотов, но вполне симпатичный.
В уроках я просто и доступно рассказываю о блочной верстке сайта и не только. Если вы хотите быстро разобраться в основах верстки сайтов, то этот цикл статей будет именно то, что вам нужно.
Что такое блочная верстка?
Что такое блочная верстка сайта и с чем ее едят?
Ранее сайты верстали при помощи таблиц. Каждый элемент страницы, будь то заголовок, текст или картинка, располагался в собственной ячейке. Эти ячейки кучно роились в других, более крупных ячейках, а те в свою очередь лежали в главной ячейке, то есть в самой странице сайта.
Табличная верстка сейчас уже морально устарела, хотя очень многие вебмастера продолжают ее использовать. Большим минусом ее является тяжеловесный код. Ведь каждую мало-мальскую ячейку нужно обозначить определенными тэгами.
Блочная верстка — совсем другая песня. Здесь все элементы страницы расположены в специальных блоках, которые называются div. По своей сути они чем-то похожи на те же таблицы. Коробка — она и в Африке коробка. Но блоки гораздо удобнее, проще и функциональнее.
Блок в верстке сайта — это обычная прямоугольная область, которая обладает рядом свойств, таких как: рамка, поля и отступы. Содержимое блока может быть чем угодно — кусок текста, картинка, список, форма для заполнения, меню навигации и т.п.
Рамка (border) — это контур блока, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).
Поля (padding) — отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.
Отступы (margin) — это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.
Блоки, как и таблицы, всегда располагаются на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально в одну линию, то в их свойствах задаётся такой параметр как «обтекание» (float). Но об этом чуть позже.
Блочная верстка сайта. Тэги
Тэг — это особая конструкция языка HTML. Различают открывающий и закрывающий тэги. Не путайте их с хэштэгами из соцсетей, или метками (тегами) на сайтах, это разные вещи!
В самом простом случае тэг — это как деталь детского конструктора, которая имеет своё строгое предназначение: планка — значит планка, колесо — значит колесо и ничто иное. К примеру тэг абзаца:
<p>Текст абзаца.</p>
всегда обозначается буквой p и никак иначе. Это его имя.
Тэги всегда заключены в угловые скобки. Как видно из примера, есть открывающий и закрывающий тэг. У закрывающего тэга перед именем добавлен «слэш» — косая черта, наклоненная вправо /.
Не все тэги имеют закрывающую пару. Например тэг изображения img его не имеет вовсе. Но чтобы соответствовать современным стандартам и требованиям спецификации XHTML, ему все-таки добавляют перед закрывающей угловой скобкой пробел со слэшем. Выглядит это примерно так:
<img src="images/risunok.jpg" alt="" />
Тэг div
Тэг div — это основа блочной верстки. Это те самые кубики, из которых и строится весь сайт. Этот тэг нейтральный. В отличие от стандартных HTML-тэгов, которые строго привязаны к своему содержимому (p — к абзацам, a — к ссылкам, img — к изображениям), тэг div может вмещать что угодно и сколько угодно всего этого добра. Считайте его эдакой большой коробкой, куда свалены все игрушки.
Тэг div используют для задания функциональных областей на странице. Например, таких как: «шапка» (header), блок навигации, блок основного содержимого, «футер» (footer) или подвал по-нашему.
У тэга div, как и у любого другого, имеются свои собственные атрибуты.
Атрибут — описательная характеристика тэга. То есть, что он может делать и каким образом. Например, возьмём тэг изображения:
<img src="images/risunok.jpg" alt="Рисунок меня, где я кормлю собаку, а она кусает меня зачем-то" />
В данном случае src, width, height, alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны значения атрибутов.
Расшифровать такую запись несложно. Тэг указывает, что в данном месте страницы нужно прилепить изображение risunok.jpg из папки images. Ширина рисунка 200 пикселей, высота 50 пикселей. И до кучи добавлен альтернативный текст, который поясняет, что изображено на рисунке.
Кстати, альтернативный текст — это не блажь, а тоже необходимое требование. Не все пользователи сети обладают хорошим зрением. Кто-то пользуется программой распознавания и чтения текста. А кто-то просто выключает показ картинок в браузере. Вот для них и существуют альтернативные подписи к рисункам.
Если же их нет смысла подписывать (например маркер списка или стрелка какая-нибудь), то у атрибута alt оставляют пустое место между кавычками.
Атрибуты тэга div
Атрибутов у тега div всего два:
id — атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например, header или footer.
Таким образом мы сможем задать далее в листе стилей для тэга div с атрибутом id и значением header (шапка) одни настройки, а для подвала footer совсем другие. И браузер верно распознает, что вот этот кусок текста относится к «шапке» и будет набран, например, крупным и красным шрифтом, а вот этот к «подвалу» и будет набран мелким и серым шрифтом. И никакой путаницы!
class — атрибут, позволяющий одно и то же значение придать нескольким элементам. Например, всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использовать, поэтому мы применяем class.
На первый раз, думаю, достаточно. Если что-то непонятно по блочной верстке сайтов, спрашивайте в комментариях.
Продолжение следует. Оставайтесь на связи!
Создание сайта. Блочная верстка | Урок 1
Создание сайта. Блочная верстка | Урок 2
Создание сайта. Блочная верстка | Урок 3
Создание сайта. Блочная верстка | Урок 4
Создание сайта. Блочная верстка | Урок 5
Создание сайта. Блочная верстка | Урок 6
Создание сайта. Блочная верстка | Урок 7
Создание сайта. Блочная верстка | Урок 8
Автор: Игорь Квентор
www.websovet.com
Блочная верстка сайта – как она делается
От автора: блочная верстка сайта сегодня по-прежнему остается самым популярным способом верстки шаблона. Почему она так популярна и как она делается?
Блочная революция
Не так далеки те времена, когда основным способом верстки оставались таблицы. Весь сайт представлял собой большую таблицу, а различные его элементы – ряды и ячейки.
Знаете что, посмотрел я тут недавно на верстку макета с помощью таблиц. Это был невероятно громоздкий код. Причем сам макет был предельно простым. Естественно, веб-разработчиков тоже это не устраивало. Поэтому позже появился способ, позволяющий верстать с помощью независимых блоков.
div и span — это пустые контейнеры, в которые можно поместить что угодно. Первый является блоком, а второй – строкой. Каждому элементу можно было задавать ширину, высоту, границу, внешние и внутренние отступы и много чего другого. И кому теперь нужны были таблицы, когда сетку сайта можно было построить, написав в 3-5 раз меньше кода?
Потом пришел HTML5
Но на этом мы не будем останавливаться. Верстка сайта блоками надолго стала стандартом веб-разработчиков, но ее нужно было улучшать. Все потому, что эти самые div-ы были пустыми. Нет, ему можно было задать класс, идентификатор, заполнить информацией, вставить дочерние элементы и их тоже наполнить, но по смыслу в языке html div – это просто пустой контейнер.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееТак вот и получилось, что с точки зрения смысла, сайт верстается как набор контейнеров. Веб-разработчики решили добавить больше смысла. Так появился HTML5. Язык, в котором была масса новых тегов. Например, header, article, footer и т.д. Тут уже даже человек с ограниченными знаниями английского понимает, что header – это шапка сайта или статьи, а article – сама статья.
В связи с этим блочная верстка стала сложнее. По новым стандартам уже недостаточно пихать всю информацию в пустые контейнеры, а использовать для этого новые, семантические элементы. Хотя div-ы по-прежнему используются для различных декоративных эффектов.
Рис. 1. Разметка на HTML5 сильно отличается из-за обилия новых тегов.
Вернемся к началу
Все-таки я постарался описать процесс эволюции, но совсем мало сказал о том, как же сделать блочную верстку. Собственно, на примере все будет понятно. Возьмем простейший макет сайта, где есть шапка, основная часть, одна боковая колонка и футер (низ). Как все это сделать на блоках?
Создаются четыре контейнера (оставим пока в покое теги HTML5, потому что там много нюансов). Разметка выглядит примерно так:
<div id = «header»></div> <div id = «content»></div> <div id = «sidebar»></div> <div id = «footer»></div>
<div id = «header»></div> <div id = «content»></div> <div id = «sidebar»></div> <div id = «footer»></div> |
То есть создали контейнеры и дали им понятные идентификаторы, чтобы потом стилизовать в таблице стилей. Все, что будет между открывающим и закрывающим тегом, будет содержимым контейнера. Например, у вас по макету в шапке есть элемента, которые независимы друг от друга (допустим, логотип, название сайта и небольшое меню).
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее<div id = «header»> <div id = «logo»></div> <div id = «sitename»></div> <div id = «topmenu»></div> </div>
<div id = «header»> <div id = «logo»></div> <div id = «sitename»></div> <div id = «topmenu»></div> </div> |
Примерно так будет выглядеть структура вашей шапки. Дальше основная работа будет в CSS. Вам нужно будет правильно расставить все три блока, прописать путь до картинки с логотипом, поставить отступы и т.д. Естественно, в первую очередь нужно прописывать свойства для родительского блока с id =»header».
Таким образом верстаются и все остальные структурные части сайта. Естественно, в контенте будет больше каких-то элементов. Если все это прописывать на HTML5, то меняются только названия тегов. Например, не <div id = «header»>, а <header id = «header»>. Идентификатор, как правило, оставляют, потому что на странице могут быть и другие шапки (например, шапка статьи). Подробнее со всеми html5-элементами можно ознакомиться в любом нормальном справочнике.
После того, как верстка выполнена, ее обычно проверяют. Для этого используют различные инструменты, некоторые из них описаны в этой статье. Проверка на кроссбраузерность считается одной из самых важных.
Как видите, особенных проблем с разметкой на блоках возникнуть не должно. Она предельно проста. А если вы придерживайтесь хорошего форматирования кода, то тем более не запутаетесь. Основная работа происходит именно в таблице стилей. Если блоков много, то придется для всех них прописывать свои размеры, отступы и прочие правила.
Это единственный минус блочной модели. Если элементов на странице очень много, то вам придется повозиться со стилями. Собственно, если вам нужно вывести на экран таблицу, то именно ее не стоит верстать блоками. Поэтому табличная верстка надолго останется с нами хотя бы для того, чтобы верстать непосредственно таблицы.
Рис. 2. Таблица – единственное, что не очень удобно верстать блоками.
Преимущества блоков
В целом, верстка сайта div-блоками является достаточно простым делом. Код не загромождается, особых проблем с поведением и стилизацией нет, тег div поддерживается даже очень старыми браузерами. Если верстать с использованием HTML5 тегов, то да, проблемы могут возникнуть в старых браузерах. Но они, опять же, легко исправляются различными файлами, написанными другими разработчиками.
Блочную сетку очень легко адаптировать. Можно ли утверждать, что блочная верстка сайта проживет еще достаточно долго? Думаю, можно. Это удобный и достаточно простой способ верстки, так чего же от него отказываться?
Долгая жизнь блоков обусловлена хотя бы тем, что этот стандарт постоянно развивается. Например, из обычного блока теперь можно сделать флексбокс, который обладает рядом преимуществ. Блочный элемент можно отцентрировать только по горизонтали. С флексбоксом это можно сделать даже по вертикали.
Блокам можно задавать фиксированные и резиновые размеры. Во втором случае они будут менять габариты в зависимости от ширины окна. Именно резиновые элементы чаще всего используют в адаптивной верстке, чтобы сайт хорошо смотрелся на разных разрешениях экрана.
Заключение
Смотря на новые CSS3-свойства, я могу смело заявить, что сегодня с блоками можно творить все, что душе угодно. Хотите все это изучить? Пользуйтесь информацией на нашем блоге (как в бесплатных, так и в платном разделе). И конечно не пропускайте новые статьи, чтобы постоянно улучшать свою квалификацию.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
СмотретьСоздание сайта. Блочная верстка сайта
Сегодня заключительный урок из серии «Блочная верстка сайта». В самом низу мы добавим подвал, он же футер (footer). Я расскажу, для чего он нужен и почему его не стоит игнорировать. А потом нам останется только кой-чего подправить и приукрасить на нашем замечательном веб-сайте.
Подвал, он же «футер» — это весьма важная часть сайта, хотя и мало кто туда добирается, особенно при очень длинных страницах. Там обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация.
Очень часто можно наблюдать такую картину: верхнее горизонтальное меню под «шапкой» практически без изменений дублируется в левой колонке. Выглядит это, по меньшей мере, бестолково. Уж лучше продублировать основные разделы сайта в подвале. Пользы будет несомненно больше.
Футер не должен доминировать над шапкой, но и не должен теряться, делая страницу неуравновешенной. Мы сделаем его немного контрастным по цвету, но небольшой высоты.
Запишем в коде страницы сразу после этого места:
.................
...намечаются до самого утра. При наличии на небе луны — будет весело.
</ul>
</div>
<div></div>
Следующий код:
<div>
<p>Главная | <a href="#">О нас</a> | <a href="#">О летучести</a> | <a href="#">О везучести</a> | <a href="#">Свинки-герои</a> | <a href="#">Подружиццо</a></p>
<p>© PIG.RU, 2007 | All right reserved. | <a href="http://validator.w3.org/check?uri=http://www.pig.ru/">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.pig.ru/style.css">CSS</a> | e-mail: <a href="mailto:[email protected]" mce_href="mailto:[email protected]">[email protected]</a></p>
</div>
Здесь у нас слово Главная не является ссылкой (об этом мы уже говорили), а следом идут обычные ссылки на другие разделы сайта.
Всего в футере два абзаца. В первом ссылки на разделы, а во втором как раз и есть всякие копирайты, ссылка на E-mail и ещё две интересные ссылочки. Вот они уже как раз для форсу бандитского!
Это ссылки на валидаторы — онлайн сервисы, которые проверяют вашу страницу на соответствие стандартам. Ссылки устроены так, что нажимая на них, вы сразу даёте команду этим самым валидаторам проверить ваши странички. И тут же получаете ответ. Это придаёт вашим страничкам солидность и всеобщее наше верстальщицкое одобрямс.
Вот практически и вся страница. Проверьте только чтобы в конце кода у вас было два </div> подряд. Вот так:
..........
href="mailto:[email protected]" mce_href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
</body>
</html>
Второй </div> — это закрытие области контейнера.
Теперь допишем в листе стилей оставшийся код:
#footer {
background : #665;
color : #fff;
font-size : 70%;
padding : 5px;
clear : both;
}
#footer a {
color : #ff0;
}
#footer a:hover {
color : #f00;
}
#footer p {
padding : 2px;
text-align : center;
}
.clearfloat {
clear : both;
}
Здесь мы задали фон серо-зелёного цвета, цвет текста — белый. А вот нижняя строчка в первом правиле (clear : both;) означает, что с обоих сторон подвала не должно быть ничего. То есть он у нас занимает всю ширину нижней части контейнера.
Ссылки у нас здесь ярко-жёлтые, а в активном состоянии — красные. Для текста мы выбрали размер мельче всех на странице — 70%. Как я и сказал, футер — важная часть, но не на столько, чтобы бросаться в глаза.
Выравнивание для текста мы задали по центру — text-align : center;.
Самое последнее правило как раз служит для блока очистки, заданного атрибутом clearfloat, о котором мы говорили, верстая блок новостей.
Сохраняемся и смотрим. Всё вроде бы хорошо, но как-то неуютно (особенно на белом фоне экрана). Добавим-ка мы всей странице тонкую светло-серую рамку! Откроем лист стилей, найдем вот это место:
#container {
width : 760px;
margin : 0 auto;
}
И добавим следующую строчку:
border : 1px solid #999;
Должно получиться следующее:
#container {
width : 760px;
margin : 0 auto;
border : 1px solid #999;
}
Вот, собственно, и всё!
Заключение
Напоминаю, что наша верстка сайта является «плавающей«. Грубо говоря — элементы на странице располагаются как бы в потоке, занимая свободные места. Поэтому мы и ограничили часть пространства контейнером как коробкой, в которую уложили поочередно все элементы.
Кроме плавающей, конечно же, есть и жесткая привязка элементов к странице. В самом общем случае для этого каждому элементу строго задается местоположение. Например, расстоянием в пикселях от верхней и левой стороны экрана. Но это уже совсем другая история.
Если все же что-то не понятно, задавайте ваши вопросы в комментариях.
Удачи! 🙂
Блочная верстка сайта | Урок 1
Блочная верстка сайта | Урок 2
Блочная верстка сайта | Урок 3
Блочная верстка сайта | Урок 4
Блочная верстка сайта | Урок 5
Блочная верстка сайта | Урок 6
Блочная верстка сайта | Урок 7
Блочная верстка сайта | Урок 8
Блочная верстка сайта | Урок 9
Автор: Игорь Квентор
www.websovet.com
Создание сайта. Блочная верстка сайта
Продолжение цикла статей «Создание сайта. Блочная верстка» и о том, как создать свой сайт самостоятельно. Урок 2. Начинаем верстать небольшой сайт.
Для написания кода рекомендую пользоваться специальным редактором. Например, PSPad. Это весьма удобная программа, которой пользуются как программисты, так и верстальщики. Она бесплатная и имеет русскоязычный интерфейс.
Верстать мы будем вот такой вот симпатичный сайт о Летающих Поросенках.
Для начала определим тип нашего документа.
Что такое тип документа DOCTYPE
Любая грамотно свёрстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он не для форсу бандитского, а для всевозможных устройств вывода информации, и браузеров в том числе.
Пока что все, ныне существующие, браузеры прекрасно обходятся и без указания доктайпа. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга <html> просто не будет прочитана, потому как стандарты становятся жестче.
Мы определим нашу страничку в соответствии с самым крутым и строгим на данный момент доктайпом под названием Strict 1.0.
Выглядит этот крендель так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Прошу обратить внимание: как я уже говорил, требования здесь весьма строгие — все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой.
Но вот ведь сам доктайп тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам строгих правил. Но это единственный случай, где правило не работает.
Обновлено (2018 г): т.к. статья впервые была опубликована в 2005 году, то доктайп Strict 1.0 уже морально устарел, хотя и используется многими сайтами до сих пор. Рекомендую сразу писать код в HTML5, где данная строка указывается просто и лаконично:
<!DOCTYPE html>
Подробнее про HTML5 читайте здесь.
Далее мы впишем ещё одну хитрую строку:
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
Ну, раз тут появилось слово lang и ru, то и ежу понятно, что это указание на язык документа. Не путать с кодировкой! Её мы укажем позднее.
В этой же строке, в общем-то, и начинается уже код самой страницы с тэга <html>. Это самый главный тег, с которого начинается и которым заканчивается любая веб-страница.
Тэги head, title и body
Тэг head и метаданные сайта
Следующий тэг <head>. В нём содержится всякая служебная информация: название страницы (то, что входит в титл), кодировка, ключевые слова для поисковых роботов, описание страницы и т.п. Вся эта инфа записана в служебных тэгах meta, которые не отображаются на странице в браузере.
Мы запишем на нашей страничке следующую информацию:
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="Сайт о поросенках-летунах и счастливой летучей жизни." />
<meta name="keywords" content="летать, свин-летун, пиггсы, полёты, лёччики, пилоты." />
<link rel="stylesheet" href="style.css" type="text/css" />
Поясним:
- Первый мета-тэг content-type показывает на кодировку сайта. В рунете желательно использовать
все-таки windows-1251, чтобы случайно у Васи Пяткина в его IE версии 3.0 не повылезали вместо красивого и грамотного текста всякие кракозябры.Устарело! На сегодняшний день (2018 год) рулит utf-8, вот и его и используйте. - Второй мета-тэг description — это краткое описание сайта. Именно эта строка первой покажется в результатах поиска яндекса или рамблера, если они ещё нас найдут.
- В третьем мета-тэге keywords — ключевые слова для поисковиков. Объяснять не буду зачем это нужно, думаю и так ясно.
- И наконец последняя строка — это не что иное как ссылка на наш файл стилей CSS, который мы создадим чуть позже.
Про файл стилей скажу пока лишь вот что: по умолчанию его могут использовать любые устройства вывода инфы, будь то экран монитора, принтер, либо телетайп какой-нить шпиёнский.
Но если мы хотим указать для какого конкретно устройства предназначена страница, то после атрибута type со значением text/сss должны будем указать дополнительный атрибут media со значениями:
print — для принтера
hendheld — для «наладонника»
screen — для монитора only и т.д.
Это понятно — если кто-то захочет распечатать нашу страничку, то ему вовсе ни к чему на отпечатке навигация, кнопки-картинки, рекламные баннеры и супер-красивые заголовки. Только полезная инфа. И вот для такого случая пишется отдельный файл стилей, попроще.
Тэг title
Следующим парным тегом будет title — это тот текст, который появляется на вкладке браузера при открытии странички:
<title>Пиггасы | Главная</title>
Понятное дело, что туда необходимо вписать название страницы. Не Index, не default, не просто цифра 1 какая-нибудь, а настоящее хорошее название. Это также необходимо, как и название для книги. Да и поисковые роботы сильно уважают, когда в титле набран вменяемый текст.
А теперь впишем закрывающий тэг </head>. Все, со служебной инфой покончено. Обратите внимание — тэги как бы вложены друг в друга:
<head><title></title></head>
Это правило вложения должно выполняться всегда! Никаких перестановок типа:
<head><title></head></title> - ЭТО НЕПРАВИЛЬНО!
Тэг body
Вот мы и добрались до тела нашей странички, которое обзывается соответствующим тэгом <body>. Пока давайте допишем код страницы до конца (он ещё будет впоследствии дополнен):
<body>
</body>
</html>
Сохраним документ в отдельной папке. Сохраняем как index.html. Почему именно index? Любой браузер, зайдя по адресу www.ваш_сайт.ru станет сразу искать страницу с этим названием. Устроены они так. Индексная страница для них всегда является главной, то есть стартовой.
Окей! На сегодня хватит. В следующем уроке займемся написанием файла стилей CSS для нашего сайта.
Продолжение следует. Оставайтесь на связи! Если что-то непонятно, смело спрашивайте в комментариях.
Создание сайта. Блочная верстка | Урок 1
Создание сайта. Блочная верстка | Урок 2
Создание сайта. Блочная верстка | Урок 3
Создание сайта. Блочная верстка | Урок 4
Создание сайта. Блочная верстка | Урок 5
Создание сайта. Блочная верстка | Урок 6
Создание сайта. Блочная верстка | Урок 7
Создание сайта. Блочная верстка | Урок 8
Создание сайта. Блочная верстка | Урок 9
Автор: Игорь Квентор
www.websovet.com
Блочная верстка с нуля, CSS, HTML
/ CSS, HTMLЧто же вообще такое блок? Ну это какой-нибудь прямоугольный участок на сайте, содержащий текст или другие блоки. Все норм сайты состоят из блоков.
В HTML-коде блоки могут выглядеть так:
<div><!--содержимое блока--></div> <p><!--содержимое блока--></p> <span><!--содержимое блока--></span> <a href="<!--url-->"><!--анкор--></a>
Любую страницу первоначально можно разделить приблизительно на 4-5 блоков, причем у этих основных блоков есть свои названия, поглядим на примерах:
Это общий вариант, конечно, есть сайты, которые не подходят под него, но в целом получается примерно так.
Не забывайте, что блоки могут содержать ещё блоки.
Пример 1. Несколько блоков
HTML:
Кстати говоря, для следующих двух примеров он будет такой же, т.е. всё будет делаться через CSS-стили.
<div></div> <div></div> <div></div>
CSS:
div.block{
height:59px;
width:200px;
background:#e28964;
margin:5px 0;
}Пример 2. Обтекание слева, float:left;
Как я и говорил, HTML-код используем тот же самый, а CSS изменится следующим образом:
div.block{
height:119px;
width:88px;
float:left;
background:#e28964;
margin:0 5px 0 0;
}И ещё кое-что, если это не единственный код и не единственные блоки на вашем сайте, и что-то вдруг пошло не так, например, вместо того, чтобы нормально обтекаться, блоки расплылись в разные стороны, попробуйте немного изменить HTML на:
<div> <div></div> <div></div> <div></div> </div>
или:
<div></div> <div></div> <div></div> <div></div> <div></div>
Блок со стилем clear:both означает, что обтеканию конец. Сам по себе блок невидим, если ничего в него не добавлять
Пример 3. Обтекание справа, float:right;
Всё делается точно так же, как в примере 2, единственное что нужно поменять — это float:left на float:right в CSS-стилях.
Пример 4. Большое количество обтекаемых блоков
По сути тут ничего нового, это обычный float:left / right. Блоки переходят на новую строчку, когда им начинает не хватать ширины.
HTML:
<div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
CSS:
div.floated_blocks{
width:210px;
}
div.block{
height:80px;
width:58px;
float:left;
background:#e28964;
margin:5px;
}Так можно добавить бесконечное количество обтекаемых блоков.
P.S. Вы наверное встречали где-нибудь теги таблиц <table>
<td> и прочее подобное. Внимание: Они не предназначены для верстки сайтов! Соглашусь, что иногда очень удобно использовать табличные теги, чтобы создать таблицу ну или календарь. Тот, кто верстает с их помощью сайты, безнадёжно устарел.Миша
В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.
© 2008—2020. Код – поэзия. Находится на хостинге beget.