Macromedia Dreamweaver MX

Форматирование отдельных символов

Итак, мы научились форматировать целиком абзацы текста. Теперь погово­рим, что можно сотворить с отдельными символами текста.

Все текстовые редакторы, например Microsoft Word или поставляемый в со­ставе Windows Word Pad, позволяют менять начертание и размер шрифта текста, делать его жирным, курсивным или подчеркнутым, а также менять его цвет. Все это доступно и в Dreamweaver. Нужно только иметь в виду, что возможности HTML по форматированию текста сильно ограничены существующими стандартами.

Ладно, к делу.

Начнем с самого простого. Попытаемся сделать некоторые фрагменты тек­ста нашей страницы жирными и курсивными. И помогут нам в этом две кнопки изменения начертания, показанные на рис. 3.14.

В I

Рис. 3.14. Кнопки изменения начертания шрифта

Соответственно, левая (В) кнопка позволяет сделать шрифт жирным, а пра­вая (7) — курсивным. Обе эти кнопки могут быть нажаты или отжаты неза­висимо, т. е. текст может быть простым, жирным, курсивом или жирным курсивом.

Выделим слова "Иван Иванович Иванов" и нажмем кнопку В. Текст станет жирным. Теперь выделим полностью последнюю строку (со сведениями об авторских правах) и нажмем кнопку /. Последняя строка станет курсивной. Полученный результат можно увидеть на рис. 3.15.

Вместо нажатия кнопки В вы можете выбрать пункт-выключатель Bold в подменю Style меню Text или контекстного меню. В том же подменю су­ществует пункт Italic — аналог кнопки /. Вы также можете нажимать ком­бинации клавиш <Ctrl>+<B> и <Ctrl>+<I> соответственно.

А вот чтобы включить или отключить подчеркивание текста линией, вам все равно придется воспользоваться пунктом-выключателем Underline подменю Style меню Text или контекстного меню. Ни кнопки, ни комбинации кла­виш для этого не предусмотрено.

Вы могли заметить, что в подменю Style много пунктов. Давайте их рас­смотрим.

Здесь нужно сказать, что все теги HTML, предназначенные для оформления текста, делятся на две большие группы. Теги физического форматирования просто говорят Web-обозревателю: "Сделай текст вот таким и не задавай лишних вопросов". Таким образом, если вы сделали текст жирным, то Web- обозреватель просто выведет его жирным шрифтом, не выполняя при этом никакой дополнительной обработки. Такие теги хороши тогда, когда вы не даете оформляемому с их помощью тексту никакого особого значения.

В отличие от них, теги логического форматирования дают тексту, состав­ляющему их содержимое, какое-либо дополнительное значение. Например, вы можете превратить с помощью одного из этих тегов фрагмент текста в цитату. Web-обозреватель выведет ее особым шрифтом (как правило, кур­сивом, хотя, может и вообще никак не выделить) и, вместе с тем, может выполнить какую-то дополнительную обработку этого текста, например, вывести все цитаты, встретившиеся в странице, в отдельное окно. (Правда, ни один современный Web-обозреватель так не делает, но кто знает, что будет дальше...)

Выделение текста жирным и курсивным шрифтом, рассмотренное нами выше, выполняется с помощью тегов физического форматирования. В са­мом деле, мы просто по-другому выделили некоторые фрагменты текста нашей странички, не давая им какого-то особого значения. И Web- обозреватель нас прекрасно поймет.

Давайте же продолжим изучение подменю Style. В нем мы видим пункт - выключатель Strikethrough, включив который мы сделаем выделенный фрагмент текста зачеркнутым. Зачеркивание текста выполняется опять же с помощью тега физического форматирования, который мы рассмотрим чуть ниже.

А остальные пункты подменю Style задают именно логическое форматиро­вание. В табл. 3.2 приведены все эти пункты и их краткие описания, а на рис. 3.16 — примеры текста, отформатированные с использованием соответ­ствующих пунктов этого подменю. Вы можете сами сделать такой пример и поэкспериментировать с разными стилями текста; сохраните его в файле

Таблица 3.2 (окончание)

Code Используется для обозначения в тексте фрагментов исходного кода

Программы на каком-либо языке программирования (команд, имен переменных, ключевых слов и т. п.)

Variable Используется для обозначения в тексте имен переменных программы

На каком-либо языке программирования

Sample Вывод какой-либо программы

Keyboard Текст, который пользователь должен ввести с клавиатуры

Citation Цитата

Definition Термин, встречающийся в тексте первый раз

В табл. 3.3 перечислены теги, вставляемые в HTML-код пунктами подменю Style.

Пункт Пара тегов

Теперь давайте зададим шрифт, которым набран наш текст. Делается это с помощью двух раскрывающих списков, расположенных в редакторе свойств. Разумеется, Dreamweaver предоставляет в ваше распоряжение также соот­ветствующие пункты меню и комбинации клавиш. Для смены шрифта ис­пользуется раскрывающийся список, показанный на рис. 3.17, а для смены размера шрифта — список, показанный на рис. 3.18. Но для того, чтобы понять, что же там отображается, нужно дать некоторые разъяснения.

Вспомним, зачем создавалась Всемирная паутина WWW. А именно, чтобы каждый человек, пользуясь любой компьютерной платформой, находясь в любой части света, смог прочитать любой HTML-документ. А т. к. раз­ные компьютерные платформы имеют разные параметры видеоподсистемы, в частности разные стандартные шрифты, то задача одинакового отображе­ния сильно усложняется. Поэтому HTML определяет несколько стандарт­ных шрифтов, которые обязательно должны быть установлены на компьюте­ре клиента, и несколько, а именно семь, размеров этих самых шрифтов. Конечно, вы можете использовать в своих Web-страницах другие шрифты, но тогда потрудитесь, чтобы они были установлены у пользователя. Впро­чем, если на клиентском компьютере не будет того или иного шрифта, опе­рационная система и Web-обозреватель используют ближайший максималь­но похожий из уже установленных шрифтов.

Наименования шрифтов в стандарте HTML могут записываться сразу не­сколько, через запятую. При этом если первого в списке шрифта на клиент­ском компьютере нет, Web-обозреватель ищет второй, третий и т. д., пока не доберется до стандартного шрифта, который уж точно должен там быть.

Посмотрите еще на рис. 3.17. В этом раскрывающемся списке присутствуют все стандартные шрифты, определенные HTML. Вы можете выбрать любой из них. Если же вас не устраивает ни один, то вы можете просто ввести туда название любого другого шрифта, установленного на вашем компьютере, например Impact, и нажать клавишу <Enter>. Естественно, вся ответствен­ность за правильное отображение текста на клиентском компьютере в дан­ном случае ляжет на вас.

Пункт Default Font этого списка сбрасывает шрифтовые установки, точнее, возвращает их к установкам родительского элемента.

Соответственно, в раскрывающемся списке размеров шрифта (рис. 3.18) отображены все доступные размеры шрифтов. Их семь, как уже и говори­лось. Кроме того, в этом меню присутствуют пункты вида +п и —п, где п — число от 1 до 7. Выбор этих пунктов позволяет соответственно увеличить или уменьшить размер шрифта на п ступеней относительно шрифта роди­тельского элемента. Пункт None позволит вернуть размер шрифта к уста­новкам родительского элемента.

Перед тем как изменять наименование или размер шрифта, нужно выделить соответствующий фрагмент текста. Это вам уже знакомо: все уже известные вам команды форматирования текста работают таким же образом.

Давайте выделим имя нашего героя и увеличим его на два размера. Для это­го выберем в раскрывающемся списке размера шрифта пункт +2. Получен­ный результат показан на рис. 3.19. Не правда ли, гипотетический Иван Иванович страдает манией величия?

Теперь сменим шрифт. Но не какого-то выделенного фрагмента, а ВСЕГО текста. Для этого выделим весь текст в окне. Конечно, для этого можно

Выбрать пункт Select All меню Edit или нажать комбинацию клавиш <Ctrl>+<A>. Но поступим по-другому. Вы, конечно, помните, что окно до­кумента содержит так называемую секцию тегов (см. рис. 2.12). Давайте щелкнем мышью по кнопке <body>, чтобы выделить все содержимое стра­ницы (содержимое тега <body>, как вы уже догадались).

Теперь, когда все содержимое документа выделено, выберите нужный шрифт. Для примера выберем пункт Verdana, Arial, Helvetica, sans-serif — любимый шрифт автора. (Конечно, автор не собирается навязывать вам свои эстетические вкусы — это просто для примера.) Результат показан на рис. 3.20.

Задать шрифт вы также можете с помощью подменю Font, расположенного в меню Text и контекстном меню. Для смены размера шрифта Dreamweaver предоставляет целых два подменю: Size и Size Change. Оба они располага­ются в меню Text. В контекстном меню они объединены в одно подменю Size. Никаких клавишных сочетаний для выполнения этих операций с кла­виатуры не предусмотрено.

Теперь давайте выделим цветом название программного продукта, с по­мощью которого делается этот замечательный сайт. Снова обратим внима­ние на редактор свойств. На рис. 3.21 показан инструмент для задания цве­та — так называемый селектор цвета.

Селектор цвета состоит из двух частей. Справа находится поле ввода, где вы можете ввести шестнадцатеричный код нужного цвета. Но вряд ли вы пом­ните наизусть шестнадцатеричные коды ваших любимых цветов. Поэтому слева находится кнопка вызова окна выбора цвета, которое показано на рис. 3.22.

Большую часть этого окна занимает палитра, где, собственно, вы и ищете нужный цвет. При этом в небольшом текстовом поле, расположенном в центре верхней серой полосы окна, высвечивается шестнадцатеричный код цвета, над которым вы в данный момент держите курсор мыши. Это очень удобно: впоследствии вам уже не надо будет долго выбирать цвет из палит­ры — вы просто введете в поле ввода селектора его код. Если же ни один цвет из палитры вам не подходит, вы можете с помощью того же курсора мыши (имеющего вид пипетки) "взять" необходимый цвет откуда угодно: с рабочего стола, из любого окна, из любого элемента управления. Чтобы закрыть окно выбора цвета, нажмите клавишу <Е$с>.

В правом верхнем углу расположены три кнопки. Самая левая из них по­зволит вам быстро выбрать цвет, заданный по умолчанию (обычно это цвет

Родительского элемента). Средняя кнопка вызывает на экран стандартное диалоговое окно выбора цвета. А правая позволит вам переключить режимы палитры выбора цвета. При нажатии на нее на экране появляется дополни­тельное меню, предлагающее пять режимов:

□ Color Cubes и Continuous Tone — просто меняют внешний вид палитры;

□ Windows OS и Mac OS — позволяют выбрать палитру, специфичную для какой-либо из операционных систем, в данном случае Microsoft Windows и Apple Macintosh;

□ Grayscale — выбирает черно-белую палитру.

Кроме того, это меню содержит еще один, шестой, изначально включенный пункт-выключатель Snap to Web Safe. Зачем он нужен?

Чтобы ответить на этот вопрос, снова поговорим о проблеме межплатфор - менной совместимости, которую пришлось решать создателям языка HTML и WWW.

Как вы уже знаете, разные компьютерные платформы... да что там! — даже разные компьютеры имеют различные параметры видеоподсистемы. Одни могут отображать всего шестнадцать цветов, а другие — все 16,7 миллиона, что с лихвой перекрывает цветовую разрешающую способность человече­ского глаза. Разумеется, при таком богатом множестве компьютерных плат­форм Web-дизайнеру не стоит и рассчитывать, что все его цвета и оттенки будут отображены правильно везде. Поэтому стандарт HTML определяет так называемую безопасную палитру цветов, которая гарантированно должна отображаться правильно всеми программами на всех компьютерах. Web - дизайнерам рекомендуется придерживаться этой безопасной палитры (хотя никто им не запрещает ее игнорировать). Так вот, пункт Snap to Web Safe, включенный в дополнительное меню окна выбора цвета, и заставляет се­лектор цветов Dreamweaver "уважать" безопасную палитру и подгонять под нее все выбираемые пользователем цвета.

( Примечание )

Все цвета из палитр Color Cubes и Continuous Топе являются безопасными, цвета из других палитр — нет. Естественно, если вы выбрали какой-то цвет из­вне окна выбора цветов, он совсем не обязательно уложится в безопасную па­литру.

Название изучаемой нами программы уже выделено, так что щелкнем по кнопке селектора цветов и выберем любой понравившийся цвет. Автор вы­брал синий — он хорошо успокаивает нервы. Рисунок мы приводить не бу­дем — все равно черно-белая иллюстрация не может передать цвет.

Если вы предпочитаете работать с меню, то для смены цвета шрифта вос­пользуйтесь пунктом Color меню Text. К сожалению, в этом случае вы не сможете обратиться к селектору цветов — Dreamweaver выдаст вам стан­дартное диалоговое окно выбора цвета Windows.

Примечание

Задание шрифта и цвета текста достигается с помощью тега <font>. .. </font>. Этот тег должен содержать один из атрибутов: COLOR, FACE или size, задающих, соответственно, цвет, наименование шрифта и его раз­мер. Как вы уже поняли, это тег физического форматирования.

Если вы посмотрите на секцию тегов, то увидите, что теги <font> вложены в те­ги <р> и <li>, т. е. являются дочерними тегами самого последнего уровня. Это из особенностей HTML: некоторые теги могут быть вложены друг в друга только в определенном порядке.

Что теперь делать? Давайте посмотрим на наш текст и подумаем. Скажем, не слишком ли выделяются слова "Иван Иванович Иванов", набранные ог­ромным жирным шрифтом? Не нужно ли вернуть их к обычному шрифту? Щелкните правой кнопкой мыши где-нибудь на этих словах и выберите в контекстном меню пункт Remove Tag <font>. Dreamweaver тотчас удалит тег, задающий размер шрифта, но оставит его содержимое. Мы уже описы­вали этот пункт меню в главе 2, так что он должен быть вам знаком.