1  2  3  4  5  6  7  8

Форматирование отдельных символов
Итак, мы научились форматировать целиком абзацы текста. Теперь поговорим, что можно сотворить с отдельными символами текста.
Все текстовые редакторы, например Microsoft Word или поставляемый в составе Windows WordPad , позволяют менять начертание и размер шрифта текста, делать его жирным, курсивным или подчеркнутым, а также менять его цвет. Все это доступно и в Dreamweaver . Нужно только иметь в виду, что возможности HTML по форматированию текста сильно ограничены существующими стандартами.
Ладно, к делу.
Начнем с самого простого. Попытаемся сделать некоторые фрагменты текста нашей страницы жирными и курсивными. И помогут нам в этом две кнопки изменения начертания .Соответственно, левая ( В ) кнопка позволяет сделать шрифт жирным,а правая ( I ) — курсивным. Обе эти кнопки могут быть нажаты или отжаты независимо, т. е. текст может быть простым, жирным, курсивом или жирным курсивом.
Выделим слова "Иван Иванович Иванов" и нажмем кнопку В . Текст станет жирным. Теперь выделим полностью последнюю строку (со сведениями об авторских правах) и нажмем кнопку I Последняя строка станет курсивной.
Вместо нажатия кнопки В вы можете выбрать пункт-выключатель Bold в подменю Style меню Text или контекстного меню. В том же подменю су­ществует пункт Italic — аналог кнопки I . Вы также можете нажимать комбинации клавиш < Ctrl >+< B > и < Ctrl >+< I > соответственно.
А вот чтобы включить или отключить подчеркивание текста линией, вам все равно придется воспользоваться пунктом-выключателем Underline подменю Style меню Text или контекстного меню. Ни кнопки, ни комбинации кла­ виш для этого не предусмотрено.
Вы могли заметить, что в подменю Style много пунктов. Давайте их рассмотрим.
Здесь нужно сказать, что все теги HTML , предназначенные для оформления текста, делятся на две большие группы. Теги физического форматирования просто говорят Web -обозревателю: "Сделай текст вот таким и не задавай лишних вопросов". Таким образом, если вы сделали текст жирным, то Web -обозреватель просто выведет его жирным шрифтом, не выполняя при этом никакой дополнительной обработки. Такие теги хороши тогда, когда вы не даете оформляемому с их помощью тексту никакого особого значения.
В отличие от них, теги логического форматирования дают тексту, составляющему их содержимое, какое-либо дополнительное значение. Например, вы можете превратить с помощью одного из этих тегов фрагмент текста в цитату. Web -обозреватель выведет ее особым шрифтом (как правило, курсивом, хотя, может и вообще никак не выделить) и, вместе с тем, может выполнить какуюто дополнительную обработку этого текста, например, вывести все цитаты, встретившиеся в странице, в отдельное окно. (Правда, ни один современный Web -обозреватель так не делает, но кто знает, что будет дальше...)
Выделение текста жирным и курсивным шрифтом, рассмотренное нами выше, выполняется с помощью тегов физического форматирования. В са­мом деле, мы просто подругому выделили некоторые фрагменты текста нашей странички, не давая им какого-то особого значения. И Web - обозреватель нас прекрасно поймет.
Давайте же продолжим изучение подменю Style . В нем мы видим пункт- выключатель Strikethrough , включив который мы сделаем выделенный фрагмент текста зачеркнутым. Зачеркивание текста выполняется опять же с помощью тега физического форматирования, который мы рассмотрим чуть ниже.
А остальные пункты подменю Style задают именно логическое
форматирование. В табл. 3.2 приведены все эти пункты и их краткие описания. Вы можете сами сделать такой пример и поэкспериментировать с разными стилями текста; сохраните его в файле 3.2. htm .
В табл. 3.3 перечислены теги, вставляемые в HTML -код пунктами подменю Style .
Теперь давайте зададим шрифт, которым набран наш текст. Делается это с помощью двух раскрывающих списков, расположенных в редакторе свойств. Разумеется, Dreamweaver предоставляет в ваше распоряжение также соответствующие пункты меню и комбинации клавиш. Для смены шрифта используется раскрывающийся список, а для смены размера шрифта— список. Но для того, чтобы понять, что же там отображается, нужно дать некоторые разъяснения.
Вспомним, зачем создавалась Всемирная паутина WWW . А именно, чтобы каждый человек, пользуясь любой компьютерной платформой, находясь в любой части света, смог прочитать любой HTML -документ. А т. к. разные компьютерные платформы имеют разные параметры видеоподсистемы, в частности разные стандартные шрифты, то задача одинакового отображе­ ния сильно усложняется. Поэтому HTML определяет несколько стандартных шрифтов, которые обязательно должны быть установлены на компьютере клиента, и несколько, а именно семь, размеров этих самых шрифтов. Конечно, вы можете использовать в своих Web -страницах другие шрифты, но тогда потрудитесь, чтобы они были установлены у пользователя. Впрочем, если на клиентском компьютере не будет того или иного шрифта, операционная система и Web -обозреватель используют ближайший максимально похожий из уже установленных шрифтов.
Наименования шрифтов в стандарте HTML могут записываться сразу несколько, через запятую. При этом если первого в списке шрифта на клиентском компьютере нет, Web -обозреватель ищет второй, третий и т. д., пока не доберется до стандартного шрифта, который уж точно должен там быть.
В этом раскрывающемся списке присутствуют все стандартные шрифты, определенные HTML . Вы можете выбрать любой из них. Если же вас не устраивает ни один, то вы можете просто ввести туда название любого другого шрифта, установленного на вашем компьютере, например Impact , и нажать клавишу < Enter >. Естественно, вся ответствен­ность за правильное отображение текста на клиентском компьютере в данном случае ляжет на вас.
Пункт Default Font этого списка сбрасывает шрифтовые установки, точнее, возвращает их к установкам родительского элемента.
Соответственно, в раскрывающемся списке размеров шрифта отображены все доступные размеры шрифтов. Их семь, как уже и говорилось. Кроме того, в этом меню присутствуют пункты вида + n и - n , где n - число от 1 до 7. Выбор этих пунктов позволяет соответственно увеличить или уменьшить размер шрифта на n ступеней относительно шрифта родительского элемента. Пункт None позволит вернуть размер шрифта к установкам родительского элемента.
Перед тем как изменять наименование или размер шрифта, нужно выделить соответствующий фрагмент текста. Это вам уже знакомо: все уже известные вам команды форматирования текста работают таким же образом.
Давайте выделим имя нашего героя и увеличим его на два размера. Для этого выберем в раскрывающемся списке размера шрифта пункт +2 . Не правда ли, гипотетический Иван Иванович страдает манией величия?
Теперь сменим шрифт. Но не какогото выделенного фрагмента, а ВСЕГО текста. Для этого выделим весь текст в окне. Конечно, для этого можно выбрать пункт Select All меню Edit или нажать комбинацию клавиш < Ctrl >+< A >. Но поступим по-другому. Вы, конечно, помните, что окно документа содержит так называемую секцию тегов. Давайте щелкнем мышью по кнопке
<body >, чтобы выделить все содержимое стра­ ницы (содержимое тега < body >, как вы уже догадались).
Теперь, когда все содержимое документа выделено, выберите нужный шрифт. Для примера выберем пункт Verdana , Arial , Helvetica , sans - serif -любимый шрифт автора. (Конечно, автор не собирается навязывать вам свои эстетические вкусы — это просто для примера .
Задать шрифт вы также можете с помощью подменю Font , расположенного в меню Text и контекстном меню. Для смены размера шрифта Dreamweaver предоставляет целых два подменю: Size и Size Change . Оба они располага­ ются в меню Text . В контекстном меню они объединены в одно подменю Size . Никаких клавишных сочетаний для выполнения этих операций с клавиатуры не предусмотрено.
Теперь давайте выделим цветом название программного продукта, с помощью которого делается этот замечательный сайт. Снова обратим внима­ ние на редактор свойств.
Селектор цвета состоит из двух частей. Справа находится поле ввода, где вы можете ввести шестнадцатеричный код нужного цвета. Но вряд ли вы пом­ ните наизусть шестнадцатеричные коды ваших любимых цветов. Поэтому слева находится кнопка вызова окна выбора цвета
Большую часть этого окна занимает палитра, где, собственно, вы и ищете нужный цвет. При этом в небольшом текстовом поле, расположенном в центре верхней серой полосы окна, высвечивается шестнадцатеричный код цвета, над которым вы в данный момент держите курсор мыши. Это очень удобно: впоследствии вам уже не надо будет долго выбирать цвет из палитры — вы просто введете в поле ввода селектора его код. Если же ни один цвет из палитры вам не подходит, вы можете с помощью того же курсора мыши (имеющего вид пипетки) "взять" необходимый цвет откуда угодно: с рабочего стола, из любого окна, из любого элемента управления. Чтобы закрыть окно выбора цвета, нажмите клавишу < Esc >.
В правом верхнем углу расположены три кнопки. Самая левая из них по­зволит вам быстро выбрать цвет, заданный по умолчанию (обычно это цвет родительского элемента). Средняя кнопка вызывает на экран стандартное диалоговое окно выбора цвета. А правая позволит вам переключить режимы палитры выбора цвета. При нажатии на нее на экране появляется дополни­ тельное меню, предлагающее пять режимов:
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 Tone являются безопасными , цвета из других палитр — нет . Естественно , если вы выбрали какой - то цвет из­вне окна выбора цветов , он совсем не обязательно уложится в безопасную палитру .
Название изучаемой нами программы уже выделено, так что щелкнем по кнопке селектора цветов и выберем любой понравившийся цвет. Автор вы­брал синий — он хорошо успокаивает нервы. Рисунок мы приводить не будем — все равно черно-белая иллюстрация не может передать цвет.
Если вы предпочитаете работать с меню, то для смены цвета шрифта вос­ пользуйтесь пунктом Color меню Text . К сожалению, в этом случае вы не сможете обратиться к селектору цветов — Dreamweaver выдаст вам стан­ дартное диалоговое окно выбора цвета Windows .
Примечание
Задание шрифта и цвета текста достигается с помощью тега < font >. . . </ font >. Этот тег должен содержать один из атрибутов : color , face или size , задающих , соответственно , цвет , наименование шрифта и его размер . Как вы уже поняли , это тег физического форматирования .
Совет
Если вы посмотрите на секцию тегов , то увидите , что теги < font > вложены в теги < P > и
< LI >, т . е . являются дочерними тегами самого последнего уровня . Это из особенностей HTML : некоторые теги могут быть вложены друг в друга только в определенном порядке .
Что теперь делать? Давайте посмотрим на наш текст и подумаем. Скажем, не слишком ли выделяются слова "Иван Иванович Иванов", набранные огромным жирным шрифтом? Не нужно ли вернуть их к обычному шрифту? Щелкните правой кнопкой мыши где-нибудь на этих словах и выберите в контекстном меню пункт Remove Tag < font >. Dreamweaver тотчас удалит тег, задающий размер шрифта, но оставит его содержимое. Мы уже описывали этот пункт меню в главе 2, так что он должен быть вам знаком.

1  2  3  4  5  6  7  8

Вверх