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

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

Сайт на 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" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

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

<link href="css/style.css" rel="stylesheet" type="text/css"/>

</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=”Box”>

<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 блоках.

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

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

 

Как создать сайт без знания HTML

Как создать сайт без знания HTML

Как создать сайт на WordPress

Как создать сайт на WordPress

CSS для начинающих

CSS для начинающих

Скачать без регистрации