Блочный дизайн. Плиточный дизайн
Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена . Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.
Отличия блочной вёрстки от табличной
Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега Блочная вёрстка лишена недостатков табличной - поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки Единственный ощутимый минус блочной вёрстки - сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем. В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны. Каждая часть страницы помещается в свой блок Конечный HTML-документ представляет собой набор блоков Результат:
Рис.2. Жесткая блочная верстка из двух колонок При фиксированном дизайне для макета из трех колонок можно выделить два основных подхода построения модульной сетки: Рассмотрим первый случай. На рис. 3
— результат использования свойства для трехколонного макета. На самом деле используется 6 слоев — отдельно для заголовков колонок и отдельно для самих колонок. Рис. 3. Фиксированный дизайн в три колонки Пример:
создать веб-страницу с макетом из трех колонок, изображенную на рис. 3
. Использовать приемы фиксированного блочного макетирования Получим следующую html-структуру:
2. Добавление стилей для заголовков (селектор header...) и колонок (селектор col...)
#header1, #header2, #header3, #col1, #col2, #col3 {
width: 250px; /* Ширина колонок */
} #header1, #header2, #header3, #col1, #col2, #col3 {
width: 250px; /* Ширина колонок */
padding: 5px; /* Поля вокруг текста */
margin-left: 5px; /* Отступ слева */
} #header1, #header2, #header3, #col1, #col2, #col3 {
...
float: left; } #header1, #header2, #header3, #col1, #col2, #col3 {
...
border: 1px solid black; /* Рамка вокруг слоя */
font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */
font-weight: bold; font-size: 80%; /* Размер шрифта */
color: white; /* Цвет текста заголовка */
} Получим код: #header1, #header2, #header3, #col1, #col2, #col3 {
width: 250px; /* Ширина колонок */
padding: 5px; /* Поля вокруг текста */
margin-left: 5px; /* Отступ слева */
margin-top: 2px; /* Отступ сверху */
float: left; /* Состыковка колонок по горизонтали */
border: 1px solid black; /* Рамка вокруг слоя */
font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */
font-weight: bold; /* Жирное начертание текста заголовка */
font-size: 80%; /* Размер шрифта */
color: white; /* Цвет текста заголовка */
} #header1 { background: #B38541; }
#header2 { background: #008159; }
#header3 { background: #006077; }
#col1 { background: #EBE0C5; }
#col2 { background: #BBE1C4; }
#col3 { background: #ADD0D9; } Смотрим промежуточный результат:
Рис. 4. Промежуточный результат 3. Задание стиля для контейнеров
Container {
clear: both; /* Отменяет действие обтекания float */
} #col1, #col2, #col3 {
font-family: "Times New Roman", Times, serif; /* Шрифт серифный или с засечками */
font-size: 100%; /* Размер шрифта */
font-weight: normal; /* Нормальное начертание */
color: black; /* Цвет текста */
} Итоговый код: всё вместе
/* для колонок и их заголовков */
#header1, #header2, #header3, #col1, #col2, #col3 {
width: 250px; /* Ширина колонок */
padding: 5px; /* Поля вокруг текста */
margin-left: 5px; /* Отступ слева */
margin-top: 2px; /* Отступ сверху */
float: left; /* Состыковка колонок по горизонтали */
border: 1px solid black; /* Рамка вокруг слоя */
font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Жирное начертание текста заголовка */
font-size: 80%; /* Размер шрифта */
color: white; /* Цвет текста заголовка */
}
/* для колонок */
#col1, #col2, #col3 {
font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
font-size: 100%; /* Размер шрифта */
font-weight: normal; /* Нормальное начертание */
color: black; /* Цвет текста */
}
/* Цвет фона каждого слоя */
#header1 { background: #B38541; }
#header2 { background: #008159; }
#header3 { background: #006077; }
#col1 { background: #EBE0C5; }
#col2 { background: #BBE1C4; }
#col3 { background: #ADD0D9; }
.container {
clear: both; /* Отменяет действие float */
}
Результат:
Рис. 5. Результат Возьмем в качестве примера макет, состоящий из трех колонок разграниченных разделительной линией (рис. 6). Рис. 6. Позиционирование слоев для макета в три колонки с разделителем Пример:
создать веб-страницу с макетом из трех колонок с разделительной линией, изображенную на рис. 6
. Использовать приемы фиксированного макетирования с позиционированием слоев 1. Создание структуры html-кода
Поэтому структура будет простой:
2. Добавление стилей для колонок
#col1, #col2, #col3 {
width: 250px; /* Ширина колонок */
padding: 0 6px; } #col1, #col2, #col3 {
width: 250px; /* Ширина колонок */
padding: 0 6px; /* Поля по вертикали и горизонтали */
float: left; /* Обтекание слоев */
} #col1, #col2, #col3 {
width: 250px; /* Ширина колонок */
padding: 0 6px; /* Поля по вертикали и горизонтали */
float: left; /* Обтекание слоев */
}
#col1, #col2 {
border-right: 1px solid #000; /* Параметры линии справа от текста */
}
Дизайн в три колонки готов!
, то концепция блочной вёрстки основана на активном использовании универсальных тегов
- это таблица, которую нужно использовать для отображения табличных данных и не более того.
Суть блочной вёрстки
Фиксированный дизайн для трех колонок
Использование свойства float для макета в три колонки
Выполнение:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body
>
<div
class
=
"container"
>
<div
id
=
"header1"
>
Евгений Евтушенко</
div
>
<div
id
=
"header2"
>
Валерий Брюсов</
div
>
<div
id
=
"header3"
>
Эдуард Асадов</
div
>
</
div
>
<div
class
=
"container"
>
<div
id
=
"col1"
>
Мне снится старый друг,<br
/
>
который стал врагом,<br
/
>
но снится не врагом,<br
/
>
а тем же самым другом.<br
/
>
Со мною нет его,<br
/
>
но он теперь кругом,<br
/
>
и голова идет<br
/
>
от сновидений кругом.
</
div
>
<div
id
=
"col2"
>
Великое вблизи неуловимо,<br
/
>
Лишь издали торжественно оно,<br
/
>
<br
/
>
</
div
>
<div
id
=
"col3"
>
<br
/
>
<br
/
>
<br
/
>
</
div
>
</
div
>
</
body
>
который стал врагом,
но снится не врагом,
а тем же самым другом.
Со мною нет его,
но он теперь кругом,
и голова идет
от сновидений кругом.
Лишь издали торжественно оно,
Мы все проходим пред великим мимо
И видим лишь случайное звено.
Подход к проблеме все-таки один:
Желанье - это множество возможностей,
А нежеланье - множество причин.
#header1
,
#header2
,
#header3
,
#col1
,
#col2
,
#col3
{
width
:
250px
;
/* Ширина колонок */
padding
:
5px
;
/* Поля вокруг текста */
/* Отступ сверху */
float
:
left
;
/* Состыковка колонок по горизонтали */
/* Рамка вокруг слоя */
/* Не серифный или рубленый шрифт */
font-weight
:
bold
;
/* Жирное начертание текста заголовка */
font-size
:
80%
;
/* Размер шрифта */
color
:
white
;
/* Цвет текста заголовка */
}
#header1
{
background
:
#B38541
;
}
#header2
{
background
:
#008159
;
}
#header3
{
background
:
#006077
;
}
#col1
{
background
:
#EBE0C5
;
}
#col2
{
background
:
#BBE1C4
;
}
#col3
{
background
:
#ADD0D9
;
}
.container
{
clear
:
both
;
/* Отменяет действие обтекания float */
}
<style
type
=
"text/css"
>
/* для колонок и их заголовков */
#header1
,
#header2
,
#header3
,
#col1
,
#col2
,
#col3
{
width
:
250px
;
/* Ширина колонок */
padding
:
5px
;
/* Поля вокруг текста */
margin-left
:
5px
;
/* Отступ слева */
margin-top
:
2px
;
/* Отступ сверху */
float
:
left
;
/* Состыковка колонок по горизонтали */
border
:
1px
solid
black
;
/* Рамка вокруг слоя */
font-family
:
Verdana,
Arial,
sans-serif
;
/* Рубленый шрифт */
font-weight
:
bold
;
/* Жирное начертание текста заголовка */
font-size
:
80%
;
/* Размер шрифта */
color
:
white
;
/* Цвет текста заголовка */
}
/* для колонок */
#col1
,
#col2
,
#col3
{
font-family
:
"Times New Roman"
,
Times,
serif
;
/* Шрифт с засечками */
font-size
:
100%
;
/* Размер шрифта */
font-weight
:
normal
;
/* Нормальное начертание */
color
:
black
;
/* Цвет текста */
}
/* Цвет фона каждого слоя */
#header1
{
background
:
#B38541
;
}
#header2
{
background
:
#008159
;
}
#header3
{
background
:
#006077
;
}
#col1
{
background
:
#EBE0C5
;
}
#col2
{
background
:
#BBE1C4
;
}
#col3
{
background
:
#ADD0D9
;
}
.container
{
clear
:
both
;
/* Отменяет действие float */
}
</
style
>
</
head
>
<body
>
<div
class
=
"container"
>
<div
id
=
"header1"
>
Евгений Евтушенко</
div
>
<div
id
=
"header2"
>
Валерий Брюсов</
div
>
<div
id
=
"header3"
>
Эдуард Асадов</
div
>
</
div
>
<div
class
=
"container"
>
<div
id
=
"col1"
>
Мне снится старый друг,<br
/
>
который стал врагом,<br
/
>
но снится не врагом,<br
/
>
а тем же самым другом.<br
/
>
Со мною нет его,<br
/
>
но он теперь кругом,<br
/
>
и голова идет<br
/
>
от сновидений кругом.
</
div
>
<div
id
=
"col2"
>
Великое вблизи неуловимо,<br
/
>
<br
/
>
Мы все проходим пред великим мимо<br
/
>
</
div
>
<div
id
=
"col3"
>
В любых делах при максимуме сложностей<br
/
>
<br
/
>
Желанье - это множество возможностей,<br
/
>
</
div
>
</
div
>
</
body
>
который стал врагом,
но снится не врагом,
а тем же самым другом.
Со мною нет его,
но он теперь кругом,
и голова идет
от сновидений кругом.
Лишь издали торжественно оно,
Мы все проходим пред великим мимо
И видим лишь случайное звено.
Подход к проблеме все-таки один:
Желанье - это множество возможностей,
А нежеланье - множество причин.
Использование позиционирования слоев для макета в три колонки
Выполнение:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body
>
<div
id
=
"col1"
>
Иван Бунин</
br
></
br
>
</
br
>
</
br
>
</
br
>
</
div
>
<div
id
=
"col2"
>
</
br
>
Золотится отблеском окно. </
br
>
</
br
>
Белым снегом всё запушено.
</
div
>
<div
id
=
"col3"
>
И всё утро яркие и чистые</
br
>
</
br
>
</
br
>
Хризантемы на моём окне.</
br
></
br
>
1903
</
div
>
</
body
>
#col1
,
#col2
,
#col3
{
width
:
250px
;
/* Ширина колонок */
padding
:
0
6px
;
/* Поля по вертикали и горизонтали */
float
:
left
;
/* Обтекание слоев */
}
#col1
,
#col2
{
border-right
:
1px
solid
#000
;
/* Поля по вертикали и горизонтали */
float
:
left
;
/* Обтекание слоев */
}
#col1
,
#col2
{
border-right
:
1px
solid
#000
;
/* Параметры линии справа от текста */
}
</
style
>
</
head
>
<body
>
<div
id
=
"col1"
>
Иван Бунин</
br
></
br
>
На окне, серебряном от инея,</
br
>
За ночь хризантемы расцвели.</
br
>
В верхних стёклах - небо ярко-синее</
br
>
И застреха в снеговой пыли.
</
div
>
<div
id
=
"col2"
>
Всходит солнце, бодрое от холода, </
br
>
Золотится отблеском окно. </
br
>
Утро тихо, радостно и молодо. </
br
>
Белым снегом всё запушено.
</
div
>
<div
id
=
"col3"
>
И всё утро яркие и чистые</
br
>
Буду видеть краски в вышине, </
br
>
И до полдня будут серебристые </
br
>
Хризантемы на моём окне.</
br
></
br
>
1903
</
div
>
</
body
>
Рекомендуем также