Панель форматирования в adobe dreamweaver позволяет
Несмотря на то, что предпочтительным методом форматирования текста является CSS, Dreamweaver позволяет форматировать текст с помощью HTML.
Форматирование абзацев
С помощью всплывающего меню «Формат» в инспекторе свойств (раздел HTML) или подменю «Формат» > «Формат абзаца» можно применять стандартные теги абзацев и заголовков.
1 Расположите курсор в абзаце или выделите часть его текста.
2 В инспекторе свойств подменю «Формат» > «Формат абзаца» или во всплывающем меню «Формат» выберите один из вариантов действий.
• Выберите пункт «Нет», чтобы удалить форматирование абзаца.
При применении к абзацу тега заголовка Dreamweaver автоматически добавляет следующую строку текста как стандартный абзац. Чтобы изменить эту настройку, выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh); затем в категории «Общие» в разделе «Параметры изменения» отмените выбор параметра «Переключиться в стиль простого абзаца после заголовка».
Дополнительно:
Задание свойств текста в инспекторе свойств
Форматирование текста с использованием CSS
Изменение цвета текста
Можно изменить цвет по умолчанию для всего текста на странице или же цвет выделенного текста.
Дополнительно: Цвет
Определение цветов по умолчанию для текста страницы
❖ Выберите пункт меню Изменить > «Свойства страницы» > «Внешний вид (HTML)» или «Ссылки (HTML)», затем выберите цвета в параметрах «Цвет текста», «Цвет ссылок», «Просмотренные ссылки» и «Активные ссылки».
Примечание. Цвет активных ссылок — это цвет, который приобретает ссылка во время щелчка по ней. В некоторых веб-браузерах указанный цвет может не использоваться.
Изменение цвета выделенного текста
❖ Выберите «Формат» > «Цвет», выберите цвет с помощью системной палитры цветов и нажмите кнопку «ОК».
Выравнивание текста
Для выравнивания текста с помощью HTML используется меню «Формат» > «Выравнивание». Чтобы выровнять какой-либо элемент страницы по центру, воспользуйтесь командой «Формат» > «Выравнивание» > «По центру».
Выравнивание текста на странице
1 Выделите текст, который требуется выровнять, или просто установите курсор в начало текста.
2 Выберите меню «Формат» > «Выравнивание» и выберите соответствующую команду выравнивания.
Выравнивание элементов страницы по центру
1 Выделите элемент (изображение, подключаемый модуль, таблицу или другой элемент таблицы), который необходимо выровнять по центру.
2 Выберите «Формат» > «Выравнивание» > «По центру».
Примечание. Выравнивать по центру можно целые блоки текста, но не части заголовков или абзацев.
Отступ текста
С помощью команды «Отступ» можно применить к абзацу текста HTML-тег blockquote, создав отступ текста с обеих сторон страницы.
1 Установите курсор в абзац, в котором необходимо сделать отступ.
2 Выберите меню «Формат» > «Отступ» или «Выступ» либо выберите «Список» > «Отступ» или «Выступ» в контекстном меню.
Примечание. К абзацу можно применить несколько отступов. Каждый раз при выборе этой команды выполняется дальнейший отступ текста от обеих сторон документа.
Применение стилей шрифтов
HTML-форматирование можно применить как к одной букве, так и к целым параграфам и блокам текста на сайте. Используйте меню «Формат» для определения или изменения параметров шрифта для выделенного текста. Можно задать тип шрифта, стиль (например, полужирный или курсив), а также размер.
1 Выделите текст. Если текст не выделен, функция применяется к последующему вводимому тексту.
2 Выберите из следующих параметров.
• Чтобы изменить начертание шрифта, выберите начертание шрифта (полужирный, курсив, подчеркивание и т.п.) в меню «Формат» > «Стиль».
Дополнительно:
Создание макетов страниц с помощью CSS
Создание нового правила CSS
Переименование класса в инспекторе свойств HTML
Dreamweaver отображает все классы, доступные для страницы, в меню «Класс» инспектора свойств (раздел HTML).
Стили в этом списке можно переименовать, выбрав команду «Переименовать» в конце списка стилей класса.
1 Выберите во всплывающем меню «Стиль» инспектора свойств текста команду «Переименовать».
2 Во всплывающем меню «Переименовать стиль» выберите стиль, который необходимо переименовать.
3 В текстовом поле «Новое имя» введите новое имя и нажмите кнопку «ОК».
Добавление интервалов между абзацами
Dreamweaver работает подобно множеству других текстовых процессоров: при нажатии клавиши «Enter» (Windows) или «Return» (Macintosh) создается новый абзац. Веб-браузеры автоматически вставляют между абзацами пустую строку. Можно добавить отдельную пустую строку между абзацами, вставив разрыв строки.
Добавление символа конца абзаца
❖ Нажмите клавишу «Ввод» (Windows) или «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) обеспечивает доступ к существующим стилям и позволяет создавать новые.
Использование CSS позволяет управлять стилем веб-страницы без компрометации ее структуры. Отделение в CSS визуальных элементов дизайна (шрифтов, цветов, полей и т.д.) от структурной логики веб-страницы обеспечивает дизайнерам визуальный и типографский контроль без ущерба для целостности содержимого.
Кроме того, определение типографской структуры и макета страницы в отдельном блоке кода — без необходимости обращения к гиперкартам, тегам font, таблицам или GIF-разделителям — позволяет быстрее загружать страницы, упрощает обслуживание сайта и позволяет централизованно управлять атрибутами дизайна множества веб-страниц.
Стили, созданные с помощью CSS, можно сохранять непосредственно в документе либо, в целях обеспечения расширенных возможностей и большей гибкости, во внешних таблицах стилей. Прикрепление внешней таблицы стилей к нескольким веб-страницам позволяет отражать изменения в таблице стилей во всех этих страницах автоматически. Для доступа ко всем CSS-правилам страницы используется панель «Стили CSS» («Окно» > «Стили CSS»).
Для доступа к правилам, которые применимы к текущему выделению, используется панель «Стили CSS» (режим «Текущий») или всплывающее меню «Целевое правило» в инспекторе свойств - раздел CSS.
При желании для форматирования текста веб-страниц можно использовать теги разметки HTML. Чтобы использовать теги HTML вместо CSS, отформатируйте текст с помощью инспектора свойств (раздел HTML).
Использование панели "Вставка"
Для форматирования текста можно использовать панель "Текст" ( Панель "Вставка " - Текст ).
Примечание. На одной странице можно сочетать форматирование CSS и HTML 3.2. Форматирование применяется согласно иерархии: форматирование HTML 3.2 переопределяет форматирование, примененное внешними таблицами стилей CSS, а внедренный в документ код CSS переопределяет внешний.
Читайте также: