Dreamweaver как изменить цвет текста

Узнайте, как с помощью инспектора свойств текста применить форматирование 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 в инспекторе свойств

Изменение цвета текста с помощью инспектора свойств

Если никакие специальные правила к тексту не применяются, то можно изменить цвет текста непосредственно в инспекторе свойств. В следующем примере обратите внимание на цвет текста перед редактированием. В смежном поле с палитрой цветов отображается белый цвет — это цвет текста, на котором находится курсор.

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

Задание HTML-форматирования в инспекторе свойств

Переименование класса в инспекторе свойств HTML

Dreamweaver отображает все классы, доступные для страницы, в меню «Класс» инспектора свойств HTML. Стили в этом списке можно переименовать, выбрав команду «Переименовать» в конце списка стилей класса.

Перед
тем как начать экспериментировать со
стилями, откройте Web-страницу 1.htm, либо
создайте ее. Над ее содержимым мы и будем
экспериментировать. На всякий случай
создайте ее копию под именем 2.htm.

Вся
работа со стилями протекает в панели
CSS Styles Dreamweaver, показанной на рисунке
ниже. Чтобы вызвать панель стилей на
экран (когда она скрыта), выберите в меню
Window пункт CSS Styles.

Чтобы
создать новый стиль, выберите пункт New
CSS
Rule
контекстного
или дополнительного меню либо нажмите
одноименную кнопку (см. рис. ниже),
расположенную в правом нижнем углу
панели CSS
Styles.

Рис.
Кнопка New CSS
Rule

В
результате на экране появится диалоговое
окно New CSS Rule,
показанное ниже. Введите в него название
нового стиля, например new.

Рис.
Диалоговое
окно New
CSS Rule

Далее
представлено окно задания параметров
стилей элементов, которое появится
после нажатия кнопки

,
этих параметров несколько:

1. На
   вкладке Туре
   диалогового
   окна CSS
   Rule
   Definition
   задаются параметры шрифта текста;

2. на
   вкладке Background
   задаются
   параметры фона элемента страницы;

3. Параметры
   текстового абзаца задаются на вкладке
   Block;

4. Параметры,
   задающие размеры и размещение элемента
   страницы, задаются на вкладке Box;

5. Параметры,
   определяющие цвет и толщину рамки
   вокруг элемента страницы, задаются на
   вкладке Border;

6. Параметры,
   задающие вид маркеров списка, задаются
   на вкладке List;

7. Вкладка
   Positioning
   задает
   параметры местонахождения
   свободно
   позиционируемых элементов;

8. на
   вкладке Extensions
   производится выбор дополнительных
   атрибутов, задающих особые параметры
   элементов страницы.

Расширенное
описание этих параметров представлено
ниже.

Определение стиля

Рис.
Вкладка Type диалогового окна New
CSS Style

На
данной вкладке вводятся нужные атрибуты,
для завершения ввода нажмите кнопку ОК
(будет создан стиль) или Cancel – для
отказа от этого.

Давайте
предположим, что мы хотим переопределить
стиль тега <р> и поместить определение
этого стиля в новую таблицу стилей,
которую затем привяжем к новой Web-странице
1.htm. Для этого сначала необходимо выбрать,
чем достигается тот или иной эффект
(атрибутов стилей, которые описаны
далее, довольно много). Если вам понадобится
выяснить синтаксис какого-то атрибута
CSS, можно обратиться к электронному
руководству, поставляемому в составе
Dreamweaver.

Параметры шрифта

Взгляните
еще раз на рисунок. На нем показана
вкладка Туре
диалогового
окна CSS
Style Definition. На
этой вкладке задаются параметры шрифта
текста.

Сам
шрифт выбирается в комбинированном
списке Font-family.

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

В
комбинированном списке Font—size
задается
размер шрифта. На рисунке ниже этот
список показан в раскрытом виде. Вы
можете либо ввести числовое значение
в одной из поддерживаемых CSS величин,
либо выбрать в списке предопределенное,
абсолютное или относительное.

Рис.
Комбинированный
список Font-size,
задающий размер шрифта

В
общем, в этом комбинированном списке
можно найти три вида пунктов:

• пункты
  – числовые значения. Задают размер
  шрифта в одной из поддерживаемых CSS
  единиц измерения;

• пункты
  xx-small,
  x-small, small, medium, large, x-large и xx-large, задающие
  одно из предопределенных значений
  размера шрифта;

• пункты
  larger
  и smaller, задающие
  относительный размер шрифта. Пункт
  larger
  увеличивает
  шрифт на одну позицию в списке
  предопределенных значений, а пункт
  smaller
  –
  уменьшает.

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

В
раскрывающемся списке, расположенном
правее Font—size,
выбирается
единица измерения размера шрифта. Этот
список доступен только тогда, когда в
Font—size
выбрано
или введено числовое значение.

В
комбинированном списке Font—weight
задается
величина «жирности» шрифта. Вы можете
ввести числовое значение «жирности»
от 100 до 900, либо выбрать одно из
предопределенных абсолютных или
относительных значений. Как и в списке
Size,
здесь
доступны пункты трех типов:

• пункты
  – числовые значения. Задают «жирность»
  шрифта в числах от 100 до 900. Обычный шрифт
  имеет значение 400, жирный – 700;

• пункты
  normal
  и bold, задающие
  соответственно обычный и жирный шрифт;

• пункты
  bolder
  и lighter, задающие
  относительную «жирность» шрифта. Пункт
  bolder
  увеличивает
  «жирность» на одну позицию в списке
  предопределенных значений, а пункт
  lighter
  –
  уменьшает.

В
раскрывающемся списке Font—style

вы
можете выбрать «стиль» шрифта, а именно,
будет ли он являться курсивом или нет.
Доступны три пункта: normal
–
обычный шрифт, italic
–
курсив и oblique
–
зависит от конкретной программы
Web-обозревателя, но обычно тоже курсив.

В
раскрывающемся списке Font—variant

задается
вид малых букв шрифта. Пункт normal
задает
нормальный их вид, a small-caps
делает
их похожими на уменьшенные заглавные
буквы.

В
комбинированном списке Line-height

задается
вертикальный размер строки текста.
Значение normal
задает
размер по умолчанию, вычисляемый самим
Web-обозревателем. Чтобы задать свой
размер, введите его вручную и выберите
единицу измерения. Раскрывающийся
список, задающий единицу измерения,
находится правее. Если вы его откроете,
то увидите, что он имеет новый пункт
multiple;
он
задает умножение размера по умолчанию
на введенное вами число.

Таблица
Единицы измерения, поддерживаемые
стандартом CSS

В
раскрывающемся списке Text—transform

задается
вид текста: будет ли он отображаться
только большими или только маленькими
буквами. Здесь доступны четыре пункта:

• capitalize
  –
  каждое слово текста отображается с
  большой буквы;

• uppercase
  –
  текст отображается только большими
  буквами;

• lowercase
  –
  только маленькими буквами;

• nоnе
  –
  текст отображается как он набран, без
  преобразований (поведение по умолчанию).

Группа
флажков Text—decoration

задает
дополнительное «украшение» текста:
подчеркивание, надчеркивание или
зачеркивание. Здесь доступно пять
флажков:

• underline
  –
  подчеркивает текст (поведение по
  умолчанию для гиперссылок);

• overline
  –
  надчеркивает текст;

• line-through
  –
  зачеркивает текст;

• blink
  –
  заставляет текст мерцать (поддерживается
  не всеми браузерами);

• none
  –
  убирает все эти «украшения» (поведение
  по умолчанию для остального текста).

Селектор
цветов Color

задает
цвет текста.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

• #
• #
• #
• #
• #
• #
• #
• #
• #
• #
• #

My point is that it is so easy to change color and other attributes to selected text in FP ans EW. CSS does not make it that easy. 

Yes it is easy to change color, (not background color) from Property inspector, but only once you have created a style sheet.

if you use CSS designer, then you can more easly change color AND background color from there instead of using Properties Inspector

but that is true that you first have to create a CSS style sheet

My point is that it is so easy to change color and other attributes to selected text

well HTML attributes are not used any more to control the display of the structure. CSS plenty has this role, it is made for that and help to easly control the display…

figure out, that you text background color is yellow… and for new design you need to change it to orange… using attribute, you will have to do it one by one occurence to all you pages… using CSS, you will change it in the description property, and that’s it… done…

Why can I in DW easy change text to bold but not its color? Perhaps I can do that in DW 2022 …

you’re confusing structure and display. BOLD is a display not a structure. SO when using B in the property panel, in  fact DW add a STRONG tag surrounding the selection.

well it add a STRONG tag depending on yor prefences it could also add instead a B tag

that said, it is visualy bold because it is a common case that the STRONG tag use a weight property set to 700 that correspond to an heavy print (by default in all browser) but if you use a CSS reset STRONG Tag, wont be bold at all…

My point is that it is so easy to change color and other attributes to selected text in FP ans EW. CSS does not make it that easy. 

Yes it is easy to change color, (not background color) from Property inspector, but only once you have created a style sheet.

if you use CSS designer, then you can more easly change color AND background color from there instead of using Properties Inspector

but that is true that you first have to create a CSS style sheet

My point is that it is so easy to change color and other attributes to selected text

well HTML attributes are not used any more to control the display of the structure. CSS plenty has this role, it is made for that and help to easly control the display…

figure out, that you text background color is yellow… and for new design you need to change it to orange… using attribute, you will have to do it one by one occurence to all you pages… using CSS, you will change it in the description property, and that’s it… done…

Why can I in DW easy change text to bold but not its color? Perhaps I can do that in DW 2022 …

you’re confusing structure and display. BOLD is a display not a structure. SO when using B in the property panel, in  fact DW add a STRONG tag surrounding the selection.

well it add a STRONG tag depending on yor prefences it could also add instead a B tag

that said, it is visualy bold because it is a common case that the STRONG tag use a weight property set to 700 that correspond to an heavy print (by default in all browser) but if you use a CSS reset STRONG Tag, wont be bold at all…

В Dreamweaver вы можете изменить фон и цвета текста, доступные в категориях «Внешний вид». Обратите внимание, что параметры CSS рекомендуется по вариантам HTML. Когда вы используете опции «Внешний вид» (CSS), Dreamweaver автоматически создает соответствующие стили для тега body. Когда вы используете какие-либо параметры CSS в диалоговом окне «Свойства страницы», Dreamweaver автоматически создает соответствующие стили и перечисляет их на панели «Стили CSS».

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

Чтобы изменить настройки шрифта, цвет фона, цвет текста и поля страницы для всей страницы, выполните следующие действия:

1. Выберите «Изменить» → «Свойства страницы».

   Отображается категория появления (CSS) диалогового окна «Свойства страницы».

2. В раскрывающемся списке «Шрифт страницы» укажите шрифты, которые вы хотите для текста на своей странице.

   В этом примере лицо шрифта устанавливается в коллекцию, которая начинается с шрифта Cambria. Если вы не укажете шрифт, ваш текст появится в шрифте, указанном в браузере вашего пользователя, который обычно является Times.

3. Если вы хотите, чтобы текст на вашей странице был выделен полужирным шрифтом или курсивом, выберите соответствующие параметры шрифта в раскрывающихся списках справа от параметров шрифта страницы.

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

4. В раскрывающемся списке «Размер» укажите размер шрифта, который требуется для текста на вашей странице.

   Опять же, вы можете переопределить эти параметры для определенного текста на странице, например заголовки.

5. Нажмите поле «Цвет текста», чтобы открыть палитру цветов. Выберите любой цвет, который вам нравится.

   Выбранный вами цвет заполняет окно выбора цвета, но не будет изменять цвет текста на вашей странице, пока вы не нажмете кнопку «Применить» или «ОК».

6. Щелкните поле «Цвет фона», чтобы открыть палитру цветов. Выберите любой цвет, который вам нравится.

   Выбранный вами цвет заполняет окно выбора цвета, но цвет не заполняет фон, пока вы не нажмете кнопку «Применить» или «ОК».

7. Если вы хотите вставить графику или фотографию в фоновый рисунок своей страницы, нажмите кнопку «Обзор» рядом с полем «Фоновое изображение» и выберите изображение в диалоговом окне «Выбрать источник изображения».

   Когда вы вставляете фоновое изображение, оно автоматически повторяется или плитки, по страницам и вниз по странице, если вы не выберете опцию из раскрывающегося списка «Повторить». No-Repeat предотвращает повторное воспроизведение фонового изображения. Повторите-X и повторите-Y по вертикали (по оси x) или по горизонтали (по оси y), соответственно, переверните изображение по всей странице.

8. Используйте параметры полей внизу диалогового окна, чтобы изменить левое, правое, верхнее или нижнее поля вашей страницы.

   Большинство веб-браузеров добавляют небольшое пространство в верхнюю и левую стороны окна браузера вокруг любой веб-страницы. Ввод 0 во всех четырех из этих полей удаляет любое пространство по умолчанию, позволяющее создавать проекты, которые начинаются с краю браузера.

9. Нажмите кнопку «Применить», чтобы увидеть, как цвета выглядят на вашей странице.

10. Нажмите «ОК», чтобы завершить и закрыть диалоговое окно «Свойства страницы».

Вводить текст в Dreamweaver очень просто – так же, как в обычном текстовом редакторе. Устанавливаете курсор мыши в нужном месте и, используя клавиатуру, набираете текст:

Начальные свойства текста устанавливаются в уже знакомом нам окне Page Properties (Свойства страницы). В нашем случае основной текст будет темно-синего цвета, размером 14 пикселей.

Есть несколько путей изменить форматирование введенного текста. Первый – пункт Text строки командного меню. К примеру, если выполнить команду Text (Текст) | Paragraph Format (Формат абзаца), откроется список возможных вариантов форматирования не только текста, но и целого абзаца.

Например, можно выделить абзац заголовком. Всего заголовков шесть. Чем больше номер уровня заголовка, тем меньше его размер.

Но форматировать текст с помощью пункта Text не очень-то удобно, да и долго, к тому же. Поэтому на панели инструментов Insert (Вставка) открываем вкладку Text (Текст):

Как видите, здесь располагаются инструменты, предназначенные для редактирования текста. И работать с ними гораздо быстрее и проще.

Но нет предела совершенства! И мы идем дальше. К панели Properties (Свойства). Панель Properties отображает свойства выделенного объекта. Сейчас курсор находится в конце введенного текста и панель имеет следующий вид.

В нижней части панели отображаются свойства ячейки таблицы, в которую был введен текст. А в верхней находится как раз то, что нам нужно – свойства самого текста.

Надо заметить, что при их изменении свойств текста они сразу отобразятся на панели. Намного удобнее предыдущих способов, не так ли?

Давайте рассмотрим панель поподробнее. У левой границы панели расположен раскрывающийся списке Format (Формат) где, как вы уже успели догадаться, можно выбрать формат текста.

Size – размер текста. Его можно установить в разных значениях и единицах измерения. Примеры текста с разными установками размера:

На панели Properties также содержится группа кнопок, служащая для выравнивая текста :

• Align Left – выровнять по левому краю;
• Align Center – выровнять по центру;
• Align Right – выровнять по правому краю;
• Align Justify – выровнять по ширине страницы.

  Для создания отступов от строки используется кнопка Text Indent (Задать отступ текста). Расположенная рядом кнопка Text Outdent (Убрать отступ текста) отступ снимает.

Также в Dreamweaver с помощью специальных кнопок  на панели Properties можно создать два вида списка – маркированный (Unordered List – неупорядоченный список) и нумерованный (Ordered List – упорядоченный список)

Способов выделить что-либо в тексте существует масса. К примеру, выделение полужирным (Bold) и курсивом (Italic)  – используется повсеместно, главным образом для подчеркивания важных слов и определений.

Левая кнопка с буквой В (Bold) выделяет текст полужирным, а правая – I (Italic) – курсивом. Эти инструменты можно использовать как отдельно друг от друга, так и совместно.

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

Помимо кнопок на панели Properties инструменты для выделения текста полужирным и курсивом можно увидеть, выполнив команду меню Text (Текст) | Style (Стиль).

Также, помимо перечисленных пунктов можно выбрать еще некоторые способы форматирования, например:

Один из способов выделения текста – изменение стиля шрифта. Задать стиль шрифта в Dreamweaver можно с помощью диалогового окна Page Properties и списка Font (Шрифт) на панели Properties.

Как видите, шрифт не один, их несколько. Зачем? Дело в том, что выбранного Вами шрифта может не оказаться на компьютере посетителя. Возьмем пример с «Verdana, Arial, Helvetica, sans-serif». Если шрифт Verdana не установлен, текст будет отображаться шрифтом Arial. Если и его нет – Helvetica. А если случится так, что на компьютере пользователя нет ни одного из перечисленных шрифтов, текст отобразиться любым из имеющихся вида sans-serif (без засечек).

В Dreamweaver есть несколько готовых групп шрифтов. Например, «Times New Roman, Times, serif», «Courier New, Courier, mono» и так далее. Группу шрифтов можно также создать самостоятельно, выбрав в списке Font нижний пункт Edit Font List (Редактировать список шрифтов). Откроется следующее диалоговое окно:

Для создания новой группы, в списке Available fonts (Доступные шрифты) выбирайте те шрифты, которые будут в новой группе. Затем щелкните по кнопке со стрелками слева от списка. Выбранный шрифт переместится в соседнее окно Chosen fonts (Выбранные шрифты).

Новая шрифтовая группа отобразится в верхнем списке Font list (Список шрифтов). Для удаления шрифтовой группы можно воспользоваться минусом, расположенным в верхней части окна Edit Font List. Чтобы изменения вступили в силу, нажмите ОК.

И, напоследок об изменении цвета текста. На панели Properties располагается так называемый селектор цвета – Text Color (Цвет текста). Он состоит из двух частей – слева располагается маленький квадратик, в котором отображается текущий цвет, а справа — поле, в котором отображается шестнадцатеричный код этого цвета.

Щелчок по квадратику открывает палитру цветов.

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

Например, Default Color сбрасывает текущие установки цвета текста и устанавливает цвет по умолчанию. Если Вам будет недостаточно представленной палитры цветов, кнопка System Color Picher позволит открыть стандартное диалоговое окно выбора цвета.

А кнопка с изображением треугольника открывает список, в котором можно выбрать режим палитры цветов. Последний пункт этого списка – Snap to Web Safe включает «безопасную» веб-палитру. Цвета этой палитры должны без искажений отображаться во всех браузерах.

.cm-templateComment, .cm-templateAttrVal {
    color: #98fb98;
}


.cm-comment {
    color: @comment;
}
.cm-number {
    color: @rb-lightblue;
}
.cm-string {
    color: @rb-orange;
}
.cm-string.cm-property {
    color: @rb-white;
}
.cm-error {
    color: @rb-red !important;
}
.cm-meta,.cm-keyword,.cm-bracket {
    color: @rb-magenta;
}
.cm-atom,.cm-link {
    color: @rb-yellow;
}
.cm-attribute,.cm-property {
    color: #66d9ef;
}
.cm-variable,.cm-variable-3,.cm-qualifier,.cm-def,.cm-operator {
    color: @rb-white;
}
.cm-variable-2,.cm-tag {
    color: @brightgreen;
}
.cm-builtin,.cm-special {
    color: #ff9d00;
}

1 ответ