Урок по блочной верстке DIV

Автор: admiral

Категория: Web » Верстка

Урок по блочной верстке DIV

рис.1

Хотите научиться верстать такие же странички и управлять блоками так как захотите? Тогда читаем урок и познаем всю красоту блочной верстки )))

У многих из начинающих верстальщиков возникают трудности с блочной версткой и возникает очень много вопросов, поэтому я и решил написать данный урок, что бы хоть немного раскрыть секреты блочной верстки начинающим верстальщикам.
В этом уроке мы затронем только чистую блочную верстку, хотя на практике иногда возникает необходимость использовать смешанную, то есть использую блочную верстку ввперемешку с табличной.
Да и еще как совет тем кто только начинает верстать, для наглядности Вы можете воспользоваться одним из визуальных редакторов.
Например Dreamweaver или FrontPage, для того чтобы сделать скриншоты для этого урока и показать наглядно что будет получаться, я воспользовался вторым (FrontPage) да и для новичка с ним думаю будет по проще, а те кто достаточно изучил HTML и привык к блокноту, то и так поймут в чем весь перец блочной верстки )))

1. Чем же отличается блочная верстка от табличной?
Отвечаю :)
Верстка блоками, с помощью такого тега как DIV, имеет ряд больших преимуществ по сравнению с версткой таблицами:
а. Дизайн сверстанный блоками быстрее загружается
б. Содержимое блоков, в отличии от содержимого ячеек таблиц отображается по мере загрузки
(содержимое таблиц же напротив, отображается только тогда, когда загрузиться все содержимое таблицы)
в. Код написанный div'ами имеет более читаемый вид
Это лишь некоторые преимущества блочной верстки, но не будем на этом зацикливаться, а продолжим наш урок рассмотрением следующего вопроса.

2. Как управлять положением блоков на странице?
Для решения этого вопроса нам поможет такое свойство как float.
Свойство float может принимать три значения:
а. left - выравнивание элемента по левому краю страницы;
б. right - выравнивание элемента по правому краю страницы;
в. none - элемент страницы ни куда не перемещается, то есть будет там где он должен быть. Это значение используется по умолчанию.

Так же нам понадобиться рассмотреть еще одно свойство - clear.
Свойство clear может принимать четыре значения:
а. left - установка элемента ниже любого предыдущего, перемещенного влево блока;
б. right - установка элемента ниже любого предыдущего, перемещенного вправо блока;
в. both - установка элемента ниже любого предыдущего перемещенного блока;
г. none - нет ни каких ограничений на положение блока относительно перемещаемых блоков.

3. Как работают свойства float и clear?
Для этого мы рассмотри следующие примеры:
Создадим три блока (цвета background'а выбраны для того чтобы вы наглядно видели блоки)
<div style="background:#FF0000;">1</div>
<div style="background:#00FF00;">2</div>
<div style="background:#FF0000;">3</div>

В браузере Вы увидите такую картинку:

Урок по блочной верстке DIV

рис.2

Все три блока расположились друг под другом и ширина каждого из них растянута по ширине окна браузера.
Далее предлагаю задать ширину для каждого блока:

<div style="background:#FF0000; width:100px;">1</div>
<div style="background:#00FF00; width:200px;">2</div>
<div style="background:#FF0000; width:300px;">3</div>


Урок по блочной верстке DIV

рис.3

Кроме того что ширина у каждого блока изменилась другого мы ничего не увидим, блоки так же располагаются друг под другом,
но разной ширины.

Теперь предлагаю каждому из блоков еще добавить свойство float со значением например left, посмотреть что у нас получиться:

<div style="background:#FF0000; width:100px; float:left;">1</div>
<div style="background:#00FF00; width:200px; float:left;">2</div>
<div style="background:#FF0000; width:300px; float:left;">3</div>


Урок по блочной верстке DIV

рис.4

Что мы видим? Правильно, все три блока выстроились в один ряд, класно правда?
У Вас получилось? И какие у Вас при этом возникают чувства? Прикольно, не правда ли? )))

А теперь давайте добавим ниже еще один блок, без всяких свойств, только опять же с фоновой заливкой background для наглядности.

<div style="background:#FF0000; width:100px; float:left;">1</div>
<div style="background:#00FF00; width:200px; float:left;">2</div>
<div style="background:#FF0000; width:300px; float:left;">3</div>
<div style="background:#0000FF;">4<br>4<br>4</div>


Тег
<br>
мы добавили так же для наглядности примера.
Смотрим что у нас получилось:

Урок по блочной верстке DIV

рис.5

Почему же наш блок не получился под остальными тремя?
Все очень просто. Так как выше у нас блоки с свойством float, тогда нам надо для нашего четвертого блока задать свойство clear,
что бы он оказался под нашими тремя блоками, с значением left или both (почему, читаем почти в начале нашего урока), и так:

<div style="background:#FF0000; width:100px; float:left;">1</div>
<div style="background:#00FF00; width:200px; float:left;">2</div>
<div style="background:#FF0000; width:300px; float:left;">3</div>
<div style="background:#0000FF; clear:left;">4<br>4<br>4</div>


Урок по блочной верстке DIV

рис.6

Теперь наш четвертый блок встал под тремя верхними, единственное что вам сейчас может показаться непонятным это -
почему с отступом, отступ убирается очень просто добавлением для всей страницы стилевого свойства margin:0px и padding:0px:
например перед
прописываем следующий код:
<style type="text/css">
* { margin:0px; padding:0px; }
</style>


В итоге у нас получился такой вариант странички:
Сам код:
<html>
<head>
<title>Пример блочной верстки</title>
<style type="text/css">
* { margin:0px; padding:0px; }
</style>
</head>
<body>
<div style="background:#FF0000; width:100px; float:left;">1</div>
<div style="background:#00FF00; width:200px; float:left;">2</div>
<div style="background:#FF0000; width:300px; float:left;">3</div>
<div style="background:#0000FF; clear:left;">4<br>4<br>4</div>
</body>
</html>


И предпросмотр в браузере:

Урок по блочной верстке DIV

рис.7

И так мы увидели что при помощи всего двух свойств мы можем управлять нашими блоками как захотим, но это еще не все...
С расположением блоком мы разобрались, теперь перейдем к следующему не менее волнующему многих вопросу.

4. Как отцентровать блок DIV в каком нибудь элементе HTML-кода?

При решении этого вопроса мы можем сталкнуться с тем что в разных браузерах центровка может отображаться по разному, так как например таких браузерах FireFox и Opera для центровки блока надо использовать свойства margin-top и margin-left с значением auto.
Для примера:

<div style="width: 50%; margin-left: auto; margin-right: auto;">
Содержимое блока
</div>


Но подобный код не будет работать например в IE6, для решения этого вопроса нам нужно поместить наш блок в дополнительный блок с свойством которое понимает IE6, то есть свойством text-align и его значением center

<div style="text-align: center;">
<div style="width: 50%; margin-left: auto; margin-right: auto;">
Содержимое блока
</div>
</div>


Теперь наш блок будет отображаться во всех браузерах по центру.

Хотелось бы еще рассмотреть одно свойство, которое не меньше первых двух используется в блочной верстке, это свойство позиционирования - position

Без этого свойства помоему не обходиться не один верстальщик, который верстает блоками DIV свои шедевры )
И так, познакомимся с этим свойством поближе:
Свойство position имеет несколько значение:
а. static - Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам. Является значением по умолчанию;
б. relative - Положение элемента устанавливается относительно его исходного места.
Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
в. absolute - указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет.
Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
г. fixed - по своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы.
Браузеры Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера.
В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
IE6 и ниже не поддерживает данный аргумент.

Как уже наверное заметили выше, что бы задать положение блоку, который имеет свойство position с значенийми relative, absolute или fixed, используются свойства left, top, right и bottom.
Поговорим немного и об этом:

а. left - это свойство задает смещение левой границы позиционируемого блока вправо относительно левой границы родительского элемента;
б. top - это свойство задает смещение верхней границы позиционируемого блока вниз относительно верхней границы родительского элемента;
в. right - это свойство задает смещение правой границы позиционируемого блока влево относительно правой границы родительского элемента.
г. bottom - ну и на конец это свойство задает смещение нижней границы позиционируемого блока вверх относительно нижней границы родительского элемента;

Задавать величины этих свойств можно например как в пикселях (px), так и в процентах (%), так же эти свойства могут иметь значение auto, что является значением по умолчанию.

Верстая и применяя для блоков абсолютное (absolute), относительное(relative) или фиксированое позиционирование(fixed) многие из вас замечали или могут сталкнуться с тем, что блоки начнут накладываться друг на друга, ну или будет такая необходимость наложить один блок на другой, тут возникает вопрос:
А как определить какой блок будет выше, какой ниже, а может их будет три и более один над другим?
В решении этого вопроса нам помогает такое свойство как z-index, которое позволило вывести блочную верстку на новый уровень, образно говоря на уровень 3D :)
Так как позиционировать элементы можно не только по осям X или Y, но и при помощи свойства z-index и по оси Z, что определяет на каком уровне будет тот или иной блок над или под другим.
Значение свойства z-index может быть как положительное, так и отрицательное целое число. И при этом те элементы, у которых значение z-index будет больше, то и перекрывать они будут блоки с меньшим значением этого свойства.

Теперь предлагаю рассмотреть это на примерах:

Создадим три блока, средний из которых поместим в дополнительный блок:

<html>
<head>
<title>Пример блочной верстки2</title>
<style type="text/css">
* { margin:0px; padding:0px; }
</style>
</head>
<body>
<div style="background:#FF0000;">1</div>
<div id="dop_block">
<div style="background:#00FF00;">2</div>
</div>
<div style="background:#FF0000;">3</div>
</body>
</html>


Тут мы ни чего нового не увидим, как и в первом примере, тут у нас получиться три блока, который идут один под другим.

Далее для того чтобы посмотреть поведение блоков, добавим в средний блок свойство относительного позиционирования и зададим ему положение относительно родительского элемента (блока):

<div style="background:#FF0000;">1</div>
<div id="dop_block">
<div style="background:#00FF00; position: relative; top:10px; left:30px;">2</div>
</div>
<div style="background:#FF0000;">3</div>


Урок по блочной верстке DIV

рис.8

Видите как мы сместили наш блок №2? Неплохо )))
Теперь давайте рассмотрим на примере как работает абсолютное позиционирование.
Для этого зададим нашему дополнительному блоку относительное позиционирование, а блоку номер 2 абсолютное:

<div style="background:#FF0000;">1</div>
<div style="position: relative;" id="dop_block">
<div style="background:#00FF00; position: absolute; top:10px; left:30px;">2</div>
</div>
<div style="background:#FF0000;">3</div>


Урок по блочной верстке DIV

рис.9

Заметили как мы легко поместили наш блок номер 2 поверз 1 и 3 блока, так же можно и с z-index побалываться и поэксперементирвоать над расположением блоков друг относительно друга выше или ниже.
Это уже оставлю для ваших эксперементов ;)
Да и еще, для чего был создан дополнительный блок? Как Вы думаете?
Ок, отвечу )) Для того чтобы мы могли задать такие свойства как left и top.

Ну вот впринципе и все пока, хотя в довесок еще могу предложить пример странички, которую пришлось для примера набросать сегодня, что бы объяснить принцип трехколоночной верстки.

Думаю многим пригодиться данный пример как шаблон для будушей верстке своих страниц.
И так сам код странички:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример странички верстки в три дива by admiral for Apach</title>
<style type="text/css">
* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#0000FF; height:70px; width:100%; }
#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 800 ? "100%" : "800px"); overflow:hidden; }
#content1 { width:100%; float:left; margin-right:-180px; }
#content2 { background:#000000; margin-right:180px; }
#content3 { width:100%; float:right; margin-left:-200px; }
#left { background:#FF0000; width:200px; float:left; }
#center { background:#00FF00; margin-left:200px; }
#right { background:#FF0000; float:right; width:180px; }
#min_width { width:800px; }
#footer { position:absolute; bottom:0px; background:#8F0000; width:100%; height:60px; }
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="content">
<div id="content1">
<div id="content2">
<div id="content3">
<div id="center">
<p align="center">CENTER</p>
</div>
</div>
<div id="left">LIFT</div>
</div>
</div>
<div id="right">RIGHT</div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>


Вот и получилась у нас страница как и обещал в самом начале этого урока, смотрим рис.1
Используя свойства описанные в данной статье позволит Вам верстать различные по сложности странички.
Надеюсь данный урок будет многим полезен и научит поможет освоить Вам блочную верстку в дальнейшем.

Так же хочю обратиться к тем кто уже умеет и хочет научить других чему нибудь, присоединяйтесь к нашей команде.
Свои предложения и пожелания Вы всегда можете оптравить по Обратной связи на сайте, а так же Личным сообщением по почте сайта или мне напрямую, по icq 137580
  • 34
11-01-2010, 01:49
 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
<

11 января 2010 02:04
Rulez_DM
Посетитель
Довольна не плохая статья,автор объяснил всё понятно и доступно, я для себя кое что усвоил... Автору р winked еспект...
<

14 января 2010 22:15
3loY
Посетитель
Премного благодарен, тоже для себя как усвоил так и узнал массу полезного.
<

15 января 2010 13:35
Q-Tec
Посетитель
Большое спасибо! :)
<

7 февраля 2010 04:03
Don-A
Посетитель
Спасибо большое, урок очень полезный.

--------------------

<

24 апреля 2010 17:48
AndreyKiev
Посетитель
Я понял хоть что это такое)
<

5 октября 2011 02:13
Kolluchii
Посетитель
Извините, не понимаю, смысл вот этих строк из последнего вашего примера, особенно первую:

#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 800 ? "100%" : "800px"); overflow:hidden; }
#content1 { width:100%; float:left; margin-right:-180px; }
#content2 { background:#000000; margin-right:180px; }
#content3 { width:100%; float:right; margin-left:-200px; }


Будьте добры, поясните.
<

16 декабря 2013 14:12
vadimsokolov
Посетитель
Крупный план лица был известен кинематографу со времен Эдисона, но лишь http://seven-films.ru/serial.html в виде отдельного законченного фильма. Задача не так проста,как можно подумать. Из люмьеров те»и«Гомон») —на повседневном фоне. К картинам на полотне европеец тех лет был привычен, но образ«волшебного фонаря»вошел как метафора преходящего. Складывая картину мира,наше сознание старается действовать экономно—где только возможно, разрозненные со бытияувязываютсянамивпричинноследственныйузел. американском фильме,когда герой приходил в ярость,все пред меты погружались врозовую дымку. В«Бабушкиной лупе»внук, разглядывая предметы домашИ все же эволюция киноязыка склонилась к принципу ли ней обстановки,направил лупу на бабушку,и зритель увидел нейности:показывать одновременно два разных пространства огромный,во весь экран,бабушкин глаз(илл. Бауэра«Немые свидетели» (1914),— барское отношение к кадра была сконструировала специальная миниатюрная кинокачеляди — в фильмеМуратовой преломилась вдраме домработни мера,удобная для перебрасывания,—то зритель получит возцы(И. Здесь рекорд тоже принадлежит кинема В наших предыдущих рассуждениях мы иногда пользовались тографу авангардаиисчисляетсявчасах. Бывает, что такая траектория не абстрактна пасть, а когда ейэто всетаки не удается, останавливается на гори за ней угадывается знакомая нам в повседневной жизни логи ной дороге и отказывается ехать дальше. Вопервых, метаморфоза — этосюжет, имеющийтольконача ло и конец, но лишенный такой важной части рассказа, как сере дина. ретекаемость точек зрения—одна из существенных черт кино Финал фильма задуман как сложная кинематографическая игязыка и,возможно,один из секретов искусства вообще. йы На илл. Крупный план лица был известен кинематографу со времен Эдисона, но лишь http://seven-films.ru/serial.html в виде отдельного законченного фильма. И есливоздействием чудесного порошка. ШенВопервых, в каждом кинотеатре был музыкант («тапер»,если гели описал детское впечатление от такого поддельного«фильон играл на фортепиано),снимавший ощущение нависающей ти ма»: шины.
<

18 августа 2014 22:21
vadimsokolov
Посетитель
Lotman Ю, Ziwjan J. Мамардашвили M. Ossobennosti конструкции художественного мира в Фильмы A. Я сразу eingegangen. Я сразу eingegangen. Юбилейная коллекция. «Строительство фильма», М, в. Я сразу eingegangen. Кинокритика Г. bigmult.com метр год с Андреем//«искусство кино», №. Obras мира в зеркале Alchemie: от элементов и атомов Старинное до элементов Bojlja. «Строительство фильма», М, в. Objasatelnost Formen. Problemy денотации в игровом фильме//сберегательную кассу.

Опросы

«    Апрель 2019    »
ПнВтСрЧтПтСбВс
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 

Друзья сайта

Наверх
  • www.megastock.ru