Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

Разработка WEB / Лабораторная работа 1 Dreamweaver / Форматируем текст в Adobe Dreamweaver CS3

.pdf
Скачиваний:
32
Добавлен:
30.05.2015
Размер:
654.56 Кб
Скачать

веб-студия

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