Macromedia Dreamweaver MX

Применение шаблонов к уже созданным Web-страницам

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

В частности, у нас уже есть набор страниц нашего второго сайта Sample site 2, сделанного на основе фреймов. Нам нужно быстро преобразовать их в новый вид для третьего сайта, который мы создаем сейчас. Как это сделать?

Очень просто!

Давайте преобразуем в новый вид страницу Projects. htm сайта Sample site 2. (Остальные страницы данного сайта преобразуются аналогично.) Для этого найдите соответствующий файл во вложенной папке HTMLs корневой папки второго сайта и скопируйте его во вложенную папку HTMLs нового сайта.

Далее в панели Site откройте папку HTMLs сайта Sample site 3 и найдите страницу Projects. htm. Откройте ее в окне документа.

Последующие наши действия будут зависеть от того, активизирована ли у вас панель Assets со списком шаблонов. Если она активизирована, приме­нение шаблона к странице выполняется очень просто. Для этого выберите в списке шаблонов нужный и нажмите кнопку Apply в левом нижнем углу панели, либо вызовите контекстное или дополнительное меню и выберите пункт Apply, либо просто перетащите нужный шаблон из списка в окно документа. После этого на экране появится диалоговое окно Inconsistent Region Names, показанное на рис. 9.14.

Большую часть этого диалогового окна занимает список, состоящий из двух колонок: в левой отображаются имена изменяемых областей, имеющихся в открытой странице, а в правой — имена изменяемых областей шаблона, куда будет перемещено их содержимое. В нашем случае страница Projects. htm старого сайта не имеет изменяемых областей, поэтому в списке буцет при­сутствовать только один значимый пункт — Document body (тело страницы). В правой колонке списка против этого пункта будет стоять надпись <Not Resolved>, обозначающая, что Dreamweaver не знает, куда поместить содер­жимое страницы.

Под списком находится раскрывающийся список Move Content to New Re­gion, в котором задается изменяемая область шаблона, куда будет переме­щено содержимое страницы. Среди пунктов этого списка будут перечисле­ны все изменяемые области шаблона. Если же вы выберете пункт Nowhere, содержимое страницы будет потеряно. Чтобы переместить содержимое всех изменяемых областей открытой страницы в какую-то одну, чье имя выбра­но в списке Move Content to New Region, нажмите кнопку Use for All.

Выделите единственный пункт списка и выберите в раскрывающемся спи­ске Move Content to New Region нужную изменяемую область шаблона, в нашем случае Main. После чего нажмите кнопку ОК для перемещения в нее содержимого страницы или Cancel — для отказа от этого.

Полученный после нажатия кнопки ОК результат показан на рис. 9.15. Как видите, Dreamweaver прекрасно справился со своей задачей. Теперь вы мо­жете, если хотите, подредактировать содержимое страницы и сохранить ее.

Теперь преобразуем в новый вид страницу Links. htm сайта Sample site 2. Найдите ее в папке HTMLs корневой папки второго сайта, скопируйте его в папку HTMLs нового сайта и откройте в окне документа. Предположим теперь, что панель Assets у вас закрыта.

Выберите пункт Apply Template to Page подменю Templates меню Modify. На

Экране появится диалоговое окно Select Template, похожее на окно Save as Template (см. рис. 9.4). Выберите нужный шаблон в списке Templates и на­жмите кнопку ОК. После этого опять появится диалоговое окно Inconsistent Region Names (см. рис. 9.14), где вы будете должны выбрать изменяемую область, куда будет помещено содержимое страницы, и еще раз нажать кнопку ОК.

Заметьте, что все параметры страниц Projects. htm и Links. htm (цвет фона, текста и гиперссылок) пропадут после применения к странице шаблона. Точнее, они не пропадут, а станут такими же, как у шаблона, поскольку параметры страниц задаются шаблоном и в отдельных страницах не могут быть изменены.

Как видите, можно очень просто подогнать под один шаблон все сущест­вующие у вас Web-страницы. Скопируйте остальные страницы предыдущего (второго) сайта в третий (напомним, что все они содержатся во вложенной папке HTMLs корневой папки сайта) и переделайте их так же, как и стра­ницы Projects. htm и Links. htm. После этого можно считать, что наш новый сайт почти готов.

Но что, если страница, которую вы хотите "подогнать" под шаблон, уже ос­нована на каком-то шаблоне? Да ничего сложного! Dreamweaver выполнит за вас львиную часть работы — вам же останется только указать ему, что куда распихивать.

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

Если же в старом шаблоне встретится изменяемая область, для которой Dreamweaver не найдет "достойной" пары в новом шаблоне, понадобится ваша помощь. В этом случае Dreamweaver выведет на экран диалоговое ок­но Inconsistent Region Names (см. рис. 9.14). Здесь вы должны будете вы­брать изменяемую область нового шаблона, куда будет перемещено содер­жимое изменяемой области старого шаблона, не имеющей пары. После на­жатия кнопки ОК все будет сделано в лучшем виде.

Если вы случайно применили к странице не тот шаблон или что-то напута­ли с изменяемыми областями и их содержимым, Dreamweaver предоставляет вам возможность "отката". Для этого воспользуйтесь "волшебной палочкой" всех изучающих новые программы методом "научного тыка" — комбинаци­ей клавиш <Ctrl>+<Z> или пунктом Undo меню Edit.

А теперь рассмотрим еще один очень важный вопрос. Он касается гипер­ссылок, используемых в шаблонах, и поддержания их корректности.

Гиперссылки в шаблонах

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

СКорневая папка сайта> default. htm HTMLs

Archive. htm

Pics

NAVBAR

Spacer. gif

Templates

Main. dwt

Возьмем страницу default. htm. Все гиперссылки, находящиеся на ней, даны относительно файла default. htm. Например, гиперссылка, ссылающаяся на страницу списка проектов, имеет следующий адрес:

HTMLs/Projects. htm

Проверьте по вышеприведенной схеме — он правилен.

Теперь мы создали на основе этой страницы шаблон Main. dwt. Как вы уже знаете, все шаблоны сохраняются в специальной вложенной папке Tem­plates корневой папки сайта, поэтому гиперссылки, содержащиеся в этом шаблоне, по идее, должны "осиротеть". Однако Dreamweaver автоматически скорректирует все ссылки, чтобы они указывали на те же файлы. И ссылка, указывающая на страницу списка проектов, будет иметь такой адрес:

../HTMLs/Projects. htm

При создании страницы на основе этого шаблона (пусть это будет страница Archive. htm) Dreamweaver опять же корректирует интернет-адреса всех гиперссылок. Таким образом, наша многострадальная гиперссылка будет иметь вид:

Projects. htm

Проверьте по вышеприведенной структуре сайта — она корректна.

Все это справедливо не только для гиперссылок. Имена файлов графиче­ских изображений, фильмов и прочих внедренных объектов корректируются точно так же. Dreamweaver следит за тем, чтобы ни одна ссылка не стала "сиротой".

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

Из этого следуют два важнейших правила, которые вам всегда следует со­блюдать при использовании шаблонов и интернет-адресов, заданных отно­сительно файлов страницы.

1. Если вы создаете гиперссылку в обычной Web-странице, задавайте ее адрес относительно файла этой страницы.

2. Если вы создаете гиперссылку в шаблоне, задавайте ее адрес относитель­но файла шаблона. Dreamweaver автоматически выполнит преобразова­ние адресов при создании страниц на основе этого шаблона.