Создание страницы с макетом 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».

Работа с тегами Div

Вставка тегов Div

Теги Div можно использовать для создания блоков макета CSS и расположения их в документе. Это удобно, если существует таблица стилей СSS со стилями позиционирования, прикрепленная к документу. Dreamweaver позволяет быстро вставлять теги Div и применять к ним существующие стили.

1 В области ≪Окно документа≫ установите курсор вставки там, где необходим тег Div.

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

• Выберите меню ≪Вставка≫ > ≪Объекты макета≫ > ≪Тег Div≫

• Выберите категорию ≪Макет≫ на панели ≪Вставка≫, затем нажмите на кнопку ≪Вставить тег Div≫.

3 Задайте любой из следующих параметров.

Вставка Позволяет выбрать местоположение для тега div и имя тега, если он не является новым тегом.

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

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

Примечание. Dreamweaver предупреждает о введении кода тега, имеющегося в документе.

Создать правило CSS Открывает диалоговое окно создания правила CSS.

4 Нажмите кнопку ≪ОК≫.

Тег Div появляется в документе в качестве окна с текстом местозаполнителя. При наведении курсора на это окно Dreamweaver подсвечивает его. Если тег Div абсолютно позиционирован, он становится элементом АР. (Можно редактировать те теги Div,

которые не являются абсолютно позиционированными.)

Редактирование тегов Div

После вставки тега Div можно управлять им и добавлять к нему содержимое.

Примечание. Абсолютно позиционированные теги Div становятся элементами AP.

Границы тегов Div видимы в момент их назначения и при выбранном параметре ≪Контур макета CSS≫.

(Параметр ≪Контур макета CSS≫ выбран по умолчанию в меню ≪Просмотр≫ > ≪Вспомогательные элементы≫.)

При наведении курсора на тег divDreamweaver подсвечивает этот тег. Цвет подсветки можно изменить, а также можно отключить выделение цветом.

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