Файловое поле

11.7. Файловое поле

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

Вставка файлового поля производится следующим образом.

Поместите текстовый курсор в форму. Дайте команду Insert > Form Objects > File Field (Вставка > Объекты формы > Файловое поле). Откройте палитру Property Inspector (Инспектор свойств) и выполните настройку файлового поля. Рассмотрим немногочисленные параметры этого объекта. FileField Name (Имя файлового поля). Раздел палитры служит для ввода уникального имени файлового поля. Char Width (Ширина в символах). Максимальное число символом, которые одновременно отображаются в файловом поле. Max Chars (Максимальное число символов). Максимальное число символов, которое разрешается ввести в файловое поле. Это число может быть больше, чем значение предыдущего поля. В этом случае просмотреть избыточные символы можно при помощи горизонтальной прокрутки.

Для правильной работы файлового поля требуется выполнение трех условий. Во-первых, сервер должен поддерживать загрузку анонимных файлов. Во-вторых, для всей формы следует установить метод передачи Post. В-третьих, в дескрипторе формы должен присутствовать кодовый фрагмент вида enctype="multipart/form-data".

Формы

11. Формы

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

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

Сами формы как объекты языка HTML обеспечивают только отображение и сбор информации. Ее обработка выполняется специальными программными средствами. Обычно в этой роли выступают так называемые сценарии CGI (Common Gateway Interface), написанные на разных языках программирования. Сложные функции обработки реализуются на языках Perl, C++, Java. Для простых алгоритмов обработки информации применяется язык JavaScript.

Вся статическая часть формы заключается внутрь контейнера, ограниченного дескрипторами <form> и </form>. В отличие от таблиц формы не разрешается вкладывать друг в друга, но нет запретов на размещение нескольких таких объектов на одной странице. Среди примерно десятка атрибутов, управляющих поведением формы, самыми важными являются два.

Атрибут method дает информацию о способе передачи на сервер информации, собранной формой. Он может принимать два значения get и post. В первом случае данные пересылаются вместе с адресом URL. Это накладывает жесткие ограничения на длину передаваемого сообщения, поэтому данный метод в настоящее время применяется редко. Во втором случае накопленная информация пересылается в виде отдельного сообщения на стандартные каналы ввода-вывода обрабатывающей программы. Для этого метода не существует принципиальных ограничений на объем передаваемой информации. Атрибут action задает способ обработки полученной формы. Его значением может быть адрес URL программного средства, предназначенного для обработки содержимого формы, или адрес электронной почты для ее пересылки.

Так, дескриптор

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

Внутри дескрипторных скобок, ограничивающих форму, могут располагаться различные объекты HTML, предназначенные для ввода информации. Основную нагрузку по сбору и хранению пользовательской информации несут на себе дескрипторы <textarea>, <select> и <input>.

Дескриптор <textarea> предназначен для ввода больших массивов текстовой информации. Объем вводимого текста не ограничен; кроме того, пользователь имеет возможность указать ширину и высоту области ввода.

Дескриптор <select> используется для создания раскрывающегося списка или списка с полосой прокрутки. Дескриптор является контейнером, внутрь которого заключаются описания всех пунктов.

Дескриптор <input> является одиночным тегом. Это одно из самых полезных средств организации форм. С помощью этого дескриптора можно создавать самые разные структурные элементы: флажки, кнопки отправки, ноля для ввода пароля, флажки, текстовые поля, переключатели и пр. Тип структурного элемента задается при помощи атрибута type. Например, дескриптор

создает кнопку с надписью Переслать, предназначенную для отправки сообщений на сервер.

Графические кнопки

11.6. Графические кнопки

Стандартные кнопки Submit (Отправка), Reset (Сброс), а также кнопки, построенные на их основе, не отличаются стильным дизайном. Их казенное оформление подходит не для любого гипертекстового документа, претендующего на художественность и стиль. Разработчик Web-страниц не обязан использовать только предопределенные кнопки; он имеет возможность создать командную кнопку на основе любого растрового изображения.

Поместите курсор в место, выбранное для размещения графической кнопки. Дайте команду Insert > Form Objects > Image Field (Вставка > Объекты формы > Графическое поле). Появится диалоговое окно Select Image Source (Выбор изображения). При помощи этого окна выберите нужное изображение. После того как графическая основа управляющей кнопки создана, с ней требуется связать определенную программную функцию. Некоторый выбор простых функций предоставляет палитра Behaviors (Режимы) (Shift+F3). Функции, обеспечивающие сложное или нестандартное поведение кнопки, пользователю придется создавать вручную или разыскивать на бескрайних просторах всемирной сети Интернет.

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

Кнопки

11.5. Кнопки

Кнопки — это средства управления интерактивными формами. Они активизируют пересылку данных и сбрасывают неверно набранную информацию. Эти функции управляющих кнопок являются штатными. Разработчик стра ницы может связать с кнопками форм любые дополнительные функции или команды, при условии, что написаны соответствующие программы. Две кнопки: Submit (Отправить) и Reset (Очистить) зарезервированы по названию и функциям. Эта стандартизация выходит за пределы программы и распространяется на язык гипертекстовой разметки. Первая кнопка запускает процедуру пересылки содержимого формы по указанному в поле Action (Действие) адресу, которым может быть адрес URL обрабатывающей программы или адрес электронной почты. Методом пересылки обычно является Post. Кнопка Reset (Сброс) сбрасывает текущие значения полей формы, что позволяет внести коррективы при наличии ошибок. Эти структурные элементы форм кодируются при помощи дескриптора <input>. Следующий фрагмент кода дает пример описания кнопки сброса:

Чтобы вставить кнопку, используется команда Insert > Form Objects > Button (Вставка > Объекты формы > Кнопка).

Основная работа по редактированию и настройке кнопок выполняется сpeдствами палитры Property Inspector (Инспектор свойств). Перечислим доступны параметры настройки.

Button Name (Имя кнопки). Имя кнопки. Label (Надпись). Надпись на кнопке. По умолчанию эта надпись совпадает с типом кнопки. Пользователь может задать в этом разделе палитры любое подходящее название, например вместо Submit набрать слово Отправить. Reset form (Очистить форму). Этот переключатель назначает данному объекту функцию очистки полей формы. По щелчку на кнопке вся информация, введенная в текстовые поля формы, удаляется. Submit form (Отправить форму). Этот переключатель связывает с данным объектом функцию пересылки данных. По щелчку на кнопке данные формы передаются на сервер. None (Нет). Этот переключатель означает, что с данной кнопкой не связывается никакое поведение. Щелчок на кнопке не запускает программ и не вызывает никаких изменений в состоянии формы. Если кнопка должна выполнять нестандартные функции, следует выбрать именно этот вариант.

Для кнопок с нестандартными функциями требуется прямое ручное редактирование исходного текста документа. При помощи палитры задаются ее имя, надпись и “пустое поведение” (None). Число различных программных функций, которые можно связать командной кнопкой, слишком велико, чтобы дать их представительное описание в коротком paзделе. Чаще всего такие функции пишутся на языке JavaScript и вызываются по щелчку на командной кнопке. В этом случае примерное описание может выглядеть следующим образом:

где сама функция описана в разделе <script>.

Обработка форм

11.9. Обработка форм

Данные, собранные формой, могут обрабатываться на стороне клиента или на стороне сервера. Простейшие формы не требуют сложных алгоритмов--с их информационным обслуживанием способны справиться программы, действующие на стороне клиента. Для их программирования обычно используют языки JavaScript или VBScript, а программы на этих языках часто называют сценариями. Для развернутой, глубокой информационной обработки приходится привлекать более мощные программные средства, которые пишутся на полнофункциональных современных языках программирования, таких как Perl, Java, C++ и пр. Подобные программы работают на стороне сервера, поэтому данные формы приходится пересылать на его адрес. Пусть, например, создана простая форма, состоящая из двух переключателей со значениями Yes (Да) и No (Нет), и кнопки Submit (Отправка), которая обеспечивает пересылку данных. Будем считать, что с переключателями связаны разные сообщения, которые должны выводиться при щелчке на кнопке Submit (Отправка).

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

function processForm(){

if (document.forms[0].elements[0].checked){

alert("Yes");

}else{

alert("No");

}

Связать с формой эту функцию обработки можно следующим образом.

Выберите кнопку Submit (Отправка). Откройте палитру Behaviors (Режимы) (SHIFT+F3). Щелчком на кнопке со знаком + откройте меню, содержащее список доступных режимов работы объектов. Выберите режим Call JavaScript (Вызов функции JavaScript). В одноименном диалоговом окне введите имя функции обработки формы. В приведенном примере это имя processForm (). Добавьте описание функции в раздел заголовков гипертекстового документа внутрь парного дескриптора <script>.

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

Практически неограниченными возможностями по информационной o6pаботке данных, собранных формами, обладают так называемые сценарии СC1.

Стандарт CGI (Common Gateway Interface) — это общепринятый способ связи внешней прикладной программы с информационным сервером. С помощью этого интерфейса можно создавать программы CGI, иногда называемые шлюзами, которые способны выполнить любое преобразование информации, полученной от формы.

Программа CGI запускается сервером и работает в реальном масштабе времени. Сервер обеспечивает передачу запроса пользователя программе и возвращает результат ее работы на клиентский компьютер. Программы CCI пишутся на самых разнообразных языках программирования: С/С ++, Fortran, Perl, PHP,Java, Unix Shell и пр. Исполняемые модули таких программ, как правило, хранятся на сервере в каталоге cgi-bin.

Переключатели и флажки

11.3. Переключатели и флажки

Механизм выбора пользователя на Web-страничке реализуется обычно при помощи элементов управления двух типов: переключателей (radio button) и флажков (check box). Первые дают возможность выбрать только один вариант из совокупности предложенных, вторые допускают множественный выбор альтернатив (Рисунок 11.4).

Эти структурные элементы форм не только имеют близкие области применения, их способы кодирования тоже очень похожи друг на друга. В исходном тексте страницы HTML они представляются дескриптором <input> с разными значениями атрибутов. Так, строка

Режимы работы форм

11.10. Режимы работы форм

С объектами гипертекстового документа разрешается связывать специальные программы, которые вносят на страницу или в ее окружение динамические изменения. Они запускаются на выполнение при наступлении определенных событий, которыми могут быть щелчки мыши, наведение указателя, нажатие клавиш и пр. Это короткие программы, написанные, как правило, на языке JavaScript, называются в программе behaviors. Будем называть их динамическими сценариями или просто сценариями. Процедура присваивания сценария объекту гипертекстовой страницы довольно проста, все необходимые операции выполняются при помощи палитры Behaviors (Режимы) (SHIFT+F3).

Форме и ее структурным составляющим можно назначить разные динамические сценарии, но только два из них являются специализированными, поскольку предназначены для работы только с объектами данного типа. Это сценарии Validate Form (Проверить форму) и Set Text of Text Field (Поместить текст в поле). Первая процедура позволяет проверить правильность данных, введенных в форму, вторая процедура позволяет заполнить текстовое поле формы заданным содержимым.

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

Одним из самых полезных и часто применяемых структурных элементов форм является меню переходов (Jump Menu). Этот объект позволяет представить серию команд гипертекстового перехода в виде списка или меню. По способу кодирования и расположению в системе команд про граммы меню переходов представляет собой структурный элемент формы. Однако его “формообразующая природа” не является заметной для пользователя, который работает над созданием навигационной системы гипертекстового документа. По выполняемым функциям и тактике использования меню переходов напоминает скорее карту ссылок или систему навигационных кнопок. Поэтому работа с этими объектами рассмотрена в главе “Ссылки”.

Рисунок Диалоговое окно List Values (Пункты списка)

Рисунок . 10.7. Диалоговое окно List Values (Пункты списка)

Средствами диалогового окна List Values (Пункты списка) создать систему пунктов меню. Рассмотрим основные принципы работы с этим окном. Каждый пункт меню состоит из названия (Label), которое задается в левом столбце, и значения (Value) в правом столбце. Для выбора пунктов удобно использовать клавишу TAB или указатель мыши. В меню пункты представляются названиями. После того как пользователь выбрал один из пунктов и активизировал команду пересылки, значение этого пункта передается на сервер для дальнейшей обработки. Кнопка со знаком + служит для создания нового пункта. Его название и значение вводится с клавиатуры. Кнопка со знаком — удаляет текущий пункт. Кнопки со стрелками меняют последовательность пунктов меню. Щелчок на кнопке ОК заканчивает работу с этим диалоговым окном. В поле List/Menu (Список/Меню) введите уникальное имя объекта. В списке Initially Selected (Первоначальный выбор) выберите пункт, который будет отображаться в поле раскрывающегося списка при первоначальной загрузке страницы.

Каждый раздел меню описывается двумя идентификаторами: именем (Label) и значением (Value). Имя представляет раздел в меню и является обязательной частью его описания. Значение пересылается на сервер для дальнейшей обработки. Эта составляющая описания является факультативной и может быть опущена. В этом случае ее функции также будет выполнять имя пункта меню.

Рисунок Объекты формы

Рисунок . 11.1. Объекты формы

привязки формы, а затем дать команду вставки. Программа располагает несколькими вариантами выдачи этой команды. Это команды Insert > Form (Вставка > Форма), Insert > Form Objects (Вставка > Объекты формы) и раздел Forms (Формы) палитры Objects (Объекты) (Рисунок 11.1).

Созданная форма помечается в окне документа пунктирным прямоугольником с границей красного цвета. Этот способ выделения работает, если, во-первых, включен режим View > Visual Aids > Invisible Elements (Вид > Cлужебная разметка > Скрытые объекты) и, кроме того, в основных настройках программы в разделе Invisible Elements (Скрытые объекты) выставлен флажок Form Delimiter (Граница формы).

Естественная последовательность создания формы требует, чтобы вначале был создан контейнер — Insert > Form (Вставка > Форма), а потом в нем были размещены все необходимые структурные элементы — Insert > Form Objects (Вставка > Объекты формы). При попытке вставить структурный элемент на свободное пространство страницы программа отображает окно, в котором предлагает добавить дескриптор формы. Если пользователь ответит согласием, то контейнер создается автоматически.

Перечислим все структурные составляющие форм.

Text Field (Текстовое поле). Этот элемент управления предназначен ввода текста, который может отображаться в одну строку (single /line), в несколько строк (multi line) или представляться звездочками (password). Button (Кнопка). Кнопка инициирует выполнение заданных действий, Это может быть команда отправки данных на сервер или восстановление исходных значений полей формы. Название кнопки можно менять. Check Box (Флажок). Этот элемент управления позволяет включить или отключить какой-то режим или выбрать один из двух вариантой ответа на вопрос (да или нет). Radio Button (Переключатель). Группа переключателей позволяет выбрать один вариант из предложенного набора. List/Menu (Список/Меню). Создает стандартный элемент управления приложений Windows — раскрывающийся или обычный список. Этот объект может содержать полосы прокрутки. Он служит для выбора одного или нескольких вариантов из предложенного набора. File Field (Файловое поле). Предназначено для ввода или поиска имени файла. Процедура поиска запускается щелчком на кнопке Browse (Обзор), расположенной справа от этого поля. Image Field (Графическое поле). Используется для вставки в форму рисунка. Hidden Field (Скрытое поле). Может хранить информацию, которая не вводится пользователем, но требуется процедурой обработки содержимого формы. В качестве примера можно назвать дату заполнения формы. Jump Menu (Меню переходов). Создает меню, каждый пункт которого представляет собой команду гипертекстового перехода.

Большинство структурных элементов форм не требует работы с диалоговыми окнами. Исключением является меню переходов, работа с которым рассмотрена в главе, посвященной гипертекстовым ссылкам.

Дополнительная настройка и редактирование формы и ее составляющих выполняется при помощи палитры Property Inspector (Инспектор свойств) (CTRL+F3). Если выбрать форму целиком, то Инспектор свойств откроет доступ к общим настройкам, относящимся ко всему объекту. Таковых всего три.

Form name (Имя формы). Текстовое поле для ввода собственного имени формы. Action (Действие). Поле для задания адреса URL или адреса электронной почты. Method (Метод). Этот список определяет способ передачи содержимого формы. Он состоит из трех пунктов: Get, Post и Default. В первом случае информация, введенная в форму, присоединяется к адресу URL. Большим недостатком этого способа является ограниченный объем послания. Оно не может превышать 8192 символа. Сообщения большего объема автоматически обрезаются, что может привести к непредсказуемым последствиям. В большинстве случаев следует использовать метод Post, который пересылает данные в специальном сообщении и поэтому не имеет столь жестких ограничений по объему. Вариант Default оставляет выбор метода пересылки на усмотрение программы просмотра. Обычно таким методом является Get.

Следует отметить некоторые особенности поведения форм на гипертекстовой странице.

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

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

Неплохие результаты дает использование предварительно отформатированного текста. Напомним, что текст, заключенный в парный дескриптор <рrе>, сохраняет свои габариты по горизонтали и наборы пробелов между буквами и словами. У такого текста кратные пробелы не поглощаются, что позволяет простыми средствами добиться удовлетворительного выравнивания по горизонтали. Раньше программы просмотра представляли предварительно отформатированный текст при помощи моноширинного шрифта Courier, чьи эстетические достоинства многими Web-дизайнерами ставятся под сомнение. Последние версии броузеров (начиная примерно с третьей) позволяют выбрать шрифтовое начертание для подобных фрагментов текста.

Для сложных форм, состоящих из нескольких текстовых полей, переключателей, флажков, наилучшее решение дает размещение в таблице. Параметры таблицы обеспечивают почти полный контроль вертикального и горизонтального положения структурных составляющих формы в ячейках. Подбирая значения полей (CellPad), интервалов (CellSpace) и типов выравнивания, можно добиться точной взаимной координации объектов формы (Рисунок 11.2).

Рисунок Переключатель и флажок

Рисунок . 11.4. Переключатель и флажок

описывает флажок, а строка

это возможный вариант кодирования переключателя.

Для вставки переключателя надо дать команду Insert > Form Objects > Radio Button (Вставка > Объекты форм > Переключатель). Флажок создается командой Check Box (Флажок) того же меню. Кроме того, оба объекта представлены кнопками в разделе Form (Форма) палитры объектов.

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

Число дополнительных настроек минимально. Палитра Property Inspector (Инспектор свойств) разрешает задать имя переключателя или флажка и установить начальное состояние этих объектов. Для этого в разделе палитры Initial State (Начальное состояние) надо выбрать один из следующих вариантов.

Checked (Помеченный). Устанавливает данный переключатель или флажок сразу после загрузки страницы. Unchecked (Непомеченный). Сбрасывает переключатель или или флажок.

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

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

Рисунок Раскрывающийся список

Рисунок . 11.5. Раскрывающийся список

С точки зрения разработчиков программы, раскрывающийся список (меню) (Рисунок 11.5) и список с линейками прокрутки (Рисунок 11.6) — это похожие объекты со сходной технологией создания и редактирования. Они реализуют один и тот же принцип выбора, а различаются только требованиями к свободному пространству. Раскрывающийся список — это более экономный элемент управления, чем обычный список, которому, в общем случае, требуется большее пространство на гипертекстовой странице.

Рисунок Расположение элементов формы в таблице

Рисунок . 11.2. Расположение элементов формы в таблице

Рисунок Список с полосами прокрутки

Рисунок . 11.6. Список с полосами прокрутки

Рисунок Типы текстовых полей

Рисунок . 11.3. Типы текстовых полей

Текстовое поле Single line

Простое текстовое поле, состоящее из одной строки, кодируется при помощи дескриптора <input>. Простой пример такого объекта дает сведущая строка кода:

где атрибут type задает тип поля, а атрибут name — имя объекта.

Число дополнительных настроек простого текстового поля невелико. Рассмотрим их.

TextField (Текстовое поле). Этот раздел палитры служит для задания имени текстового поля. Правила ввода таких имен обычные. Нельзя использовать специальные символы и задавать повторяющиеся имена. Не рекомендуется оставлять данный раздел пустым. Char Width (Ширина в символах). Ширина текстового поля, измеренная в символах. По умолчанию этот размер составляет примерно 20 символов. Точная длина поля устанавливается в программе просмотра. Max Chars (Максимальный объем). Максимальное число символов, которое можно ввести в текстовое поле. Если поле для ввода этого значения оставить пустым, то длина пользовательского ввода не ограничивается. Init Val (Начальное значение). В это поле можно ввести текстовую строку, которую программа просмотра выведет после первой загрузки страницы. Это может быть подсказка или наиболее вероятное значение текстового поля.

Скрытое поле

11.8. Скрытое поле

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

Дайте команду Insert > Form Objects > Hidden Field (Вставка > Объекты формы > Скрытое поле). На гипертекстовой странице скрытое поле отображается в виде специального значка, который виден только в редакторе, но не отображается программами просмотра. Отображением этого символа специальной разметки управляет команда View > Visual Aids > Invisible Elements (Вид > Служебная разметка > Скрытые элементы). Кодируется скрытое поле при помощи дескриптора <input>, например:

Создание меню

В языке HTML меню и списки кодируются при помощи парного дескриптора <select>, внутрь которого вкладываются теги вида <option>, описывающие отдельные пункты или команды меню. Например, следующий фрагмент кода создает простейшее меню из двух пунктов:

<optionvalue="мажор">до</оption>

</select>

Создать меню можно следующим образом.

Поместите текстовый курсор внутрь формы. Дайте команду Insert > Form Objects > List/Menu (Вставка > Объекты формы > Список/Меню) или щелкните на одноименной кнопке, расположенной в разделе Form (Форма) палитры объектов. В результате в форму добавляется заготовка меню, не содержащая ни одного пункта. Следующие шаги имеют целью информационное наполнение меню. Не снимая выбора с меню, откройте палитру Property Inspector (Инспектор свойств) (CTRL+F3). В поле List/Menu (Список/Меню) введите уникальное имя объекта. Щелчком на кнопке List Values (Пункты списка) откройте одноименное диалоговое окно, предназначенное для создания пунктов меню (Рисунок 11.7).

Создание списков

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

Команда Insert > Form Objects > List/Menu (Вставка > Объекты формы > Список/ Меню) размещает на странице пустую заготовку, которая превращается в список или меню в зависимости от настроек, выбранных с помощью Инспектора свойств. Чтобы создать список, надо установить в палитре Property Inspector (Инспектор свойств) флажок List (Список).

Для информационного наполнения пустого списка надо щелчком на кнопке List Value (Пункты списка) открыть диалоговое окно, показанное на Рисунок 10.7, и задать названия и значения пунктов списка. Техника работы с этим диалоговым окном рассмотрена в предыдущем разделе.

Несколько дополнительных настроек списков расположены на палитре Property Inspector (Инспектор свойств). Рассмотрим их.

List/Menu (Список/Меню). Здесь задается имя списка. Height (Высота). Число строк, отображаемых в списке одновременно. Selections: Allow multiple (Множественный выбор). Этот флажок управляет режимом множественного выбора. Если он установлен, то в списке можно выбрать несколько пунктов одновременно и эта возможность сохраняется при отображении страницы в программе просмотра. Initially Selected (Первоначальный выбор). Этот раздел палитры позволяет указать первоначально выбранные пункты списка. Для выбора смежных пунктов надо удерживать нажатой клавишу SHIFT. Групповой выбор отдельных пунктов выполняется при нажатой клавише CTRL.

Если сбросить флажок Selections: Allow multiple (Множественный выбор) и задать высоту списка равной единице, то список выглядит как меню, Пустое поле Height (Высота) означает, что вопрос о высоте списка оставляется на усмотрение программы просмотра. Броузер Internet Explorer одновременно отображает четыре пункта, а программа Netscape Navigator выводит все пункты списка.

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

Списки и меню

11.4. Списки и меню

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

Текстовое поле Multi Line

Для ввода большого количества текстовой информации следует использовать поля типа Multi Line (Многострочное). Чтобы создать объект этого типа, требуется разместить на странице текстовое поле, например командой Insert > Form Objects > Text Field (Вставка > Объекты форм > Текстовое поле), открыть инспектор свойств и выбрать в этой палитре переключатель Multi Line (Многострочное). В результате обычное поле, состоящее из одной строки, преобразуется в многострочное, длина которого составляет 18 символов, а высота — 3 строки.

Эта команда не только меняет внешний вид текстового поля, но преобразует кодовую форму его представления. Многострочные поля кодируются в языке HTML при помощи дескриптора <textarea>. Пример простейшего описания дает следующий фрагмент кода:

Вся дополнительная настройка объектов этого типа выполняется, как и прежде, средствами палитры Property Inspector (Инспектор свойств). Рассмотрим ее возможности.

TextField (Текстовое поле). Собственное уникальное имя многострочного поля. Char Width (Ширина в символах). Ширина текстового поля, заданная в символах. Num Lines (Число строк). Количество строк текстового поля. Int Val (Начальное значение). Начальное значение поля. Информация, введенная в этом разделе, выводится в поле при первой загрузке страницы. Wrap (Перенос по словам). Список способов переноса текста в многостраничном текстовом поле. Он состоит из трех пунктов. Default (По умолчанию). По умолчанию принимается правило, согласно которому текст, достигший правого края поля, не переносится. Пользователь имеет возможность оборвать строчку нажатием клавиши ENTER. Virtual (Виртуальный перенос). Выбор этого пункта включает перенос только на экране. Сообщение, введенное в форму с такой настройкой, отправляется на сервер в виде одной строки. Physical (Фактический перенос). В этом режиме перенос по словам отображается на экране и сохраняет символы перехода на новую строку при отправке на сервер.

Текстовое поле Password

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

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

Кроме того, для этих двух типов полей полностью совпадают по смыслу и по названиям все дополнительные настройки, которые доступны в палитре Property Inspector (Инспектор свойств).

Текстовые поля

11.2. Текстовые поля

Текстовое поле — это область формы, в которую пользователь может ввести ответ на запрос или произвольное информационное сообщение.

Текстовые поля бывают трех видов (Рисунок 11.3).

Single line (Однострочное). Служит для набора коротких сообщений или ответов. Multi line (Многострочное). Предназначено для ввода сообщений произвольной длины. Password (Пароль). Служит для ввода пароля.

Все три вида текстовых полей вставляются в форму при помощи одной и той же команды. Выбор типа выполняется средствами палитры Property Inspector (Инспектор свойств). За это отвечают три переключателя с теми же названиями, что и у самих объектов.

Вставка форм

11.1. Вставка форм

Формы вставляются в документ подобно другим объектам программы. Сначала надо поместить курсор в то место документа, которое выбрано для

Динамические сценарии

12.9. Динамические сценарии

С фреймами разрешается связывать различные динамические сценарии: предустановленные, которые поставляются вместе с программой, и специальные, созданные сторонними разработчиками или фирмами. Напомним, что все технические действия по связыванию сценария и объекта выполняются при помощи палитры Behaviors (Режимы).

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

Set Text of Frame (Установить текст фрейма). Этот сценарий выполняет замену текстового наполнения фрейма на содержимое, заданное пользователем. Новое содержимое может включать в себя любые коды и корректные разметки. Go to URL (Перейти по адресу). Открывает новую страницу в текущем окне или заданном фрейме. Этот сценарий особенно полезен в тех случаях, когда требуется изменить содержимое нескольких фреймов одним щелчком мыши. Insert Nav Bar Image (Вставить навигационную панель). Позволяет организовать навигацию во фреймовом документе в наглядной и удобной для пользователя форме. Insert Jump Menu (Вставить меню переходов). Это меню также служит для облегчения ориентировки пользователя в гипертекстовом документе, разбитом на фреймы.

Фреймы

12. Фреймы

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

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

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

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

Они резко ограничивают переносимость гипертекстовых страниц. Первые версии программ просмотра не знакомы с такими конструкциями, поэтому страницы с фреймовой организацией не отображаются старыми броузерами. Многие поисковые системы не индексируют страницы, разбитые на фреймы. Это не значит, что они обречены на забвение в Сети. Просто на стадии разработки автор должен провести дополнительные мероприятия, чтобы обеспечить доступность и цитируемость своего продукта. Часто интерфейс подобных страниц выглядит громоздким, а система навигации — запутанной. При переходах по ссылкам и загрузке новых документов в разные области окна программы просмотра состояние адресной строки не меняется. В ней всегда отображается адрес URL основного корневого документа. Это обстоятельство способно не только запутать малоопытного посетителя, но внести сумятицу в работу некоторых подсистем программы просмотра.

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

Границы

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

Для этого надо выбрать фрейм и изменить значения полей Borders (Границы) и Border Color (Цвет границы) в палитре Property Inspector (Инспектор свойств).

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

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

Кодирование фреймов

12.1. Кодирование фреймов

Для организации фреймовой структуры на гипертекстовой странице требуется создать несколько документов.

Должны быть подготовлены гипертекстовые документы, предназначенные для загрузки в отдельные области страницы. Необходимо создать документ, который задает общую структуру страницы. Его обычно называют структурным документом (framesеt document). Он задает число фреймов, их расположение на странице, габариты, совместные атрибуты и т. п. Структурный документ - это не совсем обычный объект, если рассматривать кодирование и визуализацию. Он не отображается в программе просмотра, поскольку не имеет самостоятельного содержимого, а только описывает фреймовую структуру. Этот документ кодируется при помощи парного дескриптора <frameset> </frameset>, который заменяет обязательный для обычных гипертекстовых документов дескриптор <body>. Например, ниже приведен листинг простейшего структурного документа, задающего разделение на два фрейма, а на Рисунок 12.1 показано его представление в программе просмотра.

Палитра фреймов

Палитра Frames (Фреймы) — это миниатюрное изображение фреймовой структуры документа. Она предоставляет информацию о положении отдельных составляющих структуры, их именах и размерах (Рисунок 12.4). С помощью палитры легко выполнять выбор фреймов. Кроме того, она делает наглядным вложение структур, которое не всегда легко просматривается в окне документа из-за наличия второстепенных деталей и посторонних объектов. Палитра располагает простыми средствами навигации по сложной фреймовой структуре. Область окна документа, в которой находится текстовый курсор и выполняются проектные операции, считается активной и выделяется в палитре подчеркиванием границ и названия.

Параметры оформления фрейма Имена

Имена

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

Присвоить фрейму собственное имя можно так.

Выберите фрейм. Откройте палитру Property Inspector (Инспектор свойств) (CTRL+F3), если она отсутствует на экране. Введите имя фрейма в поле Frame Name (Имя фрейма) (Рисунок 12.6). При этом должны быть выполнены следующие правила: имя фрейма должно быть представлено одним словом, использовать пробелы запрещается; следует ограничиться только обычными литерами: буквами и цифрами; использовать специальные символы, например двоеточие, дефис, кавычки и пр., нельзя — исключение составляет лишь символ подчеркивания (underscore); все имена должны быть уникальными; запрещается повторять зарезервированные имена _blank, _parent, _self, _top.

Загрузка файлов

Программа Dreamweaver поддерживает различные стратегии создания и наполнения фреймов. Области фреймовой структуры — это обычные гипертекстовые страницы, которые могут быть созданы заново, как обычные документы HTML Возможен и другой путь, когда разработанная фреймовая структура заполняется гипертекстовыми документами, созданными ранее. Для этого надо просто связать с фреймом нужный файл HTML.

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

Выберите фрейм. Откройте палитру Property Inspector (Инспектор свойств) (Рисунок 12.6). Выберите нужный файл. Для этого предназначен раздел палитры Src (Источник). Это типовой элемент управления программы. Напомним кратко технику работы с ним. Полный путь поиска файла можно просто ввести в текстовом поле справа. Кроме того, для выбора загружаемого файла есть маркер-указатель и кнопка Browse (Обзор). Первый представляет собой удобное интерактивное средство “целеуказания” для файлов, представленных в окне Инспектора узла. Чтобы выбрать один из них, надо просто перетащить “прицел” из палитры на значок файла, расположенный на любой из панелей Инспектора узла. Кнопка Browse (Обзор) отображает стандартное диалоговое окно, предназначенное для поиска и выбора файлов.

В тех случаях, когда текстовый курсор расположен внутри фрейма, палитра Property Inspector (Инспектор свойств) находится в состоянии, предназначенном для работы с текстом. В этом случае раздел палитры Src (Источник) недоступен. Для выбора загружаемого файла можно воспользоваться командой File > Open in Frame (Файл > Открыть во фрейме). Эта команда поддержана клавиатурным сокращением CTRL+SHIFT+0.

Поддержка старых броузеров

12.8. Поддержка старых броузеров

Не все программы просмотра, которые в настоящий момент находятся в обращении, поддерживают работу с фреймовыми документами. Так, броузер Netscape Navigator приобрел такую возможность только со второй версии, программа Internet Explorer — на одно поколение позже, только с третьей версии.

Язык HTML располагает специальным механизмом, который делает фреймовые документы доступными для подобных программ просмотра. Эти функции выполняет парный дескриптор <noframes>. В этом контейнере размещается содержимое, предназначенное для вывода в программах просмотра, не поддерживающих фреймы. Это может быть любое текстовое или графическое наполнение по выбору автора — своего рода “бесфреймовая” версия гипертекстового документа. Современные броузеры игнорируют фрагмент кода, помещенный внутрь этих дескрипторных скобок; они отображают фреймовый документ в полном соответствии с его логической структурой.

Сразу после создания главного структурного документа программа Dreamweaver автоматически размещает вслед за дескрипторной парой <frameset> </frameset> часть кода, предназначенную для старых броузеров. Этот фрагмент выглядит следующим образом.

</body>

</noframes>

Для заполнения этого кодового фрагмента программа располагает специальным режимом работы. Чтобы перейти в него, надо дать команду Modify > Frameset > Edit NoFrames Content (Изменить > Структурный документ > Бесфреймовое содержимое).

По этой команде программа отображает пустое окно документа с заголовком NoFrames Content (Бесфреймовое содержимое) в верхней части. Используя штатные команды и инструменты Dreamweaver, можно создать информационное наполнение бесфреймовой части документа. После окончания этой работы та же команда выполняет обратный переход в обычный режим окна документа.

В режиме NoFrames Content (Бесфреймовое содержимое) доступны почти все возможности редактора. Разработчик может вводить текст, вставлять рисунки, создавать формы, работать с таблицами, включать в состав документа интерактивные картинки и пр. Перечислим немногие существующие особенности и ограничения.

Отдельные документы фреймовой структуры и ее бесфреймовая часть — это во многом независимые фрагменты одного гипертекстового документа. Это в полной мере относится к основным параметрам страницы. Напомним, что в программе они задаются в диалоговом окне Page Properties (Свойства страницы), которое отображается по команде Modify > Page Properties (Изменить > Свойства страницы) или при помощи комбинации клавиш CTRL+J. Настройки режима NoFrames Content (Бесфреймовое содержимое) ничем не отличаются от настроек обычной страницы. В режиме NoFrames Content (Бесфреймовое содержимое) программа блокирует все команды группы File > Open (Файл > Открыть). Чтобы перенести в документ законченные гипертекстовые фрагменты или заготовки, следует использовать возможности буфера обмена. Многие поисковые машины не индексируют фреймовые документы. Раздел <noframes> дает неплохую возможность подстраховки. В эту часть документа можно включить дескрипторы группы <meta>, которые предоставляют поисковым машинам информацию о содержимом, ключевых словах и заголовке гипертекстового документа. Напомним, что вставка метаинформации выполняется при помощи команд группы Insert > Head Tags (Вставка > Дескрипторы заголовков). Все команды этой группы доступны и в режиме NoFrames Content (Бесфреймовое содержимое). Кроме того, в эту секцию документа можно поместить ссылки на то страницы фреймового документа, которые содержат информацию, принципиально важную для оценки всего проекта.

Полосы прокрутки

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

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

Управление полосами прокрутки выполняется средствами раздела Scroll (Прокрутка) палитры Property Inspector (Инспектор свойств). Это список, состоящий из четырех пунктов.

Default (По умолчанию). Оставляет решение вопроса о необходимости отображения полос прокрутки на усмотрение программы просмотра. Yes (Да). Обязательный вывод полос прокрутки, независимо от заполнения фреймовой области. No (Нет). Запрет на вывод полос прокрутки. Auto (Автоматически). Режим автоматического отображения. В этом случае полосы прокрутки выводятся на экран, если габариты содержимого превышают размеры свободного пространства в фрейме.

Закрепление размеров

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

Чтобы закрепить размеры фрейма, надо его выбрать и в палитре Properly Inspector (Инспектор свойств) установить флажок No Resize (He изменять меры).

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

Поля

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

Размеры фреймовых полей можно изменить при помощи палитры Property Inspector (Инспектор свойств). За горизонтальные поля отвечает раздел Margin Width (Ширина полей), за вертикальные — Margin Height (Высота полей). Эти обычные числовые поля со стандартными для программы приемами обращения. Чтобы изменить расстояние от содержимого фрейма до границы, надо просто ввести в числовые поля нужные габариты свободных зон и подтвердить операцию нажатием клавиши ENTER.

12.7. Целеуказание ссылок

Фреймовые документы предоставляют разработчику возможность более глубокого контроля над ссылками, чем обычные гипертекстовые страницы. I !апример, можно задать визуализацию ссылок таким образом, чтобы они выводились в заданном фрейме той же страницы. Можно даже opгонизовать своеобразный навигационный центр, когда все ссылки локализованы и одном фрейме, который всегда видим и достижим для пользователя.

Выбор определенного фрейма для вывода ссылки принято называть целеуказанием (targeting). Связь ссылки и фрейма выполняется средствами палитры Property Inspector (Инспектор свойств). При этом составляющие фреймового документа представляются своими именами. Без таковых прямое обращение к данной области невозможно, поэтому целесообразно всем фреймам документа давать собственные уникальные имена.

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

blank. Новое пустое окно программы просмотра. _parent. Родительский фреймовый документ текущего фрейма. _self. Текущий фрейм. _top. Внешний документ текущего фрейма без разбиения на составные части.

Задать область загрузки ссылки можно следующим образом.

Выберите текст или изображение, которые служат представлением ссылки. Откройте палитру Property Inspector (Инспектор свойств). Задайте адрес ссылки в разделе палитры Link (Ссылка). Выберите область загрузки ссылки. Для этого раскройте список Target (Назначение) и выберите в нем одно из предопределенных или собственных фреймовых имен.

Все заданные пользователем собственные имена фреймов программа Dreamweaver автоматически заносит в список Target (Назначение). Он не требует обновления; все изменения программа регистрирует самостоятельно.

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

Размеры фреймов

Размеры фреймов структуры зависят от положения внутренних граничных линий. Перетаскивая эти разделители, можно перестроить структуру и добиться нужных габаритов отдельных ее ячеек, строк или столбцов. В этом случае размеры областей задаются “на глазок”. Размерные линейки, которые вызываются по команде View > Rulers > Show (Вид > Линейки > Показать), способны только отчасти облегчить точное позиционирование, поскольку их разрешающая способность ограничена. Для точного задания размеров следует использовать палитру Property Inspector (Инспектор свойств) (Рисунок 12.6)

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

Изменить габариты графы (строки или столбца) фреймовой структуры можно следующим образом.

Выберите графу. В общем случае для этого требуется провести целую серию подготовительных мероприятий. Откройте окно Инспектора свойств. Выберите структурный документ. В правой части окна Инспектора свойств появится символическое изображение фреймовой структуры со всеми ее строками и столбцами (Рисунок 12.6). Напомним, что эта миниатюра не только напоминает о составе структурного документа, но и служит для выбора образующих его частей. Щелкая на любой ячейке, можно выбрать строку или столбец, которым она принадлежит. Выберите графу (строку или столбец). В разделе палитры Units (Единицы измерения) выберите единицы измерения габаритов графы и введите числовое значение в поле Value (Значение). Рассмотрим имеющиеся возможности. Pixels (Пикселы). Абсолютная система измерения размеров строк и столбцов. Единицами измерения служат пикселы. Percent (Проценты). Пропорциональная система измерения, в которой габариты граф задаются в процентах свободного пространства окна программы просмотра или гипертекстового редактора. Relative (Относительные). Относительная система измерения, в которой габариты граф задаются в долях от размеров других граф: строк или столбцов. Если все оставшееся свободное пространство следует отвести данной графе, то в поле Value (Значение) надо ввести число 1. Чтобы отмасштабировать линию относительно другой линии, размеры которой заданы в относительной системе единиц, в поле Value (Значение) надо ввести коэффициент пропорциональности.

Например, если ширина одного столбца должна быть и два раза больше ширины другого, то размеры обоих следует задать в относительной системе и установить следующие значения в поле Value (Значение): 2 — для большего столбца и 1 — для меньшего.

Относительную систему измерения было бы лучше назвать логической, поскольку размеры задаются в виде взаимных логических отношений между отдельными графами фреймовой структуры. Эта способ дает наиболее предсказуемые результаты при разработке фреймовой структуры, предназначенной для просмотра в различных броузерах. На этапе составления плана страницы можно строить лишь самые общие предположения о вероятных размерах рабочего окна и разрешении экрана потенциальных посетителей. Задача построения сбалансированной системы абсолютных размеров, которая способна сохранить основные пропорции фреймовой структуры на различных мониторах и окнах программ просмотра, представляется трудноразрешимой. Если хотя бы один габаритный размер структуры окажется несогласованным, то броузер перекроит планировку всей страницы с непредсказуемыми последствиями для ее внешнего вида. Фреймы с относительными размерами выполняют функции своеобразных буферов, сжимаясь или расширяясь в зависимости oт наличного свободного пространства.

Границы

Для разделения отдельных фреймов структуры программа Dreamweaver рисует граничные линии, толщина которых по умолчанию равна шести пикселам. При помощи палитры Property Inspector (Инспектор свойств) можно изменить большую часть параметров оформления граничных линий.

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

Отображением граничных линий управляют два раздела палитры: Borders (Границы) и Border Width (Толщина границы).

Первый раздел представляет собой список, объединяющий три значения Yes (Да), No (Нет), Default (По умолчанию).

Пункт Yes(Да) включает отображение границ. В этом случае и редакторе и программах просмотра они изображаются в псевдотрехмерном виде.

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

Пункт Default (По умолчанию) оставляет вопрос о граничных линиях фреймового документа на усмотрение программы просмотра. В этом случае редактор рисует выпуклые границы фреймов.

Второй раздел — это поле, задающее толщину границы в пикселах. Нулевой толщина означает, что граница не будет видна в программе просмотра. Чтобы она не отображалась в редакторе, требуется командой View > Visual Aids > Frame Borders (Вид > Служебная разметка > Границы фреймов) выключить отображение разделителей и границ фреймового документа. Если этот режим включен, то даже задание нулевой толщины границ не отменяет видимое разделение фреймов в окне документа.

Для нового фреймового документа отображение границ по умолчанию включено, а их толщина составляет 6 пикселов (этой толщине соответствует пустое поле).

Изменение цвета граничных и внутренних разделительных линий выполняется средствами раздела палитры Border Color (Цвет границы). Это стандартный по форме элемент программы с типовыми приемами работы, которые неоднократно рассматривались в предыдущих разделах книги, например, посвященных выбору цвета текста или фона таблицы.

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

Разработка фреймовых структур

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

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

Поместите текстовый курсор на страницу, которая выбрана для разбиения. Включите отображение границ фреймов. Для этого дайте команду View > Visual Aids > Frame Borders (Вид > Служебная разметка > Границы фреймов). После этого окно документа претерпит некоторые изменения. Вдоль границ окна с внутренней стороны появится полоса толщиной в три пиксела. Наведите указатель на любую из границ и, удерживая нажатой клавишу ALT, перетащите ее на свободное место окна документа. Признаком готовности к операции служит, как обычно, вид указателя мыши. В этом случае он должен принять форму двойной стрелки. При помощи перетаскивания границ разместите в окне документа вертикальные и горизонтальные линии, необходимые для создания нужной фреймовой структуры.

Для удаления внутренней границы достаточно перетащить ее за пределы окна документа.

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

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

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

Результат применения метода перетаскивания границ зависят от того, какая часть документа была выбрана перед операцией. Если выбрать структурный документ целиком, то при помощи перетаскивания граничных линий можно создать лишь “плоскую структуру” одной глубины вложении. Для получения структур с вертикальной подчиненностью надо вначале выбрать отдельный фрейм или поместить в него текстовый курсор.

Редактирование фреймов

12.6. Редактирование фреймов

Каждый фрейм — это отдельный, независимый от окружения, гипертекстовый документ. К нему применимы все штатные средства редактирования страниц HTML, которыми располагает программа. Большая часть ресурсов, относящаяся к параметрам страницы, расположена в диалоговом окне Page Properties (Свойства страницы). Напомним, что для открытия этого окна достаточно дать команду Modify > Page Properties (Изменить > Свойства страницы) или воспользоваться клавиатурной комбинацией CTRL+J.

Все специфические признаки форматирования, относящиеся к оформлению фрейма, расположены в палитре Property Inspector (Инспектор свойств). Напомним, что содержание и вид этой контекстно-чувствительной палитры зависит от типа выбранных объектов. Для выбора фрейма надо щелкнуть на его значке и палитре Frames (Фреймы) (SHIFT+F2) или, удерживая нажатой клавишу ALT, но самому оригиналу в окне документа. На Рисунок 12.6 показано состояние панели Инспектора свойств при выборе отдельного фреймового документа.

Редактирование структур

12.5. Редактирование структур

Большая часть работы по изменению свойств созданной фреймовой структуры выполняется средствами палитры Property Inspector (Инспектор свойств) (CTRL+F3). Вид, который принимает эта палитра после выбора структуры, показан на Рисунок 12.5. По состоянию этой палитры можно уверенно судить о том, какая часть фреймовой структуры выбрана в данный момент. Признаком выбора всей структуры служит эскиз, который отображается в правой части палитры. Это не только значок, напоминающий пользователю способ разбиения структурного документа, но и средство выбора его строк и столбцов. Чтобы выделить строку фреймов, надо просто щелкнуть на любой ячейке этой строки. Повторный щелчок в том же месте переключает выбор со строки на столбец и обратно.

Рисунок Палитра Frames (Фреймы)

Рисунок . 12.4. Палитра Frames (Фреймы)

Чтобы открыть эту палитру, дайте команду Window > Frames (Окно > Фреймы) или просто нажмите комбинацию клавиш SHIFT+F2.

Чтобы выбрать фрейм, надо просто щелкнуть на его изображении в палитре Frames (Фреймы). Для выбора всей структуры требуется щелкнуть мышкой на любой точке рамки, ограничивающей все фреймы в палитре.

Выбор фреймов в окне документа

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

Перечислим все приемы, которые предлагает программа для выбора фреймов в окне документа:

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

Программа также обеспечивает переход между фреймами одного уровня (по горизонтали) и между вложенными структурами и их элементами (по вертикали).

Для перехода между фреймами одного уровня выберите один из них и далее используйте комбинации клавиш ALT+ВЛЕВО и ALT+ВПРАВО. Для перехода между разными уровнями вложенных структур выберите один из элементов иерархии и используйте комбинации клавиш ALT+BBEPX и ALT+ВНИЗ.

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

Средствами программы Dreamweaver легко создавать иерархические фреймовые системы, состоящие из нескольких структурных документом, вложенных друг в друга. Для большей части операций по планировке страниц и их наполнению такая иерархичность не влечет никаких последствий и не меняет технику и тактику их применения. Но в некоторых случаях следует четко различать уровни структурных документов. Отличить вложенную структуру от главной проще всего по селектору разметки. При выборе главного структурного документа дескриптор <frameset> в селекторе получает полужирное начертание. Дескрипторы вложенных структур представляются в обычном виде. Кроме того, в палитре Framе (Фреймы) каждая отдельная структура обведена выпуклой рамкой, а документы разделяются тонкими граничными линиями.

12.4. Сохранение фреймов и структур

Как упоминалось ранее, любой документ, разбитый на фреймы, состоит из нескольких независимых файлов HTML. Во-первых, содержимое каждой независимой области фреймовой структуры задается гипертекстовым документом. Во-вторых, число фреймов, их расположение, габариты, отображение границ, вывод линеек прокрутки, поля — вся эта информация хранится в отдельном файле, который называется структурным документом (frameset document}. Без сохранения всех документов, связанных с фреймовой структурой, содержимое экрана гипертекстового редактора невозможно просмотреть в броузере.

Вновь созданным фреймам программа присваивает временные имена по следующим правилам: UntitledFrame-N.htm для вновь созданного фрейма с номером N, UntitledFrameset-K.htm для фреймовой структуры с номером К и Untitled-M.htm для опорной страницы с номером М.

Поскольку все временные имена имеют префикс Untitled, сохраняемый фрейм бывает трудно идентифицировать. Панель Frames (Фреймы) способна существенно упростить ориентировку в сложной фреймовой структуре в процессе сохранения ее составных частей.

Сохранение фреймовой структуры (структурного документа) выполняется следующим образом.

Выберите структуру в окне документа или при помощи палитры Frames (Фреймы). Дайте команду File > Save Frameset (Файл > Сохранить структуру фреймов) (CTRL+S) или команду File > Save Frameset As (Файл > Сохранить структуру фреймов как) (CTRL+SHIFT+S).

Отдельный фрейм сохраняют так.

Выберите фрейм в окне документа или средствами палитры Frame* (Фреймы). айте команду File > Save Frame (Файл > Сохранить фрейм) или File > Save Frame As (Файл > Сохранить фрейм как).

Далее потребуется выполнить сохранения действия по выбору расположения, имен и расширений имен документов. Напомним, что все документы, относящиеся к структуре фреймов, представляют собой обычный гипертекст и должны быть сохранены с обычными для такого сорта информации расширениями имени (.HТM, .HTML и пр.).

Команда Save > All Frames (Сохранить > Все фреймы) сохраняет все документы, связанные с отдельными фреймами структуры, и сам структурный документ.

Рисунок Пример библиотечной структуры

Рисунок . 12.3. Пример библиотечной структуры

Split (Рассечение). Делит свободное пространство окна на четыре равные части и помещает текущую страницу в нижнюю правую область.

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

Стандартные библиотечные структуры разрешается вкладывать друг в друга. Для этого надо поместить курсор в область, подлежащую более глубокому разделению, и применить к ней одно из стандартных разбиений палитры Objects (Объекты).

Многие фреймовые области стандартных структур выглядят как вертикальные или горизонтальные полосы. По умолчанию программа Dreamweaver устанавливает ширину или высоту таких областей равной 80 пикселам. Чтобы изменить этот размер, достаточно зацепить указателем граничную линию и перетащить ее.

Рисунок Простая фреймовая структура

Рисунок . 12.1. Простая фреймовая структура

<html>

<head>

<titlе>Документ_с_фреймами</titlе>

</head>

</frameset>

</html>

Основной задачей дескриптора <frameset> является указание состава документа и способа расположения его элементов. Каждой независимой области страницы ставится в соответствие одиночный дескриптор <frame>, который описывает загружаемый в нее гипертекстовый документ. Полный адрес URL источника задается значением атрибута src. Это единственный обязательный атрибут дескриптора <frame>, без указания которого фреймовая структура не сможет правильно работать. Взаимные ссылки и работа многих программных средств во фреймовой среде требует назначения отдельным областям собственных имен. Имена фреймов присваиваются атрибуту name дескриптора <frame>. Этот необязательный атрибут в большинстве практических ситуаций является весьма желательным.

Фреймовая структура некоторыми своими свойствами напоминает таблицы, В частности, она может состоять из строк и столбцов. Способ разбиения главной страницы задается при помощи атрибутов cols и rows структурною дескриптора <frameset>. Так, дескриптор

задает разбиение на три столбца, а дескриптор

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

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

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

Часто на Web-страницах используется стандартная планировка, когда навигационные кнопки располагаются в левом столбце фиксированной ширины, а правый занимает основное содержимое страницы. Подобная система измерения задается при помощи специального символа * (звездочка), который означает “все свободное пространство”. В приведенном ниже примере задается структура из двух столбцов: левый имеет ширину в 100 пикселов, а правому отводится весь остаток свободного пространства, абсолютная величина которого зависит от размеров окна броузера:

<framesеt cols="100,*">

Этот символ можно использовать и для задания пропорциональной ширины столбцов или строк. Например, дескриптор

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

Создание фреймов

2.2. Создание фреймов

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

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

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

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

Создание предопределенных структур

Для использования на гипертекстовой странице предопределенной фреймовой структуры надо действовать следующим образом.

Поместите текстовый курсор на страницу, выбранную для разбиения. Откройте палитру Objects (Объекты) (CTRL+F2) и перейдите в paздел Frames (Фреймы) (Рисунок 12.2). Аналогичных результатов можно добиться и при помощи команды Insert > Frames (Вставка > Фреймы), но работать с палитрой в данном случае удобнее.

Выбор фреймов

12.3. Выбор фреймов

Созданная структура и все составляющие фреймы представляют собой <отдельные гипертекстовые документы, которые программа Dreamweaver отображает в общем рабочем окне. Чтобы внести изменения в отдельные документы или модифицировать всю систему разбиения на независимые области, необходимо сначала выбрать соответствующий объект. Можно сделать это непосредственно в окне документа или воспользоваться специальной палитрой, предназначенной для выбора элементов фреймовой структуры.

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

Информационное наполнение

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

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

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

Эта процедура описывается следующей последовательностью действий.

Дайте команду File > New from Template (Файл > Создать на основе шаблона) и создайте страницу, дублирующую дизайн шаблона, подлежащего изменению. Сохраните страницу под любым именем в виде обычного документа. Разорвите связь страницы с родительским шаблоном. Для этого дайте команду Modify > Templates > Detach from Template (Изменить > Шаблоны > Разорвать связь с шаблоном). После этого шага у нас есть точная копия шаблона без ограничений на применение редакторских операций. Внесите в страницу все необходимые изменения. Сохраните готовую страницу в формате шаблона Dreamweaver. Для этого дайте команду File > Save as Template (Файл > Сохранить как шаблон). В принципе можно сразу выбрать для нового шаблона то же имя, что было у старого. Но это решение необратимо: оно способно привести к краху всего проекта, если в новом шаблоне окажутся ошибки или даже мелкие несогласованности. Поэтому имеет смысл сохранить шаблон под другим именем, например my_template_new.dwt, если имя старого шаблона было my_template.dwt. Создайте на новом шаблоне редактируемые области. Их расположение и имена должны быть такими же, как на старом образце. Эту задачу решает команда Modify > Templates > New Editable Region (Изменить > Шаблоны > Новая редактируемая область). Очень важно, чтобы количество и названия редактируемых областей нового шаблона в точности совпадали со старым образцом. Операции переформатирования документов при назначении нового шаблона базируются на соответствии открытых областей. По завершению этих операций сохраните шаблон и выйдите из программы Dreamweaver. Средствами операционной системы найдите папку, содержащую оба шаблона, и переименуйте их. Старый можно, например, назвать my_template_backup.dwt, а новый должен получить имя my_template.dwt вместо my_template_new.dwt. Такое переименование позволяет осуществить замену старого шаблона новым. Запустите программу Dreamweaver и откройте новую редакцию шаблона — my_template_new.dwt. Дайте команду Modify > Templates > Update Pages (Изменить > Шаблоны > Обновить страницы), которая актуализирует все страницы, связанные с данным образцом.

Если в процессе обновления страниц произошла ошибка или выявились несогласованности планировки или форматирования, то, имея резервную копию старого шаблона (my_template_backup.dwt), можно выполнить откат и вернуться предыдущему варианту оформления всех или только избранных страниц.

Вставка динамических сценариев

Динамические сценарии (behaviors) — это очень удобное средство создания динамических эффектов на гипертекстовых страницах. Динамическое поведение, которое требуется сообщить текстовому или графическому объекту, программируется на языке JavaScript или VBScript. Эти короткие программы должны быть написаны и отработаны заранее и внедрены в исходный текст гипертекстового документа. Для записи текста программ может быть использовано тело документа или раздел заголовков. Если документ создан на основе шаблона, то его раздел заголовков закрыт для редактирования. Исключением является короткий фрагмент doctitle, хранящий заголовок документа. Логично предположить, что запись программных кодов в блокированную часть раздела заголовков может окончиться неудачей.

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

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

Чтобы гарантировать безболезненную “имплантацию” кодовых фрагментов в закрытый раздел заголовков документа, требуется внести правки в родительский шаблон. В чем они заключаются? В раздел заголовков шаблона вводится дополнительная открытая область для хранения кодовых последовательностей динамических сценариев. Эта операция выполняется следующим образом.

Откройте шаблон. Откройте окно Инспектор кода. Для этого можно воспользоваться командой Window > Code Inspector (Окно > Инспектор кода) или клавишей F10. Поместите текстовый курсор непосредственно перед закрывающим дескриптором </head>. Введите с клавиатуры следующий фрагмент кода.

<mm:editable>

</mm:edilable>

<mm:editable>

<!—Любой комментарий, который будет

уничтожен программой —>

</mm:editable>

Сохраните изменения в шаблоне и подтвердите обновление связанных страниц.

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

Ссылки на шаблонах

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

Напомним способы построения гипертекстовых адресов, принятые в программе. Существует два принципиально различных подхода к целеуказанию объектов: абсолютная и относительная адресация. При абсолютной адресации местоположение объекта задается его полным адресом, которым, в зависимости от ситуации, может быть адрес URL или полный путь поиска файла. Метод относительной адресации использует для целеуказания некоторую точку отсчета в файловой системе — своеобразное начало координат. Программа Dreamweaver разрешает отсчет относительных адресов от положения текущего документа или от корневой папки Web-узла. В зависимости от выбранной точки отсчета, относительные адреса делятся на две группы. В сопроводительной документации на программу они называются document-relative (относительно документа) и root-relative (относительно корневой папки). Точный перевод этих терминов на русский язык весьма громоздок, хотя и часто употребляется в технической литературе. Будем называть метод root-relative корневой адресацией, a document-relative —относительной адресацией. Такое упрощение имеет под собой достаточно серьезные основания. Задание адресов ссылочных объектов от положения текущего документа — это наименее жесткий и самый неустойчивый способ адресации, поэтому есть все основания именовать его относительным.

Напомним кратко основные особенности каждого из методов адресации. Создать ссылку на внешний объект или ресурс, не принадлежащий данному локальному или удаленному сайту, можно только записав его полный абсолютный адрес URL. В этой области такой способ не имеет альтернатив, поэтому остается только принять все издержки, связанные с его применением

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

Обязательным условием применения относительной адресации является сохранение файлов источника и ссылки в системе папок, вложенных в корневой каталог локального узла. Программы просмотра, по крайней мере самые популярные из них — Internet Explorer и Netscape Navigator, не могут работать с корневыми адресами. Документ, в котором гипертекстовые связи заданы от корня, можно просмотреть только после загрузки его на удаленный сервер. Программа Dreamweaver использует специальную подстановку адресов, чтобы разрешить просмотр таких документов в броузерах. Область действия этой подстановки — один гипертекстовый переход. Перемещение по цепочке связей, заданных при помощи корневого способа адресации, способно привести к ошибке.

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

Для абсолютных и корневых адресов “смена прописки” источника не имеет значения, поскольку первые вообще не имеют точки отсчета, а для вторых эти функции выполняет корневая папка узла, которая своего положения не меняла. Относительные адреса записываются от положения документа-источника и являются чувствительными к изменению его положения. Программа Dreamweaver отслеживает перемещения документов, созданных на основе шаблона, и автоматически меняет все относительные адреса в соответствии с текущим положением документа.

Программа располагает несколькими техническими приемами создания гипертекстовой ссылки. Все они подробно рассмотрены в главе, посвященной ссылкам. При задании ссылок на шаблонах следует использовать ссылочный маркер-указатель палитры Property Inspector (Инспектор свойств) или задавать их при помощи диалогового окна Select File (Выбор файла). Напомним, что оба эти средства управления располагаются на палитре в разделе Link (Ссылка).

Маркер представляется в виде кружка с перекрестием. Для создания ссылки его надо просто перетащить его на целевой файл в окне Диспетчера узла. Диалоговое окно Select File (Выбор файла) вызывается щелчком по значку папки.

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

Палитра Property Inspector (Инспектор свойств) разрешает вводить любые адреса вручную. Однако этот способ слишком обязывающий: он требует от пользователя, во-первых, аккуратности, а во-вторых, точного представления о расположении всех составляющих гиперссылки (шаблона, документа-источника, целевого файла) в файловой системе. Для узла с разветвленной системой папок и их глубоким вложением такой способ легко может привести к ошибке. Создание гиперсвязей при помощи тех простых полуавтоматических средств целеуказания, которыми располагает программа, страхует пользователя от любых неожиданностей.

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

Изменение шаблона

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

Чтобы изменить шаблон, на котором основывается открытый документ, надо дать команду Modify > Templates > Open Attached Template (Изменить > Шаблоны > Открыть присоединенный шаблон).

Файл шаблона можно открыть так.

Откройте палитру Assets (Ресурсы) и перейдите в ее раздел Templates (Шаблоны). Для этого проще всего дать команду Window > Templates (Окно > Шаблоны). Палитра представляет имена всех шаблонов текущего узла и показывает эскиз выбранного документа. Выберите имя нужного шаблона. Загрузите выбранный шаблон в окно документа для редактирования. Существует, по крайней мере, четыре способа это сделать: кнопка Edit (Правка) в нижней части палитры; одноименная команда меню палитры; одноименная команда контекстного меню, которое Открывается щелчке правой кнопкой мыши; двойной щелчок на имени шаблона.

Большая часть ресурсов программы применяется и при редактировании шаблонов. После внесения в документ необходимых изменений надо сохранить новую версию шаблона. Для этого надо дать штатную команду программы File > Save (Файл > Сохранить).

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

Переименование шаблона выполняется следующим образом.

Откройте палитру Assets (Ресурсы) и перейдите в раздел Templates (Шаблоны). Выберите имя шаблона в палитре и после некоторой паузы щелкните на имени второй раз. Введите новое имя. Подтвердите операцию нажатием клавиши ENTER. Программа Dreamweaver выведет запрос на обновление связанных с шаблоном документов. Чтобы обновить все документы, созданные на основе шаблона, надо щелкнуть на кнопке Update (Обновить). Если процедуру обновления следует отложить, щелкните на кнопке Don't Update (He обновлять). В этом случае каждую страницу, связанную с шаблоном, можно обновить в индивидуальном порядке при помощи команды Modify > Templates > Update (Изменить > Шаблоны > Обновить).

Удаление отработанных шаблонов выполняется следующим образом.

Выберите имя шаблона в палитре Assets (Ресурсы). Дайте команду Delete (Удалить). Эта команда представлена в меню палитры и в контекстном меню. Ей также соответствует командная кнопка в нижней части палитры ресурсов.

После удаления шаблона документы, созданные на его основе, не претерпят никаких изменений ни по виду, ни по сути. Они сохраняют даже заданное родительским шаблоном деление на блокированные и редактируемые области. Чтобы перевести такие документы в обычную форму HTML, надо дать команду разъединения с шаблоном: Modify > Templates > Detach from Template (Изменить > Шаблоны > Разорвать связь с шаблоном).

Обновление документов

14.5. Обновление документов

Ранее неоднократно отмечалось, что изменения шаблона влекут за собой согласованные изменения документов, созданных на его основе. Изменения шаблона вступают в действие после сохранения новой версии. После этой операции программа предложит выполнить обновление связанных страниц. Для настройки процедуры обновления выводится диалоговое окно Update Pages (Обновление страниц), показанное на Рисунок 14.1. Работа с этим окном рассматривалась в начале этой главы в разделе “Создание шаблонов”.

Шаблоны можно открывать как обычные гипертекстовые документы командой File > Open (Файл > Открыть). Кроме того, программа располагает специализированной командой открытия шаблонов. Чтобы загрузить в окно документа шаблон текущей страницы, следует дать команду Modify > Templates > Open Attached Template (Изменить > Шаблоны > Открыть присоединенный шаблон).

В любой момент работы с гипертекстовым документом можно применить те изменения, которые внесены в шаблон, но по каким-то причинам не распространены на Web-страницу. Для этого следует дать команду Modify > Templates > Update Pages (Изменить > Шаблоны >> Обновить страницы) или Modify > Templates > Update Current Page (Изменить > Шаблоны > Обновить текущую страницу).

Эти способы обновления отличаются от описанных в начале данного раздела только одной деталью. Процедуру обновления надо запустить щелчком по кнопке Start (Начать) в диалоговом окне Update Pages (Обновление страниц).

Гипертекстовые страницы, которые создаются командой File > New (Файл > Создать) — это пустые документы, полностью лишенные каких-либо элементов декоративного оформления. Применительно к этим объектам представление о форматировании по шаблону кажется лишенным оснований. На самом деле такие страницы создаются на основе единого образца, которым является шаблон с именем Default.htm. Он расположен в папке Configuration\Templates, вложенной в папку, в которую установлена программа. Этот документ можно открыть обычным для программы Dreamweaver способом и внести в него необходимые коррективы. Сделанные правки переносятся на все новые страницы.

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

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

Любой вновь созданный шаблон является полностью открытым объектом — при применении операций форматирования и информационного наполнения он ведет себя подобно обычной странице HTML Гипертекстовые документы, созданные на его основе, наследуют все свойства родительского объекта, кроме заголовка, то есть содержимого парного дескриптора <title>.

Рисунок Диалоговое окно создания

Применить разработанный шаблон к существующему документу можно следующим образом.

Откройте документ. Дайте команду применения шаблона. Это можно сделать несколькими способами. Если дать команду Modify > Templates > Apply Template to Page (Изменить > Шаблоны > Применить шаблон к странице), откроется диалоговое окно (Рисунок 14.3), в котором надо выбрать имя шаблона и щелкнуть на кнопке Select (Выбрать). Можно открыть палитру Assets (Ресурсы), перейти в раздел Templates (Шаблоны), выбрать шаблон и щелкнуть в палитре на кнопке Apply (Применить). Можно перетащить значок шаблона из палитры Assets (Ресурсы) в окно документа, при этом документ должен находиться в режиме Design View (Режим планировки).

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

Ситуация немного осложняется при применении шаблона к документу с непустым содержимым. В этом случае он наследует дизайн и планировку выбранного образца, а его прежнее информационное наполнение конвертируется в общую редактируемую область. Программа предлагает выбрать одну из существующих областей шаблона для сохранения исходного контента. Для этого отображается диалоговое окно Choose Editable Region for Orphaned Content (Выбрать редактируемую область для непривязанного содержимого), в котором перечислены имена всех редактируемых областей. Пользователь может выбрать любую их них или отказаться от сохранения контента, выбрав пункт (попе) (Нет).

Самые большие проблемы возникают при применении шаблона к документу, созданному на основе другого шаблона. Правила трансляции строятся на соответствии редактируемых областей документа и нового образца. Все открытые области документа получают новое оформление, заимствованное от “одноименных источников” шаблона. Области, для которых не нашлось подобных аналогов, считаются потерянными (orphaned). Программа предлагает записать их содержимое в одну из редактируемых областей нового шаблона. Заблокированные области документа удаляются, а к документу добавляются все закрытые зоны нового образца. Новые открытые области, которые не имеют аналогов в рабочей области документа, добавляются без каких-либо изменений.

Переформатирование больших документов по новому шаблону — это рискованная процедура. Вероятность ошибки резко возрастает с увеличением числа редактируемых областей и усложнением дизайна. Если применение нового образца не привело к ожидаемым результатам, то процедуру можно отменить командой Edit > Undo Apply Templates (Правка > Отменить применение шаблона) или при помощи стандартной клавиатурной комбинации CTRL+Z.

Все открытые области документа, которые не имеют одноименных аналогов на новом шаблоне, записываются в одну редактируемую область. Имя этой области надо выбрать в диалоговом окне Choose Editable Region for Orphaned Content (Выбрать редактируемую область для не привязанного содержимого), показанном на Рисунок 14.4. Если требуется оформить по новому образцу документ с развитой системой редактируемых областей и богатым форматированием, целесообразно ввести в состав шаблона специальную область для хранения всех потерянных областей.

Можно назвать типичной ситуацию, когда все попытки внести изменения в редактируемую область документа оканчиваются неудачей. Самой вероятной причиной этого является некорректное определение в шаблоне границ открытой области. Так, область станет недоступной, если определить ее границы по невидимым дескрипторам: <font>, <img> и пр.

Рисунок Шаблон с двумя редактируемыми областями

Рисунок . 14.2. Шаблон с двумя редактируемыми областями

Существует общее правило расположения областей, согласно которому редактируемый фрагмент должен представлять собой часть документа, ограниченную парными дескрипторами. Например, это может быть вся таблица (<table> </table>) или ячейка таблицы (<td> </td>). Программа Dreamweaver не различает выбора ячейки таблицы или содержимого ячейки. Такой выбор считается эквивалентным.

Слои и их наполнение — это разные объекты. Объявить открытым слой – значит, дать возможность менять его положение в пределах документа; открыть содержимое слоя — значит, сделать все объекты, расположенные на нем, доступными для изменений.

Имена всех созданных редактируемых областей шаблона отображаются в меню, которое открывается командой Modify > Templates (Изменить > Шаблоны). Эти имена представляют команды перехода в редактируемые области документа.

Можно не только объявить открытой выделенную область шаблона, но и вставить новую, первоначально пустую, область, свободную для наполнения и форматирования.

Откройте шаблон и поместите текстовый курсор в позицию вставки. Дайте команду Modify > Templates > New Editable Region (Изменить > Шаблоны > Новая редактируемая область). В одноименном диалоговом окне введите имя новой области. Подтвердите создание области щелчком на кнопке ОК. В позиции текстового курсора появится пустая область, которая первоначально представлена именем, заключенным в фигурные скобки. И в шаблоне, и во всех документах, созданных на его основе, это символическое обозначение можно заменить надлежащим контентом: текстом или графикой. На рисунке 14.2 показана одна пустая область; она называется Empty.

Любой документ, сохраненный в формате шаблона, автоматически получает одну открытую область под названием doctitle. Это область хранения заголовка шаблона. Чтобы изменить предлагаемый по умолчанию заголовок Untitled Document надо, например, открыть диалоговое окно настроек страницы (CTRL+J) и в поле Title (Заголовок) ввести нужное название.

Операция создания открытой области обратима. Заблокировать открытую область шаблона можно следующим образом.

Откройте шаблон. Дайте команду Modify > Templates > Remove Editable Region (Изменить > Шаблоны > Удалить редактируемую область). Откроется одноименное диалоговое окно, в котором надо выбрать имя области и подтвердить операцию щелчком на кнопке ОК. Эта операция удаляет все признаки редактируемой области, оставляя неизменным ее содержимое.

Следует отметить одну техническую деталь операции блокировании Ранее отмечалось, что любая пустая редактируемая область помечается в рабочем поле шаблона именем, заключенным в фигурные скобки. Команда Remove Editable Region (Удалить редактируемую область) успешно работает с такими областями: она удаляет все признаки редактируемой области, но оставляет имя, которое становится просто частью текста. На шаблоне это имя можно убрать вручную. Чтобы исключить его из всех порожденных шаблоном документов, следует выполнить команду обновления.

Рисунок Создание шаблона

Рисунок . 14.1. Создание шаблона

Щелкните на кнопке Save (Сохранить).

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

После сохранения документа в виде шаблона программа Dreamweaver вставляет в строку заголовка пометку “Template”, которая напоминает о роли документа.

“С чистого листа” шаблоны создаются несколько иначе.

Дайте команду Windows > Templates (Окно > Шаблоны). На экране появится палитра Assets (Ресурсы) с активным разделом Templates (Шаблоны). Дайте на палитре команду New Template (Новый шаблон). Эта команда – один из пунктов меню, открываемого щелчком на треугольной кнопке справа. В центральной части палитры появится значок нового шаблона с именем, которое программа присвоит ему по умолчанию. Для него можно сразу же ввести содержательное наименование. Откройте новый пустой шаблон двойным щелчком на его имени в палитре Assets (Ресурсы).

Шаблоны

14. Шаблоны

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

Шаблон — это матрица, способная к неограниченному воспроизводству клонов — документов. Документы, созданные по шаблону, наследуют все его признаки форматирования, стили, планировку страниц, внедренные объекты и многое другое. Кроме того, они сохраняют связь с родительским объектом. Изменения, внесенные в шаблон, влекут за собой обновление дизайна всех порожденных документов. Подобная индукция не всегда выгодна. Программа Dreamweaver располагает специальными средствами, которые позволяют разорвать “пуповину”, связывающую шаблон и созданные на его основе документы.

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

Какие цели преследует такое разделение? Часто периодические сетевые издания или виртуальные проекты коллективной разработки можно разделить на постоянную и переменную части. Постоянная часть повторяется в каждом отдельном документе и является носителем фирменного стиля или единой структуры проекта. Например, таковы рубрикация сетевого периодического журнала или фирменный логотип на страницах технического руководства. Подобные фрагменты целесообразно включать в шаблоны и объявлять областями, закрытыми для внесения редакторских изменений Открытые области страниц хранят переменную информацию, то есть сведения, которые отличаются высокой динамикой изменений. Создание контента таких областей выполняется обычными средствами.

Страницы, созданные на основе шаблона, сохраняют связь с родительским объектом после завершения разработки и даже после публикации. Изменения, внесенные в блокированные области шаблона, переносятся на все порожденные гипертекстовые страницы. Эту связь можно разорвать. Программа располагает специальной командой, которая “отчуждает” гипертекстовую страницу от шаблона и превращает их в совершенно независимые объекты.

Шаблоны — это не единственное средство поддержки согласованного дизайна и коллективной разработки больших проектов. Сходные задачи решают библиотеки и включения стороны сервера, которые часто в изданиях на русском языке именуются английской аббревиатурой SSI (Server-Side Include).

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

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

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

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

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

Создание документов по шаблонам

14.4. Создание документов по шаблонам

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

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

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

Механизм связи с шаблоном определяется флажком Update Page when Template Changes (Обновлять страницу при изменении шаблона). Этот флажок расположен в диалоговом окне, которое программа отображает при создании нового документа.

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

Дайте команду File > New From Templates (Файл > Создать документ на основе шаблона). По этой команде отображается диалоговое окно Select Template

(Выбор шаблона) (Рисунок 14.3), в котором следует выполнить все необходимые настройки. Рассмотрим их.

В раскрывающемся списке Site (Сайт) можно выбрать <>Web-узел. Список Templates (Шаблоны) содержит все шаблоны выбранного узла. Флажок Update Page when Template Changes (Обновлять страницу при изменении шаблона) управляет будущим обновлением страницы. Командная кнопка Select (Выбрать) завершает процедуру выбора шаблона документа. Щелкните на кнопке Select (Выбрать) или нажмите клавишу ENTER.

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

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

Объявить область шаблона редактируемой можно так.

Загрузите шаблон в окно программы и выберите в нем область, которую требуется открыть для редактирования. Дайте нужную команду. Как и большую часть технических действий в программе, эту команду можно выполнить несколькими разными способами. Перечислим их: команда Modify > Templates > New Editable Region (Изменить > Шаблоны > Новая редактируемая область). щелчок правой кнопки мыши на выбранном фрагменте и выбор из открывшегося контекстного меню команды New Editable Region (Новая редактируемая область). комбинация клавиш CTRL+ALT+V. Откроется диалоговое окно New Editable Region (Новая редактируемая область), в котором надо ввести имя новой области и подтвердить операцию щелчком на кнопке ОК.

В именах редактируемых областей допускается использовать пробелы, но запрещаются следующие специальные символы: ? (вопросительный знак), “(двойная кавычка)," (апостроф), < и > (угловые скобки).

Редактируемые области шаблона выделяются специальным прямоугольником, охватывающим все внутренние объекты. Кроме того, каждая область имеет уникальное имя, которое выводится на специальном ярлычке в верхнем левом углу этого прямоугольника (Рисунок 14.2).

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

14.1. Создание шаблонов

Новый шаблон можно создать на основе существующего гипертекстового документа или разработать “с нуля”. Программа Dreamweaver хранит шаблоны в файлах с расширением .DWT в специально отведенной для этих целей папке Templates, вложенной в корневую папку сайта. Эта папка автоматически создается программой, как только разработан и сохранен первый такой документ.

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

Дополнительную информацию о шаблоне можно сохранить в комментариях разработчика, которые связываются только с ним и не наследуются порожденными документами. Большинство операций по созданию планировки и информационному наполнению шаблонов выполняется в режиме Design View (Режим планировки). Наиболее типичной причиной недоступности нужных команд при работе с такими объектами является неправильный режим отображения страниц.

Несколько замечаний по поводу тактики создания шаблонов. Если на обычных гипертекстовых страницах графические и текстовые “заглушки” — это временная мера, допустимая только на определенных стадиях разработки, то для шаблонов их применение не только целесообразно, но часто и необходимо. Макеты текстовых фрагментов и графических образов позволяет сохранить планировку документа, они также служат напоминанием о необходимости включения на данные позиции постоянных объектов определенного типа.

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

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

Когда гипертекстовый документ сохраняется в формате шаблона, его заголовочная часть блокируется, то есть становится защищенной от внесения изменений. Часть кода иерархических стилевых спецификаций и динамических сценариев располагается в области действия дескриптора <head> Коли на порожденных страницах предполагается использовать эти возможности динамического HTML, то все необходимые описания следует заранее внести в раздел заголовков шаблона.

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

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

Откройте документ командой File > Open (Файл > Открыть). Внесите в документ необходимые правки. Дайте команду File > Save as Template (Файл > Сохранить как шаблон). Откроется диалоговое окно (Рисунок 14.1), в котором надо выбрать Web узел и название нового шаблона.

Визуализация шаблонов и документов

14.3. Визуализация шаблонов и документов

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

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

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

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

Открытые области кода заключаются программой внутрь специальных дескрипторных скобок, которые с точки зрения языка гипертекстовой разметки представляют собой комментарии. Следующий фрагмент дает пример оформления пустой редактируемой области из примера, приведенного на Рисунок 14.2:

<!— #BeginEditable “Empty” —>{Empty}<!— #EndEditable —>

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

Дайте команду Edit > Preferences (Правка > Настройки), которая открывает доступ к базовым настройкам программы. В диалоговом окне Preferences (Настройки) перейдите в раздел Highlighting (Выделение). Установите необходимые цвета в разделах Editable Regions (Редактируемые области) и Locked Regions (Заблокированные области). Завершите процедуру щелчком на кнопке ОК.

Служебная разметка шаблонов отображается на экране только при выполнении двух условий. Во-первых, в диалоговом окне настроек программы должны быть установлены флажки Editable Regions (Редактируемые области) и Locked Regions (Заблокированные области). Во-вторых, надо разрешить отображение вспомогательных элементов макета страницы. Это можно сделать с помощью команды View > Visual Aids > Invisible Elements (Вид > Служебная разметка > Скрытые элементы).