Adobe Dreamweaver

Работа в окне документа
Элементы интерфейса
Настройка интерфейса
Сочетания клавиш

Макет страниц с использованием CSS
Разметка страниц с помощью HTML

Текст
Изображения
Карта ссылок
Панели навигации (меню)
Таблицы
Объекты мультимедиа
Java-апплеты
Элементы Spry

Смарт-объекты

Меню переходов

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

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

Теги div можно позиционировать абсолютно (указав координаты x и y) или относительно (указав расстояние от этих тегов до других элементов страницы). Расположить теги div также можно, указав отступы, заполнения и поля, что по современным стандартам является предпочтительным методом.

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

Dreamweaver упрощает построение страниц с помощью макетов CSS, предоставляя 16 заранее спроектированных макетов, которые работают в различных браузерах.

Использование заранее спроектированных макетов, которые поставляются с Dreamweaver, является самым простым способом создания страницы с макетами CSS. Создавать макеты CSS также можно с помощью элементов Dreamweaver с абсолютным позиционированием (элементов AP).

Элемент AP в Dreamweaver это элемент HTML-страницы, а точнее тег div или любой другой тег, которому назначено абсолютное позиционирование. Ограничение элементов AP Dreamweaver заключается в том, что, поскольку они имеют абсолютное позиционирование, их положение на странице никогда не настраивается в соответствии с размером окна браузера.

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


Создание макетов страниц с помощью CSS

Следующий пример демонстрирует страницу 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-->
<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.



Вернуться к: Использование CSS