Об использовании CSS для создания макеты страницы

Сведения о макете страницы CSS

В макете страницы CSS для организации содержимого на веб-странице вместо традиционных таблиц и фреймов используется формат каскадных таблиц стилей. Основным строительным блоком макета CSS является тег Div — HTML-тег, который в большинстве случаев ведет себя как контейнер для текста, изображений и других элементов страницы. При создании макета CSS теги Div размещаются на странице, в них добавляется содержимое, и они размещаются в разных местах. В отличие от ячеек таблицы, которые существуют только внутри строк и столбцов таблицы, теги Div можно поместить в любое место веб-страницы. Можно выполнять позиционирование тегов div абсолютно (указывая координаты X и Y) или относительно (указывая его размещение относительно его текущего положения). Расположить теги div также можно, указав отступы, заполнения и поля, что по современным стандартам является предпочтительным методом.

О структуре макета страницы CSS

Перед изучением этого раздела следует ознакомиться с основными концепциями CSS.

Основным строительным блоком CSS-макета является тег div — тег HTML, который в большинстве случаев выступает в качестве контейнера для текста, изображений и других элементов страницы.В следующем примере показана HTML-страница, содержащая три отдельных div-тега: один большой тег «контейнер» и два других тега — тег боковой панели и тег основного контента — внутри тега контейнера.

Далее приведен код для всех трех тегов Div в HTML.

<!--тег div контейнера-->

<div id="container">

<!--тег div боковой панели-->

<div id="sidebar">

<h3>Контент боковой панели</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

      </div> 

<!--тег div основного содержимого-->

<div id="mainContent">

<h1> Основной контент </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing.Aenean sagittis.Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>Заголовок уровня H2</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

    </div> 

</div>

В приведённом выше примере к тегам div не применено никакое «оформление».Без определенных CSS-правил каждый тег div и его содержимое попадают в расположение по умолчанию на странице.Однако если каждый тег div имеет уникальный идентификатор (как в приведенном выше примере), можно использовать эти идентификаторы для создания CSS-правил, которые при применении изменяют стиль и позиционирование тегов div.

Следующее CSS-правило, которое может находиться в заголовке документа или во внешнем CSS-файле, создает правила стилизации для первого, или «контейнерного» div-элемента на странице:

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

Правило #container задает стили для тега div контейнера: ширина 780 пикселей, белый фон, нулевое поле (от левого края страницы), сплошная черная граница толщиной 1 пиксель и выравнивание текста по левому краю. Результаты применения правила к тегу div контейнера следующие:

Следующее правило CSS создает правила стилей для тега Div боковой панели.

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

Правило #sidebar задает стили для тега div боковой панели: ширина 200 пикселей, серый фон, верхний и нижний отступы по 15 пикселей, правый отступ 10 пикселей и левый отступ 20 пикселей. (Исходный порядок для отступов: сверху-справа-снизу-слева.) Кроме того, правило позиционирует тег div боковой панели с помощью float: left — свойства, которое перемещает тег div боковой панели к левой стороне тега div контейнера. Результаты применения правила к тегу div боковой панели следующие:

Наконец, правило CSS для основного тега div контейнера завершает макет:

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

Правило #mainContent задает стили для div основного контента с левым полем 250 пикселей, что означает размещение 250 пикселей пространства между левой стороной div контейнера и левой стороной div основного контента. Кроме того, правило обеспечивает 20 пикселей интервала с правой, нижней и левой сторон div основного контента. Результаты применения правила к div mainContent таковы:

Полный код выглядит следующим образом.

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

} 

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

} 

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

} 

</style> 

</head> 

<body> 

<!--тег div контейнера-->

<div id="container">

<!--тег div боковой панели-->

<div id="sidebar">

<h3>Содержимое боковой панели</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

      </div> 

<!--тег div основного контента-->

<div id="mainContent">

<h1> Основной контент </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>Заголовок уровня H2</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

    </div> 

</div> 

</body>

Создание страницы с макетом CSS

При создании новой страницы вСистемные требования | Dreamweaver можно создать страницу, которая уже содержит макет CSS. Dreamweaver поставляется более чем с 16 различными макетами CSS на выбор. Кроме того, можно создавать собственные макеты CSS и добавлять их в папку конфигураций. Созданные макеты появятся в диалоговом окне «Создать документ» в списке выбора макетов.

Создание страницы с макетом CSS

Добавить пользовательские макеты CSS в список вариантов

Связанные материалы

• Общие сведения о каскадных таблицах стилей
• Создание пустой страницы
• Задание типа и кодировки документов по умолчанию
• Создание ссылки на внешнюю таблицу стилей CSS