Создание сайта
Регистрация
Продвижение
Монетизация
Облако тегов

Требуется для просмотраFlash Player 9 или выше.

Показать все теги

Главная » Создание сайта » HTML » Учебник HTML для начинающих. Блочная верстка

Учебник HTML для начинающих. Блочная верстка
Раздел: Создание сайта » HTML  
14 июня 2009   |   автор: admin Оставить комментарий



 

 Урок 12. Работаем с блоками

 

В этом уроке мы придадим нашим блокам желаемый вид и расположим их в заданном порядке.

 

Создаем контейнер для блоков.

 

Первым делом нам необходимо задать границы, в которых разместятся наши блоки, иначе они могут расплыться по странице. Для этого мы используем наш блок-контейнер id="container".

 

Зададим ему следующие атрибуты:

 

#container {<br /> width:960px;<br /> margin: 0 auto;<br /> border: solid #CCCCCC 1px;<br />}

 

 

Width - этот атрибут задает ширину.

 

Margin - атрибут, который задает поля с внешних сторон блока. Поля выставляются для всех четырех сторон, начиная с верхней и далее по часовой стрелке. Верх - правая сторона - низ - левая сторона. Если значения совпадают, тогда запись можно сократить. В нашем случае значения совпадают для верха - низа блока и его сторон. Полностью запись выглядит следующим образом:

 

margin: 0 auto 0 auto;

 

auto - означает, что поля блока выравниваются автоматически. Т.о. мы располагаем его по середине окна браузера.


0 - говорит о том, что полей нет. А значит не имеет смысла выставлять единицы измерения. В ином случае можно использовать, к примеру, пиксели «px».

 

Знаки препинания между значениями внутри атрибута не ставятся.

 

 

Border - граница блока.

 

solid - сплошная линия;


#CCCCCC - цвет линии;


1px - ее толщина в пикселях.

 

 

 

Шапка.

 

Зададим для шапки нашего шаблона размер в 900 пикселей по ширине и 100 пикселей по высоте. Сделаем ее красного цвета и поставим отступы в 10 пикселей сверху и снизу, а также расположим по центру.

 

#header {<br /> height: 100px;<br /> width: 900px;<br /> background-color: #FF0000;<br /> margin: 10px auto;<br />}

 

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

 

 

Колонки.

 

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

 

Однако, перед нами стоит цель разместить наши колонки в один ряд. Поэтому, кроме указания их размеров мы также должны сообщить браузеру, в каком месте страницы расположить наши блоки. Для этой цели применяется атрибут «float», и его значения «left» и «right».

 

«left» - указывает браузеру расположить блок у левой стороны.


«right» - соответственно у правой.

 

Итак, у нас есть три колонки - левая, правая и колонка с содержанием. Зададим боковым колонкам ширину в 200 px; а центральную сделаем шириной в 450 px, что позволит оставить небольшое пространство между блоками. Высоту выставим равной 500 px.

 

В файле стилей добавим следующие записи для наших колонок:

 

</p>
<p>#rightside {<br /> background-color: #0000FF;<br /> height: 500px;<br /> width: 200px;<br /> float: right;<br />}</p>
<p><br />#content {<br /> background-color: #CCFFCC;<br /> height: 500px;<br /> width: 450px;    <br /> float: left;<br />}</p>
<p> </p>
<p> </p>
<p>

 

В браузере это выглядит так:

 

 

Учебник HTML для начинающих. Блочная верстка

 

 

 

 

Ну что ж, постепенно наш шаблон приобретает желаемый вид.

 

Нам остается оформить «подвал сайта», выставить поля блоков и наполнить колонки содержимым.

 
Для начала отрегулируем расположение наших колонок. Сделаем отступы по краям страницы 30px; а блок с контентом разместим по центру. В таблице стилей добавим еще по одному атрибуту для левой и правой колонок и для контента.

 

Для левой:

 

margin-left: 30px;

 

Для правой:

 

margin-right: 30px;

 

А для центральной:

 

margin-left: 25px;

 

 

Подвал страницы сайта

 

После этого можно переходить к оформлению «подвала». Зададим ему цвет фона, размеры и отступы.

 

#footer {<br /> height: 50px;<br /> width: 900px;<br /> background-color: #FF0000;<br /> margin: 10px auto;<br />}

 

Результат в браузере:

 

 

Учебник HTML для начинающих. Блочная верстка

 

 


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

 

Но есть простой прием, который позволит избавиться от этой ошибки отображения. Необходимо создать дополнительный блок и поместить его перед блоком «подвал».

 

<div id="clear"></div>

 

В атрибутах укажем следующее:

 

#clear {<br /> clear: both;    <br />}

 

Таким образом, мы не только отделяем наш «подвал» от остальных блоков, но и указываем браузеру с помощью атрибута «clear» не переносить использованные ранее свойства на нижестоящие блоки.

 

Давайте насладимся результатом:

 

 

Учебник HTML для начинающих. Блочная верстка

 

 

 

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

 

 

Далее... Урок 13. Содержание блоков.

 

 

 

Вернуться к Оглавлению 

 

 


Ключевые теги: Учебник HTML, Блоки, div, блочная верстка
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
web-lesson.ru
Назад 1 2 3 4 5 6 7 8 9 10 ... 2185 Далее
Добавление комментария
Ваше Имя:
Ваш E-Mail:
Код:
Введите код