Создание страниц c помощью CSS
Dreamweaver упрощает построение страниц с помощью макетов CSS, предоставляя заранее спроектированные макеты, которые работают в различных браузерах. Использование заранее спроектированных макетов является самым простым способом создания страницы с макетами CSS. Создавать макеты CSS также можно с помощью элементов Dreamweaver с абсолютным позиционированием (элементов AP). Элемент AP в Dreamweaver это элемент HTML-страницы, а точнее тег div или любой другой тег, которому назначено абсолютное позиционирование. Ограничение элементов AP Dreamweaver заключается в том, что, поскольку они имеют абсолютное позиционирование, их положение на странице не настраивается в соответствии с размером окна браузера.
Следующий пример демонстрирует страницу HTML, содержащую три отдельных тега div. один большой тег-контейнер и два других тега - тег боковой панели и тег основного содержимого внутри тега-контейнера.
А. Тег-контейнер Div B.Тег Div боковой панели C.Тег Div основного содержимого
Далее приведен код для всех трех тегов Div в HTML.
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </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 level heading </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, создает правила стилей для первого тега на странице, т.н. ≪тега-контейнера≫.
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
Правило #container задает для тега-контейнера ширину 780 пикселов, белый фон, отсутствие полей (с левой стороны страницы), сплошную черную границу, толщиной в 1 пиксел, и текст, выровненный по левому краю.
Результат применения правила к тегу-контейнеру Div следующий.
Тег-контейнер Div, 780 пикселов, без полей
А. Текст выровнен по левому краю B.Белый фон C.сплошная черная граница, толщиной в 1 пиксел
Следующее правило 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 боковой панели следующий.
тег Div боковой панели, float left
А. Ширина 200 пикселов B.Верхнее и нижнее заполнение, 15 пикселов
Наконец, правило CSS для тега-контейнера Div основного содержимого завершает макет.
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
Правило #mainContent задает для тега Div основного содержимого левое поле 250 пикселов, это означает, что
свободное пространство между левой стороной тега-контейнера Div и левой стороной тега Div основного содержимого равно 250 пикселам. Кроме того, правило задает интервалы в 20 пикселов справа, внизу и слева от тега Div основного содержимого. Результат применения правила к тегу Div основного содержимого следующий.
Тег Div основного содержимого, поле слева 250 пикселов.
А. 20 пикселов заполнения слева B.20 пикселов заполнения справа C.20 пикселов заполнения снизу
Полный код выглядит следующим образом.
<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>
<!--container div tag-->
A
C
B
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </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 level heading </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>
Примечание. Приведенный выше код создает макет из двух столбцов с фиксированной слева боковой панелью.Данный код является упрощенной версией кода, который используется при создании документа сприменением макетов, предустановленных в Dreamweaver.