Приветствую дорогие читатели, в этом выпуске речь пойдет о разновидностях верстки. Все вы, наверное, слышали о блочной верстке и табличной
, сегодня я бы хотел поговорить об этих двух разных подходах к верстке сайта. В предыдущей статье я описывал, как защитить электронный , немного раньше мы рассматривали конкретный пример магазина на современном компоненте virtuemart для бесплатной CMS joomla.
Эта статья будет полезна начинающим вебразработчикам, которые только становятся на тернистый путь "сайтостроителей" и хотят самостоятельно делать сайты
. Вебразработчики со стажем тоже смогут что-то почерпнуть для себя, в частности в статье сравниваются достоинства и недостатки табличной и блочной верстки
.
Пожалуй, нужно начать с того, что такое верстка сайта? Верстальщик получает от дизайнера макет будущего сайта, как правило, макеты предоставляются в формате photoshop. Макет это по сути рисунок, только более детализированный, в нем отдельные элементы (меню, шапка сайты...) разнесены по слоям, это получается естественным путем когда дизайнер рисует макет, кроме того это очень удобно, можно легко скопировать рисунок с нужно слоя, посмотреть параметры шрифта и т.д. Так вот суть верстки в трансформации макета в html документ и составления набора CSS правил.
Следует отметить, что верстка это процесс творческий, не такой конечно как отрисовка макета в фотошоп но, тем не менее, доля творчества в этом есть особенно на начальном этапе, далее с ростом опыта процесс верстки можно механизировать. Качество верстки оценивается по тому, насколько сверстанный сайт отличается от макета.
Виды верстки
Как заявлено в названии верстка бывает блочная или табличная . В блочной верстке элементы сайта структурируются с помощью блоков (div ), в табличной верстке обходятся таблицами (table ).Табличная верстка
Табличная верстка использовалась на заре сайтостроения, она была популярна среди начинающих вебразработчиков. Следует заметить, что многие вебмастера и сейчас достаточно эффективно обходятся версткой таблицами, как говориться - дело мастера боится. Лично я предпочитаю блочную верстку табличной верстке, но мы сейчас не о вкусах. В основу идеи положено представление сайта в виде таблицы. Как известно подавляющее большинство сайтов имеют типовую структуру, которую можно детализировать под конкретную задачу. Рассмотрим для примера типовой вариант сайта
который содержит шапку, область контента, правый сайдбар и футер, такова не хитрая структура моего блога. Реализуем данную структуру таблицей
| шапка | |
| контент | сайдбар |
| футер | |
таблице следует задавать конкретную фиксированную ширину, если макет имеет фиксированную ширину или 100%, если макет резиновый, в этом случае таблица будет растягиваться по ширине экрана в зависимости от разрешения монитора.
Достоинства и недостатки табличной верстки:
- Проста в понимании, не требует более глубоких знаний HTML и CSS (+ )
- Интуитивно понятна при построении, минимум CSS правил (+ )
- Трудно разбираться в HTML коде при более сложной структуре сайта (- )
- Пока вся таблица не загрузиться она не будет показана на экране (- )
- Сложный дизайн с перекрытием элементов не реализуем (- )
- Много лишнего кода (- )
Остановимся поподробнее на 4-ом пункте. Дело в том, что HTML таблицы устроены таким образом, что браузер не может знать заранее как рисовать таблицу с ее содержимым, пока оно незагружено, до тех пор, пока последний рисунок, находящийся в таблице не будет загружен, таблица не будет показана на экране браузера, что может стать причиной ухода пользователей с сайта не дождавшись отображения страницы, поскольку посетитель не видит ничего на экране некоторое время. Создается впечатление будто сайт тормозит, на самом деле браузер ждет пока все элементы таблицы будут загружены.
блочная верстка
Блочная верстка базируется на том, что блочные элементы HTML, как правило, располагаются по вертикали, сверху вниз друг за другом в том порядке, в котором они встречаются в HTML коде. Кроме этого блокам можно задавать свойство плавучести (float:left | right | none | inherit ). Если блоку указать свойство float:left , то он будет выровнен по левому краю, а все остальные блоки будут игнорировать его, как будто этого блока нет, за исключение текста, остальные блоки, которым задано это же свойство будут обтекать его справа, на сколько это позволяет ширина экрана или элемента внутри которого они находятся. Следует заметить, что любой элемент можно сделать блочным, заданием ему свойства display:block , изначально только элементы div по умолчанию считаются блочными элементами, для не блочных элементов (span, p ) свойство float игнорируется и такие элементы располагаются как обычно последовательно сверху вниз. Чтобы свойство float не игнорировалось необходимо задать элементы свойство display:block .float:right выровнит блок по правому краю, а все остальные блоки будут игнорировать его, либо обтекать, если им задано это же свойство и если в коде идут подряд два или несколько блоков с указанным свойством, то первым вправо встанет тот блок, который идет первым в коде, остальные обтекают его слева.
Свойство float:none отменяет эффект плавучести для блока, но это не значит что блок будет располагаться как обычно сверху вниз, если выше расположен блок с эффектом плавучести, то нижний блок будет игнорировать верхний и встанет под него, чтобы этого не было нужно задать этому блоку свойство clear:both . Ух, сложно да? Это только, кажется, на первый взгляд, на самом деле все логично и просто, надо только потренироваться.
float:inherit - задает свойство плавучести, такое же, как у родительского блока (блока в который вложен данный дочерний блок).
Нужны конкретные примеры, чувствую не убедительно, получается. Давайте создадим простой пример, для начала основу, красный блок с шириной 400 пикс. высотой 350 пикс. и выровним его посередине экрана.
теперь нужно добавить в этот блок еще пару блоков, зеленый и серый с высотой и шириной 100 пикс, у серого блока высота 120 пикс.
Видно, что блоки располагаются в общем потоке снизу вверх, в том порядке, в котором они встречаются в коде, сначала зеленый затем серый в конце голубой. Давайте зеленому блоку зададим свойство float:left , чтобы серый и голубой блоки игнорировали его.
как видно серый блок проигнорировал зеленый блок и встал под него, зеленый блок, как бы сам по себе, голубой блок выстроился за серым. Зададим обтекание всем блокам.
Видно, что блоки выстроились один за другим в том порядке, в котором они идут в коде. Давайте попробуем расположить два блока друг за другом, а третий как обычно ниже. Для этого нужно убрать у третьего блока свойство float:left , но этого недостаточно, так как он залезет под первые два блока, в чем мы убедились раньше. Чтобы этого не произошло нужно задать третьему блоку свойство clear:both ;
Вот такая структура получилась, при задании ширины блокам учитывался тот факт, что рамка 1 пикс. увеличивает размеры блока, поэтому размер хедера задан 398 пикс. а не 400 пикс.
Достоинства и недостатки блочной верстки:
- Меньший вес страницы за счет меньшего кода (+ )
- Реализация сложного дизайна с перекрывающимися блоками (+ )
- Трудно освоить, табличная верстка проще (- )
- Чаще приходится решать вопросы кроссбраузерности. блоки могут перекрываться при изменении разрешения экрана, масштабировании (- )
Лично я начинал с табличной верстки сейчас пользуюсь блочной, освоил ее достаточно давно, это было легко, хотя она и имеет ряд недостатков мне привычнее и проще пользоваться именно блочной версткой.
На этом все дорогие читатели, заходите по-чаще.
Была рассмотрена резиновая табличная вёрстка, а в этом уроке будет продемонстрировано создание шаблона для сайта с помощью блоков.
В качестве примера будет сделана фиксированная (жёсткая) блочная вёрстка – то есть при изменении размеров окна веб-браузера сайт будет сохранять свои размеры. Шаблон будет иметь: шапку; блок для контента; левый блок; и подвал;
Хоть выше и было названо 4 блока – на самом деле их будет больше. Для того что бы технология блочной вёрстки была понятна – рассмотрим каждый блок и идентификатор применяемый к нему по отдельности:
#main_pole { … } () – внутри этого блока находится вся конструкция сайта. С помощью стилей применяемых к нему определяется положение сайта относительно окна веб-браузера, длина шапки и поля с контентом (но не подвала);
#header { … } () – это блок располагается над всеми остальными и равен длине всего сайта. В нём актуально разместить название сайта. С помощью стилей ему можно задать: высоту, цвет отступы и другие параметры;
#middle { … } () – большой блок внутри которого находятся ещё три. С помощью стилей можно задать ширину поля с контентом и отступ от подвала сайта. В нём актуально разместить горизонтальное меню, так как оно будет растянуто в длину всего сайта и находиться над полем для контента и правой колонкой.
В селекторе #middle:after { … } будет три атрибута, значение которых наврятли вам известны:
Сам элемент (свойство) :after – означает, что содержимое блока, к которому применено это свойство будет отображаться после него. То есть если написать вместо:after свойство:before – то подвал сайта "залезет" под шапку поверх других блоков (можете попробовать);
Content: " " - отображать весь написанный контент после этого блока;
Clear: both - задаёт, что с обеих сторон элемента запрещено его обтекание другими элементами;
Display: table – данный атрибут придаёт элементу свойство блочной таблицы;
#container { … } () – разместив что-либо в этом блоке, это будет отображаться поверх всего контента, но на одном уровне с правой колонкой.
#content { … } () – В этом блоке должен располагаться весь основной контент (статьи, таблицы, картинки ссылки и прочее). В селекторе прописан единственный параметр, задающий отступы.
#right_bar { … } () – правая колонка. В селекторе значение параметра margin-left: … должно быть равно ширине (длине) блока.
#footer { … } () – подвал сайта, в котором размещают счётчики и ссылки на обратную связь, службу поддержки и другое. В селекторе значение параметра width: … должно быть равным значению width: … в #main_pole.
Создайте файл div_style.css и поместите в него ниже написанный код. Это файл стилей может являться шаблоном для страниц вашего будущего сайта.
#main_pole { width : 1000 px ; margin : 0 auto ; } #header { height : 140 px ; background : #F0CF63 ; padding : 0 0 0 16 px ; } #middle { width : 100 % ; padding : 0 0 70 px ; height : 1 % ; position : relative ; } #middle :after { content : "" ; clear : both ; display : table ; } #container { width : 100 % ; float : left ; background : White ; } #content { padding : 0 250 px 0 10 px ; } #right_bar { float : left ; width : 240 px ; margin-left : -240 px ; background : #F1FFE4 ; } #footer { width : 1000 px ; margin : -70 px auto 0 ; height : 70 px ; background : #B6E781 ; font-size : 12 px ; } p { margin : 16 px 10 px 20 px ; } a { color : Green ; outline : none ; text-decoration : underline ; } a :hover { text-decoration : none ; }Теперь создайте файл index_test.html . В нём будет размещена структура шаблона, а так же некоторые примеры, демонстрирующие работу стилей. В частности будет размещено горизонтальное выпадающее меню, создание которого рассматривалось в одном из предыдущих уроков . В голове страницы (
) подключаются стили для страницы и меню. <html > <head > <title > Шаблон для сайта - фиксированная блочная вёрсткаtitle > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <link rel="stylesheet" href="page_style.css" type="text/css" /> <link rel="stylesheet" href="drop_vert_menu.css" type="text/css" /> head > <body style="background-color: WhiteSmoke" > <div id="main_pole" > <div id="header" > <br > <br > <h1 style="color: White;" > Название сайтаh1 > div > <div id="middle" > <ul class="menu" > <li > <a href="#" > Главнаяa > li > <li > <a href="#" > Второй пунктa > <ul > <li > <a href="#" > Подпункт 1a > li > <li > <a href="#" > Большое подменю 2a > li > <li > <a href="#" > Подпункт 3a > li > ul > li > <li > <a href="#" > Пункт 3a > li > <li > <a href="#" > Пункт 4a > <ul > <li > <a href="#" > Подпункт 4a > li > <li > <a href="#" > Подпункт 5a > li > <li > <a href="#" > Подпункт 6a > li > <li > <a href="#" > Подпункт 7a > li > <li > <a href="#" > Подпункт 8a > li > ul > li > ul > <div id="container" > <div id="content" > <h2 align="center" > Демонстрация h2 > <p > Текст между тегами <b > b > , для которых прописаны стилевые параметры.p > <i > Наклонный текст между тегами <b > b > , для которых стили не прописаны.i > <br > <br > <a href="#" > Ссылка зелёного цветаa > <br > <br > <big > Большой текст без применения стилей.big > <br > <br > <p > Контент заключённый между тегов , в котором уже с другими отступами отображаются: <br > <br > <i > Наклонный текст между тегами .i > <br > <br > <a href="#" > Ссылка зелёного цветаa > <br > <br > <big > Большой текст между тегов .big > <br > <br > <div style="height:78px; width:512px; margin: auto; background-color:#EDEDED; border-left:4px solid #8B8B8B;" align="center" > <q > Целью школы всегда должно быть воспитание гармоничной личности, а не специалиста.q > <p align="right" > <sub > А. Эйнштейнsub > p > div > p > div > div > <div id="right_bar" > <h4 align="center" > Новостная колонкаh4 > <table align="center" width="230" border="1" cellspacing="2" cellpadding="8" > <tr > <td > Первая новостьtd > tr > <tr > <td > Вторая новостьtd > tr > <tr > <td > Интересные событияtd > tr > <tr > <td > Архив новостейtd > tr > table > <br > <br > <p > Это правая колонка светлозелёного цветаp > div > div > <div id="footer" > <br > <b > Тут могeт быть размещены счётчикиb > div > div > body > html >
Вы можете и сами дописать необходимые стилевые атрибуты для блоков, опираясь на информацию изложенную в уроках по CSS и HTML .
Таким образом можно сделать простой движок для своего сайта, если каждый из блоков поместить в отдельный файл и подключать его с помощью PHP – Так можно будет внести изменения только в одном файле, а они отобразятся во всех файлах, где объявлено подключение этого элемента. (php include будет работать, только если html-страница находится на хостинге или домашнем сервере).
Div верстка является актуальной моделью создания сайтов .
В сети постоянно появляются новые сайты - новостные порталы, блоги и личные странички. Практически каждый из них создается на основе блочной модели, основу которой составляют блоки DIV. Сегодня мы разберемся в этой технологии, рассмотрим основные нюансы div верстки.
Поток HTML документа
Если вспомнить о том, что язык HTML позволяет структурировать гипертекстовую информацию, то становится понятно, что любой сайт, по своей сути, является набором блоков: картинки, текст, ссылки и тд. Мы сейчас не говорим конкретно о блоках DIV, но это тесно связанные темы.
Итак, мы имеем некий поток данных, из которых и собирается HTML страница. На данный момент различают два типа структурных элементов: блочные и строчные. Блочные, в нормальном HTML потоке располагаются друг за другом в вертикальном порядке. При этом, по умолчанию ширина блока занимаем все доступное место, относительно страницы или родительского элемента. В свою очередь, строчные элементы располагаются друг за другом в горизонтальном порядке.
Основными представителями этих двух категорий, являются тэги div и span .
Соответственно, если речь идет о нормальном HTML потоке, все блоки div будут располагаться друг под другом, а span в линию.
Как вы понимаете, строчными элементами не получится создать нормальную разметку для сайта. Поэтому несколько лет назад, на смену табличной верстке, решили применять верстку на основе блоков DIV.
DIV верстка сайта
Итак, для разметки сайта стали использовать блоки DIV. Используя их, можно была расчертить основной макет, и создать дополнительные блоки для всех необходимых типов контента.
Давайте посмотрим этот процесс, на примере стандартной страницы, включающей в себя шапку, блок контента, сайдбар и футер.
Это классический вариант. В шапке сайта чаще всего располагается логотип, в боковом блоке навигационные ссылки. Основной блок используется для вывода информации - статьи, описании компании, фото архив и тд. В нижнем блоке можно вставить адрес, контакты и прочую служебную информацию.
Как вы видите на картинке, для верстки макета у нас используются следующие основные блоки:
- header
- content
- footer
Блок Main используется как контейнер для всего содержимого. Header - шапка сайта. Nav - блок навигации. Content - основная информация и контент. Footer - подвал сайта.
Каждый из этих блоков является контейнером DIV . Но исходя из теории, блоки должны идти друг за другом. Нам же нужно получить рассмотренный выше макет, чтобы блоки имели следующую структуру:
- MAIN
- header
- content
- footer
И плюс ко всему, располагались бы на странице так же, как мы видим на шаблоне. Как же нам добиться этого? Для этой цели мы будем использовать свойства для блоков DIV, которые позволят нам расположить их нужным образом, относительно друг друга, и страницы в целом.
Но для начала, давайте создадим саму HTML основу нашего макета, и дадим блокам наименования, чтобы можно было работать с таблицами стилей.
HTML каркас
Если пропустить все служебные теги, то каркас нашего сайта будет выглядеть вот так.
Для каждого блока у нас назначен класс. С его помощью мы будет задавать стили для блока - это поможет нам добиться нужного расположения на странице.
Самое время познакомится со стилями и свойствами, которые используются для div верстки сайта.
CSS стили
Если кто-то еще не знает, в сайтостроении уже давно используют таблицы стилей CSS. С их помощью можно изменять любой элемент на страницы. Это касается как визуального оформления для блока, так и его месторасположения и масштаба.
Float
Для начала, давайте познакомимся со свойством, которое позволяет расположить блок DIV справа или слева на странице или относительно родительского контейнера.
Небольшое отступление . Всегда когда мы будет назначать стиль для блока, он будет изменять его свойства (размер, расположение), относительно родительского контейнера.
Свойство float имеет четыре значения: none, right, left, inherit.
Нас интересует значение "слева " и "справа ".
Значение float указывает на то, с какой стороны будет отображаться наш блок. Все прочие блоки будут обтекать его с противоположной стороны.
В нашем случае, для блока навигации мы должны указать значение left , а для основного контента значение right . Вот как это будет выглядеть в файле стилей:
Nav { float:left; } .content { float:right; }
Кстати, можно задать свойство только для блока навигации. Блок с контентом будет автоматически расположен справа от навигации. Это будет достигнуто, благодаря обтеканию, которое получается при задании свойства float .
Отступы в CSS: margin и padding
Теперь давайте разберемся с двумя важными свойствами, используемыми при верстке на основе блоков div . Они отвечают за отступы. Понять суть их работы проще всего на примере.
Давайте представим, что нам необходимо сделать таким образом, чтобы наш основной блок MAIN , имел небольшой отступ от шапки сайта. Это можно реализовать, если назначить для блока div с классом main , свойство margin . Оно отвечает за внешние отступы блока.
Свойство margin имеет следующие значения: [значение | проценты | auto] {1,4} | inherit.
Таким образом, вы можете указать отступ в пикселях, в процентах, поочередно для каждой стороны.
Есть возможность задавать только определенный отступ, например с верхней стороны. Это как раз наш случай. Вот как это будет реализовано:
Main { margin-top:10px; }
Теперь наш блок main будет иметь верхний отступ в 10 пикселей.
Теперь давайте оформить блок с навигацией и контентом. Представьте, что у нас уже есть готовый сайт. Все ссылки в навигации вплотную прилегают к левому краю страницы. А текст в блоке контента наоборот, вплотную прилегает к правой стороне. Довольно не приятное оформление. Нам нужно сделать внутренние отступы.
За это отвечает свойство padding , имеющее следующие значения: [значение | проценты] {1, 4} | inherit
Здесь тот же принцип, что и со свойством margin - можно задавать отступ для каждой стороны отдельно.
Nav { float:left; padding-left: 15px; } .content { float:right; padding-right: 20px; }
Используя эти основные свойства, вы сможете добиться нужного расположения блоков DIV . В итоге вы получите готовый макет сайта, и останется только заполнить его нужной информацией.
Видео к статье :
Заключение
Мы рассмотрели только основные свойства. В действительности их существует намного больше. Но в любом случае, представленная информация будет использоваться в div верстке всегда.
Зачем искать информацию на других сайтах, если все собрано у нас?
Изначально веб-страницы представляли из себя просто набор тегов. Элементы отображались в том порядке, в котором они записывались в HTML коде. Визуально, информацию разделяли с помощью горизонтальных линий либо отступов.
Вторым этапом построения сайтов стало построение на основе таблицы. Сайт представлял собой таблицу в ячейки которой вставлялась информация. Это позволяло реализовывать колонки и отдельные блоки, однако удобство работы с версткой на основе таблицы довольно низкое, не обладает гибкостью. Также, табличная верстка не пригодна для построения адаптивных сайтов.
Третий, наиболее современный подход, к верстке сайтов заключается в построении сайта с помощью блоков, или блочной верстке . В англоязычных источниках такой подход называют Layouts. Блоки при таком подходе располагаются один под другим, либо меняют их порядок отображения с помощью позиционирования в CSS
Блочная верстка — это подход, при котором сайт строят на основе блоков, в качестве блоков выступают теги div. Теги div имеют некоторые свойства:
- div — блочный элемент, поэтому, если не задана ширина, растягивается на всю ширину окна браузера;
- div — высота блока, если она не задана, равна содержимому. Пустой блок div имеет высоту — 0 px, поэтому не отображается на странице;
- div не имеет оформления. Чтобы его увидеть нужно задать ему стили в CSS.
- div не несет смысловой нагрузки, это просто способ структурировать сайт
- div — может содержать любое количество вложенных элементов. Так в div можно вкладывать другие блоки div, заголовки, параграфы, изображения и многие другие элементы
В HTML блок div записывается
При подставлении полных параметров:
border: 2px solid red;
т.е. можно задать оформление конкретной границе.
Здравствуйте, дорогие любители айтишной тематики. Сегодня основной способ создания красивых многостраничных сайтов основывается на блочной верстке при помощи тега div.
В случае незнания основных тонкостей работы с данным инструментом увы и ах, но привлекательного адаптивного дизайна вы не получите никак. Поэтому данная статья посвящена теме «Как сделать блок в html». Я подробно опишу, как самому с нуля создать блочные объекты на странице, каким образом оформить фон и дизайн блоков, и самое главное расскажу, как подключить таблицу стилей. Итак, начнем!
Особенности блочных элементов
Блоки – это прямоугольные элементы, которые занимают всю доступную ширину страницы, всегда начинаются с новой строки и по умолчанию автоматически рассчитывают высоту в зависимости от содержимого.
Все блочные элементы состоят из 4 свойств, которые на подобие рамок окружают содержимое объекта.
Главным в блоке выступает контент .
Вокруг него расположены поля, которые называются padding . Поля отвечают за расстояние между контентом объекта и его внутренним краем границ.
После идут сами границы, которые именуются английским словом border .
И, наконец, последней рамкой вокруг всего перечисленного выступает margin –отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно.
В качестве примера запрограммируем 2 и заполним созданные элементы текстом.
На данный момент в этот код отобразится как обычные два предложения. Для оформления дизайна блоков необходимо подключить таблицу стилей и языком css задать определенные свойства.
Внесем-ка ярких красок в обыденную жизнь html
Для того чтобы блочные объекты выглядели интересно и привлекательно, нам в обязательном порядке стоит подключить каскадную таблицу стилей.
Для этого в контейнере head после тега