Блочная верстка страницы. Про тег div замолвим мы слово. Фиксированный дизайн для трех колонок
Была рассмотрена резиновая табличная вёрстка, а в этом уроке будет продемонстрировано создание шаблона для сайта с помощью блоков.
В качестве примера будет сделана фиксированная (жёсткая) блочная вёрстка – то есть при изменении размеров окна веб-браузера сайт будет сохранять свои размеры. Шаблон будет иметь: шапку; блок для контента; левый блок; и подвал;
Хоть выше и было названо 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
и поместите в него ниже написанный код. Это файл стилей может являться шаблоном для страниц вашего будущего сайта.
Теперь создайте файл 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.
В случае незнания основных тонкостей работы с данным инструментом увы и ах, но привлекательного адаптивного дизайна вы не получите никак. Поэтому данная статья посвящена теме «Как сделать блок в html». Я подробно опишу, как самому с нуля создать блочные объекты на странице, каким образом оформить фон и дизайн блоков, и самое главное расскажу, как подключить таблицу стилей. Итак, начнем!
Особенности блочных элементов
Блоки
– это прямоугольные элементы, которые занимают всю доступную ширину страницы, всегда начинаются с новой строки и по умолчанию автоматически рассчитывают высоту в зависимости от содержимого.
Все блочные элементы состоят из 4 свойств, которые на подобие рамок окружают содержимое объекта.
Главным в блоке выступает контент
.
Вокруг него расположены поля, которые называются padding
. Поля отвечают за расстояние между контентом объекта и его внутренним краем границ.
После идут сами границы, которые именуются английским словом border
.
И, наконец, последней рамкой вокруг всего перечисленного выступает margin
–отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно.
В качестве примера запрограммируем 2 и заполним созданные элементы текстом.
Заголовок
В этом блочном элементе разместим текст первого объекта.
А вот в этом блочном элементе разместим текст второго объекта.
На данный момент в этот код отобразится как обычные два предложения. Для оформления дизайна блоков необходимо подключить таблицу стилей и языком css задать определенные свойства.
Внесем-ка ярких красок в обыденную жизнь html
Для того чтобы блочные объекты выглядели интересно и привлекательно, нам в обязательном порядке стоит подключить каскадную таблицу стилей.
Для этого в контейнере head после тега необходимо добавить строку:
</i><br></p><blockquote>
<p><link rel="stylesheet" href="style.css"></p>
</blockquote>
<p>Сам по себе элемент <link> располагается только внутри тега <head> и устанавливает связь с внешними файлами, отвечающими за стили.</p>
<p>Настало время задать цветное оформление и расположение блокам.</p>
<p>Первый блок я решил оформить в красных цветах с жирными границами и сделать его полупрозрачным.</p>
<p>Второй же блок – полностью видимый, желтого цвета с тонкими границами и с закругленными углами. Замечу, что блоки не являются фиксированными и текст в них выравнивается по ширине, а не располагается по центру. За все видоизменения отвечает ниже представленный css-код.</p>
<table><tr><td class="line_numbers"> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</td><td class="code"> .element1 {
opacity: 0.7;
background: #edab92;
float: left;
width: 310px;
border: 4px solid red;
padding: 6px;
padding-right: 15px;
}
.element2 {
width: 310px;
float: left;
background: #fc0;
border: solid 1px grey;
position: relative;
padding: 6px;
left: -65px;
top: 55px;
border-radius: 10px;
}
</td>
</tr></table><p>Element1 {
opacity: 0.7;
background: #edab92;
float: left;
width: 310px;
border: 4px solid red;
padding: 6px;
padding-right: 15px;
}
.element2 {
width: 310px;
float: left;
background: #fc0;
border: solid 1px grey;
position: relative;
padding: 6px;
left: -65px;
top: 55px;
border-radius: 10px;
}</p>
<blockquote>
<p>Для того чтобы вы смогли лицезреть данный пример во всей красе во вкладке , создайте простой текстовый файл и внесите в него выше написанный текст. После сохраните документ с названием «style.css», обязательно проверьте, совпадает ли название документа со значением атрибута тега <link> href="style.css".</p>
</blockquote>
<p>Думаю, вы догадались, что в случае несовпадения, внешний документ с описанием стилей не будет найден, вследствие чего изменения не вступят в силу.</p>
<p>Теперь давайте разберем строки css-кода. Для наглядности я структурировал все в таблицу с двумя колонками.</p>
<table style="height: 466px;" width="755"><tbody><tr><td width="224"><b><u>Свойство
</u>
</b>
</td>
<td width="555"><b><u>Значение
</u>
</b>
</td>
</tr><tr><td width="224">opacity
</td>
<td width="555">Отвечает за прозрачность объекта. При opacity равному 0 элементы становятся полностью прозрачными, при 1 – полностью видимыми.
</td>
</tr><tr><td width="224">width
</td>
<td width="555">Отвечает за ширину блочных элементов.
</td>
</tr><tr><td width="224">background
</td>
<td width="555">Задает характеристические параметры фона, который в свою очередь может задаваться как цветом, так и картинкой.
</td>
</tr><tr><td width="224">border
</td>
<td width="555">Позволяет установить толщину, цвет и стиль границ вокруг объекта.
</td>
</tr><tr><td width="224">float
</td>
<td width="555">Задает выравнивание элемента. Остальные объекты по умолчанию обтекают данный. Можно задать значения: left, right, none (не задает обтекание элементов) или inherit (повторяет значение родительского объекта).
</td>
</tr><tr><td width="224">border-radius
</td>
<td width="555">Способствует округлению углов блока. Можно указывать как одинаковый радиус для всех углов, так и уникальный для каждого.
</td>
</tr><tr><td width="224">top
</td>
<td width="555">Определяет расстояния между верхними границами родительского элемента и дочернего.
</td>
</tr><tr><td width="224">left
</td>
<td width="555">Определяет расстояния между левыми границами родительского и дочернего элементов.
</td>
</tr></tbody></table><p>Обратите внимание на строку в коде примера <b>position: relative
</b> в element2. Так как этому атрибуту, определяющему позиционирование объекта, задано значение relative, то расположение самого объекта будет меняться не от координат верхнего края браузера, а от координат верхней границы первого блока element1.</p>
<p>Вот почему при задании <b>top = 55px
</b> и <b>left = -65px
</b> второй блочный элемент сдвинулся вниз на 55 пикселей и вправо на 65 пикселей от границ первого блока.</p>
<p>Кстати, особо внимательные могли заметить, что left = -65px и right = 65px – это одно и то же.</p>
<h2>А что же HTML 5</h2>
<p><img src='https://i2.wp.com/romanchueshov.ru/wp-content/uploads/2016/06/HTML5.jpg' align="center" width="100%" loading=lazy></p>
<p>Напоследок хотел бы добавить, что в современной платформе html 5 есть нововведенные блочные теги <b><nav>
</b>, <b><article>
</b>, <b><footer>
</b>, <b><header>
</b> и другие, которые заменяют привычный div. Их суть применения для человека не отличается ничем, однако они облегчают работу машин.</p>
<p>Ранее в книге мы уже несколько раз упоминали о том, что верстка сайтов таблицами канула в Лету, и ее успешно заменила блочная верстка. HTML-таблицы должны использоваться сугубо по прямому назначению (структурирование и отображение данных с распределением по строкам и столбцам), но никак не для создания макета веб-страницы и организации всего ее контента.</p>
<p>Что касается оформления внешнего вида сайта, то в современной веб-разработке HTML-код должен содержать лишь теги и контент в них, а стилевые правила необходимо размещать отдельно от HTML, в файлах CSS. Inline-стили, которые прописываются прямо в веб-документе - это исключение из правил, к которому стоит прибегать лишь по очень уважительным причинам.</p>
<p>Помимо удобства, вышеописанный подход обеспечивает более быструю и легкую отладку сайта, а также дает возможность работать над проектом сразу нескольким разработчикам одновременно: дизайнеру, верстальщику, программисту. За счет этого, соответственно, повышается и скорость разработки.</p>
<h2>Блочная верстка с <div></h2>
<p>С помощью разметки определяется расположение элементов на веб-странице. Например, мы создаем шапку сайта, внутри которой размещаем необходимый нам контент (логотип, номера телефонов, навигационное меню и т. п.). Точно так же мы поступаем с основным разделом веб-страницы, а также боковой панелью и футером. Все эти элементы, по сути, являются определенными HTML-тегами. И тегом номер один в блочной верстке является тег <div> .</p>
<p>Элемент <div> можно назвать своеобразным фундаментом для построения веб-страниц. Изначально он ничем не выделяется внешне, кроме разве что того факта, что это блочный элемент, который по умолчанию занимает всю ширину документа, а следующий за ним элемент начинается с новой строки.</p>
<p>Тег <div> универсален и часто служит контейнером для других HTML-элементов. Например, шапка сайта, футер либо сайдбар - это зачастую не что иное, как блок div , содержащий в себе такие же блоки и/или другие HTML-элементы.</p>
<p>Через различные классы и идентификаторы div-блокам задается соответствующее CSS-оформление. К примеру, чтобы было удобнее писать стили для шапки сайта, можно добавить к блоку класс.header , а для футера - класс.footer .</p>
<p>Использование тегов <div> в верстке не означает, что нужно отказаться от других тегов. Если для решения ситуации иной тег подходит лучше, используйте его. Яркий пример - тег длинной цитаты <blockquote> . Согласитесь, нет смысла использовать вместо него <div> , ведь <blockquote> прекрасно справится со своей задачей. Кроме того, это решение будет более правильным с точки зрения семантики.</p>
<h2>Блочная верстка с HTML5</h2>
<p>И, раз уж мы заговорили о семантике в веб-документах, стоит упомянуть и о тегах, появившихся в HTML5. Новые семантические теги были специально созданы для группировки контента конкретного типа.</p>
<p>Например, шапка сайта может помещаться в HTML5-тег <header> , а подвал - в похожий тег <footer> . Кроме того, существует еще множество других семантических тегов - <nav> , <section> , <article> и т. д. Данными тегами можно заменять обычные теги <div> для объединения элементов.</p>
<p>Как вы могли догадаться, HTML5-теги дают более точную информацию о том, что в них содержится. Это дает определенные преимущества в плане идентифицирования роли того или иного контента веб-страницы, однако со стороны стилизации ничего не меняется: вы можете точно так же применять CSS-стили к семантическим тегам, как применяете их к простым блокам <div> .</p>
<p>Авторский цикл статей, посвященный <b>основам блочной верстки сайтов
</b>. Это первое, с чего стоит начать изучение темы <b>создания сайта
</b>. Уроки будут полезны тем, кто хочет изучить основы <b>HTML и CSS
</b> не только в теории, но на практике.</p>
<p>По ходу изучения темы мы создадим сайт, обычный сайт, без особых наворотов, но вполне симпатичный.</p>
<p>В уроках я просто и доступно рассказываю о блочной верстке сайта и не только. Если вы хотите быстро разобраться в основах <b>верстки сайтов
</b>, то этот цикл статей будет именно то, что вам нужно.</p>
<h3>Что такое блочная верстка?</h3>
<p>Что такое <b>блочная верстка сайта
</b> и с чем ее едят?</p>
<p>Ранее сайты верстали при помощи таблиц. Каждый элемент страницы, будь то заголовок, текст или картинка, располагался в собственной ячейке. Эти ячейки кучно роились в других, более крупных ячейках, а те в свою очередь лежали в главной ячейке, то есть в самой странице сайта.</p>
<p>Табличная верстка сейчас уже морально устарела, хотя очень многие вебмастера продолжают ее использовать. Большим минусом ее является тяжеловесный код. Ведь каждую мало-мальскую ячейку нужно обозначить определенными тэгами.</p>
<p><b>Блочная верстка
</b> - совсем другая песня. Здесь все элементы страницы расположены в специальных блоках, которые называются div. По своей сути они чем-то похожи на те же таблицы. Коробка - она и в Африке коробка. Но блоки гораздо удобнее, проще и функциональнее.</p>
<p><b>Блок
</b> в верстке сайта - это обычная прямоугольная область, которая обладает рядом свойств, таких как: рамка, поля и отступы. Содержимое блока может быть чем угодно - кусок текста, картинка, список, форма для заполнения, меню навигации и т.п.</p>
<p><img src='https://i1.wp.com/websovet.com/wp-content/uploads/2007/12/blok.gif' align="center" width="100%" loading=lazy></p>
<p><b>Рамка (border)
</b> - это контур блока, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).</p>
<p><b>Поля (padding)
</b> - отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.</p>
<p><b>Отступы (margin)
</b> - это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.</p>
<p>Блоки, как и таблицы, всегда располагаются на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально в одну линию, то в их свойствах задаётся такой параметр как «<i>обтекание
</i>» (float). Но об этом чуть позже.</p>
<h3>Блочная верстка сайта. Тэги</h3>
<p><b>Тэг
</b> - это особая конструкция языка HTML. Различают <b>открывающий
</b> и <b>закрывающий
</b> тэги. Не путайте их с хэштэгами из соцсетей, или метками (тегами) на сайтах, это разные вещи!</p>
<p>В самом простом случае тэг - это как деталь детского конструктора, которая имеет своё строгое предназначение: планка - значит планка, колесо - значит колесо и ничто иное. К примеру тэг абзаца:</p>
<p><p>Текст абзаца.</p></p>
<p>всегда обозначается буквой p и никак иначе. Это его имя.</p>
<p>Тэги всегда заключены в угловые скобки. Как видно из примера, есть открывающий и закрывающий тэг. У закрывающего тэга перед именем добавлен «слэш» - косая черта, наклоненная вправо / .</p>
<p>Не все тэги имеют закрывающую пару. Например тэг изображения img его не имеет вовсе. Но чтобы соответствовать современным стандартам и требованиям спецификации XHTML, ему все-таки добавляют перед закрывающей угловой скобкой пробел со слэшем. Выглядит это примерно так:</p>
<p><img src='https://i0.wp.com/images/risunok.jpg' loading=lazy></p>
<h4>Тэг div</h4>
<p>Тэг div - это основа блочной верстки. Это те самые кубики, из которых и строится весь сайт. Этот тэг нейтральный. В отличие от стандартных HTML-тэгов, которые строго привязаны к своему содержимому (p - к абзацам, a - к ссылкам, img - к изображениям), тэг div может вмещать что угодно и сколько угодно всего этого добра. Считайте его эдакой большой коробкой, куда свалены все игрушки.</p>
<p>Тэг div используют для задания <i>функциональных областей на странице
</i>. Например, таких как: «шапка» (header), блок навигации, блок основного содержимого, «футер» (footer) или подвал по-нашему.</p>
<p>У тэга div , как и у любого другого, имеются свои собственные атрибуты.</p>
<p><b>Атрибут
</b> - описательная характеристика тэга. То есть, что он может делать и каким образом. Например, возьмём тэг изображения:</p>
<p><img src='https://i2.wp.com/images/risunok.jpg' height="50px" width="200px" loading=lazy></p>
<p>В данном случае src , width , height , alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны <b>значения
</b> атрибутов.</p>
<p>Расшифровать такую запись несложно. Тэг указывает, что в данном месте страницы нужно прилепить изображение risunok.jpg из папки images . Ширина рисунка 200 пикселей, высота 50 пикселей. И до кучи добавлен альтернативный текст, который поясняет, что изображено на рисунке.</p>
<p>Кстати, альтернативный текст - это не блажь, а тоже необходимое требование. Не все пользователи сети обладают хорошим зрением. Кто-то пользуется программой распознавания и чтения текста. А кто-то просто выключает показ картинок в браузере. Вот для них и существуют альтернативные подписи к рисункам.</p>
<p>Если же их нет смысла подписывать (например маркер списка или стрелка какая-нибудь), то у атрибута alt оставляют пустое место между кавычками.</p>
<h4>Атрибуты тэга div</h4>
<p>Атрибутов у тега div всего два:</p>
<p>id - атрибут, позволяющий придать тегу <b>уникальное
</b> значение, то есть такое, которое на странице используется <b>только один раз
</b>. Например, header или footer .</p>
<p>Таким образом мы сможем задать далее в листе стилей для тэга div с атрибутом id и значением header (шапка) одни настройки, а для подвала footer совсем другие. И браузер верно распознает, что вот этот кусок текста относится к «шапке» и будет набран, например, крупным и красным шрифтом, а вот этот к «подвалу» и будет набран мелким и серым шрифтом. И никакой путаницы!</p>
<p>class - атрибут, позволяющий одно и то же значение придать нескольким элементам. Например, всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использовать, поэтому мы применяем class .</p>
<p>На первый раз, думаю, достаточно. Если что-то непонятно по блочной верстке сайтов, спрашивайте в комментариях.</p>
<p>Продолжение следует. Оставайтесь на связи!</p><br><br><br><br><br>
61.1K
<p>Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.</p>
<h2>Верстка сайта – ремесло для посвященных</h2>
<p>Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:<br></p><br>
Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html
кода и таблиц css
скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.
<p>В процессе верстки кодом html происходит разбивка «скелета
» сайта на части. А с помощью css
(<span>каскадных таблиц стилей
</span>) задаются размеры его «костей
», цвет и расположение.</p>
<p>Различают несколько видов верстки:</p>
<p>I. Табличная
– ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:<br></p><br>
Также к основным недостаткам табличного кода относится его долгая загрузка и плохая индексация содержимого поисковыми системами.
<p>Содержимое страницы, сверстанной на основе таблиц, не будет отображено до тех пор, пока не загрузятся все данные. Блочная верстка позволяет отображать каждый загруженный элемент отдельно.</p>
<p>Плохая индексация табличных страниц объясняется большими промежутками между блоками текста, расположенного в разных ячейках таблицы.</p>
<p>Теперь табличная верста редко используется в качестве основного метода создания сайтов. Сейчас ее применяют лишь для структурирования табличных данных и расположения графических изображений.</p>
<p>II. Блочная
– в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:</p>
<ul><li>Отделение стиля элементов от кода html
;</li>
<li>Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.</li>
<li>Лучшая индексация поисковиками;</li>
<li>Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;</li>
<li>Легкость создания визуальных эффектов (<span>выпадающих меню, списков, всплывающих подсказок
</span>).</li>
</ul><p>Основным недостатком блочной верстки является некая «<span>двусмысленность
</span>» понимания ее кода различными браузерами. Поэтому часто html
страницы приходится «доводить
» путем использования специальных хаков.</p>
<p>С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).</p>
<p>Действие хака является узкоспециализированным и решает проблему некорректного отображения лишь в одном браузере.</p>
<p>Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html
в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css
:<br></p>
<h3>Как происходит блочная верстка?</h3>
<p>Перед началом верстки готовый psd
макет сайта в графическом редакторе разрезают на блоки (слои
). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:<br></p><br>
Для примера возьмем вот такой макет сайта, созданный в Photoshop
. Сначала в текстовом редакторе с помощью div
задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id
. Получается такая структура:<br><br>
Затем к готовой структуре сайта на html
строкой <link rel=»stylesheet» type=»text/css» href=»style.css» /> прикрепляем файл css
. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.
<p>Более подробно ознакомиться со всеми свойствами css можно из технической документации к языку.</p>
<p>Полный код примера index.html
:</p>
<p><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример блочной верстки
