Использование пакета Dreamweaver

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

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

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

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

archive.htm

Pics NAVBAR

spacer.gif

Templates main.dwt

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

HTMLs / Projects.htm

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

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

../HTMLs/Projects.htm

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

Projects.htm

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

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

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

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

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

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

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

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

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

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

Выберите пункт Make Attribute Editable подменю Templates меню Modify. На экране появится диалоговое окно Editable Tag Attributes (Рисунок 9.19).

Экспорт Webстраниц основанных на шаблонах

Экспорт Web-страниц, основанных на шаблонах

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

К сожалению, Dreamweaver позволяет экспортировать только сайт целиком, но никак не отдельную страницу. Хотя, это может быть оправдано. В самом деле, экспортировать стоит лишь уже законченные сайты, когда вносить изменения в страницы уже не нужно. (Вспомните, что шаблоны и были созданы как раз для облегчения создания страниц и внесения в них изменений.) Если же страница не закончена, то ее необходимо прежде всего доделать, а уже потом экспортировать.

Чтобы экспортировать сайт, сначала откройте одну из его страниц в окне документа. Далее выберите пункт Export without Markup в подменю Templates меню Modify. После этого на экране появится диалоговое окно Export Site Without Template Markup (Рисунок 9.16).

Недостатки шаблонов и их преодоление

Недостатки шаблонов и их преодоление

С преимуществами шаблонов мы уже знакомы. Перечислим их еще раз.

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

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

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

Теперь сдобрим эту огромную бочку меда капелькой дегтя: упомянем о недостатках шаблонов.

Недостатков у них всего два, но не очень серьезных. Поэтому наша капля дегтя не так уж и велика.

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

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

Так использовать шаблоны или продолжать все делать вручную? Вы сами должны решить этот вопрос для себя.

Когда мы начинаем делать страницы на основе шаблона, мы теряем часть своей свободы. Готовы ли вы расстаться даже с этой частью? Не окажется ли эта часть для вас слишком велика? Задумайтесь над этими вопросами перед тем, как начать работу над сайтом.

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

Что касается "раздувшегося" HTML-кода... Вы помните, что Dreamweaver MX поддерживает экспорт сайтов с удалением всей специальной разметки? Так что вы можете создать свой сайт на основе шаблонов, а опубликовать на Web-сервере его "очищенную" копию, не содержащую вставленный Dreamweaver HTML-код. Даже пуритане HTML должны быть этим довольны, тем более что шаблоны действительно здорово облегчают работу.

Одним словом, шаблоны — это замечательно!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обновление страниц созданных на основе шаблонов

Обновление страниц, созданных на основе шаблонов

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

Как правило, вам не нужно об этом заботиться. Dreamweaver берет на себя контроль за актуальностью страниц, созданных на основе измененного шаблона. И едва вы сохраните этот шаблон, он сразу переносит все сделанные изменения в соответствующие страницы. При этом на экране появляется диалоговое окно Update Files, показанное на Рисунок 6.14. Вам останется только нажать кнопку Update (рекомендуется) или Don't Update (может иногда пригодиться). Далее на экране появится диалоговое окно со статистикой (сколько страниц было обновлено); закройте его щелчком по кнопке Close.

Но иногда может понадобиться обновить страницы сайта вручную.

Чтобы обновить страницу, открытую в активном окне документа, просто выберите пункт Update Current Page подменю Templates меню Modify. Страница будет тотчас обновлена. Если у вас активна панель Assets, вы также можете выбрать пункт Update Current Page контекстного меню.

Если вы хотите обновить все страницы сайта или все страницы, основанные на каком-либо шаблоне, выберите пункт Update Pages подменю Templates меню Modify или пункт Update Site контекстного или дополнительного меню панели Assets. На экране появится диалоговое окно Update Pages, показанное на Рисунок 6.38. Использование этого диалогового окна описано в главе 5, поэтому здесь ограничимся лишь минимальными рекомендациями. Включите флажок Templates, установите другие параметры и нажмите кнопку Start. После того как Dreamweaver закончит обновление страниц, закройте это окно, нажав кнопку Close.

Вот и все об обновлении страниц.

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

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

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

описание новости в колонке на странице default.htm — их может быть много, но в шаблоне для него создана только одна область.

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

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

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

Применение шаблонов к уже созданным 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 (тело страницы). В правой колонке списка против этого пункта будет стоять надпись , обозначающая, что Dreamweaver не знает, куда поместить содержимое страницы.

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

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

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

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

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

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

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

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

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

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

Кнопка New Template

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

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

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

Вновь созданная изменяемая область

Рисунок 9.10. Вновь созданная изменяемая область

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

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

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

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

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

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

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

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

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

Диалоговое окно New

Рисунок 9.11. Диалоговое окно New Document (вкладка Templates)

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

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

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

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

Только что созданная

Рисунок 9.12. Только что созданная Web-страница, основанная на шаблоне Main

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

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

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

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

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

Изменяемая область

Рисунок 9.13. Изменяемая область на создаваемой странице Archive.htm

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

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

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

Диалоговое окно Inconsistent Region Names

Рисунок 9.14. Диалоговое окно Inconsistent Region Names

Под списком находится раскрывающийся список Move Content to New Region, в котором задается изменяемая область шаблона, куда будет перемещено содержимое страницы. Среди пунктов этого списка будут перечислены все изменяемые области шаблона. Если же вы выберете пункт 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 у вас закрыта.

Готовая страница списка проектов Projects htm

Рисунок 9.15. Готовая страница списка проектов Projects.htm

Выберите пункт 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 предоставляет вам возможность "отката". Для этого воспользуйтесь "волшебной палочкой" всех изучающих новые программы методом "научного тыка" - - комбинацией клавиш + или пунктом Undo меню Edit.

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

Диалоговое окно Export

Рисунок 9.16. Диалоговое окно Export Site Without Template Markup

В поле ввода Folder введите имя и путь папки, куда будет экспортирован ваш сайт. (Эта папка станет корневой для нового сайта.) Также вы можете нажать кнопку Browse и выбрать нужную папку в появившемся на экране диалоговом окне выбора папки.

Если вы хотите экспортировать файлы шаблонов, включите флажок Keep Template Data Files (впрочем, он включен по умолчанию). Если вы перед этим уже экспортировали в выбранную папку сайт, и теперь хотите только обновить его файлы, включите флажок Extract Only Changed Files (он также включен по умолчанию).

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

Кнопка Delete панели Assets

Рисунок 9.17. Кнопка Delete панели Assets

Кнопка Refresh Site List панели Assets

Рисунок 9.18. Кнопка Refresh Site List панели Assets

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

Как уже неоднократно говорилось, шаблоны — неотъемлемая собственность сайта. Конечно, вы можете создать страницу на основе шаблона, находящегося в другом сайте, но этого лучше не делать. Ведь после того, как вы закончите работу над сайтом, откуда был взят шаблон, вы его (сайт) удалите, чтобы освободить место на жестком диске. И страница, созданная на базе этого шаблона, потеряет с ним связь со всеми вытекающими отсюда последствиями. Так что лучше следовать всем известному принципу "все свое несу с собой", т. е. скопировать нужный шаблон в текущий сайт.

Скопировать нужный шаблон можно в окне Проводника Windows или аналогичной программе управления файлами (например, FAR). Но проще сделать это в самом Dreamweaver. Для этого, прежде всего, в панели Site активизируйте сайт, где находится нужный шаблон. Далее откройте панель Assets, если она не открыта, переключитесь на список шаблонов, выберите необходимый шаблон в списке и щелкните по нему правой кнопкой мыши, чтобы открыть контекстное меню. В подменю Copy to Site будут перечислены все введенные в Dreamweaver сайты; просто выберите нужный.

Также Dreamweaver может показать вам, в каком файле сохранен тот или иной шаблон. Для этого выберите пункт Locate in Site контекстного или дополнительного меню. После этого будет активизирована панель Site, в списке файлов которого будет выбран найденный файл шаблона.

Иногда после манипуляций в панели Site Dreamweaver или окне Проводника Windows список шаблонов отображает неверную информацию. В частности, в нем могут быть перечислены уже удаленные шаблоны. Чтобы обновить содержимое списка шаблонов, выберите пункт Refresh Site List контекстного или дополнительного меню или нажмите кнопку Refresh Site List, расположенную в правом нижнем углу панели Assets (Рисунок 9.18).

Диалоговое окно Editable Tag Attributes

Рисунок 9.19. Диалоговое окно Editable Tag Attributes

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

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

Новый пустой шаблон в списке шаблонов

Рисунок 9.2. Новый пустой шаблон в списке шаблонов

Диалоговое окно добавления нового атрибута

Рисунок 9.20. Диалоговое окно добавления нового атрибута

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Диалоговое окно Template Properties

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

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

Шаблон Main с колонкой новостей

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

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

Кнопка Optional Region панели объектов

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

Диалоговое окно New Optional Region

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

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

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



 

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




Содержимое внутренней таблицы разметки

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

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

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

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

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

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

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

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

Кнопка Repeating Region панели объектов

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

Диалоговое окно New Repeating Region

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

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

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

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

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

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

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

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





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





Внутри изменяемой области должен находиться только текст описания новости, без всех форматирующих тегов. (Вставленные 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.

Кнопка Make Template панели объектов

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

Текст описания первой

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

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

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

Готовая главная страница

Рисунок 9.31. Готовая главная страница сайта Sample site 3 с готовой колонкой новостей

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

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

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

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

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

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

Кнопка Repeating Table панели объектов

Рисунок 9.34. Кнопка Repeating Table панели объектов

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

Диалоговое окно Insert Repeating Table

Рисунок 9.35. Диалоговое окно Insert Repeating Table

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

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

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

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

Рисунок 9.36. Табличная повторяющаяся область — комбинация таблицы, повторяющейся области и изменяемых областей

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

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

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

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

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

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

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

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

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

Диалоговое окно Save As Template

Рисунок 9.4. Диалоговое окно Save As Template

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

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

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

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

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

Кнопка Edit панели Assets

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

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

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

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

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

Открытый в окне документа шаблон Main

Рисунок 9.6. Открытый в окне документа шаблон Main

Отредактированный

Рисунок 9.7. Отредактированный шаблон Main (включен режим разметки)

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

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

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

Кнопка Editable Region панели объектов

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

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

Диалоговое окно New Editable Region

Рисунок 9.9. Диалоговое окно New Editable Region

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопки и пункты меню

Таблица 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 или нажатием комбинации клавиш +.

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

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

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

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

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

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

Управление шаблонами в окне шаблонов

Управление шаблонами в окне шаблонов

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

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

Чтобы удалить ненужный шаблон, выберите его в списке и либо нажмите клавишу , либо выберите пункт Delete контекстного или дополнительного меню, либо нажмите кнопку Delete (Рисунок 9.17), расположенную в правом нижнем углу панели. Dreamweaver спросит вас, действительно ли вы хотите удалить этот шаблон; нажмите кнопку Да (Yes) или Нет (No). Если вы нажмете кнопку Да, шаблон будет безвозвратно удален.

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

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

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

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

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

Вы не можете дать изменяемой

Внимание

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

После того, как на основе

Внимание

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

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

А теперь — небольшой сюрприз. Дело в том, что Dreamweaver при создании любого шаблона автоматически создает небольшую изменяемую область doctitie. (Вот поэтому вы и не можете дать изменяемой области имя doctitie — такая изменяемая область уже существует!) Эта изменяемая область включает в себя содержимое тега

J

v

a

'

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

Вот такая анимация...

Диалоговое окно

Рисунок 13.20. Диалоговое окно Set Nav Bar Image (вкладка Basic)

Диалоговое окно

Рисунок 13.21. Диалоговое окно Set Nav Bar Image (вкладка Advanced)

В списке Also Set Image выбирается элемент полосы навигации, вид которого вы хотите изменить.

В поле ввода То Image File вводится имя файла изображения для выбранного в списке Also Set Image элемента. Это изображение будет отображаться, если выбранный в списке элемент находится в "ненажатом" состоянии. Вы также можете щелкнуть кнопку Browse и выбрать нужный файл в диалоговом окне Select File.

Если вы выбрали пункт Over Image or Over While Down Image в раскрывающемся списке When element <названш выделенного элемента> is displaying, то становится доступным также поле ввода If Down, To Image File. В нем задается имя файла изображения, которое будет отображаться, если выбранный в списке пункт находится в "нажатом" состоянии. Также здесь доступна кнопка Browse.

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

Диалоговое окно Set Text of Status Bar

Рисунок 13.22. Диалоговое окно Set Text of Status Bar

Это диалоговое окно содержит единственное поле ввода Message, в котором вводится текст, отображаемый в строке статуса. Введя его, нажмите кнопку ОК.

Вы можете использовать в тексте, отображаемом в строке статуса, любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы вывести посетителю сайта текущую дату, вы можете использовать такой код:

Сегодня {new Date()}

Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Чтобы отобразить в строке статуса текст по умолчанию (он формируется самим Web-обозревателем -- обычно надпись "Готово" или адрес гиперссылки), задайте в диалоговом окне следующий текст:

{window.defaultStatus}

Свойство defaultStatus объекта window как раз и возвращает этот текст по умолчанию.

Диалоговое окно

Рисунок 13.23. Диалоговое окно Show Pop-Up Menu (вкладка Contents)

Чтобы создать новый пункт меню гиперссылок, введите его текст в поле ввода Text. В поле ввода Link вводится интернет-адрес соответствующей

пункту гиперссылки; также вы можете щелкнуть расположенный правее этого поля ввода значок папки и выбрать нужный файл в диалоговом окне Select File. А с помощью раскрывающегося списка Target - задать цель гиперссылки.

Кнопка Indent Item

Рисунок 13.24. Кнопка Indent Item вкладки Contents диалогового окна Show Pop-Up Menu

Результат показан на Рисунок 13.25. В данном случае пункт Links станет единственным пунктом подменю, раскрывающемся при щелчке на пункте Others.

Как видите, пункт Links отображается с отступом; это говорит о том, что он принадлежит подменю.

Подменю в меню гиперссылок

Рисунок 13.25. Подменю в меню гиперссылок

Чтобы вернуть пункт из подменю в основное меню или подменю более высокого уровня, нажмите кнопку Outdent Item (Рисунок 13.26).

Кнопка Outdent Item

Рисунок 13.26. Кнопка Outdent Item вкладки Contents диалогового окна Show Pop-Up Menu

Вкладка Appearance диалогового окна Show Pop-Up Menu (Рисунок 13.27) позволит вам настроить внешний вид меню гиперссылок.

Диалоговое окно

Рисунок 13.27. Диалоговое окно Show Pop-Up Menu (вкладка Appearance)

С помощью раскрывающегося списка, расположенного выше всех остальных элементов управления, вы можете выбрать расположение меню гиперссылок: вертикальное (пункт Vertical Menu) или горизонтальное (Horizontal Menu).

В раскрывающемся списке Font выбирается шрифт, которым набран текст пунктов меню. По умолчанию выбран пункт Default Font, обозначающий шрифт, заданный для выбранного вами в окне документа элемента страницы.

В поле ввода Size задается размер шрифта, которым набран текст пунктов меню.

С помощью кнопок-выключателей вверх и вниз вы можете сделать шрифт пунктов меню соответственно жирным или курсивным.

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

Группа селекторов цвета Up State задает цвета пунктов меню в "ненажатом" состоянии. Селектор цвета Text задает цвет текста, а селектор цвета Cell -цвет фона (фактически — цвет фона ячейки таблицы, которая и создает меню гиперссылок). Аналогично, группа селекторов цвета Down State задает цвета пункта меню, над которым посетитель поместил курсор мыши.

Результаты применения заданных вами параметров вы можете увидеть в расположенной в нижней части диалогового окна панели предварительного просмотра.

Вкладка Advanced диалогового окна Show Pop-Up Menu (Рисунок 13.28) позволит вам задать некоторые дополнительные параметры таблицы, создающей меню гиперссылок.

Поля ввода и раскрывающиеся списки Cell Width и Cell Height задают соответственно ширину и высоту ячеек этой таблицы. Если вы выберете в раскрывающихся списках пункт Automatic, то соответствующий размер будет устанавливаться самим Web-обозревателем. Чтобы самим задать нужный размер, выберите в соответствующем раскрывающемся списке пункт Pixels и введите этот размер в пикселах в поле ввода, расположенное левее.

Поля ввода Cell Padding и Cell Spacing задают соответствующие параметры таблицы.

В поле ввода Text Indent задается величина отступа красной строки в пикселах.

В поле ввода Menu Delay вводится задержка открытия меню и его подменю в миллисекундах.

Включите флажок Show Borders, если хотите, чтобы границы меню и подменю были видимы.

Диалоговое окно

Рисунок 13.28. Диалоговое окно Show Pop-Up Menu (вкладка Advanced)

В поле ввода Border Width вводится толщина границы меню и подменю в пикселах.

Селектор цвета Border Color задает цвет границы меню и подменю. Также вы можете задать цвет "затемненной" стороны границы в селекторе цвета Shadow, а цвет "освещенной" стороны — в селекторе цвета Highlight.

Результаты применения заданных вами параметров вы также можете увидеть в расположенной в нижней части диалогового окна панели предварительного просмотра.

Вкладка Position диалогового окна Show Pop-Up Menu (Рисунок 13.29) позволит вам задать местонахождение меню гиперссылок относительно элемента страницы, к которому оно привязано.

Набор из четырех больших кнопок-переключателей Menu Position позволит вам задать собственно местоположение меню гиперссылок. Эти кнопки заставляют меню появляться соответственно в правом нижнем углу, ниже, выше и в правом верхнем углу элемента, к которому оно привязано. (Порядок перечисления кнопок — слева направо.)

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

Диалоговое окно

Рисунок 13.29. Диалоговое окно Show Pop-Up Menu (вкладка Position)

По умолчанию меню гиперссылок убирается с экрана сразу же после того, как посетитель уберет курсор мыши с элемента страницы, к которому оно привязано. Если вы хотите, чтобы оно оставалось на экране, отключите флажок Hide Menu on onMouseOut Event.

После задания всех параметров меню гиперссылок не забудьте нажать кнопку ОК.

Панель Behaviors

Рисунок 13.3. Панель Behaviors

Большую часть этой панели занимает список уже созданных к этому време,-ни поведений, привязанных к выделенному в окне документов элементу страницы. Наименование тега элемента, к которому привязаны отображаемые в списке поведения (по умолчанию это сама страница), находится выше этого списка. Если вы выделите в окне документа другой элемент, в списке панели тотчас отобразятся привязанные к нему поведения. К сожалению, узнать, к какому элементу страницы привязаны поведения, иным способом нельзя.

Список поведений представляет собой таблицу из двух колонок: Events (событие) и Actions (действие, происходящее в ответ на событие). Вы можете выбрать любое поведение в списке и произвести над ним какие-либо манипуляции.

Если вы поставите текстовый курсор на саму Web-страницу, выделив ее таким образом, то увидите, что в списке уже присутствует одно поведение -

Play Animation, привязанное к событию onLoad. Это поведение было добавлено самим Dreamweaver, когда мы включили флажок Autoplay в панели Timelines. Так что некоторые поведения создаются самим Dreamweaver без вашего ведома.

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

Диалоговое окно ShowHide Layers

Рисунок 13.30. Диалоговое окно Show-Hide Layers

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

Для задания действия же служат три кнопки, расположенные под списком:

Show — показывает свободный элемент (при этом в соответствующей строке списка правее его имени появляется надпись "(show)");

Hide — скрывает свободный элемент (надпись "(hide)");

Default — восстанавливает видимость свободного элемента, заданную при его создании (надпись "(default)").

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

Диалоговое окно Stop Timeline

Рисунок 13.31. Диалоговое окно Stop Timeline

Это диалоговое окно содержит только раскрывающийся список Stop Timeline. В этом списке выбирается анимация, которую нужно остановить. Пункт ** ALL TIMELINES ** позволяет остановить проигрывание всех анимаций, созданных на данной странице. После выбора анимации не забудьте нажать кнопку ОК.

Диалоговое окно Swap Image

Рисунок 13.32. Диалоговое окно Swap Image

Все имеющиеся на странице графические изображения перечислены в списке Images. Выберите нужное. После этого введите имя файла нового изображения в поле ввода Set Source to; также вы можете нажать кнопку Browse и выбрать нужный файл в появившемся на экране диалоговом окне Select File.

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

Если включен флажок Preload Images (а он включен по умолчанию), Dreamweaver создаст еще один сценарий, выполняющий предварительную загрузку нужных файлов изображений. (Фактически для этого он создаст поведение Preload images.) Если вы отключите этот флажок, то сами должны будете выполнить их предзагрузку, либо мириться с задержками при изменении изображений.

Если вы привязываете поведение swap image к событию onMouseOver, то Dreamweaver автоматически создаст поведение swap image Restore, восстанавливающее все изначальные изображения, и привязывает его к событию onMouseOut. Если вы не хотите, чтобы он так делал, отключите флажок Restore Images onMouseOut.

Закончив работу, нажмите кнопку ОК.

Кадр анимации в

Рисунок 13.33. Кадр анимации в канале поведений, к которому привязано поведение

Поведение привязанное

Рисунок 13.34. Поведение, привязанное к кадру анимации, в списке панели Behaviors

Таким образом, вы можете создать сколько угодно поведений, привязанных к кадрам анимации. Чтобы просмотреть поведения, привязанные к какому-либо кадру, просто выберите его в канале поведений панели Timelines. Имейте в виду, что выбирать можно только кадры, помеченные знаком, показанным на Рисунок 13.33. Также вы можете привязать к одному кадру несколько поведений, просто добавив их в список поведений при выбранном кадре.

Вы можете изменить параметры привязанного к кадру анимации поведения, дважды щелкнув по соответствующей строке в списке поведений. Чтобы удалить ненужное поведение, либо удалите его из списка поведений, либо используйте пункт Remove Behavior контекстного меню панели Timelines или одноименный пункт подменю Timeline меню Modify.

Вы можете удивиться, почему автор не использовал для создания поведений пункт Add Behavior контекстного меню панели Timelines. (Кроме того, в подменю Timeline меню Modify есть пункт Add Behavior to Timeline.) Если вы выберете этот пункт, Dreamweaver выведет на экран предупреждение, предлагающее вам воспользоваться для создания поведения тем самым путем, который мы описали. Зачем разработчикам Dreamweaver это понадобилось, непонятно.

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

Сообщение о синтаксической

Рисунок 13.35. Сообщение о синтаксической ошибке Internet Explorer

Логические ошибки — это ошибки в логике работы программы. Программный код выглядит абсолютно правильным, но работает неправильно. Такие ошибки выявить и исправить намного сложнее.

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

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

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

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

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

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

Какие же возможности предлагают нам современные программы-отладчики?

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

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

Просмотр значений переменных. Может пригодиться практически всегда.

Так, с отладчиками вообще мы разобрались. Обратимся теперь к конкретному представителю этого славного семейства - встроенному отладчику Dreamweaver.

Меню событий панели Behaviors

Рисунок 13.4. Меню событий панели Behaviors

Чтобы отобразить в этом меню только события, поддерживаемые какой-либо программой Web-обозревателя, выберите пункт Show Events For. На экране появится небольшое подменю; включите пункт-выключатель, соответствующий нужной программе. Все пункты этого подменю перечислены в табл. 13.4.

Диалоговое окно Play Timeline

Рисунок 13.5. Диалоговое окно Play Timeline

Меню поведений панели Behaviors

Рисунок 13.6. Меню поведений панели Behaviors

Итак, чтобы создать новое поведение, сначала выделите нужный элемент страницы. Вы также можете привязать поведение к самой странице, для чего щелкните по пустому месту на ней или выберите тег в строке тегов. Затем выберите необходимый пункт в меню поведений. После этого на экране появится диалоговое окно задания параметров выбранного вами поведения. Такое окно для поведения Play Timeline показано на Рисунок 13.5. Задайте требуемые параметры и нажмите кнопку ОК. Диалоговые окна задания параметров для других поведений будут рассмотрены ниже.

Кнопка со знаком "минус" позволит вам удалить выбранное в списке поведение. С таким же успехом вы можете нажать клавишу . He забудьте только выделить в окне документа нужный элемент страницы.

Кнопки вверх и вниз перемещают выбранное в списке поведение на позицию вверх или вниз. Дело в том, что если несколько поведений привязано к одному и тому же событию, они выполняются в порядке следования в списке поведений. С помощью кнопок t и -I вы можете изменить этот порядок.

Диалоговое окно Call JavaScript

Рисунок 13.7. Диалоговое окно Call JavaScript

В этом окне находится единственное поле ввода JavaScript, в котором вводится нужный программный код. Это может быть, например, вызов какой-либо функции, написанной вами и помещенной в секцию заголовка страницы, вызов метода, принадлежащего какому-либо элементу или объекту, или иной код. Не забудьте только нажать кнопку ОК после того, как введете этот код.

Диалоговое окно Change Property

Рисунок 13.8. Диалоговое окно Change Property

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

Если выбран переключатель Select, вы сможете выбрать нужное свойство в раскрывающемся списке, находящемся правее этого переключателя. Имейте, однако, в виду, что в этом списке для многих объектов отображаются как свойства самого этого объекта, так и его внутреннего объекта style. Таким образом, вы можете изменить также и значения атрибутов его стиля.

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

NS3 — отображаются только свойства, поддерживаемые Navigator 3.0;

IE3 — Internet Explorer 3.0;

NS4 — Navigator 4.0;

IE4 — Internet Explorer 4.0 (выбран по умолчанию).

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

Осталось ввести новое значение свойства в поле ввода New Value — и можно нажимать кнопку ОК.

Диалоговое окно Check Browser

Рисунок 13.9. Диалоговое окно Check Browser

Интернет-адрес "основной" страницы задается в поле ввода URL. Интернет-адрес "альтернативной" страницы — в поле ввода Alt URL. Конечно, вы можете нажать кнопку Browse, находящуюся правее нужного поля ввода, и выбрать необходимый файл в диалоговом окне Select File.

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

Группа элементов управления Netscape Navigator позволяет задать, на какие страницы будет произведено перенаправление, если посетитель сайта пользуется Navigator. Сама версия Web-обозревателя задается в небольшом поле ввода, называющемся так же - Netscape Navigator. Если версия Web-обозревателя окажется такой же, как вы ввели, или более поздней, осуществляется переход на страницу, заданную в раскрывающемся списке or later. В противном случае переход будет выполнен на страницу, заданную в раскрывающемся списке otherwise.

Раскрывающиеся списки or later и otherwise имеют по три пункта:

Stay on this Page — оставаться на текущей странице;

Go to URL — перейти на "основную" страницу;

Go to Alt URL — перейти на "альтернативную" страницу.

Как видите, все довольно просто.

Точно так же задаются страницы для пользователей различных версий Internet Explorer. Для этого служит группа элементов управления Internet Explorer. Для задания страницы, предназначенной для пользователей других программ Web-обозревателей, используется единственный раскрывающийся список Other Browsers.

По умолчанию Dreamweaver предлагает нам следующее:

пользователей Internet Explorer 4.0 и Navigator 4.0 или более новых версий этих программ — переслать на "основную" страницу;

пользователей более старых версий Internet Explorer 4.0 и Navigator 4.0, а также других программ Web-обозревателей — переслать на "альтернативную" страницу.

Как правило, этих установок бывает достаточно. Вам остается только задать интернет-адреса "основной" и "альтернативной" Web-страниц. И, разумеется, нажать кнопку ОК.

Скрытие меню гиперссылок (Hide PopUp Menu)

Скрытие меню гиперссылок (Hide Pop-Up Menu)

Это поведение скрывает выведенное ранее на экран меню гиперссылок (о создании меню гиперссылок см. ниже). Как правило, Dreamweaver создает его сам, но иногда вам придется делать это самим.

После выбора в меню поведений пункта Hide Pop-Up Menu на экране появится небольшое окно-предупреждение. Закройте его, нажав кнопку ОК. На этом создание поведения Hide Pop-up Menu закончено. Никаких параметров оно не имеет.

Нажатие кнопки Cancel вышеупомянутого окна-предупреждения позволит вам отказаться от создания поведения Hide Pop-Up Menu.

Создание поведений

Создание поведений

Теперь настало время рассмотреть все поведения, предлагаемые нам Dreamweaver, их создание и все их параметры, которые вы можете задать.

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

Имейте только в виду, что здесь приводятся не все поведения, поддерживаемые Dreamweaver. Поведения, служащие для поддержки форм и элементов управления, рассмотрим в главе 16.

Некоторые методы класса Date

Таблица 13.1. Некоторые методы класса Date

	Метод	Описание
	getDate ( )	Возвращает число
	getDay ( )	Возвращает цифру, обозначающую день недели (0 — воскресенье, 1 — понедельник, 2 — вторник и т. д.)
	getFullYear()	Возвращает год
	getHours ( )	Возвращает час
	getMilliseconds ( )	Возвращает миллисекунды
	getMinutes ( )	Возвращает минуты
	getMonth ( )	Возвращает цифру, обозначающую месяц (от 0 до 11)
	getSeconds ( )	Возвращает секунды
	getTime ( )	Возвращает время в виде количества миллисекунд, прошедших с полуночи 1 января 1 970 года

Системный класс Math — другого рода. Он включает набор свойств и методов, реализующих различные математические и тригонометрические функции. Единственный его объект создается самим интерпретатором JavaScript при запуске и уничтожается при завершении работы. Так что вам не нужно самим создавать объекты этого класса. Это как раз типичный случай системного объекта.

var f;

f = Math.sin(Math.PI);

В результате вычисления вышеприведенного выражения в переменной f окажется значение sin (я).

Существуют также системные классы Number и string, служащие для хранения данных соответственно числового и строкового форматов, и несколько других системных классов, используемых значительно реже.

Язык JavaScript имеет одну любопытную особенность. Дело в том, что любая переменная обычного типа данных может быть представлена как объект какого-либо класса. Давайте, например, рассмотрим следующий код:

var s, 1;

s = "JavaScript";

1 = s.length;

Здесь мы сначала помещаем в переменную s строку "JavaScript", а потом вызываем свойство length этой переменной. В таком случае интерпретатор

считает переменную s объектом класса string и беспрепятственно "пускает" нас к свойству length этого класса, возвращающему длину строки текста, которую мы и помещаем в переменную 1.

Аналогичный "финт" можно проделать и с числовой величиной:

var a, s;

а = 16765247;

s = a.toString();

Здесь вызываем метод toString класса Number, возвращающий строковое представление числа.

Раньше говорилось, что, помимо интерпретатора JavaScript, системные классы могут представляться также и другими программами. К числу этих самых "других" программ относится Web-обозреватель. Его классы и системные объекты — это что-то особенное...

Поведения поддерживаемые Dreamweaver

Таблица 13.2. Поведения, поддерживаемые Dreamweaver

	Название в терминологии Dreamweaver	Описание
	Call JavaScript	Вызов фрагмента JavaScript-кода или функции, написанной на JavaScript
	Change Property	Изменение значения свойства какого-либо объекта
	Check Browser	Перенаправление посетителей на разные Web-страницы в зависимости от программы Web-обозревателя
	Check Plugin	Перенаправление посетителей на разные Web-страницы в зависимости от того, установлен ли у них нужный модуль расширения Web-обозревателя
	Control Shockwave or Flash	Управление проигрыванием фильма Shockwave или Flash
	Drag Layer	Позволяет посетителю перетаскивать свободно позиционируемый элемент страницы с места на место
	Go to Timeline Frame	Перемещение к заданному кадру анимации
	Go to URL	Перенаправление посетителей на другую Web-страницу
	Hide Pop-Up Menu	Скрытие меню гиперссылок, выведенного ранее на экран с помощью поведения Show Pop-Up Menu
	Jump Menu	Привязывается самим Dreamweaver при создании раскрывающегося списка гиперссылок. Пользователю обычно не нужно создавать это поведение самому
	Jump Menu Go	Привязывается самим Dreamweaver при создании раскрывающегося списка гиперссылок к кнопке Go (Перейти). Пользователю обычно не нужно создавать это поведение самому
	Open Browser Window	Открытие какой-либо Web-страницы в новом окне Web-обозревателя
	Play Sound	Проигрывание аудиофайла
	Play Timeline	Запуск проигрывания анимации
	Popup Message	Вывод окна-предупреждения с заданным текстом и кнопкой ОК
	Preload Images	Загрузка из файлов графических изображений. Эти изображения могут использоваться затем для вывода на страницу в качестве ответа на событие
	Set Nav Bar Image	Создается самим Dreamweaver при создании полосы навигации. Пользователю обычно не нужно создавать это поведение самому

	Set Text of Frame	Помещение какого-либо текста во фрейм
	Set Text of Layer	Помещение какого-либо текста в свободно позиционируемый элемент
	Set Text of Status Bar	Помещение какого-либо текста в строку статуса окна Web-обозревателя
	Set Text of Text Field	Помещение какого-либо текста в поле ввода
	Show Pop-Up Menu	Вывод на экран меню гиперссылок, например, в ответ на помещение посетителем страницы курсора мыши над каким-либо элементом страницы
	Show-Hide Layers	Показ или скрытие свободно позиционируемого элемента
	Stop Timeline	Остановка проигрывания анимации
	Swap Image	Замена одного графического изображения другим
	Swap Image Restore	Восстановление изначально присутствовавшего на странице графического изображения после его замены с помощью поведения Swap Image
	Validate Form	Проверка введенных в форму данных на правильность (о формах см. главу 16)

Осталось привести список поддерживаемых Dreamweaver событий (табл. 13.3). Имейте, однако, в виду, что это не полный список поддерживаемых событий — некоторые события используются достаточно редко, и поэтому описываться здесь не будут.

События поддерживаемые Dreamweaver

Таблица 13.3. События, поддерживаемые Dreamweaver

	Название	Описание
	onAbort onBlur onChange onClick	Наступает, когда пользователь останавливает загрузку Web-страницы, например, нажав кнопку Останов Наступает, когда элемент управления или сама страница теряет фокус ввода Наступает, когда посетитель изменяет значение элемента управления Наступает при щелчке мышью по элементу страницы или по самой странице

	onDblClick	Наступает при двойном щелчке мышью по элементу страницы или по самой странице
	onError	Наступает при возникновении ошибки при загрузке страницы, графического изображения или внедренного элемента
	onFocus	Наступает, когда элемент управления или сама страница получает фокус ввода
	onHelp	Наступает, когда пользователь вызывает интерактивную справку Web-обозревателя
	onKeyDown	Наступает при нажатии клавиши клавиатуры
	onKeyPress	Наступает при нажатии и отпускании клавиши клавиатуры
	onKeyUp	Наступает при отпускании клавиши клавиатуры
	onLoad	Наступает по окончании загрузки страницы, графического изображения или внедренного элемента
	onMouseDown	Наступает при нажатии кнопки мыши
	onMouseMove	Периодически наступает при перемещении курсора мыши над элементом страницы или над самой страницей
	onMouseOut	Наступает при "уводе" курсора мыши с элемента страницы
	onMouseOver	Наступает, когда курсор мыши "заходит" на элемент страницы
	onMouseUp	Наступает при отпускании кнопки мыши
	onMove	Наступает при перемещении окна Web-обозревателя
	onReset	Наступает, когда посетитель нажимает кнопку Сброс формы
	onResize	Наступает при изменении размеров окна Web-обозревателя
	onScroll	Наступает при прокрутке содержимого страницы или ее элемента посетителем
	onSelect	Наступает при выделении текста в поле ввода
	onSubmit	Наступает, когда посетитель нажимает кнопку Отправить формы, запуская отправку данных
	onUnload	Наступает, когда посетитель покидает текущую Web-страницу

На этом закончим наше затянувшееся вступление. Пора переходить к работе над поведениями в Dreamweaver.

Пункты подменю Show Events For меню событий

Таблица 13.4. Пункты подменю Show Events For меню событий

	Пункт подменю	Отображаемые события
	3.0 and Later Browsers	Internet Explorer и Navigator, версии 3.0 и более поздние
	4.0 and Later Browsers	Internet Explorer и Navigator, версии 4.0 и более поздние
	IE 3.0	Interhet Explorer 3.0
	IE 4.0	Internet Explorer 4.0
	IE 5.0	Internet Explorer 5.0
	IE 5.5	Internet Explorer 5.5
	IE 6.0	Internet Explorer 6.0
	Netscape 3.0	Navigator 3.0
	Netscape 4.0	Navigator 4.0
	Netscape 6.0	Navigator 6.0

Dreamweaver также предоставляет вам возможность изменить параметры выбранного в списке поведения. Для этого просто дважды щелкните по нему мышью, после чего на экране появится диалоговое окно задания параметров соответствующего поведения. Например, для поведения play Timeline такое окно выглядит так, как на Рисунок 13.5. В раскрывающемся списке Play Timeline выберите нужную анимацию и не забудьте нажать кнопку ОК для сохранения сделанных изменений или Cancel — для отказа от них.

Управление фильмом Shockwave или

Управление фильмом Shockwave или Flash (Control Shockwave or Flash)

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

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

Dreamweaver предоставляет вам возможность управлять фильмом в формате Shockwave или Flash из обработчика того или иного события. Для этого используется поведение Control Shockwave or Flash. Для создания такого поведения выберите одноименный пункт меню поведений. Диалоговое окно Control Shockwave or Flash, показанное на Рисунок 13.11, позволит вам задать параметры этого поведения.

Перед тем как создать меню

Внимание

Перед тем как создать меню гиперссылок, дайте элементу страницы, к которому оно привязывается, уникальное имя.
Выберите в меню поведений пункт Show Pop-Up Menu. На экране появится диалоговое окно Show Pop-Up Menu (Рисунок 13.23).

в этом случае верен своему

Внимание

Dreamweaver и в этом случае верен своему кредо!.. Если вы введете русский текст в поле ввода Text, он будет искажен до неузнаваемости. Поэтому либо задавайте для пунктов меню гиперссылок только английский текст, либо правьте сам JavaScript-код вручную.
Вы можете не вводить данные в поле ввода Link. В этом случае пункт меню не будет гиперссылкой и, соответственно, не будет реагировать на щелчки мышью. Таким образом вы можете создавать, например, разделители.

Все созданные вами к данному времени пункты меню гиперссылок отображаются в списке, занимающем большую часть вкладки Contents. Этот список состоит из трех колонок: Text (текст пункта меню), Link (интернет-адрес гиперссылки) и Target (цель гиперссылки). Вы можете выбрать любой пункт в этом списке и выполнить над ним различные манипуляции.

Чтобы создать новый пункт, нажмите кнопку со знаком "плюс", расположенную над списком пунктов, и задайте в полях ввода Text, Link и раскрывающемся списке Target нужные данные.

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

Чтобы удалить ненужный пункт, выберите его в списке пунктов и нажмите кнопку со знаком "минус", расположенную над этим списком.

Кнопки вверх и вниз позволят переместить выбранный вами пункт на позицию вверх или вниз соответственно.

Вы также можете создавать вложенные меню. Для этого создайте пункт основного меню, при щелчке на котором будет открываться подменю, причем не вводите ничего в поле ввода Link. Далее создайте первый пункт подменю и поместите его точно перед созданным ранее пунктом. Теперь вам останется нажать кнопку Indent Item (Рисунок 13.24).

При создании на странице меню

Внимание

При создании на странице меню гиперссылок Dreamweaver помещает в корневую папку сайта файл mm_menu.js, содержащий необходимые сценарии, и графическое изображение arrows.gif. Не удаляйте их! И не забудьте поместить их на Web-сервер.

Создавать поведение Swap image Restore

Внимание

Создавать поведение Swap image Restore можно только после создания поведения Swap Image.

Для того чтобы запустить отладчик

Внимание

Для того чтобы запустить отладчик Dreamweaver, вы должны иметь на своем компьютере установленную виртуальную машину Java фирмы Microsoft. Будьте внимательны: в составе Windows XP эта виртуальная машина не поставляется — вам самим придется загружать ее с сайта этой фирмы.

После загрузки и запуска отладчика Dreamweaver выведет небольшое предупреждение с кнопкой ОК и флажком Don't show me this message again. Это предупреждение предлагает вам установить точки останова и запустить отладку. Закройте это окно, нажав ОК; вы можете перед этим включить флажок Don't show me this message again, если больше не хотите его видеть.

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

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

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

Чтобы установить точку останова, поставьте текстовый курсор на нужной строке программного кода (кода JavaScript, а не HTML) и нажмите клавишу . Вы также можете выбрать пункт Set/Remove Breakpoint в контекстном меню или нажать одноименную кнопку инструментария отладчика. Точка останова обозначается специальным маркером — небольшим красным кружком, стоящим на серой полосе с номерами строк напротив соответствующей строки кода.

Если вы случайно ошиблись и поставили точку останова не там, поставьте на строке, где стоит точка останова, текстовый курсор и снова нажмите клавишу , кнопку Set/Remove Breakpoint или пункт в контекстном меню. Вы также можете убрать одновременно все точки останова в коде, нажав кнопку Remove All Breakpoints или выбрав в контекстном меню одноименный пункт.

Расставив точки останова, можно запускать код на выполнение. Для этого нажмите кнопку Run инструментария отладчика или клавишу . Кнопка Stop Debugging позволит вам отключить отладчик и продолжить выполнение JavaScript-кода без него.

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

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

Вы также можете использовать кнопки Step Over, Step Into и Step Out инструментария отладчика для пошагового выполнения кода, выражение за выражением.

Нажатие кнопки Step Over или клавиши вызывает простой переход на следующее выражение.

Кнопка Step Into (нажатие клавиши ) аналогична Step Over за одним исключением. Если следующее выражение программного кода является вызовом функции, то далее начнет выполняться первое выражение кода функции, т. е. вы как бы "зайдете" в функцию. Имейте в виду, что "зайти" таким образом можно только в функции, созданные самим программистом.

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

Теперь обратимся к списку переменных, находящемуся в нижней части окна отладчика. Вы видите, что этот список, как и многие списки Dreamweaver, представляет собой таблицу, состоящую из двух колонок. В первой колонке - Variable Name — отображается имя переменной или свойства, а во второй - Value — его значение. Вы можете выделить любую строку в списке и выполнить над ней некоторые действия.

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

Также вы можете изменить имя переменной (свойства) или его значение. Для этого выберите нужную строку в списке и щелкните мышью по значению в колонке Variable Name или Value. После этого введите новое имя или значение в появившееся в строке поле ввода и нажмите клавишу .

Чтобы закончить отладку, либо закройте окно отладчика и окно Web-обозревателя, либо нажмите кнопку Stop Debugging. В первом случае выполнение всех сценариев будет прервано, а сам Web-обозреватель — выгружен, а во втором — выполнение продолжится без отладчика.

Когда будете изменять событие или

Внимание

Когда будете изменять событие или параметры поведения, не забудьте выделить в окне документа нужный элемент страницы.
В верхней части панели Behaviors находятся четыре кнопки: +, —, вверх и вниз. Давайте рассмотрим их по очереди.

Кнопка со знаком "плюс" позволит вам создать новое поведение. При ее нажатии на экране появляется довольно большое меню поведений (Рисунок 13.6), в котором можно выбрать нужное поведение. Некоторые из пунктов этого меню могут быть недоступными; это обычно означает, что в данный момент времени на странице нет необходимых элементов. Также некоторые поведения могут "прятаться" в подменю, например поведения, управляющие анимациями, находятся в подменю Timeline.

С помощью пунктов уже знакомого вам подменю Show Events For, находящегося в этом же меню, можно задать, поддерживаемые каким Web-обозревателем события будут отображаться в меню событий. Пункты этого подменю перечислены в табл. 13.4. Чтобы вывести нужный набор событий, просто выберите соответствующий пункт-выключатель.

обозревателя сейчас считается дурным тоном.

Внимание

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

Восстановление всех изначальных

Восстановление всех изначальных изображений (Swap Image Restore)

Если вы хотите после вызова поведения swap image восстановить изображения, отображавшиеся на странице изначально, создайте поведение Swap image Restore. Для этого выберите пункт Swap Image Restore меню поведений. На экране появится небольшое окно-предупреждение; нажмите кнопку ОК, чтобы закрыть его. Нажатие кнопки Cancel позволит вам отказаться от создания этого поведения.

Встроенный отладчик Dreamweaver

Встроенный отладчик Dreamweaver

Чтобы вызвать встроенный в Dreamweaver отладчик JavaScript-кода, нажмите комбинацию клавиш + или ++. Первая комбинация запускает отладку в первичном Web-обозревателе, а вторая -во вторичном. (О первичном и вторичном Web-обозревателях см. главу 2.) Также вы можете выбрать нужный пункт в подменю Debug in Browser меню File или меню кнопки Preview/Debug in Browser инструментария документа . После этого нажмите кнопку ОК в нескольких появившихся на экране окнах-предупреждениях, чтобы собственно запустить отладчик. И подождите некоторое время, пока все это загрузится и запустится.

Вывод на экран меню гиперссылок (Show PopUp Menu)

Вывод на экран меню гиперссылок (Show Pop-Up Menu)

В последнее время в моду вошли меню гиперссылок, раскрывающиеся после наведения курсора мыши на какой-либо элемент Web-страницы или щелчка по нему. Родоначальником этой моды, вероятно, были Web-дизайнеры, разрабатывавшие сайт фирмы Microsoft, после чего меню "разбежались" по другим сайтам и страницам. Разумеется, разработчики Dreamweaver не могли пройти мимо этого и ввели в свое детище возможность создания такого меню с помощью поведения show Pop-up Menu и привязки его к любому элементу страницы.

Вывод предупреждения (Popup Message)

Вывод предупреждения (Popup Message)

Очень часто для сообщения пользователю о чем-либо (например, необходимости ввести данные в поле ввода на странице) используются окна-предупреждения. Они представляют собой обычное стандартное предупреждение Windows: небольшое окно с текстом предупреждения, изображением восклицательного знака и кнопкой ОК. Для вывода такого предупреждения вы можете воспользоваться поведением Popup Message. Выберите одноименный пункт меню поведений, после чего на экране появится диалоговое окно Popup Message (Рисунок 13.18).

Вывод текста в строке статуса

Вывод текста в строке статуса окна Web-обозревателя (Set Text of Status Bar)

Dreamweaver также позволяет вам вывести любой текст в строке статуса текущего окна Web-обозревателя. Это может быть использовано, например, для показа краткого описания гиперссылки, над которой находится курсор мыши, или просто краткого описания текущей страницы сайта. (Иногда в статусной строке выводится текущее время, "ползущий" справа налево либо "вырастающий" слева направо текст или другие чудеса.) Выберите пункт Set Text of Status Bar в подменю Set Text меню поведений. На экране появится диалоговое окно Set Text of Status Bar, показанное на Рисунок 13.22.

Вызов JavaScriptкода (CallJavaScript)

Вызов JavaScript-кода (CallJavaScript)

Если вы хотите, чтобы в ответ на какое-либо событие, произошедшее в том или ином элементе страницы, выполнялся некий JavaScript-код, создайте для этого элемента поведение Call JavaScript. Для этого вызовите одноименный пункт меню поведений. После этого на экране появится диалоговое окно Call JavaScript, показанное на Рисунок 13.7.

Webсценарии — подход Dreamweaver Поведения

Web-сценарии — подход Dreamweaver. Поведения

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

Но разработчики Dreamweaver решили облегчить жизнь начинающих Web-программистов. Для этого они ввели понятие поведения (по-английски -behavior) — заранее определенного действия, которое будет происходить в ответ на какое-либо событие, произошедшее внутри или вне системы. Dreamweaver поддерживает достаточный набор таких поведений, который покроет практически все потребности начинающего, да и опытного Web-дизайнера. Работа с поведениями в среде Dreamweaver осуществляется так же просто, как и с анимациями — щелчками мыши и нажатиями клавиш клавиатуры.

Когда вы задаете какое-либо поведение для того или иного элемента страницы, Dreamweaver автоматически создает необходимый для этого набор Web-сценариев и помещает его в HTML-код страницы. Это делается незаметно от пользователя; пользователь просто работает со списком созданных им поведений, отображаемым в специальном списке. Таким образом, Dreamweaver дает возможность прикоснуться к Web-программированию даже тем Web-дизайнерам, которые не знают ни языка JavaScript, ни объектной модели документа.

Все поведения, поддерживаемые Dreamweaver, приведены в табл. 13.2.

Зачем нужны Webсценарии

Зачем нужны Web-сценарии

Web-сценарии могут быть применены везде, где не может быть использован "чистый" HTML, т. е. там, где элементы страницы должны вести себя так, как стандартом HTML не предусмотрено.

Возьмем ту же самую анимацию. За очень небольшим исключением (например, нестандартный тег , поддерживаемый Internet Explorer), элементы страницы не могут по ней двигаться. Если вам все же нужно, чтобы они двигались, не обойтись без применения Web-сценариев. Зная язык JavaScript, вы с легкостью реализуете нужное поведение элементов, заставите их летать с требуемой скоростью и по желаемой траектории. HTML такое не может.

Очень часто Web-сценарии используются для изменения содержимого Web-страницы или даже для создания нового содержимого в ответ на действия пользователя. В частности, при наведении курсора мыши на гиперссылку рядом с ней может появляться краткое описание, либо изображение-гиперссылка может менять свой вид. (Кстати, такие "горячие" изображения, меняющиеся при наведении на них курсора мыши, мы уже создавали в главе 3 при помощи Dreamweaver. Такие "фокусы" реализуются также с помощью Web-сценариев.) Иногда содержимое Web-страницы корректируется сразу же в процессе ее загрузки Web-обозревателем, что достигается помещением в HTML-код сценариев, исполняющихся при загрузке.

Вообще, фантазия Web-дизайнера, решившего создать интерактивную Web-страницу с использованием Web-сценариев, почти ничем не ограничена. (Ограничения, конечно, существуют, но их очень мало, и касаются они, в основном, доступу к содержимому дисков клиентского компьютера.) В настоящее время существуют даже Web-страницы, содержимое которых может изменяться самим пользователем прямо в окне Web-обозревателя. (Другой вопрос: зачем это нужно?..) На страницах может отображаться, например, текущее время, причем, "часики" действительно будут "тикать". Также Web-сценарии часто используются для правильного размещения на странице свободно позиционируемых элементов. В частности, можно создать свободный элемент, который при любых изменениях размеров окна Web-обозревателя всегда будет находиться в его центре.

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

Ну и, конечно, Web-сценарии применяются для написания настоящих программ, использующих в качестве интерфейса Web-страницы. Известны, например, игры "15", "Лото", различные головоломки и викторины, созданные на основе Web-сценариев и размещенные в Интернете. Часто таким же образом создаются и более серьезные программы, например, утилиты подбора цветов для Web-страниц или даже целые Web-редакторы, конечно, не очень сложные.

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

Web-программы имеют только два недостатка. Во-первых, они доступны только после подключения к Интернету. (Хотя, конечно, их можно распространять на дискетах, CD, по электронной почте и другими путями.) Во-вторых, из-за ограничений интерпретатора JavaScript с помощью таких программ невозможно сохранение документов на дисках клиентского компьютера.

Задание нового содержимого фрейма (Set Text of Frame)

Задание нового содержимого фрейма (Set Text of Frame)

Dreamweaver позволяет вам поместить новое содержимое в любой из фреймов текущего набора. Для этого выберите пункт Set Text of Frame в подменю Set Text меню поведений. На экране появится диалоговое окно Set Text of Frame.

В раскрывающемся списке Frame выбирается фрейм, в который вы хотите поместить новое содержимое. Само содержимое в виде HTML-кода вводится в область редактирования New HTML. Вы также можете нажать кнопку Get Current HTML, чтобы скопировать в эту область редактирования текущее содержимое фрейма, после чего внести необходимые изменения. Если вы включите флажок Preserve Background Color, Web-сценарий, обновляющий содержимое фрейма, сохранит цветовые настройки текста и фона;

в противном случае эти настройки пропадут. Задав нужные настройки, нажмите кнопку ОК.

Вы можете использовать в HTML-коде нового содержимого фрейма любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы вывести посетителю сайта текущую дату, вы можете использовать такой код:

Сегодня {new Date()}

Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Задание нового содержимого

Задание нового содержимого

свободно позиционируемого элемента (Set Text of Layer)
Dreamweaver позволяет вам поместить новое содержимое в любой из свободно позиционируемых элементов, имеющихся на странице. Для этого выберите пункт Set Text of Layer в подменю Set Text меню поведений. На экране появится диалоговое окно Set Text of Layer

В раскрывающемся списке Layer выбирается свободный элемент, в который вы хотите поместить новое содержимое. Само содержимое в виде HTML-кода вводится в область редактирования New HTML, Задав нужные настройки, нажмите кнопку ОК.

Вы можете использовать в HTML-коде нового содержимого свободного элемента любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы вывести посетителю сайта текущую дату, вы можете использовать такой код:

Сегодня {new Date()}

Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Запуск проигрывания анимации (Play Timeline)

Запуск проигрывания анимации (Play Timeline)

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

Диалоговое окно Play Timeline показано на Рисунок 13.5. Оно содержит один-единственный раскрывающийся список, называющийся Play Timeline. В нем выбирается анимация, которую нужно проиграть, после чего нажимается кнопка ОК. Как видите, все очень просто.

Использование пакета Dreamweaver

Базовый интернетадрес

Базовый интернет-адрес

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

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

Чтобы поместить на страницу метатег базового интернет-адреса, выберите пункт Base подменю Head Tags меню Insert. Также вы можете нажать кнопку Base (Рисунок 14.8), находящуюся на вкладке Head панели объектов. На экране появится диалоговое окно Base, показанное на Рисунок 14.9.

Echo

echo

Директива echo помещает в HTML-код содержимое одной из встроенных переменных Web-сервера. Она имеет такой синтаксис:

" -- >

В качестве значения атрибута var задается имя нужной переменной. Встроенные переменные, поддерживаемые большинством Web-серверов, перечислены в табл. 14.3.

Include

include

Директива include вставляет в содержимое текущего файла содержимое другого. (Эта директива также называется серверным включением, а файл, содержащий включаемый фрагмент кода, — файлом включения). Вставка осуществляется в то место файла, где встретилась эта директива. Записывается она так:

" —>

или так:

" —>

В первом случае <Имя файла> представляет собой обычное имя файла, заданное с учетом особенностей файловой системы серверного компьютера. Например, так:



В данном случае в текущий файл вставляется содержимое файла header.inc, находящегося в папке Inetpub\wwwroot\includes на диске С.

Во втором случае файл <имя файла> ищется относительно корневой папки сайта. Также он может находиться на другом Web-сайте; в этом случае в качестве значения атрибута virtual указывается полный интернет-адрес этого файла.



В данном случае файл header.inc располагается в папке htmls/includes, вложенной в корневую папку сайта.

http://www.othersite.ru/includes/header.inc" .—>
А в этом случае файл header.inc находится вообще на другом сайте.

Существует негласное правило: все файлы включений должны иметь расширение inc (от англ, include — включение). Хотя не возбраняются другие расширения. Также, если у вас имеется достаточно много файлов включений, лучше всего поместить их в особую папку, например includes. В противном случае можно оставить их в той же папке, где находятся все Web-страницы.

Как использовать серверные директивы

Как использовать серверные директивы

А сейчас давайте поговорим, как можно использовать серверные директивы.

Ну, насчет директивы echo все ясно. Используйте ее, если на страницу нужно поместить текущую дату или имя файла страницы. Для этого достаточно подставить в качестве значения атрибута var имя соответствующей переменной.

А вот как можно использовать директиву include? Для разделения кода Web-страниц на отдельные части. Зачем это нужно?

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

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

Недостаток первый: очень медленная загрузка. Web-обозреватель не может вывести на экран таблицу, пока не загрузит ее целиком. А если таблица довольно велика, а канал связи с Интернетом достаточно нетороплив, загрузка может продолжаться очень долго.

Недостаток второй: большой объем получающегося HTML-кода. В самом деле, вспомните, какие размеры были у страниц, созданных на основе табличного дизайна! Сравните их со страничками сайта, основанного на фреймах! Отчасти это происходит из-за того, что сам код, создающий таблицу, очень велик — это плата за гибкость. Но основная причина этого другая: при использовании табличного дизайна каждая страница включает в себя все повторяющиеся элементы (заголовок, полоса навигации, сведения об авторских правах), которые во втором случае "вынесены" в отдельные фреймы, т. е. размер HTML-кода еще больше увеличивается.

Недостаток третий, свойственный не самим таблицам, а табличному дизайну: каждая страница содержит все стандартные, повторяющиеся элементы оформления. А теперь представьте, что вам нужно слегка изменить стандартное примечание, а страниц в вашем сайте добрая сотня. Что делать? Открывать каждую из них и вручную править текст? А если вы пропустите какую-нибудь из них? А если забудете сохранить при закрытии? Уже не стоит говорить о том, что перелопатить вручную такое количество страниц трудно чисто физически.

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

Так как же решить эту проблему? И есть ли у нее решение?

Есть.

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

Поясним вышесказанное на примере. Давайте для примера создадим страничку, код которой приведен ниже.



<ТITLЕ>Страница









Страница 3

Страница 1	Это основное содержимое страницы.
Страница 2
Страница 4

Сохраните этот код в файле 14.1.htm и откройте его в Web-обозревателе. Вы увидите нечто, похожее на Рисунок 14.21.

Эта страница сделана на основе табличного дизайна. Значит, она содержит все повторяющиеся элементы. Давайте вынесем их в другие файлы.

Как работают поисковые агенты

Как работают поисковые агенты

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

Поисковые агенты, как правило, пишутся на заказ очень опытными и знающими программистами. Хороший поисковый агент — настоящее произведение программистского искусства. Он должен отсекать несуществующие адреса, правильно опознавать HTML-теги, "интеллектуально" создавать описания и при этом быстро работать. Сами понимаете: Сеть велика, а времени всегда не хватает...

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