Macromedia Dreamweaver MX

Новые возможности шаблонов

Здесь мы рассмотрим некоторые весьма полезные возможности, появив­шиеся в Dreamweaver MX. Конечно же, эти возможности касаются под­держки шаблонов.

Изменяемые атрибуты

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

Чтобы сделать какой-то атрибут тега изменяемым, сначала откройте в окне документа нужный шаблон. После этого выберите элемент страницы, атри­бут тега которого вы хотите сделать изменяемым. Пусть, например, это бу­дет заголовок нашего сайта (текст "Иван Иванович Иванов" в верхней части страницы). Выделите весь заголовок или просто щелкните по тегу <font> в секции тегов. Теперь все готово.

Выберите пункт Make Attribute Editable подменю Templates меню Modify. На

Экране появится диалоговое окно Editable Tag Attributes (рис. 9.19).

В раскрывающемся списке Attribute выберите нужный атрибут (впрочем, там он один — color). Если же вы его там не найдете, нажмите кнопку Add, введите в единственном поле ввода диалогового окна добавления нового атрибута (рис. 9.20) имя нужного атрибута и нажмите кнопку ОК.

Чтобы сделать выбранный атрибут изменяемым, включите флажок Маке Attribute Editable. После этого станет доступной группа элементов управле­ния, находящаяся ниже.

В поле ввода Label введите имя созданного изменяемого атрибута. Вообще - то, Dreamweaver создаст его сам, и нам в большинстве случаев не придется вводить его самим.

Раскрывающийся список Туре задает тип значения атрибута. В нем доступ­ны пять пунктов:

□ Text — текстовое значение, строка;

□ URL — интернет-адрес;

□ Color — значение цвета;

□ True/False — значение типа "да-нет";

□ Number — числовое значение.

Выберите пункт Color, т. к. атрибут color тега <font> задает именно цвет шрифта.

В поле ввода Default введите значение изменяемого атрибута по умолчанию. Dreamweaver сам подставит туда текущее значение атрибута выбранного ва­ми тега, но вы, конечно, можете его изменить.

Закончив ввод данных, нажмите кнопку ОК. Если вы передумали делать атрибут изменяемым, нажмите кнопку Cancel.

Теперь сохраните шаблон и закройте его. Dreamweaver выведет диалоговое окно Update Files; нажмите кнопку Update, чтобы обновить все созданные на основе этого шаблона Web-страницы.

Теперь давайте откроем какую-нибудь Web-страницу, основанную на этом шаблоне, и изменим значение только что созданного атрибута. Пусть это будет страница Links. htm.

Чтобы задать значение изменяемого атрибута, выберите пункт Template Properties в меню Modify. На экране появится диалоговое окно Template Properties (рис. 9.21).

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

H elp

Color: Ді| ГІТД

Г~ Allow Nested Templates to Control This

Рис. 9.21. Диалоговое окно Template Properties

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

Необязательные области

Эх, ну до чего же хорош Dreamweaver MX! Что он позволяет сделать! Другие программы Web-дизайнеров, да и старые версии Dreamweaver ему и в под­метки не годятся!..

Вы спросите: что это автор так расхваливает этот Dreamweaver, который и так уже у вас в печенках сидит? Ну нравится он автору, и ничего не поде­лаешь.

Давайте еще раз посмотрим на страницы нашего нового сайта Sample site 3. Вроде, все неплохо. Почти все страницы созданы на основе шаблона Main. Это хорошо: нам не нужно вносить исправления во все повторяющиеся элементы на всех страницах сайта — это сделает за нас Dreamweaver. Уже одно это — повод для восхищения этой замечательной программой.

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

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

Но такая возможность есть! Она появилась именно в Dreamweaver MX. Он может создавать необязательные области (они так и называются), которые могут либо быть, либо не быть. И ответ на риторический вопрос "быть или не быть" даете вы.

Давайте создадим необязательную область, которая будет содержать колонку новостей. Для этого откроем шаблон Main в окне документа. Изменим раз­меры ячейки основного содержимого, чтобы справа осталось место под ко­лонку новостей. Поместим в нее новую таблицу разметки с тремя ячейками, расположенными вертикально; они будут содержать соответственно заголо­вок, собственно новости и ссылку на страницу архива новостей. Как это сделать, вы уже знаете, а если забыли, посмотрите главу 8. Далее поместим в ячейки заголовка и ссылки на страницу архива новостей соответствующий текст, а ячейку новостей оставим пустой. То, что у нас должно получиться, показано на рис. 9.22.

Теперь поместим всю таблицу разметки, в которой находится колонка ново­стей, в необязательную область. Для этого сначала выделим эту таблицу. Далее нажмем кнопку Optional Region (рис. 9.23) на вкладке Templates пане­ли объектов. Также можно выбрать пункт Optional Region подменю Template Objects меню Modify или одноименный пункт подменю Templates контекст­
ного меню. На экране появится диалоговое окно New Optional Region, пока­занное на рис. 9.24.

В поле ввода Name введем имя создаваемой необязательной области — News. Отключим флажок Show by Default, т. к. мы не хотим, чтобы она отобража­лась по умолчанию. И нажмем кнопку ОК. То, что у нас должно получить­ся, показано на рис. 9.25.

Скорее всего, вам придется подредактировать HTML-код. Проверьте — он должен выглядеть так (служебные комментарии, созданные Dreamweaver для выделения необязательной области, выделены полужирным шрифтом):

<!— TemplateBeginlf cond="_document['News']" —>

<TD WIDTH="5">&nbsp;</TD>

Это ячейка внешней таблицы, задающая просвет между основным содержимым и колонкой новостей сто WIDTH="98" VALIGN="TOP">

CTABLE WIDTH="100с" BORDER="0" CELLPADDING="0" CELLSPACING="0"> Содержимое внутренней таблицы разметки C/TABLE>

C/TD>

<!— TemplateEndlf —>

Рис. 9.25. Необязательная область, включающая в себя внутреннюю таблицу разметки страницы default. htm

Внутри необязательной области должны оказаться ячейка просвета и ячей­ка, в которой находится колонка новостей. Если это не так, отредактируйте HTML-код.

Вот, собственно, и все. Мы создали необязательную область.

Теперь, если вы создаете страницу на основе шаблона Main, то можете за­дать присутствие или неприсутствие в ней колонки новостей. Сделать это можно с помощью уже знакомого вам диалогового окна Template Properties (см. рис. 9.21). Выберите пункт Template Properties в меню Modify — и вы увидите, что в списке этого окна присутствует пункт News, т. е. параметр, задающий присутствие созданной нами необязательной области. А в ниж­ней части диалогового окна находится флажок Show News, включив кото­рый вы зададите присутствие области на странице.

На этом все? Увы, нет.

Дело в том, что необязательная область Dreamweaver по своей природе не является изменяемой. Нам нужно поместить в нее изменяемую область, чтобы мы смогли задать содержимое колонки новостей.

Но мы сделаем лучше. И Dreamweaver нам поможет.

Повторяющиеся области

Кроме необязательных, Dreamweaver MX позволяет также создавать повто­ряющиеся области. Повторяющаяся область может содержать сколько угодно содержимых (пунктов). В качестве примера такой области можно привести
описание новости в колонке на странице default. htm — их может быть мно­го, но в шаблоне для него создана только одна область.

Давайте создадим такую область.

Откройте шаблон Main и поместите текстовый курсор в ячейку новостей внутренней таблицы разметки. После этого нажмем кнопку Repeating Region (рис. 9.26) на вкладке Templates панели объектов. Также можно выбрать пункт Repeating Region подменю Template Objects меню Modify или одно­именный пункт подменю Templates контекстного меню. На экране появится диалоговое окно New Repeating Region, показанное на рис. 9.27.

Введите имя создаваемой повторяющейся области в единственном поле ввода этого окна. Давайте назовем ее После этого нажмите кнопку

ОК. Результат показан на рис. 9.28.

Теперь отформатируйте содержимое этой области как обычный текстовый абзац, выбрав в раскрывающемся списке Format редактора свойств пункт Paragraph. Если хотите, уменьшите шрифт текста на одну ступень. На этом создание повторяющейся области можно считать законченным.

Но проблема в том, что повторяющаяся область Dreamweaver также не яв­ляется изменяемой. Поэтому нам нужно поместить внутрь нее еще и изме­няемую область. Таким образом, получится троекратная вложенность "не­
обязательная область — повторяющаяся область — изменяемая область". Сложно, конечно, зато очень гибко.

Поставьте текстовый курсор внутри содержимого повторяющейся области. И создайте изменяемую область. Вы уже знаете, как это делается. Назовите ее Newsitem. После этого удалите остатки содержимого повторяющейся об­ласти, не входящего в изменяемую область. И поправьте HTML-код — он должен выглядеть так:

< PXEMXFONT SI ZE= " -1" >

<!— TemplateBeginEditable name="NewsItem" —>

Содержимое изменяемой области Newsitem <!— TemplateEndEditable —>

< / FONTX / EMX / P>

Внутри изменяемой области должен находиться только текст описания но­вости, без всех форматирующих тегов. (Вставленные Dreamweaver служеб­ные комментарии помечены полужирным шрифтом.) Результат показан на рис. 9.29.

If News

: Repeat: NewsList ; Ї Newsitem

: ІЛ/ejvs/jfem-ll

Рис. 9.29. Окончательный вид колонки новостей в шаблоне Main

Но не торопитесь теперь применять шаблон Main к странице default. htm. Если вы это сделаете, Dreamweaver запихает в изменяемую область Main все содержимое этой страницы, и вам придется ее долго редактировать. Лучше удалите страницу default. htm и создайте ее заново на основе шаблона Main. Поскольку текст приветствия уже имеется в шаблоне, вам даже не нужно будет ничего вводить с клавиатуры. Не забудьте только сохранить новую главную страницу сайта в файле default. htm.

Но как же колонка новостей? Сейчас мы ей займемся.

Откройте новую страницу default. htm, если вы ее уже закрыли. Выберите пункт Template Properties в меню Modify и в появившемся на экране диало­говом окне Template Properties задайте для параметра News значение true, для чего просто включите флажок Show News. После этого нажмите кноп­ку ОК.

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

Так, одна новость у нас есть. Но как добавить остальные? Очень просто!

Для работы с пунктами повторяющихся областей Dreamweaver предоставля­ет набор особых кнопок, появляющихся в заголовке повторяющейся облас­ти, и набор пунктов меню. Эти пункты меню находятся в подменю Repeated Entries, вложенного в подменю Templates меню Modify, а также в подменю Templates контекстного меню. Все они перечислены в табл. 9.1.

Как вы уже заметили, в табл. 9.1 не указан пункт Paste Repeating Entry, ко­торый осуществлял бы вставку пункта из буфера обмена. Это выполняется, как обычно, вызовом пункта Paste меню Edit или нажатием комбинации клавиш <Ctrl>+<V>.

С помощью этих пунктов вы можете добавлять, удалять и перемещать пунк­ты повторяющейся области. Создайте еще два или три пункта и впишите в них текст новостей. Результат вы можете увидеть на рис. 9.31.

Dreamweaver MX — настоящий король шаблонов!

Необязательные изменяемые области

Далеко не всегда приходится создавать такие сложные структуры областей, наподобие той, что мы только что сделали. Часто нужно просто создать в шаблоне необязательную область и поместить в нее изменяемую область. Для таких случаев Dreamweaver предоставляет возможность сделать все это за один раз, т. е. создать необязательную изменяемую область.

Откройте созданный нами в начале этой главы пустой шаблон Sample. С ним-то мы и будем экспериментировать.

Чтобы создать необязательную изменяемую область, нажмите кнопку Editable Optional Region (рис. 9.32) на вкладке Templates панели объектов. Также вы можете выбрать пункт Editable Optional Region подменю Template Objects меню Insert.

Рис. 9.32. Кнопка Editable Optional Region панели объектов

If Req

EditRegion3

Рис. 9.33. Необязательная изменяемая область, представляющая собой комбинацию из необязательной и изменяемой областей

На экране появится уже знакомое вам диалоговое окно New Optional Region. Введите имя создаваемой области в поле ввода Name, если хотите, отключи­те флажок Show by Default и нажмите кнопку ОК. После этого Dreamweaver создаст необязательную изменяемую область (рис. 9.33).

Как видите, Dreamweaver просто вкладывает изменяемую область внутрь необязательной. Вдобавок он еще и называет изменяемую область по - своему, не спрашивая нас. Но все равно это весьма удобно.

Табличная повторяющаяся область

Еще одна весьма удобная возможность Dreamweaver — создание табличных повторяющихся областей. Это обычная повторяющаяся область, пункты ко­торой организованы в виде таблицы. При этом каждая ячейка такой табли­цы содержит изменяемую область, т. е. вы можете вводить данные в каждую ее ячейку.

Как и в случае с необязательной изменяемой областью, табличную повто­ряющуюся область можно создать только с помощью кнопки панели объек­тов. Это кнопка Repeating Table (рис. 9.34) вкладки Templates. Также вы можете выбрать пункт Repeating Table подменю Template Objects меню Insert. После этого на экране появится диалоговое окно Insert Repeating Table (рис. 9.35).

Большинство элементов управления этого окна знакомо вам по диалогово­му окну Insert Table. Поэтому здесь они рассматриваться не будут. Предста­вим только элементы управления, находящиеся в группе Repeat row of table, которые нам пока еще незнакомы.

Поля ввода Starting Row и Ending Row позволяют задать номера соответст­венно первой и последней строк таблицы, которые будут помещены в соз­даваемую повторяющуюся область. (Это строки, которые станут пунктами повторяющейся области.) Если вы не хотите вносить в повторяющуюся об­ласть первую и последнюю строки, в которых часто помещают заголовок и "поддон" таблицы, задайте соответствующие номера.

В поле ввода Region Name вводится имя создаваемой повторяющейся об­ласти.

Табличная повторяющаяся область будет создана после нажатия кнопки ОК. Эту область вы можете увидеть на рис. 9.36.

Как видите, Dreamweaver и в этом случае особо не мудрствует: он просто создает таблицу, помещает указанные вами строки в повторяющуюся об­ласть и создает в каждой ячейке этих строк изменяемые области. Это, кста­ти, очень удобно; мы могли бы создать такую область для нашей колонки новостей. Попробуйте, если хотите, — это будет вашей самостоятельной работой.

Вложенные шаблоны

Последняя возможность работы с шаблонами, предоставляемая Dream­weaver MX, которую мы рассмотрим, — это вложенные шаблоны. Вложенный шаблон — это шаблон, созданный на основе другого шаблона (так называе­мого базового шаблона). При создании вложенного шаблона используются изменяемые области базового шаблона: в них вносится новое неизменяемое содержимое и создаются новые изменяемые области.

Давайте создадим вложенный шаблон, на основе которого будет сделана страница архива новостей Archive. htm. Мы создадим повторяющуюся об­ласть, в которой и будет помещаться текст новостей. За основу возьмем ко­лонку новостей нашего основного шаблона Main.

Сначала удалим старую страницу Archive. htm. После этого создадим на ос­нове шаблона Main новую страницу. Сохраним ее как шаблон, выбрав пункт Save as Template меню File. (Также можно нажать кнопку Маке Nested Template (рис. 9.37) вкладки Templates панели объектов.) В поле вво­да Save As диалогового окна Save As Template (см. рис. 9.4) введем имя но­вого шаблона — NewsArchive. После этого нажмем кнопку Save. Готовый шаблон NewsArchive будет в точности похож на шаблон Main. Пока...

Рис. 9.37. Кнопка Make Nested Template панели объектов

Теперь удалим все содержимое изменяемой области Main. Сейчас мы созда­дим для нее новое содержимое в виде повторяющейся и изменяемой об­ластей.

Прежде всего, введите текст "Архив новостей" и отформатируйте его как заголовок. После этого поместите текстовый курсор ниже этого текста и создайте там повторяющуюся область. Назовите ее News Archive.

Вы, наверно, уже заметили, что изменяемая область Main базового шаблона изменила свой вид — ее граница стала оранжевой. Так Dreamweaver пока­зывает, что вы начали создание вложенного шаблона.

Теперь поместите внутрь повторяющейся области изменяемую область. На­зовите ее NewsArchive item. На этом работу можно считать законченной. Со­храните готовый шаблон.

Создайте на основе шаблона NewsArchive новую Web-страницу. Введите текст архивных новостей, точнее, "старостей". Сохраните ее под именем Archive. htm.

Теперь, если вы измените что-либо в шаблоне NewsArchive, будет изменена единственная страница, созданная на его основе, — Archive. htm. Если же вы измените какой-либо элемент шаблона Main, будут изменены как все стра­ницы, созданные на его основе, так и шаблон NewsArchive. Как видите, Dreamweaver MX следит за вложенными шаблонами как за обычными Web - страницами.