Откройте инспектор свойств (Окно > Свойства), если он еще не открыт, и выберите опцию CSS в левом углу панели.
Последнее обновление
20 дек. 2021 г.
Узнайте, как с помощью инспектора свойств текста применить форматирование HTML или CSS в Dreamweaver.
Вы можете использовать инспектор свойств текста для применения HTML-форматирования или форматирования каскадных таблиц стилей (CSS). Когда вы применяете HTML-форматирование, Dreamweaver добавляет свойства в HTML-код в теле страницы. Когда вы применяете CSS-форматирование, Dreamweaver записывает свойства в заголовок документа или в отдельную таблицу стилей.
При создании встроенных стилей CSS приложение Dreamweaver добавляет код атрибута стиля непосредственно к основной части страницы.
О форматировании текста (CSS и HTML)
Форматирование текста в Dreamweaver похоже на использование стандартного текстового редактора. Вы можете задать стили форматирования по умолчанию (Абзац, Заголовок 1, Заголовок 2 и т. д.) для блока текста, изменить шрифт, кегль, цвет и выравнивание выделенного текста или применить стили текста, такие как полужирный, курсив, код (моноширинный) и подчеркивание.
Dreamweaver имеет два инспектора свойств, объединенных в один: инспектор свойств CSS и инспектор свойств HTML. Когда вы используете инспектор свойств CSS, Dreamweaver форматирует текст с помощью каскадных таблиц стилей (CSS). CSS дает веб-дизайнерам и разработчикам больший контроль над дизайном веб-страниц, обеспечивая улучшенные функции доступности и уменьшенный размер файлов. Инспектор свойств CSS позволяет получить доступ к существующим стилям, а также создавать новые.
Использование CSS — это способ контролировать стиль веб-страницы без ущерба для ее структуры. Разделяя элементы визуального дизайна (шрифты, цвета, поля и т. д.) от структурной логики веб-страницы, CSS дает веб-дизайнерам визуальный и типографский контроль, не жертвуя целостностью контента.Кроме того, определение типографского дизайна и макета страницы из одного отдельного блока кода — без необходимости прибегать к графическим картам, тегам font, таблицам и прозрачным GIF — позволяет ускорить загрузку, упростить обслуживание сайта и создать центральную точку управления атрибутами дизайна на нескольких веб-страницах.
Вы можете сохранить стили, созданные с помощью CSS, непосредственно в документе или для большей гибкости и возможностей сохранить стили во внешней таблице стилей.Если вы прикрепите внешнюю таблицу стилей к нескольким веб-страницам, все страницы автоматически отразят любые изменения, которые вы внесете в таблицу стилей. Для доступа ко всем правилам CSS для страницы используйте панель Стили CSS (Окно > Стили CSS). Для доступа к правилам, которые применяются к текущему выделению, используйте панель Стили CSS (текущий режим) или всплывающее меню Целевое правило в инспекторе свойств CSS.
Если хотите, можете использовать теги разметки HTML для форматирования текста на ваших веб-страницах. Для использования тегов HTML вместо CSS отформатируйте текст с помощью инспектора свойств HTML.
На одной странице можно сочетать форматирование CSS и HTML 3.2. Форматирование применяется согласно иерархии: форматирование HTML 3.2 переопределяет форматирование, примененное внешними таблицами стилей CSS, а внедренный в документ код CSS переопределяет внешний.
Редактирование правил CSS в инспекторе свойств
Выполните одно из действий, описанных ниже.
- Поместите курсор внутри блока текста, который был отформатирован правилом, которое хотите изменить. Правило появится во всплывающем меню Целевое правило.
- Выберите правило из всплывающего меню «Целевое правило».
- Нажмите «Редактировать правило».
Внесите изменения в правило, используя различные параметры
в инспекторе свойств CSS.
Целевое правило.
Правило, которое редактируется в инспекторе свойств CSS. Если к тексту уже применен стиль, правило, влияющее на форматирование текста, отображается при щелчке по тексту на странице.Вы также можете использовать всплывающее меню «Целевое правило» для создания новых правил CSS, новых встроенных стилей или применения существующих классов к выделенному тексту.При создании нового правила необходимо заполнить диалоговое окно «Новое правило CSS».Дополнительные сведения см. по ссылкам в конце данного раздела.
Изменить правило.
Открывает диалоговое окно «Определение правила CSS» для целевого правила.Если выбрать «Новое правило CSS» во всплывающем меню «Целевое правило» и нажать кнопку «Редактировать правило», вместо этого Dreamweaver откроет диалоговое окно определения нового правила CSS.
Конструктор CSS
Открывает панель CSS Designer и отображает свойства для целевого правила в текущем представлении.
Шрифт.
Изменяет шрифт целевого правила.
Размер.
Задает размер шрифта для целевого правила.
Цвет текста
Определяет выбранный цвет как цвет шрифта в целевом правиле. Выберите веб-безопасный цвет, щелкнув поле цвета, или введите шестнадцатеричное значение (например, #BB5153) в соседнем текстовом поле.
Полужирный.
Добавляет к целевому правилу полужирный шрифт.
Курсив
Добавляет к целевому правилу курсив.
Выравнивание по левому краю, по центру или по правому краю.
Выравнивает целевое правило по левому краю, по центру или по правому краю.
«Шрифт», «Размер», «Цвет текста», «Полужирный», «Курсив» и «Выравнивание» всегда отображают свойства для правила, применимого к текущему выделению в окне документа. Изменение любого из этих свойств сказывается на целевом правиле.
Изменение цвета текста с помощью инспектора свойств
Если никакие специальные правила к тексту не применяются, то можно изменить цвет текста непосредственно в инспекторе свойств. В следующем примере обратите внимание на цвет текста перед редактированием. Поле рядом с палитрой цветов отображает белый цвет, указывая цвет текста в месте расположения курсора.
Чтобы изменить цвет текста, выделите текст, который нужно изменить. Щелкните палитру цветов и выберите цвет по своему усмотрению. См. следующее изображение, где инспектор свойств отображает новый цвет.
Задание HTML-форматирования в инспекторе свойств
Откройте инспектор свойств («Окно» >
«Свойства»), если он еще не открыт, и нажмите кнопку HTML.
Выберите текст, который требуется отформатировать.
Задайте параметры, которые нужно применить к выделенному тексту.
Формат.
Задает стиль абзаца выделенного текста. «Абзац» применяет формат по умолчанию для тега <p>, «Заголовок 1» добавляет тег H1 и так далее.
ИД
Присваивает выделенному фрагменту идентификатор. Всплывающее меню ID (если применимо) содержит все неиспользованные объявленные идентификаторы документа.
Класс
Отображает стиль класса, который в настоящее время применен к выделенному тексту. Если к выделенному фрагменту не применены стили, во всплывающем меню отображается «Нет стиля CSS». Если к выделенному фрагменту применено несколько стилей, меню остается пустым.
Используйте меню «Стиль» для выполнения любого из следующих действий:
Выберите стиль, который хотите применить к выделенному фрагменту.
Выберите «Без стиля», чтобы удалить последний выбранный стиль.
Чтобы изменить имя стиля, выберите команду «Переименовать».
Выберите «Прикрепить таблицу стилей», чтобы открыть диалоговое окно, которое позволяет прикрепить внешнюю таблицу стилей к странице.
Полужирный
Применяет <b> или <strong> к выделенному тексту в соответствии с настройкой стиля, заданной в категории «Общие» диалогового окна Настройки.
Курсив.
Применяет <i> или <em> к выделенному тексту в соответствии с настройкой стиля, заданной в категории «Общие» диалогового окна Настройки.
Неотсортированный список.
Создает на основе выделенного текста маркированный список. Если текст не выделен, создается новый маркированный список.
Отсортированный список.
Создает на основе выделенного текста нумерованный список. Если текст не выделен, создается новый нумерованный список.
Создание и удаление цитаты.
Добавляет отступ или убирает отступ у выделенного текста путем применения или удаления тега blockquote. В списке добавление отступа создает вложенный список, а удаление отступа убирает вложенность списка.
Ссылка.
Создает на основе выделенного текста гипертекстовую ссылку. Нажмите значок папки для поиска файла в вашем сайте; введите URL; перетащите значок «Указать на файл» к файлу на панели «Файлы» или перетащите файл с панели «Файлы» в поле.
Заголовок
Задает текстовую подсказку для гипертекстовой ссылки.
Назначение
Указывает фрейм или окно, в которое будет загружен связанный документ:
_blank загружает связанный файл в новое безымянное окно браузера.
_parent загружает связанный файл в родительский набор фреймов или окно фрейма, содержащего ссылку. Если фрейм, содержащий ссылку, не является вложенным, связанный файл загружается в полное окно браузера.
_self загружает связанный файл в том же фрейме или окне, что и ссылка. Этот целевой объект подразумевается по умолчанию, поэтому обычно его не нужно указывать.
_top загружает связанный файл в полное окно браузера, тем самым удаляя все фреймы.
Переименовать класс из инспектора свойств HTML
Dreamweaver отображает все классы, доступные вашей странице, в меню «Класс» HTML-инспектора свойств. Вы можете переименовать стили в этом списке, выбрав опцию «Переименовать» в конце списка стилей классов.
На панели «Инспектор свойств» выберите раскрывающийся список «Класс».
В появившемся списке выберите «Переименовать» в конце списка.
Выберите стиль, который хотите переименовать, во всплывающем меню «Переименовать стиль».
Введите новое имя в текстовом поле «Новое имя» и нажмите кнопку «ОК».
Связанные материалы
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
