Смекни!
smekni.com

Учебник Macromedia Dreamweaver (стр. 68 из 135)

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

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

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

Рис. 9.22. Шаблон Main с колонкой новостей

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

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

Рис. 9.24. Диалоговоеокно New Optional Region

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

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

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

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

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

<TD WIDTH="98" VALIGN="TOP">

<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0">

Содержимое внутренней таблицы разметки </TABLE> </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 контекстного меню. На экране появится диалоговое окно NewRepeating Region, показанное на рис. 9.27.

Рис. 9.26. Кнопка Repeating Region панели объектов

Рис. 9.27. ДиалоговоеокноNew Repeating Region

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

Рис. 9.28. Повторяющаяся область

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

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

Сложно, конечно, зато очень интересно.

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

<P><EM><FONT SIZE="-1">

<!— TemplateBeginEditable name="NewsItem" —>

Содержимоеизменяемойобласти NewsItern

<!— TemplateEndEditable —>

</FONT></EM></P>

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

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

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

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

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

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

Рис. 9.30. Текст описания первой новости, введенный в колонку

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

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

Таблица 9.1. Кнопки и пункты меню, предназначенные для работыс пунктами повторяющихся областей

Пункт меню Назначение
New Entry After Selection Добавляет новый пункт ниже (правее)
выделенного
New Entry Before Selection Добавляет новый пункт выше (левее)
выделенного
New Entry at End Добавляет новый пункт в самый конец
New Entry at Beginning Добавляет новый пункт в самое начало
Delete Repeating Entry Удаляет выделенный пункт
Move Entry Up Перемещает выделенный пункт выше
Move Entry Down Перемещает выделенный пункт ниже
Move Entry to Beginning Перемещает выделенный пункт в самый
верх
Move Entry to End Перемещает выделенный пункт в самый низ
Cut Repeating Entry Вырезает выделенный пункт в буфер обмена
Copy Repeating Entry Копирует выделенный пункт в буфер обмена

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