Узнайте, как использовать панель конструктора CSS, чтобы создавать или присоединять таблицы стилей, медиазапросы, селекторы, а также настраивать свойства CSS.
Панель CSS Designer (Window > CSS Designer) — это инспектор свойств CSS, который позволяет «визуально» создавать стили CSS, файлы и задавать свойства, а также медиа-запросы.
В интерфейсе CSS Designer доступны следующие разделы:
С помощью CSS Designer можно редактировать отдельное правило в таблице стилей CSS (используйте вкладку «Current» в CSS Designer) или, если хотите, работать непосредственно в таблице стилей CSS (используйте вкладку «All» в CSS Designer).
В области «Источники» панели конструктора CSS щелкните 
, а затем выберите один из следующих пунктов:
В зависимости от выбранного варианта откроется диалоговое окно «Создание нового файла CSS» или Присоединение существующего файла CSS.
Нажмите кнопку «Обзор», чтобы указать имя файла CSS и, если создается новый файл CSS, расположение, в которое он будет сохранен.
Выполните одно из следующих действий.
(Необязательно) Выберите «Условное использование» и укажите медиазапрос, который будет связан с этим файлом CSS.
На панели конструктора CSS щелкните «Источник CSS» в области «Источники».
Щелкните 
в области «@Медиа», чтобы добавить новый медиазапрос.
Откроется диалоговое окно «Определение медиазапроса», в котором будут перечислены все поддерживаемые Dreamweaver условия медиазапросов.
Выберите условия, соответствующие вашим требованиям.
Для всех выбранных условий необходимо задать допустимые значения. В противном случае соответствующие медиазапросы не будут созданы.
Для нескольких условий поддерживается только операция «И».
Если условия медиазапроса добавляются с помощью кода, в диалоговое окно «Определение медиазапроса» будут занесены только поддерживаемые условия. Однако в текстовом поле «Код» этого диалогового окна будет отображен весь код (в том числе и неподдерживаемые условия).
Если щелкнуть медиазапрос в представлении «Дизайн» или в режиме интерактивного просмотра, то область просмотра изменяется в соответствии с выбранным медиазапросом. Для переключения в полноразмерную область просмотра щелкните «Глобально» в области «@Медиа».
На панели CSS Designer выберите источник CSS в области Sources или медиа-запрос в области @Media.
В области «Селекторы» щелкните . На основе элемента, выбранного в документе, CSS Designer интеллектуально определяет и предлагает соответствующий селектор (до трех правил).
Выполните одно или несколько следующих действий.
Примечание. Пункт «Дублировать в медиазапрос» доступен, только если источник выбранного селектора содержит медиазапросы. Нельзя создать копию селектора из одного источника в медиазапросе другого источника.
Теперь можно копировать стили из одного селектора и вставлять их в другой. Можно копировать все стили или стили только определенной категории, например макета, текста и рамки.
Щелкните правой кнопкой мыши селектор и выберите один из доступных вариантов:
Нажмите нужный селектор и перетащите его в новое положение с помощью панели Selectors.
Свойства группируются в следующие категории и представляются разными значками в верхней части области Свойства:
Перед редактированием свойств селектора CSS задайте элементы, связанные с селектором CSS, используя обратную проверку. Этот способ позволяет оценить, всем ли элементам, выделенным во время обратной проверки, фактически требуются изменения.
Установите флажок «Показывать заданные», чтобы в списке отображались только заданные свойства. Чтобы отобразить список всех свойств, которые можно указать для селектора, снимите флажок «Показывать заданные».
Чтобы задать свойство, например width или border-collapse, щелкните нужный вариант, отображенный около свойства в области «Свойства».
Имена переопределенных свойств отображаются перечеркнутыми.
Элементы управления в области «Свойства» конструктора CSS позволяют быстро задать такие свойства, как margin (поле), padding (заполнение) и position (положение). Если вы предпочитаете код, можете указать сокращенный код для полей и отступов в полях быстрого редактирования, как показано в этом примере.
Щелкните значение и введите нужные цифры. Если хотите, чтобы все четыре значения были одинаковыми и изменялись одновременно, нажмите значок ссылки в центре.
В любой момент времени можете отключить или удалить конкретные значения, например, значение левого поля, сохранив правое, верхнее и нижнее значения.
Свойства Border Control организованы по логическим вкладкам, чтобы помочь вам быстро просмотреть или изменить свойства.
Если вы предпочитаете код, можете указать сокращенный код для границ и радиуса границы в текстовом поле быстрого редактирования.
Чтобы задать свойства управления границами, вначале задайте свойства на вкладке «Все стороны». Затем включаются другие вкладки, и свойства, заданные на вкладке «All Sides» (Все стороны), отображаются для отдельных границ.
При изменении свойства на отдельных вкладках границ значение соответствующего свойства на вкладке «All Sides» (Все стороны) изменяется на «undefined» (значение по умолчанию).
В приведенном ниже примере цвет границы был установлен как черный, а затем изменен на красный для верхней границы.
Вставляемый код зависит от настроек сокращенной или полной записи.
Во время проверки фокус переводится на вкладки в порядке приоритета «заданных» вкладок. Наивысший приоритет имеет вкладка «Все стороны», а за ней следуют «Верхняя», «Правая», «Нижняя» и «Левая». Например, если задано только верхнее значение для границы, вычисляемый режим перемещает фокус на вкладку «Top» (Верх), игнорируя вкладку «All sides» (Все стороны), поскольку вкладка «All sides» (Все стороны) не задана.
Функция «Включение/отключение свойства CSS» позволяет выносить фрагменты CSS-кода в комментарии через панель «Конструктор CSS» без внесения изменений непосредственно в код. При вынесении фрагментов CSS-кода в комментарии можно видеть, как конкретные свойства и значения влияют на вид страницы.
При отключении свойства CSS Dreamweaver добавляет к нему теги комментария CSS и метку [disabled]. После этого можно легко снова включить или удалить отключенное свойство CSS.
Можете отключить или удалить каждое свойство с помощью CSS Designer.
На следующем снимке экрана показаны значки отключения и удаления для свойства height. Эти значки отображаются при наведении курсора мыши на свойство.
Вы также можете использовать элементы управления удалением и отключением на уровне группы Border Control, чтобы применить эти действия ко всем свойствам.
Селекторы и свойства CSS можно добавлять или удалять с помощью комбинаций клавиш. Также можете перемещаться между группами свойств в панели Properties (Свойства).
|
Комбинация клавиш |
Рабочий процесс |
|
CTRL + Alt +[Shift =] |
Добавляет селектор (если элемент управления находится в области селектора) |
|
CTRL + Alt+ S |
Добавляет селектор (если элемент управления находится в приложении) |
|
CTRL + Alt +[Shift =] |
Добавляет свойство (если элемент управления находится в области свойства) |
|
CTRL + Alt+ P |
Добавляет свойство (если элемент управления находится в приложении) |
|
Select + Delete |
Удаляет селектор, если селектор выбран |
|
CTRL + Alt + (PgUp/PgDn) |
Позволяет переходить от одного раздела к другому во вложенной панели свойств |
Чаще всего один селектор CSS связан с несколькими элементами страницы. Например, текст основного содержимого страницы, текст заголовка и текст нижнего колонтитула можно связать с одним селектором CSS. При редактировании свойств селектора CSS все связанные с ним элементы изменятся, включая и те, которые не планируется менять.
Интерактивное выделение помогает определить все элементы, связанные с селектором CSS. Если необходимо изменить только один элемент или часть элементов, можно создать новый селектор CSS для этих элементов, а затем изменить свойства.
Для определения элементов страницы, связанных с селектором CSS, наведите курсор мыши на селектор в режиме интерактивного просмотра (со значением интерактивного кода «выкл»). Dreamweaver выделит пунктирными линиями связанные с ним элементы.
Чтобы зафиксировать выделение элементов, щелкните селектор. Теперь элементы выделены синим контуром.
Чтобы удалить синий контур вокруг элементов, еще раз щелкните селектор.
Интерактивное выделение по умолчанию включено. Чтобы отключить интерактивное выделение, щелкните опции интерактивного просмотра на панели инструментов документа и выберите опцию «Отключить интерактивное выделение».
При изменении внешней таблицы стилей CSS все документы, связанные с этой таблицей, обновляются в соответствие с правкой.
Можно экспортировать стили CSS, применяемые в документе, чтобы создать новую таблицу стилей CSS, присоединить или привязать внешнюю таблицу стилей, чтобы применить имеющиеся в ней стили.
К страницам можно присоединить любую таблицу стилей, созданную или скопированную в сайт.
Откройте конструктор CSS, выполнив одно из следующих действий.
В конструкторе CSS щелкните значок «+» рядом с пунктом «Источники» и выберите «Присоединить существующий файл CSS».
Выполните одно из следующих действий.
Нажмите кнопку «Просмотр», чтобы убедиться, что к текущей странице применен нужный стиль.
Если примененные стили отличаются от ожидаемых, то нажмите кнопку «Отмена», чтобы удалить таблицу стилей. Будет восстановлен предыдущий внешний вид страницы.
Нажмите кнопку «ОК».
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
