Работа в DW. Форматирование текста, работа

3. Форматирование текста
Цель – подготовить слушателей к редактированию текста в редакторе Dreamweaver.
После изучения данного раздела Вы сможете:


Описать способы форматирования текста.
Оформить нужным образом страницу, шрифт, абзацы html-документов.
Форматирование текста - придание тексту необходимого внешнего вида, изменение его
свойств. Например, полужирный синий шрифт является форматированным.
Разработка электронного учебного пособия, состоящего из множества html-страниц
(разделов, глав, параграфов), требует соблюдения ряда эргономических требований. В
частности, все страницы учебного издания должны быть оформлены в едином стиле. Т.е.
все заголовки и подзаголовки, фон страниц, стиль шрифта и другие однородные
параметры страниц должны иметь одинаковый формат.
Форматирование текста в редакторе Dreamweaver производится через создание так
называемых стилей элементов документа. Так, для выравнивания абзаца по центру
необходимо создать стиль, в свойствах которого нужно прописать выравнивание текста.
Чтобы окрасить текст, нужно создать стиль, в свойствах которого установить цвет текста. И
так далее.
Рассмотрим принципы форматирования следующих основных элементов документа:
шрифта, заголовков, абзацев и всей страницы.
3.1 Форматирование шрифта
При форматировании шрифта (отдельных текстовых фрагментов) сначала выделяется
нужная текстовая область, затем создается стиль и далее заданный стиль применяется к
выделенной области.
Для создания стиля необходимо выполнить следующую последовательность действий. В
Инспекторе свойств перейти во вкладку CSS и нажать на кнопку Изменить правило
(создать стиль) (рис. 1).
Рисунок 1 Кнопка создания стиля
В появившемся диалоговом окне Создать правило CSS (рис. 2) в категории Тип селектора
выбрать значение Класс (применительно к любому элементу HTML), в Имени селектора
задать название создаваемого стиля (например, стиль_1), в категории Определение
правила выбрать Создать CSS файл и нажать ОК. Далее нужно сохранить файл со стилями.
Этот файл с расширением .css будет содержать все создаваемые стили, его
целесообразно создавать для прикрепления ко всем страницам электронного учебного
издания, чтобы на каждой вновь создаваемой странице стили не приходилось
дублировать.
Рисунок 2 Диалоговое окно создания стиля
В окне Определение правила CSS в категории Тип можно определить следующие
параметры шрифта (рис. 3):
font-family (гарнитура шрифта): Arial, Times New Roman, Verdana и другие. По
умолчанию используется тип шрифта Times New Roman.
font-size (размер шрифта) - измеряется в пикселях.
font-weight (толщина шрифта). Значение bold делает текст полужирным.
font-style (стиль шрифта). Значение italic выделяет текст курсивом.
color (цвет текста).
text-decoration (оформление текста): может быть подчеркнутым (underline),
зачеркнутым (line-through), надчеркнутым (overline), мерцающим (blink) или обычным
(none).
Рисунок 3 Определение стиля. Категория Тип
В категории Фон содержатся следующие свойства (рис. 4):
background-color (цвет фона) – задание фона в виде монотонной заливки.
background-image (фоновый рисунок) – в качестве фона через кнопку Обзор задается
некоторое изображение.
background-repeat (повторение фонового рисунка) позволяет повторить фоновый
рисунок по горизонтали и вертикали.
background-attachment, background-position отвечают за положение фонового
рисунка.
Рисунок 4 Определение стиля. Категория Фон
После определения всех параметров стиля следует нажать ОК. Чтобы применить
созданный стиль для других элементов на странице, необходимо выделить текстовую
область и в Инспекторе свойств во вкладке CSS в выпадающем списке стилей напротив
параметра Целевое правило выбрать нужный стиль (рис. 5).
Рисунок 5 Прикрепление стиля для текстового фрагмента
Для изменения стиля нужно выделить помеченный стилем фрагмент и нажать на кнопку
Изменить правило (рис. 1).
Чтобы подключить созданный css-файл со стилями к другой html-странице, нужно на той
странице нажать кнопку Присоединить таблицу стилей
Свойства (рис. 6).
на правой боковой панели
Рисунок 6 Прикрепление стилей к html-документу
3.2 Форматирование заголовков
Заголовки в документах html бывают шести уровней. Заголовки 1-го уровня выделяются
самым крупным шрифтом, 6-го уровня – самым мелким. Для определения стилей для
заголовков на html-страницах необходимо:
1. Выделить заголовок.
2. В Инспекторе свойств во вкладке HTML в поле Формат выбрать значение
заголовка соответствующего уровня, например, Заголовок 1 (рис. 7).
Рисунок 7 Задание формата заголовка
3. Во вкладке CSS переопределить стиль для заголовка соответствующего уровня,
нажав на кнопку Изменить правило (рис. 8)
Рисунок 8 Кнопка создания стиля
4. В диалоговом окне в категории Тип селектора выбрать значение Тег
(переопределяет элемент HTML), а в Имени селектора задать заголовок h
соответствующего уровня, например, h1 (рис. 9). И сохранить стиль в файле css.
Рисунок 9 Создание стиля для заголовка первого уровня
5. Переопределить стиль
форматирования.
для
заголовка,
задав
необходимые
параметры
Аналогично создаются стили для заголовков всех остальных уровней.
3.2 Форматирование абзацев
Абзац, как и любой объект, имеет свои параметры:




выравнивание (по левому краю, по правому краю, по центру, по ширине);
отступ красной строки;
межстрочное расстояние;
интервал между абзацами.
Эти параметры задаются также через добавление стиля. При создании стиля для абзацев
в диалоговом окне Создать правило CSS устанавливают следующие значения (рис. 10)
Рисунок 10 Создание стиля для абзацев
В диалоговом окне Определение правила CSS (рис. 3) в категории Тип можно задать
параметр line-height (высота строк) – который будет определять межстрочное расстояние
(имеет абсолютную (в пикселях) и относительную размерность).
В категории Блок (рис. 11) можно изменить выравнивание абзаца, присвоив параметру
text-align (выравнивание текста) одно из значений: по левому краю страницы
(установлено по умолчанию), по центру, по правому краю или по ширине страницы. А
также в категории Блок можно задать отступ красной строки абзаца, определив параметр
text-indent (отступ красной строки) в пикселях.
Рисунок 11 Определение стиля. Категория Блок
В категории Рамка (рис. 12) можно регулировать интервал перед абзацем и после абзаца,
задав в меню Margin (внешние отступы) параметры Top (сверху) и Bottom (снизу)
соответственно (измеряются в пикселях).
Рисунок 12 Определение стиля. Категория Рамка
Автоматически созданный для абзацев стиль будет использован для всех абзацев
документа.
3.3 Форматирование страницы
К форматированию страницы относится установление или изменение параметров шрифта
всей страницы, фона страницы, отступов содержимого страницы от границ документа.
Для редактирования страницы используется Инспектор свойств, кнопка Свойства
страницы. При нажатии на кнопку появляется диалоговое окно Свойства страницы (рис.
13).
Рисунок 13 Форматирование страницы
Поля Шрифт страницы, Размер и Цвет текста позволяют установить соответственно
гарнитуру, размер и цвет шрифта применительно ко всему тексту документа. В качестве
фона страницы можно выбрать однотонный цветовой фон либо изображение. При
выборе изображения необходимо посредством кнопки Обзор найти нужный файлизображение для фона (предпочтительно с расширением .jpg). Поле Повторить позволяет
вертикально и горизонтально дублировать изображения до границ документа.
Параметры Левое поле, Верхнее поле, Правое поле и Нижнее поле предназначены для
установления отступов содержимого страницы от границ документа.
В диалоговом окне Свойства страницы возможно также задать стили для всех
гиперссылок документа (вкладка Ссылки).
3.4 Практикум
Задание 1. Представьте текст, приведенный на рис. 14, в формате html, отформатировав
его согласно рисунку.
Рисунок 14 Фрагмент форматированного текста
При форматировании текста соблюдайте следующие требования.
При форматировании шрифта и заголовков:

Для заголовков первого, второго и третьего уровней, а также для определений
(теодолитная съемка, геодезическая сеть) создайте соответствующие стили (в
отдельном документе формата css).
При форматировании абзацев:



Задайте отступы красной строки в 20 пикселей (px).
Выровняйте абзацы по ширине страницы.
Задайте интервалы перед и после абзацев в 10 px.
При форматировании страницы:


Задайте шрифт всей страницы Verdana, размер 16 px.
Установите отступы текста от левой и правой границ документа в 20 px.
Задание 2. Разбейте модуль (логически завершенный раздел) Вашего издания на
небольшие составляющие (к примеру, параграфы или пункты).
Представьте все составляющие в виде отдельных html-страниц. Содержимое этих страниц
должно быть текстовым (без формул, рисунков и таблиц). Отформатируйте текст страниц,
оформив все страницы в едином стиле.
4. Работа с таблицами
Цель – подготовить преподавателя к размещению информации в табличной форме.
После изучения данного раздела Вы сможете:


Представлять учебные материалы в виде таблиц.
Разрабатывать табличный интерфейс электронного учебного издания.
Интерфейс – аппаратно-программные средства, обеспечивающие
отображение и обмен информацией между человеком и компьютером.
графическое
4.1. Вставка таблиц
В Dreamweaver таблицы создаются через Панель команд. После выбора команды
Вставка/Таблица появляется диалоговое окно Таблица (рис. 17).
Рисунок 17 Диалоговое окно Таблица
Поля Строки и Столбцы определяют количество строк и столбцов будущей таблицы.
Ширина таблицы задается либо в пикселях (абсолютным значением), либо в процентах
относительно ширины страницы. Толщина границы указывает на толщину внешних
границ таблицы. Через Интервал ячеек задаются внутренние границы в таблице
(расстояния между ячейками). Поля ячеек определяют отступы содержимого ячеек от
границ ячеек.
Заголовком определяется тип заголовочной части таблицы, содержимое которой
выделяется жирным начертанием и выравнивается внутри ячеек по центру.
Поле Подпись позволяет над таблицей помещать ее название. Через Выравнивание
подписи можно менять положение названия таблицы.
Примечание. Одно из основных правил при работе с web-страницами – по ширине
страница должна быть такой, чтобы горизонтальная полоса прокрутки не появлялась
даже при минимальной ширине окна браузера. Полосы эти не только нарушают
стилистическое единство дизайна, но и представляют эргономические неудобства.
Поэтому таблица не должна быть слишком широкой (более 600 пикселей) и ширину
таблицы рекомендуется задавать в процентном соотношении к ширине страницы, чтобы
при изменении окна браузера таблица вместе с основным текстом помещалась в
меньшем окне.
4.2. Редактирование таблиц
Форматирование таблицы может производиться как с отдельными ее элементами (с
отдельными ячейками), так и со всей таблицей (со всеми ячейками).
При нажатии левой кнопкой мыши на границы таблицы или на пространство между
ячейками Инспектор свойств отображает следующие параметры таблицы (рис. 18).
Рисунок 18 Свойства таблицы
Поля Строки и Столбцы определяют количество строк и столбцов в таблице. В поле Ш в
пикселях либо в процентах устанавливается ширина таблицы. Поля Внутри ячейки и
Между ячейками устанавливают отступы аналогичные Полю ячеек и Интервалу ячеек
(рис. 17). Значения параметра Выровнять определяют положение таблицы относительно
страницы. В поле Граница задается толщина внешней границы таблицы. С помощью
параметра Цвет границы регулируется цвет всех границ таблицы. В качестве фона
таблицы может быть установлен либо однотонный цветовой фон (через параметр Цвет
фона), либо фоновое изображение (через поле Фоновое, кнопка
).
При постановке курсора в какую-либо из ячеек таблицы Инспектор свойств будет
отображать параметры выделенной ячейки и параметры форматирования содержимого
этой ячейки (рис. 19).
Рисунок 19 Свойства ячеек таблицы
Следует отметить здесь следующие особенности. Опции По горизонтали и По вертикали
позволяют выровнять содержимое ячейки. Поля Ш и В определяют размеры (ширину и
высоту) конкретной ячейки. Поля Фон и Граница задают фон и цвет границы активной
ячейки. Выбранная опция Без переноса принудительно помещает содержимое ячейки на
одной строке.
При выделении нескольких ячеек таблицы можно посредством кнопки
ячейки в одну. А с помощью кнопки
объединять
можно ячейки разделять.
4.3. Практикум
Задание 3. Создание шаблона страницы ЭУП
Создайте html-файл с именем page1.html (сохраните в папку Content).
На страницу вставьте таблицу формата:
 3 строки,
 2 столбца,
 Ширина 1000 пикселей или 80%,
 Граница невидимая,
 Поля ячеек – 10 пикселей.
Выровняйте таблицу по центру.
Объедините первые две ячейки первой строки в одну (область для заглавия).
Объедините первую ячейку второй строки и первую ячейку третьей строки (область для
оглавления).
Вторая ячейка во второй строке – область основного содержимого.
Вторая ячейка третьей строки – область навигации.
Должна получиться таблица вида:
В отведенные области вставьте соответствующее содержимое:
в область для заглавия вставитььте заголовок страницы,
в область для оглавления – оглавление ЭУП,
в область основного содержимого – текст страницы,
в область навигации – переходы на предыдущую и следующую страницы.
Отформатируйте страницу: создайте стили для заголовков, абзацев, всей страницы,
пунктов оглавления, переходов «Назад» и «Далее», сохраняя их в отдельном файле с
именем style.css (см. 3. Форматирование текста).
Пересохраните файл.
Шаблон страницы готов!
Задание 4. Создание страниц на основе шаблона
Следующую страницу учебника создавайте на основе первого файла page1.html,
пересохранив его как новый файл под именем page2.html.
Измените содержимое областей на второй станице, кроме области оглавления.
Последовательно создавайте страницы учебника на основе разработанного шаблона
первой страницы, каждый раз пересохраняя файл под новым именем.
Если потребуется поменять стиль страниц, вносите изменения в файл со стилями style.css.
После создания всех страниц учебника оформите на первой странице пункты оглавления
гиперссылками на соответствующие разделы учебника.
Скопируйте активное оглавление с первой страницы и последовательно вставьте его на
каждую из страниц учебника.