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

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

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

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

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

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

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

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

В макете страницы CSS для организации содержимого на веб-странице вместо традиционных таблиц и фреймов используется формат каскадных таблиц стилей. Основным строительным блоком макета CSS является тег Div - тег HTML, который в большинстве случаев ведет себя как контейнер для текста, изображений и других элементов страницы. При создании макета CSS теги 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

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

 

Основным строительным блоком макета CSS является тег Div - тег HTML, который в большинстве случаев ведет себя как контейнер для текста, изображений и других элементов страницы. Следующий пример демонстрирует страницу 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

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

 

Dreamweaver Макеты CSS отображаются правильно в следующих браузерах: Firefox (Windows и Macintosh) 1.0, 1.5, 2.0, и 3.6; Internet Explorer (Windows) 5.5, 6.0, 7.0 и 8.0; Opera (Windows и Macintosh) 8.0, 9.0 и 10.0; Safari 2.0, 3.0 и 4.0, а также Chrome 3.0.

 

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

Выберите «Файл» > «Создать».

В диалоговом окне «Создать документ» выберите категорию «Пустая страница». (Это выбор по умолчанию.)

В «Тип страницы» выберите вид создаваемой страницы.

Примечание. Необходимо выбрать тип страницы HTML для макета. Например, можно выбрать HTML, ColdFusion®, PHP и т.п. Невозможно создать страницу ActionScript™, CSS, Library Item, JavaScript, XML, XSLT или ColdFusion Component с макетом CSS. Типы страниц в диалоговом окне «Создать документ» в списке «Другое» также не могут содержать макеты страниц CSS.

В списке «Макет» выберите макет CSS, который планируется использовать. Можно выбрать из 16 различных макетов. Окно «Просмотр» показывает макет и дает краткое описание выбранного макета.

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

 

Fixed

Ширина столбца задана в пикселях. Размер столбца не изменяется в зависимости от размера браузера или текстовых параметров посетителя сайта.

Liquid

Ширина столбца задана в процентах от ширины браузера. Оформление меняется, когда посетитель сайта меняет ширину окна браузера, но не меняется в зависимости от параметров шрифта посетителем сайта.

Выберите тип документа из всплывающего меню «Тип документа».

Выберите положение макета CSS в «Макет CSS» во всплывающем меню.

Добавить в заголовок

Добавляет таблицу стилей CSS для макета в заголовок создаваемой страницы.

Создание нового файла

Добавляет CSS для макета в новую внешнюю таблицу стилей CSS и прикрепляет новую таблицу стилей к создаваемой странице.

Ссылка на существующий файл

Позволяет указать существующий файл CSS, содержащий правила CSS, необходимые для макета. Этот параметр особенно полезен, если необходимо использовать один и тот же макет CSS (правила CSS, содержащиеся в одном файле) в нескольких документах.

Выполните одно из следующих действий.

Если во всплывающем меню «Макет CSS» выбрано «Добавить в заголовок» (параметр по умолчанию), то щелкните «Создать».

Если во всплывающем меню «Макет CSS» выбрано «Создать новый файл», то щелкните «Создать», а потом укажите имя для нового внешнего файла в диалоговом окне «Сохранить файл таблицы стилей как».

Если во всплывающем меню «Макет CSS» выбрано «Ссылка на существующий файл», то добавьте внешний файл в текстовое поле «Присоединить файл CSS», щелкнув значок «Добавить таблицу стилей». По окончании нажмите кнопку «Создать» в диалоговом окне «Создать документ».

Примечание. Если выбран параметр «Ссылка на существующий файл», то в указанном файле должны содержаться правила для файла CSS.

Если поместить макет CSS в новый файл или привязать к существующему файлу, Dreamweaver автоматически привяжет файл к создаваемой HTML-странице.

 

Примечание. Условные комментарии Internet Explorer (CCs), которые помогают работать с проблемами отображения в IE, остаются встроенными в заголовок документа с новым макетом CSS, даже если в качестве места для макета CSS выбран пункт «Создать внешний файл» или «Существующий внешний файл».

При создании страницы, не связанной с макетом CSS, к ней также можно присоединить таблицы стилей CSS (необязательно). Для этого щелкните значок «Присоединить таблицу стилей» над областью «Присоединить CSS-файл» и выберите существующую таблицу стилей CSS.

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

Создайте HTML-страницу, содержащую макет CSS, который вы хотите добавить в список вариантов для выбора в диалоговом окне «Создание документа». CSS для макета должен размещаться в заголовке HTML-страницы.

Чтобы согласовать заказной макет CSS с другими макетами, которые поставляются с Dreamweaver, необходимо сохранить HTML файл с расширением «.htm».

Добавьте HTML-страницувпапку Adobe Dreamweaver «CS4\Configuration\BuiltIn\Layouts».

(необязательно) Добавьтеизображениедляпросмотрамакета (напримерфайлсрасширением «.gif» или «.png») впапку Adobe Dreamweaver «CS4\Configuration\BuiltIn\Layouts». Изображения по умолчанию, поставляемые с Dreamweaver, это PNG-файлы шириной в 227 пикселов и высотой в 193 пиксела.

Назовите файл предварительного просмотра так же, как и HTML-файл, чтобы его можно было легко отследить. Например, если HTML-файл называется «myCustomLayout.htm», то назовите изображение для просмотра «myCustomLayout.png».

(необязательно) Создайте файл примечаний для заказного макета, открыв папку Adobe Dreamweaver «CS4\Configuration\BuiltIn\Layouts\_notes», скопировав и добавив в эту же папку все существующие файлы примечаний, и переименовав копию для своего заказного макета. Например, можно скопировать файл «oneColElsCtr.htm.mno» и переименовать его в «oneColElsCtr.htm.mno».

(необязательно) После создания файла примечаний для заказного макета можно открыть файл и указать имя макета, описание и изображение для просмотра.

Язык гипертекстовой разметки HTML предоставил нам большое количество возможностей, чтобы осуществить привязку CSS стилей к десяти уникальным тегам, предназначенных для работы с таблицами, предлагаю их повторить перед дальнейшим изучением:

Тег	Описание
<table>	Определяет содержимое таблицы.
<caption>	Определяет наименование таблицы.
<th>	Определяет заголовочную ячейку таблицы.
<tr>	Определяет строку таблицы.
<td>	Определяет ячейку данных таблицы.
<thead>	Используется для содержания заголовка группы в таблице (шапка таблицы).
<tbody>	Используется для содержания "тела" таблицы.
<tfoot>	Используется для содержания "подвала" таблицы (футер).
<col>	Определяет заданные свойства столбцов для каждого столбца в пределах тега <colgroup>.
<colgroup>	Определяет группу столбцов в таблице.