Техника Web-дизайна для студента
Форматирование шрифта и текста
Для форматирования будем использовать группу инструментов Text (Текст) панели Insert (Вставка) (рис. 2.7) и инструменты панели Properties (Свойства) (рис. 2.8).
|
I Text ▼ |
=гл H I S em 1Г ['"■] rm 1 hl h2 h3 1 ul ol li | dl dt dd | abbr «ajlдjjs ' I |
||
|
Рис. 2.7. Группа инструментов Text панели Insert |
|||
|
▼ Properties |
*1 |
||
|
Format I г Jone ' |
Style 1 |
None ІВІ Bjr| = 1 = 1 = 1 = 1 Lir|k 1 |
* |
|
Font | Default Font ▼ | |
- |
None И 1 :E 1 iE 1 Ј= 1 1 Target | _j |
|
Рис. 2.8. Панель Properties |
Инструменты этих панелей частично дублируют, а частично дополняют друг друга. Установим смешанный режим работы над документом (кнопка Split (Многооконный) на панели Document (Документ)). В нижнюю часть рабочего поля, предназначенную для работы в визуальном режиме, введем заголовок:
Мой первый документ, созданный в программе Dreamweaver
Нажмем клавишу Enter и продолжим набирать текст:
Здесь находится текст моего первого HTML-документа, который отформатирован с использованием инструментов группы Text панели Insert и инструментов панели Properties. Текст содержит заголовок и абзац. Внутри абзаца имеется аббревиатура и несколько слов, набранных жирным шрифтом.
Теперь можно приступить к форматированию, продолжая работать в нижней части рабочей области окна, т. е. в визуальном режиме. Поместим курсор в любое место заголовка и воспользуемся одним из двух способов: либо нажмем кнопку h2 (Heading 2) в группе Text (Текст) панели Insert (Вставка), либо на панели Properties (Свойства) раскроем список Format и выберем Heading 2.
В отличие от заголовков, форматируемый элемент текста должен быть предварительно выделен. Выделим в тексте аббревиатуру html и нажмем кнопку W3C (Acronym) в группе инструментов Text (Текст). В открывшемся диалоговом окне Acronym в строке Full Text (Полный текст) наберем полную форму записи аббревиатуры "нурег Text Markup Language". Поле Language (Язык) можно не заполнять. После нажатия кнопки ОК увидим появление в верхней части рабочей области окна метки <acronym> с параметром title.
Выделим слово "текст", которое должно воспроизводится полужирным шрифтом, и нажмем кнопку S (Strong) в группе Text (Текст).
Продолжим форматирование шрифта. Последовательно выделяя в тексте слова "insert" и "properties" и используя кнопки В (Bold) или S (Strong), сделаем шрифт полужирным.
Перейдем к форматированию текста. Для центрирования заголовка курсор поместим в любое место заголовка и нажмем кнопку [Ж] — Align Center (Выравнивание по центру) на панели Properties (Свойства). Для абзаца зададим отступ от края страницы слева, воспользовавшись кнопкой [5] — Text Indent (Отступ текста) на панели Properties (Свойства).
Форматирование документа завершено. Остается в строке Title (Название) панели Document (Документ) написать название документа (например "первый документ") и убедиться, что оно ПОЯВИЛОСЬ В метке <TITLE>.
Перед тем как сохранить документ сделаем активным сайт MySite, который был создан в разделе 2,2, и, используя команду меню File | Save (Файл | Сохранить), сохраним документ под именем First в папке MyFiles.
Рабочая область окна программы Dreamweaver после завершения форматирования и сохранения документа показана на рис. 2.9.
Первый документ [Мои документы/First. htm)
Н <ййе>Первый документ^it 1е>
Н <metahttp-equiv= "Content-Type" content= "text/html; charset=windowrs-l251">
И </head>
И <body>
Н <h2 align="center">MoH первый документ, созданный в программе Dreamvreav"er</h2>
Н <blockquote>
I <р>3десь помещается текст моего первого HTML - документа, который будет отформатирован I с использованием инструментов вкладки <strong>Text</strong> панели <b>Insert<rtj>
I и инструментов панели <strong>Properties</strong>. Текст содержит заголовок I и один абзац. Внутри абзаца имеется аббревиатура и несколько слов, набранных I жирным шрифтом.|</р>
Н <Jblockquote>
|
ЛГ |
16 <Jbody>
Д
Мой первый документ, созданный в программе Dreamweaver
|
622 к 171 ж 1К Л sec |
Здесь помещается текст моего первого HTML - документа, который будет отформатирован с использованием инструментов вкладки Text панели Insert и инструментов панели Properties. Текст содержит заголовок и один абзац. Внутри абзаца имеется аббревиатура и несколько слов, набранных жирным шрифтом.
Cbodi» <blockquote> <р>
Рис. 2.9. Рабочая область окна программы Dreamweaver после форматирования и сохранения документа
В процессе создания документа может возникнуть желание посмотреть, как он будет выглядеть непосредственно в окне браузера. Для этого на паНели инструментов Document (Документ) следует нажать кнопку [£] — Preview/Debug in Browser (Предварительный просмотр/отладка в браузере) и в раскрывшемся списке выбрать Preview in iexplore (Предварительный просмотр в браузере Internet Explorer) либо нажать клавишу <F12>.
Теперь, когда основные принципы форматирования рассмотрены на простом примере, можно более детально познакомиться с
инструментами группы Text (Текст) и содержимым панели инструментов Properties (Свойства).
Группа инструментов Text (Текст) панели инструментов Insert (Вставка) для форматирования заголовков содержит кнопки hi, h2 и h3, позволяющие задать заголовки соответствующего уровня от 1 до 3. Список Format (Формат) панели инструментов Properties (Свойства) позволяет выбрать любой из 6 возможных уровней форматирования заголовков от Heading 1 до Heading 6, а значение None позволяет отказаться от установленного ранее форматирования. Курсор должен находиться в любом месте форматируемого заголовка.
Выбирается из списка Size (размер) на панели Properties (свойства). Прежде чем приступить к изменению размера шрифта, следует обратить внимание на настройку программы. Воспользуемся командой меню Edit | Preferences (Правка | Настройки). В категории General (Общая) открывшегося диалогового окна Preferences (Настройки) должен быть снят флажок Use CSS instead of HTML tags (Использовать CSS вместо HTML-меток). В противном случае программа Dreamweaver будет задавать размеры шрифта, используя каскадную таблицу стилей (CSS), а не относительные единицы, применяемые в HTML (об использовании CSS см. главу 7), После изучения CSS флажок можно вернуть на место. В списке Size (Размер) на панели Properties (Свойства) можно выбрать числа от 1 до 7 со знаками "+", " или без знака. Выбор значения со знаком озна
Чает, что размер увеличивается или уменьшается на соответствующую величину относительно заданного размера по умолчанию или в метке <basefont>. Значение без знака означает абсолютное задание размера. Форматируемый текст должен быть предварительно выделен.
Выбор гарнитуры шрифта осуществляется из списка Font (Шрифт) на панели Properties (Свойства). Раскрыв список, можно выбрать нужное семейство гарнитур или Default Font (Шрифт по умолчанию). Выбор Default Font (Шрифт по умолчанию) позволяет удалить выбранную ранее гарнитуру. В конце списка гарнитур находится строка Edit Font List (Редактирование списка шрифта), выбор которой открывает одноименное диалоговое окно для редактирования списка. С помощью этого окна можно не только дополнить список гарнитур из числа имеющихся на компьютере, но и удалить из списка все семейство или отдельную гарнитуру.
Для изменения начертания шрифта предназначены следующие кнопки группы инструментов Text (текст): В (Bold) — полужирный, /(Italic) — курсивный, S (Strong) — важный (отображается полужирным шрифтом), em (Emphasis) — важный (отображается курсивом). Кнопки В (Bold), I (Italic) имеются также на панели Properties (Свойства) и полностью дублируют аналогичные кнопки группы Text (Текст). Можно настроить программу таким образом, чтобы при нажатии кнопок В (Bold) появлялась метка <strong>, а при нажатии кнопки I (Italic) — метка <ем>. Для настройки нужно использовать команду меню Edit | Preferences (Правка | Настройки). В категории General (Общая) открывшегося диалогового окна Preferences (Настройки) требуется установить флажок Use <strong> and <em> in place of <b> and <i> (использовать <strong> и <em> вместо <b> и <i>).
Для изменения цвета шрифта необходимо выделить нужный элемент текста, нажать кнопку Text Color (Цвет текста) на панели Properties (Свойства) и в открывшейся палитре выбрать нужный цвет. Впрочем, если цвет уже известен, то его можно просто вписать в поле справа от кнопки. В верхней части палитры имеется кнопка Default Color (Цвет по умолчанию), позволяющая очистить поле, и кнопка System Color Picker (системная цветовая палитра), открывающая окно с большими возможностями по выбору цвета.
В визуальном режиме (активная кнопка Design) новый абзац создается нажатием клавиши <Enter>. Чтобы перейти на новую строку, не создавая нового абзаца, нужно использовать сочетание клавиш <Shift>+<Enter>, тогда в текст документа вместо метки <р> будет вставлена метка <br>.
Другой способ перехода на новую строку в пределах абзаца — нажатие крайней правой кнопки из группы Text (Текст) — | В£і |-]|, В случае, если кнопка имеет другой вид, то щелчком по стрелке нужно раскрыть меню и выбрать Line Break (Разрыв строки). На кнопке сохраняется условное обозначение последней использованной команды. Полное содержание меню будет рассмотрено в разделе 2,4,2,
В режиме ручной расстановки меток (активная кнопка Code) нажатие кнопки [Т] — Paragraph (Абзац) в группе Text (Текст) приведет к появлению в тексте документа метки <Р>.
Вставка предварительно отформатированного текста
Текст необходимо набрать в Блокноте и осуществить форматирование, задавая пробелы (несколько подряд), символы табуляции, переходы на новые строки и т. д. Чтобы поместить созданный текст в HTML-документ, сохранив форматирование без изменений, нужно проделать следующее:
□ выделить в Блокноте весь текст и скопировать его в буфер обмена (команда Копировать меню Правка);
О в программе Dreamweaver перейти в режим ручной расстановки меток, установить курсор в то место документа, куда нужно вставить текст и нажать кнопку [рй] — Preformatted Text (предварительно отформатированный текст) из группы Text (Текст);
О вставить текст из буфера обмена после метки <PRE>, дав команду меню Edit | Paste (Правка | Вставить).
Перейдя в режим визуального форматирования, можно предварительно оценить полученный результат, но лучше всего это сделать, открыв документ в окне браузера.
Каждый абзацный отступ смещает левую и правую границы абзаца на несколько позиций, а в текст документа вставляется Метка <BLOCKQUOTE>...</BLOCKQUOTE>.
Для создания отступа абзаца курсор необходимо поместить в
Любое место абзаца и нажать кнопку [м] — Block Quote (Блок выделения) из группы инструментов Text (Текст) или кнопку
- Text Indent (Увеличить отступ текста) на панели Properties
(Свойства). Уменьшить абзацный отступ позволяет кнопка |
Text Outdent (Уменьшить отступ текста) на панели Properties (Свойства).
На панели Properties (Свойства) расположены четыре кнопки —
_________ . предназначенные для выравнивания текста. Выравнивание распространяется на абзац, в котором находился курсор в момент нажатия кнопки. Способ выравнивания очевиден не только из его изображения на кнопке, но и из названия: Align Left (выравнивание по левому краю), Align Center (выравнивание по центру), Align Right (выравнивание по правому краю), Justify (выравнивание по ширине).
Создание маркированных и нумерованных списков
При создании списков следует помнить, что список — это последовательность абзацев. В группе инструментов Text (Текст) панели Insert (Вставка) для создания списка имеются следующие кнопки:
О ul (Unordered List) — маркированный список;
□ ol (Ordered List) — нумерованный список; о li (List Item) — элемент списка.
Списки можно создавать двумя способами:
1. Создать последовательность абзацев, нажимая на клавишу < Enter> в конце каждого абзаца. Выделить все абзацы и нажать кнопку ul или ol.
2. Нажав на кнопку ul или ol, набрать первый элемент списка. Каждый последующий элемент списка создается автоматически при переходе на следующий абзац с помощью клавиши <Enter>. После набора последнего элемента необходимо перейти на следующий абзац и произвести повторный щелчок по соответствующей кнопке ul или ol. Создание списка прекратится.
Кнопки ul (Unordered List) и ol (Ordered List) полностью дубли -
Руются одноименными кнопками i=l‘=l| на панели Properties (Свойства). Кнопка li предназначена для создания элементов списка в режиме ручной расстановки меток в тексте документа.
Для создания списков определений в группе инструментов Text (текст) панели Insert (Вставка) имеется три кнопки:
О dl (Dйfinition List) — список определений;
О dt (Dйfinition Terni) — определяемый термин;
О dd (Dйfinition Description) — описание определения.
Списки определений создаются двумя способами:
1. Последовательность выделенных абзацев преобразуется в список определений после нажатия кнопки dl. Особенностью преобразования является то, что нечетные абзацы становятся определяемыми терминами, а четные — описаниями определений.
2. Активизировать кнопку dl. После набора определяемого термина следует нажать клавишу <Enter>, набрать его описание и снова нажать <Enter>. По окончании ввода описания последнего термина необходимо нажать клавишу <Enter> и произвести повторный щелчок по кнопке dl. Создание списка прекратится.
Кнопки dt и dd предназначены для создания соответственно определяемых терминов и описаний определений в режиме ручной расстановки меток в тексте документа.
