Изменяемые атрибуты
Dreamweaver MX позволяет вам сделать некоторые атрибуты любых тегов HTML -кода шаблона изменяемыми. Вы можете изменять значения этих атрибутов в страницах, созданных на основе шаблона, содержащего этот тег. Например, вы можете менять цвет фона тех или иных страниц или цвет какой-либо надписи.
Чтобы сделать какойто атрибут тега изменяемым, сначала откройте в окне документа нужный шаблон. После этого выберите элемент страницы, атрибут тега которого вы хотите сделать изменяемым. Пусть, например, это будет заголовок нашего сайта (текст "Иван Иванович Иванов" в верхней части страницы). Выделите весь заголовок или просто щелкните по тегу < font > в секции тегов. Теперь все готово.
Выберите пункт Make Attribute Editable подменю Templates меню Modify . На экране появится диалоговое окно Editable Tag Attributes .
В раскрывающемся списке Attribute выберите нужный атрибут (впрочем, там он один — color ). Если же вы его там не найдете, нажмите кнопку Add , введите в единственном поле ввода диалогового окна добавления нового атрибута имя нужного атрибута и нажмите кнопку ОК. Чтобы сделать выбранный атрибут изменяемым, включите флажок Make Attribute Editable . После этого станет доступной группа элементов управления, находящаяся ниже.
В поле ввода Label введите имя созданного изменяемого атрибута. Вообщето, Dreamweaver создаст его сам, и нам в большинстве случаев не придется вводить его самим.
Раскрывающийся список Туре задает тип значения атрибута. В нем доступны пять пунктов:
Text — текстовое значение, строка;
URL — интернет-адрес;
Color — значение цвета;
True / False — значение типа "да-нет";
Number — числовое значение.
Выберите пункт Color , т. к. атрибут color тега < font > задает именно цвет шрифта.
В поле ввода Default введите значение изменяемого атрибута по умолчанию. Dreamweaver сам подставит туда текущее значение атрибута выбранного вами тега, но вы, конечно, можете его изменить.
Закончив ввод данных, нажмите кнопку ОК. Если вы передумали делать атрибут изменяемым, нажмите кнопку Cancel .
Теперь сохраните шаблон и закройте его. Dreamweaver выведет диалоговое окно Update Files ; нажмите кнопку Update , чтобы обновить все созданные на основе этого шаблона Web -страницы.
Теперь давайте откроем какую-нибудь Web -страницу, основанную на этом шаблоне, и изменим значение только что созданного атрибута. Пусть это будет страница Links.htm .
Чтобы задать значение изменяемого атрибута, выберите пункт Template Properties в меню Modify . На экране появится диалоговое окно Template Properties .
Большую часть данного окна занимает список изменяемых атрибутов, заданных в шаблоне, на основе которого создана эта страница. В левой колонке списка отображается имя атрибута, а в правой — его текущее значение. Если вы выберете какой-либо атрибут в списке, под ним появятся элементы управления, с помощью которых вы сможете задать его новое значение. В нашем случае это будет селектор цвета color .
Задайте для атрибута color темно-красный цвет шрифта. После этого нажмите кнопку ОК. И посмотрите на результат. Нет смысла приводить здесь рисунок, т. к. черно-белая иллюстрация не передает цвет. Но, если вы все сделали правильно, шрифт заголовка должен стать темно-красным.
Необязательные области
Эх, ну до чего же хорош Dreamweaver MX ! Что он позволяет сделать! Другие программы Web -дизайнеров, да и старые версии Dreamweaver ему и в подметки не годятся!..
Вы спросите: что это автор так расхваливает этот Dreamweaver , который и так уже у вас в печенках сидит? Ну нравится он автору, и ничего не поделаешь.
Давайте еще раз посмотрим на страницы нашего нового сайта Sample site 3. Вроде, все неплохо. Почти все страницы созданы на основе шаблона Main . Это хорошо: нам не нужно вносить исправления во все повторяющиеся элементы на всех страницах сайта — это сделает за нас Dreamweaver . Уже одно это — повод для восхищения этой замечательной программой.
Но одна страница нашего сайта не основана на шаблоне. Да-да, она самая — главная страница default.htm . Она сильно отличается от остальных тем, что содержит колонку новостей, которой нет в шаблоне. Вносить эту колонку в шаблон смысла нет — на остальных страницах она отсутствует. А даже если мы это сделаем, на страницах сайта появится дополнительный HTML -код, увеличивающий размер файлов и — абсолютно ненужный.
Вот если бы имелась возможность создавать необязательные области, которые, в зависимости от некоего условия, присутствовали бы или не присутствовали бы на странице...
Но такая возможность есть! Она появилась именно в Dreamweaver MX . Он может создавать необязательные области (они так и называются), которые могут либо быть, либо не быть. И ответ на риторический вопрос "быть или не быть" даете вы.
Давайте создадим необязательную область, которая будет содержать колонку новостей. Для этого откроем шаблон Main в окне документа. Изменим размеры ячейки основного содержимого, чтобы справа осталось место под колонку новостей. Поместим в нее новую таблицу разметки с тремя ячейками, расположенными вертикально; они будут содержать соответственно заголовок, собственно новости и ссылку на страницу архива новостей. Как это сделать, вы уже знаете, а если забыли, посмотрите главу 8. Далее поместим в ячейки заголовка и ссылки на страницу архива новостей соответствующий текст, а ячейку новостей оставим пустой.
Теперь поместим всю таблицу разметки, в которой находится колонка новостей, в необязательную область. Для этого сначала выделим эту таблицу. Далее нажмем кнопку Optional Region на вкладке Templates панели объектов. Также можно выбрать пункт Optional Region подменю Template Objects меню Modify или одноименный пункт подменю Templates контекстного меню. На экране появится диалоговое окно New Optional Region .
В поле ввода Name введем имя создаваемой необязательной области — News . Отключим флажок Show by Default , т. к. мы не хотим, чтобы она отображалась по умолчанию. И нажмем кнопку ОК. Скорее всего, вам придется подредактировать HTML -код. Проверьте — он должен выглядеть так (служебные комментарии, созданные Dreamweaver для выделения необязательной области, выделены полужирным шрифтом):
<!— TemplateBeginlf cond="_document['News']" —>
<TD WIDTH="5">  ; </TD>
Это ячейка внешней таблицы, задающая просвет между основным содержимым и колонкой новостей
< TD WIDTH ="98" VALIGN =" TOP ">
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0">
Содержимое внутренней таблицы разметки
</ TABLE >
</ TD >
<!— TemplateEndlf —>
Внутри необязательной области должны оказаться ячейка просвета и ячейка, в которой находится колонка новостей. Если это не так, отредактируйте HTML -код.
Вот, собственно, и все. Мы создали необязательную область.
Теперь, если вы создаете страницу на основе шаблона Main , то можете задать присутствие или неприсутствие в ней колонки новостей. Сделать это можно с помощью уже знакомого вам диалогового окна Template Properties . Выберите пункт Template Properties в меню Modify — и вы увидите, что в списке этого окна присутствует пункт News , т. е. параметр, задающий присутствие созданной нами необязательной области. А в нижней части диалогового окна находится флажок Show News , включив который вы зададите присутствие области на странице.
На этом все? Увы, нет.
Дело в том, что необязательная область Dreamweaver по своей природе не является изменяемой. Нам нужно поместить в нее изменяемую область, чтобы мы смогли задать содержимое колонки новостей.
Но мы сделаем лучше. И Dreamweaver нам поможет.
