Сайт на DIV

A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Сайт на DIV - Урок 6

Автор: MilovanovV
Категория: HTML сайты » html теги
8-09-2011, 22:29

Сайт на DIV – мы вплотную подошли к тому, чтобы разобраться с таким вопросом, как вёрстка сайта на DIV блоках.

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

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

Для более глубокого и более детального изучения вёрстки страниц с помощью DIV блоков, необходимо обратиться к соответствующим источникам.

Итак, начнём, пожалуй.

В свое время, основным способом верстки html страниц было использование таблиц. Сейчас, верстка страниц в Интернет производится с использованием блоков (слоёв), а элементы в блоках форматируются с использованием таблиц стилей.

Итак, в этом уроке, ставим задачу, создать сайт, верстанный на DIV блоках, c использованием таблиц стилей.

Первым шагом, создадим html файл с именем index.html. Заполним файл обязательными html тегами, причем, в контейнер head, добавим тег link, который привяжет к нашему документу таблицу стилей, расположенную в файле style.css.

Файл стилей style.css, давайте разместим в папке css. В начале, файл style.css, пусть будет пустым, а содержимое файла index.html, у нас будет следующим:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Сайт, верстанный на DIV блоках c использованием таблиц стилей.</title>

</head>

<body>

</body>

</html>

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

Ниже, в левой части страниц сайта, пусть будет расположено меню, или навигация сайта – Navigation.

Справа от меню, и ниже Header, по центру, пусть будет расположен контент – Content.

Ну и как всегда, в нижней части, у нас будет располагаться нижний колонтитул сайта, или Footer.

На рисунке,макет страницы выглядит следующим образом:

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

Следуя исходному макету, приведенному на рисунке, нам необходимо вывести на страницу браузера четыре блока, Header, Navigation, Content, Footer.

Давайте так и сделаем, выведем четыре DIV блока, которые для удобства разместим в один общий блок. Назовем общий блок - Box.

Сделаем мы всё это в файле index.html, между тегами <body></body>. Для вывода блоков воспользуемся тегом DIV, атрибутам id присвоим соответствующие значения:

<div id=”Header”>Header</div>

<div id=”Navigation”>Navigation</div>

<div id=”Content”>Content</div>

<div id=”Footer”>Footer</div>

</div>

Если мы откроем файл index.html браузером, то мы увидим следующую картинку:

Так как, таблица стилей не определена, (файл style.css - пустой), то браузер просто вывел DIV блоки последовательно, друг за другом без форматирования.

Давайте займемся форматированием выведенных блоков. Для этого, отредактируем файл стилей - style.css.

Во-первых, определимся с контейнерами <html> и <body>.

Тег <html> - включает в себя всё содержимое html документа, а тег <body> предназначен для хранения контента, который браузер выводит в своё окно.

Поэтому в самом начале таблицы стилей - style.css, обозначим положение на странице браузера этих блоков. Комментарии помещены между сочетанием двух значков:/* комментарии */

Итак, добавим в файл style.css первые строки:

html, body{margin:0;

padding:0;}/* отступы и поля элементовhtmlиbody равны нулю*/

Теперь зададим параметры для идентификатора Box.

Чтобы видеть границы блока Box, выведем его с рамкой, толщиной 1 пиксель:

#Box{width: 700px; /*width: 700 - ширинаблокаBoxравна 700 пикселей */

border: 1px dotted; /* Пунктирнаярамка */

margin:0avto;} /*margin:0 -отступы Блока Box сверху и снизу равны нулю*/

/*margin:avto -отступы Блока Box слева и справа равны и выбираются автоматически */

Давайте сохраним файл style.css и обновим страницу index.html

Мы увидим, что на странице, у нас расположился блок шириной 700 px.

Идентификаторами #Header, #Navigation, #Content и #Footer, давайте зададим цвет, чтобы их можно было отличать друг от друга:

#Header {background-color: #ff9900;}

#Navigation {background-color: #0099cc;}

#Content {background-color: #e1e1e1;}

#Footer {background-color: #66ffff;}

Вновь обновляем окно браузера и смотрим результат:

Теперь давайте займёмся шириной блоков. Согласно исходного макета, блоки Header и Footer по ширине мы не меняем. Давайте зададим ширину блока Navigation:

#Navigation {background-color: #0099cc;

width: 140px;} /*width:140 ширинаблокаNavigation равна 140пикселей */

Обновим окно браузера:

Если сравнить ту картинку, которая у нас получилась, с нашим образцовым макетом, то мы видим, что блок Content, должен обтекать блок Navigation справа, поэтому добавляем в определение стилей для блока Navigation обтекание:

#Navigation {background-color: #0099cc;

width: 140px;

float: left;}

Как видите, DIV блок Navigation и DIV блок Content, расположились в один ряд и блок Navigation находиться слева от блока Content.

Теперь давайте добавим в блок Content, любую текстовую информацию. При этом мы увидим, что текст, в процессе его дополнения, уходит под блок Navigation. Это происходит, в связи с тем, что мы включили обтекание блока Navigation.

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

#Content {background-color: #e1e1e1;

margin-left: 142px; }

Теперь, при любой высоте блоков, их ширина будет одинаковой.

Далее, заполним контентом блок Navigation, в результате, блок Footer уйдет в правую сторону:

Чтобы решить эту проблему, в описание блока Footer, добавим параметр clear, который в зависимости от аргумента, отменяет обтекание блоков. Параметр clear с аргументом both, отменяет любое обтекание:

#Footer {background-color: #66ffff;

clear: both;}

Сохраним изменения и откроем нашу страницу браузером:

Как видите, теперь наши блоки расположились каждый на своём месте.

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

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

Теперь, зная основы определения стилей для форматирования элементов web-страниц и понимая, как происходит верстка шаблона сайта на DIV блоках, Вы всегда сможете разобраться в любом html коде, а со временем, если это направление окажется Вашим, вы сможете на DIV блоках верстать свои собственные шаблоны.

Кстати, есть очень интересный и на мой взгляд, полезный ресурс: Все шаблоны сайтов, сверстанных на DIV блоках, где представлены для скачивания почти пол- сотни шаблонов, сверстанных на DIV блоках.

Надеюсь, представленный выше сайт, будет Вам полезен!

Автор: Виктор Милованов.

Оставить комментарий