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

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

Выберите ≪Файл≫ > /≪Создать≫/ ≪Создать документ≫/≪Пустая страница≫/

≪Тип страницы≫/HTML /≪Макет≫

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3(необязательно) Добавьте изображение для просмотра макета (например файл с расширением ≪.gif≫ или ≪.png≫) в папку Adobe Dreamweaver ≪CS4\Configuration\BuiltIn\Layouts≫. Изображения по умолчанию,

поставляемые с Dreamweaver, это PNG-файлы шириной в 227 пикселов и высотой в 193 пиксела.

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