Создание Web - страниц на основе шаблонов
Создать Web -страницу на основе шаблона можно тремя способами.
Первый способ заключается в том, чтобы использовать уже знакомый вам пункт New меню File окна документа Dreamweaver . При этом на экране появится диалоговое окно New Document . Переключитесь на вкладку Templates . В списке Templates For выбирается сайт, из которого будет взят шаблон. Это значит, что вы можете создать страницу на основе шаблона, который принадлежит другому сайту.
В списке Site <имя сайта> выбирается нужный шаблон. Выберите шаблон Main . После этого в расположенной справа панели предварительного просмотра появится изображение выбранного шаблона.
Если флажок Update Pages when Template Changes включен (а он включен умолчанию), при изменении шаблона, на основе которого создается Web -страница, она будет соответственно изменена. Если же этот флажок отключить, то в новую страницу будет просто скопировано содержимое выбранного шаблона. В этом случае она не будет содержать ни изменяемых, ни неизменяемых областей и при изменении шаблона изменяться не будет, Фактически это будет независимая страница, просто содержащая все содержимоё шаблона.
Если вам нужно создать страницу, чье содержимое будет значительно отличаться от шаблона, отключите этот флажок. После этого вы сможете изменять ее как угодно.
Чтобы создать новую страницу на основе выбранного шаблона, нажмите кнопку Create . Чтобы отказаться от создания страницы, нажмите кнопку Cancel .
Второй способ создания новой страницы на основе шаблона намного проще. Откройте панель Assets , переключитесь на список шаблонов, выберите в списке нужный шаблон и в контекстном или дополнительном меню — пункт New from Template .
Как бы то ни было, на экране появится окно документа, содержащее в себе новую Web -страницу. Созданная нами изменяемая область выделена синей рамкой. Кроме ее содержимого, ни один другой элемент странницы не может быть изменен; при наведении на него курсора мыши по следний меняет форму на перечеркнутый круг. Мы даже не можем их выделить. Также невозможно изменить параметры таблицы или ее элементов. Шаблон надежно защищен от редактирования.
В правом верхнем углу находится небольшой желтый ярлычок, показывающий имя шаблона, на котором базируется создаваемая Web -страница. Таким образом, вы не забудете его имя.
Для поиска изменяемых областей на странице вы также можете пользоваться уже знакомым вам подменю Editable Regions , находящемся в подменю Templates контекстного меню. Там перечислен список всех имеющихся в шаблоне изменяемых областей; вам нужно будет только выбрать соответствующий пункт. Помните также, что список изменяемых областей приведен внизу подменю Templates меню Modify .
Если вы переключитесь в режим отображения HTML -кода, вы также не сможете изменять код нередактируемой области вручную. Хотя сможете его просмотреть; HTML -код, принадлежащий шаблону (нередактируемый), выдан в окне документа тускло-серым цветом.
Но хватит созерцать разноцветный HTML -код. Давайте создадим Web -страницу архива новостей. Введите в единственную изменяемую область какой-либо текст. Придумайте какиенибудь старые новости или просто напишите, что архива пока нет, поскольку нет новостей. Сохраните страницу под именем Archive.htm во вложенной папке HTMLs . В свое время на начальной странице мы поместили гиперссылку, ссылающуюся на эту стра ницу.
Итак, новая страница, базирующаяся на шаблоне, создана! Что можно сделать с ней еще?
Если вам вдруг понадобилось изменить шаблон (например, вы обнаружили в нем ошибку), то вы сможете легко вызвать его на редактирование. Для этого выберите пункт Open Attached Template подменю Templates меню Modify или аналогичный пункт контекстного меню. На экране тотчас появится окно документа, где будет открыт этот шаблон.
Иногда возникает необходимость создать страницу, чей дизайн сильно отличается от предоставляемого шаблоном. В этом случае вы можете создать на основе данного шаблона страницу, а потом "отвязать" ее от этого шаблона. Для этого выберите пункт Detach from Template подменю Templates меню Modify. Страница будет "откреплена" от шаблона; и желтый ярлычок, мозолящий вам глаза в правом верхнем углу окна документа, пропадет.
Применение шаблонов к уже созданным 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 . Большую часть этого диалогового окна занимает список, состоящий из двух колонок: в левой отображаются имена изменяемых областей, имеющихся в открытой странице, а в правой — имена изменяемых областей шаблона, куда будет перемещено их содержимое. В нашем случае страница Projects.htm старого сайта не имеет изменяемых областей, поэтому в списке будет присутствовать только один значимый пункт — Document body (тело страницы). В правой колонке списка против этого пункта будет стоять надпись < Not Resolved >, обозначающая, что Dreamweaver не знает, куда поместить содержимое страницы.
Под списком находится раскрывающийся список Move Content to New Region , в котором задается изменяемая область шаблона, куда будет перемещено содержимое страницы. Среди пунктов этого списка будут перечислены все изменяемые области шаблона. Если же вы выберете пункт Nowhere , содержимое страницы будет потеряно. Чтобы переместить содержимое всех изменяемых областей открытой страницы в какую-то одну, чье имя выбрано в списке Move Content to New Region , нажмите кнопку Use for All .
Выделите единственный пункт списка и выберите в раскрывающемся списке Move Content to New Region нужную изменяемую область шаблона, в нашем случае Main . После чего нажмите кнопку ОК для перемещения в нее содержимого страницы или Cancel — для отказа от этого.
Как видите, Dreamweaver прекрасно справился со своей задачей. Теперь вы можете, если хотите, подредактировать содержимое страницы и сохранить ее.
Теперь преобразуем в новый вид страницу Links.htm сайта Sample site 2. Найдите ее в папке HTMLs корневой папки второго сайта, скопируйте его в папку HTMLs нового сайта и откройте в окне документа. Предположим теперь, что панель Assets у вас закрыта.
Выберите пункт Apply Template to Page подменю Templates меню Modify. На экране появится диалоговое окно Select Template, похожее на окно Save as Template . Выберите нужный шаблон в списке Templates и нажмите кнопку ОК. После этого опять появится диалоговое окно Inconsistent Region Names , где вы будете должны выбрать изменяемую область, куда будет помещено содержимое страницы, и еще раз нажать кнопку ОК.
Заметьте, что все параметры страниц Projects.htm и Links.htm (цвет фона, текста и гиперссылок) пропадут после применения к странице шаблона. Точнее, они не пропадут, а станут такими же, как у шаблона, поскольку параметры страниц задаются шаблоном и в отдельных страницах не могут быть изменены.
Как видите, можно очень просто подогнать под один шаблон все существующие у вас Web -страницы. Скопируйте остальные страницы предыдущего (второго) сайта в третий (напомним, что все они содержатся во вложенной папке HTMLs корневой папки сайта) и переделайте их так же, как и страницы Projects.htm и Links.htm . После этого можно считать, что наш новый сайт почти готов.
Но что, если страница, которую вы хотите "подогнать" под шаблон, уже основана на какомто шаблоне? Да ничего сложного! Dreamweaver выполнит за вас львиную часть работы — вам же останется только указать ему, что куда распихивать.
Когда вы применяете шаблон к странице, которая базируется на другом шаблоне, Dreamweaver сравнивает имена изменяемых областей этих двух шаблонов. Если у какихто изменяемых областей, находящихся в разных шаблонах, эти имена равны, то содержимое одной области переносится в другую. Это может вам сильно помочь в том случае, если вы не слишком радикально меняете дизайн своего сайта. Для этого просто создайте в новом шаблоне изменяемые области с теми же именами, что и в старом, а остальное — как говорится, дело техники.
Если же в старом шаблоне встретится изменяемая область, для которой Dreamweaver не найдет "достойной" пары в новом шаблоне, понадобится ваша помощь. В этом случае Dreamweaver выведет на экран диалоговое окно Inconsistent Region Names . Здесь вы должны будете выбрать изменяемую область нового шаблона, куда будет перемещено содержимое изменяемой области старого шаблона, не имеющей пары. После нажатия кнопки ОК все будет сделано в лучшем виде.
Если вы случайно применили к странице не тот шаблон или что-то напутали с изменяемыми областями и их содержимым, Dreamweaver предоставляет вам возможность "отката". Для этого воспользуйтесь "волшебной палочкой" всех изучающих новые программы методом "научного тыка" — комбинацией клавиш < Ctrl >+< Z > или пунктом Undo меню Edit .
А теперь рассмотрим еще один очень важный вопрос. Он касается гиперссылок, используемых в шаблонах, и поддержания их корректности.
