1  2  3  4  5  6  7  8

Использование HTML - стилей
Очень и очень многие мощные текстовые редакторы предлагают пользователю так называемые стили, т. е. описания формата фрагментов текста, имеющие имя и сохраненные отдельно от редактируемого документа. Выделив фрагмент текста и выбрав стиль, пользователь может мгновенно приме­ нить к этому фрагменту все стилевые настройки: шрифт, выравнивание, цвет текста и т. п. Если же пользователю потребуется быстро изменить форматирование текста, он может просто отредактировать стиль — и все его настройки будут мгновенно применены к тем фрагментам, к которым ранее был присвоен этот стиль.
К сожалению, HTML не поддерживает стили. Dreamweaver выходит из этого положения, задавая свои стили, называемые HTML -стилями. Со стилями, скажем, Microsoft Word они имеют мало общего, в частности, фрагмент тек­ ста не может хранить имя стиля, который был к нему применен. Вдобавок, с помощью HTML -стилей можно задать только шрифтовые настройки, цвет текста и выравнивание абзаца. Однако HTML -стили во многих случаях помогут быстро отформатировать текст.
Поищите в доке панель под названием HTML Styles . Если ее нет, выберите пункт HTML Styles меню Window или нажмите комбинацию клавиш < Ctrl >+< F11 >.
Большую часть этой панели занимает собственно список HTML -стилей. Кроме пунктов, задающих определенные вами HTML -стили, там есть еще два: Clear Selection Style и Clear Paragraph Style . Они выполняют одинаковую задачу — удаляют всякое HTML -форматирование фрагмента текста. Но почему их два? И чем они различаются?
Прежде чем дать ответ на этот вопрос, еще немного поговорим о HTML - стилях.
Как и в обычных текстовых редакторах, HTML -стиль Dreamweaver может применяться либо к выделенному фрагменту текста, либо к абзацу целиком; в первом случае он называется стилем символов, а во втором — стилем абзаца. При создании HTML -стиля вы задаете, к чему он будет применен. Так вот, пункт Clear Selection Style удаляет HTML -форматирование выделенного текста, a Clear Paragraph Style — всего абзаца.
Вы можете испытать эти пункты списка в действии. Для этого выделите, скажем, имя нашего героя и выберите пункт Clear Selection Style . Вы увидите, что жирное выделение имени сразу же пропадет. Теперь поставьте тек­ стовый курсор на какой-либо абзац, например на последнюю строку со сведениями об авторских правах, и выберите пункт Clear Paragraph Style . Про изойдет то же самое, за тем исключением, что останется отступ. Сделайте дважды операцию отмены (либо выберите пункт Undo меню Edit , либо нажмите комбинацию клавиш
< Ctrl >+< Z >), чтобы вернуть все, как было.
Теперь взглянем снова на панель HTML Styles . В ее левом нижнем углу находится флажок автоматического применения стилей Auto Apply . Когда он включен (а он включен по умолчанию), выбираемые в списке HTML -стили применяются сразу же после выбора. Если вы его отключите, то для того, чтобы применить стиль, вам нужно после его выбора в списке щелкнуть кнопку Apply , находящуюся правее этого флажка, выбрать пункт Apply контекстного меню списка стилей или дополнительного меню панели или просто нажать клавишу < Enter >. Это может быть полезно, например, когда вы часто редактируете HTML -стили и не хотите, чтобы выбранный стиль применялся сразу же.
Так как же создавать HTML -стили? Очень просто.
Здесь есть две возможности: вы можете создать стиль "с нуля" и скопировать его с уже отформатированного и выделенного фрагмента текста. Вто­ рой способ намного проще первого, поэтому мы рассмотрим его в первую очередь.
Давайте создадим HTML -стиль под названием Имя, представляющий имя автора сайта. Для этого выделим в окне документа текст имени и нажмем в окне HTML -стилей кнопку New Style , находящуюся в правом нижнем углу панели. Вы также можете либо выбрать пункт New в дополнительном меню панели, либо выбрать этот же пункт в контекстном меню списка стилей панели. Так или иначе на экране появится диалоговое окно Define HTML Style .
В поле ввода Name вводится имя стиля. Введем сюда слово имя.
С помощью группы переключателей Apply To задается тип HTML -стиля: Selection задает стиль символов, a Paragraph — стиль абзаца. Сейчас вклю­ чен переключатель Selection , оставим его включенным.
Группа переключателей When Applying позволяет определить, что произойдет, если этот стиль будет применен к фрагменту, уже отформатированному средствами HTML : Add to Existing Style добавляет новое форматирование к существующему, Clear Existing Style удаляет старое форматирование перед! добавлением нового. Оставим переключатель Clear Existing Style включенным.
Группа элементов управления Font Attributes задает параметры шрифта. Раскрывающийся список Font задает наименование шрифта, Size — размер, селектор цвета Color позволяет выбрать цвет текста, а кнопки-выключатели В и I делают шрифт жирным и курсивным соответственно. Также доступна кнопка Other , при нажатии которой появляется меню, из которого вы можете выбрать дополнительные виды HTML -форматирования текста (в основном, это теги логического форматирования). Здесь мы также ничего не трогаем.
Закончив, нажимаем кнопку ОК, чтобы сохранить вновь созданный стиль Кнопка Cancel позволит отказаться от этого, а кнопка Clear сбрасывает все настройки стиля в состояние по умолчанию. Так или иначе, мы создали наш первый HTML -стиль. После этого в списке стилей появится новая строка "Имя". Левее имени стиля мы увидим букву а, обозначающую стиль символов.
Создадим теперь еще один стиль, но на этот раз — стиль абзаца, а именно абзаца со сведениями об авторских правах. И на этот раз, "с нуля". Для этого уберем всякое выделение с текста в окне документа и снова нажмем кнопку New Style панели стилей. В появившемся диалоговом окне Define HTML Style в поле Name введем "Права", включим переключатель Para graph , включим кнопку-переключатель I и отключим В , а в раскрывающем ся списке Size выберем пункт — 1 .
Как видим, в окне Define HTML Style стала доступна группа элементов ; управления Paragraph Attributes , задающая форматирование всего абзаца. Раскрывающийся список Format задает формат абзаца ( Paragraph , Heading 1 и т. д.), а три кнопки-переключателя Alignment — выравнивание. Оба эти элементы управления полностью подобны своим "коллегам" из редактора свойств. Ничего здесь трогать пока не будем.
Закончив, нажмем кнопку ОК , и в списке стилей появится новое имя, помеченное знаком абзаца. Теперь выберем последний абзац нашего текста и щелкнем новоиспеченный стиль. Формат сведений об авторских правах тот­час изменится: размер шрифта станет меньше.
Если вам нужно изменить уже созданный стиль, щелкните по нему правой кнопкой мыши и в появившемся контекстном меню выберите пункт Edit .
Если флажок Auto Apply отключен, вы также можете выбрать необходимый стиль и выбрать пункт Edit в дополнительном меню панели или просто дважды щелкнуть по нужному стилю. После этого на экране появится уже знакомое вам диалоговое окно Define HTML Style , в котором вы сможете изменить все, что хотите.
Для удаления ненужного стиля также щелкните по нему правой кнопкой мыши и выберите в контекстном меню пункт Delete . Dreamweaver предупредит вас в особом окне, что стили удаляются безвозвратно; нажмите кнопку ОК , если вы преисполнены решимости избавиться от этого стиля, и кнопку Cancel , если передумали его удалять. Если флажок Auto Apply от­ ключен, вы также можете выбрать нужный (точнее, ненужный) стиль и вы­ брать пункт Delete в дополнительном меню панели или щелкнуть кнопку Delete Style .
Пункт Duplicate контекстного меню списка стилей и дополнительного меню панели позволит вам создать новый стиль третьим возможным способом: скопировав и слегка изменив существующий стиль. Если вы укажете какой- либо стиль в списке и выберите пункт Duplicate , на экране появится диало говое окно Define HTML Style , в котором будут подставлены параметры вы бранного стиля. Задайте имя для нового стиля, измените нужные параметры и не забудьте нажать кнопку ОК.
Работа с гиперссылками
В главе 1 мы уже говорили о гиперссылках. Пора научиться создавать их в среде Dreamweaver .
Для того чтобы описать личность нашего незабвенного Ивана Ивановича Иванова, нам нужно пять Web -страниц: главная, список увлечений, список проектов, более подробные сведения об авторе и любимые ссылки. В данный момент у нас готова только главная страница. И прежде, чем мы приступим к созданию других страниц, узнаем, как же создаются гиперссылки.

1  2  3  4  5  6  7  8

Вверх