Разработка WEB / Лабораторная работа 1 Dreamweaver / Форматируем текст в Adobe Dreamweaver CS3
.pdfвеб-студия
SEVIDI
разработка веб-сайтов и уроки по созданию сайтов
Урок 3
Форматируем текст
Текст, как правило, начинается с заголовка. Давайте создадим в нашем тексте красочный заголовок. Чтобы превратить обычный абзац в заголовок, нужно воспользоваться панелью Свойства или подменю Текст > Формат абзаца . Панель Свойства находится в нижнем доке и называется панелью свойств. Если ее не видно, включите пункт выключатель Свойства в меню Окно или нажмите комбинацию клавиш <Ctrl>+<F3>.
|
|
|
|
|
яSevidi |
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
б |
|
|
|
|
е |
|
|
|
|
|
В |
|
|
|
|
|
Вредакторе свойств нам понадобится раскрывающейся список Формат. Пункт Абзац форматирует текст как обычный абзац.
Авот пункты Заголовок 1,..., Заголовок 6 позволяют превратить его в заголовок.
1
Поставим текстовой курсор на строку "Компания АВС" и выберем в меню форматов пункт Заголовок 1. Это будет выглядеть
так:
|
|
|
|
|
яSevidi |
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
б |
|
|
|
|
е |
|
|
|
|
|
В |
|
|
|
|
|
Теперь выравним заголовок по центру. В этом нам помогут кнопки-переключатели выравнивания , расположенные в редакторе свойств. Это будет выглядеть так:
2
|
|
|
яSevidi |
|
|
и |
|
|
д |
|
|
у |
|
|
|
т |
|
|
|
с |
|
|
|
- |
|
|
|
Теперь посмотрим на кнопки , находящиеся в том же редакторе свойств. Они позволяют создать отступ слева, между |
|
|
б |
краем окна и абзацем. Левая кнопка ум ньшает отступ, правая увеличивает. Давайте поставим курсор мыши на последний |
|
абзац и нажмем кнопку увеличения отступае. |
|
В |
|
3
|
|
|
|
|
|
яSevidi |
|
|
|
|
|
и |
|
|
|
|
|
д |
|
|
|
|
|
у |
|
|
|
|
|
|
т |
|
|
|
|
|
|
с |
|
|
|
|
|
|
- |
|
|
|
|
|
б |
|
|
|
|
|
е |
|
|
|
|
|
Создадим маркированные списки, пр о разовав выделенные строки в пункты списка, воспользовавшись кнопками |
||||||
переключателями |
В |
|
|
|
|
|
редактора свойств. |
|
|
|
|||
|
|
|
|
|
|
|
4
|
|
|
яSevidi |
|
|
и |
|
|
д |
|
|
у |
|
|
|
т |
|
|
|
с |
|
|
|
- |
|
|
|
Левая кнопка превращает выделенные а зацы в пункты маркированного списка, а правая-в пункты нумерованного. |
|||
б |
|
|
|
еФорматируем фрагмент текста |
И так перейдем к тексту. НачнемВс самого простого. Сделаем некоторые слова в тексте полужирными и курсивными.
Воспользуемся двумя кнопками изменения начертания , расположенными в редакторе свойств. Левая кнопка В позволяет сделать шрифт полужирным, правая I -курсивным.
Выделим текст "Компания АВС — поставки электронной техники ведущих мировых производителей." и нажмем кнопку В. Текст станет полужирным. Теперь вставим в конец HTML-страницы выделим полностью абзац "Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта" и нажмем кнопку I. Абзац станет курсивным.
5
|
|
|
|
|
яSevidi |
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
б |
|
|
|
|
е |
|
|
|
|
|
Теперь давайте зададим шрифт для фрагмента текста. Делается это с помощью двух комбинированных списков, |
|||||
В |
|
|
|
|
|
расположенных в редакторе свойств. Для задания самого шрифта используется комбинированный список Шрифт, а для смены размера шрифта список Размер.
Откроем комбинированный список Шрифт.
6
|
|
|
|
|
|
яSevidi |
|
|
|
|
|
и |
|
|
|
|
|
д |
|
|
|
|
|
у |
|
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
|
- |
|
|
|
|
|
|
б |
|
|
|
|
Каждый пункт комбинированного списка соответствует определенному стандартному шрифтовому набору HTML. А пункт |
||||||
|
В |
|
|
|
|
|
Шрифт по умолчанию сбрасыва т шрифтовые установки и возвращает их к установкам по умолчанию. В |
||||||
комбинированном списке Размер перечисленые |
все доступные размеры шрифтов. Пункт Нет cбрасывает размер шрифта |
|||||
установки по умолчанию. |
|
|
|
|
|
|
|
|
|
|
|
|
|
7
|
|
|
|
яSevidi |
|
|
|
и |
|
|
|
д |
|
|
|
у |
|
|
|
|
т |
|
|
|
|
с |
|
|
|
|
- |
|
|
|
|
б |
|
|
|
Для полноты картины давайте сменим шрифт всего текста. Для этого выбираем пункт Выбрать все в меню Редактирование |
||||
В |
|
|
|
|
или нажимаем комбинацию клавише<Ctrl>+<A>. Но проще щелкнуть мышью по кнопке <body> в секции тегов. Теперь поэкспериментируем с текстом задавая различные шрифты и размеры.
Для задания цвета используем селектор цвета. Зададим новый цвет заголовку страницы "Компания АВС". Сделаем заголовок красным. Ввыделим заголовок и установим цвет.
8
|
|
|
|
|
яSevidi |
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
б |
|
|
|
|
е |
|
|
|
|
|
В |
|
|
|
|
|
Большую часть окна занимает палитра, где ищем нужный цвет. Найдя его щелкаем по нему мышью, окно выбора закроется.
На следующем уроке мы поговорим о специальных символах.
9