   |
| Основы блочной верстки макетов вебстраниц |
|
Раньше сайты верстали при помощи таблиц. Теперь все переходят на блочную верстку, поскольку она более удобна при использовании, особенно если речь идет о внесении изменений в уже созданные сайты. Основа блочной верстки состоит в том, что каждый элемент рассматривается как отдельный блок, и так же размещается на странице. При этом есть возможность, если в этом есть необходимость, помещать или группировать одни блоки в другие. Обобщением блочных елементов с точки зрения стилей является елемент <div>. Блок имеет свои свойства: высоты (height), ширины (width), границы (border), отступа (margin), набивки(или заполнения) (padding), произвольного размещения (float), управления обтеканием (clear). 
Высота (height) и ширина (width) комментариев не требуют. Отступы (margin) - это размер расстояния между отдельно идущими блоками. С помощью этого элемента можно размещать блоки на заданном расстоянии друг от друга. Рамка (border). Для этой области возможно определить некоторые качества – цвет, вид, толщина. Поле (padding) - используется для размещения информации в блоке, чтобы он правильно располагался в контуре. Под обтеканием блока текстом понимают тот же эффект, который можно реализовать для графики, когда картинка не разрывает блок текста, а встраивается в него. Текст в этом случае "обтекает" картинку с одной стороны — там, где есть свободное поле между границей страницы (элемента) и картинкой. Обтекание картинки текстом от обычного встраивания картинки в текст документа отличается тем, что вдоль вертикальной границы картинки располагается несколько строк текста, а не одна. Обтеканием блока текста другим текстом управляют два атрибута CSS: float и clear. Атрибут float определяет "плавающий" блок текста. Он может принимать значения: left — блок прижат к левой границе охватывающего элемента; right — блок прижат к правой границе охватывающего элемента; both — текст может обтекать блок с обеих сторон. Второй атрибут описания стилей clear позволяет управлять собственно обтеканием. Он не допускает наличия "плавающих" блоков около блока текста. Атрибут может принимать значения: right, left, none, both.
Различают четыре способа применения стилей:
Давайте рассмотрим применение блочной разметки страницы на примере: Пусть у нас есть HTML-код страницы: <head> </head> <body > <div> <div > <div> <img src="image\logo.jpg" > </div>
<div>
<h1>Моя машина</h1>
</div> </div> <div > <div > <ul> <li><a href="http://www.joomlancer.net/uk/web-design/blochnaya-verstka.html#"> Головна </a></li> <li><a href="http://www.joomlancer.net/uk/web-design/blochnaya-verstka.html#"> Про нас</a></li> <li><a href="http://www.joomlancer.net/uk/web-design/blochnaya-verstka.html#"> Про мрії</a></li> <li><a href="http://www.joomlancer.net/uk/web-design/blochnaya-verstka.html#"> Друзі</a></li> <li><a href="http://www.joomlancer.net/uk/web-design/blochnaya-verstka.html#"> Машини</a></li> <li><a href="http://www.joomlancer.net/uk/web-design/blochnaya-verstka.html#"> Контакти</a></li> </ul> </div> <div> <h2> Про мою майбутню машину </h2> <p> Кажуть свою мрію треба уявити дуже добре. Якщо це машина - то точно визначитися з маркою, кольором, уявити собі як ти сидиш за кермом, які мякі сидіння, яка чудова швидкість... </p> <p> і вона збудеться набагато швидше) </p> </div> <div> bottem </div> </div> </div> </body>
Просмотрим его в браузере: открыть
Теперь внесем некоторые изменения. Используем Ссылку на описание стиля, расположенного за пределами документа с помощью элемента LINK, который размещают в элементе HEAD. <link rel="stylesheet" href="css\template_css.css"> Внешнее описание будет представлять собой файл, содержащий описание стилей. Создаем файл css\template_css.css и все изменения производим в нем. Для стилевого оформления нашей страницы используем такие селекторы: body { } #all { } #top1 { } #logo{ } #logo img{ } #top { } #main { } #Left{ } #MainBody { } #Bottem { } .inside{ } h2 { }
Наш css-файл: * { margin: 0; padding: 0; } body { text-align: center; /*для IE*/ background: #b1b6b4; vertical-align: top; font-size: 12px; font-family: Arial, Verdana, sans-serif, Helvetica ; color:#996606; line-height:160%; } #all { width: 900px; margin: 0 auto; } #top1 { width: 900px; height:170px; background: #55f; /*для IE*/ } #logo{ float: left; } #logo img { width: 270px; } #top { color: #fff; text-align: center; vertical-align: middle; float: left; width: 70%; background: #55f; height: inherit; } #main { text-align: left; clear: both; height:10px;/*для IE*/ background: #ffc;/*для IE*/ } #Left{ background: #FFF; width: 30%; min-height:300px; float: left; } #MainBody { width:70%; min-height:300px; background: #ffc; float: left; } #Bottem { width: 900px; background-color: #FF00ff; text-align: left; clear: both; } .inside{ padding: 20px; } h2{ padding:10px; } Попробуйте поэкспериментировать с свойствами элементов.
|
