Macromedia Dreamweaver MX

Работа с шаблонами

С теорией мы закончили. Пора переходить к практике.

Создание шаблона

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

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

Чтобы создать новый шаблон "с нуля", либо нажмите кнопку New Template в правом нижнем углу панели Assets (рис. 9.1), либо выберите пункт New Template в контекстном или дополнительном меню этой панели. В списке появится новый пункт, вместо названия которого будет находиться поле ввода с текстом untitled. Введите в него имя вновь создаваемого шаблона и нажмите клавишу <Enter>. Имейте при этом в виду, что имя шаблона есть на самом деле имя файла, в котором сохраняется шаблон, поэтому оно должно удовлетворять соглашениям по именованию файлов. (Автор, напри­мер, назвал новый шаблон Sample.) Все, вы только что создали новый пус­той шаблон.

Рис. 9.1. Кнопка New Template

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

Создать новый шаблон на основе существующей Web-страницы еще проще. Для этого откройте нужную Web-страницу, например default. htm, и выбери­те в меню File пункт Save as Template. Также вы можете нажать кнопку Make Template (рис. 9.3) вкладки Templates панели объектов. На экране появится диалоговое окно Save As Template, показанное на рис. 9.4.

В раскрывающемся списке Site выбирается сайт, в котором сохраняется шаблон. (Шаблоны являются неотъемлемой собственностью сайта, помни­те?) По умолчанию там выбран текущий сайт.

В списке Existing Templates перечислены уже сохраненные в этом сайте шаблоны. В нашем случае там есть только один шаблон — созданный нами ранее пустой шаблон Sample. Вы можете выбрать в этом списке любой шаб­лон и перезаписать его; в этом случае Dreamweaver переспросит вас, дейст­вительно ли вы хотите перезаписать существующий шаблон.

Само имя шаблона вводится в поле ввода Save As. Давайте назовем наш но­вый шаблон Main ("главный"), поскольку это наш главный шаблон, на ос­нове которого мы построим наш сайт.

Введя все нужные данные, нажмите кнопку Save для сохранения шаблона или Cancel — для отказа от этого. Поскольку мы нуждаемся в шаблоне, нам нужно нажать кнопку Save.

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

Редактирование шаблона

Пустой шаблон необходимо наполнить содержимым. Шаблон, созданный на основе Web-страницы, нужно отредактировать: убрать уникальное для этой страницы содержимое, оставив только общие для всех страниц сайта элементы. Для этого вам надо будет открыть шаблон для редактирования в окне документа, как обычную Web-страницу.

Сделать это можно тремя способами:

□ щелкнуть по нужной позиции списка шаблонов правой кнопкой мыши и выбрать пункт Edit контекстного или дополнительного меню;

□ выбрать нужный шаблон в списке и нажать кнопку Edit в правом ниж­нем углу панели Assets (рис. 9.5);

□ дважды щелкнуть по нужному шаблону в списке.

Ш

Рис. 9.5. Кнопка Edit панели Assets

В любом случае на экране появится окно документа, в котором будет от­крыт выбранный нами шаблон (рис. 9.6). Как видите, сейчас он ничем от­личается от Web-страницы default. htm, на основе которой был создан.

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

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

Откройте шаблон Main, который мы создали на основе страницы default. htm (если вы его еще не открыли). Уберите текст основного содержимого и

Колонку новостей, оставьте только заголовок, полосу навигации и сведения об авторских правах. Проще всего это сделать, переключившись в режим разметки. Проверьте, является ли ячейка основного содержимого "саморас - тягивающейся". В результате у вас должно получиться нечто, похожее на рис. 9.7.

Сохраните шаблон. При этом Dreamweaver предупредит вас, что шаблон не содержит ни одной изменяемой области, выведя небольшое окно-преду­преждение. Нажмите кнопку ОК, чтобы все-таки сохранить шаблон, или Cancel — для отказа от этого. Если вы не хотите, чтобы это окно появля­лось в дальнейшем, перед тем, как нажать кнопки ОК или Cancel, включите флажок Don't warn me again.

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

Создание изменяемых областей

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

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

После этого выберите в подменю Template Objects меню Modify окна доку­мента пункт New Editable Region или нажмите комбинацию клавиш <Ctrl>+ +<Alt>+<V>. Вы можете также выбрать пункт New Editable Region подменю Template контекстного меню. Если вы предпочитаете пользоваться панелью объектов, то можете нажать кнопку Editable Region на вкладке Templates (рис. 9.8). На экране появится диалоговое окно New Editable Region, показан­ное на рис. 9.9.

Ми в шаблоне изменяемая область должна иметь уникальное имя, иначе Dreamweaver не сможет ее обработать. Это имя может содержать любые символы, кроме букв русского алфавита, кавычек, апострофа и знаков "<", ">" и "&". После этого нажмите кнопку ОК, чтобы создать изменяемую об­ласть, или Cancel — для отказа от этого.

Внимание!

Вы не можете дать изменяемой области имя аос-ЬШе. Почему, будет расска­зано позже.

Когда вы нажмете кнопку ОК, вы увидите следующее — см. рис. 9.10. Так выглядит в окне документа Dreamweaver изменяемая область, в которую мы превратили основное содержимое нашей страницы. Вверху вы видите не­большой голубой ярлычок — заголовок, содержащий имя изменяемой облас­ти; он похож на заголовок таблиц разметки. Щелкнув его, вы выделите из­меняемую область. Ниже, в синей рамке, находится содержимое изменяемой области, в нашем случае — текст основного содержимого. (Если вы создали
пустую изменяемую область, она будет содержать только текст ее имени.) При выборе изменяемой области содержимое области будет выделено.

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

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

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

Кроме подменю Editable Regions, список всех созданных в шаблоне изме­няемых областей находится также внизу подменю Templates меню Modify.

Если вы поместили изменяемую область не в то место, куда хотели, это можно исправить. Выделите нужную изменяемую область, щелкнув мышью по ее заголовку. После этого "ухватите" ее мышью за содержимое и перета­щите на нужное место. Вот и все.

Однако, если вы ошиблись в наборе имени, вам придется править HTML - код шаблона. Как уже говорилось, чтобы отделить неизменяемое содержи­мое шаблона от содержимого изменяемой области, Dreamweaver вставляет в HTML-код специальные комментарии. Они имеют такой вид:

<!— TemplateBeginEditable name="Main" —>

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

<!— TemplateEndEditable —>

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

Внимание!

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

И, наконец, может случиться так, что вы захотите удалить изменяемую об­ласть. Сделать это можно двумя способами: простым и очень простым. Очень простой способ заключается в том, чтобы выбрать изменяемую об­ласть щелчком по заголовку и нажать клавишу <Del>. Простой способ — поставить текстовый курсор куда-либо внутрь содержимого изменяемой об­ласти и выбрать пункт Remove Editable Markup подменю Templates меню Modify или контекстного меню. Учтите, что после удаления изменяемой области ее содержимое остается в шаблоне. Так что, если вы хотите удалить всю изменяемую область, вам также придется удалить ее содержимое.

А теперь — небольшой сюрприз. Дело в том, что Dreamweaver при создании любого шаблона автоматически создает небольшую изменяемую область doctitie. (Вот поэтому вы и не можете дать изменяемой области имя doctitie — такая изменяемая область уже существует!) Эта изменяемая об­ласть включает в себя содержимое тега <title>, иначе говоря, название Web-страницы. Это невидимая изменяемая область — она не отображается ни в подменю Editable Regions подменю Templates контекстного меню, ни внизу подменю Templates меню Modify.

Внимание!

Если вы удалите скрытую изменяемую область аосЫ1;1е, то потеряете воз­можность менять названия Л/еЬ-страниц, основанных на этом шаблоне. В дан­ном случае все эти страницы будут иметь одно название, совпадающее с на­званием шаблона.

Создание Web-страниц на основе шаблонов

Создать Web-страницу на основе шаблона можно тремя способами.

Первый способ заключается в том, чтобы использовать уже знакомый вам пункт New меню File окна документа Dreamweaver. При этом на экране появится диалоговое окно New Document, показанное на рис. 3.1. Переклю­читесь на вкладку Templates — и вы увидите то, что показано на рис. 9.11.

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

В списке Site <имя сайта > выбирается нужный шаблон. Выберите шаблон Main. После этого в расположенной справа панели предварительного про­смотра появится изображение выбранного шаблона.

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

Если вам нужно создать страницу, чье содержимое будет значительно отли­чаться от шаблона, отключите этот флажок. После этого вы сможете изме­нять ее как угодно.

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

Второй способ создания новой страницы на основе шаблона намного про­ще. Откройте панель Assets, переключитесь на список шаблонов, выберите в списке нужный шаблон и в контекстном или дополнительном меню — пункт New from Template.

Как бы то ни было, на экране появится окно документа, содержащее в себе новую ¥еЬ-страницу (рис. 9.12). Созданная нами изменяемая область выде­лена синей рамкой. Кроме ее содержимого, ни один другой элемент стра­ницы не может быть изменен; при наведении на него курсора мыши по­следний меняет форму на перечеркнутый круг. Мы даже не можем их выде­лить. Также невозможно изменить параметры таблицы или ее элементов. Шаблон надежно защищен от редактирования.

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

Для поиска изменяемых областей на странице вы также можете пользовать­ся уже знакомым вам подменю Editable Regions, находящемся в подменю Templates контекстного меню. Там перечислен список всех имеющихся в шаблоне изменяемых областей; вам нужно будет только выбрать соответ­ствующий пункт. Помните также, что список изменяемых областей приве­ден внизу подменю Templates меню Modify.

Если вы переключитесь в режим отображения HTML-кода, вы также не сможете изменять код нередактируемой области вручную. Хотя сможете его просмотреть; HTML-код, принадлежащий шаблону (нередактируемый), вы­делен в окне документа тускло-серым цветом.

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

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

Итак, новая страница, базирующаяся на шаблоне, создана! Что можно сде­лать с ней еще?

Если вам вдруг понадобилось изменить шаблон (например, вы обнаружили в нем ошибку), то вы сможете легко вызвать его на редактирование. Для этого выберите пункт Open Attached Template подменю Templates меню Modify или аналогичный пункт контекстного меню. На экране тотчас по­явится окно документа, где будет открыт этот шаблон.

Иногда возникает необходимость создать страницу, чей дизайн сильно от­личается от предоставляемого шаблоном. В этом случае вы можете создать на основе данного шаблона страницу, а потом "отвязать" ее от этого шабло­на. Для этого выберите пункт Detach from Template подменю Templates ме­ню Modify. Страница будет "откреплена" от шаблона; и желтый ярлычок, мозолящий вам глаза в правом верхнем углу окна документа, пропадет.