Панель форматирования в adobe dreamweaver позволяет

Обновлено: 06.07.2024

Несмотря на то, что предпочтительным методом форматирования текста является CSS, Dreamweaver позволяет форматировать текст с помощью HTML.

Форматирование абзацев
С помощью всплывающего меню «Формат» в инспекторе свойств (раздел HTML) или подменю «Формат» > «Формат абзаца» можно применять стандартные теги абзацев и заголовков.

1 Расположите курсор в абзаце или выделите часть его текста.
2 В инспекторе свойств подменю «Формат» > «Формат абзаца» или во всплывающем меню «Формат» выберите один из вариантов действий.

• Выберите формат абзаца (например, «Заголовок 1», «Заголовок 2», «Форматированный текст» и т.д.). Ко всему абзацу будет применен HTML-тег, связанный с выбранным стилем (например, тегу h1 соответствует стиль «Заголовок 1», h2 — «Заголовок 2», pre — «Форматированный текст» и т.д.).
• Выберите пункт «Нет», чтобы удалить форматирование абзаца.

При применении к абзацу тега заголовка Dreamweaver автоматически добавляет следующую строку текста как стандартный абзац. Чтобы изменить эту настройку, выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh); затем в категории «Общие» в разделе «Параметры изменения» отмените выбор параметра «Переключиться в стиль простого абзаца после заголовка».

Дополнительно:
Задание свойств текста в инспекторе свойств
Форматирование текста с использованием CSS

Изменение цвета текста
Можно изменить цвет по умолчанию для всего текста на странице или же цвет выделенного текста.
Дополнительно: Цвет

Определение цветов по умолчанию для текста страницы
❖ Выберите пункт меню Изменить > «Свойства страницы» > «Внешний вид (HTML)» или «Ссылки (HTML)», затем выберите цвета в параметрах «Цвет текста», «Цвет ссылок», «Просмотренные ссылки» и «Активные ссылки».

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

Изменение цвета выделенного текста
❖ Выберите «Формат» > «Цвет», выберите цвет с помощью системной палитры цветов и нажмите кнопку «ОК».

Выравнивание текста
Для выравнивания текста с помощью HTML используется меню «Формат» > «Выравнивание». Чтобы выровнять какой-либо элемент страницы по центру, воспользуйтесь командой «Формат» > «Выравнивание» > «По центру».

Выравнивание текста на странице
1 Выделите текст, который требуется выровнять, или просто установите курсор в начало текста.
2 Выберите меню «Формат» > «Выравнивание» и выберите соответствующую команду выравнивания.

Выравнивание элементов страницы по центру
1 Выделите элемент (изображение, подключаемый модуль, таблицу или другой элемент таблицы), который необходимо выровнять по центру.
2 Выберите «Формат» > «Выравнивание» > «По центру».

Примечание. Выравнивать по центру можно целые блоки текста, но не части заголовков или абзацев.

Отступ текста
С помощью команды «Отступ» можно применить к абзацу текста HTML-тег blockquote, создав отступ текста с обеих сторон страницы.
1 Установите курсор в абзац, в котором необходимо сделать отступ.
2 Выберите меню «Формат» > «Отступ» или «Выступ» либо выберите «Список» > «Отступ» или «Выступ» в контекстном меню.

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

Применение стилей шрифтов
HTML-форматирование можно применить как к одной букве, так и к целым параграфам и блокам текста на сайте. Используйте меню «Формат» для определения или изменения параметров шрифта для выделенного текста. Можно задать тип шрифта, стиль (например, полужирный или курсив), а также размер.

1 Выделите текст. Если текст не выделен, функция применяется к последующему вводимому тексту.
2 Выберите из следующих параметров.

• Чтобы изменить шрифт, выберите сочетание шрифтов в меню «Формат» > «Шрифт». Выберите «По умолчанию», чтобы отменить ранее примененные шрифты. Параметр «По умолчанию» применяет к выделенному тексту шрифт по умолчанию (или из браузера, или назначенный данному тегу в таблице стилей CSS).
• Чтобы изменить начертание шрифта, выберите начертание шрифта (полужирный, курсив, подчеркивание и т.п.) в меню «Формат» > «Стиль».

Дополнительно:
Создание макетов страниц с помощью CSS
Создание нового правила CSS

Переименование класса в инспекторе свойств HTML
Dreamweaver отображает все классы, доступные для страницы, в меню «Класс» инспектора свойств (раздел HTML).
Стили в этом списке можно переименовать, выбрав команду «Переименовать» в конце списка стилей класса.
1 Выберите во всплывающем меню «Стиль» инспектора свойств текста команду «Переименовать».
2 Во всплывающем меню «Переименовать стиль» выберите стиль, который необходимо переименовать.
3 В текстовом поле «Новое имя» введите новое имя и нажмите кнопку «ОК».

Добавление интервалов между абзацами
Dreamweaver работает подобно множеству других текстовых процессоров: при нажатии клавиши «Enter» (Windows) или «Return» (Macintosh) создается новый абзац. Веб-браузеры автоматически вставляют между абзацами пустую строку. Можно добавить отдельную пустую строку между абзацами, вставив разрыв строки.

Добавление символа конца абзаца
❖ Нажмите клавишу «Ввод» (Windows) или «Return» (Macintosh).

Добавление разрыва строки
❖ Выполните одно из следующих действий.

• Нажмите сочетание клавиш «Shift» + «Enter» (Windows) или «Shift» + «Return» (Macintosh).
• Выберите «Вставка» > «HTML» > «Специальные символы» > «Конец строки».
• В категории «Текст» на панели «Вставка» нажмите выберите значок «Конец строки».

Использование горизонтальных линий
Горизонтальные линейки (линии) полезны для упорядочения информации. На странице можно визуально отделить текст и объекты с помощью одной или нескольких линеек.
Создание горизонтальной линейки
1 В области «Окно документа» установите курсор там, где необходимо вставить горизонтальную линейку.
2 Выберите меню «Вставка» > «HTML» > «Горизонтальная линия».

Изменение горизонтальной линии

1 В области «Окно документа» выделите горизонтальную линию.
2 Выберите меню «Окно» > «Свойства», чтобы открыть инспектор свойств, и измените нужные свойства.

Текстовое поле идентификатора В этом поле можно указать идентификатор для горизонтальной линейки.
W и H (ширина и высота) Указывают ширину и высоту линейки в пикселах или процентах от размера страницы.
Выравнивание Указывает способ выравнивания линейки («По умолчанию», «По левому краю», «По центру» или «По правому краю»). Этот параметр применяется только в случае, когда ширина линейки меньше ширины окна браузера.
Заливка Указывает, отображается ли линейка с заливкой. Если отменить выбор этого параметра, линейка будет нарисована сплошным цветом.
Класс Позволяет присоединить таблицу стилей или применить класс из уже присоединенной таблицы стилей.

Изменение сочетаний шрифтов
С помощью команды «Редактировать список шрифтов» можно задать сочетания шрифтов, отображаемые в инспекторе свойств или подменю «Формат» > «Шрифт».

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

Изменение сочетаний шрифтов

1 Выберите «Формат» > «Шрифт» > «Изменение списка шрифтов».
2 Выберите сочетание шрифтов из списка в верхней части диалогового окна.
Шрифты из выбранного сочетания перечисляются в списке «Выбранные шрифты» в левом нижнем углу диалогового окна. Справа находится список всех доступных шрифтов, установленных в системе.
3 Выполните одно из следующих действий.

• Чтобы добавить или удалить шрифты из сочетания, воспользуйтесь кнопками со стрелками («<<» или «>>») между списками «Выбранные шрифты» и «Доступные шрифты».
• Чтобы добавить или удалить сочетание шрифтов, воспользуйтесь кнопками со знаками «Плюс» (+) или «Минус» (–) в верхней части диалогового окна.
• Чтобы добавить шрифт, не установленный в системе, введите его имя в текстовом поле под списком «Доступные шрифты» и нажмите кнопку «<<», чтобы добавить шрифт в сочетание. Добавление не установленного в системе шрифта полезно, например, для указания шрифта, используемого только в ОС Windows при разработке страниц в ОС Macintosh.
• Чтобы переместить сочетание шрифтов вверх или вниз по списку, воспользуйтесь кнопками со стрелками в верхней части диалогового окна.

Добавление нового сочетания в список шрифтов

1 Выберите «Формат» > «Шрифт» > «Изменение списка шрифтов».
2 Выберите шрифт из списка «Доступные шрифты» и нажмите кнопку «<<», чтобы переместить его в список «Выбранные шрифты».
3 Повторите шаг 2 для каждого следующего шрифта в сочетании.
Чтобы добавить шрифт, не установленный в системе, введите его имя в текстовом поле под списком «Доступные шрифты» и нажмите кнопку «<<», чтобы добавить шрифт в сочетание. Добавление не установленного в системе шрифта полезно, например, для указания шрифта, используемого только в ОС Windows при разработке страниц в ОС Macintosh.
4 По завершении добавления особых шрифтов выберите обобщенное семейство шрифтов в меню «Доступные шрифты» и нажмите кнопку «<<», чтобы переместить это семейство в список «Выбранные шрифты».

Обобщенные семейства шрифтов включают в себя «Cursive», «Fantasy», «Monospace», «Sans-Serif» и «Serif».
Если в пользовательской системе не доступен ни один шрифт из списка «Выбранные шрифты», текст отображается шрифтом по умолчанию, связанным с обобщенным семейством. Например, на большинстве систем моноширинный шрифт по умолчанию — Courier.

Вставка даты
Dreamweaver поддерживает удобный объект Date, предназначенный для вставки текущей даты в предпочитаемом формате (с временем или без него) и поддерживающий возможность обновления этой даты каждый раз при сохранении файла.

Примечание. Значения даты и времени, отображаемые в диалоговом окне «Вставить дату», не соответствуют ни текущей дате, ни значениям даты/времени, отображаемым посетителю сайта. Это только примеры способа отображения данной информации.

1 В области «Окно документа» установите курсор в том месте, где необходимо вставить дату.
2 Выполните одно из следующих действий.

• Выберите пункт меню «Вставка» > «Дата».
• В категории «Общие» на панели «Вставка» нажмите кнопку «Дата».

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

Откройте поддерживаемый файл.

Выберите Редактировать > Код > Применить исходное форматирование.

Или выберите Применить исходное форматирование в разделе Общая панель инструментов > Форматировать исходный код.

Выберите любой фрагмент кода.

Выберите Редактировать > Код > Применить исходное форматирование к выделенному.

Или выберите Применить исходное форматирование к выбранному в разделе Общая панель инструментов > Форматировать исходный код.

При выборе кода в любом теге и применении исходного форматирования к выделенному форматирование применяется к родительскому тегу.

Вы можете регулировать форматирование кода CSS, JS и PHP путем добавления правил форматирования в файл.jsbeautifyrc в корневой папке сайта.

Чтобы добавить файл.jsbeautifyrc, выполните следующие шаги.

Следующие инструкции относятся только к документам CSS, JS и PHP.
HTML-теги в документе PHP форматируются в соответствии с установками в библиотеках тегов.Вы можете форматировать код внутри блоков PHP в соответствии с нижеуказанными инструкциями.

Создайте новый файл в корневой папке сайта с именем .jsbeautifyrc.

Скопируйте нижеприведенные стандартные правила форматирования для CSS, JS и PHP в .jsbeautifyrc и сохраните файл.

Измените стандартные правила по изменению правил форматирования кода согласно нижеприведенной таблице и сохраните изменения.

Перезапустите Dreamweaver и примените форматирование кода для файла CSS, JS и PHP.

Форматирование кода происходит в соответствии с обновленными правилами форматирования.

Если вы хотите настроить форматирование кода для файлов PHP, CSS и JS на других сайтах Dreamweaver, то необходимо разместить настроенный файл.jsbeautifyrc в корневую папку сайта.

Правила форматирования CSS, JS и PHP:

Помещать ли новую строку между разделенными запятыми инструментами выбора.

Оставлять пробелы вокруг разделителей инструмента выбора: «>», «+», «

Например: «a>b» становится «a > b» при применяемом исходном форматировании.

Для "max_preserve_newlines": N,

пустые строки (N-1) сохраняются при применении форматирования, если в файле JS имеется более N-1 пустых строк.

Примечание. max_preserve_newlines применимо только в том случае, если preserve_newlines имеет значение true.

Добавлять ли пробел перед скобкой анонимной функции.

Например: «function()» становится «function ()» при применяемом исходном форматировании.

Добавлять ли пробел перед условным оператором.

Например: «if(true)» становится «if (true)» при применении форматирования.

Разрешать или сохранять новую строку между последовательными функциями.

Ниже приведен пример.

Должны ли печатные символы в строках, зашифрованные в выражении \xNN, быть неэкранированными.

Ниже приведен пример.

«\x65\x78\x61\x6d\x70\x6c\x65» становится «example» при применении исходного форматирования.

Вставлять новую строку в конце файла.

Если длинное условное выражение делится на несколько строк, то этот флажок используется для определения положения операторов в строках.

Можно редактировать флажок с помощью нижеприведенных значений.

Правила форматирования PHP такие же, как и для форматирования JS (описано в приведенной выше таблице) с двумя дополнительными правилами, указанными ниже.

Узнайте, как с помощью инспектора свойств текста применить форматирование HTML или CSS в Dreamweaver.

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

При создании встроенных стилей CSS приложение Dreamweaver добавляет код атрибута стиля непосредственно к основной части страницы.

Процесс форматирования текста в 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 переопределяет внешний.

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

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

Adobe рекомендует использовать панель «Стили CSS» (а не инспектор свойств) в качестве основного инструмента создания и редактирования каскадных таблиц стилей. В результате код будет более компактен и легок в эксплуатации.

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

Форматирование текста с использованием CSS

Процесс форматирования текста в Dreamweaver схож с форматированием в стандартном текстовом процессоре. Можно установить для фрагмента текста стили форматирования по умолчанию («Абзац», «Заголовок 1», «Заголовок 2» и т.д.); изменить шрифт, размер, цвет и выравнивание выделенного текста; применить такие стили текста, как полужирный, курсив, код (текст с фиксированной шириной) или подчеркивание.

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

Кроме того, определение типографской структуры и макета страницы в отдельном блоке кода — без необходимости обращения к гиперкартам, тегам font, таблицам или GIF-разделителям — позволяет быстрее загружать страницы, упрощает обслуживание сайта и позволяет централизованно управлять атрибутами дизайна множества веб-страниц.

Для доступа к правилам, которые применимы к текущему выделению, используется панель «Стили CSS» (режим «Текущий») или всплывающее меню «Целевое правило» в инспекторе свойств - раздел CSS.

Использование панели "Вставка"

Для форматирования текста можно использовать панель "Текст" ( Панель "Вставка " - Текст ).

Примечание. На одной странице можно сочетать форматирование CSS и HTML 3.2. Форматирование применяется согласно иерархии: форматирование HTML 3.2 переопределяет форматирование, примененное внешними таблицами стилей CSS, а внедренный в документ код CSS переопределяет внешний.

Читайте также: