Dreamweaver 4

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

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

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

Поместите текстовый курсор в форму.

Дайте команду Insert > Form Objects > File Field (Вставка > Объекты формы > Файловое поле).

Откройте палитру Property Inspector (Инспектор свойств) и выполните настройку файлового поля. Рассмотрим немногочисленные параметры этого объекта.

FileField Name (Имя файлового поля). Раздел палитры служит для ввода уникального имени файлового поля.

Char Width (Ширина в символах). Максимальное число символом, которые одновременно отображаются в файловом поле.

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

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

Формы

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

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

Атрибут action задает способ обработки полученной формы. Его значением может быть адрес URL программного средства, предназначенного для обработки содержимого формы, или адрес электронной почты для ее пересылки.

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

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

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

, <select> и <input>. 
Дескриптор <textarea> предназначен для ввода больших массивов текстовой информации. Объем вводимого текста не ограничен; кроме того, пользователь имеет возможность указать ширину и высоту области ввода. 
Дескриптор <select> используется для создания раскрывающегося списка или списка с полосой прокрутки. Дескриптор является контейнером, внутрь которого заключаются описания всех пунктов. 
 Дескриптор <input> является одиночным тегом. Это одно из самых полезных средств организации форм. С помощью этого дескриптора можно создавать самые разные структурные элементы: флажки, кнопки отправки, ноля для ввода пароля, флажки, текстовые поля, переключатели и пр. Тип структурного элемента задается при помощи атрибута type. Например, дескриптор 
<input type="submit" name="Send_button" value="Переслать"> 
создает кнопку с надписью Переслать, предназначенную для отправки сообщений на сервер. 
<h1>Графические кнопки</h1>
Стандартные кнопки Submit (Отправка), Reset (Сброс), а также кнопки, построенные на их основе, не отличаются стильным дизайном. Их казенное оформление подходит не для любого гипертекстового документа, претендующего на художественность и стиль. Разработчик Web-страниц не обязан использовать только предопределенные кнопки; он имеет возможность создать командную кнопку на основе любого растрового изображения. 
<li>Поместите курсор в место, выбранное для размещения графической кнопки.</li> 
<li>Дайте команду Insert > Form Objects > Image Field (Вставка > Объекты формы > Графическое поле). Появится диалоговое окно Select Image Source (Выбор изображения).</li> 
<li>При помощи этого окна выберите нужное изображение. После того как графическая основа управляющей кнопки создана, с ней требуется связать определенную программную функцию. Некоторый выбор простых функций предоставляет палитра Behaviors (Режимы) (Shift+F3). Функции, обеспечивающие сложное или нестандартное поведение кнопки, пользователю придется создавать вручную или разыскивать на бескрайних просторах всемирной сети Интернет.</li> 
Дополнительные настройки графической кнопки, к которым открывает доступ Инспектор свойств, полностью совпадают с настройками обычных растровых изображений. 
<h1>Кнопки</h1>
Кнопки — это средства управления интерактивными формами. Они активизируют пересылку данных и сбрасывают неверно набранную информацию. Эти функции управляющих кнопок являются штатными. Разработчик стра ницы может связать с кнопками форм любые дополнительные функции или команды, при условии, что написаны соответствующие программы. Две кнопки: Submit (Отправить) и Reset (Очистить) зарезервированы по названию и функциям. Эта стандартизация выходит за пределы программы и распространяется на язык гипертекстовой разметки. Первая кнопка запускает процедуру пересылки содержимого формы по указанному в поле Action (Действие) адресу, которым может быть адрес URL обрабатывающей программы или адрес электронной почты. Методом пересылки обычно является Post. Кнопка Reset (Сброс) сбрасывает текущие значения полей формы, что позволяет внести коррективы при наличии ошибок. Эти структурные элементы форм кодируются при помощи дескриптора <input>. Следующий фрагмент кода дает пример описания кнопки сброса: 
<input type="reset" name="Имя_кнопки" value="Reset"> 
Чтобы вставить кнопку, используется команда Insert > Form Objects > Button (Вставка > Объекты формы > Кнопка). 
Основная работа по редактированию и настройке кнопок выполняется сpeдствами палитры Property Inspector (Инспектор свойств). Перечислим доступны параметры настройки. 
<li>Button Name (Имя кнопки). Имя кнопки.</li> 
<li>Label (Надпись). Надпись на кнопке. По умолчанию эта надпись совпадает с типом кнопки. Пользователь может задать в этом разделе палитры любое подходящее название, например вместо Submit набрать слово Отправить.</li> 
<li>Reset form (Очистить форму). Этот переключатель назначает данному объекту функцию очистки полей формы. По щелчку на кнопке вся информация, введенная в текстовые поля формы, удаляется.</li> 
<li>Submit form (Отправить форму). Этот переключатель связывает с данным объектом функцию пересылки данных. По щелчку на кнопке данные формы передаются на сервер.</li> 
<li>None (Нет). Этот переключатель означает, что с данной кнопкой не связывается никакое поведение. Щелчок на кнопке не запускает программ и не вызывает никаких изменений в состоянии формы. Если кнопка должна выполнять нестандартные функции, следует выбрать именно этот вариант.</li> 
 <img src="image/11-1-vstavka-form_1.gif" alt="Кнопки"> Для кнопок с нестандартными функциями требуется прямое ручное редактирование исходного текста документа. При помощи палитры задаются ее имя, надпись и “пустое поведение” (None). Число различных программных функций, которые можно связать командной кнопкой, слишком велико, чтобы дать их представительное описание в коротком paзделе. Чаще всего такие функции пишутся на языке JavaScript и вызываются по щелчку на командной кнопке. В этом случае примерное описание может выглядеть следующим образом: 
<input type="button" name="Имя_кнопки" value="yes" onClick="doFunction()"> 
где сама функция описана в разделе <script>. 
<h1>Обработка форм</h1>
Данные, собранные формой, могут обрабатываться на стороне клиента или на стороне сервера. Простейшие формы не требуют сложных алгоритмов--с их информационным обслуживанием способны справиться программы, действующие на стороне клиента. Для их программирования обычно используют языки JavaScript или VBScript, а программы на этих языках часто называют сценариями. Для развернутой, глубокой информационной обработки приходится привлекать более мощные программные средства, которые пишутся на полнофункциональных современных языках программирования, таких как Perl, Java, C++ и пр. Подобные программы работают на стороне сервера, поэтому данные формы приходится пересылать на его адрес. Пусть, например, создана простая форма, состоящая из двух переключателей со значениями Yes (Да) и No (Нет), и кнопки Submit (Отправка), которая обеспечивает пересылку данных. Будем считать, что с переключателями связаны разные сообщения, которые должны выводиться при щелчке на кнопке Submit (Отправка). 
 Эта простая задача решается при помощи короткой процедуры, написанной на языке JavaScript. Описание этой процедуры можно поместить непосредственно в раздел заголовков гипертекстового документа. Приведем возможный текст программы. 
function processForm(){ 
if (document.forms[0].elements[0].checked){ 
alert("Yes"); 
}else{ 
alert("No"); 
} 
} 
Связать с формой эту функцию обработки можно следующим образом. 
<li>Выберите кнопку Submit (Отправка).</li> 
<li>Откройте палитру Behaviors (Режимы) (SHIFT+F3).</li> 
<li>Щелчком на кнопке со знаком + откройте меню, содержащее список доступных режимов работы объектов.</li> 
<li>Выберите режим Call JavaScript (Вызов функции JavaScript).</li> 
<li>В одноименном диалоговом окне введите имя функции обработки формы. В приведенном примере это имя processForm ().</li> 
<li>Добавьте описание функции в раздел заголовков гипертекстового документа внутрь парного дескриптора <script>.</li> 
С помощью сценариев, работающих на стороне клиента, можно решить множество разнообразных задач, но два обстоятельства существенно ограничивают область применения этих программных средств. Во-первых, клиентские программы не могут сохранять данные. Во-вторых, они не способны переслать информацию на сервер для дальнейшей обработки. 
 
 Практически неограниченными возможностями по информационной o6pаботке данных, собранных формами, обладают так называемые сценарии СC1. 
Стандарт CGI (Common Gateway Interface) — это общепринятый способ связи внешней прикладной программы с информационным сервером. С помощью этого интерфейса можно создавать программы CGI, иногда называемые шлюзами, которые способны выполнить любое преобразование информации, полученной от формы. 
 Программа CGI запускается сервером и работает в реальном масштабе времени. Сервер обеспечивает передачу запроса пользователя программе и возвращает результат ее работы на клиентский компьютер. Программы CCI пишутся на самых разнообразных языках программирования: С/С ++, Fortran, Perl, PHP,Java, Unix Shell и пр. Исполняемые модули таких программ, как правило, хранятся на сервере в каталоге cgi-bin. 
<h1>Переключатели и флажки</h1>
Механизм выбора пользователя на Web-страничке реализуется обычно при помощи элементов управления двух типов: переключателей (radio button) и флажков (check box). Первые дают возможность выбрать только один вариант из совокупности предложенных, вторые допускают множественный выбор альтернатив (рис. 11.4). 
 Эти структурные элементы форм не только имеют близкие области применения, их способы кодирования тоже очень похожи друг на друга. В исходном тексте страницы HTML они представляются дескриптором <input> с разными значениями атрибутов. Так, строка 
<input type="checkbox" name="Имя_флажка" value="checkbox"> 
<img src="image/11-4.jpg" alt="Переключатели и флажки"> 
Рис. 11.4. Переключатель и флажок 
описывает флажок, а строка 
<input type="radio" name="Имя_переключателя" value="radiobutton"> 
это возможный вариант кодирования переключателя. 
Для вставки переключателя надо дать команду Insert > Form Objects > Radio Button (Вставка > Объекты форм > Переключатель). Флажок создается командой Check Box (Флажок) того же меню. Кроме того, оба объекта представлены кнопками в разделе Form (Форма) палитры объектов. 
Как и с любым структурным элементом формы, с переключателями и флажками могут быть связаны текстовые комментарии, поясняющие их роль и положение. Для этого надо поместить курсор в непосредственной близости от объекта и ввести поясняющий текст. 
Число дополнительных настроек минимально. Палитра Property Inspector (Инспектор свойств) разрешает задать имя переключателя или флажка и установить начальное состояние этих объектов. Для этого в разделе палитры Initial State (Начальное состояние) надо выбрать один из следующих вариантов. 
<li>Checked (Помеченный). Устанавливает данный переключатель или флажок сразу после загрузки страницы.</li> 
<li>Unchecked (Непомеченный). Сбрасывает переключатель или или флажок.</li> 
<img src="image/11-1-vstavka-form_1.gif" alt="Переключатели и флажки">Переключатели считаются индивидуальными элементами, поэтому каждый их них должен иметь уникальное имя, которое задается в поле CheckBox (Флажок) Инспектора свойств. Переключатели обычно образуют логически связанные группы. Все переключатели в группе должны иметь одинаковое имя и согласованные значения. 
Переключатели и флажки редко встречаются на гипертекстовых страницах поодиночке. Чтобы реализовать выбор из нескольких возможных альтернатив, форма должна содержать серию таких объектов. Для вставки нескольких кнопок или переключателей удобно использовать буфер обмена или перетаскивание образца при нажатой клавише CTRL. 
<h1>Режимы работы форм</h1>
С объектами гипертекстового документа разрешается связывать специальные программы, которые вносят на страницу или в ее окружение динамические изменения. Они запускаются на выполнение при наступлении определенных событий, которыми могут быть щелчки мыши, наведение указателя, нажатие клавиш и пр. Это короткие программы, написанные, как правило, на языке JavaScript, называются в программе behaviors. Будем называть их динамическими сценариями или просто сценариями. Процедура присваивания сценария объекту гипертекстовой страницы довольно проста, все необходимые операции выполняются при помощи палитры Behaviors (Режимы) (SHIFT+F3). 
Форме и ее структурным составляющим можно назначить разные динамические сценарии, но только два из них являются специализированными, поскольку предназначены для работы только с объектами данного типа. Это сценарии Validate Form (Проверить форму) и Set Text of Text Field (Поместить текст в поле). Первая процедура позволяет проверить правильность данных, введенных в форму, вторая процедура позволяет заполнить текстовое поле формы заданным содержимым. 
Для корректной работы динамических сценариев требуется, чтобы все объекты гипертекстового документа имели уникальные имена. Совпадение имен способно привести к аварийному завершению работы сценария с непредсказуемыми результатами для просматриваемой страницы. 
<img src="image/11-1-vstavka-form_1.gif" alt="Режимы работы форм">Одним из самых полезных и часто применяемых структурных элементов форм является меню переходов (Jump Menu). Этот объект позволяет представить серию команд гипертекстового перехода в виде списка или меню. По способу кодирования и расположению в системе команд про граммы меню переходов представляет собой структурный элемент формы. Однако его “формообразующая природа” не является заметной для пользователя, который работает над созданием навигационной системы гипертекстового документа. По выполняемым функциям и тактике использования меню переходов напоминает скорее карту ссылок или систему навигационных кнопок. Поэтому работа с этими объектами рассмотрена в главе “Ссылки”. 
<h1>Скрытое поле</h1>
При передаче данных формы на сервер часто требуется пополнить их некоторой служебной информацией, скрытой от посетителей страницы. Это могут быть значения некоторых переменных для программ CGI, информация о перенаправлении и пр. Для пересылки подобных сведений используются гак называемые скрытые поля. Процедура вставки этих объектов не имеет заметных отличий от вставки прочих структурных составляющих форм. 
 Дайте команду Insert > Form Objects > Hidden Field (Вставка > Объекты формы > Скрытое поле). На гипертекстовой странице скрытое поле отображается в виде специального значка, который виден только в редакторе, но не отображается программами просмотра. Отображением этого символа специальной разметки управляет команда View > Visual Aids > Invisible Elements (Вид > Служебная разметка > Скрытые элементы). Кодируется скрытое поле при помощи дескриптора <input>, например: 
<input type="hidden" name="Имя_поля"> 
<h1>Создание меню</h1>
В языке HTML меню и списки кодируются при помощи парного дескриптора <select>, внутрь которого вкладываются теги вида <option>, описывающие отдельные пункты или команды меню. Например, следующий фрагмент кода создает простейшее меню из двух пунктов: 
<select name="Имя_меню"> 
 <optionvalue="мажор">до</оption> 
 <option value="минор">pe</option> 
</select> 
Создать меню можно следующим образом. 
<li>Поместите текстовый курсор внутрь формы.</li> 
<li>Дайте команду Insert > Form Objects > List/Menu (Вставка > Объекты формы > Список/Меню) или щелкните на одноименной кнопке, расположенной в разделе Form (Форма) палитры объектов. В результате в форму добавляется заготовка меню, не содержащая ни одного пункта. Следующие шаги имеют целью информационное наполнение меню.</li> 
<li>Не снимая выбора с меню, откройте палитру Property Inspector (Инспектор свойств) (CTRL+F3).</li> 
<li>В поле List/Menu (Список/Меню) введите уникальное имя объекта.</li> 
<li>Щелчком на кнопке List Values (Пункты списка) откройте одноименное диалоговое окно, предназначенное для создания пунктов меню (рис. 11.7).</li> 
<img src="image/11-7.jpg" alt="Создание меню"> 
Рис. 10.7. Диалоговое окно List Values (Пункты списка) 
<li>Средствами диалогового окна List Values (Пункты списка) создать систему пунктов меню. Рассмотрим основные принципы работы с этим окном. Каждый пункт меню состоит из названия (Label), которое задается в левом столбце, и значения (Value) в правом столбце. Для выбора пунктов удобно использовать клавишу TAB или указатель мыши. В меню пункты представляются названиями. После того как пользователь выбрал один из пунктов и активизировал команду пересылки, значение этого пункта передается на сервер для дальнейшей обработки. Кнопка со знаком + служит для создания нового пункта. Его название и значение вводится с клавиатуры. Кнопка со знаком — удаляет текущий пункт. Кнопки со стрелками меняют последовательность пунктов меню. Щелчок на кнопке ОК заканчивает работу с этим диалоговым окном.</li> 
<li>В поле List/Menu (Список/Меню) введите уникальное имя объекта.</li> 
<li>В списке Initially Selected (Первоначальный выбор) выберите пункт, который будет отображаться в поле раскрывающегося списка при первоначальной загрузке страницы.</li> 
<img src="image/11-1-vstavka-form_1.gif" alt="Создание меню">Каждый раздел меню описывается двумя идентификаторами: именем (Label) и значением (Value). Имя представляет раздел в меню и является обязательной частью его описания. Значение пересылается на сервер для дальнейшей обработки. Эта составляющая описания является факультативной и может быть опущена. В этом случае ее функции также будет выполнять имя пункта меню. 
<h1>Создание списков</h1>
В начале данного раздела упоминалось о том, что списки и меню — это однородные объекты, имеющие сходную систему кодирования и общую команду вставки. Все видимые различия этих объектов не имеют принципиального значения и являются, по сути, декоративными, оформительскими. Перечислим их. Во-первых, списки располагают линейками прокрутки, которые позволяют перемещаться между отдельными пунктами списка. Во-вторых, дизайнер имеет возможность управлять высотой списка. В зависимости от ситуации он может увеличивать или уменьшать число пунктов, одновременно отображаемых в области списка. В-третьих, в случае списка можно разрешить одновременный выбор нескольких пунктов. 
 Команда Insert > Form Objects > List/Menu (Вставка > Объекты формы > Список/ Меню) размещает на странице пустую заготовку, которая превращается в список или меню в зависимости от настроек, выбранных с помощью Инспектора свойств. Чтобы создать список, надо установить в палитре Property Inspector (Инспектор свойств) флажок List (Список). 
 Для информационного наполнения пустого списка надо щелчком на кнопке List Value (Пункты списка) открыть диалоговое окно, показанное на рис. 10.7, и задать названия и значения пунктов списка. Техника работы с этим диалоговым окном рассмотрена в предыдущем разделе. 
 Несколько дополнительных настроек списков расположены на палитре Property Inspector (Инспектор свойств). Рассмотрим их. 
<li>List/Menu (Список/Меню). Здесь задается имя списка.</li> 
<li>Height (Высота). Число строк, отображаемых в списке одновременно.</li> 
<li>Selections: Allow multiple (Множественный выбор). Этот флажок управляет режимом множественного выбора. Если он установлен, то в списке можно выбрать несколько пунктов одновременно и эта возможность сохраняется при отображении страницы в программе просмотра.</li> 
<li>Initially Selected (Первоначальный выбор). Этот раздел палитры позволяет указать первоначально выбранные пункты списка. Для выбора смежных пунктов надо удерживать нажатой клавишу SHIFT. Групповой выбор отдельных пунктов выполняется при нажатой клавише CTRL.</li> 
<img src="image/11-1-vstavka-form_1.gif" alt="Создание списков">Если сбросить флажок Selections: Allow multiple (Множественный выбор) и задать высоту списка равной единице, то список выглядит как меню, Пустое поле Height (Высота) означает, что вопрос о высоте списка оставляется на усмотрение программы просмотра. Броузер Internet Explorer одновременно отображает четыре пункта, а программа Netscape Navigator выводит все пункты списка. 
 Не существует параметра, предназначенного для регулирования ширины списков и меню. Горизонтальные размеры этих объектов автоматически подгоняются под объем текста. Увеличить ширину можно посредством вставки требуемого количества символов неразрывного пробела ( ), причем этот символ надо ставить непосредственно в исходный текст списка или меню в режиме отображения кодов. 
<h1>Списки и меню</h1>
Списки и меню – это структурные элементы форм, которые позволяют выбрать один из множества предложенных вариантов. Эти элементы управления, хорошо знакомые любому пользователю операционной системы Windows, дают возможность реализовать механизм выбора в более компактной форме, нежели наборы переключателей или флажков. 
<img src="image/11-5.jpg" alt="Списки и меню"> 
Рис. 11.5. Раскрывающийся список 
С точки зрения разработчиков программы, раскрывающийся список (меню) (рис. 11.5) и список с линейками прокрутки (рис. 11.6) — это похожие объекты 
со сходной технологией создания и редактирования. Они реализуют один и тот же принцип выбора, а различаются только требованиями к свободному пространству. Раскрывающийся список — это более экономный элемент управления, чем обычный список, которому, в общем случае, требуется большее пространство на гипертекстовой странице. 
<img src="image/11-6.jpg" alt="Списки и меню"> 
Рис. 11.6. Список с полосами прокрутки 
<h1>Текстовое поле Multi Line</h1>
Для ввода большого количества текстовой информации следует использовать поля типа Multi Line (Многострочное). Чтобы создать объект этого типа, требуется разместить на странице текстовое поле, например командой Insert > Form Objects > Text Field (Вставка > Объекты форм > Текстовое поле), открыть инспектор свойств и выбрать в этой палитре переключатель Multi Line (Многострочное). В результате обычное поле, состоящее из одной строки, преобразуется в многострочное, длина которого составляет 18 символов, а высота — 3 строки. 
 Эта команда не только меняет внешний вид текстового поля, но преобразует кодовую форму его представления. Многострочные поля кодируются в языке HTML при помощи дескриптора <textarea>. Пример простейшего описания дает следующий фрагмент кода: 
<textarea name="Имя_поля"><textаrea> 
Вся дополнительная настройка объектов этого типа выполняется, как и прежде, средствами палитры Property Inspector (Инспектор свойств). Рассмотрим ее возможности. 
<li>TextField (Текстовое поле). Собственное уникальное имя многострочного поля.</li> 
<li>Char Width (Ширина в символах). Ширина текстового поля, заданная в символах.</li> 
<li>Num Lines (Число строк). Количество строк текстового поля.</li> 
<li>Int Val (Начальное значение). Начальное значение поля. Информация, введенная в этом разделе, выводится в поле при первой загрузке страницы.</li> 
<li>Wrap (Перенос по словам). Список способов переноса текста в многостраничном текстовом поле. Он состоит из трех пунктов.</li> 
<li>Default (По умолчанию). По умолчанию принимается правило, согласно которому текст, достигший правого края поля, не переносится. Пользователь имеет возможность оборвать строчку нажатием клавиши ENTER.</li> 
<li>Virtual (Виртуальный перенос). Выбор этого пункта включает перенос только на экране. Сообщение, введенное в форму с такой настройкой, отправляется на сервер в виде одной строки.</li> 
<li>Physical (Фактический перенос). В этом режиме перенос по словам отображается на экране и сохраняет символы перехода на новую строку при отправке на сервер.</li> 
<h1>Текстовое поле Password</h1>
Обычный способ ввода, который кажется единственно возможным начинающему пользователю, профессиональные программисты называют иногда эхо-вводом. Существуют ситуации, когда целесообразно подавить эхо-вывод введенных символов. Чаще всего такая необходимость возникает при вводе конфиденциальной информации, например паролей или ключевых слов. 
В текстовом поле Password (Пароль) введенная информация представляется в виде звездочек. Это самое заметное отличие полей этого типа от простых текстовых полей, рассмотренных в предыдущем разделе. Способы кодирования в HTML этих объектов также очень похожи. Например, поле Password (Пароль) может быть задано следующей строкой кода: 
<input type="password" name="Имя_поля"> 
Кроме того, для этих двух типов полей полностью совпадают по смыслу и по названиям все дополнительные настройки, которые доступны в палитре Property Inspector (Инспектор свойств). 
<h1>Текстовые поля</h1>
Текстовое поле — это область формы, в которую пользователь может ввести ответ на запрос или произвольное информационное сообщение. 
Текстовые поля бывают трех видов (рис. 11.3). 
<li>Single line (Однострочное). Служит для набора коротких сообщений или ответов.</li> 
<li>Multi line (Многострочное). Предназначено для ввода сообщений произвольной длины.</li> 
<li>Password (Пароль). Служит для ввода пароля.</li> 
 Все три вида текстовых полей вставляются в форму при помощи одной и той же команды. Выбор типа выполняется средствами палитры Property Inspector (Инспектор свойств). За это отвечают три переключателя с теми же названиями, что и у самих объектов. 
<img src="image/11-3.jpg" alt="Текстовые поля"> 
Рис. 11.3. Типы текстовых полей 
Текстовое поле Single line 
Простое текстовое поле, состоящее из одной строки, кодируется при помощи дескриптора <input>. Простой пример такого объекта дает сведущая строка кода: 
<input type="text" name="Имя_поля"> 
где атрибут type задает тип поля, а атрибут name — имя объекта. 
Число дополнительных настроек простого текстового поля невелико. Рассмотрим их. 
<li>TextField (Текстовое поле). Этот раздел палитры служит для задания имени текстового поля. Правила ввода таких имен обычные. Нельзя использовать специальные символы и задавать повторяющиеся имена. Не рекомендуется оставлять данный раздел пустым.</li> 
<li>Char Width (Ширина в символах). Ширина текстового поля, измеренная в символах. По умолчанию этот размер составляет примерно 20 символов. Точная длина поля устанавливается в программе просмотра.</li> 
<li>Max Chars (Максимальный объем). Максимальное число символов, которое можно ввести в текстовое поле. Если поле для ввода этого значения оставить пустым, то длина пользовательского ввода не ограничивается.</li> 
<li>Init Val (Начальное значение). В это поле можно ввести текстовую строку, которую программа просмотра выведет после первой загрузки страницы. Это может быть подсказка или наиболее вероятное значение текстового поля.</li> 
<h1>Вставка форм</h1>
Формы вставляются в документ подобно другим объектам программы. Сначала надо поместить курсор в то место документа, которое выбрано для 
<img src="image/11-1.jpg" alt="Вставка форм"> 
Рис. 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 (Вставка > Объекты формы). При попытке вставить структурный элемент на свободное пространство страницы программа отображает окно, в котором предлагает добавить дескриптор формы. Если пользователь ответит согласием, то контейнер создается автоматически. 
Перечислим все структурные составляющие форм. 
<li>Text Field (Текстовое поле). Этот элемент управления предназначен ввода текста, который может отображаться в одну строку (single /line), в несколько строк (multi line) или представляться звездочками (password).</li> 
<li>Button (Кнопка). Кнопка инициирует выполнение заданных действий, Это может быть команда отправки данных на сервер или восстановление исходных значений полей формы. Название кнопки можно менять.</li> 
<li>Check Box (Флажок). Этот элемент управления позволяет включить или отключить какой-то режим или выбрать один из двух вариантой ответа на вопрос (да или нет).</li> 
<li>Radio Button (Переключатель). Группа переключателей позволяет выбрать один вариант из предложенного набора.</li> 
 
<li>List/Menu (Список/Меню). Создает стандартный элемент управления приложений Windows — раскрывающийся или обычный список. Этот объект может содержать полосы прокрутки. Он служит для выбора одного или нескольких вариантов из предложенного набора.</li> 
<li>File Field (Файловое поле). Предназначено для ввода или поиска имени файла. Процедура поиска запускается щелчком на кнопке Browse (Обзор), расположенной справа от этого поля.</li> 
<li>Image Field (Графическое поле). Используется для вставки в форму рисунка.</li> 
<li>Hidden Field (Скрытое поле). Может хранить информацию, которая не вводится пользователем, но требуется процедурой обработки содержимого формы. В качестве примера можно назвать дату заполнения формы.</li> 
<li>Jump Menu (Меню переходов). Создает меню, каждый пункт которого представляет собой команду гипертекстового перехода.</li> 
Большинство структурных элементов форм не требует работы с диалоговыми окнами. Исключением является меню переходов, работа с которым рассмотрена в главе, посвященной гипертекстовым ссылкам. 
Дополнительная настройка и редактирование формы и ее составляющих выполняется при помощи палитры Property Inspector (Инспектор свойств) (CTRL+F3). Если выбрать форму целиком, то Инспектор свойств откроет доступ к общим настройкам, относящимся ко всему объекту. Таковых всего три. 
<li>Form name (Имя формы). Текстовое поле для ввода собственного имени формы.</li> 
<li>Action (Действие). Поле для задания адреса URL или адреса электронной почты.</li> 
<li>Method (Метод). Этот список определяет способ передачи содержимого формы. Он состоит из трех пунктов: Get, Post и Default. В первом случае информация, введенная в форму, присоединяется к адресу URL. Большим недостатком этого способа является ограниченный объем послания. Оно не может превышать 8192 символа. Сообщения большего объема автоматически обрезаются, что может привести к непредсказуемым последствиям. В большинстве случаев следует использовать метод Post, который пересылает данные в специальном сообщении и поэтому не имеет столь жестких ограничений по объему. Вариант Default оставляет выбор метода пересылки на усмотрение программы просмотра. Обычно таким методом является Get.</li> 
 
 Следует отметить некоторые особенности поведения форм на гипертекстовой странице. 
<li>Размеры форм меняются автоматически, в зависимости от количества структурных элементов. Пользователь не может растянуть или сжать форму, как таблицу или рисунок.</li> 
<li>Формы не имеют реальной границы. Красным пунктиром помечается их воображаемый контур. Этот вспомогательный элемент облегчает пользователю ориентацию на странице, насыщенной различными объектами. В программах просмотра он не отображается.</li> 
<li>Формы и таблицы разрешается вкладывать друг в друга, причем каждый из этих объектов может выполнять функции контейнера для друтого.</li> 
<li>Формы разрешается размещать на слоях. Несколько слоев могут хранить несколько различных форм.</li> 
<img src="image/11-1-vstavka-form_1.gif" alt="Вставка форм">Ширина текстовых полей формы определяется в языке HTML в единицах символов моноширинного шрифта. В таких шрифтах на все символы, независимо от их истинных габаритов, отводятся равные порции пространства. Пояснения к полям и их названия представляются обычно пропорциональными шрифтами, у которых ширина символа зависит от его графического начертания. Это противоречие осложняет решение задач выравнивания содержимого форм. Какие рецепты решения этой проблемы может предложить язык гипертекстовой разметки? 
 Неплохие результаты дает использование предварительно отформатированного текста. Напомним, что текст, заключенный в парный дескриптор <рrе>, сохраняет свои габариты по горизонтали и наборы пробелов между буквами и словами. У такого текста кратные пробелы не поглощаются, что позволяет простыми средствами добиться удовлетворительного выравнивания по горизонтали. Раньше программы просмотра представляли предварительно отформатированный текст при помощи моноширинного шрифта Courier, чьи эстетические достоинства многими Web-дизайнерами ставятся под сомнение. Последние версии броузеров (начиная примерно с третьей) позволяют выбрать шрифтовое начертание для подобных фрагментов текста. 
 Для сложных форм, состоящих из нескольких текстовых полей, переключателей, флажков, наилучшее решение дает размещение в таблице. Параметры таблицы обеспечивают почти полный контроль вертикального и горизонтального положения структурных составляющих формы в ячейках. Подбирая значения полей (CellPad), интервалов (CellSpace) и типов выравнивания, можно добиться точной взаимной координации объектов формы (рис. 11.2). <img src="image/11-2.jpg" alt="Вставка форм"> 
Рис. 11.2. Расположение элементов формы в таблице 
<h1>
Dreamweaver 4
</h1>
<h1>Компоновка страницы</h1>
Пользователям текстовых редакторов и настольных издательских систем, привыкшим свободно распоряжаться рабочим пространством страницы, могут показаться странными те ограничения, которые накладывает язык гипертекстовой разметки на размещение текста и объектов. Так, верстальщик, работающий в системах QuarkXpress или FrameMaker, волен поместить в любое место страницы текстовый или графический блок; им не требуется никакая внешняя форма для привязки координат и резервирования “жизненного пространства”. Сама страница в пределах рабочей области, ограниченной установленными полями, является контейнером, свободным для наполнения его текстом или графикой. 
 Иначе обстоят дела в языке HTML и визуальных редакторах, предназначенных для работы с гипертекстовыми документами. Язык логической разметки в силу своей неметрической природы отдает предпочтение средствам относительного позиционирования объектов. В чистом языке HTML мало средств, позволяющих координировать объекты при помощи привязки к некоторой фиксированной системе отсчета. По этим причинам размещение объектов в пределах страницы HTML невозможно без предварительной подготовки, заключающейся в разбиении страницы на области, способные служить хранилищами текстовой или графической информации. Эта работа напоминает разлиновку чистой страницы, которая превращает ее в форму или бланк, чьи поля будут заполнены цифрами квартального отчета или данными производственной сводки. 
 Самыми удобными и мощными средствами предварительной компоновки гипертекстовой страницы являются таблицы и слои. Web-дизайнеры всегда знали о способности таблиц служить удобным средством макетирования и использовали их в этом качестве с появления первых версий языка гипертекстовой разметки. 
 Четвертая версия программы Dreamweaver сделала еще один шаг в этом направлении. В программе появился специальный режим Layout view (Макетирование), предназначенный для решения задач компоновки документов. Разработчику предоставляется удобный графический интерфейс и специальные средства, которые поддерживают естественный, интуитивный стиль создания страничного макета. Всю техническую сторону работы берет на себя программа. Она генерирует табличную структуру, которая обеспечивает созданную пользователем планировку страницы. 
 
 Следует отметить, что аналогичных результатов можно добиться, используя традиционную технику работы с таблицами, рассмотренную в предыдущей главе. Но режим макетирования с его специализированными инструментами дает возможность пользователю сосредоточиться на содержательных аспектах компоновки, освобождая его от технических деталей и рутинных процедур. 
В полиграфическом производстве макетом принято называть бумажные листы в формате будущего издания с расклеенными оттисками гранок текста и иллюстраций. По аналогии с традиционной печатной технологией будем называть макетированием режим работы программы, предназначенный для создания пространственной структуры страницы. 
Для перехода в этот режим требуется щелкнуть по кнопке Layout View (Макетирование), которая расположена в правом нижнем углу палитры Objects (Объекты) (CTRL+F2), показанной на рис. 10.1, или дать команду View > Table View > Layout View (Вид > Вид таблицы > Макетирование). Кроме того, команда имеет клавиатурный эквивалент — комбинацию клавиш CTRL+F6. Для возвращения в обычный режим планировки страницы достаточно щелкнуть по кнопке Standard View (Обычный режим) палитры Objects (Объекты). 
<img src="image/10-1.jpg" alt="Компоновка страницы"> 
10.1. Кнопки режима макетирования 
Программа извещает пользователя о предстоящем изменении режима работы и правилах его использования. Для этого она выводит диалоговое окно Getting Started in Layout View (Начало макетирования), показанное на рис. 10.2, в котором дает краткое описание основных инструментов. Чтобы запретить вывод окна в дальнейшем, надо установить флажок Don't show me this message again (Больше не показывать это сообщение). 
<img src="image/10-2.jpg" alt="Компоновка страницы"> 
Рис. 10.2. Информационное окно режима макетирования 
<h1>Макетные ячейки и таблицы</h1>
Основными строительными конструкциями макета страницы являются ячейки (layout cells) и таблицы (layout table). Макетная ячейка — это независимая прямоугольная область страницы, выполняющая функции хранилища информации. Макетная таблица служит для ячеек контейнером и координатной сеткой одновременно. В процессе планировки страницы роли между пользователем и программой распределяются следующим образом. Дизайнер в режиме, близком к рисованию, создает макетные ячейки, а программа Dreamweaver автоматически генерирует макетную таблицу, позволяющую реализовать авторскую компоновку страницы. 
Какие отношения существуют между ячейками, таблицами и страницами? 
Ячейки существуют изолированно от таблиц; каждая из них обязана принадлежать своему табличному контейнеру. Макетная таблица может состоять из нескольких ячеек, причем последние даже не обязаны быть смежными, то есть иметь общую границу. Каждая новая ячейка вписывается в существующую систему строк и столбцов или меняет разметку таблицы в соответствии со своими размерами и положением. На странице разрешается размещать несколько макетных таблиц, но их взаимное расположение жестко регламентируется программой. Наконец, можно создавать иерархические контейнеры, состоящие из макетных таблиц, вложенных друг в друга. 
<img src="image/10-1-maketnye-jachejki-i-tablicy_1.jpg" alt="Макетные ячейки и таблицы"> 
Рис. 10.3. Макетная таблица с двумя ячейками 
На рис. 10.3 показан пример простой таблицы, состоящий из двух макетных ячеек. В заголовках столбцов выводится их ширина в пикселях. Ярлычки, расположенные справа от указателей габаритов, открывают доступ к меню. 
Разрешается менять размеры ячеек и таблиц. Ячейки не могут перекрываться, поэтому изменение размеров отдельной клеточки способно повлиять на габариты ее соседей по макетной таблице. 
Таблицы разбивают пространство страницы на совершенно независимые монтажные области, обладающие свободой информационного наполнения и независимостью геометрических параметров. 
Компоновка страницы — это обычно первая операция в цикле работ по проектированию дизайна и информационному наполнению страницы. Поэтому выглядит обоснованным предположение о том, что средства макетирования применяются к изначально пустой странице. Но программа не запрещает создавать макетные таблицы и ячейки на странице с непустым содержанием. В этом случае новые макетные таблицы программа размещает в нижней части страницы, под ее исходным наполнением. Ранее созданные таблицы превращаются в макетные, а их клеточки становятся макетными ячейками. 
<h1>Настройки режима макетирования</h1>
Многие рассмотренные в предыдущих разделах этой главы свойства и параметры режима макетирования допускают изменение. Все доступные настроечные параметры расположены в разделе Layout View (Макетирование) диалогового окна Preferences (Настройки) (CTRL+U), открывающего доступ к основным изменяемым характеристикам программы. На рис. 10.8 показаны все настройки режима макетирования. Рассмотрим их. 
<img src="image/10-8.jpg" alt="Настройки режима макетирования"> 
Puc. 10.8. Настройки режима макетирования 
<li>Autoinsert Spacers When Making Autostretch Tables (Вставлять фиксаторы при включении автоподбора столбцов). При выборе этого переключателя программа автоматически размещает фиксаторы во всех столбцах с фиксированной шириной, если хотя бы для одного столбца выбран режим Autostretch (Автоподбор).</li> 
<li>Automsert Spacers Never (Не вставлять фиксаторы). Переключатель запрещает автоматическую расстановку фиксаторов.</li> 
<li>Spacer Image For Site (Фиксатор для сайта). Список служит для выбора сайта, со всеми документами которого требуется связать определенный графический фиксатор.</li> 
<li>Image File (Файл изображения). Выбор файла изображения для фиксатора.</li> 
<li>Cell Outline (Цвет рамки ячейки). Выбор цвета рамки макетной ячейки. По умолчанию для этих целей используется светло-голубой тон.</li> 
<li>Cell Highlight (Тон подсветки ячейки). Выбор тона для подсветки макетной ячейки. Граница ячейки меняет цвет при наведении на нее указателя мыши. По умолчанию в такой ситуации ячейка выделяется красным цветом.</li> 
<li>Table Outline (Цвет рамки таблицы). Выбор цвета рамки макетной таблицы.</li> 
<li>Table Background (Цвет фона таблицы). Выбор цвета фона макетной таблицы.</li> 
<h1>Редактирование таблиц и ячеек</h1>
Макетные ячейки и таблицы — это не застывшие формы; их можно редактировать. Для этого программа не предлагает принципиально новых возможностей. Арсенал средств редактирования макетных таблиц и ячеек представляет собой комбинацию хорошо знакомых технических приемов, основанных на элементарных операциях с мышью и стандартных клавиатурных сочетаниях. 
Приведем их краткое описание: 
<li>Выбор. Для выбора таблицы достаточно щелкнуть мышкой на любой точке фона. Чтобы выбрать ячейку, щелкните на ее границе или при нажатой клавише CTRL на любой точке фона.</li> 
<li>Удаление. Выбранная таблица или ячейка удаляется при помощи стандартных клавиш DELETE или BACKSPACE.</li> 
<li>Изменение размеров. Чтобы изменить размеры выбранного макетного объекта, надо зацепить мышкой граничный маркер и перетащить его. Маркер разрешается перемещать только на свободное место. Для ячейки это фон таблицы, для таблицы таковым служит свободная зона страницы.</li> 
<li>Перемещение. Перемещение выбранной ячейки выполняется при помощи курсорных клавиш. Если при этом удерживать нажатой клавишу SHIFT, скорость увеличится и составит десять пикселов за одно нажатие. Можно использовать и перетаскивание. Для этого надо зацепить мышкой любую точку границы ячейки.</li> 
 Более сложные операции форматирования и редактирования макетных таблиц и ячеек выполняются средствами палитры Property Inspector (Инспектор свойств). Напомним, что эта панель обладает свойством контекстной чувствительности, и, чтобы привести ее в состояние готовности, надо выбрать любой объект данного класса. 
<img src="image/10-4.jpg" alt="Редактирование таблиц и ячеек"> 
Рис. 10.4. Средства форматирования макетных ячеек 
Рассмотрим возможности палитры по форматированию макетных ячеек (рис. 10.4). 
Fixed (Фиксированная ширина). Задает фиксированную ширину ячейки. Значение вводится в поле справа от переключателя. Единица измерения — пиксели. 
<li>Autostretch (Автоподбор). Выбирает режим автоматического подбора ширины ячейки. В этом случае ячейка расширяется или сжимается таким образом, чтобы подогнать ширину под свободное пространство окна программы просмотра или редактора HTML.</li> 
 
<li>Height (Высота). Задает высоту ячейки в пикселах.</li> 
<li>Вg (Цвет фона). Служит для выбора цвета фона. Этот раздел реализован как стандартный инструмент программы, предназначенный для выбора цветов из палитры.</li> 
<li>Horz (Выравнивание по горизонтали). Выбирает вид выравнивания содержимого ячейки по горизонтали.</li> 
<li>Vert (Выравнивание по вертикали). Служит для выбора выравнивания содержимого ячейки по вертикали. Виды выравнивания, которые можно назначить в этих двух разделах палитры, совпадают с типами выравнивания обычных таблиц.</li> 
<li>No Wrap (Без переноса). Запрещает перенос текста на новую строку.</li> 
 Большая часть средств форматирования макетных таблиц находится в палитре Property Inspector (Инспектор свойств). На рис. 10.5 показано состояние, которое принимает эта палитра при выборе макетной таблицы. Многие инструменты форматирования таблиц и ячеек совпадают не только по смыслу и технике использования, но и по их изображению в палитре свойств (см. рис. 10.4 и рис. 10.5). Рассмотрим ресурсы, которые применяются только к таблицам. 
<li>CellPad (Поля). Как и для обычных таблиц, этот раздел хранит размер внутренних полей макетных ячеек.</li> 
<li>CellSpace (Интервалы). Свободное пространство между ячейками.</li> 
<li>Clear Row Heights (Сброс значений высоты строк). Это левая верхняя на четырех кнопок, расположенных в правой части палитры. Она убирает атрибут, отвечающий за высоту ячеек, из всех дескрипторов макетной таблицы и ее элементов. Снятие этого атрибута является, фактически, командой для автоматического подбора высоты, что приводит</li> 
<img src="image/10-5.jpg" alt="Редактирование таблиц и ячеек"> 
Рис. 10.5. Средства форматирования макетных таблиц 
к “вертикальной усадке” макетных ячеек. Таблица без макетных ячеек полностью сворачивается по вертикали. 
<li>Make Cell Widths Consistent (Согласовать ширину строк). Если в ячейку С фиксированной шириной ввести данные, горизонтальные габариты которых превосходят размер ячейки, то в заголовке столбца отображаются два числа. Первое указывает заданную ширину; это число присвоено атрибуту width дескриптора <td>. Второе число в скобках дает фактическое значение ширины. Эта кнопка обеспечивает обновление атрибутов ширины, которые получают новые значения, соответствующие текущим габаритам столбцов. Эта кнопка расположена вверху справа.</li> <li>Remove All Spacers (Удалить фиксаторы). Удаляет вспомогательные графические объекты, которые выполняют функции фиксаторов ширины столбцов. Кнопка расположена слева внизу.</li> 
<li>Remove Nesting (Удалить вложение). Устраняет вложение макетных таблиц. При этом макетные ячейки вложенных таблиц и их содержимое не исчезают, а становятся частью внешней таблицы. Кнопка расположена внизу справа.</li> 
<h1>Регулирование ширины ячеек</h1>
Существует два способа задания ширины для столбцов макетных таблиц и их ячеек. Первый из них называется в программе Fixed (Фиксированная ширина). Он подразумевает явное указание горизонтальных габаритов столбца. В большинстве случаев применяется именно такая система определения горизонтальных размеров. Второй способ носит название Autostretch (Автоподбор). Он основан на автоматическом изменении ширины столбцов. В этом случае программа самостоятельно выбирает ширину, опираясь на наличное свободное пространство окна броузера или гипертекстового редактора. 
Пусть некоторая гипертекстовая страница поделена на дна вертикальных раздела. В левом должно располагаться управляющее меню с навигационными кнопками, а правая часть страницы — это основной информационный раздел. Такая планировка реализуется при помощи простой макетной таблицы, состоящей из двух столбцов. Причем для левого столбца целесообразно выбрать фиксированный размер, а для правого установить режим автоподбора. Это решение обеспечивает доступность содержимого страницы и сохраняет наглядность навигационной системы всего документа. 
Способ задания ширины является общим для всех ячеек столбца макетной таблицы. Если выбрано фиксированное указание ширины, то в заголовочной части столбца выводится значение его горизонтальных габаритов в пикселах. Признаком автоматического изменения размеров служит волнистая линия в этой позиции. 
Изменить способ задания ширины столбца можно следующим образом. 
<li>Щелчком на ярлыке в заголовочной строке столбца откройте мет (рис. 10.6).</li> 
<img src="image/10-6.jpg" alt="Регулирование ширины ячеек"> 
Рис. 10.6. Меню настройки столбца макетной таблицы 
<li>Дайте команду Make Column Autostretch (Включить автоподбор ширины столбца), если требуется задать автоматический выбор размеров, и команду Make Column Fixed Width (Задать фиксированную ширину столбца) для установки фиксированной ширины.</li> 
 Столбцы, для которых задан режим автоматической регулировки ширины, в некоторых ситуациях способны до минимума сокращать размеры по горизонтали или даже полностью “схлопываться”. Небольшая ширина столбцов значительно затрудняет все операции с ними — даже простой выбор становится проблемой. Для сохранения размеров столбцов используются специальные “распорки”, именуемые в программе spacers (фиксаторы). Эту роль играют невидимые графические объекты. Программа размещает изображение-распорку в нижней ячейке столбца. Верхняя граница таких столбцов получает двойное подчеркивание. 
 
 Перед вставкой фиксатора требуется определить, какое изображение должно выполнять эти функции и где оно расположено. Одного такого объекта достаточно для всех документов Web-узла. Связать с сайтом графический файл, хранящий “распорку”, можно следующим образом. 
<li>Установите для любого столбца таблицы автоматическую регулировку ширины. В этом случае во все столбцы с фиксированной шириной программа самостоятельно поместит графические фиксаторы. Если эта операция должна быть выполнена только для определенного столбца, надо открыть меню щелчком на ярлыке в заголовке столбца и дать команду Add Spacer Image (Добавить графический фиксатор).</li> 
<li>При первом обращении к операции вставки фиксатора программа отображает диалоговое окно Choose Spacer Image (Выбрать фиксатор), показанное на рис. 10.7, в котором предлагает воспользоваться стандартным графическим фиксатором или выбрать для этих целей другое изображение. Для выбора первого варианта установите переключатель Create a spacer image file (Создать файл фиксатора), второй вариант выбирается при помощи переключателя Use an existing spacer image file (Использовать существующий фиксатор). В качестве стандартного фиксатора программа использует однопиксельное прозрачное изображение в формате GIF. Графический файл носит характерное имя spacer.gif. Специальным фиксатором может служить любое растровое изображение, записанное в одном из допустимых для WWW форматов. Программа самостоятельно изменяет масштаб рисунка, если его размеры не соответствуют требуемым габаритам. После масштабирования фиксатор получит следующие размеры: один пиксел по высоте и ширину, равную ширине столбца.</li> 
<li>Щелкните на кнопке ОК.</li> 
<img src="image/10-7.jpg" alt="Регулирование ширины ячеек"> 
Puc. 10.7. Установка фиксатора 
Чтобы вставить фиксатор в столбец, используется команда Add Spacer Image (Добавить фиксатор). Это второй пункт меню, открываемого при щелчке на треугольном ярлыке в заголовочной части столбца. В этом меню также есть две команды для удаления фиксаторов: Remove All Spacer Image (Удалить все фиксаторы) и Remove Spacer Image (Удалить фиксатор). Первая команда ликвидирует графические распорки во всех столбцах макетной таблицы, вторая освобождает только текущий столбец. 
<h1>Создание макетных объектов</h1>
Создание таблиц и ячеек своей техникой напоминает рисование обычных прямоугольников. Инструменты рисования становятся доступными только после перехода в режим макетирования. Для первой нарисованной ячейки программа автоматически порождает макетную таблицу, причем ее ширина совпадает с размером окна документа. 
Итак, нарисовать макетную ячейку можно следующим образом. 
<li>Перейдите в режим макетирования. Для этого щелкните на кнопке Layout View (Макетирование), расположенной в правой нижней части палитры объектов, или дайте команду View > Table View > Layout View (Вид > Вид таблицы > Макетирование).</li> 
<li>Выберите инструмент рисования макетных ячеек. Для этого щелкните на кнопке Draw Layout Cell (Рисование макетной ячейки) палитры объектов. Указатель мыши примет форму крестика, что является признаком готовности операции.</li> 
<li>Переведите указатель в место страницы, выбранное для размещения ячейки, и протягиванием задайте прямоугольник, соответствующий ее размерам.</li> 
<img src="image/10-2-sozdanie-maketnyh-obektov_1.gif" alt="Создание макетных объектов">После создания макетной ячейки указатель возвращается в свое обычное состояние. Чтобы нарисовать несколько ячеек, не выбирая повторно этот инструмент из палитры объектов, надо удерживать нажатой клавишу CTRL. 
Макетные ячейки и таблицы различаются не только по поведению и функциям, но и по внешнему виду. Перечислим все видимые отличия. 
<li>Цвет граничной рамки. По умолчанию таблицы получают зеленую границу, а ячейки обводятся рамкой синего цвета.</li> 
<li>Цвет фона. Табличный фон окрашен в серый цвет, что пользователями * Windows воспринимается как цвет неактивности, недоступности. Этот тон выбран не случайно: ввод данных непосредственно в таблицы запрещен. Ячейки имеют белый фон.</li> 
<li>Еще одним отличительным признаком макетных таблиц служит специальный корешок зеленого цвета, расположенный слева.</li> 
Новые ячейки должны быть вписаны в существующую систему строк и столбцов макетной таблицы. Эту задачу существенно упрощает режим захвата, который действует в окрестности границ и внутренних линий таблицы. Размер области притяжения равен восьми пикселям. Для временного отключения режима захвата надо удерживать нажатой клавишу ALT. 
 
 Если новая ячейка не вписывается в существующую систему разметочных линий таблицы, то программа создает новые горизонтальные и вертикальные линии по размерам “нестандартной” ячейки. Разрешается рисовать макетные ячейки, занимающие несколько столбцов или несколько строк. 
Какие операции с ячейками считаются нелегальными? Запретов немного, Во-первых, ячейки не могут перекрываться. Во-вторых, любая макетная ячейка должна принадлежать одной из макетных таблиц страницы; она не может занимать произвольную позицию на странице с непустым информационным наполнением. 
Создать новую макетную таблицу можно следующим образом. 
<li>Перейдите в режим макетирования (CTRL+F6).</li> 
<li>Выберите инструмент рисования таблиц. Для этого щелкните на кнопке Draw Layout Table (Рисование макетной таблицы), расположенной в нижней части палитры объектов.</li> 
<li>Переведите указатель мыши в место, где будет расположена таблица, и протягиванием укажите прямоугольник по ее размерам.</li> 
 Первая макетная таблица автоматически размещается в верхней части страницы слева. Чтобы создать несколько таблиц за один сеанс работы с инструментом, надо удерживать нажатой клавишу CTRL. Правила размещения и ограничения на взаимное положение макетных таблиц почти дословно повторяют все сказанное о макетных ячейках. Есть лишь одно существенное различие. Таблицы разрешается вкладывать в другие таблицы. 
<img src="image/10-2-sozdanie-maketnyh-obektov_1.gif" alt="Создание макетных объектов">Если страница не является пустой, то новая макетная таблица размещается в ее нижней части под ранее созданными объектами и текстом. 
Компоновку гипертекстовой страницы можно существенно упростить, если рисовать макетные таблицы и ячейки по разметочной сетке. Работа с этим элементом управления и его настройки рассматривались в разделе, посвященном гипертекстовым документам. Здесь напомним лишь несколько основных приемов. 
Разметочная сетка создает систему опорных линий (горизонтальных и вертикальных), которые облегчают позиционирование и выравнивание объектов. Точная взаимная координация — это одно из важнейших условий создания работоспособного макета страницы. 
 
 Для сетки можно включить режим притяжения или захвата (snap to grid). В этом случае объекты, расположенные возле опорных линий, притягиваются к ним и сохраняют свое положение при попытке выполнить небольшое смещение. 
 Все команды управления разметочной сеткой расположены в меню View > Grid (Вид > Разметочная сетка). Чтобы вывести ее на экран, дайте команду Show Grid (Показать сетку) из этого меню или воспользуйтесь комбинацией клавиш CTRL+ALT+G. Режим захвата активируется по команде Snap To Grid (Захват) или при помощи громоздкой клавиатурной комбинации CTRL+ALT+SHIFT+G. 
Наполнение макетных ячеек можно выполнять в любом режиме: Standard View (Обычный режим) или Layout View (Макетирование). Поведение ячеек в процессе создания контента почти не отличается от поведения ячеек обычных таблиц. Это и понятно, если вспомнить тот факт, что макетные таблицы представляют собой удобную графическую форму представления обычных таблиц, дополненную несколькими простыми сервисными функциями. 
<img src="image/10-2-sozdanie-maketnyh-obektov_1.gif" alt="Создание макетных объектов">При работе со сложными страницами с насыщенной неоднородной компоновкой целесообразно придерживаться следующей схемы. В режиме макетирования создайте основную “несущую конструкцию” страницы и внесите в главные макетные ячейки информацию о выполняемых функциях. Затем перейдите в стандартный режим и продолжите работу по созданию контента в этом режиме. 
<h1>
Dreamweaver 4
</h1>
<h1>Целеуказание ссылок</h1>
Фреймовые документы предоставляют разработчику возможность более глубокого контроля над ссылками, чем обычные гипертекстовые страницы. I !апример, можно задать визуализацию ссылок таким образом, чтобы они выводились в заданном фрейме той же страницы. Можно даже opгонизовать своеобразный навигационный центр, когда все ссылки локализованы и одном фрейме, который всегда видим и достижим для пользователя. 
Выбор определенного фрейма для вывода ссылки принято называть целеуказанием (targeting). Связь ссылки и фрейма выполняется средствами палитры Property Inspector (Инспектор свойств). При этом составляющие фреймового документа представляются своими именами. Без таковых прямое обращение к данной области невозможно, поэтому целесообразно всем фреймам документа давать собственные уникальные имена. 
Четыре имени зарезервированы: они фактически описывают не конкретные фреймовые области, а сценарии поведения программы просмотра или логические разделы текущей фреймовой структуры. Перечислим эти предопределенные логические имена. 
<li>blank. Новое пустое окно программы просмотра.</li> 
<li>_parent. Родительский фреймовый документ текущего фрейма.</li> 
<li>_self. Текущий фрейм.</li> 
<li>_top. Внешний документ текущего фрейма без разбиения на составные части.</li> 
Задать область загрузки ссылки можно следующим образом. 
<li>Выберите текст или изображение, которые служат представлением ссылки.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств).</li> 
<li>Задайте адрес ссылки в разделе палитры Link (Ссылка).</li> 
<li>Выберите область загрузки ссылки. Для этого раскройте список Target (Назначение) и выберите в нем одно из предопределенных или собственных фреймовых имен.</li> 
<img src="image/vybor-frejmov-v-okne-dokumenta_1.gif" alt="Целеуказание ссылок">Все заданные пользователем собственные имена фреймов программа Dreamweaver автоматически заносит в список Target (Назначение). Он не требует обновления; все изменения программа регистрирует самостоятельно. 
 Возможность выбора области загрузки ссылки — это мощное средство, которое при неосторожном ее использовании способно создать опасную ситуацию в процессе визуализации документа в программе просмотра. Пусть имеется фреймовый документ под названием main.htm. Предположим, что в одной из его областей существует ссылка на главный документ и для нее установлена опция целеуказания _self. Это означает, что главный документ загружается в один из своих фреймов. Каждый щелчок по такой ссылке вкладывает документ внутрь себя. Программы просмотра способны отработать несколько таких итераций, но глубокая рекурсия быстро приводит к исчерпанию вычислительных ресурсов и краху программы. 
<h1>Динамические сценарии</h1>
С фреймами разрешается связывать различные динамические сценарии: предустановленные, которые поставляются вместе с программой, и специальные, созданные сторонними разработчиками или фирмами. Напомним, что все технические действия по связыванию сценария и объекта выполняются при помощи палитры Behaviors (Режимы). 
 Различные причины побуждают авторов гипертекстовых страниц прибегать к помощи фреймов, но одним из главных мотивов является, видимо, дополнительный контроль положения текстовых и графических фрагментов. Среди стандартных сценариев, которые поставляются с редактором, есть несколько образцов, которые хорошо сочетаются с фреймами и способны облегчить управление содержимым гипертекстовой страницы. Перечислим эти сценарии. 
<li>Set Text of Frame (Установить текст фрейма). Этот сценарий выполняет замену текстового наполнения фрейма на содержимое, заданное пользователем. Новое содержимое может включать в себя любые коды и корректные разметки.</li> 
<li>Go to URL (Перейти по адресу). Открывает новую страницу в текущем окне или заданном фрейме. Этот сценарий особенно полезен в тех случаях, когда требуется изменить содержимое нескольких фреймов одним щелчком мыши.</li> 
<li>Insert Nav Bar Image (Вставить навигационную панель). Позволяет организовать навигацию во фреймовом документе в наглядной и удобной для пользователя форме.</li> 
<li>Insert Jump Menu (Вставить меню переходов). Это меню также служит для облегчения ориентировки пользователя в гипертекстовом документе, разбитом на фреймы.</li> 
<h1>Фреймы</h1>
Фрейм (frame) — это отдельная, самостоятельная область гипертекстовой страницы. По своим свойствам такие области напоминают вложенные миниброузеры. В разные фреймы одного окна программы просмотра можно загрузить отдельные файлы HTML и просматривать их независимо друг от друга. Для просмотра страниц фрейм предлагает собственные полосы прокрутки и общие для всего окна панель инструментов и меню. Фреймы впервые появились в программе Netscape Navigator 2.0 и первое время рассматривались как универсальное средство Web-дизайна, а многими разработчиками считались основой интерфейса будущего. Со временем волна неоправданных ожиданий улеглась и стали яснее достоинства и недостатки этого средства навигации по WWW. Сайты с фреймами имеют следующие преимущества. 
<li>При правильной организации работы они позволяют достичь некоторой экономии в объеме пересылаемой информации. Поскольку в отдельные фреймы могут быть загружены различные файлы, то при переходе по ссылке в одном фрейме содержимое прочих не требует обновления и передачи информации по Сети. Это преимущество не достигается автоматически, оно требует от разработчика осознания и целенаправленной подготовительной работы.</li> 
<li>При просмотре содержимого одного фрейма остальные сохраняют свое статическое состояние. Это дает возможность постоянно держать на экране важные фрагменты сайта, например навигационные кнопки, фирменный логотип и пр.</li> 
<li>В сайтах со сложной композицией и неоднородной многосвязной структурой фреймы дают разработчику возможность контролировать величину полей и привязку объектов.</li> 
Будет большим преувеличением сказать, что перечисленные проблемы получили исчерпывающее решение только с появлением фреймов. Задачи минимизации трафика, создания статических фрагментов страницы и точной взаимной координации объектов решаются и в рамках классической парадигмы Web-дизайна, без привлечения фреймов. Для этого требуется стимулирующая мотивация и некоторые дополнительные проектные мероприятия. 
 Итак, преимущества, которые дает применение фреймовой структуры, не являются уникальными; эквивалентных результатов можно добиться, оперируя привычными средствами и инструментами гипертекстовой разметки. Любое сильнодействующее средство имеет свои побочные эффекты, и фреймы не являются исключением из этого общего правила. Перечислим их главные недостатки. 
 
<li> Они резко ограничивают переносимость гипертекстовых страниц. Первые версии программ просмотра не знакомы с такими конструкциями, поэтому страницы с фреймовой организацией не отображаются старыми броузерами.</li> 
<li>Многие поисковые системы не индексируют страницы, разбитые на фреймы. Это не значит, что они обречены на забвение в Сети. Просто на стадии разработки автор должен провести дополнительные мероприятия, чтобы обеспечить доступность и цитируемость своего продукта.</li> 
<li>Часто интерфейс подобных страниц выглядит громоздким, а система навигации — запутанной. При переходах по ссылкам и загрузке новых документов в разные области окна программы просмотра состояние адресной строки не меняется. В ней всегда отображается адрес URL основного корневого документа. Это обстоятельство способно не только запутать малоопытного посетителя, но внести сумятицу в работу некоторых подсистем программы просмотра.</li> 
 С ростом масштабов узла, по мере усложнения содержимого гипертекстовых страниц, при высокой частоте обновления контента недостатки фреймов отступают на второй план. Доминирующим фактором становится удобство локального обновления. Многие сайты крупных корпораций, информационные порталы, Web-узлы новостных компаний построены на основе фреймов. 
<h1>Границы</h1>
Для разделения отдельных фреймов структуры программа Dreamweaver рисует граничные линии, толщина которых по умолчанию равна шести пикселам. При помощи палитры Property Inspector (Инспектор свойств) можно изменить большую часть параметров оформления граничных линий. 
<img src="image/vybor-frejmov-v-okne-dokumenta_1.gif" alt="Границы">Как и для таблиц, для фреймовых структур действует принцип приоритета частного над общим. Это значит, что параметры оформления границ, установленные для ячейки или вложенной структуры, отменяют в своей области общие установки, заданные для всей структуры. 
Отображением граничных линий управляют два раздела палитры: Borders (Границы) и Border Width (Толщина границы). 
 Первый раздел представляет собой список, объединяющий три значения Yes (Да), No (Нет), Default (По умолчанию). 
 Пункт Yes(Да) включает отображение границ. В этом случае и редакторе и программах просмотра они изображаются в псевдотрехмерном виде. 
 Пункт No (Нет) выключает визуализацию границ. В этом режиме граница отображается в программе Dreamweaver в виде плоских линий без иллюзии объема. В броузерах она вообще не отображается. 
 Пункт Default (По умолчанию) оставляет вопрос о граничных линиях фреймового документа на усмотрение программы просмотра. В этом случае редактор рисует выпуклые границы фреймов. 
 Второй раздел — это поле, задающее толщину границы в пикселах. Нулевой толщина означает, что граница не будет видна в программе просмотра. Чтобы она не отображалась в редакторе, требуется командой View > Visual Aids > Frame Borders (Вид > Служебная разметка > Границы фреймов) выключить отображение разделителей и границ фреймового документа. Если этот режим включен, то даже задание нулевой толщины границ не отменяет видимое разделение фреймов в окне документа. 
Для нового фреймового документа отображение границ по умолчанию включено, а их толщина составляет 6 пикселов (этой толщине соответствует пустое поле). 
Изменение цвета граничных и внутренних разделительных линий выполняется средствами раздела палитры Border Color (Цвет границы). Это стандартный по форме элемент программы с типовыми приемами работы, которые неоднократно рассматривались в предыдущих разделах книги, например, посвященных выбору цвета текста или фона таблицы. 
<img src="image/vybor-frejmov-v-okne-dokumenta_1.gif" alt="Границы">Результаты оформления документа, состоящего из нескольких вложенных фреймовых структур, зависят от текущего выбора. Напомним технический прием, который облегчает переход между уровнями фреймовой иерархии. Для перехода от вложенного документа к родительскому надо нажать комбинацию клавиш ALT+BBEPX. Аналогичная комбинация ALT+ВНИЗ выполняет перемещение в обратном направлении. 
 
Для отдельных фреймов разрешается задавать индивидуальные границы, отличающиеся по оформлению от общих границ, установленных для всей фреймовой структуры. 
Для этого надо выбрать фрейм и изменить значения полей Borders (Границы) и Border Color (Цвет границы) в палитре Property Inspector (Инспектор свойств). 
Выбор параметров оформления границ отдельных фреймов выполняется так же, как и для всей структуры. Техника работы с этими элементами управления рассмотрена в одном из предыдущих разделов, посвященном редактированию фреймовых структур. 
Параметры оформления, выбранные для отдельного фрейма, имеют приоритет над общими установками для всей структуры. Существуют очевидные ограничения, которые накладываются на возможные варианты оформления общей границы соседних областей фреймового документа. Разрешить возможные конфликты такого рода можно при помощи специальных приемов, которые разрешают задать разное оформление границы соседних областей. Видимо, самое чистое решение задачи дает использование для одного из соседних фреймов специального фонового рисунка с видимой границей. 
<h1>Имена</h1>
Отдельным фреймам структуры должны быть присвоены уникальные имена. Это, формально не обязательное, правило в большинстве случаев является совершенно необходимым, поскольку дает возможность организовать перекрестные ссылки между областями одной структуры и позволяет программам просмотра выполнить корректный разбор гипертекстового документа с вложенными фреймами. 
Присвоить фрейму собственное имя можно так. 
<li>Выберите фрейм.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств) (CTRL+F3), если она отсутствует на экране.</li> 
<li>Введите имя фрейма в поле Frame Name (Имя фрейма) (рис. 12.6). При этом должны быть выполнены следующие правила: 
</li> 
<li>имя фрейма должно быть представлено одним словом, использовать пробелы запрещается;</li> 
<li>следует ограничиться только обычными литерами: буквами и цифрами; использовать специальные символы, например двоеточие, дефис, кавычки и пр., нельзя — исключение составляет лишь символ подчеркивания (underscore);</li> 
<li>все имена должны быть уникальными;</li> 
<li>запрещается повторять зарезервированные имена _blank, _parent, _self, _top.</li> 
<h1>Кодирование фреймов</h1>
Для организации фреймовой структуры на гипертекстовой странице требуется создать несколько документов. 
<li>Должны быть подготовлены гипертекстовые документы, предназначенные для загрузки в отдельные области страницы.</li> 
<li>Необходимо создать документ, который задает общую структуру страницы. Его обычно называют структурным документом (framesеt document). Он задает число фреймов, их расположение на странице, габариты, совместные атрибуты и т. п. Структурный документ - это не совсем обычный объект, если рассматривать кодирование и визуализацию. Он не отображается в программе просмотра, поскольку не имеет самостоятельного содержимого, а только описывает фреймовую структуру. Этот документ кодируется при помощи парного дескриптора <frameset> </frameset>, который заменяет обязательный для обычных гипертекстовых документов дескриптор <body>. Например, ниже приведен листинг простейшего структурного документа, задающего разделение на два фрейма, а на рис. 12.1 показано его представление в программе просмотра.</li> 
<img src="image/12-1.jpg" alt="Кодирование фреймов"> 
Рис. 12.1. Простая фреймовая структура 
<html> 
<head>
<link rel="canonical" href="https://www.e-lave.ru//chapter.htm"/> 
<titlе>Документ_с_фреймами</titlе> 
</head> 
<frameset cols="l05,*"> 
<frame name="leftFrame" scrolling="yes" src="left.htm"> 
<frame name-'rightFrame" src="right.htm"> 
</frameset> 
</html> 
Основной задачей дескриптора <frameset> является указание состава документа и способа расположения его элементов. Каждой независимой области страницы ставится в соответствие одиночный дескриптор <frame>, который описывает загружаемый в нее гипертекстовый документ. Полный адрес URL источника задается значением атрибута src. Это единственный обязательный атрибут дескриптора <frame>, без указания которого фреймовая структура не сможет правильно работать. Взаимные ссылки и работа многих программных средств во фреймовой среде требует назначения отдельным областям собственных имен. Имена фреймов присваиваются атрибуту name дескриптора <frame>. Этот необязательный атрибут в большинстве практических ситуаций является весьма желательным. 
 
 Фреймовая структура некоторыми своими свойствами напоминает таблицы, В частности, она может состоять из строк и столбцов. Способ разбиения главной страницы задается при помощи атрибутов cols и rows структурною дескриптора <frameset>. Так, дескриптор 
<frameset cols=" 100,150,230" > 
задает разбиение на три столбца, а дескриптор 
<frameset cols="200,240" rows="300,400"> 
на два столбца и две строки. 
В приведенных примерах числовые значения атрибутов представляют собой габариты строк и столбцов, заданные в абсолютных единицах измерения – пикселах. Подобная система измерения не является единственной. Ширину столбцов и высоту строк можно задавать в процентах от доступного свободного пространства, которым располагает программа просмотра. В этом случае надо просто поставить символ процента после выбранного числового значения. Например, дескриптор 
<frameset rows="50%,50%"> 
задает разбиение на две равные по ширине строки, каждой из которых отводится ровно половина свободного пространства окна. 
Часто на Web-страницах используется стандартная планировка, когда навигационные кнопки располагаются в левом столбце фиксированной ширины, а правый занимает основное содержимое страницы. Подобная система измерения задается при помощи специального символа * (звездочка), который означает “все свободное пространство”. В приведенном ниже примере задается структура из двух столбцов: левый имеет ширину в 100 пикселов, а правому отводится весь остаток свободного пространства, абсолютная величина которого зависит от размеров окна броузера: 
<framesеt cols="100,*"> 
Этот символ можно использовать и для задания пропорциональной ширины столбцов или строк. Например, дескриптор 
<frameset rows="*,4*"> 
описывает структуру из двух строк, причем высота второй в четыре раза больше первой строки. 
<h1>Палитра фреймов</h1>
Палитра Frames (Фреймы) — это миниатюрное изображение фреймовой структуры документа. Она предоставляет информацию о положении отдельных составляющих структуры, их именах и размерах (рис. 12.4). С помощью палитры легко выполнять выбор фреймов. Кроме того, она делает наглядным вложение структур, которое не всегда легко просматривается в окне документа из-за наличия второстепенных деталей и посторонних объектов. Палитра располагает простыми средствами навигации по сложной фреймовой структуре. Область окна документа, в которой находится текстовый курсор и выполняются проектные операции, считается активной и выделяется в палитре подчеркиванием границ и названия. 
<img src="image/12-4.jpg" alt="Палитра фреймов"> 
Рис. 12.4. Палитра Frames (Фреймы) 
Чтобы открыть эту палитру, дайте команду Window > Frames (Окно > Фреймы) или просто нажмите комбинацию клавиш SHIFT+F2. 
Чтобы выбрать фрейм, надо просто щелкнуть на его изображении в палитре Frames (Фреймы). Для выбора всей структуры требуется щелкнуть мышкой на любой точке рамки, ограничивающей все фреймы в палитре. 
<h1>Поддержка старых броузеров</h1>
Не все программы просмотра, которые в настоящий момент находятся в обращении, поддерживают работу с фреймовыми документами. Так, броузер Netscape Navigator приобрел такую возможность только со второй версии, программа Internet Explorer — на одно поколение позже, только с третьей версии. 
 Язык HTML располагает специальным механизмом, который делает фреймовые документы доступными для подобных программ просмотра. Эти функции выполняет парный дескриптор <noframes>. В этом контейнере размещается содержимое, предназначенное для вывода в программах просмотра, не поддерживающих фреймы. Это может быть любое текстовое или графическое наполнение по выбору автора — своего рода “бесфреймовая” версия гипертекстового документа. Современные броузеры игнорируют фрагмент кода, помещенный внутрь этих дескрипторных скобок; они отображают фреймовый документ в полном соответствии с его логической структурой. 
 Сразу после создания главного структурного документа программа Dreamweaver автоматически размещает вслед за дескрипторной парой <frameset> </frameset> часть кода, предназначенную для старых броузеров. Этот фрагмент выглядит следующим образом. 
<noframes> 
<body bgcolor="#FFFFFF" text="#000000"> 
</body> 
</noframes> 
Для заполнения этого кодового фрагмента программа располагает специальным режимом работы. Чтобы перейти в него, надо дать команду Modify > Frameset > Edit NoFrames Content (Изменить > Структурный документ > Бесфреймовое содержимое). 
 По этой команде программа отображает пустое окно документа с заголовком NoFrames Content (Бесфреймовое содержимое) в верхней части. Используя штатные команды и инструменты Dreamweaver, можно создать информационное наполнение бесфреймовой части документа. После окончания этой работы та же команда выполняет обратный переход в обычный режим окна документа. 
 В режиме NoFrames Content (Бесфреймовое содержимое) доступны почти все возможности редактора. Разработчик может вводить текст, вставлять рисунки, создавать формы, работать с таблицами, включать в состав документа интерактивные картинки и пр. Перечислим немногие существующие особенности и ограничения. 
 
<li>Отдельные документы фреймовой структуры и ее бесфреймовая часть — это во многом независимые фрагменты одного гипертекстового документа. Это в полной мере относится к основным параметрам страницы. Напомним, что в программе они задаются в диалоговом окне Page Properties (Свойства страницы), которое отображается по команде Modify > Page Properties (Изменить > Свойства страницы) или при помощи комбинации клавиш CTRL+J. Настройки режима NoFrames Content (Бесфреймовое содержимое) ничем не отличаются от настроек обычной страницы.</li> 
<li>В режиме NoFrames Content (Бесфреймовое содержимое) программа блокирует все команды группы File > Open (Файл > Открыть). Чтобы перенести в документ законченные гипертекстовые фрагменты или заготовки, следует использовать возможности буфера обмена.</li> 
<li>Многие поисковые машины не индексируют фреймовые документы. Раздел <noframes> дает неплохую возможность подстраховки. В эту часть документа можно включить дескрипторы группы <meta>, которые предоставляют поисковым машинам информацию о содержимом, ключевых словах и заголовке гипертекстового документа. Напомним, что вставка метаинформации выполняется при помощи команд группы Insert > Head Tags (Вставка > Дескрипторы заголовков). Все команды этой группы доступны и в режиме NoFrames Content (Бесфреймовое содержимое). Кроме того, в эту секцию документа можно поместить ссылки на то страницы фреймового документа, которые содержат информацию, принципиально важную для оценки всего проекта.</li> 
<h1>Поля</h1>
Подобно ячейкам таблицы, отдельные фреймы структурного документа могут иметь поля. Это свободная зона вдоль границ фрейма, которая отодвигает содержимое от рамки и поэтому облегчает восприятие материала, Положением содержимого области управляют четыре поля: левое, правое, нижнее и верхнее. Причем левое поле всегда равно правому, а нижнее--верхнему. Размеры вертикальных и горизонтальных полей не зависят друг от друга. По умолчанию размер горизонтального поля равен шести пикселам, а величина вертикального поля составляет четырнадцать пикселов. 
Размеры фреймовых полей можно изменить при помощи палитры Property Inspector (Инспектор свойств). За горизонтальные поля отвечает раздел Margin Width (Ширина полей), за вертикальные — Margin Height (Высота полей). Эти обычные числовые поля со стандартными для программы приемами обращения. Чтобы изменить расстояние от содержимого фрейма до границы, надо просто ввести в числовые поля нужные габариты свободных зон и подтвердить операцию нажатием клавиши ENTER. 
<h1>Полосы прокрутки</h1>
Полосы (или линейки) прокрутки — это хорошо знакомый каждому пользователю Windows элемент управления, предназначенный для просмотра больших документов в окнах небольшого размера. Эту операцию иногда называют не прокруткой, а скроллингом или панорамированием. 
Одной из привлекательных особенностей фреймовых гипертекстовых документов является возможность ввести полосы прокрутки в отдельные фреймы. В этом случае отчасти упрощается решение задачи пространственного размещения материала, но на потенциальных посетителей ложится дополнительная нагрузка по пролистыванию больших документов. 
Управление полосами прокрутки выполняется средствами раздела Scroll (Прокрутка) палитры Property Inspector (Инспектор свойств). Это список, состоящий из четырех пунктов. 
<li>Default (По умолчанию). Оставляет решение вопроса о необходимости отображения полос прокрутки на усмотрение программы просмотра.</li> 
<li>Yes (Да). Обязательный вывод полос прокрутки, независимо от заполнения фреймовой области.</li> 
<li>No (Нет). Запрет на вывод полос прокрутки.</li> 
<li>Auto (Автоматически). Режим автоматического отображения. В этом случае полосы прокрутки выводятся на экран, если габариты содержимого превышают размеры свободного пространства в фрейме.</li> 
<h1>Размеры фреймов</h1>
Размеры фреймов структуры зависят от положения внутренних граничных линий. Перетаскивая эти разделители, можно перестроить структуру и добиться нужных габаритов отдельных ее ячеек, строк или столбцов. В этом случае размеры областей задаются “на глазок”. Размерные линейки, которые вызываются по команде View > Rulers > Show (Вид > Линейки > Показать), способны только отчасти облегчить точное позиционирование, поскольку их разрешающая способность ограничена. Для точного задания размеров следует использовать палитру Property Inspector (Инспектор свойств) (рис. 12.6) 
Ранее уже проводилось сравнение фреймовых структур с таблицами. Его можно значительно усилить: фреймовые структуры напоминают регулярные таблицы, столбцы и строки которых образуют однородную сетку вдоль каждого направления. Это значит, что разрешается задавать ширину только для целого столбца или высоту для всей строки. 
Изменить габариты графы (строки или столбца) фреймовой структуры можно следующим образом. 
<li>Выберите графу. В общем случае для этого требуется провести целую серию подготовительных мероприятий. 
</li> 
<li>Откройте окно Инспектора свойств.</li> 
<li>Выберите структурный документ. В правой части окна Инспектора свойств появится символическое изображение фреймовой структуры со всеми ее строками и столбцами (рис. 12.6). Напомним, что эта миниатюра не только напоминает о составе структурного документа, но и служит для выбора образующих его частей. Щелкая на любой ячейке, можно выбрать строку или столбец, которым она принадлежит.</li> 
<li>Выберите графу (строку или столбец).</li> 
<li>В разделе палитры Units (Единицы измерения) выберите единицы измерения габаритов графы и введите числовое значение в поле Value (Значение). Рассмотрим имеющиеся возможности. 
</li> 
<li>Pixels (Пикселы). Абсолютная система измерения размеров строк и столбцов. Единицами измерения служат пикселы.</li> 
<li>Percent (Проценты). Пропорциональная система измерения, в которой габариты граф задаются в процентах свободного пространства окна программы просмотра или гипертекстового редактора.</li> 
 
<li>Relative (Относительные). Относительная система измерения, в которой габариты граф задаются в долях от размеров других граф: строк или столбцов. Если все оставшееся свободное пространство следует отвести данной графе, то в поле Value (Значение) надо ввести число 1. Чтобы отмасштабировать линию относительно другой линии, размеры которой заданы в относительной системе единиц, в поле Value (Значение) надо ввести коэффициент пропорциональности.</li> 
 Например, если ширина одного столбца должна быть и два раза больше ширины другого, то размеры обоих следует задать в относительной системе и установить следующие значения в поле Value (Значение): 2 — для большего столбца и 1 — для меньшего. 
 <img src="image/vybor-frejmov-v-okne-dokumenta_1.gif" alt="Размеры фреймов"> Относительную систему измерения было бы лучше назвать логической, поскольку размеры задаются в виде взаимных логических отношений между отдельными графами фреймовой структуры. Эта способ дает наиболее предсказуемые результаты при разработке фреймовой структуры, предназначенной для просмотра в различных броузерах. На этапе составления плана страницы можно строить лишь самые общие предположения о вероятных размерах рабочего окна и разрешении экрана потенциальных посетителей. Задача построения сбалансированной системы абсолютных размеров, которая способна сохранить основные пропорции фреймовой структуры на различных мониторах и окнах программ просмотра, представляется трудноразрешимой. Если хотя бы один габаритный размер структуры окажется несогласованным, то броузер перекроит планировку всей страницы с непредсказуемыми последствиями для ее внешнего вида. Фреймы с относительными размерами выполняют функции своеобразных буферов, сжимаясь или расширяясь в зависимости oт наличного свободного пространства. 
<h1>Разработка фреймовых структур</h1>
Библиотека стандартных фреймовых структур объединяет самые ходовые варианты разбиения гипертекстовых страниц. Кроме того, программа разрешает выполнять интерактивную настройку размеров фреймов и вкладывать стандартные структуры друг в друга. Это достаточно мощные ресурсы, которым по силам самые сложные задачи создания фреймовых структур. 
В тех редких случаях, когда перечисленных возможностей оказывается недостаточно, разработчик имеет возможность создать особую фреймовую систему, отвечающую его личным предпочтениям и целям. 
<li>Поместите текстовый курсор на страницу, которая выбрана для разбиения.</li> 
<li>Включите отображение границ фреймов. Для этого дайте команду View > Visual Aids > Frame Borders (Вид > Служебная разметка > Границы фреймов). После этого окно документа претерпит некоторые изменения. Вдоль границ окна с внутренней стороны появится полоса толщиной в три пиксела.</li> 
<li>Наведите указатель на любую из границ и, удерживая нажатой клавишу ALT, перетащите ее на свободное место окна документа. Признаком готовности к операции служит, как обычно, вид указателя мыши. В этом случае он должен принять форму двойной стрелки.</li> 
<li>При помощи перетаскивания границ разместите в окне документа вертикальные и горизонтальные линии, необходимые для создания нужной фреймовой структуры.</li> 
Для удаления внутренней границы достаточно перетащить ее за пределы окна документа. 
<img src="prim.gif" alt="Разработка фреймовых структур">Если зацепить угловую точку, расположенную на пересечении границ фрейма, то можно разместить в окне документа сразу две линии: горизонтальную и вертикальную. Этот прием не дает заметных преимуществ с точки зрения экономии действий дизайнера. Подобных результатов можно добиться и последовательно: сначала поставить горизонтальную линию, а потом вертикальную (или наоборот). Отличие приемов заключается в одной детали кодирования структурного документа. В первом случае для всех четырех фреймов задаются абсолютные размеры и пикселах. Во втором случае для одного из размеров последнего фрейма используется метасимвол * (звездочка), который означает резервирование всего оставшегося пространства. 
 
Основной прием разработки — перетаскивание границ — прекрасно сочетается со вставкой предопределенных структур. Можно использован. смешанную стратегию, когда вначале на текущей странице создается стандартная сетка, которая потом изменяется при помощи техники перетаскивания. 
Следует отметить, что результаты таких действий не всегда одинаковы При вставке стандартных библиотечных вариантов всегда получается вложенная фреймовая структура, у которой отдельные документы, в свою очередь, разбиты на фреймы. Вложение происходит независимо от того, какие части исходного документа были выбраны перед операцией. 
Результат применения метода перетаскивания границ зависят от того, какая часть документа была выбрана перед операцией. Если выбрать структурный документ целиком, то при помощи перетаскивания граничных линий можно создать лишь “плоскую структуру” одной глубины вложении. Для получения структур с вертикальной подчиненностью надо вначале выбрать отдельный фрейм или поместить в него текстовый курсор. 
<h1>Редактирование фреймов</h1>
Каждый фрейм — это отдельный, независимый от окружения, гипертекстовый документ. К нему применимы все штатные средства редактирования страниц HTML, которыми располагает программа. Большая часть ресурсов, относящаяся к параметрам страницы, расположена в диалоговом окне Page Properties (Свойства страницы). Напомним, что для открытия этого окна достаточно дать команду Modify > Page Properties (Изменить > Свойства страницы) или воспользоваться клавиатурной комбинацией CTRL+J. 
Все специфические признаки форматирования, относящиеся к оформлению фрейма, расположены в палитре Property Inspector (Инспектор свойств). Напомним, что содержание и вид этой контекстно-чувствительной палитры зависит от типа выбранных объектов. Для выбора фрейма надо щелкнуть на его значке и палитре Frames (Фреймы) (SHIFT+F2) или, удерживая нажатой клавишу ALT, но самому оригиналу в окне документа. На рис. 12.6 показано состояние панели Инспектора свойств при выборе отдельного фреймового документа. 
<img src="image/12-6.jpg" alt="Редактирование фреймов"> 
Puc. 12.6. Параметры оформления фрейма 
<h1>Редактирование структур</h1>
Большая часть работы по изменению свойств созданной фреймовой структуры выполняется средствами палитры Property Inspector (Инспектор свойств) (CTRL+F3). Вид, который принимает эта палитра после выбора структуры, показан на рис. 12.5. По состоянию этой палитры можно уверенно судить о том, какая часть фреймовой структуры выбрана в данный момент. Признаком выбора всей структуры служит эскиз, который отображается в правой части палитры. Это не только значок, напоминающий пользователю способ разбиения структурного документа, но и средство выбора его строк и столбцов. Чтобы выделить строку фреймов, надо просто щелкнуть на любой ячейке этой строки. Повторный щелчок в том же месте переключает выбор со строки на столбец и обратно. 
<img src="image/12-5.jpg" alt="Редактирование структур"> 
Puc. 12.5. Настроечные параметры фреймовой структуры 
<img src="image/vybor-frejmov-v-okne-dokumenta_1.gif" alt="Редактирование структур">При отображении в программах просмотра в строке заголовка выводится заголовок основного структурного документа. Эта важная информация, которая используется не только посетителями, но и некоторыми поисковыми машинами, которые индексируют документ в зависимости от содержимого раздела заголовков. Чтобы ввести заголовок, выберите весь структурный документ и в поле Title (Заголовок) на панели инструментов введите компактное содержательное название. 
<h1>Сохранение фреймов и структур</h1>
Как упоминалось ранее, любой документ, разбитый на фреймы, состоит из нескольких независимых файлов HTML. Во-первых, содержимое каждой независимой области фреймовой структуры задается гипертекстовым документом. Во-вторых, число фреймов, их расположение, габариты, отображение границ, вывод линеек прокрутки, поля — вся эта информация хранится в отдельном файле, который называется структурным документом (frameset document}. Без сохранения всех документов, связанных с фреймовой структурой, содержимое экрана гипертекстового редактора невозможно просмотреть в броузере. 
 Вновь созданным фреймам программа присваивает временные имена по следующим правилам: UntitledFrame-N.htm для вновь созданного фрейма с номером N, UntitledFrameset-K.htm для фреймовой структуры с номером К и Untitled-M.htm для опорной страницы с номером М. 
<img src="image/vybor-frejmov-v-okne-dokumenta_1.gif" alt="Сохранение фреймов и структур">Поскольку все временные имена имеют префикс Untitled, сохраняемый фрейм бывает трудно идентифицировать. Панель Frames (Фреймы) способна существенно упростить ориентировку в сложной фреймовой структуре в процессе сохранения ее составных частей. 
Сохранение фреймовой структуры (структурного документа) выполняется следующим образом. 
<li>Выберите структуру в окне документа или при помощи палитры Frames (Фреймы).</li> 
<li>Дайте команду File > Save Frameset (Файл > Сохранить структуру фреймов) (CTRL+S) или команду File > Save Frameset As (Файл > Сохранить структуру фреймов как) (CTRL+SHIFT+S).</li> 
Отдельный фрейм сохраняют так. 
<li>Выберите фрейм в окне документа или средствами палитры Frame* (Фреймы).</li> 
<li>айте команду File > Save Frame (Файл > Сохранить фрейм) или File > Save Frame As (Файл > Сохранить фрейм как).</li> 
 Далее потребуется выполнить сохранения действия по выбору расположения, имен и расширений имен документов. Напомним, что все документы, относящиеся к структуре фреймов, представляют собой обычный гипертекст и должны быть сохранены с обычными для такого сорта информации расширениями имени (.HТM, .HTML и пр.). 
Команда Save > All Frames (Сохранить > Все фреймы) сохраняет все документы, связанные с отдельными фреймами структуры, и сам структурный документ. 
<h1>Создание фреймов</h1>
Программа Dreamweaver располагает удобными инструментами для создания фреймовых структур неограниченной сложности. Типичная последовательность такой разработки состоит из следующих этапов. 
<li>Создание исходной фреймовой структуры документа. На этом этапе следует выбрать количество, расположение и размеры фреймов документа.</li> 
<li>Сохранение гипертекстовых файлов, входящих в состав основного документа.</li> 
<li>Уточнение параметров фреймов. На этом этапе выбираются имена фреймов, принимаются решения о необходимости отображения rpaниц, визуализации полос прокрутки и пр.</li> 
<li>Согласование навигационной системы документа с фреймовой структурой.</li> 
Фреймовая структура задает состав независимых областей и их расположение. Это фундамент всего фреймового документа, на который опирается его система навигации, распределение данных по отдельным файлам и пр. 
Программа располагает набором стандартных структур, в число которых входят самые простые и популярные варианты разбиения на независимые области. Пользователь имеет возможность вставить любую структуру из стандартного набора. Если ни один из библиотечных вариантов не подходит, то всю работу по определению фреймовой структуры и ее составляющих придется проделать самостоятельно. 
<h1>Создание предопределенных структур</h1>
Для использования на гипертекстовой странице предопределенной фреймовой структуры надо действовать следующим образом. 
<li>Поместите текстовый курсор на страницу, выбранную для разбиения.</li> 
<li>Откройте палитру Objects (Объекты) (CTRL+F2) и перейдите в paздел Frames (Фреймы) (рис. 12.2). Аналогичных результатов можно добиться и при помощи команды Insert > Frames (Вставка > Фреймы), но работать с палитрой в данном случае удобнее.</li> 
<img src="image/12-2.jpg" alt="Создание предопределенных структур"> 
12.2. Вставка стандартных фреймовых структур 
<li>Щелкните на кнопке, отвечающей за вставку выбранного варианта фреймовой структуры. Изображения на кнопках напоминают расположение составных частей данной предопределенной структуры. Область синего цвета символизирует текущую страницу, белые области — это фреймы, которые добавляются к ней. Перечислим все возможные варианты.</li> 
<li>Left (Слева). Добавляет пустой фрейм по левой стороне текущей страницы.</li> 
<li>Right (Справа). Добавляет пустой фрейм по правой стороне текущей страницы.</li> 
<li>Тор (Сверху). Располагает новый фрейм в верхней части текущей страницы.</li> 
<li>Bottom (Снизу). Вставляет пустой фрейм в нижней части текущей страницы.</li> 
<li>Left and Top (Слева и сверху). Создает структуру, состоящую из четырех фреймов. Текущая страница занимает правый нижний угол.</li> 
<li>Left Top (Слева, затем сверху). Создает структуру из трех составных частей. Левый фрейм располагается как столбец по всей высоте окна. Оставшаяся часть свободного пространства делится по горизонтали. Текущая страница расположена в правом нижнем углу.</li> 
<li>Top Left (Сверху, затем слева). Создает структуру из трех составных частей. Сначала все свободное пространство окна делится на две полосы, причем текущая страница помещается в нижнюю oбласть. Затем в левой части текущей страницы выделяется еще один фрейм (рис. 12.3).</li> 
<img src="image/12-3.jpg" alt="Создание предопределенных структур"> 
Рис. 12.3. Пример библиотечной структуры 
<li>Split (Рассечение). Делит свободное пространство окна на четыре равные части и помещает текущую страницу в нижнюю правую область.</li> 
Любую стандартную фреймовую структуру можно применить к разработанной странице, заполненной текстом и графикой. Но разбиение на фреймы влечет за собой уменьшение свободной площади, отведенной под страницу, что способно повлечь критические последствия для ее планировки. Целесообразно создавать фреймовую структуру на пустой странице, и только после разбиения ее на независимые области переходить к информационному наполнению. 
<img src="prim.gif" alt="Создание предопределенных структур">Стандартные библиотечные структуры разрешается вкладывать друг в друга. Для этого надо поместить курсор в область, подлежащую более глубокому разделению, и применить к ней одно из стандартных разбиений палитры Objects (Объекты). 
Многие фреймовые области стандартных структур выглядят как вертикальные или горизонтальные полосы. По умолчанию программа Dreamweaver устанавливает ширину или высоту таких областей равной 80 пикселам. Чтобы изменить этот размер, достаточно зацепить указателем граничную линию и перетащить ее. 
<h1>Выбор фреймов в окне документа</h1>
Выбор фреймов можно выполнять и непосредственно в окне документа. Для структур с небольшим числом составляющих этот прием удобнее, чем использование палитры Frames (Фреймы), поскольку рабочее пространство не загромождается служебными окнами. 
Перечислим все приемы, которые предлагает программа для выбора фреймов в окне документа: 
<li>для бора отдельной области в структуре фреймов щелкните на ней, удерживая нажатой клавишу ALT;</li> 
<li>чтобы выделить структуру целиком, щелкните на граничной рамке или на любой внутренней разделительной линии.</li> 
Программа также обеспечивает переход между фреймами одного уровня (по горизонтали) и между вложенными структурами и их элементами (по вертикали). 
 
<li>Для перехода между фреймами одного уровня выберите один из них и далее используйте комбинации клавиш ALT+ВЛЕВО и ALT+ВПРАВО.</li> 
<li>Для перехода между разными уровнями вложенных структур выберите один из элементов иерархии и используйте комбинации клавиш ALT+BBEPX и ALT+ВНИЗ.</li> 
<img src="image/vybor-frejmov-v-okne-dokumenta_1.gif" alt="Выбор фреймов в окне документа">Пунктир, который помечает в окне документа выбранный фрейм, и способ отображения выбранных областей, принятый в палитре Frames (Фреймы), способны удовлетворить только человека с идеальным зрением, который одевает очки, только чтобы удостовериться в подлинности крупной банкноты. Чтобы уверенно распознавать выбранный фрагмент иерархической фреймовой структуры, лучше использовать Инспектор свойств или опираться на информацию, отображаемую в селекторе разметки. 
 Средствами программы Dreamweaver легко создавать иерархические фреймовые системы, состоящие из нескольких структурных документом, вложенных друг в друга. Для большей части операций по планировке страниц и их наполнению такая иерархичность не влечет никаких последствий и не меняет технику и тактику их применения. Но в некоторых случаях следует четко различать уровни структурных документов. Отличить вложенную структуру от главной проще всего по селектору разметки. При выборе главного структурного документа дескриптор <frameset> в селекторе получает полужирное начертание. Дескрипторы вложенных структур представляются в обычном виде. Кроме того, в палитре Framе (Фреймы) каждая отдельная структура обведена выпуклой рамкой, а документы разделяются тонкими граничными линиями. 
<h1>Выбор фреймов</h1>
Созданная структура и все составляющие фреймы представляют собой <отдельные гипертекстовые документы, которые программа Dreamweaver отображает в общем рабочем окне. Чтобы внести изменения в отдельные документы или модифицировать всю систему разбиения на независимые области, необходимо сначала выбрать соответствующий объект. Можно сделать это непосредственно в окне документа или воспользоваться специальной палитрой, предназначенной для выбора элементов фреймовой структуры. 
Признаком выбора фрейма служит тонкая пунктирная линия вдоль его границ. 
<h1>Загрузка файлов</h1>
Программа Dreamweaver поддерживает различные стратегии создания и наполнения фреймов. Области фреймовой структуры — это обычные гипертекстовые страницы, которые могут быть созданы заново, как обычные документы HTML Возможен и другой путь, когда разработанная фреймовая структура заполняется гипертекстовыми документами, созданными ранее. Для этого надо просто связать с фреймом нужный файл HTML. 
Загрузка в данную область фреймового документа файла, содержащего гипертекстовую страницу, выполняется так. 
<li>Выберите фрейм.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств) (рис. 12.6).</li> 
<li>Выберите нужный файл. Для этого предназначен раздел палитры Src (Источник). Это типовой элемент управления программы. Напомним кратко технику работы с ним. Полный путь поиска файла можно просто ввести в текстовом поле справа. Кроме того, для выбора загружаемого файла есть маркер-указатель и кнопка Browse (Обзор). Первый представляет собой удобное интерактивное средство “целеуказания” для файлов, представленных в окне Инспектора узла. Чтобы выбрать один из них, надо просто перетащить “прицел” из палитры на значок файла, расположенный на любой из панелей Инспектора узла. Кнопка Browse (Обзор) отображает стандартное диалоговое окно, предназначенное для поиска и выбора файлов.</li> 
<img src="image/vybor-frejmov-v-okne-dokumenta_1.gif" alt="Загрузка файлов">В тех случаях, когда текстовый курсор расположен внутри фрейма, палитра Property Inspector (Инспектор свойств) находится в состоянии, предназначенном для работы с текстом. В этом случае раздел палитры Src (Источник) недоступен. Для выбора загружаемого файла можно воспользоваться командой File > Open in Frame (Файл > Открыть во фрейме). Эта команда поддержана клавиатурным сокращением CTRL+SHIFT+0. 
<h1>Закрепление размеров</h1>
По умолчанию размеры любого фрейма разрешается менять в программе просмотра. Для этого достаточно зацепить внутреннюю границу и перетащить ее на другое место рабочего окна программы просмотра. Эту возможность можно заблокировать, оставляя размеры фрейма (в броузере, но не редакторе) фиксированными. 
Чтобы закрепить размеры фрейма, надо его выбрать и в палитре Properly Inspector (Инспектор свойств) установить флажок No Resize (He изменять меры). 
<img src="image/vybor-frejmov-v-okne-dokumenta_1.gif" alt="Закрепление размеров">Часто у разработчика возникает искушение заморозить размеры всех фреймов, но это весьма ответственное решение далеко не всегда можно считать оправданным. Целесообразно, например, зафиксировать размеры той области документа, которая хранит навигационные кнопки. 
<h1>
Dreamweaver 4
</h1>
<h1>Библиотеки</h1>
Библиотека — это один из способов хранения многократно используемых элементов дизайна гипертекстовых страниц: изображений, ссылок, отрывков текста и пр. Идея организации информации по принципу библиотечных хранилищ получила широкое признание в различных отраслях информатики. Библиотеки стандартных элементов используются текстовыми и графическими редакторами, системами автоматизированного проектирования и многими другими программами. 
 Базовая идея очень проста. Элементы документов, нужные многим разработчикам, заносятся в специально организованный депозитарий, где они доступны для использования в иных проектах. В системе Dreamweaver она реализована следующим образом. В библиотеку записывается фрагмент гипертекстовой разметки, соответствующей выбранному объекту или нескольким объектам, объявленным одним элементом хранения. Этот код дополняется ссылкой на базовый документ. Это требуется для того, чтобы учесть все будущие изменения родительской страницы и внести их в описание библиотечного элемента. 
 Программа Dreamweaver сохраняет библиотечные элементы в специальной папке Library, которая размещается непосредственно в корневой папке сайта. Каждый Web-узел имеет собственную библиотеку стандартных элементов и папку для ее хранения. В четвертой версии редактора библиотеки не имеют отдельной палитры, как это было в предыдущих изданиях программы. Для работы с ними используется специальный раздел палитры Assets (Ресурсы), показанный на рис. 13.2. Большая часть работ по управлению библиотеками выполняется при помощи команд палитры ресурсов. В частности, общая для всех ее разделов команда Copy to Site (Копировать на сайт) реализует обмен элементами между разными сайтами. 
<img src="image/13-2.jpg" alt="Библиотеки"> 
Рис. 13.2. Библиотечный раздел палитры Assets 
Назовем ключевые особенности библиотек в программе Dreamweaver. 
<li>Библиотечным элементом может быть объявлен любой фрагмент исходного текста, расположенный в области действия дескриптора <body>.</li> 
<li>Библиотечные элементы обладают неограниченными возможностями применения. Их можно размещать на гипертекстовых страницах без редактирования, переформатирования и реструктурирования.</li> 
 
<li>Изменения, внесенные в библиотечные элементы, распространяются на все их применения на гипертекстовых страницах и документах. Программа располагает гибкими командами, которые разрешают управлять областью обновления. Изменение библиотечного элемента может быть распространено на отдельную страницу, на избранные страницы или на весь сайт.</li> 
<li>Связь между библиотечным образцом и его экземплярами на страницах разрешается разрывать.</li> 
<li>Программа располагает командами для обмена библиотечными элементами между отдельными сайтами.</li> 
<li>Библиотеки способны хранить объекты вместе с динамическими сценариями, которые с ними ассоциированы. Разрешается также передавать на хранение программную составляющую динамических сценариев — чистый программный код на языке JavaScript — отдельно от объектов, на которые они воздействуют.</li> 
<li>Временные диаграммы (timeline) и каскадные листы стилей не могут храниться в библиотеке, поскольку часть их описания расположена в разделе заголовков документа — в области действия дескриптора <head>
<link rel="canonical" href="https://www.e-lave.ru//chapter.htm"/>.</li> 
<h1>Обновление узла</h1>
Программа Dreamweaver имеет в своем арсенале команду обновления, которая способна внести согласованные редакторские изменения сразу во все страницы узла. Это мощное средство способно существенно упростить процесс разработки и обслуживания больших узлов с высокой динамикой обновления. 
Команда обновления может быть вызвана в двух различных ситуациях. 
<li>После внесения поправок в библиотечные элементы. В этом случае средством запуска служит кнопка Update (Обновить) в диалоговом окне Update Library Items (Обновить элементы библиотеки).</li> 
<li>Процесс обновления может быть запущен командой Modify > Library >Update Current Page (Изменить > Библиотека > Обновить текущую страницу) или Modify > Library > Update Pages (Изменить > Библиотека > Обновить страницы).</li> 
Первый способ отличается большим автоматизмом и меньшим числом доступных настроек. В этом случае команда обновления просматривает все страницы узла и меняет библиотечный элемент в соответствии с теми правками, которые внес в него автор. 
Второй способ можно назвать обновлением “по требованию”. Его преимущества состоят в том, что громоздкую процедуру обновления пользователь может запустить в любой подходящий момент работы над сайтом, например после правки сразу нескольких элементов библиотеки. 
Обновление текущей страницы выполняется командой Modify > Library > Update Current Page (Изменить > Библиотека > Обновить текущую страницу). В этом случае программе не требуется дополнительных указаний, поэтому никакие диалоговые окна не отображаются. Программа Dreamweaver просматривает страницу, сравнивает экземпляры элементов с библиотечными образцами и вносит все необходимые изменения. 
Обновление всех страниц узла выполняется следующим образом. 
<li>Дайте команду Modify > Library > Update Pages (Изменить > Библиотека > Обновить страницы).</li> 
<li>Уточните параметры процесса обновления. Для этого программа открывает диалоговое окно Update Pages (Обновление страниц), показанное на рис. 13.4. Рассмотрим его содержимое.</li> 
 
<img src="image/13-4.jpg" alt="Обновление узла"> 
Рис. 13.4. Настройка процедуры обновления 
<li>Look in (Искать в). Здесь указывается область применения процедуры. Если в списке справа выбрано значение Entire Site (Весь сайт), то в левом следует выбрать имя обновляемого узла. Можно ограничить область распространения изменений, если в списке слева выбрать пункт File That Use (Файлы, использующие), а в списке справа — имя библиотечного элемента.</li> 
<li>Library Items (Библиотечные элементы). Этот флажок управляет видимостью библиотечных элементов. Если он установлен, то в списке вверху справа приводятся названия всех библиотечных элементов узла.</li> 
<li>Templates (Шаблоны). Этот флажок управляет видимостью шаблонов. Если установить его, то в раскрывающемся списке вверху справа станут доступными все шаблоны узла. Их можно включить в процедуру обновления.</li> 
<li>Show Log (Показать отчет). Этот флажок регулирует вывод отчета о результатах обновления. Если он установлен, то в нижней части диалогового окна отображается подробная статистика процедуры обновления (рис. 13.5).</li> 
<img src="image/13-5.jpg" alt="Обновление узла"> 
Puc. 13.5. Отчет об обновлении 
 
<li>Запустите процесс щелчком на кнопке Start (Начать).</li> 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Обновление узла">Программа Dreamweaver вносит необходимые изменения во все страницы: и открытые, и закрытые. Чтобы принять сделанные поправки, все открытые страницы следует сохранить. 
<h1>Переименование библиотечных разделов</h1>
Чтобы изменить имя библиотечного элемента, надо проделать следующую последовательность действий. 
<li>Откройте любую страницу узла. Поскольку библиотека — это ресурс, общий для всех документов, ее содержимое не зависит от открытой страницы.</li> 
<li>Откройте библиотечный раздел палитры Assets (Ресурсы), например командой Window > Library (Окно > Библиотека).</li> 
<li>Выберите библиотечный элемент.</li> 
<li>Дайте команду Rename (Переименовать). Она представлена в меню палитры и в контекстном меню. Кроме того, можно после некоторой паузы повторно щелкнуть на имени элемента в палитре.</li> 
<li>Введите с клавиатуры новое имя.</li> 
<li>Подтвердите ввод нажатием клавиши ENTER.</li> 
<li>Откроется диалоговое окно Update Files (Обновление файлов), в котором перечисляются все экземпляры данного элемента и требуется подтвердить или отказаться от изменения имен этих экземпляров. Существует</li> 
<img src="image/13-3.jpg" alt="Переименование библиотечных разделов"> 
Puc. 13.3. Обновление файлов 
не так много ситуаций, когда следует отказаться от обновления. Чтобы запустить процедуру обновления, надо щелкнуть на кнопке Update (Обновить). Чтобы отказаться от обновления, воспользуйтесь кнопкой Don't Update (He обновлять). 
<h1>Псевдонимы</h1>
Объектам раздела Favorites (Избранное) разрешается присваивать псевдонимы. Это позволяет существенно упростить работу с содержимым палитры, поскольку вместо формально правильных, но часто трудно запоминаемых имен, объектам можно присвоить содержательные псевдонимы. Так, намного проще работать с цветом по имени, например цвет_фона, чем с формальным шестнадцатеричным описанием, чем-то вроде #OOFF32. 
Присвоить объекту псевдоним можно так. 
<li>Найдите и выберите объект в палитре ресурсов. Напомним, что псевдонимы разрешается иметь только избранным объектам.</li> 
<li>Дайте команду Edit Nickname (Изменить псевдоним). Эта команда представлена в меню палитры и в контекстном меню, связанном с данным объектом. Кроме того, работает и стандартный для системы Windows прием переименования. Щелкните на имени объекта один раз, выдержите некоторую паузу и сделайте повторный щелчок.</li> 
<li>Введите новое имя объекта непосредственно в палитре ресурсов и завершите процедуру нажатием клавиши ENTER.</li> 
<h1>Раздел Favorites (Избранное)</h1>
Палитра ресурсов состоит из двух разделов: Site (Сайт) и Favorites (Избранное) В первом из них отображаются все ресурсы узла. На страницах больших узлов могут быть использованы тысячи различных объектов: рисунков, ссылок, роликов, цветов. Ориентироваться в хранилище таких масштабов становится затруднительно. В раздел Favorites (Избранное) можно внести самые ходовые ресурсы узла. Более того, пользователь имеет возможность завести в этом разделе палитры любое количество папок, выбрать для них удобные имена и рассортировать самые нужные ресурсы по этим хранилищам. 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Раздел Favorites (Избранное)">Папки раздела Favorites (Избранное) являются виртуальными. В виде реальных каталогов они не существуют. Программа Dreamweaver создает их как логические разделы палитры ресурсов. 
<h1>Редактирование библиотечных элементов</h1>
Ситуацию, когда созданный вариант библиотечного элемента является окончательным и не подлежит изменению, можно рассматривать как исключительную. Практика показывает, что любые, даже тщательно отработанные и проверенные объекты иногда требуют правки. 
Отредактировать элемент библиотеки можно следующим образом. 
<li>Откройте библиотечный раздел палитры Assets (Ресурсы), если таковой отсутствует, Для этого можно воспользоваться командой Window > Library (Окно > Библиотека).</li> 
<li>Выберите нужный раздел.</li> 
<li>Дайте команду Edit (Правка) в палитре. Для доступа к этой команде существует рекордное число способов. Специальная кнопка палитры ресурсов, расположенная в нижней ее части, меню палитры и контекстное меню, двойной щелчок по имени объекта. Кроме того, ее можно выдать из окна документа, если в нем есть хотя бы один экземпляр редактируемого объекта.</li> 
<li>Программа Dreamweaver откроет новое окно документа и загрузит в него редактируемый объект. Это окно выглядит почти так же, как окно документа при работе с обычными объектами. Два признака говорят о том, что ситуация отличается от стандартной. Это, во-первых, серый цвет фона, и, во-вторых, недоступность некоторых ресурсов программы. Внесите в объект все необходимые изменения.</li> 
<li>Дайте команду сохранения. Годится любой способ, например команда File v Save (Файл > Сохранить) или комбинация клавиш CTRL+S.</li> 
<li>После сохранения объекта откроется диалоговое окно Update Library Items (Обновить элементы библиотеки), содержащее две кнопки. С их помощью можно запустить процедуру глобального обновления страниц сайта или отказаться от нее. Для отказа от обновления надо щелкнуть на кнопке Don't Update (He обновлять). В этом случае в библиотеку записывается новый вариант объекта, но все его экземпляры на гипертекстовых страницах не претерпят никаких изменений. Кнопка Update (Обновить) служит для выполнения обновления. Эта команда, способная вызвать масштабные изменения на страницах узла, рассматривается в следующем разделе.</li> 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Редактирование библиотечных элементов">Существует небольшое число ограничений на тип и свойства объектов, которые можно включать в библиотеку и редактировать ее средствами. В этот короткий дискриминационный список попадают временные диаграммы, динамические сценарии и иерархические стилевые спецификации. Каждый их этих типов объектов использует функции на языке JavaScript, которые размещаются в разделе заголовков документа. Напомним, что в библиотеки разрешается включать кодовые фрагменты только из тела документа — части, расположенной в области действия дескриптора <body>. Это ограничение обходится при помощи шаблонов, в которые можно включить любые функции и сценарии. 
<h1>Редактирование динамических сценариев</h1>
Динамические сценарии (behaviors) не могут храниться в библиотеке в чистом виде как самостоятельные объекты гипертекстовых страниц. Но программа разрешает заносить в библиотеку смешанные элементы: рисунки, текстовые фрагменты и пр., — с которыми связаны динамические сценарии. В этом случае на библиотечное хранение берутся сами объекты и ассоциированные с ними обработчики событий. Программа Dreamweaver не копирует в библиотечный файл описания программ на языке JavaScript. После вставки такого объекта из библиотеки программа автоматически размещает весь необходимый программный код в заголовочной части документа (если его там не было). 
Как поступать в тех случаях, когда требуется изменить программную часть сценария? Программа располагает для этого специальными средствами. Надо поместить объект на страницу, разрешить его редактирование, внести все необходимые правки в программную часть, а затем выполнить команду восстановления библиотечных элементов. 
Рассмотрим эту процедуру более подробно. 
<li>Откройте документ, содержащий библиотечный объект.</li> 
<li>Выберите экземпляр библиотечного объекта.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств).</li> 
<li>Дайте из этой палитры команду Detach from Original (Разорвать связь с оригиналом).</li> 
<li>Дайте команду Window > Behaviors (Окно > Режимы) — откроется палитра Behaviors (Режимы). В этой палитре отображается список всех сценариев, связанных с данным объектом.</li> 
<li>Дважды щелкните на имени сценария в палитре. Откроется диалоговое окно, предназначенное для редактирования сценариев данного типа.</li> 
<li>Внесите в сценарий необходимые изменения и закончите его редактирование щелчком на кнопке ОК.</li> 
<li>Откройте библиотечный раздел палитры ресурсов. Для этого дайте команду Window > Library (Окно > Библиотека).</li> 
<li>Удалите из библиотеки раздел, который был изменен. Для этого выберите его и нажмите клавишу DELETE.</li> 
<li>В окне документа выберите измененный объект.</li> 
<li>В палитре Assets (Ресурсы) дайте команду New Library Item (Новый библиотечный элемент). Новый элемент записывается в палитру под именем UntitledN.</li> 
<li>Измените имя, причем новое имя должно совпадать с именем ранее удаленного библиотечного элемента с точностью до регистра отдельных символов.</li> 
<li>Обновите все страницы узла. Для этого дайте команду Modify > Library > Update Pages (Изменить > Библиотека > Обновить страницы).</li> 
<li>В диалоговом окне Update Pages (Обновление страниц), показанном на рис. 13.4, выберите в раскрывающемся списке слева пункт File That Use (Файлы, использующие).</li> 
<li>Во втором раскрывающемся списке этого диалогового окна выберите имя отредактированного и зарегистрированного объекта.</li> 
<li>Установите флажок Library Items (Библиотечные элементы) и запустите процедуру обновления щелчком на кнопке Start (Начать).</li> 
<h1>Редактирование объектов</h1>
Объекты, которые хранит палитра ресурсов, разрешается редактировать. Начальная операция любого процесса редактирования — это выбор объекта. Для выбора элементов палитры применяется стандартная техника операционной системы Windows: 
<li>чтобы выбрать отдельный объект, достаточно щелкнуть мышкой на его имени в палитре;</li> 
<li>несколько смежных объектов можно выбрать, щелкнув на крайних объектах при нажатой клавише SHIFT;</li> 
<li>удерживая нажатой клавишу CTRL, можно выбрать любое число объектов, расположенных в палитре произвольно.</li> 
 С каждым типом ресурсов связано некоторое программное средство, при помощи которого можно выполнить надлежащее редактирование объектов этого вида. Для рисунков это внешний графический редактор, например Fireworks, шаблоны редактируются в самой программе Dreamweaver, внести правки в описание цветов и ссылок можно средствами палитры ресурсов (только для категории Favorites). 
Внесение изменений в объект палитры Assets (Ресурсы) выполняется следующим образом. 
<li>Выберите объект.</li> 
<li>Дайте команду Edit (Правка). Это можно сделать тремя способами. Можно использовать пункт меню, двойной щелчок по имени объекта или кнопку Edit (Правка), расположенную в нижней части палитры.</li> 
<li>Используя те средства, которые предусмотрены в программе для работы с объектами данного типа, внесите необходимые изменения.</li> 
<li>Если данный объект хранится в виде файла (рисунок, анимационный ролик и пр.), сохраните его, используя штатную команду программы-редактора. Для ресурсов, не являющихся файлами, например ссылок или цветов, закончите процесс редактирования нажатием клавиши ENTER.</li> 
<h1>Ресурсы и узлы</h1>
Палитра Assets (Ресурсы) располагает командой, которая способна определить местонахождение любого объекта, зарегистрированного в палитре. Для построения больших узлов нередко используются сотни, а то и тысячи объектов разного типа. Web-дизайнеры, которым часто приходится обмениваться объектами между крупномасштабными сайтами, способны оценить эту команду по достоинству. 
Палитра отображает ресурсы активного узла. Активным считается узел, к которому принадлежит открытый документ. 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Ресурсы и узлы">Сайты, которые отображаются в Диспетчере узла и палитре ресурсов, могут быть разными. Названия активных узлов выводятся в строках заголовка этих средств управления программы Dreamweaver. 
Определить местонахождение файла объекта, зарегистрированного в палитре, можно так. 
<li>Найдите и выберите его имя в палитре ресурсов.</li> 
<li>Дайте команду Locate in Site (Найти на сайте). Ее можно выбрать из меню палитры или из контекстного меню, которое вызывается щелчком правой кнопки мыши на имени объекта.</li> 
Любой способ выдачи этой команды приводит к одинаковым последствиям, Будет открыт требуемый сайт, и на правой панели Диспетчера узла программа найдет и выберет искомый объект. 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Ресурсы и узлы">Команда Locate in Site (Найти на сайте) ищет файл, который хранит объект, а не файлы, которые его используют. 
Передать копию объекта, зарегистрированного в палитре ресурсов, из одного сайта в другой можно следующим образом. 
<li>Найдите и выберите объект. В разделе Favorites (Избранное) можно передавать целые папки вместе с содержимым.</li> 
<li>Дайте команду Copy to site (Копировать на сайт) и укажите имя узла назначения. Эту команду можно выбрать из меню, которое вызывается щелчком на треугольной кнопке, и из контекстного меню, для вызова которого служит правая кнопка мыши.</li> 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Ресурсы и узлы">Копируемые цвета и ссылки заносятся в категорию Favorites (Избранное) палитры ресурсов узла назначения. 
<h1>Создание библиотечных элементов</h1>
Любой элемент или сочетание элементов, расположенное в области действия дескриптора <body>, может быть занесено в библиотеку, в том числе таблицы, формы, апплеты, изображения, объекты ActiveX, навигационные средства и пр. 
<li>Выберите фрагмент документа любым удобным способом.</li> 
<li>Запишите новый элемент в библиотеку. Для этого программа предлагает разные способы.</li> 
<li>Дайте команду Modify > Library > Add Object to Library (Изменить > Библиотека > Добавить новый элемент в библиотеку).</li> 
<li>Если палитра Assets (Ресурсы) выведена на экран, просто нацепите указателем выбранный объект и перетащите его библиотечный раздел палитры.</li> 
<li>Есть и еще один вариант выполнения этой команды. Это щелчок на кнопке New Library Item (Новый библиотечный элемент), расположенной в нижней части палитры ресурсов.</li> 
<li>Введите имя для созданного библиотечного элемента.</li> 
Каждый библиотечный элемент на страницах гипертекстового документа помечается светло-желтым цветом. Это сделано для того, чтобы отличить каталогизированные объекты от обычных. 
Чтобы изменить тон выделения библиотечных элементов или убрать его совсем, откройте диалоговое окно с основными настройками программы, перейдите в раздел Highlighting (Выделение) и внесите необходимые изменения в поле Library Items (Библиотечные элементы). 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Создание библиотечных элементов">Каждый библиотечный элемент хранится в отдельном файле с расширением .LBI в каталоге Library, который является дочерним каталогом корневого каталога сайта. 
<h1>Удаление элементов из библиотеки</h1>
Удаление единиц библиотечного хранения — это двухшаговый процесс. Сначала надо удалить отслуживший свое объект непосредственно из библиотеки. Затем все его применения на гипертекстовых страницах требуется сделать обычными редактируемыми объектами. Без второй операции программа Dreamweaver сохранит за такими объектами их библиотечный статус со всеми вытекающими из этого последствиями: блокировкой операций редактирования и маркировкой желтого цвета. 
Удалить раздел библиотеки можно следующим образом. 
<li>Откройте любую страницу узла.</li> 
<li>Откройте палитру Assets (Ресурсы) и перейдите в раздел Library (Библиотека).</li> 
<li>Выберите библиотечный элемент.</li> 
<li>Щелкните на кнопке Delete (Удалить) в правом нижнем углу палитры или просто нажмите клавишу DELETE.</li> 
<li>Ответьте утвердительно на вопрос программы о желательности операции.</li> 
 Чтобы снять с объекта страницы статус экземпляра библиотечного элемента и придать ему обычную редактируемую форму, надо выбрать этот объект и в палитре Property Inspector (Инспектор свойств) щелкнуть на кнопке Detach from Original (Разорвать связь с оригиналом). 
<h1>Управление ресурсами узла</h1>
Едва ли можно поставить под сомнение утверждение о том, что страницы тематического узла или фирменного сайта должны быть выполнены в одном стиле или, как сейчас иногда говорят, формате. Можно предположить, что те немногие удачные исключения из этого правила, которые можно найти в Сети, сознательно используют видимую оформительскую разностильность как хорошо продуманный стилевой прием, мастерский дизайнерский ход. 
Материальную основу любого художественного стиля составляют рисунки, цвета, анимационные ролики, шаблоны, сценарии и другие объекты, которые разрешается размещать на гипертекстовых страницах. При разработке большого проекта Интернета эти объекты должны быть объявлены общими для разных страниц и документов узла. 
В четвертой версии редактора появилась удачная новинка — панель Assets (Ресурсы), предназначенная для ведения общего стилевого хозяйства. На эту панель можно помещать объекты, находящиеся в коллективном пользовании. Она располагает удобными средствами для сортировки, классификации, вставки и обмена между различными проектами. Перечислим все типы объектов, которые можно обрабатывать при помощи этой панели: 
<li>изображения;</li> 
<li>цвета;</li> 
<li>гипертекстовые ссылки;</li> 
<li>объекты Flash;</li> 
<li>объекты Shockwave;</li> 
<li>ролики MPEG или Quick Time;</li> 
<li>сценарии;</li> 
<li>шаблоны;</li> 
<li>библиотечные элементы.</li> 
<img src="prim.gif" alt="Управление ресурсами узла">В документации программы и в интерактивной справочной системе термин assets часто применяется расширительно. Так иногда называют разные объекты, которые не входят в область действия этого средства управления. Приведенный список дает исчерпывающий перечень объектов, который могут быть обработаны при помощи инструментов палитры ресурсов. 
Для пополнения палитры ресурсов могут быть использованы самые pазличные внутренние и внешние источники. Можно брать объекты, paсположенные на страницах данного узла, и заимствовать их на сайтах сторонних производителей. 
 Чтобы вывести палитру на экран, надо дать команду Window > Assets (Окно> Ресурсы) или нажать клавишу F11. Внешний вид панели показан на рис. 13.1 I 
 
<img src="image/13-1.jpg" alt="Управление ресурсами узла"> 
Рис. 13.1. Палитра Assets 
 Перед выводом палитры на экран выполняется чтение кэш-памяти узла, поэтому иногда визуализация выполняется с некоторой задержкой. 
<img src="prim.gif" alt="Управление ресурсами узла">Панель ресурсов доступна только после создания сайта с локальным кэшем. 
Палитра ресурсов устроена по принципу обычной двухмерной таблицы. Роль столбцов в ней играют категории Site (Сайт) и Favorites (Избранное), строкам соответствуют типы объектов. В раздел Site (Сайт) входят все объекты данного типа, используемые на страницах узла. Второй раздел образуют наиболее ценные, по мнению авторов проекта, объекты. Отображением содержимого палитры управляют кнопки категорий, расположенные в третьей строке окна, и кнопки типов объектов, составляющие первый столбец. 
В нижней части палитры приводится список имен объектов данного подкласса с указанием их основных атрибутов. В верхней части отображается изображение или кодовое обозначение (для ссылок или сценариев) выбранного элемента палитры. Треугольная кнопка, расположенная справа во второй строке палитры, предназначена для вызова меню. Рассмотрим команды этого меню. 
<li>Refresh Site List (Обновить список ресурсов). Команда обновляет ресурсы узла По этой команде в палитру вносятся изменения в составе ресурсов за счет применения внутренних средств узла. Например, новые изображения, добавленные на страницы, вносятся в раздел Image (Изображение), а гипертекстовые ссылки, потерявшие актуальность, удаляются.</li> 
<li>Recreate Site List (Восстановить список ресурсов). Команда учитывает изменения в составе ресурсов за счет применения внешних по отношению к узлу средств, инструментов или программ.</li> 
<li>Edit (Правка). Запуск средств редактирования выбранного объекта.</li> 
<li>Insert (Вставка). Вставка выбранного объекта на страницу.</li> 
<li>Add to Favorites (Добавить в избранное). Размещение выбранного объекта в разделе Избранное.</li> 
<li>Copy to site (Копировать на сайт). Команда предназначена для обмена ресурсами между Web-узлами.</li> 
<li>Locate in Site (Найти на сайте). Команда определяет положение выбранного ресурса в составе сайта.</li> 
 Эти команды доступны для всех типов ресурсов. Для отдельных категорий объектов список команд меню может расширяться. Команды Insert (Вставка), Edit (Правка), Refresh Site List (Обновить список ресурсов), Add to Favorites (Добавить в избранное) продублированы кнопками быстрого запуска, расположенными в нижней части палитры. 
<h1>Включения стороны сервера</h1>
Все больше страниц Интернета строится с расчетом на динамическое обновление контента. Это обновление может заключаться в простом изменении даты, счетчика посещений или курса валюты. Задачи такого уровня сложности решаются средствами, которыми располагают язык гипертекстовой разметки и языки сценариев. Динамическое изменение информационного наполнения узла может означать и развитую интерактивность, связь с распределенной базой данных и переверстку гипертекстовых страниц “на лету”. Для поддержки таких возможностей классического языка HTML недостаточно: здесь требуются специальные технологии и мощные инструменты. 
 Во всемирной Сети получили распространение несколько различных технологий поддержки динамических узлов, наиболее распространенные из них — SSI {Server Side Include, включения стороны сервера), CGI (Common Gateway Interface, общий шлюзовой интерфейс), ASP (Active Sever Pages, активные серверные страницы). 
 Включения стороны сервера, или, как иногда называют этот метод, вставки на уровне сервера, — это простейшая и самая старая технология создания и поддержки динамически обновляемых страниц. Ее возможности ограничиваются вставкой внутрь одного файла HTML содержимого другого файла. 
 Суть технологии проста. На исходной гипертекстовой странице размещаются специальные предписания, требующие выполнить вставку внешних файлов. Сервер, обрабатывая такую страницу, выполняет положенные замены и пересылает программе просмотра, работающей на клиентском компьютере, документ, собранный в полном соответствии с инструкциями SSI. 
Файлы, требующие препроцессорной обработки, получают характерное расширение, по которым сервер легко отличает их от обычных документов HTML. Обычно в качестве таких расширений используются .SHTM, .SHTML или .INC. Включениями стороны сервера могут быть объявлены любые объекты, которые в принципе разрешается размещать на гипертекстовых страницах: рисунки, программные коды, формы и многое другое. 
 Чтобы корректно собрать документ HTML, в его состав следует включить специальные инструкции, которые описывают тип, расположение вставки и условия ее размещения в документе. Например, подобная инструкции может иметь такой вид: 
 
[an error occurred while processing this directive] 
Эта директива предписывает включить в состав документа содержимое файла insert.htm. Его имя задано в относительной системе адресации; за точку отсчета принято положение собираемого документа. 
Следующий фрагмент показывает пример оформления вставки графического файла, причем его адрес относительно корневой папки узла: 
<!—#inciude virtual="/www/pictures/image.gif"—> 
Если на странице HTML требуется вывести текущую дату, то в любое место тела документа можно поместить следующую директиву: 
<!—#echo var="DATE_LOCAL"—> 
Инструкции SSI оформляются как обычные комментарии HTML Программы просмотра просто игнорируют коды этого типа, а серверы обрабатывают их в полном соответствии со спецификацией. 
 Одним из существенных преимуществ технологии включений стороны сервера можно считать возможность получать динамическую информацию о состоянии сервера. Эти задачи выполняют так называемые переменные окружения. Через них можно, например, передать в документ дату последнего обновления некоторого файла, его адрес URL и другую информацию. 
 В таблице 13.1 приведены некоторые инструкции SSI и их модификаторы. 
Таблица 13.1. Директивы SSI 
<table border=1>
<tr> <td>
Директива 
</td>
<td>
Атрибуты 
</td>
<td>
Описание 
</td>
</tr>
<tr> <td>
<! — #config — > 
</td>
<td>
errmsg, sizefmt, timefmt и пр. 
</td>
<td>
Настройка сообщений об ошибках 
</td>
</tr>
<tr> <td>
<! — #echo — > 
</td>
<td>
var или переменные окружения 
</td>
<td>
Возврат специфических значений 
</td>
</tr>
<tr> <td>
<! — #ехес — > 
</td>
<td>
cmd или cgi 
</td>
<td>
Выполнение системных команд или программ CGI 
</td>
</tr>
<tr> <td>
<! — #flastmode — > 
</td>
<td>
file или virtual 
</td>
<td>
Вывод даты последнего изменения файла 
</td>
</tr>
<tr> <td>
<! — #fsize — > 
</td>
<td>
file или virtual 
</td>
<td>
Вывод размера файла 
</td>
</tr>
<tr> <td>
<! — #include — > 
</td>
<td>
File или virtual 
</td>
<td>
Вставка содержимого указанного файла 
</td>
</tr>
</table> 
<h1>Вставка библиотечных элементов</h1>
Объекты, зарегистрированные в библиотеке, можно размещать на любых страницах данного узла, причем в неограниченном количестве на любых допустимых для данного типа объектов позициях. 
Техника размещения объектов на гипертекстовых страницах очень проста. 
<li>Поместите курсор в позицию вставки.</li> 
<li>Дайте команду Window > Library (Окно > Библиотека), которая отображает на экране библиотечный раздел палитры ресурсов.</li> 
<li>Выберите объект для вставки.</li> 
<li>Щелкните на кнопке Insert (Вставка) в палитре ресурсов.</li> 
Среди множества способов выдачи команды вставки отметим метод перетаскивания. Объекты из библиотеки можно размещать на гипертекстовых страницах простым перетаскиванием. 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Вставка библиотечных элементов">Чтобы вставить элемент и разорвать его связь с библиотекой, надо дать команду вставки при нажатой клавише CTRL. Что дает такой способ вставки? Объект, внедренный в документ, становится доступным для прямого редактирования. Однако связь с библиотечным источником и возможность автоматического обновления теряются. 
Коды библиотечных элементов отличаются от стандартной гипертекстовой разметки. Рассмотрим следующий пример: 
font face-"Arid, Helvetica, sans-serif" со1ог="#000099">подпись 
Эта кодовый фрагмент описывает применение текстового библиотечного элемента с именем “подпись”. Строка /Library/подпись.lbi описывает расположение и название файла, который хранит данный объект. 
Весь фрагмент заключается в специальный парный дескриптор 
<!— #BeginLibraryltem —> <!— #EndLibraryltem —> 
который оформлен как комментарий языка HTML. Содержимое дескрипторных скобок — это обычное для языка гипертекстовой разметки описание, состоящее из стандартных тегов и их атрибутов. Если в исходном тексте документа удалить эти псевдокомментарии, то связь с библиотечным источником разрывается и данный экземпляр становится обычным объектом. 
<h1>Вставка объектов SSI</h1>
Программы просмотра, по крайней мере, их текущие версии, не обладают способностью отображать гипертекстовые документы, содержащие включения стороны сервера. Чтобы увидеть страницу с включениями SSI в готовом виде, ее требуется загрузить на удаленный сервер или установить серверное программное обеспечение на локальный компьютер. 
 Есть еще одна Возможность получить представление об истинной планировке страницы, содержащей серверные включения. Программа Dreamweaver имеет специальные средства, позволяющие собрать такой документ и загрузить его смонтированную версию в программу просмотра. 
Чтобы собрать и правильно отобразить в окне внешние серверные вставки, программа использует специальные трансляторы, которые имитируют работу сервера по сборке документа. 
После выполнения команды на создание включения стороны сервера программа Dreamweaver размещает в теле основного документа ссылку на внешний файл. В окно документа редактор выводит собранную версию документа вместе с содержимым внешних файлов. Программа отображает внешние включения только для предварительного просмотра; их редактирование в окне документа запрещено. Для изменения объектов SSI требуется прямое редактирование файлов, в которых они сохранены. 
 Существует два типа серверных включений: Virtual (Виртуальное) и File (Файловое). Выбор одного из них зависит от типа серверного программного обеспечения. 
<li>Не будет преувеличением утверждение, что наибольшее распространение в нашей стране получили Web-серверы Apache. Для этих серверов следует отдать предпочтение типу Virtual (Виртуальное). Эта установка задана в программе Dreamweaver по умолчанию.</li> 
<li>Серверы 7/5 фирмы Microsoft требуют выбора типа File (Файловое).</li> 
<li>Чтобы определить предпочтительный тип включений стороны сервера для прочих Web-серверов, требуется получить консультацию у администрации сети.</li> 
 Вставка объекта SSI выполняется следующим образом. 
<li>Откройте документ, в который следует включить внешний фрагмент.</li> 
<li>Поместите текстовый курсор в то место документа, в котором должно быть расположено включение стороны сервера.</li> 
 
<li>Дайте команду Insert > Server-Side Include (Вставка > Включение стороны сервера). Другой способ выполнения вставки дает кнопка Server-Side Include (Вставка > Включение стороны сервера) палитры Object (Объекты), расположенная в разделе Common (Общие).</li> 
<li>В диалоговом окне Select File (Выбор файла) найдите и выберите файл, в котором хранится включение стороны сервера. Если этот файл расположен на удаленном компьютере, то в поле URL (Адрес URL) введите eго полный адрес в Интернете.</li> 
<li>Завершите процедуру вставки щелчком по кнопке Select (Выбрать) и этом диалоговом окне.</li> 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Вставка объектов SSI">Поскольку включения стороны сервера могут быть размещены только и пределах тела документа, то есть в части, ограниченной дескрипторной парой <body> </body>, на их содержимое накладывается ряд ограничений. Гипертекстовые вставки не могут содержать дескрипторы <head>
<link rel="canonical" href="https://www.e-lave.ru//chapter.htm"/>, <title>, <meta> и <body>. Ввод подобных кодовых фрагментов можно выполнить в любом текстовом редакторе или даже при помощи программы Dreamweaver. После создания объекта SSI надо вызвать Инспектор кода (F10) и удалить все запрещенные дескрипторы. 
Отредактировать серверную вставку можно следующим образом. 
<li>Выберите ее в окне документа.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств).</li> 
<li>Щелкните на кнопке Edit (Правка) на этой палитре.</li> 
<li>Серверная вставка загрузится в новое окно документа программы. После внесения необходимых правок дайте команду сохранения и закройте окно документа.</li> 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Вставка объектов SSI">При помощи палитры Property Inspector (Инспектор свойств) можно не только открывать серверные вставки для редактирования. Она имеет средства для изменения типа вставки (virtual или file) и выбора другого целевого файла. 
<h1>Вставка объектов</h1>
Большую часть объектов палитры Assets (Ресурсы), можно разместить на гипертекстовой странице методом перетаскивания или щелчком на кнопке Insert (Вставка). Все операции такого сорта выполняются только тогда, когда целевая страница находится в режиме планировки (Design View). Рассмотрим последовательность действий более подробно. 
<li>Поместите текстовый курсор в то место документа, которое выбрано для вставки объекта.</li> 
<li>Дайте команду Window > Assets (Окно > Ресурсы), если панель ресурсов не выведена на экран.</li> 
<li>Выберите категорию Site (Сайт) или Favorites (Избранное). Шаблоны и библиотечные элементы не делятся на категории — все они представлены в палитре одним списком.</li> 
<li>Выберите тип ресурсов.</li> 
<li>Вставьте нужный ресурс на страницу. Для этого программа предлагает следующие возможности.</li> 
<li>Перетащите объект из палитры в окно документа. Сценарии следует вставлять в раздел заголовков, поэтому перед операцией надо сделать эту часть документа доступной. Для этого можно воспользоваться, например, командой View > Head Content (Вид > Содержимое раздела заголовков).</li> 
<li>Выберите объект и щелкните на кнопке Insert ( Вставка) на палитре.</li> 
Вставка цвета и ссылок имеет небольшие отличия. Если цвет просто перетащить из палитры и бросить в окно документа, то данный тон задается для всех символов, вводимых в позиции вставки. 
Есть еще один вариант выполнения операции, который в равной степени подойдет и для применения цвета, и для вставки ссылки. 
<li>Выберите объект (последовательность символов, изображение и пр.) на гипертекстовой странице.</li> 
<li>В палитре ресурсов выберите ссылку, цвет или шаблон.</li> 
<li>Дайте команду Apply (Применить) из меню, которое открывается щелчком на треугольной кнопке.</li> 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Вставка объектов">Имена объектов, представленных в палитре ресурсов, совпадают с именами файлов, цвета обозначаются шестнадцатеричными кодами, а названия гипертекстовых ссылок — это их содержимое. По умолчанию объекты упорядочиваются по алфавиту. Названия столбцов палитры, в которых приводятся атрибуты объектов, — критерии, по которым содержимое палитры можно сортировать. Чтобы выполнить сортировку по такому критерию, надо просто щелкнуть на заголовке столбца. 
<h1>Запись в раздел</h1>
Внести ресурс в категорию Favorites (Избранное) можно так. 
<li>Найдите и выберите один или несколько объектов.</li> 
<li>Дайте команду Add to Favorites (Добавить в избранное). Вот все возможные варианты выдачи этой команды:</li> 
<li>меню палитры;</li> 
<li>контекстное меню;</li> 
<li>кнопка Add to Favorites (Добавить в избранное) в правом нижнем углу палитры ресурсов.</li> 
 Любой метод выдачи команды приводит к одинаковым результатам. Выбранные объекты становятся зарегистрированными ресурсами категории Favorites (Избранное). 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Запись в раздел">Для шаблонов и библиотечных элементов категория Favorites (Избранное) недоступна. 
Любой объект, занесенный в раздел Favorites (Избранное), можно оттуда удалить. Для этого надо его выбрать и дать команду Remove from Favorites (Удалить из избранного). 
 Приемы создания новых папок раздела Favorites (Избранное) почти не отличаются от стандартной техники, принятой для этих целей в системе Windows. 
<li>Выберите местоположение новой папки в системе избранных папок палитры ресурсов.</li> 
<li>Дайте команду New Favorites Folder (Новая папка для избранного). Эта команда представлена в меню палитры и в контекстном меню.</li> 
<li>Введите имя папки и нажмите клавишу ENTER.</li> 
Расположение папок внутри раздела можно изменить. Эта задача решается при помощи хорошо известного каждому пользователю операционной системы Windows метода перетаскивания. 
<img src="image/13-1-vstavka-obektov_1.gif" alt="Запись в раздел">Созданные описанным способом папки — это не реальные каталоги файловой системы. Они представляют собой способ логического группирования ресурсов по тематическому или иному признаку. 
<h1>
Dreamweaver 4
</h1>
<h1>Информационное наполнение</h1>
Для заполнения шаблона можно применить весь арсенал средств проектирования, которым располагает программа Dreamweaver. Существующие ограничения связаны, главным образом, не с созданием планировки шаблона или его форматированием, а с применением разработанного проекта к гипертекстовым документам. 
Приведем описание процедуры, которая позволяет обойти немногочисленные запреты на применение средств форматирования к шаблону. Ее основная идея состоит в том, что созданная на основе шаблона новая страница отделяется от родительского образца. Разрыв связи делает страницу автономным образованием и, тем самым, снимает все ограничения на применение средств и инструментов программы. Страница с завершенным дизайном объявляется новым шаблоном и заменяет старый образец. 
Следует отметить, что прибегать к этой громоздкой и небезопасной процедуре целесообразно только в крайних случаях. Большая часть задач по разработке дизайна шаблона и его планировке имеет в программе Dreamweaver прямое решение. 
Эта процедура описывается следующей последовательностью действий. 
<li>Дайте команду File > New from Template (Файл > Создать на основе шаблона) и создайте страницу, дублирующую дизайн шаблона, подлежащего изменению. Сохраните страницу под любым именем в виде обычного документа.</li> 
<li>Разорвите связь страницы с родительским шаблоном. Для этого дайте команду Modify > Templates > Detach from Template (Изменить > Шаблоны > Разорвать связь с шаблоном). После этого шага у нас есть точная копия шаблона без ограничений на применение редакторских операций.</li> 
<li>Внесите в страницу все необходимые изменения.</li> 
<li>Сохраните готовую страницу в формате шаблона Dreamweaver. Для этого дайте команду File > Save as Template (Файл > Сохранить как шаблон). В принципе можно сразу выбрать для нового шаблона то же имя, что было у старого. Но это решение необратимо: оно способно привести к краху всего проекта, если в новом шаблоне окажутся ошибки или даже мелкие несогласованности. Поэтому имеет смысл сохранить шаблон под другим именем, например my_template_new.dwt, если имя старого шаблона было my_template.dwt.</li> 
 
<li> Создайте на новом шаблоне редактируемые области. Их расположение и имена должны быть такими же, как на старом образце. Эту задачу решает команда Modify > Templates > New Editable Region (Изменить > Шаблоны > Новая редактируемая область). Очень важно, чтобы количество и названия редактируемых областей нового шаблона в точности совпадали со старым образцом. Операции переформатирования документов при назначении нового шаблона базируются на соответствии открытых областей. По завершению этих операций сохраните шаблон и выйдите из программы Dreamweaver.</li> 
<li>Средствами операционной системы найдите папку, содержащую оба шаблона, и переименуйте их. Старый можно, например, назвать my_template_backup.dwt, а новый должен получить имя my_template.dwt вместо my_template_new.dwt. Такое переименование позволяет осуществить замену старого шаблона новым.</li> 
<li>Запустите программу Dreamweaver и откройте новую редакцию шаблона — my_template_new.dwt. Дайте команду Modify > Templates > Update Pages (Изменить > Шаблоны > Обновить страницы), которая актуализирует все страницы, связанные с данным образцом.</li> 
<img src="image/14-1-sozdanie-shablonov_1.gif" alt="Информационное наполнение">Если в процессе обновления страниц произошла ошибка или выявились несогласованности планировки или форматирования, то, имея резервную копию старого шаблона (my_template_backup.dwt), можно выполнить откат и вернуться предыдущему варианту оформления всех или только избранных страниц. 
Вставка динамических сценариев 
Динамические сценарии (behaviors) — это очень удобное средство создания динамических эффектов на гипертекстовых страницах. Динамическое поведение, которое требуется сообщить текстовому или графическому объекту, программируется на языке JavaScript или VBScript. Эти короткие программы должны быть написаны и отработаны заранее и внедрены в исходный текст гипертекстового документа. Для записи текста программ может быть использовано тело документа или раздел заголовков. Если документ создан на основе шаблона, то его раздел заголовков закрыт для редактирования. Исключением является короткий фрагмент doctitle, хранящий заголовок документа. Логично предположить, что запись программных кодов в блокированную часть раздела заголовков может окончиться неудачей. 
 
 Это обоснованное теоретическое суждение требует практической корректировки. В состав программы Dreamweaver входит несколько стандартных, предустановленных сценариев, которые, по замыслу разработчиков программы, нашли наибольшее применение в проектной практике Web-дизайнеров. Эти тщательно отработанные динамические сценарии обладают максимальной совместимостью со старыми версиями программ просмотра, Многие из них требуют вставки обширных фрагментов кода в раздел заголовков страницы. Все подобные включения выполняются совершенно безболезненно и не требуют проведения каких-либо дополнительных мероприятий. 
 В свободном обращении в Сети находятся многие сотни сценариев, разработанных разными фирмами и программистами-одиночками. Программа Dreamweaver обладает всеми необходимыми инструментами для включения программных кодов сторонних разработчиков в состав гипертекстового документа. 
Чтобы гарантировать безболезненную “имплантацию” кодовых фрагментов в закрытый раздел заголовков документа, требуется внести правки в родительский шаблон. В чем они заключаются? В раздел заголовков шаблона вводится дополнительная открытая область для хранения кодовых последовательностей динамических сценариев. Эта операция выполняется следующим образом. 
<li>Откройте шаблон.</li> 
<li>Откройте окно Инспектор кода. Для этого можно воспользоваться командой Window > Code Inspector (Окно > Инспектор кода) или клавишей F10.</li> 
<li>Поместите текстовый курсор непосредственно перед закрывающим дескриптором </head>.</li> 
<li>Введите с клавиатуры следующий фрагмент кода. 
<mm:editable> 
<script> </script> 
</mm:edilable> 
<mm:editable> 
<!—Любой комментарий, который будет 
уничтожен программой —> 
</mm:editable> 
<li>Сохраните изменения в шаблоне и подтвердите обновление связанных страниц.</li> 
После этого динамические сценарии могут быть добавлены как к самому шаблону, так и к документам, созданным на его основе, без риска потерять программную часть, ассоциированную со сценарием. 
 
Ссылки на шаблонах 
 Гипертекстовые ссылки, размещенные на страницах шаблона, наследуются порожденными документами, как и другие объекты и коды разметки. Однако процедура создания таких ссылок имеет несколько особенностей. 
Напомним способы построения гипертекстовых адресов, принятые в программе. Существует два принципиально различных подхода к целеуказанию объектов: абсолютная и относительная адресация. При абсолютной адресации местоположение объекта задается его полным адресом, которым, в зависимости от ситуации, может быть адрес 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 (Инспектор свойств) разрешает вводить любые адреса вручную. Однако этот способ слишком обязывающий: он требует от пользователя, во-первых, аккуратности, а во-вторых, точного представления о расположении всех составляющих гиперссылки (шаблона, документа-источника, целевого файла) в файловой системе. Для узла с разветвленной системой папок и их глубоким вложением такой способ легко может привести к ошибке. Создание гиперсвязей при помощи тех простых полуавтоматических средств целеуказания, которыми располагает программа, страхует пользователя от любых неожиданностей. 
<img src="image/14-1-sozdanie-shablonov_1.gif" alt="Информационное наполнение">Существуют ситуации, когда по разным причинам не удается применить метод перетаскивания маркера-указателя. В этих немногочисленных случаях приходится вводить корректный адрес объекта вручную. 
<h1>Изменение шаблона</h1>
Шаблоны, как и любые другие объекты, созданные средствами программы Dreamweaver, можно редактировать. К сожалению, авторам программы не удалось добиться единообразия команд для основных операций редактирования шаблонов. Они распределены по нескольким разделам строки меню программы и меню палитры ресурсов. 
 Чтобы изменить шаблон, на котором основывается открытый документ, надо дать команду Modify > Templates > Open Attached Template (Изменить > Шаблоны > Открыть присоединенный шаблон). 
Файл шаблона можно открыть так. 
<li>Откройте палитру Assets (Ресурсы) и перейдите в ее раздел Templates (Шаблоны). Для этого проще всего дать команду Window > Templates (Окно > Шаблоны).</li> 
<li>Палитра представляет имена всех шаблонов текущего узла и показывает эскиз выбранного документа. Выберите имя нужного шаблона.</li> 
<li>Загрузите выбранный шаблон в окно документа для редактирования. Существует, по крайней мере, четыре способа это сделать:</li> 
<li>кнопка Edit (Правка) в нижней части палитры;</li> 
<li>одноименная команда меню палитры;</li> 
<li>одноименная команда контекстного меню, которое Открывается щелчке правой кнопкой мыши;</li> 
<li>двойной щелчок на имени шаблона.</li> 
 Большая часть ресурсов программы применяется и при редактировании шаблонов. После внесения в документ необходимых изменений надо сохранить новую версию шаблона. Для этого надо дать штатную команду программы File > Save (Файл > Сохранить). 
<img src="image/14-1-sozdanie-shablonov_1.gif" alt="Изменение шаблона">При сохранении шаблона, не содержащего ни одной редактируемой области, программа выводит окно с предупреждением. Это не является препятствием к сохранению, но полезность такого шаблона можно поставить под сомнение. Документы, созданные на его основе, полностью закрыты для правки. Сам шаблон доступен для внесения редакторских изменений. 
Переименование шаблона выполняется следующим образом. 
 
<li>Откройте палитру Assets (Ресурсы) и перейдите в раздел Templates (Шаблоны).</li> 
<li>Выберите имя шаблона в палитре и после некоторой паузы щелкните на имени второй раз.</li> 
<li>Введите новое имя.</li> 
<li>Подтвердите операцию нажатием клавиши ENTER.</li> 
 
<li> Программа Dreamweaver выведет запрос на обновление связанных с шаблоном документов. 
</li> 
<li>Чтобы обновить все документы, созданные на основе шаблона, надо щелкнуть на кнопке Update (Обновить).</li> 
<li>Если процедуру обновления следует отложить, щелкните на кнопке Don't Update (He обновлять). В этом случае каждую страницу, связанную с шаблоном, можно обновить в индивидуальном порядке при помощи команды Modify > Templates > Update (Изменить > Шаблоны > Обновить).</li> 
Удаление отработанных шаблонов выполняется следующим образом. 
<li>Выберите имя шаблона в палитре Assets (Ресурсы).</li> 
<li>Дайте команду Delete (Удалить). Эта команда представлена в меню палитры и в контекстном меню. Ей также соответствует командная кнопка в нижней части палитры ресурсов.</li> 
 После удаления шаблона документы, созданные на его основе, не претерпят никаких изменений ни по виду, ни по сути. Они сохраняют даже заданное родительским шаблоном деление на блокированные и редактируемые области. Чтобы перевести такие документы в обычную форму HTML, надо дать команду разъединения с шаблоном: Modify > Templates > Detach from Template (Изменить > Шаблоны > Разорвать связь с шаблоном). 
<h1>Обновление документов</h1>
Ранее неоднократно отмечалось, что изменения шаблона влекут за собой согласованные изменения документов, созданных на его основе. Изменения шаблона вступают в действие после сохранения новой версии. После этой операции программа предложит выполнить обновление связанных страниц. Для настройки процедуры обновления выводится диалоговое окно Update Pages (Обновление страниц), показанное на рис. 14.1. Работа с этим окном рассматривалась в начале этой главы в разделе “Создание шаблонов”. 
 Шаблоны можно открывать как обычные гипертекстовые документы командой File > Open (Файл > Открыть). Кроме того, программа располагает специализированной командой открытия шаблонов. Чтобы загрузить в окно документа шаблон текущей страницы, следует дать команду Modify > Templates > Open Attached Template (Изменить > Шаблоны > Открыть присоединенный шаблон). 
 В любой момент работы с гипертекстовым документом можно применить те изменения, которые внесены в шаблон, но по каким-то причинам не распространены на Web-страницу. Для этого следует дать команду Modify > Templates > Update Pages (Изменить > Шаблоны >> Обновить страницы) или Modify > Templates > Update Current Page (Изменить > Шаблоны > Обновить текущую страницу). 
 Эти способы обновления отличаются от описанных в начале данного раздела только одной деталью. Процедуру обновления надо запустить щелчком по кнопке Start (Начать) в диалоговом окне Update Pages (Обновление страниц). 
<img src="image/14-1-sozdanie-shablonov_1.gif" alt="Обновление документов">Гипертекстовые страницы, которые создаются командой File > New (Файл > Создать) — это пустые документы, полностью лишенные каких-либо элементов декоративного оформления. Применительно к этим объектам представление о форматировании по шаблону кажется лишенным оснований. На самом деле такие страницы создаются на основе единого образца, которым является шаблон с именем Default.htm. Он расположен в папке Configuration\Templates, вложенной в папку, в которую установлена программа. Этот документ можно открыть обычным для программы Dreamweaver способом и внести в него необходимые коррективы. Сделанные правки переносятся на все новые страницы. 
<h1>Редактирование шаблонов</h1>
Любой вновь созданный шаблон является полностью открытым объектом — при применении операций форматирования и информационного наполнения он ведет себя подобно обычной странице HTML Гипертекстовые документы, созданные на его основе, наследуют все свойства родительского объекта, кроме заголовка, то есть содержимого парного дескриптора <title>. 
<h1>Шаблоны</h1>
Шаблон, по определению энциклопедического словаря, — это образец или штамп для подражания. Подобное толкование несет заметный оттенок недоброкачественности или вторичности. В области Web-дизайна и предпечатной подготовки к шаблонам относятся иначе. Это вполне доброкачественный инструмент, свободное владение которым можно рассматривать как один из признаков мастерства и профессиональной зрелости дизайнера. 
 Шаблон — это матрица, способная к неограниченному воспроизводству клонов — документов. Документы, созданные по шаблону, наследуют все его признаки форматирования, стили, планировку страниц, внедренные объекты и многое другое. Кроме того, они сохраняют связь с родительским объектом. Изменения, внесенные в шаблон, влекут за собой обновление дизайна всех порожденных документов. Подобная индукция не всегда выгодна. Программа Dreamweaver располагает специальными средствами, которые позволяют разорвать “пуповину”, связывающую шаблон и созданные на его основе документы. 
 При разработке шаблона следует определить блокированные (закрытые) и редактируемые (открытые) части документа. Это деление относится только к порожденным документам. Их блокированные части недоступны для внесения изменений; работа с открытыми областями ничем не отличается от обычных гипертекстовых страниц. Сами шаблоны — это полностью открытые объекты, доступные для редактирования средствами программы Dreamweaver. 
Какие цели преследует такое разделение? Часто периодические сетевые издания или виртуальные проекты коллективной разработки можно разделить на постоянную и переменную части. Постоянная часть повторяется в каждом отдельном документе и является носителем фирменного стиля или единой структуры проекта. Например, таковы рубрикация сетевого периодического журнала или фирменный логотип на страницах технического руководства. Подобные фрагменты целесообразно включать в шаблоны и объявлять областями, закрытыми для внесения редакторских изменений Открытые области страниц хранят переменную информацию, то есть сведения, которые отличаются высокой динамикой изменений. Создание контента таких областей выполняется обычными средствами. 
 
Страницы, созданные на основе шаблона, сохраняют связь с родительским объектом после завершения разработки и даже после публикации. Изменения, внесенные в блокированные области шаблона, переносятся на все порожденные гипертекстовые страницы. Эту связь можно разорвать. Программа располагает специальной командой, которая “отчуждает” гипертекстовую страницу от шаблона и превращает их в совершенно независимые объекты. 
Шаблоны — это не единственное средство поддержки согласованного дизайна и коллективной разработки больших проектов. Сходные задачи решают библиотеки и включения стороны сервера, которые часто в изданиях на русском языке именуются английской аббревиатурой SSI (Server-Side Include). 
Работа с библиотеками рассмотрена в предыдущей главе достаточно подробно. Несколько дополнительных слов о технологии включений стороны сервера. Эта идея не нова для информатики; так, многие языки программирования располагают средствами, позволяющими включать в состав исходных текстов программ содержимое внешних файлов. 
Включения стороны сервера SSI представляют собой специальный язык и технологию, которая позволяет Web-серверу включать в текст страниц HTML содержимое других источников, текстовое или гипертекстовое. Окончательная сборка документа выполняется сервером непосредственно перед отправлением страницы HTML броузеру пользователя. Все монтажные операции абсолютно закрыты от конечного потребителя; он может даже не подозревать, что обозреваемая им страница содержит вставки или заимствования. 
 Гибкость и большие возможности повторного использования практически любого гипертекстового кода, которые дает разработчику технология включений стороны сервера, имеют свою оборотную сторону. С точки зрения информационной безопасности, объекты SSI часто представляют собой потенциально уязвимое место вычислительной системы. Многие провайдеры даже запрещают использование этих объектов на своих серверах. Кроме того, включения стороны сервера не могут обрабатываться программами просмотра. Нее операции по сборке документа, содержащего включения SSI, должны выполняться сервером. Библиотечные объекты обладают высокой гибкостью, могут обрабатываться броузерами, но запрет на включение в состав библиотечных разделов кода заголовочной части существенно ограничивает универсальность этого средства. 
В шаблонах удачно объединены универсальность и большие выразительные возможности включений стороны сервера и гибкость библиотек объектов. 
<h1>Создание документов по шаблонам</h1>
Программа Dreamweaver поддерживает различные стратегии использования шаблонов как образцов для оформления гипертекстовых документов. Так, шаблон можно выбрать в качестве стартовой точки для нового документа или применить его к созданному документу. 
 Техническая сторона процедуры создания нового документа не представляет каких-либо сложностей. Самая серьезная проблема, которую предстоит решить автору нового документа, — это вопрос о целесообразности сохранения связи с родительским шаблоном. При этом следует принять во внимание множество факторов: цель проекта, условия эксплуатации Web-узла, частота обновления страниц, функции документа и многое другое. 
Рассмотрим имеющиеся альтернативы. Если эту связь сохранить, то изменения шаблона переносятся на все документы, созданные на его основе. Данный режим установлен в программе по умолчанию. Если связь разорвать, то новые документы создаются как простые копии шаблонного образца. Они не делятся на блокированные и редактируемые области, не получают служебной разметки и нечувствительны к изменениям родительского образца. 
Механизм связи с шаблоном определяется флажком Update Page when Template Changes (Обновлять страницу при изменении шаблона). Этот флажок расположен в диалоговом окне, которое программа отображает при создании нового документа. 
Создать новый документ на основе разработанного шаблона можно следующим образом. 
<li>Дайте команду File > New From Templates (Файл > Создать документ на основе шаблона). По этой команде отображается диалоговое окно Select Template</li> 
(Выбор шаблона) (рис. 14.3), в котором следует выполнить все необходимые настройки. Рассмотрим их. 
<li>В раскрывающемся списке Site (Сайт) можно выбрать <>Web-узел.</li> 
<li>Список Templates (Шаблоны) содержит все шаблоны выбранного узла.</li> 
<li>Флажок Update Page when Template Changes (Обновлять страницу при изменении шаблона) управляет будущим обновлением страницы.</li> 
<li>Командная кнопка Select (Выбрать) завершает процедуру выбора шаблона документа.</li> 
<li>Щелкните на кнопке Select (Выбрать) или нажмите клавишу ENTER.</li> 
 
<img src="image/14-3.jpg" alt="Создание документов по шаблонам"> 
Puc. 14.3. Диалоговое окно создания нового документа 
Есть и иной способ решения этой задачи. Можно создать новый документ, например командой File > New (Файл > Создать), а затем применить к нему один из шаблонов палитры Assets (Ресурсы). 
Применить разработанный шаблон к существующему документу можно следующим образом. 
<li>Откройте документ.</li> 
<li>Дайте команду применения шаблона. Это можно сделать несколькими способами.</li> 
<li>Если дать команду Modify > Templates > Apply Template to Page (Изменить > Шаблоны > Применить шаблон к странице), откроется диалоговое окно (рис. 14.3), в котором надо выбрать имя шаблона и щелкнуть на кнопке Select (Выбрать).</li> 
<li>Можно открыть палитру Assets (Ресурсы), перейти в раздел Templates (Шаблоны), выбрать шаблон и щелкнуть в палитре на кнопке Apply (Применить).</li> 
<li>Можно перетащить значок шаблона из палитры Assets (Ресурсы) в окно документа, при этом документ должен находиться в режиме Design View (Режим планировки).</li> 
Что происходит с документом после применения к нему шаблона? Проще всего предвидеть последствия шаблонного форматирования пустого документа. Эта операция превращает его в почти точную копию родительского образца. Небольшая разница состоит в том, что открытые и закрытые области, которые в шаблоне имели этот статус номинально, действительно превращаются в редактируемые и блокированные фрагменты отформатированного документа. 
Ситуация немного осложняется при применении шаблона к документу с непустым содержимым. В этом случае он наследует дизайн и планировку выбранного образца, а его прежнее информационное наполнение конвертируется в общую редактируемую область. Программа предлагает выбрать одну из существующих областей шаблона для сохранения исходного контента. Для этого отображается диалоговое окно Choose Editable Region for Orphaned Content (Выбрать редактируемую область для непривязанного содержимого), в котором перечислены имена всех редактируемых областей. Пользователь может выбрать любую их них или отказаться от сохранения контента, выбрав пункт (попе) (Нет). 
 
 Самые большие проблемы возникают при применении шаблона к документу, созданному на основе другого шаблона. Правила трансляции строятся на соответствии редактируемых областей документа и нового образца. Все открытые области документа получают новое оформление, заимствованное от “одноименных источников” шаблона. Области, для которых не нашлось подобных аналогов, считаются потерянными (orphaned). Программа предлагает записать их содержимое в одну из редактируемых областей нового шаблона. Заблокированные области документа удаляются, а к документу добавляются все закрытые зоны нового образца. Новые открытые области, которые не имеют аналогов в рабочей области документа, добавляются без каких-либо изменений. 
<img src="image/14-1-sozdanie-shablonov_1.gif" alt="Создание документов по шаблонам">Переформатирование больших документов по новому шаблону — это рискованная процедура. Вероятность ошибки резко возрастает с увеличением числа редактируемых областей и усложнением дизайна. Если применение нового образца не привело к ожидаемым результатам, то процедуру можно отменить командой Edit > Undo Apply Templates (Правка > Отменить применение шаблона) или при помощи стандартной клавиатурной комбинации CTRL+Z. 
Все открытые области документа, которые не имеют одноименных аналогов на новом шаблоне, записываются в одну редактируемую область. Имя этой области надо выбрать в диалоговом окне Choose Editable Region for Orphaned Content (Выбрать редактируемую область для не привязанного содержимого), показанном на рис. 14.4. Если требуется оформить по новому образцу документ с развитой системой редактируемых областей и богатым форматированием, целесообразно ввести в состав шаблона специальную область для хранения всех потерянных областей. 
<img src="image/14-1-sozdanie-shablonov_1.gif" alt="Создание документов по шаблонам">Можно назвать типичной ситуацию, когда все попытки внести изменения в редактируемую область документа оканчиваются неудачей. Самой вероятной причиной этого является некорректное определение в шаблоне границ открытой области. Так, область станет недоступной, если определить ее границы по невидимым дескрипторам: , <img> и пр. 
<h1>Создание редактируемых областей</h1>
По умолчанию принимается соглашение, согласно которому документы, порожденные новым шаблоном, состоят из одной блокированной рабочей области. Программа разрешает сохранять и такие шаблоны, но их практическое значение невелико. Ценные шаблоны должны иметь не только тщательно отработанный дизайн, но и продуманное и устойчивое деление на блокированные и редактируемые области. 
Объявить область шаблона редактируемой можно так. 
<li>Загрузите шаблон в окно программы и выберите в нем область, которую требуется открыть для редактирования.</li> 
<li>Дайте нужную команду. Как и большую часть технических действий в программе, эту команду можно выполнить несколькими разными способами. Перечислим их:</li> 
<li>команда Modify > Templates > New Editable Region (Изменить > Шаблоны > Новая редактируемая область).</li> 
<li>щелчок правой кнопки мыши на выбранном фрагменте и выбор из открывшегося контекстного меню команды New Editable Region (Новая редактируемая область).</li> 
<li>комбинация клавиш CTRL+ALT+V.</li> 
<li>Откроется диалоговое окно New Editable Region (Новая редактируемая область), в котором надо ввести имя новой области и подтвердить операцию щелчком на кнопке ОК.</li> 
<img src="image/14-1-sozdanie-shablonov_1.gif" alt="Создание редактируемых областей">В именах редактируемых областей допускается использовать пробелы, но запрещаются следующие специальные символы: ? (вопросительный знак), “(двойная кавычка)," (апостроф), < и > (угловые скобки). 
Редактируемые области шаблона выделяются специальным прямоугольником, охватывающим все внутренние объекты. Кроме того, каждая область имеет уникальное имя, которое выводится на специальном ярлычке в верхнем левом углу этого прямоугольника (рис. 14.2). 
<img src="image/14-2.jpg" alt="Создание редактируемых областей"> 
Рис. 14.2. Шаблон с двумя редактируемыми областями 
Существует общее правило расположения областей, согласно которому редактируемый фрагмент должен представлять собой часть документа, ограниченную парными дескрипторами. Например, это может быть вся таблица (<table> </table>) или ячейка таблицы (<td> </td>). Программа Dreamweaver не различает выбора ячейки таблицы или содержимого ячейки. Такой выбор считается эквивалентным. 
 
Слои и их наполнение — это разные объекты. Объявить открытым слой – значит, дать возможность менять его положение в пределах документа; открыть содержимое слоя — значит, сделать все объекты, расположенные на нем, доступными для изменений. 
Имена всех созданных редактируемых областей шаблона отображаются в меню, которое открывается командой Modify > Templates (Изменить > Шаблоны). Эти имена представляют команды перехода в редактируемые области документа. 
Можно не только объявить открытой выделенную область шаблона, но и вставить новую, первоначально пустую, область, свободную для наполнения и форматирования. 
<li>Откройте шаблон и поместите текстовый курсор в позицию вставки.</li> 
<li>Дайте команду Modify > Templates > New Editable Region (Изменить > Шаблоны > Новая редактируемая область).</li> 
<li>В одноименном диалоговом окне введите имя новой области.</li> 
<li>Подтвердите создание области щелчком на кнопке ОК. В позиции текстового курсора появится пустая область, которая первоначально представлена именем, заключенным в фигурные скобки. И в шаблоне, и во всех документах, созданных на его основе, это символическое обозначение можно заменить надлежащим контентом: текстом или графикой. На рисунке 14.2 показана одна пустая область; она называется Empty.</li> 
<img src="image/14-1-sozdanie-shablonov_1.gif" alt="Создание редактируемых областей">Любой документ, сохраненный в формате шаблона, автоматически получает одну открытую область под названием doctitle. Это область хранения заголовка шаблона. Чтобы изменить предлагаемый по умолчанию заголовок Untitled Document надо, например, открыть диалоговое окно настроек страницы (CTRL+J) и в поле Title (Заголовок) ввести нужное название. 
Операция создания открытой области обратима. Заблокировать открытую область шаблона можно следующим образом. 
<li>Откройте шаблон.</li> 
<li>Дайте команду Modify > Templates > Remove Editable Region (Изменить > Шаблоны > Удалить редактируемую область).</li> 
<li>Откроется одноименное диалоговое окно, в котором надо выбрать имя области и подтвердить операцию щелчком на кнопке ОК. Эта операция удаляет все признаки редактируемой области, оставляя неизменным ее содержимое.</li> 
<img src="image/14-1-sozdanie-shablonov_1.gif" alt="Создание редактируемых областей">Следует отметить одну техническую деталь операции блокировании Ранее отмечалось, что любая пустая редактируемая область помечается в рабочем поле шаблона именем, заключенным в фигурные скобки. Команда Remove Editable Region (Удалить редактируемую область) успешно работает с такими областями: она удаляет все признаки редактируемой области, но оставляет имя, которое становится просто частью текста. На шаблоне это имя можно убрать вручную. Чтобы исключить его из всех порожденных шаблоном документов, следует выполнить команду обновления. 
<h1>Создание шаблона</h1>
Любой существующий гипертекстовый документ можно превратить в шаблон. Эта технически простая операция выполняется следующим образом. 
<li>Откройте документ командой File > Open (Файл > Открыть).</li> 
<li>Внесите в документ необходимые правки.</li> 
<li>Дайте команду File > Save as Template (Файл > Сохранить как шаблон).</li> 
<li>Откроется диалоговое окно (рис. 14.1), в котором надо выбрать Web узел и название нового шаблона.</li> 
<img src="image/14-1.jpg" alt="Создание шаблона"> 
Рис. 14.1. Создание шаблона 
<li>Щелкните на кнопке Save (Сохранить).</li> 
Если документ, принятый за образец, связан с уже существующим шаблоном, то перед сохранением его в качестве нового шаблона требуется дать команду, разрывающую эту связь. 
После сохранения документа в виде шаблона программа Dreamweaver вставляет в строку заголовка пометку “Template”, которая напоминает о роли документа. 
“С чистого листа” шаблоны создаются несколько иначе. 
<li>Дайте команду Windows > Templates (Окно > Шаблоны). На экране появится палитра Assets (Ресурсы) с активным разделом Templates (Шаблоны).</li> 
<li>Дайте на палитре команду New Template (Новый шаблон). Эта команда – один из пунктов меню, открываемого щелчком на треугольной кнопке справа.</li> 
<li>В центральной части палитры появится значок нового шаблона с именем, которое программа присвоит ему по умолчанию. Для него можно сразу же ввести содержательное наименование.</li> 
<li>Откройте новый пустой шаблон двойным щелчком на его имени в палитре Assets (Ресурсы).</li> 
<h1>Создание шаблонов</h1>
Новый шаблон можно создать на основе существующего гипертекстового документа или разработать “с нуля”. Программа Dreamweaver хранит шаблоны в файлах с расширением .DWT в специально отведенной для этих целей папке Templates, вложенной в корневую папку сайта. Эта папка автоматически создается программой, как только разработан и сохранен первый такой документ. 
 <img src="image/14-1-sozdanie-shablonov_1.gif" alt="Создание шаблонов"> Папку с шаблонами нельзя переименовывать или перемещать в другой родительский каталог. Более того, в этот раздел файловой системы запрещается записывать файлы иного типа. Подобные действия способны вызвать ошибки на страницах документов, использующих форматирование по шаблону. 
Дополнительную информацию о шаблоне можно сохранить в комментариях разработчика, которые связываются только с ним и не наследуются порожденными документами. Большинство операций по созданию планировки и информационному наполнению шаблонов выполняется в режиме Design View (Режим планировки). Наиболее типичной причиной недоступности нужных команд при работе с такими объектами является неправильный режим отображения страниц. 
Несколько замечаний по поводу тактики создания шаблонов. Если на обычных гипертекстовых страницах графические и текстовые “заглушки” — это временная мера, допустимая только на определенных стадиях разработки, то для шаблонов их применение не только целесообразно, но часто и необходимо. Макеты текстовых фрагментов и графических образов позволяет сохранить планировку документа, они также служат напоминанием о необходимости включения на данные позиции постоянных объектов определенного типа. 
Элементы дизайна, повторяющиеся на нескольких страницах проекта, следует включать в состав шаблона. 
Одним из типов повторяющейся служебной информации являются метадескрипторы, которые позволяют выполнить индексацию страницы поисковыми машинами. Несмотря на то что эти сведения располагаются в разделе заголовков документа, их можно объявить составной частью шаблона. 
Когда гипертекстовый документ сохраняется в формате шаблона, его заголовочная часть блокируется, то есть становится защищенной от внесения изменений. Часть кода иерархических стилевых спецификаций и динамических сценариев располагается в области действия дескриптора <head>
<link rel="canonical" href="https://www.e-lave.ru//chapter.htm"/> Коли на порожденных страницах предполагается использовать эти возможности динамического HTML, то все необходимые описания следует заранее внести в раздел заголовков шаблона. 
<h1>Визуализация шаблонов и документов</h1>
Шаблоны и документы, созданные на их основе, отличаются от обычных гипертекстовых страниц не только способами обработки, но и внешним видом. 
Систематизируем все сказанное о способах визуализации этих объектов. Редактируемые области шаблонов и шаблонных документов выделяются при помощи прямоугольной рамки с ярлычком в левом верхнем углу. На ярлычке отображается имя области. Щелчок на нем позволяет выбрать всю область целиком. По умолчанию рамка окрашена в светло-синий цвет. Как-либо выделять блокированные области нет необходимости. В шаблонах это обычные гипертекстовые фрагменты, которые не обладают какими-то экстраординарными свойствами. В документах такие области недоступны — текстовый курсор принимает над ними вид запрещающего знака, что служит лучшим признаком блокированной области. Все рабочее поле документа, созданного на основе шаблона, охватывается желтым прямоугольником с именем родительского объекта справа. 
Все перечисленные методы визуализации действуют только в режиме планировки страницы. Исходный текст документа-шаблона размечается по-другому. В режиме отображения кодов все блокированные кодовые области выделяются светло-желтым фоном. Фрагменты, свободные для внесения изменений, не имеют особой маркировки — это обычные кодовые последовательности гипертекстового документа. 
<img src="image/14-1-sozdanie-shablonov_1.gif" alt="Визуализация шаблонов и документов">Программа не запрещает вводить дополнительные коды в заблокированные области исходного текста. Но все такие фрагменты текста она просто игнорирует. Это значит, что они не отображаются в режиме планировки страницы и не сохраняются вместе с документом. 
Открытые области кода заключаются программой внутрь специальных дескрипторных скобок, которые с точки зрения языка гипертекстовой разметки представляют собой комментарии. Следующий фрагмент дает пример оформления пустой редактируемой области из примера, приведенного на рис. 14.2: 
<!— #BeginEditable “Empty” —>{Empty}<!— #EndEditable —> 
Цвета служебной разметки шаблонов, установленные по умолчанию, можно изменить. 
<li>Дайте команду Edit > Preferences (Правка > Настройки), которая открывает доступ к базовым настройкам программы.</li> 
 
<li>В диалоговом окне Preferences (Настройки) перейдите в раздел Highlighting (Выделение).</li> 
<li>Установите необходимые цвета в разделах Editable Regions (Редактируемые области) и Locked Regions (Заблокированные области).</li> 
<li> Завершите процедуру щелчком на кнопке ОК.</li> 
<img src="image/14-1-sozdanie-shablonov_1.gif" alt="Визуализация шаблонов и документов">Служебная разметка шаблонов отображается на экране только при выполнении двух условий. Во-первых, в диалоговом окне настроек программы должны быть установлены флажки Editable Regions (Редактируемые области) и Locked Regions (Заблокированные области). Во-вторых, надо разрешить отображение вспомогательных элементов макета страницы. Это можно сделать с помощью команды View > Visual Aids > Invisible Elements (Вид > Служебная разметка > Скрытые элементы). 
<h1>
Dreamweaver 4
</h1>
<h1>Цвета элементов документа</h1>
В разделе Code Colors (Цвета кода) можно настроить цвет основных элементом гипертекстового документа и исходного текста, отображаемых в окне Инспектора кода (рис. 15.2). 
<img src="image/15-2.jpg" alt="Цвета элементов документа"> 
Рис. 15.2. Раздел Code Colors 
Настройки данного раздела следующие. 
<li>Background (Фон). Цвет фона палитры Code Inspector (Инспектор кода) и окна документа в режиме отображения кодов или в расщепленном режиме.</li> 
<li>Text (Текст). Задает цвет текста между дескрипторами. Например, в следующем кодовом фрагменте</li> 
текст с полужирным начертанием 
строчка внутри дескрипторных скобок будет окрашена выбранным цветом, а сами теги — нет; 
<li>Comments (Комментарии). Задает цвет комментариев в исходном тексте. Напомним, что в языке HTML комментарием считается любая текстовая строка, расположенная между скобками вида <!— и —>;</li> 
<li>Tag Default (Все дескрипторы). Выбирает цвет, которым представляются коды разметки. Отменить общую установку можно, задав особый цвет для выбранного дескриптора. Для этого служит параметр Tag Specific (Выбранный дескриптор).</li> 
<li>Reserved Keywords (Зарезервированные ключевые слова). Цвет для всех ключевых слов исходного текста, кроме дескрипторов. Эта настройка действует, например, на зарезервированные слова языка JavaScript.</li> 
<li>Other Keywords (Прочие ключевые слова). Цвет прочих ключевых слов--тех ключевых слов, цвет которых не определен двумя предыдущими разделами. Таковы, например, имена объектов и функций в описаниях сценариев.</li> 
<li>Strings (Строки). Задает цвет всех строковых параметров в исходном тексте документа HTML.</li> 
<li>Tag Specific (Выбранный дескриптор). Выбор особого цвета для отдельных дескрипторов.</li> 
<li>Apply Color to Tag Contents (Применить цвет к содержимому дескриптора). Применить указанный цвет к содержимому данного дескриптора. Опция распространяет заданный цвет на всю область действия выбранного тега.</li> 
<h1>Формат кода</h1>
В разделе Code Format (Формат кода) расположены настройки, которые управляют способом представления кода в палитре Code Inspector (Инспектор кода) и в окне документа в режиме отображения исходного текста (рис. 15.3). Все параметры этой категории, кроме Override Case Of... (Переопределить регистр...), не имеют обратной силы. Они действуют только для новых документов или для кодовых фрагментов, добавленных после настройки параметров. Чтобы применить эти установки к ранее введенным исходным текстам, следует дать команду Command > Apply Source Formatting (Команда > Отформатировать исходный текст). 
Перечислим настройки, задающие планировку исходного текста документа. 
<li>Indent (Отступ). Включает режим ввода дескрипторов с отступами. Параметры отступов задаются в специальном конфигурационном файле SourceFormat.txt.</li> 
<li>Use (Символ). Выбирает символы, определяющие отступ. Для этого можно использовать пробелы или символы табуляции.</li> 
<li>Table Rows and Columns (Строки и столбцы таблицы). Включает отступ для дескрипторов строк таблицы <tr> и ячеек таблицы <td>. Эта настройка действует только тогда, когда включен общий режим ввода с горизонтальным сдвигом подчиненных кодов.</li> 
<li>Frames and Framesets (Фреймы и наборы фреймов). Сдвиг вложенных дескрипторов фреймов <frame> и структур фреймов <frameset>. Этот режим действует, если включен флажок Indent (Отступ), отвечающий за ввод всех дескрипторов со сдвигом.</li> 
<li>Indent Size (Размер отступа). Эта величина показывает число символов отступа, заданных параметром Use (Символ).</li> 
<li>Tab Size (Сдвиг табуляции). Величина сдвига, заданного символом табуляции. Измеряется числом обычных символов.</li> 
<li>Automatic Wrapping (Перенос по словам). Автоматический перенос кода на новую строку, если длина строки превышает заданную величину. Программа следует данной установке, если перенос строк не приводит к нарушению форматирования. В некоторых обстоятельствах могут появляться строки кода, длина которых превышает установленный предел.</li> 
<li>Line Breaks (Символы перехода на новую строку). Символы, обозначающие переход на новую строку, различаются на разных платформах (Windows, Macintosh или UNIX). Данная настройка позволяет выбрать способ кодирования перехода на новую строку в зависимости от операционной системы, установленной на удаленном сервере. При передаче файлов на удаленный сервер по протоколу FTP данная настройки принимается во внимание, если загрузка осуществляется в двоичном режиме (binary). Если копирование выполняется в режиме ASCII, то для обозначения перехода на новую строку принимается способ кодирования, принятый в операционной системе локального компьютера. Для Windows это комбинация символов CR (возврат каретки) и LF (переход на новую строку). Эта настройка полезна в тех случаях, когда документ передается для последующей обработки в текстовый редактор.</li> 
 
<li>Case for Tags (Регистр дескрипторов). Задает регистр, в котором записываются коды разметки. Данная настройка влияет только на разметку, автоматически создаваемую программой при работе в режиме планировки страницы. Регистр кодов, введенных непосредственно в палитре Code Inspector (Инспектор кода), остается неизменным, то есть прописные и строчные символы сохраняются так, как они были введены.</li> 
<li>Case for Attributes (Регистр атрибутов). Параметр имеет тот же смысл, что и предыдущий, но применительно к атрибутам дескрипторов.</li> 
<li>Override Case Of Tags (Переопределить регистр тегов). После установки данного флажка коды любого открываемого документа приводятся к одному регистру. “Общим стандартом” для всех кодов служит регистр, выбранный в разделе Case for Tags (Регистр дескрипторов). Кроме того, все новые коды разметки, введенные в Инспекторе кода или при помощи экспресс-редактора, принимают тот же регистр.</li> 
<li>Override Case Of Attributes (Переопределить регистр атрибутов). Назначение этой настройки такое же, как предыдущей, но она действует не атрибуты кодов разметки.</li> 
<li>Centering (Центрирование). Задает способ центрирования. Четвертая версия языка HTML допускает центрирование при помощи двух различных тегов: <div align="center"> и <center>.</li> 
<img src="image/15-3.jpg" alt="Формат кода"> 
Puc. 15.3. Раздел Code Format 
<h1>Иерархические стилевые спецификации</h1>
Тематически однородный раздел CSS Styles (Стили CSS) (рис. 15.5) объединяет простые настройки, относящиеся к записи каскадных листов стилей (иерархических стилевых спецификаций). Директивы стилевых спецификаций разрешается вводить в сокращенной нотации, которая считается большинством пользователей более удобной. Например, следующую декларацию в полной нотации: 
H1 (font-family: Helvetica; font-size: 1 2pt; line-height: 14pt; font-weight: bold;} 
можно записать в сокращенной форме: 
Н1 {font: Helvetica I 2pt/14pt bold} 
Но некоторые старые версии программ просмотра не могут корректно обработать, такие синтаксические конструкции. Эта категория обеспечивает выборочную настройку сокращенной нотации для отдельных стилевых спецификаций: 
<li>Use Shorthand For (Использовать сокращенную запись для). Задает атрибуты, которые программа Dreamweaver записывает в сокращенной форме.</li> 
<li>When Editing CSS Styles Use Shorthand (Использовать сокращенную запись при редактировании стилей CSS). Задает поведение программы при редактировании стилевых спецификаций. Если установить переключатель If Original Used Shorthand (В соответствии с исходным текстом), то в ходе редактирования все атрибуты сохраняют первоначальный вид. Установка переключателя According to Settings Above (В соответствии с настройками) влечет за собой изменение формы представления в соответствии с ранее заданным списком.</li> 
<img src="image/15-5.jpg" alt="Иерархические стилевые спецификации"> 
Puc. 15.5. Раздел CSS Styles 
<h1>Экспресс-редактор кода</h1>
Раздел Quick Tag Editor (Экспресс-редактор) позволяет задать два параметра, управляющих поведением экспресс-редактора кода (рис. 15.14). Напомним, что эта компактная программа, встроенная в оболочку Dreamweaver, предназначена для вставки кодов гипертекстовой разметки. Она обладает свойством контекстной чувствительности. Это означает, что редактор выбирает группу подходящих дескрипторов или их атрибутов по первым введенным буквам. Кроме того, программа существенно упрощает вставку парных дескрипторов, охватывающих выбранную область исходного текста документа. Самый простой способ вызова экспресс-редактора — это комбинация клавиш CTRL+T. 
Рассмотрим настроечные параметры редактора. 
<img src="image/15-14.jpg" alt="Экспресс-редактор кода"> 
Puc. 15.14. Раздел Quick Tag Editor 
<li>Apply Changes Immediately While Editing (Применение изменений по ходу редактирования). От этого флажка зависит способ применения изменений, сделанных в экспресс-редакторе. Если флажок установлен, то при работе в режиме Edit Tag (Редактирование кода) для обновления документа не требуется никаких дополнительных подтверждений. Если флажок сброшен, то для переноса правки в документ требуется нажать клавишу ENTER. В режимах Insert Tag (Вставка кода) и Wrap Tag (Замыкание кода) экспресс-редактора применение обновлений всегда выполняется по нажатию клавиши ENTER.</li> 
<li>Enable Tag Hints (Включить контекстный список дескрипторов и атрибутов). Управляет выводом меню контекстного списка дескрипторов и атрибутов. При помощи движка можно выставить величину задержки перед появлением этого меню.</li> 
<h1>Корректировка кода</h1>
В разделе Code Rewriting (Корректировка кода) настраивается поведение программы при загрузке гипертекстовых документов или текстов программ, созданных другими редакторами (рис. 15.4). Установки данного раздела не принимаются во внимание при работе с исходным текстом в Инспекторе кода или в окне документа в режиме отображения кодов. 
<li>Fix Invalidly Nested and Unclosed Tags (Исправить неверно вложенные и незакрытые дескрипторы). Автоматическая корректировка пересекающихся дескрипторов. Например, фрагмент text заменяется фрагментом text. Кроме того, если этот флажок установлен, то программа автоматически расставляет пропущенные закрывающие кавычки и скобки.</li> 
<li>Remove Extra Closing Tags (Удалить лишние закрывающие дескрипторы). Удаление закрывающих дескрипторов, которые не имеют соответствующих открывающих кодов.</li> 
<li>Warn When Fixing or Removing Tags (Предупреждать при исправлении или удалении дескрипторов). Отображение сводки по некорректным кодам paзметки.</li> 
<li>Never Rewrite HTML: In Files with Extensions (He редактировать код: В файлах с расширениями). Задает список расширений файлов, которые загружаются в программу без корректировки кода. Эта настройка полезна в тех случаях, когда открывается документ, содержащий корректные, но неизвестные программе коды, например .ASP, .PHP и пр.</li> 
<li>Special Characters (Специальные символы). Перекодирование специальных символов. Целесообразно оставить включенными оба флажка этой группы. В этом случае программа самостоятельно меняет кодировку некоторых специальных символов, введенных с помощью палитры Property Inspector (Инспектор свойств). Это может улучшить кроссплатформенную совместимость гипертекстового документа.</li> 
<img src="image/15-4.jpg" alt="Корректировка кода"> 
Puc. 15.4. Раздел Code Rewriting 
<h1>Настройка клавиатурных комбинаций</h1>
Уверенное владение программным продуктом подразумевает беглое использование клавиатурных комбинаций для ускорения самых ходовых операций. Систематическую работу с “быстрыми клавишами” можно считать косвенным признаком мастерства и профессиональной зрелости. Не случайно, при переходе на новый программный продукт или смене платформы даже искушенные пользователи часто испытывают трудности с освоением нестандартных клавиатурных комбинаций. 
Программа Dreamweaver располагает специализированным редактором, с помощью которого можно не только изменить неудобные сочетания, но и полностью переработать всю “клавиатурную раскладку” команд. Для запуска этого редактора надо дать команду Edit > Keyboard Shortcuts (Правка > Клавиатурные комбинации). Она выводит на экран диалоговое окно (рис. 15.17), средствами которого выполняется вся созидательная работа по настройке клавиатурных комбинаций. 
Рассмотрим элементы управления окна и способы их использования. 
<li>Current Set (Текущий набор). Содержимое этого списка составляют имена стандартных наборов клавиатурных комбинаций. Это специализированные наборы, имена и содержание которых заимствованы из конкретных программ: BBedit, Dreamweaver 3, HomeSite, Macromedia Standard. Последний набор объединяет актуальные клавиатурные комбинации, действующие в текущей версии программы. После выбора конкретного набора, включенные в него комбинации клавиш выводятся в списке, где их можно выбирать и редактировать.</li> 
<li>Commands (Команды). Этот раскрывающийся список содержит перечень основных разделов системы команд программы. В такие разделы входят команды меню, команды Диспетчера узла, команды редактирования исходного текста и пр. От выбранного раздела зависит содержимое следующего списка, где отображаются все компоненты раздела и сопоставленные им комбинации клавиш.</li> 
<li>Shortcuts (Клавиатурные комбинации). Этот список показывает все клавиатурные комбинации, поставленные в соответствие выбранной команде.</li> 
<img src="image/15-17.jpg" alt="Настройка клавиатурных комбинаций"> 
Puc. 15.17. Настройка клавиатурных комбинаций 
 
<li>Press Key (Нажать клавиши). Отображает комбинации, назначенные пользователем данной команде или инструменту.</li> 
<li>Кнопка со знаком + начинает создание новой клавиатурной комбинации. Одному элементу набора можно поставить в соответствие несколько комбинаций.</li> 
<li>Кнопка со знаком - предназначена для удаления выбранной комбинации.</li> 
<li>Duplicate Set (Дублировать набор). Эта кнопка расположена в верхней части диалогового окна. Она служит для создания дубликата выбранного набора.</li> 
<li>Rename Set (Переименовать набор). Эта кнопка позволяет переименовать выбранный набор клавиатурных команд.</li> 
<li>Export as HTML (Экспортировать как HTML). Эта кнопка запускает процедуру экспорта набора клавиатурных команд. Заданную в наборе раскладку команд и клавиш можно сохранить в виде таблицы, записанной в формате HTML.</li> 
<li>Delete Set (Удалить набор). Удаляет выбранный набор клавиатурных команд.</li> 
<li>Change (Изменить). Эта кнопка назначает новое сочетание клавиш выбранной команде и добавляет его к списку ранее заданных сочетаний, представленному в разделе Shortcuts (Клавиатурные комбинации).</li> 
Удаление и замена наборов клавиатурных команд — это радикальные мероприятия, прибегать к которым приходится достаточно редко. Большая часть ежедневных потребностей решается добавлением к текущему набору нескольких привычных сочетаний клавиш. Рассмотрим примерную последовательность действий. 
<li>Выберите элемент системы управления (команду или инструмент) программы, для которого надо назначить новую комбинацию клавиш. Для этого надо в разделе Commands (Команды) диалогового окна Keyboard Shortcuts (Клавиатурные комбинации) выполнить навигацию по меню программы и выбрать нужный элемент. В списке Shortcuts (Клавиатурные комбинации) будут показаны все комбинации, закрепленные за данной командой.</li> 
<li>Щелкните на кнопке со знаком +. При этом список Shortcuts (Клавиатурные комбинации) активизируется, а курсор перемещается в поле Press Key (Нажать клавиши).</li> 
<li>Нажмите на клавиатуре требуемое сочетание клавиш. Если выбранная комбинация по каким-либо причинам недопустима, программа выведет диалоговое окно с предупреждением и предложит выбрать другое клавиатурное сочетание.</li> <li>Завершите процедуру щелчком на кнопке Change (Изменить).</li> 
<h1>Настройка программы</h1>
Программа Dreamweaver основана на принципах открытой архитекту. Это значит, что программный интерфейс приложения (Application Programming Interface, APT) полностью открыт. С его помощью сторонние разработчики и опытные пользователи имеют возможность выполнить глубокую настройку внешнего вида и инструментов программы. Описание программного интерфейса приложения можно загрузить с сайта фирмы Macromedia. Это солидный технический документ объемом примерно в четыре сотни страниц. Чтобы достичь уровня, позволяющего вносить изменения в программное обеспечение редактора, потребуются значительные усилия. 
<h1>Настройка строки состояния</h1>
В небольшой раздел Status Bar (Строка состояния) входят настройки, от которых зависит вид строки состояния программы (рис. 15.16). Этот служебный элемент расположен вдоль нижнего края окна документа. По умолчанию в строке состояния выводится информация о текущем размере окна и времени, нужном для загрузки текущей страницы. Кроме того, правую часть строки состояния занимает панель быстрого запуска. 
<li>Window Sizes (Размеры окна). Гипертекстовые страницы могут отображаться в окнах разного размера. Поэтому в ходе их разработки требуется применять специальные меры, чтобы отработать дизайн в расчете на представление на мониторах разного формата. Программа Dreamweaver располагает простым средством, которое разрешает, не прерывая работы с документом, “на лету” выбрать один из установленных стандартных размеров. Для этого достаточно раскрыть список предустановленных размеров и выбрать из него нужные габариты окна. Этот список раскрывается щелчком на левом поле строки состояния. Панель Window Sizes (Размеры окна) предназначена для корректировки списка стандартных размеров. Все редакторские операции выполняются при помощи ввода с клавиатуры в соответствующие поля этой панели.</li> 
<li>Connection Speed Kilobits Per Second (Скорость соединения, Кбит/с). В это поле вводится примерная скорость соединения с сервером. Эта опорная величина служит для расчета времени загрузки текущей страницы. По умолчанию выбрана скорость 28,8 Кбит/с, что вполне реально для современных модемов и связи по коммутируемой телефонной линии.</li> 
<img src="image/15-16.jpg" alt="Настройка строки состояния"> 
Рис. 15.16. Раздел Status Bar 
<li>Show Launcher in Status Bar (Панель быстрого запуска в строке состояния). Этот флажок управляет отображением панели быстрого запуска в строке состояния. Если его сбросить, панель не будет выводиться на экран.</li> 
<h1>Основные настроечные параметры</h1>
К счастью, настройка подобной глубины и сложности требуется далеко не во всех случаях. Самые ходовые настроечные параметры программы доступны и рядовому пользователю. Все они сведены в диалоговое окно Preferences (Настройки) и разделены на шестнадцать тематических категорий. Чтобы открыть это окно, надо дать команду Edit > Preferences (Правка > Настройки) или воспользоваться комбинацией клавиш CTRL+U. 
Некоторые разделы этого диалогового окна рассмотрены достаточно подробно в предыдущих главах книги. Сейчас мы дадим достаточно краткое описание всех настроек программы, которые можно изменить средствами диалогового окна Preferences (Настройки). 
Большая часть настроек оформлена в виде флажков. Для элементов управления этого типа описание настройки относится к случаю, когда флажок установлен. Описание настройки, соответствующей сброшенному состоянию флажка, приводится в тех случаях, когда логика работы программы неочевидна и требует пояснений. 
Общие настройки 
Раздел General (Общие) объединяет общие настройки программы, отвечающие за внешний вид и основные характеристики поведения (рис. 15.1). В него входят следующие настройки. 
<li>Show only Site Window on Startup (Показывать при запуске только окно узла) При запуске программы отображается окно Диспетчера узла, а не окно документа.</li> 
<li>Open Files in New Window (Открывать файлы в новом окне). Файлы открываются в новом окне документа. В противном случае новые документы замещают ранее открытые в данном окне программы. Эта настройка не относится к документам, открываемым из окна Диспетчера узла двойным щелчком на значке.</li> 
<li>Warn when Opening Read-Only Files (Предупреждать при открытии файлов для чтения). Выводится предупреждение об открытии блокированных файлов.</li> 
<li>Add Extension when Saving (Добавлять расширение при сохранении). Выбор расширения имени файла, которое добавляется по умолчанию ко веем сохраняемым документам. По умолчанию устанавливается стандартное для гипертекстовых документов расширение имени .НТМ.</li> 
<li>Update Links when Moving Files (Обновлять ссылки при перемещении файлов). Задает поведение программы при перемещении, переименовании и удалении документов средствами Диспетчера узла. Эти операции меняют структуру ссылок узла, поэтому требуется настроить операцию обновления. Желательное поведение программы выбирается в списке, состоящем из трех пунктов: Always (Всегда обновлять), Never (He выполнять обновления), Prompt (Выдавать запрос на обновление).</li> 
 
<li> Show Dialog when Inserting Objects (Отображать диалоговые окна при вставке) Задает вывод дополнительных диалоговых окон при вставке внешних объектов: таблиц, изображений, роликов Shockwave и пр. Чтобы временно подавить эту установку, следует выполнять вставку при нажатой клавише CTRL. При вставке объектов, требующих обязательной настройки (например интерактивных изображений), диалоговое окно настройки отображается независимо от состояния этого флажка.</li> 
<li>Faster Table Editing (Deferred Update) (Ускоренная правка таблиц — отложенное обновление). Ускоряет ввод текста в таблицы за счет того, что изменение ширины строк и высоты столбцов откладывается до тех пор, пока не будет сделан щелчок за пределами таблицы. Если флажок установлен, можно принудительно обновить таблицу при помощи комбинации клавиш CTRL+ПРОБЕЛ.</li> 
<li>Rename Form Items when Pasting (Переименование элементов управления формы при вставке). Изменение имен элементов форм при операциях копирования.</li> 
<li>Enable Double-Byte Inline Input (Разрешить двухбайтовый ввод). Разрешает работать с текстом, заданном в длинной, двухбайтовой кодировке, непосредственно в окне документа. Подобной кодировки требуют многие азиатские языки с иероглифической письменностью.</li> 
<li>Maximum Number of History Steps (Максимальная глубина отката). Задает максимальную глубину отката. Введенное число определяет количество операций, запоминаемых в палитре History (Предыстория).</li> 
<li>Objects Panel (Палитра объектов). Этот список задает вид палитры Object (Объекты). Предлагаются следующие альтернативы: Icons and Text (Значки и текст), Icons Only (Только значки), Text Only (Только текст).</li> 
<li>Spelling Dictionary (Словарь). Выбор словаря для проверки орфографии.</li> 
<img src="image/15-1.jpg" alt="Основные настроечные параметры"> 
Puc. 15.1. Раздел General 
<h1>Палитры</h1>
Категория Panels (Палитры) объединяет настройки, управляющие поведением многочисленных инструментальных палитр программы и способами их вызова (рис. 15.12). 
<img src="image/15-12.jpg" alt="Палитры"> 
Рис. 15.12. Раздел Panels 
В верхней части окна в разделе с общим заголовком Always on Top (Всегда сверху) расположено четырнадцать флажков, от состояния которых зависит положение одноименной палитры и окна документа. Если установить флажок, то раскрытая палитра всегда располагается поверх окна документа и в активном, и в пассивном состоянии. 
 Палитры, у которых этот флажок сброшен, ведут себя по-другому. В пассивном состоянии они располагаются ниже окна документа. С одной стороны, в таком состоянии они не занимают рабочее пространство экрана. С другой стороны, затрудняется обращение к палитре при работе с развернутым окном документа. Для палитры Code Inspector (Инспектор кода) существует специальная клавиатурная комбинация CTRL+TAB, позволяющая выполнять быстрое перемещение между окном документа и этой палитрой. Для неережим работы, при котором неактивная палитра располагается под окном документа, весьма удобен. 
Оставшаяся группа параметров под общим названием Show in Launcher (Показать в палитре быстрого запуска) предназначена для настройки содержимого палитры и панели быстрого запуска. Напомним, что палитра Launcher (Быстрый запуск) — это специальное хранилище для кнопок запуска дополнительных средств программы: палитр и диалоговых окон. Панель быстрого запуска представляет собой палитру Launcher (Быстрый запуск), оформленную в виде раздела строки состояния. 
Изменение содержимого палитры быстрого запуска выполняется при помощи стандартных для программы элементов управления. Кнопка со знаком + добавляет выбранный элемент управления в палитру, кнопка со знаком -удаляет его. Кнопки со стрелками позволяют изменить порядок значков. 
<h1>Параметры сайта</h1>
Раздел Site (Сайт) объединяет важные настройки связи с удаленным сервером по протоколу FTP (рис. 15.15). В главе, посвященной созданию Web-узла, мы подробно рассмотрели большинство настроек этой категории. Повторим их краткое описание. 
<img src="image/15-15.jpg" alt="Параметры сайта"> 
Puc. 15.15. Раздел Site 
<li>Always Show (Всегда показывать). Управляет расположением панелей удаленного и локального узла в окне диспетчера узла.</li> 
<li>Dependent Files: Prompt on Get/Check Out (Зависимые файлы: Запрашивать при приеме). От этого параметра зависит вывод диалогового окна с запросом на подтверждение передачи зависимых файлов. Запустить процесс передачи с удаленного компьютера на локальный можно по команде Get (Получить) или Check Out (Блокировать). Зависимыми считаются все файлы, на которые текущий документ ссылается или использует непосредственно, например: изображения, внешние стилевые спецификации и пр.</li> 
<li>Dependent Files: Prompt on Put/Check In (Зависимые файлы: Запрашивать при передаче). Запрос на подтверждение передачи зависимых файлов. Этот запрос выводится при копировании файлов с локального компьютера на удаленный сервер. Запускают процедуру копирования команды Put (Передать) или Check In (Снять блокировку). Если сбросить этот и предыдущий флажки, то запрос на вывод зависимых файлов не отображается. Чтобы принудительно вывести это окно, надо дать команду, запускающую процедуру копирования, при нажатой клавише ALT.</li> 
<li>FTP Connection (Соединение). Задает предельное время простоя в процессе соединения с удаленным сервером по протоколу FTP. Если в течение указанного промежутка времени ни одна из сторон не проявила активности, то связь между удаленным и локальным компьютерами разрывается.</li> 
<li>FTP Time Out (Тайм-аут). Максимальный временной промежуток, в течение которого программа Dreamweaver пытается установить связь с удаленным сервером. Если все попытки окончились неудачей, то программа выводит сообщение о неудачном соединении.</li> 
<li>Firewall Host (Брандмауэр). Это поле служит для ввода адреса прокси-сервера, посредством которого осуществляется выход в сеть. Если доступ в сеть прямой, не использующий брандмауэров и прокси-серверов, то данное поле следует оставить пустым.</li> 
<li>Firewall Port (Порт брандмауэра). Номер порта брандмауэра, через который осуществляется связь с удаленным сервером.</li> 
<li>Put Options: Save Files Before Putting (Параметры пересылки: Сохранять файлы перед отсылкой). Перед началом передачи на удаленный компьютер ранее не сохраненные файлы сохраняются автоматически.</li> 
<li>Define Sites (Задать сайт). Эта кнопка открывает диалоговое окно, в котором можно выбрать имя Web-узла, для редактирования.</li> 
<h1>Просмотр в броузере</h1>
Программа Dreamweaver — это визуальный гипертекстовый редактор, Он отображает страницы HTML с минимальным количеством искажений. Тем не менее, определенные упрощения дизайна неизбежны, и получить аутентичное представление документа можно только после его загрузки в программу просмотра. 
 В разделе Preview in Browser (Просмотр в броузере) выполняется настройка броузеров, предназначенных для просмотра страниц, разрабатываемых в редакторе (рис. 15.13). Напомним, что вызов внешней программы просмотра и загрузка в нее текущей страницы выполняется командой File > Preview In Browser (Файл > Просмотр в броузере). 
 Несмотря на все усилия международных организаций по стандартизации, до сих пор не удалось полностью унифицировать толкование некоторых конструкций языка HTML. Поэтому представление одной страницы в разных броузерах может немного различаться. 
 С программой Dreamweaver можно ассоциировать несколько различных программ просмотра и задать приоритет их вызова. Редактирование списка броузеров выполняется при помощи стандартных средств управления. Кнопка со знаком + служит для добавления новой программы просмотра; кнопка со знаком — удаляет выбранную программу из списка. 
 Флажок Primary Browser (Первичный броузер) придает выбранной в списке программе статус первичного броузера. Флажок Secondary Browser (Вторичный броузер) назначает выбранную программу-просмотра вторичным броузером. 
 Кнопка Edit (Правка) включает диалоговое окно для изменения параметром программы просмотра. 
<img src="image/15-13.jpg" alt="Просмотр в броузере"> 
Puc. 15.13. Раздел Preview in Browser 
<h1>Режим макетирования</h1>
Раздел Layout View (Режим макетирования) объединяет настройки режима макетирования страницы (рис. 15.11). Этот режим впервые появился в четвертой версии программы. Он предоставляет пользователю инструменты для создания макета гипертекстовой страницы и управления специальными изображениями, которые выполняют функции распорок в макетных таблицах. 
<li>Autoinsert Spacers (Автоматическая вставка распорок). Управляет режимом вставки графических распорок при создании столбцов с автоматическим выбором ширины. Переключатель When Making Autostretch Tables (При создании таблиц с автоподбором размеров) включает режим вставки, переключатель Never (Никогда) выключает его.</li> 
<li>Spacer Image: For Site (Изображение-распорка: Для узла). Выбор Web-узла, для документов которого надо ввести в действие графическую распорку.</li> 
<li>Image File (Файл изображения). Выбор графического файла, в котором хранится изображение, выполняющее функции распорки.</li> 
<li>Cell Outline (Контур ячейки). Цвет границы макетной ячейки.</li> 
<img src="image/15-11.jpg" alt="Режим макетирования"> 
Puc. 15.11. Раздел Layout View 
<li>Cell Highlight (Выделение ячейки). Цвет, которым выделяются границы макетных ячеек при наведении на них указателя мыши.</li> 
<li>Table Outline (Контур таблицы). Цвет границы макетной таблицы.</li> 
<li>Table Background (Фон таблицы). Цвет фона макетной таблицы.</li> 
<h1>Шрифты и кодировка</h1>
В раздел Fonts/Encoding (Шрифты/кодировка) входят настройки шрифтового оформления новых документов и их кодировки (рис. 15.7). Пользователь имеет возможность выбрать по своему вкусу вид шрифтов, используемых по умолчанию для всех новых документов. Параметры этого раздела распространяются не только на представление страниц в окне документа, но и на вид исходного текста, загруженного в окно Инспектора кода. 
<img src="image/15-7.jpg" alt="Шрифты и кодировка"> 
Рис. 15.7. Раздел Fonts/Encoding 
Default Encoding (Стандартная кодировка). Кодировка новых документов. Для русскоязычных пользователей целесообразно выбрать в этом разделе кодировку, поддерживающую русский язык, — Cyrillic (Windows 1251). Выбор кодировки меняет содержимое метадескриптора в разделе заголовков документа. Так, после установки кодировки “кириллица” к документу добавляется строка вида: 
<meta http-equiv="Content-Type" content="text/html" charset="windows-1 251 "> 
<li>Font Settings (Параметры шрифта). Выбор типа кодировки для настройки параметров набора шрифтов.</li> 
<li>Proportional Font (Пропорциональный шрифт). Выбор пропорционального шрифта.</li> 
<li>Size (Размер). Размер соответствующего шрифта.</li> 
<li>Fixed Font (Моноширинный шрифт). Выбор моноширинного шрифта.</li> 
<li>Code Inspector (Инспектор кода). Выбор шрифта для представления исходного текста в окне Инспектора кода.</li> 
<h1>Скрытые элементы</h1>
Некоторые конструкции и объекты языка гипертекстовой разметки невидимы по своей природе, иногда их присутствие на странице может проявляться только в программе просмотра. Расположение подобных объектов программа Dreamweaver помечает специальными значками, отображением которых разрешается управлять. С помощью раздела Invisible Elements (Скрытые элементы) выполняется настройка отображения подобных значков (рис. 15.9). Перечислим их. 
<li>Named Anchors (Именованные якоря). Дескрипторы, на которые может указывать ссылка. Их еще называют именованными символами привязки — <а name=””>.</li> 
<li>Scripts (Сценарии). При установке этого флажка в теле документа помечается расположение программ, написанных на языке JavaScript или VBScript. При выборе значка можно прочитать сценарий в палитре свойств или получить ссылку на внешний файл, хранящий текст программы.</li> 
<li>Comments (Комментарии). Расположение комментариев HTML. Щелчок на значке позволяет прочитать текст комментария в палитре свойств.</li> 
<img src="image/15-9.jpg" alt="Скрытые элементы"> 
Puc. 15.9. Раздел Invisible Elements 
<li>Line Breaks (Переходы на новую строку). Положение дескрипторов принудительного разрыва строки . По умолчанию этот флажок сброшен.</li> 
<li>Client-Side Image Maps (Изображения-карты стороны клиента). Расположение карты ссылок, обрабатываемой на стороне клиента.</li> 
<li>Embedded Styles (Внедренные стили). Значок показывает положение стилевой спецификации, внедренной в тело документа. Для каскадных листов стилей, размещенных в разделе заголовков документа, подобный значок не отображается.</li> 
<li>Hidden Form Fields (Скрытые поля форм). Значок показывает расположение скрытых элементов форм, то есть элементов типа hidden.</li> 
<li>Form Delimiter (Граница формы). Управляет отображением пунктирной линии, которая показывает границу формы в окне документа. Если границы отображаются на экране, то разрабатывать содержимое формы и форматировать ее составляющие проще.</li> 
<li>Anchor Points for Layers (Точки привязки слоев). Значок помечает расположение в теле документа кода, описывающего слой. Следует помнить, что сам слой не привязан к своему описанию и может находиться в любом месте документа. Выбор значка означает выбор всего слоя.</li> 
<li>Anchor Points for Aligned Elements (Точки привязки объектов с выравниванием). Значок помечает расположение кода объектов, к которым применен атрибут выравнивания align. В число таких объектов входят: изображения, таблицы, объекты ActiveX, внешние вставки и апплеты.</li> 
<li>Server Markup Tags (Серверная разметка). Значок помечает положение кодов разметки, обрабатываемых на стороне сервера, например кодов ASP или CFML.</li> 
<h1>Слои</h1>
В раздел Layers (Слои) сведены базовые настройки слоев (рис. 15.10). Параметры, заданные в этой части диалогового окна, становятся значениями по умолчанию и действуют для всех вновь созданных слоев. 
<li>Tag (Дескриптор). Выбор способа кодирования слоев. В языке HTML и его диалектах есть несколько разных дескрипторов разметки слоев. Это дескрипторы <div>, , <layer> и <ilayer>. Дескрипторы <div> и рекомендованы к применению консорциумом W3C \\ поддерживаются броузерами Netscape Navigator и Internet Explorer, начи-</li> 
<img src="image/15-10.jpg" alt="Слои"> 
Puc. 15.10. Раздел Layers 
ная с четвертой версии. Дескриптор <ilayer> работает только с программами Netscape 4.x. В программе Dreamweaver по умолчанию установлен способ кодирования с использованием тега типа <div>. 
<li>Visibility (Видимость). Задает видимость слоев по умолчанию. Эта на стройка задается в списке, состоящем из четырех пунктов: Default (По умолчанию), Inherit (Наследуемая), Visible (Видимый), Hidden (Невидимый) Первый раздел оставляет вопрос о видимости слоя на усмотрение программы просмотра. Второй пункт предназначен для работы с вложенными слоями. Он означает, что атрибут видимости вложенного слоя заимствуется у родительского слоя.</li> 
<li>Width (Ширина). Устанавливает ширину слоев по умолчанию. Height (Высота). Устанавливает высоту слоев по умолчанию. Background Color (Фоновый цвет). Задает цвет фона для всех новых слоев.</li> 
<li>Background Image (Фоновый рисунок). Выбирает фоновое изображение для всех новых слоев. Чтобы выбрать нужное изображение, надо проделать стандартную процедуру навигации по файловой системе.</li> 
<li>Nesting (Вложение). Разрешает создавать системы слоев с иерархическим вложением. Это значит, что слой, нарисованный в пределах границ другого слоя, становится вложенным. Рисование при нажатой клавише ALT временно отменяет режим вложения.</li> 
<li>Netscape 4 Compatibility (Совместимость с Netscape 4). Широко известная ошибка броузера Netscape Navigator четвертой версии состоит в том, что при изменении размеров окна все слои теряют информацию о споем расположении и выравниваются по левому краю страницы. При установке этого флажка в раздел заголовков новых документов добавляется небольшой код, написанный на языке JavaScript., который исправляет ошибку позиционирования слоев. Кроме того, программа Dreamweaver располагает специальной командой вставки такого кода на избранные страницы. Это команда Commands > Add/Remove Netscape Resize Fix (Команды > Добавить/удалить коррекцию для Netscape).</li> 
<h1>Типы файлов и редакторы</h1>
Раздел File Types/Editors (Типы файлов и редакторы) содержит важные настройки, относящиеся к обработке файлов и вызову внешних приложений (рис. 15.6). 
<li>Open in Code View (Открывать в режиме разметки). Задает типы текстовых файлов, которые разрешается открывать в Инспекторе кода или загружать в окно документа в режиме отображения кодов.</li> 
<li>External Code Editor (Внешний редактор кода). В этой части диалогового окна можно выбрать внешний текстовый редактор и использовать его внутри программы Dreamweaver для работы с кодами. Программа разрешает запускать внешний редактор непосредственно из своей оболочки. Он учитывает изменения, которые внесены в исходный текст документа и преобразует их в соответствующие гипертекстовые команды планировки и форматирования. Чтобы установить внешний</li> 
<img src="image/15-6.jpg" alt="Типы файлов и редакторы"> 
Рис. 15.6. Раздел File Types/Editors 
текстовый редактор, надо щелкнуть по кнопке Browse (Обзор) и выполнить стандартную для системы Windows процедуру выбора файла. В комплект поставки пакета Dreamweaver входит программа HomeSite — один из самых мощных редакторов этого класса на платформе Windows Запуск внешнего редактора можно выполнить при помощи комбинации клавиш CTRL+E. 
<li>Reload Modified Files (Перезагружать измененные файлы). Задает реакцию программы Dreamweaver на изменения исходного текста документа, сделанные во внешнем редакторе. Настройка выполняется выбором в списке одного из трех пунктов: Prompt (Выдавать запрос на обновление документа), Always (Обновлять автоматически), Never (He обновлять). Если выбран последний пункт, то изменение кода во внешнем редакторе не приведет к модификации дизайна страницы. Учесть все сделанные изменения можно только после возвращения в редактор при помощи команды обновления страницы.</li> 
<li>Save on Launch (Сохранять при запуске). Внешний редактор, запущенный из оболочки Dreamweaver, берет на обработку последнюю сохраненную версию документа. Для управления этой функцией предлагается список из трех пунктов: Prompt (Выдавать запрос на сохранение документа), Always (Сохранять автоматически), Never (He сохранять). Если вы6рать первый пункт, программа Dreamweaver откроет диалоговое окно с запросом на сохранение последних изменений. Пункт Always (Сохранять автоматически) означает автоматическое сохранение всех изменений при запуске внешнего редактора. Выбор пункта Never (He сохранять) означает, что последние поправки, сделанные в программе Dreamweaver и не сохраненные в файле, просто отбрасываются.</li> 
<li>Самая большая группа настроек относится к редактированию файлов, не являющихся файлами HTML, во внешних приложениях. Слева в списке Extensions (Расширения) перечислены все зарегистрированные расширения имени файла. Справа в списке Editors (Редакторы) перечислены связанные с этими типами файлов приложения. Командные кнопки со знаками + и — служат для добавления и удаления новых расширений или программ. Одному типу файлов можно поставить в соответствие несколько разных программ. Кнопка Make Primary (Сделать основным) задает для выбранного приложения самый высокий приоритет. Это значит, что файлы данного типа редактируются в первую очередь при помощи этой программы. Чтобы запустить внешнее приложение и открыть в нем нужный файл, требуется дважды щелкнуть на имени файла в окне Диспетчера узла.</li> 
<h1>Выделение цветом</h1>
Раздел Highlighting (Выделение) — самый простой в количественном и качественном отношении в диалоговом окне Preferences (Настройки) (рис. 15.8). Он объединяет настройки цветового оформления различных областей и элементов гипертекстовых документов. 
<img src="image/15-8.jpg" alt="Выделение цветом"> 
Puc. 15.8. Раздел Highlighting 
<li>Editable regions (Редактируемые области). На шаблонах и в документах, созданных на их основе, редактируемые и блокированные области выделяются различным цветом. Данная настройка предназначена для изменения цветового оформления редактируемых областей.</li> 
<li>Locked regions (Блокированные области). Настройка служит для выбора цвета, помечающего блокированные области на шаблонах и в документах, созданных на их основе.</li> 
<li>Library items (Библиотечные элементы). Цветовое выделение библиотечных элементов.Third-party tags (Нестандартные дескрипторы). Выбор цвета, которым выделяются нестандартные дескрипторы и коды разметки сторонних производителей.</li> 
<h1>
Dreamweaver 4
</h1>
<h1>Абсолютные и относительные адреса</h1>
Полный адрес объекта в Интернете, который включает в себя название протокола, имя сервера и полное путевое имя файла, иногда называют абсолютным адресом. Этот способ адресации задает положение объекта с исчерпывающей полнотой, без привязки к какой-либо заранее выбранной точке сети. 
Абсолютные адреса обладают двумя заметными недостатками. Во-первых это громоздкость. Адреса объектов, расположенных на нижних этажах разветвленной файловой системы, могут состоять из нескольких десятков символов. Их трудно запоминать и вводить. Во-вторых, абсолютная адресация не обладает достаточной устойчивостью. Любое переименование приводит к необходимости внесения изменений во все связанные адреса. Если изменено имя сервера, то обновлять надо все ссылки на его объекты; для каталога должны быть изменены путевые имена, в которых упомянуто его имя 
<img src="prim.gif" alt="Абсолютные и относительные адреса">Программа Dreamweaver располагает специальным расширением, которое позволяет автоматизировать процедуру переименования ссылок. 
Детальные указания, которые обеспечивает абсолютная адресация, требуются не всегда. Во многих случаях удобнее работать с относительными адресами файлов. 
Если ссылки некоторого документа указывают на объекты, расположенные в соподчиненных, нижних разделах иерархии каталогов, то можно считать адрес документа относительным началом координат и отсчитывать адреса файлов от этой точки. 
Пусть, например, в документе index.htm требуется сослаться на рисунок picture.gif, который расположен том же каталоге home (рис. 2.5). Используя метод относительной адресации, достаточно указать только имя файла picture.gif. Так, для вставки картинки достаточно ввести в коды разметки документа дескриптор следующего вида <IMG SRC="picture.gif">. Приведем для сравнения абсолютный эквивалент адреса (название протокола и имя сервера опушены): examples/home/picture.gif. 
<img src="image/2-5.jpg" alt="Абсолютные и относительные адреса"> 
Рис. 2.5. Относительная адресация одного уровня 
Значительная экономия достигается за счет того, что название протокола, имя сервера и часть пути поиска файла могут быть опущены. По сути дела, полный адрес картинки реконструируется программой. Для этого в абсолютном адресе документа имя файла HTML заменяется именем файла, хранящего изображение. 
 
 Соглашение об отсчете относительных адресов от адреса документа действует не только для файлов, размещенных в одном каталоге с документом. В таком виде можно задать положение любого файла, независимо от его прописки в файловой системе. Для примера, показанного на рис, 2.6, относительный адрес картинки имеет вид images/picture.gif, а вставка рисунка задается дескриптором <IMG SRC="images/picture.gif">. 
<img src="image/2-6.jpg" alt="Абсолютные и относительные адреса"> 
Puc. 2.6. Относительная адресация в случае вложенных каталогов 
Для записи относительных адресов файлов, размещенных в одном поддереве с исходным документом, надо просто перечислить имена всех вложенных подкаталогов, разделяя их символами косой черты. Чтобы обратиться таким образом к файлам из других фрагментов файловой системы, следует использовать символическое обозначение родительского каталога. 
В языке HTML для этого применяется способ, заимствованный из операционной системы UNIX: родительский каталог обозначается двумя точками. Так, для примера, показанного на рис. 2.7, относительный адрес рисунка выглядит следующим образом ../picture.gif. Его вставка задается фрагментом кода <IMG SRC="../picture.gif">. 
<img src="image/2-7.jpg" alt="Абсолютные и относительные адреса"> 
Puc. 2.7. Относительная адресация с использованием символического имени 
Символы, подобные двум точкам, называются метасимволами, поскольку они способны представлять и заменять реальные имена каталогов. 
Каждый использованный метасимвол позволяет перейти на один уровень вверх. Например, чтобы обратиться к рисунку, расположенному в родительском каталоге каталога examples (рис. 2.8), следует задать относительный адрес следующего вида: ../../picture.gif. 
<img src="image/2-8.jpg" alt="Абсолютные и относительные адреса"> 
Рис. 2.8. Повторное использование символических имен 
Перед вставкой относительных адресов в документ, созданный в программе Dreamweaver, его следует сохранить. Если этого не сделать, программа выдает предупреждение и создает ссылку, в которой соединяет абсолютный адрес объекта с префиксом file://. Подобная ссылка может выглядеть следующим образом file:///C|examples/image/picture.gif. 
 
Документы с такими адресами, публикованные на удаленном сервере, работают неправильно! 
Между сайтами и серверами, на которых они работают, взаимно однозначное соответствие существует далеко не всегда. Один узел может быть расположен на нескольких серверах, а сервер может хранить и обслуживать несколько различных сайтов. В такой ситуации относительный адрес, отсчитываемый от положения текущего документа, может привести к путанице. Кроме того, если документы с относительной адресацией часто меняют прописку, то достоинства таких ссылок превращаются в недостатки. После переноса странички или документа в другой каталог все относительные адреса становятся фиктивными. Только ручная корректировка способна восстановить целостность ссылок и сделать документ работоспособным. 
 В программе Dreamweaver существует способ адресации, в котором в качестве точки отсчета принимается корневой каталог сайта. В документации на программу этот способ носит название root-relative или site root-relative. Адреса, образуемые по подобной схеме, начинаются с символа косой черты, за которой следует полный путь поиска файла. Так, для примера, представленного на рис. 2.8, адрес документа может быть задан следующим образом /host/examples/home/index.htm, а адрес рисунка — /host/picture.gif. 
Какие преимущества дает этот метод? Во-первых, достигается экономия за счет названия протокола и имени сервера. Во-вторых, и это важнее, с помощью этого метода удобно ссылаться на служебные файлы, которые хранятся в определенных местах сервера и используются несколькими сайтами. Облегчается и перенос сайта на другие серверы, и создание его зеркальных версий. 
Статус объектов, на которые заданы ссылки от корневого каталога, должен быть устойчивым. Любые изменения имени или положения влекут за собой необходимость обновления всех внешних ссылок на подобные объекты. 
<img src="prim.gif" alt="Абсолютные и относительные адреса">Программы просмотра не работают с относительными адресами, рассчитанными от корневого каталога. Если открыть в броузере страничку с такими ссылками напрямую, то произойдет ошибка. В пакете Dreamweaver существует специальная команда Preview in Browser (Просмотр в броузере), предназначенная для просмотра подобных страниц. Она временно переводит все нестандартные ссылки в обычную для программ просмотра форму. Эта операция относится только к текущей странице; она не затрагивает документы, связанные с ней командами перехода. Если перейти по ссылке на другую страницу, то ее нестандартные адреса не будут преобразованы. Все сказанное относится и к страницам с фреймами. 
 
 
<h1>Адресация для</h1>
WWW 
Для адресации ресурсов во всемирной паутине используются так называемые адреса URL ( Uniform Resource Locator). Адрес URL записывается по строгому формату (рис. 2.4). 
<img src="image/2-4.jpg" alt="Адресация для"> 
Рис. 2.4. Структура адреса URL 
Рассмотрим основные составляющие адреса. 
 
 <li>Протокол. Часть, которая описывает способ связи клиентов и серверов WWW. Обычно используется специальный протокол передачи гипертекста HTTP (HyperText Transfer Protocol). В адресе записывается строчными буквами (http://). Этот протокол принимается в среде WWW по умолчанию, поэтому его описание можно опустить.</li> 
 
 <li>Имя сервера. Здесь указывается имя вычислительной системы, которая хранит искомую информацию. Эту вычислительную систему принято называть сервером. Имя сервера может быть записано как имя домена, с префиксом www или без него, например www.macromedia.com. Другой способ — представление имени в виде так называемого IP-адреса, например 199.227.52.143.</li> 
 
 <li>Порт. Указание номера порта требуется для адресации процессом в пределах одного сервера. Часто используется порт по умолчанию, номер которого можно опустить.</li> 
 
 <li>Путь поиска. Цепочка каталогов и подкаталогов, ведущая к месту расположения файла. Элементы этой цепочки разделяются символами косой черты /.</li> 
 
 <li>Файл. Имя файла вместе с его расширением (на тех платформах, где расширение является обязательным). Если имя файла пропущено, то Web-броузер ищет файл, предоставляемый по умолчанию. Имя такого файла часто выглядит как index.htm или index.html. От расширения имени файла зависит реакция броузера и его последующие действия. Так, расширения графических файлов (.GIF или JPG) инициируют загрузку изображений в программу просмотра, а расширения, ассоциированные с архивами (.ZIP, .RAR и пр.), — сохранение файла на клиентском компьютере.</li> 
 
 <li>Фрагмент. Это факультативная часть адреса URL. Она начинается со специального символа # (решетка), за которым следует имя якоря, или, как его иногда называют, символа привязки. Это специальная метка, которая помечает фрагмент гипертекстового документа. Введение в состав имени символа привязки позволяет адресоваться не ко всей странице, а к определенной ее части.</li> 
 
 Связь по протоколу HTTP является не единственной, хотя и самой распространенной возможностью в сети Интернет. Адреса объектов Интернета могут включать в себя и другие способы связи и протоколы. Перечислим некоторые из них. 
Имя протокола Правило записи Область применения 
<table border=1>
<tr> <td>
FTP 
</td>
<td>
ftp:// 
</td>
<td>
Протокол передачи файлов. Используется для связи с FTR-серверами 
</td>
</tr>
<tr> <td>
File 
</td>
<td>
file:// 
</td>
<td>
Протокол доступа к файлам заданного компьютера или локальной сети. Мало полезен в глобальной сети 
</td>
</tr>
<tr> <td>
Gopher 
</td>
<td>
gopher:// 
</td>
<td>
Протокол доступа к серверам Gopher. В настоящее время почти вышел из употребления 
</td>
</tr>
<tr> <td>
JavaScript 
</td>
<td>
javascript: 
</td>
<td>
Вызов программ, написанных на языке JavaScript 
</td>
</tr>
<tr> <td>
Mallto 
</td>
<td>
mailto: 
</td>
<td>
Адрес электронной почты 
</td>
</tr>
<tr> <td>
Newt 
</td>
<td>
news: 
</td>
<td>
Протокол доступа к телеконференциям 
</td>
</tr>
<tr> <td>
Telnet 
</td>
<td>
telnet; 
</td>
<td>
Протокол доступа к удаленному компьютеру 
</td>
</tr>
</table>
Одной из причин, объясняющих сегодняшнюю популярность WWW, является потенциал протокола HTTP. Некоторые протоколы предыдущих поколений он поглощает целиком, а некоторые просто вытесняет, предоставляя лучшие возможности, поддержанные наглядным графическим интерфейсом. 
<h1>Диспетчер узла</h1>
Программа Dreamweaver имеет специальное средство для работы с локальными и удаленными узлами. Для платформы Windows это, по сути дела, самостоятельное приложение, интегрированное с редактором и связанное с ним общими командами и файлами. С помощью этого средства легко добавлять и удалять документы, менять структуру узла, обновлять ссылки, приводить в соответствие различные версии и выполнять множество других операций по поддержке и обновлению Web-узла. 
При помощи Диспетчера узла можно передавать файлы локального узла на удаленный сервер. При этом программа воспроизводит структуру каталогов оригинала, для чего может создавать новые каталоги, которые копируют название и расположение каталогов локальной версии. Эта программа располагает мощными средствами поддержки Web-узла. Например, операция синхронизации позволяет привести в соответствие текущие версии локального и удаленного сайтов. В процессе синхронизации Диспетчер узла, в общем случае, передает свежие версии файлов в обоих направлениях: с локального компьютера на сервер и в обратную сторону. 
 Диспетчер узла имеет два основных режима работы. Первый, в документации на программу и в системе меню он называется Site Map (Карта сайта), предназначен для обслуживания локальных сайтов; второй, в программе он носит имя Site Files (Файлы сайта), объединяет функции и команды обработки локальной и удаленной версий. 
 Для вызова Диспетчера узла следует выполнить команду Site > Site Map (Сайт > Карта сайта) или воспользоваться комбинацией клавиш ALT+F8. То же самое можно выполнить еще двумя способами: при помощи палитры и панели быстрого запуска. На кнопке вызова Диспетчера узла нарисована стилизованная система каталогов. Переключение режимов можно выполнить 
 многими разными способами, например: по команде Window > Site Files (Окно > Файлы сайта), при помощи клавиши F8 или щелчком на самой левой кнопке панели инструментов в окне диспетчера (рис. 2.12). 
<img src="image/2-12.jpg" alt="Диспетчер узла"> 
Puc. 2.12. Окно диспетчера узла 
Диспетчер узла по сложности и многообразию выполняемых функций представляет собой полноценное приложение. Рассмотреть все его ресурсы не представляется возможным, поэтому обсудим только основные возможности. 
 
 Строка меню Диспетчера узла содержит следующие пункты. 
 
 <li>File (Файл). Группа команд для работы с отдельными документами. Она полностью дублирует команды аналогичного меню в окне документа. Кроме того, здесь есть несколько команд, выполняющих различные операции над картой сайта. Еще две важные команды позволяют проверить целостность ссылок и создать примечания разработчика.</li> 
 
 <li>Edit (Правка). Здесь сосредоточены команды, предназначенные для работы с буфером обмена, команды выбора, поиска и замены, а также вызов диалогового окна настройки программы.</li> 
 
 <li>View (Вид). Группа команд, управляющих отображением карты сайта и обновлением локальной и удаленной версий.</li> 
 
 <li>Site (Сайт). Здесь находятся команды для работы с сайтами, средства создания и просмотра ссылок, команда синхронизации, команда установки соединения по протоколу FTP и некоторые другие ресурсы, относящиеся к локальным и удаленным узлам.</li> 
 
 <li>Window (Окно). Это меню содержит команды переключения режимов работы диспетчера, вывода протокола сеанса FTP, а также команды, управляющие открытыми окнами.</li> 
 
 <li>Help (Справка). Здесь находятся вспомогательные команды и средства: вызов интерактивной справки, запуск электронного учебника, регистрация программы и пр.</li> 
Самые востребованные команды программы представлены в виде кнопок, расположенных на панели инструментов Диспетчера узла (вторая строка окна). Рассмотрим эти команды в том порядке, в котором они размещены на панели инструментов. 
 
 <li>Site Files (Файлы сайта). Эта кнопка выбирает режим отображения файлов. В этом режиме на левой и правой панелях Диспетчера узла отображается содержимое локальной и удаленной версий узла. Если Диспетчер узла работает в автономном режиме без подключения к сети, левая панель остается пустой.</li> 
 
 <li>Site Map (Карта сайта). Эта кнопка активизирует режим отображения карты узла. В этом режиме на левой панели выводится карта локальной версии узла, а на правой — список файлов и каталогов. Если задержать указатель на этой кнопке, то откроется меню с командами Map Only (Только карта) и Map and Files (Карта и файлы). Первая команда разворачивает карту во все окно Диспетчера узла. В режиме отображения карты и файлов очень удобно редактировать или создавать узлы. Пользователь может удалять и добавлять связи, вводить в состав узла новые документы, переименовывать или перемещать документы, создавать новые каталоги. Все операции, затрагивающие структуру ссылок, отслеживаются Диспетчером узла, который обрабатывает внесенные изменения и автоматически обновляет гипертекстовые связи.</li> 
 
 
 <li>Site (Сайт). В этом списке перечислены имена всех локальных узлов. Для выбора одного из них достаточно выбрать в этом списке его имя. Пункт Define Sites (Задать сайты) дублирует одноименную команду строки меню.</li> 
 
 <li>Connects to Remote Host (Установить соединение с удаленным компьютером). Эта кнопка служит для установки связи по стандартному протоколу</li> 
 с удаленным сервером. Она доступна, если выбран один из следующих типов связи: FTP, WebDAV или SourceSafe. Во время сеанса связи эта кнопка представляет команду Disconnects (Разорвать соединение). Сеанс связи протоколируется и записывается в журнал. Для просмотра журнала надо выполнить команду Window > Site FTP Log (Окно > Журнал передачи). 
 
 <li>Refresh (Обновить). Кнопка обновляет содержимое выбранной папки удаленного или локального узла. Команда позволяет актуализировать все внесенные изменения в процессе распределенного проектирования узла несколькими разработчиками. Файлы и папки, добавленные другими исполнителями, отображаются на панелях Диспетчера узла. Если при задании параметров локального узла выбран режим автоматического обновления (Refresh Local Files Automatically), то команда Refresh (Обновить) корректирует только файлы удаленного сайта. Следует отметить, что в программе есть два специальных средства для обновления сайтов. Это команды View > Refresh Local (Вид > Обновить локальный сайт) и View > Refresh Remote (Вид > Обновить удаленный сайт).</li> 
 
 <li>Get (Получить). Кнопка запускает передачу выбранных файлов или папок с удаленного узла на локальный. Следует отметить, что программа предлагает несколько различных способов загрузки файлов. Во-первых, это стандартный для приложений Windows прием перетаскивания. Надо просто перетащить мышкой файлы с левой панели на правую. Во-вторых, то же самое можно сделать при помощи клавиатурной комбинации CTRL+SHIFT+D (передаваемые файлы следует предварительно выбрать). И наконец, это команда меню Site > Get (Сайт > Получить).</li> 
 
 <li>Put (Передать). Кнопка активизирует команду передачи выбранных файлов локального узла на удаленный сервер. Операция передачи файлов имеет несколько альтернативных способов выполнения. Это перетаскивание объектов (файлов или папок) с одной панели на другую, комбинация клавиш CTRL+SHIFT+U и команда Site > Put (Сайт > Передать).</li> 
 
 <li>Stop Current Task (Остановить задачу). Эта кнопка прерывает передачу файлов, инициированную командами Put (Передать) или Get (Получить), Она появляется только во время выполнения обмена файлами. Кнопка располагается в строке состояния Диспетчера узла и имеет форму красного восьмиугольника.</li> 
 
 <li>Collapse/Expand (Свернуть/Развернуть). Кнопка треугольной формы, расположенная в левой части строки состояния, управляет количеством панелей Диспетчера узла.</li> 
Если вид передаваемых документов зависит от дополнительных файлов, например изображений или апплетов Java, то программа выдает диалоговое окно Dependent Files (Зависимые файлы), в котором требуется подтвердить передачу связанных файлов. 
<h1>Карта узла</h1>
Карта узла - это удобное интерактивное средство разработки, которое многие технически сложные задачи создания локального узла представляет в наглядной и доступной графической форме. 
В режиме отображения карты сайта окно Диспетчера узла разделено на две области. В левой выводится карта текущего узла, где значки с изображением страничек обозначают файлы HTML, а стрелки показывают гипертекстовые связи между документами. В правой области приводится перечень файлов и каталогов узла в форме обычного списка. 
Изображение карты узла напоминает своим видом организационную диаграмму — наглядное представление состава и соподчиненности различных административных или военных структур. По умолчанию выводятся только два уровня карты. Верхнюю позицию занимает основная страница узла. Если какой-либо документ имеет в своем непосредственном подчинении другие документы, то рядом с его значком выводится прямоугольный маркер. Он помечается знаком +, если отходящая ветвь не раскрыта; в том случае, когда показаны все подчиненные документы, ставится знак —. 
Вот еще несколько соглашений, касающихся изображений карты узла. Ссылки на гипертекстовые документы узла отображаются зеленым цветом. Если ссылка указывает на существующий файл, расширение имени которого отличается от .HTM, .HTML и т. п., она отображается синим цветом. Если ссылка некорректная, тупиковая или разорванная, используется красный цвет. Соответствующие связи помечаются специальным значком, который выглядит как стилизованное изображение разорванной связи. Внешние файлы, файлы, расположенные на других сайтах, и специальные ссылки (например, mailto: или javascript:) получают специальный значок в виде глобуса. Если включен режим контроля обращения файлов (Check In/Out), то на карте узла галочкой красного цвета помечаются все файлы, взятые на обработку сторонними исполнителями. Зеленая галочка — это признак того, что данный файл заблокирован самим разработчиком. Значок в виде замка выделяет файлы, доступные только для чтения. 
 
Создание структуры узла 
 Сложные узлы, состоящие из десятков страниц и множества гипертекстовых связей, легче создавать в последовательности, которую в инженерной практике принято называть нисходящим проектированием. Это значит, что генерация глобальных проектных решений, относящихся к системе в целом, должна предшествовать решению частных задач. При нисходящем проектировании Web-узла его структура должна быть разработана раньше, чем информационное наполнение всех связанных страниц и документов. 
Преимущества подобной стратегии хорошо известны, об этом много написано в литературе, посвященной методологии инженерного творчества. Напомним лишь несколько очевидных тезисов. Генерация структуры узла позволяет оценить необходимое количество разработчиков и распараллелить работу. Существенно упрощается создание навигационной системы и создается основа для унификации дизайнерских решений. 
Программа Dreamweaver поддерживает нисходящую стратегию разработки сайтов. Чтобы начать создание структуры, достаточно иметь только один файл — обычно это файл основной страницы узла. 
Рассмотрим основные шаги процедуры создания структуры. 
 <li>Откройте Диспетчер узла и перейдите в режим отображения карты узла. Напомним, что для этого достаточно дать команду Site > Site Map (Сайт > Карта сайта) (эквивалентная клавиатурная комбинация — ALT+F8) в окне документа или команду Window > Site Map (Окно > Карта сайта) в окне Диспетчера узла.</li> 
 <li>Выберите значок основной страницы.</li> 
 <li>Дайте команду Site > Link to New File (Сайт > Ссылка на новый файл) (эквивалентная клавиатурная комбинация — CTRL+SHIFT+N). Откроется диалоговое окно Link to New File (Ссылка на новый файл) (рис. 2.13).</li> 
 <li>В поле File Name (Имя файла) введите имя файла вместе с одним из допустимых для гипертекстовых документов расширений, например: .НТМ, .HTML и др.</li> 
 <li>В поле Title (Заголовок) задайте заголовок страницы. Это произвольная строка текста, которая заносится в раздел заголовков гипертекстового документа между дескрипторами <title> и </title>.</li> 
 
 <li> В ноле Text of Link (Название ссылки) введите наименование ссылки. Вес ссылки такого рода располагаются в нижней части документа-родителя. По сути дела, они представляют собой напоминание о подчиненных документах и выделяются цветом и подчеркиванием. В процессе доработки узла черновые ссылки обычно заменяют ссылками, оформленными в стиле данного узла: текстовыми или графическими.</li> 
 <li>Щелкните на кнопке ОК или нажмите клавишу ENTER.</li> 
После завершения процедуры на карте сайта появляется значок нового документа, связанный стрелкой с родительской страницей. При добавлении страниц-потомков положение странницы-предка не имеет значения. Это значит, что она может занимать произвольный уровень иерархии в узле — описанная процедура не изменяется. 
<img src="image/razdel_1.gif" alt="Карта узла">Все документы нередко не помещаются в пространство, отводимое для карты узла. Какими средствами настройки отображения располагает программа? Во-первых, можно передвинуть линию, разделяющую карту и список файлов. Во-вторых, в левом нижнем углу окна Диспетчера узла есть кнопка для изменения масштаба карты. И наконец, команда View > Layout (Вид > Размещение) открывает доступ к максимальному числу настроек способа отображения структуры узла, среди которых важнейшими являются число столбцов и ширина отдельного столбца. 
Ссылки на существующие документы 
Создавать ссылки на существующие документы даже легче, чем на новые. Единственная проблема, с которой может столкнуться пользователь, — это обилие приемов и способов выполнения этой операции. Целесообразно выделить три ситуации, когда создается ссылка на документ или страницу. Они зависят от положения целевого файла и немного отличаются по технике исполнения. 
 <li>Документ, на который требуется сослаться, является зарегистрированным объектом узла. Это значит, что его имя представлено на карте узла и на панели, содержащей список файлов и папок. Для создания ссылки на такой файл следует выбрать родительский документ, зацепить мышкой маркер-указатель и перетащить его на целевой документ. Маркер-указатель — это специальное интерактивное средство для задания ссылок; он изображается в виде кружка справа от значка выбранного документа. Разрешается перетаскивать маркер на любую панель Диспетчера узла: на карту или в список файлов.</li> 
 
 <li>Целевой документ входит в состав сайта, но не зарегистрирован в нем, Это значит, что его имя присутствует в списке файлов на правой панели, но его нет на карте узла. В этом случае следует перетащить маркер-указатель на правую панель и бросить его на имя файла.</li> 
 <li>Целевой документ не принадлежит сайту. В этом случае следует использовать перетаскивание в обратном направлении. А именно, разыщите целевой файл, например, при помощи программы Проводник, затем перетащите его значок на карту узла — на изображение родительского документа.</li> 
При обилии раскрытых окон метод перетаскивания может потерять все свои преимущества и оказаться слишком громоздкой процедурой. В программе есть специальная команда, которую можно применить в любой ситуации. Для этого выберите родительский документ и дайте команду Site > Link to Existing File (Сайт > Ссылка на существующий файл) (эквивалентная клавиатурная комбинация — CTRL+SHIFT+K). Откроется диалоговое окно Select HTML File (Выбрать гипертекстовый файл), в котором, используя стандартные приемы навигации Windows, надо разыскать файл целевого документа. Эту команду можно дать и из контекстного меню, которое открывается при щелчке правой кнопкой мыши на значке документа. 
Все описанные приемы создания ссылок совместимы снизу вверх. То есть если способ можно применить для внешних файлов, то он применим и для файлов узла, зарегистрированных и еще не получивших такой статус. 
<img src="image/razdel_1.gif" alt="Карта узла">При создании ссылок методом перетаскивания есть еще одна возможность. Маркер-указатель можно перетащить на окно программы с открытым документом. В такой редакции этот прием применим не для всех файлов, содержащих гипертекстовые документы или страницы. 
По умолчанию маркеры-указатели появляются только у внутренних гипертекстовых файлов узла, расположенных на первых двух уровнях иерархии. Какие настройки программы следует изменить, чтобы метод перетаскивания стал доступен для глубоко вложенных файлов? Выберите гипертекстовый файл на карте узла и дайте команду View as Root (Показать как корневой). Эта команда доступна из контекстного меню, кроме того, ей соответствует клавиатурная комбинация CTRL+SHIFT+R. 
 
 Выбранный документ объявляется на время основной страницей сайта, все верхние уровни структуры узла становятся скрытыми. 
В третьей строчке окна Диспетчера узла в поле Site Navigation (Навигация по сайту) выводится путь доступа к корневому документу узла. Чтобы развернуть все скрытые ветви, надо просто щелкнуть мышкой по значку основной страницы, которая обычно именуется index.htm. Описанный прием работает только для внутренних HTML-файлов узла. 
Изменение ссылок 
Создание сложных сайтов с разветвленной системой ссылок между страницами — это итерационный процесс, подразумевающий возврат к готовым фрагментам и их переделку. 
Хотя изменить ссылку можно, удалив старую и создав новую, программа Dreamweaver располагает специальными средствами для модификации существующих связей. 
 <li>Выберите значок документа-источника на карте узла.</li> 
 <li>Дайте команду Site > Change Link (Сайт > Изменить ссылку) в окне Диспетчера узла. Клавиатурный эквивалент этой команды — CTRL+L; кроме того, она представлена в контекстном меню.</li> 
 <li>Откроется диалоговое окно Select HTML Files (Выбор гипертекстовых файлов), в котором следует указать имя и расположение нового файла ---адресата ссылки.</li> 
 <li>После окончания стандартной для системы Windows процедуры выбора файла программа Dreamweaver открывает диалоговое окно Update Files (Обновление файлов), показанное на рис. 2.13. Чтобы обновить все ссылки, щелкните на кнопке Update (Обновить). Для выборочного обновления выберите нужные файлы и подтвердите операцию щелчком на той же кнопке. Групповой выбор удобно выполнять, удерживая клавиши CTRL или SHIFT.</li> 
Если несколько различных документов ссылаются на один документ, который требуется изменить, то лучше воспользоваться специальной командой, которая вносит глобальные изменения во все связанные объекты. Она фактически выполняет замену имени файла во всех гипертекстовых ссылках. 
<img src="image/2-14.jpg" alt="Карта узла"> 
Puc. 2.13. Обновление ссылок 
 <li>Откройте окно Диспетчера узла.</li> 
 <li>Выберите документ, который требуется изменить.</li> 
 <li>Дайте команду Site > Change Link Sitewide (Сайт > Изменить связи по всему сайту). Откроется одноименное диалоговое окно (рис. 2.14).</li> 
 
<img src="image/2-15.jpg" alt="Карта узла"> 
Рис. 2.14. Глобальное изменение ссылок 
 
 
 <li>Имя выбранного файла отображается в поле Change All Links To (Изменить все ссылки на). Имя нового файла надо ввести в поле Into Links To (На ссылки на) или выбрать при помощи стандартной навигационной процедуры.</li> 
 <li>Щелкните на кнопке ОК или нажмите клавишуENTER.</li> 
 <li>Откроется диалоговое окно Update Files (Обновление файлов), в котором отображаются имена файлов, содержащих ссылки, которые требуют обновления. Выберите файлы и обновите нужные ссылки. Как сделать это, рассказывалось выше.</li> 
Замененный файл становится “висячим”. Это значит, что никаких ссылок, указывающих на него, не остается, но сам файл автоматически с сайта не удаляется. Сказанное относится и к локальной, и к удаленной версии узла. 
Команда Change Link Sitewide (Изменить связи по всему сайту) очень удобна и тех случаях, когда необходимо провести масштабные замены во всех документах сайта. Часто такой замены требуют адреса электронной почты, внешние ссылки, сценарии и пр. В таком случае следует действовать так. 
 <li>В поле Change All Links To (Изменить все ссылки на) введите полностью ссылку, требующую изменения.</li> 
 <li>В поле Into Links To (На ссылки на) введите полностью новую ссылку.</li> 
 <li>Щелкните на кнопке ОК.</li> 
Удаление ссылок 
Существует несколько способов удаления ссылок. Например, можно открыть документ, являющийся источником ссылки, и удалить ее вручную. Этот способ может оказаться неудобным, хотя и предоставляет максимальную точность и свободу. Перечислим приемы удаления ссылок, которыми располагает Диспетчер узла. 
 <li>Откройте окно Диспетчера узла.</li> 
 <li>На карте узла выберите значок документа, на который указывает ссылка.</li> 
 <li>Дайте команду Site > Remove Link (Сайт > Удалить ссылку). Команда имеет два клавиатурных эквивалента: комбинация клавиш CTRL+SHIFT+L и стандартная клавиша удаления DELETE.</li> 
Изменение заголовков 
Программа Dreamweaver позволяет менять заголовки документов HTML непосредственно в окне Диспетчера узла. Напомним, что заголовком гипертекстового документа называется содержимое дескриптора <title>. Эта строка текста считается названием документа и выполняет важные функции при индексации документов поисковыми машинами. Самые популярные броузеры Internet Explorer и Netscape Navigator выводят заголовок в строке заголовка окна программы. 
 
 Чтобы изменить заголовок, надо сделать следующее. 
 <li>Откройте Диспетчер узла (ALT+F8).</li> 
 <li>Дайте команду View > Show Page Titles (Вид > Показать заголовки страниц). Эту команду можно дать и при помощи клавиатурной комбинации CTRL+SHIFT+T. В результате на карте узла вместо названий гипертекстовых файлов будут выведены их заголовки.</li> 
 <li>Выберите документ и дайте команду File > Rename (Файл > Переименовать) или нажмите клавишу F2.</li> 
 <li>Введите новый заголовок и нажмите клавишу ENTER.</li> 
Работа со страницами 
После разработки и верификации структуры узла начинается этап создания контента. Этим “угловатым” американизмом принято в наше время называть информационное наполнение страниц. Какие полезные функции может выполнять Диспетчер узла на этом этапе? С его помощью можно открывать выбранные страницы и источники ссылок на гипертекстовые документы и внешние объекты. Кроме того, диспетчер располагает специальными командами для замены основной, корневой страницы узла. 
Чтобы открыть несколько страниц при помощи диспетчера, действуйте следующим образом. 
 <li>Выберите значки страниц.</li> 
 <li>Дайте команду File > Open Selection (Файл > Открыть выбранные файлы) или нажмите клавиатурную комбинацию CTRL+ALT+SHIFT+O.</li> 
В результате открывается новое окно программы (или несколько окон), в которое загружается выбранный документ. Открытие одного файла проще выполнить двойным щелчком на его значке. Чтобы выбрать несколько объектов, надо удерживать нажатой клавишу SHIFT (для выбора файлов, идущих подряд) или CTRL (для выбора файлов в произвольном порядке). 
 Очень удобное средство, облегчающее работы по отладке развитой системы гипертекстовых ссылок, — это команда Open Source of Link (Открыть источник ссылки). Она выводит на экран окно программы, загружает в него документ HTML, являющийся источником ссылки, и выбирает активную область ссылки: текст или изображение. 
 <li>I Откройте Диспетчер узла.</li> 
 <li>Выберите на карте узла значок документа, на который указывает ссылка.</li> 
 <li>Дайте команду Site > Open Source of Link (Сайт > Открыть источник ссылки). Эту команду можно вызвать и из контекстного меню.</li> 
 
 Диспетчер узла располагает специальными командами для изменения корневой страницы узла. Новым корнем можно объявить любую из существующих страниц или создать нужную страницу заново. 
К этой операции приходится прибегать не часто. Корневая страница — это не только витрина узла, она должна давать представление о его устройстве и облегчать навигацию в сложной системе связанных гипертекстовых документов. Если структура сайта или его дизайн претерпели значительные изменения, то это может повлечь за собой необходимость обновления основной страницы. 
Создание новой корневой страницы выполняется следующим образом. 
 <li>Дайте команду Site > New Home Page (Сайт > Новая главная страница). Команда доступна только из той панели Диспетчера узла, на которой отображается карта узла.</li> 
 <li>В диалоговом окне New Home Page (Новая основная страница) заполните поля File Name (Имя файла) и Title (Заголовок).</li> 
 <li>Щелкните на кнопке ОК. </li> 
Что происходит при выполнении этой команды? Во-первых, создается новая основная страница с выбранным пользователем названием и заголовком. Во-вторых, все информационное обеспечение узла сохраняется, но связи от нового корня к существующим документам придется создавать заново. 
Чтобы объявить существующий документ главным документом узла, действуйте следующим образом. 
 <li>Откройте Диспетчер узла.</li> 
 <li>Перейдите на правую панель и выберите гипертекстовый файл.</li> 
 <li>Дайте команду Site > Set as Home Page (Сайт > Сделать основной страницей). Команда доступна и из контекстного меню (щелкните правой кнопкой мыши на значке файла).</li> 
Выбранный документ становится главным и на левой панели диспетчера выводится ранее созданный фрагмент сайта, для которого документ является корнем. 
Эта команда предоставляет самый простой способ превратить часть существующего сайта в самостоятельный новый узел. 
Визуализация карты 
Изображение документов и связей в виде дерева удобно только для сайтов небольшого масштаба. По мере увеличения числа узлов и ссылок картинка теряет свою наглядность и становится все более громоздкой и запутанной. Какими средствами настройки карты располагает программа Dreamweaver? 
 
 Любой файл, отображаемый на карте узла, программа способна объявить скрытым. Есть и специальная команда, убирающая с экрана скрытые файлы и все связанные с ними объекты. Кроме того, программа позволяет им выводить только одну ветвь карты узла, корнем которой служит выбранный документ. 
Следует упомянуть и о команде масштабирования карты. Все эти средства позволяют выполнить тонкую настройку внешнего вида карты узла: показать ее информативные ветви и скрыть второстепенные в данной ситуации фрагменты. 
Порядок скрытия файла документа следующий. 
 <li>Откройте Диспетчер узла.</li> 
 <li>Перейдите на панель с изображением карты.</li> 
 <li>Выберите значок документа.</li> 
 <li>Дайте команду View > Show/Hide Link (Вид > Показать/Спрятать ссылку). Она также доступна из контекстного меню и имеет клавиатурный эквивалент CTRL+SHIFT+Y.</li> 
Имя документа, соответствующего скрытому файлу, изображается на карте узла курсивом. 
 Скрытым становится не только выбранный документ, но и все связанные с ним файлы. 
Отобразить на экране скрытые файлы можно следующим образом. 
 <li>Перейдите на панель с изображением карты узла.</li> 
 <li>Дайте команду View > Show Files Marked as Hidden (Вид > Показать скрытые файлы). Эта команда работает по принципу переключателя. Ее повторное выполнение влечет за собой показ всех скрытых объектов карты узла.</li> 
 Отдельная команда программы управляет визуализацией зависимых файлов. Таковыми считаются файлы, хранящие изображения, внешние таблицы стилей, объекты мультимедиа и др. По умолчанию они не отображаются на карте узла. Их можно вывести на экран командой View > Show Dependent File (Вид > Показать зависимые файлы). Повторное выполнение команды убирает все зависимые файлы с карты узла. 
Если усилия дизайнера направлены на отработку отдельного фрагмента сайта, целесообразно показать на карте только этот участок, скрыв остальные области. Так можно получить не только определенные преимущества за счет удобного представления обрабатываемой области, но и защитить законченные ветви узла от случайных изменений. 
 
 Для вывода на экран ограниченной области карты узла выполним следующее. 
 <li>Перейдите на панель с изображением карты и выберите документ, который будет новым временным корнем.</li> 
 <li>Дайте команду View > View as Root (Вид > Показать как корень). Другие способы обращения к этой команде — это клавиатурная комбинация CTRL+SHIFT+R и контекстное меню.</li> 
 Последствия операции легко предсказуемы. Программа выводит на экран только часть карты узла с выбранным документом в качестве временного корня. В верхней части карты на панели Site Navigation (Навигация по сайту) отображается путь от действительного корня к временному. Щелчок на любом значке в этом символическом изображении пути делает соответствующий документ новым корнем сайта и выводит на экран все его подчиненные объекты. 
<img src="image/razdel_1.gif" alt="Карта узла">Если программа Dreamweaver выводит на экран только значки файлов без имен или заголовков, следует увеличить ширину полосы, используемой для визуализации объектов. Для этого надо дать команду View > Layout (Вид > Размещение) и ввести в поле Column Widths (Ширина столбца) большее значение. По умолчанию ширина каждого столбца равна 125 пикселям. 
 Содержание данной главы — это, по сути дела, развернутый аргумент в пользу выполнения всех файловых операций средствами Диспетчера узла. Если, например, удалить, переименовать или переместить файл документа, используя посторонний редактор или файловый менеджер то целостность ссылок будет нарушена. В результате придется вручную выполнять трудоемкую работу по восстановлению утерянных гипертекстовых связей. Программа Dreamweaver освобождает дизайнера от подобной рутины — она автоматически отслеживает и обновляет ссылки на измененные страницы и документы. 
<h1>Категория</h1>
Local Info 
Здесь задается информация о локальном узле и его расположении в вычислительной системе. 
 <li>В поле Site Name (Имя сайта) ввести имя создаваемого сайта.</li> 
 <li>В поле Local Root Folder (Корневой каталог локального узла) введите или выберите, щелкнув на навигационной кнопке, имя корневого каталога локального узла. В нем будет храниться все информационное обеспечение проекта: файлы, шаблоны, библиотеки и пр. Выбранный корневой каталог — это естественная среда обитания проекта, выход за его пределы может повлечь за собой ошибки.</li> 
 <li>Установите флажок Refresh Local File List Automatically (Автоматически обновлять файлы локального узла). В этом случае программа автоматически учитывает все изменения, которые претерпевают файлы, входящие в область определения локального узла. Отключение флажка способно ускорить работу программы, в некоторых случаях существенно. Но н этом случае все заботы по актуализации файлового хозяйства ложатся на плечи пользователя. Принудительное обновление выполняется командой View > Refresh (Вид > Обновить), которая запускается в окне Диспетчера узла.</li> 
 <li>В ноле HTTP Address (Адрес HTTP) введите полный адрес удаленной версии Web-сайта Интернете. Это требуется для того, чтобы программа была в состоянии проверить ссылки локальной версии, записанные с использованием абсолютных адресов.</li> 
 <li>Флажок Cache (Кэш) управляет локальным кэшем. Для ускорения работы программы целесообразно включить его. Кроме того, некоторые палитры программы вообще не работают при отключенной локальной кэш-памяти.</li> 
 
 <li>FTP Host (Имя сервера). В этом поле следует набрать имя сервера или его IР-адрес. Например, это может быть строчка вида ftp.microsoft.com. Набор имени в виде ftp://ftp.microsoft.com или microsoft.com будет ошибкой. Точный адрес предоставляет поставщик сетевых услуг провайдер.</li> 
 <li>Host Directory (Каталог). В этом поле следует указать имя каталога, и котором располагаются все публикуемые документы. Эта информация также предоставляется провайдером. В некоторых случаях это поле следует оставить пустым.</li> 
 <li>Login (Логин). Входное имя — идентификатор, который используется для доступа к удаленной системе.</li> 
 <li>Password (Пароль). При вводе пароля следует обращать внимание на регистр букв.</li> 
 <li>Save (Сохранить). Программа Dreamweaver автоматически устанавливает этот флажок после ввода первых букв пароля. Целесообразно после ввода пароля сбросить этот флажок — отключить его сохранение.</li> 
 <li>Use Passive FTP (Использовать пассивный режим FTP). Эта опция используется для систем с сетевой защитой (брандмауэром). В этом случае порядок установки соединения по протоколу FTP изменяется. О необходимости использования данного режима надо проконсультироваться у системного администратора.</li> 
 <li>Use Firewall (Использовать сетевую защиту). Если вычислительная система использует брандмауэр, следует установить этот флажок.</li> 
 <li>Check In/Out (Контроль обращения). Этот флажок включает режим контроля использования файлов. Если разработка узла ведется несколькими исполнителями на различных рабочих местах или одним исполнителем, работающим на разных системах, этот режим позволяет избежать конфликтов доступа и версий. После установки флажка в диалоговом окне появляются дополнительные элементы управления.</li> 
 <li>Check Out Files When Opening (Блокировать открытые файлы). Если этот флажок установлен, то одновременный доступ к открытым файлам Web-узла становится невозможным.</li> 
 <li>Check Out Name (Контрольное имя). В этом поле вводится идентификатор, которым помечаются все файлы, затребованные разработчиком. Этот идентификатор выводится в окне Диспетчера узла напротив имени заблокированного файла.</li> 
 
 <li>Email Address (Адрес электронной почты). Адрес электронной почты разработчика. Если в это поле введен корректный адрес, то имя разработчика, которым помечаются блокированные файлы, становится ссылкой. Двойной щелчок по этой ссылке вызывает почтовую программу, используемую на данном компьютере по умолчанию. С ее помощью можно послать сообщение члену команды разработчиков, который работает с данным файлом.</li> 
<img src="image/2-10.jpg" alt="Категория"> 
Puc. 2.10. Настройка протокола FTP 
Клиент FTP, встроенный в программу Dreamweaver, отличается от обычных программ этого класса несколькими особенностями. Перечислим их, 
 <li>Он может некорректно работать с некоторыми прокси-серверами и многоуровневыми брандмауэрами, а также в других случаях, когда требуется непрямой доступ к серверу.</li> 
 <li>Программы, предоставляющие доступ к удаленному компьютеру по протоколу FTP, обычно позволяют выполнить навигацию по файловой системе удаленного компьютера, естественно, в пределах, санкционированных сетевым администратором. Встроенный клиент FTP открывает пользователю только доступ к корневому каталогу удаленной версии сайта. Он не может свободно перемещаться по системе вложенных каталогов сервера.</li> 
 <li>Время, которое отводится программе на установку соединения с сервером, ограничено. Длительность интервала ожидания по умолчанию устанавливается равной 60 секундам. Иногда, при медленной связи, этого промежутка оказывается недостаточно. Чтобы увеличить время ожидания, надо выполнить команду Edit > Preferences, выбрать категорию Site (Узел) и изменить значение поля FTP Time Out (Время ожидания FTP). Обычно это число лежит в диапазоне от 30 до 120 секунд.</li> 
Программа регистрирует в специальном журнале все операции по установке связи и передачи файлов по протоколу FTP. Если передача окончилась неудачей (программа в этом случае выводит сообщение “cannot put file”), то журнал может помочь диагностировать вероятную причину неуспеха операции. Чтобы посмотреть записи журнала, надо выполнить команду Window > Site FTP Log (Окно > Журнал передачи). Эта команда выдается из окна Диспетчера узла; для перехода в него из окна документа достаточно нажать клавишу F8. 
<h1>Комментарии разработчика</h1>
Комментарии разработчика (design notes) — это вспомогательный документ, который может быть ассоциирован с любой гипертекстной страницей. В процессе Web-проектирования эти документы выполняют функции, которые при традиционном проектировании возложены на сопроводительные записки и технические требования. Они способны хранить любую дополнительную информацию об объекте, правилах его эксплуатации, процедуре приемки и пр. В комментарии разработчика обычно помещают сведения о версиях гипертекстового документа, информацию о требуемых доработках, данные о разработчике, технические тонкости установки и настройки и многое другое. Файлы с присоединенными комментариями имеют специальную пометку в одном из столбцов Диспетчера узла. Это небольшой значок желтого цвета с изображением стилизованных строчек. Двойной щелчок на этом значке открывает специальное диалоговое окно, в котором можно прочитать или отредактировать комментарии. 
 Практически любой файл, участвующий в создании гипертекстовой страницы, можно при необходимости снабдить комментариями, например: изображения, Flash-объекты, апплеты и пр. Комментарии разработчика - это ресурс, управление которым выполняется на уровне всего узла. Чтобы сделать его доступным для всех документов, надо при создании узла включить флажок Maintain Design Notes (Поддерживать комментарии разработчика). Подробнее об этом говорится в разделе “Создание локального узла”. Если режим поддержки комментариев не включен при создании узла, это можно сделать в любой момент его разработки и эксплуатации. 
<li>Откройте окно Диспетчера узла (ALT+F8 или F8).</li> 
<li>Загрузите в него нужный сайт, например командой Site > Open Site (Сайт > Открыть сайт).</li> 
<li>Дайте команду Site > Define Sites (Сайт > Задать сайты).</li> 
<li>В одноименном диалоговом окне щелкните на кнопке Edit (Изменить).</li> 
<li>В диалоговом окне Site Definition (Определение сайта) откройте раздел Design Notes (Комментарии разработчика) и внесите в него все необходимые изменения.</li> 
<h1>Комментирование документа</h1>
Пусть документ загружен в окно редактора. Связать с ним комментарии разработчика можно следующим образом. 
Дайте команду File > Design Notes (Файл > Комментарии разработчика). Эта команда доступна и в окне Диспетчера узла. Еще один способ вызова этой команды - двойной щелчок на столбце Notes (Комментарии) в окне Диспетчера узла. Если требуется прокомментировать файл, расположенный на удаленном компьютере, то сначала надо выполнить одну из команд Check Out (Заблокировать) или Get (Получить) и дождаться его загрузки. 
Введите необходимую информацию в диалоговое окно Design Notes (Комментарии разработчика) (рис. 2.18). Рассмотрим элементы управления в этом окне. 
Вкладка Basic Info (Основные сведения). В этом разделе разработчик может создать текстовый комментарий любой длины и произвольного содержания. Раскрывающийся список Status (Статус) содержит перечень названий версий, упорядоченных по степени готовности. Крайние позиции занимают версии с названиями draft (черновик) и final (финальная). В поле Notes (Комментарии) можно ввести любой текстовый комментарий. Кнопка Date (Число) позволяет вставить в комментарий текущую дату. 
Вкладка All Info (Все сведения). Этот раздел позволяет разделять вводимую информацию по рубрикам. Вся введенная информация отображается в разделе Info (Сведения). Информация, введенная в последующих полях, представляется здесь в виде <имя>=<значение>, где часть <имя> вводится в поле Name (Имя), а часть <значение> — в поле Value (Значение). Чтобы добавить новую рубрику, щелкните на кнопке со знаком +; чтобы удалить рубрику — на кнопке со знаком -. 
Щелкните на кнопке ОК, чтобы завершить работу с диалоговым окном и сохранить комментарии. 
<img src="image/2-20.jpg" alt="Комментирование документа"> 
Рис. 2.18. Создание комментариев 
<img src="image/razdel_1.gif" alt="Комментирование документа">Комментарии разработчика хранятся в специальной папке с именем _notes. Она создается программой автоматически и располагается в том же каталоге, что и комментируемый файл. Файлы комментариев получают расширение .MNO. 
Комментариями можно снабдить не только отдельный документ, но и по чти любые самостоятельные объекты, составляющие его содержание. Для этого достаточно щелкнуть на объекте правой кнопкой мыши и выбрать из открывшегося контекстного меню команду Design Notes (Комментарии разработчика). Все последующие действия по заполнению полей диалогового окна совпадают с уже рассмотренными (пункты 1-3). 
 Комментарии можно передавать вместе с документом на удаленный сайт. Чтобы запретить подобный обмен, достаточно снять флажок Upload for Sharing (Передача для совместного использования) в категории Design Notes (Комментарии разработчика) диалогового окна Define Site (Определение сайта) 
<h1>Контроль обращения файлов</h1>
Коллективное творчество в технике — жанр далеко не бесспорный, и часто можно оценить как неизбежное зло. Не случайно в среде конструкторов популярен афоризм, утверждающий, что верблюд — это лошадь, созданная коллективом. Коллективная разработка, выигрывая по скорости и глубине отработки проектных решений, может потерять свои преимущества на этапе согласования частных решений и сведения их в общий проект. Задача создания программных средств, поддерживающих параллельную работу нескольких исполнителей, не решена полностью по сию пору. Программа Dreamweaver располагает двумя наиболее популярными средствами поддержки распределенного проектирования — это механизмы синхронизации и контроля обращения файлов. 
 После установки соединения FTP с удаленным сервером все перемещаемые файлы помечаются в окне Диспетчера узла специальным значком галочкой. Ее цвет позволяет различить файлы, которые находятся в работе у данного пользователя, и файлы, передаваемые другими членами коллектива разработчиков. Зеленая галочка присваивается документам пользователя, красная — чужим документам. Кроме того, имя пользователя, взявшего данный файл на обработку, выводится напротив его имени в колонке Checked Out By (Заблокирован). Эти простые по сути системные соглашении позволяют избежать взаимных блокировок и тупиковых ситуаций, возможных при одновременном обращении разных пользователей к одному файлу, Доступны для обработки только файлы, не отмеченные галочкой в окне Диспетчера узла. Снять пометку, то есть разблокировать файл может только его временный владелец при помощи специальной команды. После этого файл поступает в свободное обращение и может быть затребован для обработки любым членом команды разработчиков. 
 После того как в файл внесены все правки, он опубликован на сервере и разблокирован, его локальная версия получает атрибут Read only (Только чтение). Эта дополнительная степень защиты должна, по замыслу разработчиков программы, запретить соисполнителям доступ к данной версии документа. Страховка работает, если пользоваться для доступа по протоколу FTP только теми средствами, которые предоставляет Диспетчер узла. Однако существует множество программ, выполняющих функции клиентов FTP Для них блокировка записи не имеет силы, и пользователь может случайно или по злому умыслу перезаписать защищенный файл на локальном узле. 
 
 Программа предлагает еще уровень защиты, рассчитанный только на добропорядочного пользователя. Для каждого блокированного файла на компьютере-клиенте и сервере создается текстовый файл с тем же именем и расширением .LCK. В него записывается имя пользователя, заблокировавшего файл, а также дата и время блокировки. Такие файлы не отображаются в окне Диспетчера узла, но они доступны любому постороннему клиенту FTP. 
К сожалению, программа Dreamweaver не располагает средствами защиты файлов па удаленном сервере от записи. Это значит, что любой член команды разработчиков способен перезаписать файл на удаленном сервере при помощи любой программы, способной работать по протоколу FTP. 
Механизм контроля обращения и блокировок не будет работать, если он не активизирован. Все немногочисленные настроечные параметры контроля обращения рассмотрены в разделе “Создание локального узла”. Эти настройки доступны в течение всего цикла разработки сайта. Если возникла необходимость внести изменения в настройки контроля обращения, то придется проделать длинный путь по системе меню и диалоговых окон программы. 
По команде Site > Define Sites (Сайт > Задать сайты) выведите на экран одноименное диалоговое окно и выберите в нем нужный сайт. Далее, щелчком на кнопке Edit (Изменить) откройте диалоговое окно Site Definition (Определение сайта) и выберите в нем категорию Remote Info (Сведения об удаленном сервере). 
Блокирование одного или нескольких файлов выполняется следующим образом. 
 <li>Откройте окно Диспетчера узла.</li> 
 <li>Откройте нужный сайт.</li> 
 <li>Выберите все нужные файлы.</li> 
 <li>Дайте команду Site > Check Out (Сайт > Блокировать). Программа располагает и другими способами выдачи этой команды: одноименная кнопка на панели инструментов, комбинация клавиш CTRL+ALT+SHIFT+D, пункт контекстного меню. Кроме того, заблокировать отдельный файл можно непосредственно из окна документа при помощи точно такой же команды.</li> 
Чтобы разблокировать файлы, действуйте следующим образом. 
 <li>Откройте окно Диспетчера узла.</li> 
 
 <li>Откройте нужный сайт.</li> 
 <li> Выберите на правой панели диспетчера нужные файлы. Напомним, что заблокированные пользователем документы помечаются зеленой галочкой, файлы, затребованные на обработку сторонними исполнителями, имеют пометку в виде галочки красного цвета.</li> 
Дайте команду Site > Check In (Сайт > Разблокировать). Эту команду так 
 же можно дать при помощи кнопки панели инструментов, из контекстного меню или с помощью клавиатурной комбинации CTRL+AIT+SHIFT+U. 
<img src="image/razdel_1.gif" alt="Контроль обращения файлов">Операции по установке и снятию блокировки выполняются только тогда, когда установлена связь по протоколу FTP с удаленным сервером и возможна передача файлов в обоих направлениях. После запуска любой из команд Check Out (Заблокировать) или Check In (Разблокировать) программа выводит диалоговое окно, в котором просит подтвердить пересылку связанных с документом файлов. Щелчок на кнопке ОК разрешает эту операцию, Cancel — запрещает. 
Если требуется отменить блокировку документа без переноса изменений на сервер, надо сделать следующее. 
 <li>Выберите файл в окне Диспетчера узла.</li> 
 <li>Дайте команду Site > Undo Check Out (Сайт > Отменить блокировку). Ее можно также выдать из контекстного меню или из окна документа. Команда снимает с файла значки защиты и присваивает его локальной версии статус Только чтение.</li> 
 Команды блокировки и ее снятия разрешается выполнять и из окна документа. В этом случае они относятся только к тому документу, который открыт в данный момент. После выполнения команды блокировки текущая версия заменяется удаленной. Последствия, которые влечет за собой снятие блокировки, могут быть различными. Они зависят от параметра Savе Files Before Putting (Сохранять файлы перед отсылкой), который входит в число настроек протокола FTP. Если соответствующий флажок установлен, то снятие блокировки автоматически сохраняет текущую версию документа на диске локального компьютера. 
<img src="image/razdel_1.gif" alt="Контроль обращения файлов">Все операции контроля обращения применяются к удаленным версиям файлов, то есть к объектам, к которым возможен коллективный доступ. Блокировать файлы, расположенные на локальном компьютере, не имеет смысла, поскольку доступ к этим объектам — это монополия данной вычислительной системы. 
<h1>Настройка диспетчера</h1>
Основные параметры работы Диспетчера узла расположены в разделах Site Map Layout (Планировка карты узла), и File View Columns (Столбцы отображения файлов) диалогового окна Site Definition (Определение сайта). Самый быстрый способ открыть это окно — это команды View > Layout (Вид > Размещение) и View > File View Columns (Столбцы отображения файлов). 
 Настройки категории Site Map Layout (Планировка карты узла), от которых за висит внешний вид карты, подробно рассматривались в главе, посвященной созданию локального узла. Напомним наиболее важные параметры. 
 <li>Number of Columns (Число колонок). По умолчанию карта сайта отображается горизонтально. Значение данного поля ограничивает число страниц, отображаемых в одном ряду. Если ввести в качестве значения этого параметра единицу, то карта сайта будет расположена по вертикали.</li> 
 <li>Column Width (Ширина столбца). Числовое поле задает ширину одного столбца в пикселях.</li> 
 <li>Icon Labels (Подписи значков). Здесь выбирается содержание подписи под значком файла. Переключатель File Names (Имена файлов) выбирает имена файлов, Page Titles (Заголовки страниц) — заголовки страниц.</li> 
 <li>Options (Параметры). Настройка режимов отображения. Флажок Display Files Marked as Hidden (Отображать скрытые файлы) включает режим показа скрытых файлов HTML', флажок Display Dependent Files (Отображать зависимые файлы) управляет отображением таких файлов, связанных со страницами, как изображения, внешние сценарии и другие тины файлов, не основанные на гипертекстовой разметке.</li> 
 От настроек раздела File View Columns (Столбцы отображения файлов) (рис. 2.15) зависит внешний вид файловой панели Диспетчера узла. Рассмотрим эти настройки. 
 <li>Центральное место в диалоговом окне занимает панель, на которой перечислены все атрибуты файлов, отображаемые на панели Диспетчера узла. Порядок строк по вертикали соответствует расположению столбцов файловой панели по горизонтали. Предопределенные атрибуты имеют тип Built in (Встроенные), новые, введенные пользователем, помечаются как Personal (Собственные). Видимые столбцы получают метку Show (Показать), скрытые — Hide (Скрыть).</li> 
 
 <li> Кнопки со стрелками служат для изменения порядка столбцов, представленных на файловой панели. Для этого достаточно выбрать строку с названием атрибута и, щелкая на этих кнопках, изменить ее положение.</li> 
 <li>Column Name (Имя столбца). Новое название столбца для выбранного атрибута.</li> 
 <li>Associate with Design Note (Связать с комментариями разработчика).</li> 
 <li>Align (Выравнивание). Выбор типа выравнивания текста в данном столбце.</li> 
 <li>Show (Показать). Управляет отображением данного столбца.</li> 
 <li>Share with All Users of This Site (Совместное использование столбца). Разрешает или запрещает коллективный доступ нескольких разработчиков к данному файловому атрибуту.</li> 
 <li>Для удаления атрибута выберите его и щелкните на кнопке с изображением знака -.</li> 
 <li>Чтобы добавить на файловую панель новый столбец, щелкните на кнопке со знаком +, а потом задайте нужные параметры в нижней части диалогового окна.</li> 
<img src="image/2-16.jpg" alt="Настройка диспетчера"> 
Рис.2.15.Настройка файловой панели диспетчера 
<h1>Настройка параметров соединения</h1>
FTP 
Некоторые настройки соединения FTP и внешний вид окна Диспетчера узла входят в число основных параметров программы и задаются в диалоговом окне Preferences (Настройки). Доступ к этим настройкам выполняется следующим образом. 
 <li>Дайте команду Edit > Preferences (Правка > Настройки).</li> 
 <li>На левой панели диалогового окна Preferences (Настройки) выберите категорию Site (Сайт). Окно примет вид, показанный на рис. 2.16.</li> 
<img src="image/2-17.jpg" alt="Настройка параметров соединения"> 
Рис. 2.16. Параметры соединения FTP 
Рассмотрим содержание этого раздела. 
 
 <li>Always Show (Всегда показывать). Два раскрывающихся списка позволяют задать расположение панелей удаленной и локальной версий сайта в окне Диспетчера узла.</li> 
 
 <li>Dependent Files (Зависимые файлы). Здесь можно включить или выключить режим выдачи запроса на пересылку связанных файлов, таких как изображения, внешние таблицы стилей и пр. По умолчанию оба флажка: Prompt on Get/Check Out (Запрашивать при приеме) и Prompt on Put/Check In (Запрашивать при передаче) — установлены.</li> 
<img src="image/razdel_1.gif" alt="Настройка параметров соединения">Если эти флажки сброшены, то программа не выдает окно с запросом на пересылку зависимых файлов. Чтобы открыть его, надо дать одну из команд, инициирующих файловые обмены между локальным и удаленным компьютером, удерживая нажатой клавишу ALT. Напомним эти команды: Put (Передать), Get (Получить), Check In (Заблокировать), Check Out (Разблокировать). 
 
 
 <li>FTP Connection (Соединение). Если установить флажок Disconnect After (Разрывать после) и задать числовое значение в поле Minutes Idle (Минут простоя), то соединение с сервером разрывается, если в течение указанного времени какая-либо активность отсутствует.</li> 
 
 <li>FTP Time Out (Тайм-аут). Это поле определяет интервал времени, отводимый программе на установку соединения с сервером. Если уложиться в указанный срок не удалось, то программа выводит специальное сообщение.</li> 
 
 <li>Firewall Host (Брандмауэр). В этом поле указывается адрес прокси-сер-вера, который выполняет подключение к удаленному серверу при наличии брандмауэра. Если подобная защита не используется, то поле следует оставить пустым.</li> 
 
 
 <li>Firewall Port (Порт брандмауэра). Поле предназначено для задания порта, который используется при подключении к серверу FTP. По умолчанию это порт под номером 21.</li> 
 
 <li>Put Options: Save Files Before Putting (Параметры пересылки: Сохранять файлы перед отсылкой). Если установлена данная опция, то все несохраненные файлы записываются на диск перед их передачей.</li> 
 
 <li>Define Sites (Задать сайт). Эта кнопка выполняет те же функции, что и одноименная команда: открывает диалоговое окно, в котором можно редактировать параметры существующего соединения.</li> 
 Важная настройка, от которой зависит режим передачи файла, не вошла в описанное диалоговое окно. Ее можно изменить при помощи прямого редактирования конфигурационного файла с именем FTPExtensionMap.txt. Он расположен в папке Dreamweaver\Configuration. В этом файле указываются режимы передачи данных разного формата (Binary или ASCII). Если формата передаваемого файла в списке не оказалось, то он автоматически передается в двоичном формате. 
Режимы передачи 
<img src="image/razdel_1.gif" alt="Настройка параметров соединения">В протоколе передачи данных FTP (File Transfer Protocol —протокол передачи данных) предусмотрены два режима пересылки данных: двоичный (binary) и символьный (ASCII). В двоичном режиме последовательность битов при пересылке сохраняется, поэтому оригинал и копия идентичны с точностью до бита. На первый взгляд, это хорошо, потому что обеспечивает наивысшую сохранность данных. Однако полученную битовую последовательность требуется еще и правильно расшифровать и проинтерпретировать. Например, если из вычислительной системы, работающей под управлением Mac OS, переслать программный файл в двоичном режиме на платформу BeOS, то, скорее всего, программа на этой платформе работать не будет. 
 В режиме передачи ASCII, или, как его иногда называют, в текстовом режиме, пересылаемые объекты рассматриваются как наборы символов. Программа-клиент и программа-сервер пытаются сделать так, чтобы пересылаемые ими символы имели на принимающем компьютере тот же смысл, что и на компьютере-отправителе. 
 
 Коды символов первой половины кодовой таблицы — это один из немногих действующих в информатике стандартов. Он сохраняется на подавляющем числе существующих в настоящее время компьютерных платформ. Если файл, который состоит из набора литер (это может быть обычный текст, исходный текст программы, закодированное при помощи символов изображение, содержимое электронного письма и пр.), переслать с компьютера Macintosh в текстовом режиме, то и на платформе BeOS он будет успешно прочитан. 
 При выборе режима передачи следует учитывать тип передаваемой информации и совместимость платформ клиента и сервера. Кодирование данных — это область, где действует слишком много разных стандартом и нет унификации, поэтому часто бывает трудно установить соответствие между способом кодирования и типом информации. Так, например, исполняемые коды программ всегда кодируются в двоичном виде, а программы, написанные на языке сценариев, могут иметь и текстовое представление. Файлы, хранящие документы HTML, передаются в режиме ASCII; некоторые вычислительные системы представляют в двоичном виде даже простые символьные цепочки, не включающие в себя управляющие символы и команды форматирования. 
 При передаче в режиме ASCII способ кодирования конца строк, установленный в основных настройках программы, игнорируется. Программа Dreamweaver выбирает такой способ обозначения, который принят на платформе компьютера-клиента. Так, если документ разрабатывается под управлением операционной системы Windows, то концы строк помечаются символами перехода на новую строку и возврата каретки. 
<h1>Пересылка документов</h1>
Пересылка документов с локального компьютера на удаленный сервер и в обратном направлении выполняется средствами диспетчера узла. 
<img src="image/razdel_1.gif" alt="Пересылка документов">Если проектирование узла ведется коллективом разработчиков, то для пересылки файлов следует использовать команды Check In (Разблокировать) и Check Out (Заблокировать). Если авторский коллектив представлен одним лицом, то файловые обмены между удаленным сервером и локальным компьютером можно доверить командам Put (Передать) и Get (Получить). 
Получение 
Копирование файла с удаленного компьютера на локальный выполняется следующим образом. 
 <li>Откройте окно Диспетчера узла.</li> 
 <li>Откройте нужный сайт.</li> 
 <li>.3. Установите соединение с удаленным сервером. Если используется связь по протоколу FTP, то для этого достаточно щелкнуть на кнопке Connect (Установить соединение), расположенной на панели инструментов.</li> 
 <li>Выберите имя файла на одной из панелей окна Диспетчера узла. Если выбрать файл на панели сервера, то на локальный компьютер передается его копия. Выбор файла на другой панели приводит к тому, что на диск локального компьютера записывается версия выбранного файла, расположенная на сервере.</li> 
 <li>Дайте команду Get (Получить). Для этого можно щелкнуть на кнопке панели инструментов или воспользоваться контекстным меню.</li> 
 Если у данного сайта активизирована система контроля обращения файлов, то команда Get (Получить) перешлет на локальный компьютер выбранный файл, который получит атрибут Только чтение. Удаленная версия остается доступной для редактирования любым членом коллектива разработчиков. Если контроль обращения отключен, то переданный файл открыт для внесения любых изменений. 
Передача 
Диспетчер узла располагает двумя командами для загрузки файла на удаленный сервер. Это команды Put (Передать) и Check In (Заблокировать). Первую команду используют в тех случаях, когда система контроля обращения файлов не активизирована. Если узел находится в коллективной разработке и данная система включена, эта команда дает возможность продолжить работу над данным файлом и после его передачи. Команда Check In (Заблокировать) закрывает локальную версию файла для записи после его загрузки на сервер. 
 
Рассмотрим техническую сторону операции. 
 <li>Откройте окно Диспетчера узла (ALT+F8).</li> 
 <li>Откройте узел командой Site > Open Site (Сайт > Открыть сайт) или про сто выберите имя узла в списке, расположенном в левой части панели инструментов.</li> 
 <li>Выберите разделы локального узла, предназначенные для пересылки на сервер.</li> 
 <li>Дайте команду Site > Put (Сайт > Передать). Имеется еще несколько способов запуска процесса пересылки файлов: кнопка панели инструментов Put (Передать) и клавиатурная комбинация CTRL+SHIFT+U.</li> 
Иногда проще скопировать отдельный документ прямо из окна редактирования. Для этого надо воспользоваться такой же командой Site > Put (Сайт > Передать). 
<img src="image/razdel_1.gif" alt="Пересылка документов">Рассмотрим ситуацию, когда на сервер пересылается совершенно новый файл, не имеющий версий на удаленном компьютере, и для данного сайта активизирована система контроля обращения. После копирования программа выставит блокировку этого файла, чтобы дать автору возможность продолжить его редактирование. 
<h1>Проектирование</h1>
Как создать привлекательный посещаемый сайт, пользующийся успехом у сетевой общественности? На этот вопрос ответить так же трудно, как предложить рецепт написания бестселлера или придумать методику создания шлягера. Оставим вопросы алгоритмизации творческих процессов психологам и создателям искусственного интеллекта. Приведем лишь несколько простых ч рекомендаций технического характера, позволяющих избежать 
грубых ошибок в процессе планирования структуры Web-узла и его наполнения. 
 Недостатка в рецептах, посвященных созданию содержательных узлов и страничек, нет. Многие книги по Web-дизайну и руководства, посвященные программным продуктам, изобилуют рекомендациями такого сорта: “Информационное наполнение документа должно быть полным и непротиворечивым”, — или: “Чтобы сделать данные доступными, их следует хорошо систематизировать”. Все это верно по сути, но прикладное значение подобных тезисов сравнимо с применимостью основных законов диалектики. 
 Точка зрения на Web-дизайн гуру и законоучителей Интернета широко представлена в компьютерной литературе и в самой сети. Если посмотреть на процесс создания виртуальных документов глазами инженера, то можно провести многочисленные параллели между сайтами и техническими системами, дизайном и инженерным проектированием. Разработка масштабного Web-узла — это во многом инженерная задача, по крайней мере в той части, которая связана с выбором структуры, распределением информации по страницам, созданием и поддержкой базы данных, обеспечением сохранности данных, криптографической защитой приватных сведений и пр. 
Методология инженерного творчества — это достаточно глубоко разработанная дисциплина с устоявшимся терминологическим аппаратом и обширной библиографией. Многие ее наработки, приемы и методики можно использовать при создании сложных узлов и виртуальных документов. 
Вместо того чтобы повторять трюизмы о гармонии формы и содержания, сошлемся на глубокую по содержанию и доступную по форме книгу, посвященную общей методологии проектирования — Дж. К. Джонс “Методы проектирования”, Москва, “Мир”, 1986. 
<h1>Просмотр в броузерах</h1>
Программа Dreamweaver относится к классу визуальных редакторов HTML Такие программы принято обозначать очень громоздкой, но получившей признание аббревиатурой WYSIWYG, что можно приблизительно перевести как “что видишь, то и получишь”. Вместо трудоемких и требующих знания языковых конструкций операций кодирования пользователь визуального редактора выполняет операции над текстовыми или графическими объектами и их форматирование. Он оперирует в отчасти знакомой рабочей среде, которая многими элементами управления и приемами работы напоминает широко распространенные офисные программы и текстовые редакторы. 
 При визуализации страниц HTML программа Dreamweaver использует очень мало упрощающих соглашений. Он показывает гипертекстовые документы в виде, который очень близок к натуральному изображению. Тем не менее, увидеть страницу без искажений и упрощений можно только в специальных программах просмотра. 
<li>Для просмотра страницы в броузере надо дать команду File > Preview in Browser (Файл > Просмотр в броузере).</li> 
<li>Выберите броузер в открывшемся меню.</li> 
Эта команда присутствует и в окне документа, и в окне Диспетчера узла. Ей соответствуют две клавиатурные комбинации. Для вызова основного броузера служит клавиша F12, для вызова вспомогательного — CTRL+F12. 
Настройка параметров программ просмотра и выбора основного и вспомогательного броузеров выполняется следующим образом. 
<li>Дайте команду File > Preview in Browser > Edit Browsers List (Файл > Просмотр в броузере > Изменить список броузеров) или команду Edit > Preferences (Правка > Настройки). В любом случае на экране появится диалоговое окно Preferences (Настройки).</li> 
<li>Выполните все необходимые настройки в этом диалоговом окне и введите их в действие щелчком на кнопке ОК.</li> 
Рассмотрим эти настройки (рис. 2.21): 
<img src="image/2-23.jpg" alt="Просмотр в броузерах"> 
Puc. 2.23. Выбор программ просмотра 
<li>кнопка со знаком + позволяет добавить новый броузер в список зарегистрированных программ просмотра; </li> 
<li>кнопка со знаком - удаляет выбранный броузер из списка; </li> 
<li>кнопка Edit (Изменить) позволяет изменить параметры зарегистрированного броузера; </li> 
<li>флажок Primary Browser (Первичный броузер) делает выбранную в списке программу просмотра первичным броузером (напомним, что он вызывается по нажатию клавиши F12); </li> 
<li>флажок Secondary Browser (Вторичный броузер) выбирает вторичный броузер, который вызывается при помощи комбинации клавиш CTRL+F12; </li> 
<li>флажок Preview Using Local Server (Просмотр нелокальном сервере) задает или снимает режим просмотра страниц с помощью локального сервера. Все необходимое серверное программное обеспечение должно быть заранее установлено на локальный компьютер.</li> 
<h1>Проверка ссылок</h1>
Контроль целостности гипертекстовых связей — это, видимо, самая ответственная и трудоемкая часть процедуры тестирования Web-узла. Потерянная ссылка, ссылка, ведущая в никуда, разорванная связь — такой сорт ошибок встречается в гипертекстовых документах с такой же удручающей регулярностью, как грамматические ошибки в обычных текстах. Сообщение error 404, которое выдает сервер, не нашедший файла по указанному адресу, стало знаковым, вошло в сетевой обиход как часть виртуального фольклора. 
Файлы, на которые не указывает ни одна ссылка, принято называть “висячими”, или “потерянными”. Они занимают дисковое пространство локального компьютера и сервера, требуют времени на обновление и пересылку, но не вплетены в живую ткань гипертекстового документа и поэтому не могут выполнять информационные функции, возложенные на них разработчиком. Каковы бы ни были причины возникновения потерянных файлов: забывчивость автора или ошибки проектирования — это одна из форм нарушения целостности гипертекстовых связей. 
Программа Dreamweaver располагает специальной командой, которая позволяет проверить корректность внутренних ссылок и обнаружить изолированные файлы. Областью применения команды может быть Web-узел, отдельная страница, выделенная папка, содержащая фрагмент узла. После ревизии заданной области команда выдает отчет о разорванных ссылках, ссылках на внешние файлы и потерянных файлах. 
Рассмотрим все варианты этой команды в последовательности увеличения масштабов применения. Проверка связей одного гипертекстового документа выполняется следующим образом. 
<li>Сохраните документ в той части диска, которая подчинена корневому каталогу сайта </li> 
<li>В окне документа дайте команду File > Check Links (Файл > Проверить связи) или просто нажмите клавиши SHIFT+F8. </li> 
Контроль связей в пределах отдельного фрагмента узла осуществляется так. 
<li>Откройте окно Диспетчера узла. </li> 
<li>Откройте сайт при помощи списка на панели инструментов или с помощью команды Site > Open Site (Сайт > Открыть сайт). </li> 
 
<li> Выберите на правой панели Диспетчера узла файлы или папку.</li> 
<li>Дайте команду File > Check Links (Файл > Проверить ссылки). Та же команда может быть выбрана в контекстном меню: Check Links > Selected Files/ Folders (Проверка ссылок > Выбранные файлы и папки) — или с помощью комбинации клавиш SHIFT+F8.</li> 
Чтобы проверить связи всего узла, дайте в окне Диспетчера узла команду Site > Check Links Sitewide (Сайт > Проверить связи сайта) или нажмите клавиши CTRL+F8. Можно воспользоваться и контекстным меню, где эта команда доступна как Check Links > Entire Site (Проверка ссылок > Весь сайт). 
 После окончания проверки программа Dreamweaver выводит на экран диалоговое окно Link Checker (Проверка ссылок) (рис. 2.19), содержащее сводку результатов проверки. Рассмотрим содержание этого окна. 
<li>Список Show (Показать) содержит три пункта: Broken Links (Разорванные связи), External Links (Внешние связи), Orphaned Files (Потерянные файлы). От выбора пункта в этом списке зависит остальное содержание диалогового окна.</li> 
<li>Если выбрать раздел, отвечающий за разорванные связи (рис. 2.19), то в средней части окна показываются файлы узла вместе с разорванными связями. Исправить ошибку можно непосредственно в окне Link Checker (Проверка ссылок) (щелчок по имени ссылки делает ее доступной для редактирования) или в окне документа. Двойной щелчок на значке файла запускает программу Dreamweaver, загружает в нее документ и выбирает источник дефектной ссылки: текст или рисунок. Информация, которую программа сообщает о потерянных файлах, ограничивается только их названиями. Двойной щелчок на значке</li> 
<img src="image/2-21.jpg" alt="Проверка ссылок"> 
Рис. 2.19. Отчет о проверке целостности связей 
файла запускает приложение, связанное в операционной системе Windows с файлами данного типа, и загружает файл в эту программу.Кнопка Save (Сохранить) сохраняет сводку результатов проверки к текстовом файле. 
<img src="image/razdel_1.gif" alt="Проверка ссылок">Команду проверки целостности связей разрешается применять как к локальной версии узла, так и к версии, расположенной на удаленном сервере. 
<h1>Работа с удаленным узлом</h1>
Программа Dreamweaver располагает удобным инструментарием для создания и обслуживания удаленных Web-узлов. Только средствами программы, без помощи специальных клиентов FTP можно установить соединение по протоколу FTP и скопировать содержимое локального сайта на сервер. Если успешно выполнены все работы по верификации проекта и локальная версия представляет собой отлаженный продукт, то на сервере будет создана полностью работоспособная версия с гарантированной целостностью ссылок. 
Жизненный цикл большинства сложных проектов не заканчивается после публикации на сервере. Это действие только начинает протяженный этап но вживлению проекта в виртуальную ткань всемирной Сети. Регистрация на поисковых машинах и в каталогах, реклама, обмен рекламными знаками, регулярные обновления контента — без этих мероприятий нельзя рассчитывать на коммерческий успех проекта. 
Программа Dreamweaver предоставляет все необходимые средства для внесения изменений и синхронизации локальной и удаленной версий Web-узла. 
Программа поддерживает режим коллективной работы над проектом, когда несколько исполнителей способны открывать и редактировать разные вспомогательные файлы и гипертекстовые документы. 
Основные параметры, требуемые для задания удаленного узла, устанавливаются при создании локальной версии. Они были рассмотрены в разделе, посвященном определению нового локального узла. Большая их часть расположена в разделе Remote Info (Сведения об удаленном сервере). В любой момент работы над проектом настройки удаленного узла можно уточнить или изменить. 
 <li>Дайте команду Site > Define Sites (Сайт > Определить сайты). Это можно сделать из окна документа или окна Диспетчера узла.</li> 
 <li>В диалоговом окне Define Sites (Определить сайты) выберите имя сайта.</li> 
 <li>Щелкните на кнопке Edit (Изменить).</li> 
 <li>В диалоговом окне Site Definition (Определение сайта) выберите раздел Web Server Info (Сведения о Web-сервере) и внесите необходимые изменения.</li> 
<h1>Распределение материала</h1>
Распределение материала по разделам Web-узла должно быть логичным. Каждая страница обязана содержать однородный по смыслу материал, oбладать свойством относительной тематической независимости и давать по возможности полное описание предмета или темы. Эти простые принципы трудно оспорить; на них, в частности, основываются все хорошие школьные учебники. 
 Их чистое воплощение на страницах HTML-документов сталкивается с рядом существенных ограничений. Во-первых, это ограничения, вытекающие из ограниченной пропускной способности существующих каналов связи. Простые расчеты показывают, что даже при самом качественном соединении по коммутируемой телефонной линии размеры страницы не должны превышать 100 Кбайт. В противном случае риск потери потенциальных посетителей катастрофически увеличивается. 
А что если разделить большой документ на несколько разделов и распределить по отдельным страничкам? Это разумное предложение нельзя рассматривать как панацею — рецепт с неограниченной применимостью. Во-первых, членение гипертекстового документа приводит к усложнению связей, а каждый щелчок мышкой по навигационной кнопке — это акт принятия решения, который требует от посетителя сайта определенных затрат. Кроме того, документы, насыщенные графикой, мультимедийными роликами или анимацией, не всегда допускают разумную декомпозицию. 
Есть определенная корреляция между степенью членения документов и частотой их обновления. Чем динамичнее содержимое узла, чем чаще обновляются информационные источники, тем более мелким становится его деление на разделы и подразделы. 
<h1>Раздел</h1>
Design Notes 
Web-узел — это часто весьма сложная система гипертекстовых документов и вспомогательных файлов. В их разработке могут участвовать коллективы, объединяющие специалистов разного профиля: дизайнеров, программистов, менеджеров и др. Продуктивная работа коллектива подразумевает наличие координации. Программа Dream weaver предоставляет для этого простое, но часто довольно эффективное средство — комментарии разработчика. Это текстовая информация, которая может быть присоединена к гипертекстовому документу или связана с внедренными в него объектами. В комментарии можно внести любую текстовую информацию, относящуюся к странице, например: данные об авторе, замечания об требуемых доработках, сведения об обновлении, пожелания соисполнителям и пр. 
 Категория Design Notes (Комментарии разработчика) содержит два флажка. 
 <li>Maintain Design Notes (Поддерживать комментарии разработчика). Если этот флажок установлен, включается поддержка комментариев для всех страниц узла.</li> 
 <li>Upload Design Notes for Sharing (Загружать комментарии вместе с источником). Если этот флажок установлен, то комментарии передаются по сети вместе с источником. Кроме того, они выводятся в одном из столбцов окна Диспетчера узла.</li> 
 Удаление гипертекстовых страниц средствами программы Dreamweaver влечет за собой автоматическое удаление всех ассоциированных комментариев. Если файл HTML ликвидирован внешними средствами, то заметки разработчика сохраняются. Щелчок на кнопке Clean Up (Очистка) запускает поиск и удаление всех потерянных комментариев. 
 
<img src="image/2-11.jpg" alt="Раздел"> 
Puc. 2.11. Настройка отображения карты узла 
<img src="image/razdel_1.gif" alt="Раздел"> Средствами программы Dreamweaver можно не только создавать новые Web-узлы, но и открывать и редактировать существующие сайты. Причем для программы происхождение узла значения не имеет — узел может быть разработан при помощи программы Dreamweaver или с помощью сторонних гипертекстовых редакторов, например: Front Page, GoLive, Hot Metal и пр. Открытие подобных сайтов почти не отличается от процедуры создания нового узла, основные этапы которой рассмотрены в данной главе. Будем считать, что на диске локального компьютера существует версия сайта. Главные операции, которые требуется выполнить при его открытии в программе Dreamweaver, — это задание корневой папки узла и ввод имени основной страницы. Первое делается в категории Local info (Информация о локальном узле) диалогового окна Site Definition (Определение сайта). Для выполнения второй задачи надо перейти в категорию Site Map Layout (Планировка карты узла) того же диалогового окна. 
 
 
<h1>Синхронизация</h1>
Как правило, работа над сложным узлом не заканчивается его публикацией на сервере; любой перспективный Интернет-проект требует поддержки и сопровождения. Если в работе над проектом занято несколько исполнителей (программистов, дизайнеров и администраторов), которые обновляют содержимое удаленного узла асинхронно и с разных компьютером, то даже сайты с продуманной концепцией и отшлифованной структурой очень скоро рискуют превратиться в информационную свалку, заполненную копиями, версиями, дубликатами и вариантами. 
Программа Dreamweaver располагает специальными средствами для приведения в соответствие содержимого удаленной и локальной версий сайта. Синхронизация файлов выполняется следующим образом. 
 <li>Откройте окно Диспетчера узла и в нем — обновляемый сайт.</li> 
 <li>Если требуется обновить только некоторые объекты, выберите нужные файлы или папки локального узла.</li> 
 <li>Дайте команду Site > Synchronize (Сайт >Синхронизировать) — на экране появится диалоговое окно Synchronize Files (Синхронизация файлов). Средствами этого окна следует задать способ и объект обновления.</li> 
 <li>Выберите область обновления в списке Synchronize (Синхронизировать). Это может быть весь проект (Entire... Site) или только выбранные файлы (Selected Local Files Only).</li> 
 <li>Уточните направление передачи файлов в раскрывающемся списке Direction (Направление). Здесь имеется три варианта: Put newer files to remote (Отправить свежие версии файлов на сервер), Get newer files from remote (Получить свежие версии файлов с сервера) и Get and Put newer files (Обменяться свежими версиями файлов).</li> 
 <li>Можно также установить флажок Delete remote files not on local drive (Удалить файлы, которых нет в локальной версии проекта). Каковы последствия установки этого флажка? Если выбрано направление передачи от локального узла к удаленному (Put newer files to remote), то программа уда лит с сервера все документы, у которых нет аналогов в локальной версии. Если выбрано обратное направление передачи — от удаленного узла к локальному, то программа уничтожит все документы локального проекта, которые не имеют эквивалента на удаленном сервере.</li> 
 
 Операция удаления, которая выполняется при синхронизации, не может быть отменена, поэтому при установке флажка Delete remote files not on local drive (Удалить файлы, которых нет в локальной версии проекта) следует соблюдать особую осторожность. 
 <li>Щелкните на кнопке ОК. Программа Dreamweaver выполнит сравнение локального и удаленного узлов, а сводку обнаруженных разночтений выведет в диалоговом окне Site (Сайт). Если программа не найдет разночтений, будет выдано сообщение, что необходимости в синхронизации нет.</li> 
 <li>Диалоговое окно Site (Сайт) предоставляет пользователю возможность вмешаться в процедуру синхронизации и исключить из нее определенные файлы. Для этого надо сбросить флажок в столбце Action (Действие) напротив имени файла. В столбце Status (Состояние) при этом появится метка skip (Пропустить).</li> 
 <li>Начните процедуру синхронизации, щелкнув на кнопке ОК диалогового окна Site (Сайт).</li> 
 <li>После завершения синхронизации программа выведет отчет о результатах синхронизации в столбце Status (Состояние). Для сохранения этой информации надо щелкнуть на кнопке Save Log (Сохранить в журнале) Если этого не требуется, то диалоговое окно закрывают щелчком на кнопке Close (Закрыть).</li> 
<h1>Создание локального узла</h1>
Программа Dreamweaver поддерживает различные стратегии разработки сайтов и страниц. Видимо, самая естественная и популярная технология создания состоит из следующих этапов: 
 <li>разработка локальной версии сайта;</li> 
 <li>публикация локальной версии в сети Интернет.</li> 
Локальный узел — это версия “настоящего” виртуального Web-узла, которая располагается на компьютере разработчика или разработчиков. Она не видна из сети; доступ к ней имеют только ее авторы. 
Данные локального узла размещаются на диске внутри определенного каталога. Таковым, в принципе, может быть любой каталог файловой системы компьютера, но существуют веские основания не совмещать корневые каталоги диска и сайта. 
Для определения нового локального узла требуются следующие действия. 
 <li>Выполните команду Site > New Site (Сайт > Создать). На экране появится диалоговое окно Site Definition (Определение сайта), показанное на рис. 2.9.</li> 
 <li>В левой части окна выберите категорию Local info (Информация о локальном узле). Задайте значения полей и флажков в правой части диалогового окна.</li> 
 <li>Выберите категорию Remote Info (Сведения об удаленном сервере) и введите сведения о сервере, хранящем удаленную версию сайта.</li> 
 <li>Перечисленные категории диалогового окна должны быть заполнены обязательно. Настройка остальных трех категорий диалогового окна не является обязательной, но весьма желательна. Это категории Site Map Layout (Планировка карты узла), Design Notes (Комментарии разработчика) и File View Columns (Колонки отображения файловых атрибутов).</li> 
 <li>После ввода всей необходимой информации щелкните на кнопке ОК или нажмите клавишу ENTER.</li> 
<img src="image/2-9.jpg" alt="Создание локального узла"> 
Рис.2.9.Настройка локального узла 
Рассмотрим перечисленные категории подробнее. 
<h1>Создание отчета</h1>
Тестирование и отладка большого сайта — это сложная процедура, которая в некоторых случаях по своей трудоемкости сопоставима с этапом разработки. Для этих работ пакет Dreamweaver не может предложить такой же разнообразный и мощный инструментарий, как для создания гипертекстовых страниц. Справедливости ради следует сказать, что теоретическая сторона проблем тарификации исследована не так глубоко, как для задач проектирования. Разработчики программных средств в разных областях информатики не выходят за пределы обязательного набора, состоящего из средств генерации отчетов и развитых команд поиска. Подобными командами располагает и система Dreamweaver. 
Программа способна создавать отчеты, содержащие подробную информацию о самых разнообразных сторонах и аспектах Web-узла и составляющих его гипертекстовых документах. Специальная команда сканирует область определения узла и/или документа и собирает сведения об избыточных дескрипторах, потерянных связях, пропущенных заголовках, вложенных тегах и пр. 
Для правильной организации коллективной работы разработчики должны располагать информацией о блокировках файлов и иметь доступ к комментариям других авторов. Для этого можно воспользоваться командой создания отчетов, которая может собрать такие сведения для всех документов сайта или некоторой его части. 
Получить отчет по блокировкам и комментариям можно следующим образом. 
 <li>Откройте нужный узел в окне Диспетчера узла.</li> 
 <li>Дайте команду Site > Reports (Сайт > Отчеты). На экране появится диалоговое окно, показанное на рис. 2.17.</li> 
 <li>Выберите область, которую требуется включить в отчет. Для этого надо раскрыть список Report On (Отчет по) и выбрать в нем один из пунктов. Программа предлагает следующий выбор:</li> 
 <li>Current Document (Текущий документ);</li> 
 <li>Entire Local Site (Весь локальный узел);</li> 
 <li>Selected Files in Site (Выбранные файлы узла);</li> 
 <li>Folder (Папка).</li> 
 <li>В поле Select Report (Выбрать отчет) выберите категорию отчета. После выбора раздела, требующего дополнительной настройки, активизируется кнопка Report Setting (Параметры отчета). Перечислим все типы отчетов:</li> 
 <li>Checked Out By (Заблокирован);</li> 
 <li>Design Notes (Комментарии разработчика);</li> 
 <li>Combinable Nested Font Tags (Вложенные дескрипторы);</li> 
 <li>Missing Alt Text (Пропуск альтернативного текста);</li> 
 <li>Redundant Nested Tags (Избыточные вложенные дескрипторы);</li> 
 <li>Removable Empty Tags (Лишние пустые дескрипторы);</li> 
 <li>Untitled Document (Документы без заголовков).</li> 
 <li> Щелкните на кнопке Report Setting (Параметры отчета) и в диалоговом окне, которое выведет программа, настройте параметры отчета.</li> 
 <li>Запустите генерацию отчета щелчком на кнопке Run (Выполнить).</li> 
<img src="image/2-19.jpg" alt="Создание отчета"> 
Puc. 2.17. Создание отчета 
 
<h1>Создание</h1>
Web-узла 
Все многообразие информационных источников всемирной паутины WWW ( World Wide Web) принято делить на два больших подкласса: страницы и узлы, или сайты. 
Web-страницами называют простые, преимущественно текстовые документы без сложной системы ссылок и мультимедийного оснащения. Подобные документы обычно не рассчитаны на массовую аудиторию и не содержат важной информации, пользующейся повышенным спросом. 
Web-узлы, или, как их иногда называют, сайты, представляют собой систему связанных между собой страниц, сходных по теме, оформлению, назначению и близкому (по меркам Интернета) расположению. Тематика, сложность и размеры сайтов могут значительно различаться. Под это определение попадают как узлы небольших фирм, рекламирующих продукцию или услуги родительской организации, так и виртуальные гиперсистемы, состоящие из тысяч разнородных документов и мультимедийных файлов, связанных многочисленными перекрестными ссылками. 
 Пакет Dreamweaver— это многоцелевая программа. Его можно использовать как простой редактор гипертекстовых документов для создания отдельных страниц. Кроме того, программа располагает необходимым инструментарием, позволяющим проектировать и поддерживать Web-узлы любой сложности. 
 
 
<h1>Структура каталогов</h1>
Существуют разные стратегии разработки больших Интернет-проектов, но самый естественный путь включает два этапа. Первый заключается в со здании Web-узла, расположенного на жестком диске. Это так называемая локальная версия сайта (local site). После окончания ее разработки и верификации локальная версия публикуется в сети Интернет и становится доступной для посетителей. По терминологии, принятой в пакете Dreamweaver, вариант узла, опубликованный на сервере провайдера, называется удаленной версией (remote site). 
Следует отметить, что в программе Dreamweaver термин “сайт” используется не только как синоним слова Web-узел, но и для обозначения местонахождения файлов, принадлежащих к одной структуре. 
Программа Dreamweaver поддерживает такой способ организации информационного обеспечения, который требует размещать все наполнение сайта внутри одного каталога, называемого корневым каталогом узла (root folder) Если разработчик выполняет это логичное и совсем необременительное ограничение, то программа способна автоматически синхронизировать 
файловые системы разных версий одного сайта. Только в этом случае пакет может отслеживать изменения, внесенные в структуру узла, и обновлять. гипертекстовые ссылки и команды. Это соглашение нельзя считать, надуманным или жестким стандартом, поскольку в ведении разработчика остался большая часть атрибутов файловой системы сайта: схема подкаталогом, их связи и названия, распределение информационных файлов и пр. 
Как должна строиться система каталогов Web-узла? Громадная практика “сайтостроения” не смогла выработать четких указаний на этот счет. Принято считать, что структура подкаталогов должна приблизительно соответствовать разбиению сайта на разделы — его смысловой планировке, Например, если на узле, посвященном медицинским услугам, существуют разделы, относящиеся к диагностике, терапии и хирургии, то корневой каталог обязан включать три подкаталога с их информационным обеспечением. 
 Это логичное предложение нарушают файлы, которые используются несколькими разделами сайта. В самом деле, где хранить общие кнопки, меню, сценарии или логотипы? Древовидная структура файловых систем не даст возможности подчинить один подкаталог нескольким каталогам верхнего уровня (объявить его потомком нескольких предков). Одним из способов работы с разделяемыми элементами является использование технологии SSI (Server Side Include). 
 
Технология SSI 
<img src="../../../../../../13.59.170.24/c_7c/book/prim.gif" alt="Структура каталогов"> Если дословно перевести этот термин с английского, то получится примерно следующее: “включение стороны сервера”. Этот угловатый подстрочник неплохо передает существо дела. Технология SSI позволяет Web-серверу включать в текст страниц HTML содержимое из других источников, текстовое или гипертекстовое. Окончательная сборка документа выполняется сервером непосредственно перед отправлением страницы HTML броузеру пользователя. Все монтажные операции абсолютно закрыты от конечного потребителя; он может даже не подозревать, что обозреваемая им страница содержит вставки или заимствования. 
 Какова же польза от технологии SSI? Ответ очевиден. Разделяемые данные широкого применения готовятся один раз и по специальным директивам включаются во все страницы, которые их используют. Кандидаты на оформление в виде вставок — это колонтитулы, повторяющиеся элементы оформления, стандартные таблицы, играющие роль монтажных элементов страниц, метадескрипторы, списки разделов, управляющие кнопки и многое другое. 
 Серверные вставки представляют собой страницы HTML. Чтобы отличить их от других гипертекстовых документов, им присваивают расширение .SHTML Документы-потребители должны содержать специальную директиву на включение документов SSI. Она может выглядеть следующим образом: 
<!–#include virtual="share.shtml"–> 
<img src="../../../../../../13.59.170.24/c_7c/book/prim.gif" alt="Структура каталогов">После получения запроса на просмотр страницы сервер заменит инструкцию <#include> содержимым файла SHARE.SHTML. Следует подчеркнуть, что такие конструкции способны выполнять только серверы; для броузеров директивы включения представляют собой обычные комментарии и поэтому не обрабатываются. 
 Некоторые провайдеры запрещают использование технологии SSI из опасения, что та относительная свобода, которую она предоставляет пользователю, может быть использована в неблаговидных целях. 
<h1>Структура узла</h1>
Концепция гипертекста, впервые предложенная в начале шестидесятых годов, оказалась очень плодотворной и нашла широкое применение в сети Интернет, локальных сетях и при создании мультимедийных документов. 
Гипертекстом называется набор документов, связанных системой перекрестных ссылок — гиперсвязей, которые разрешают пользователю быстро перемещаться из одной части документа в другую или выполнять инструкции некоторого управляющего языка. Структура даже самого сложного печатного текста с развитой архитектоникой разделов и рубрик представляет собой цепочку. Гиперсвязи позволяют снабдить документы более развитой, нелинейной структурой, что влечет за собой значительные изменения законов композиции таких информационных источников и способов общения с ними. 
Управляющие цепочки, информационные связи, семантические отношения, существующие между отдельными страницами и источниками данных, складываются в некоторую целостность, самостоятельное образование, которую принято называть структурой. Можно выделить три основных типа узловых структур: линейные, иерархические и многосвязные. 
Линейная структура 
Этот способ организации источников информации абсолютно доминировал в докомпьютерную эпоху. Преимущественно линейную структуру имеют все объемные печатные издания: художественные книги, учебники, справочники, технические руководства и др. В наши дни такой способ построения применяется при создании мультимедийных учебников и электронных руководств. В линейную цепочку выстраиваются шаги оформления заказа в электронном магазине, сложные процедуры регистрации или оформления доступа к некоторым сетевым ресурсам. 
<img src="image/2-1.jpg" alt="Структура узла"> 
Рис. 2.1. Линейная структура 
Точкой входа узла с линейной структурой служит первая страница. Эта главная страница обычно называется index.htm или main.htm. Она играет роль, которая в печатных изданиях отводится обложке, титульному листу, аннотации и заглавию. Это парадная, представительская страница, которая должна быть одновременно привлекательной и информативной. Однако поисковые машины могут индексировать каждую страницу сайта независимо от других. Поэтому целесообразно снабдить все внутренние страницы узла навигационными кнопками, указывающими на главную страницу. 
 
Иерархическая структура 
 Цепочечный принцип организации сайтов накладывает жесткие ограничения на положение страниц и допустимые переходы между ними. Намного большей гибкостью обладают узлы, построенные по принципу иерархической соподчиненности. Достоинства и недостатки иерархических структур хорошо изучены, поскольку многие организации, учреждения, производства построены по этой схеме. 
Иерархические, или, как их иногда называют, древовидные структуры, имеют одну главную, корневую страницу, которая является точкой входа для всего сайта. Любая внутренняя страница может использоваться в качестве информационного источника и служить входом, заглавной страницей для логически связанной и относительно обособленной совокупности страниц нижнего яруса. 
<img src="image/2-2.jpg" alt="Структура узла"> 
Рис. 2.2. Иерархическая структура 
Обновление иерархических структур не связано с глобальной перестройкой всей топологии узла. Все изменения ограничиваются некоторым фрагментом — поддеревом; связи и вершины, выходящие за его пределы, не затрагиваются. Часто иерархическая древовидная структура узла является естественной формой представления информации, поскольку многие информационные источники или предметные области организованы по принципу соподчиненности. Представители точных наук называют подобное соотношение оригинала и его представления гомоморфизмом. 
Многосвязная структура 
Многосвязными принято называть такие структуры, на топологию которых не накладывается никаких ограничений. У Web-узлов с подобной топологией каждая страница может быть связана с каждой. На первый взгляд, такие структуры удобны для пользователя, поскольку позволяют быстро перейти по любому локальному адресу, минуя промежуточные пункты узла. Это предположение оправдывается только для сайтов небольшого размера продуманной системой навигационных подсказок. С увеличением числа границ и команд перехода поддержка и навигация в многосвязных сайтах становятся все более трудными. Локальные корректировки, вносимые и сдельные страницы, имеют тенденцию к распространению по всему узлу. И самом деле, простая замена страницы требует провести полную “инвентаризацию” и обновить все ссылки, в которых она участвует как источник или приемник. Большие сайты должны быть оснащены специальной системой индексации или навигационной картой, которая упрощает ориентировку посетителей. 
<img src="image/2-3.jpg" alt="Структура узла"> 
Рис. 2.3. Многосвязная структура 
<h1>Тестирование на совместимость</h1>
Программа Dreamweaver не накладывает почти никаких ограничений на свободу самовыражения дизайнера и программиста. Автор волен создать про стой гипертекстовый документ, ограничиваясь вставками рисунков и регулярных таблиц. При необходимости он может использовать весь арсенал изобразительных средств и инструментов, которым располагает язык гипертекстовой разметки документов четвертой версии (HTML 4.0). Работая со слоями, таблицами стилей и т. п., не следует забывать, что еще не вышли из обращения старые версии броузеров, которые не поддерживают многие новации последних спецификаций языка HTML. 
<img src="image/2-22.jpg" alt="Тестирование на совместимость"> 
Рис. 2.20. Отчет о проверке на совместимость 
Программа Dreamweaver имеет специальную команду проверки совместимости со старыми версиями программ просмотра. Такую проверку можно применять к отдельным документам, части проекта, расположенной в пределах папки, и ко всему проекту. 
<li>Откройте окно Диспетчера узла и загрузите в него нужный сайт. </li> 
<li>Сохраните документы, поскольку проверяются только последние сохраненные версии. </li> 
<li>Выберите папку или несколько файлов на правой панели диспетчера узла. </li> 
<li>Дайте команду File > Check Target Browsers (Файл > Проверить на совместимость с броузерами). На экране появится одноименное диалоговое окно. </li> 
<li>Выберите броузеры, на совместимость с которыми следует проверить документы. Разрешается выбрать несколько программ. Для группового выбора надо удерживать нажатыми клавиши CTRL или SHIFT. </li> 
<li>Щелкните на кнопке Check (Проверить). </li> 
Результаты проверки на совместимость программа записывает в виде файла HTML и выводит на экран в той программе просмотра, которая установлена па компьютере как броузер, используемый по умолчанию. 
<h1>
Dreamweaver 4
</h1>
<h1>Цвет в WWW</h1>
Новичку, перебирающему свои первые виртуальные четки на бесконечной цепочке ссылок и переходов Интернета, пройденные страницы представляются как красочный, многоцветный вернисаж, где документы, выдержанные в строгом академическом стиле, соседствуют с броскими рекламными сайтами. Цвет — это основный строительный материал любого дизайна бумажного или электронного. В “сайтостроении” он играет даже более :заметную роль, нежели форма, структура или шрифтовое оформление. 
Изобилие цветовых решений не должно обманывать наблюдателя своей внешней свободой и видимой безграничностью возможностей. Автору любого Интернет-проекта предстоит преодолеть несколько серьезных технологических ограничений. 
Растр. Из всего многообразия форм и способов представления визуальной информации, которое находится в обращении в сфере машинной графики, в сети применяются, главным образом, точечные изображения. В этом способе картинки представляются в виде прямоугольной матрицы-растра, состоящей из элементарных графических элементов, которые называются пикселями. Элементы матрицы способны принимать различные Цветовые и яркостные значения. Зрительные фильтры человеческого глаза аппроксимируют и сглаживают дискретность цветовой матрицы, которая в сознании человека превращается в целостный графический образ. 
Форматы. Едва можно дать исчерпывающее объяснение тому обстоятельству, что при всем изобилии растровых форматов (их в наше время насчитывается несколько десятков) для публикации изображений в сети Интернет используются только три: JPEG, GIF и PNG, каждый из которых накладывает собственные ограничения на допустимую цветовую гамму. 
Разрешение. Вносит свою лепту и разрешение компьютерных мониторов. Даже профессиональные экраны с большой рабочей площадью и сложными системами цветокалибровки имеют разрешение, не превышающее- 96 точек на дюйм. Самые дешевые струйные принтеры домашнего применении давно 
перешагнули барьер в 300 точек на дюйм, а печатающие аппараты верхней цеповой категории способны выдавать оттиски с разрешением в 2880 точек на дюйм и более. 
 
Цветовой охват. Известно, что для генерации цветов в компьютерных мониторах используется модель RGB, в которой каждый оттенок получаете и в результате смешения трех базовых цветовых координат разной интенсивности красной (Red), зеленой (Green) и синей (Blue). Эта модель способна породить такое изобилие тонов и оттенков, которое намного превосходит способности человеческого глаза. Диапазон воспроизводимых цветов принято называть цветовым охватом. 
Web-дизайнер свободен в выборе цветовых решений для своего проекта, но если требуется добиться одинакового отображения документа на paзных компьютерных платформах, то его цветовое разнообразие следует привести к “общему тоновому знаменателю”. Таковым является так называемая безопасная Web-палитра, состоящая из 216 цветов. Это общая часть, пересечение системных палитр самых популярных в сети платформ Windows и Macintosh. 
При просмотре в броузерах Internet Explorer и Netscape Navigator страницы с, ограниченной гаммой будут выглядеть примерно одинаково. Это весьма обязывающее утверждение нельзя толковать расширительно; оно относится только к передаче цветов. 
Элементы безопасной палитры образуются по следующему принципу. Они получаются в результате смешения трех цветовых координат R, G и В определенной интенсивности. Каждая составляющая может принимать только шесть значений: 0,51,102,153,204 и 255, — что и дает в результате 6x6x6 = 216. 
В языке HTML для задания цветов обычно используется следующий способ кодирования. Значения интенсивностей цветовых координат записываются в шестнадцатеричной системе счисления. На каждую координату отводится два шестнадцатеричных разряда, коды перечисляются в той же последовательности, какую занимают буквы в обозначении модели, каждое кодовое слово начинается с символа #. Например, белый цвет представляется в виде #FFFFFF, каждая составляющая имеет максимальную интенсивность, что после их смешения дает белый. 
Шестнадцатеричные аналоги стандартного ряда безопасной палитры выглядит как 00, 33, 66, 99, СС и FF. Поэтому в кодах элементов этой палитры не пользуются комбинации данных значений. Так, серый цвет подложки диалоговых окоп программы представляется в виде #СССССС. Иногда приходится импортировать цвет в программу Dreamweaver из других приложений. Многие графические редакторы, например FreeHand, используют только десятичную кодировку цветовых координат. Перевести десятичное представление в шестнадцатеричное можно при помощи про граммы Калькулятор, которая входит в стандартную поставку операционной системы Windows. 
<img src="image/rabota-s-jekspress-redaktorom_1.gif" alt="Цвет в WWW">Проверка показала, что броузер Internet Explorer, работающий под управлением операционной системы Windows, неправильно отображаем несколько цветов стандартной палитры, в том числе #0033FF (0,51,255), #3300FF (51,0,255), #OOFF33 (0,255,51) и #33FFOO (51,255,0). Программа Netscape Navigator на платформе UNIX использует палитру, котором отличается от стандарта Windows и Macintosh значениями своих цветовых координат. 
<h1>Фильтрация кодов Microsoft Word</h1>
Программа Dreamweaver может открывать и импортировать документы, созданные в популярном текстовом редакторе Microsoft Word и сохраненные как файлы HTML. С ростом сети Интернет подобный стиль работы становится все более популярным. Многие пользователи, не являющиеся профессионалами в Web-дизайне, используют хорошо освоенное средство создания печатных документов для верстки простых страниц HTML. Платой за простоту и удобство работы является неэффективный и избыточный код, который порождает редактор Microsoft Word. 
Выполнить его фильтрацию в программе Dreamweaver можно двумя разными способами, которые немного отличаются по технике исполнения, но дают одинаковые результаты. 
<li>Откройте файл с расширением .НТМ, созданный в редакторе Microsoft Word. Для этого дайте команду File > Import > Import Word HTML (Файл > Импорт > Импорт кода HTML из редактора Word). Появится стандартное диалоговое окно, в котором надо найти и выбрать нужный документ HTML. После некоторой паузы, связанной с определением версии текстового редактора, программа Dreamweaver начнет фильтрацию. Ее настройки задаются в диалоговом окне Clean Up HTML Word File (Очистка файла HTML из редактора Word), показанном на рис. 3.4.</li> 
<li>Любой гипертекстовый документ, в том числе и файл, созданный в Microsoft Word, можно просто открыть в программе. Для этого следует воспользоваться стандартной командой File > Open (Файл > Открыть). В этом случае он обрабатывается программой Dreamweaver как файл собственного производства и не подвергается фильтрации. После этого надо дать команду Commands > Clean Up Word HTML (Команды > Очистить файл HTML редактора Word). На этом все различия в технике исполнении фильтрации заканчиваются.</li> 
<img src="image/3-4.jpg" alt="Фильтрация кодов Microsoft Word"> 
Рис. 3.4. Настройка фильтрации гипертекстовых документов, созданных в MS Word 
Рассмотрим многочисленные настройки диалогового окна Clean Up HTML Word File (Очистка файла HTML из редактора Word). 
Настройки вкладки Basic (Основные). 
<li>Remove all Word-specific markup (Удалить специфическую разметку). Удаление всех нестандартных дескрипторов, которые создает редактор Word. В их число входят коды языка XML, условные дескрипторы и др.</li> 
 
<li>Clean up CSS (Очистка стилей). Удаление нестандартных деклараций CSS созданных текстовым редактором.</li> 
<li>Clean up tags (Очистка дескрипторов ). Удаление тегов вида .</li> 
<li>Fix invalidly nested tags (Коррекция неверно вложенных дескрипторов). Удаление дескрипторов шрифтового форматирования, окружающих абзацы.</li> 
<li>Set background color (Задать фоновый цвет). Задание цвета фона для всего документа, что в редакторе Word не используется. По умолчанию устанавливается белый цвет фона #FFFFFF.</li> 
<li>Apply source formatting (Форматирование исходного текста). Применение к импортированному документу форматирования, правила которого указаны в файле SourceFormat.txt.</li> 
<li>Show log on completion (Выдать отчет по завершении). Вывод на экран протокола о работе команды фильтрации.</li> 
Настройки раздела Detailed (Подробные) соответствуют версиям Word 97 или Word 2000. Далее рассмотрим настройки, относящиеся к редактору Word 97. 
<li>Remove Word specific markup (Удалить специфическую разметку). Удаление дескрипторов, специфичных только для данной версии текстового редактора.</li> 
<li>Word meta and link tags from <head>
<link rel="canonical" href="https://www.e-lave.ru//chapter.htm"/> (Удалить специфические дескрипторы из раздела заголовков). Удаление из раздела заголовков документа нестандартных дескрипторов вида <meta> и <link>.</li> 
<li>Clean up tags (Очистить дескрипторы ). Фильтрация избыточных дескрипторов типа .</li> 
<li>Convert size [7—1] to (Преобразовать размеры шрифта). Задает способ замены дескрипторов вида . В качестве подстановки могут быть использованы заголовки разных уровней и шрифты стандартных размеров.</li> 
Аналогичные настройки, относящиеся к редактору Word 2000, рассмотрены далее. 
<li>Remove Word specific markup (Удалить специфическую разметку). Удаление дескрипторов, специфичных только для данной версии текстового редактора.</li> 
<li>XML from <html> tags (Удалить разметку XML). Удаление кодов разметки языка XML из дескриптора <html>.</li> 
<li>Word meta and link tags from <head>
<link rel="canonical" href="https://www.e-lave.ru//chapter.htm"/> (Удалить специфические дескрипторы из раздела заголовков). Удаление из раздела заголовков документа нестандартных дескрипторов вида <meta> и <link>.</li> 
 
<li>Word XML markup (Удалить разметку XML). Удаление кодов языка XML по всему документу.</li> 
<li>Conditional tags and their contents (Удалить условные дескрипторы и их содержимое). Ликвидация условных кодов и их содержимого.</li> 
<li>Remove empty paragraph and margins from styles (Удалить пустые абзацы и поля). Исключение из разметки документа одиночных кодов вида <р> всех дескрипторов абзацев, не имеющих замыкающих тегов </р>. Кроме того, удаляются описания CSS c атрибутами пустых полей, например style-'margin-top:0in'.</li> 
<li>Clean up CSS (Очистить стили). Повсеместное удаление лишних описаний CSS.</li> 
<li>Remove inline CSS styles when possible (Удалить встроенные стили). Удаление избыточной информации внутри вложенных стилевых спецификаций.</li> 
<li>Remove any style attribute when starts with mso (Удалить нестандартные атрибуты mso). Удаление нестандартных атрибутов стилевых специфика ций (mso), созданных текстовым редактором.</li> 
<li>Remove any non-CSS style declaration (Удалить все нестандартные описания стилей). Ликвидация всех нестандартных стилевых спецификаций документа.</li> 
<li>Remove all CSS styles from table rows and cells (Удалить стили из таблиц). Исключение стилевых спецификаций из разметки таблиц, более точно — из дескрипторов вида <table>, <tr>, <td>.</li> 
<li>Remove all unused style definitions (Удалить неиспользуемые стили). Удаление стилевых спецификаций, на которые нет ссылок из данного документа.</li> 
<img src="image/rabota-s-jekspress-redaktorom_1.gif" alt="Фильтрация кодов Microsoft Word">Программа Dreamweaver выполняет глубокую переработку документов HTML, созданных средствами Word. Эти преобразования бывают настолько серьезны, что отфильтрованный документ не всегда удается открыть в текстовом редакторе. Поэтому перед обработкой целесообразно создать резервную копию документа и сохранить ее на диске. 
<h1>Фильтрация кодов</h1>
Если в процессе создания гипертекстового документа дизайнер не пользовался средствами, предоставляющими прямой доступ к кодам HTML, а ограничился инструментами визуального проектирования и работой в режиме планировки страницы, то прибегать к очистке кодов, скорее всего, не придется. Система Dreamweaver неукоснительно воплотит в жизнь все директивы пользователя и построит полную и не избыточную разметку. Одной из немногих проблем является порождение лишних дескрипторов , как, например, в следующем фрагменте: 
 
Форматированный текст 
Подобная расточительность неизбежна при создании сложных документов; она является следствием многократного применения операций форматирования. 
Обмены страницами с другими редакторами HTML или прямое ручное кодирование могут служить причиной появления неоптимальных фрагментов кода — избыточной или некорректной разметки. 
Программа располагает специальными инструментами для очистки исходного текста страницы. Это команды штучного применения — они работают только с отдельными страницами и не могут быть применены ко всему сайту. 
Фильтрация разметки выполняется следующим образом. 
 
<li>Откройте гипертекстовый документ.</li> 
<li>Дайте команду Commands>Clean UpHTML(Команды>Очистить разметку)Появится диалоговое окно, показанное на рис. 3.3.</li> 
<li>Настройте параметры фильтрации и запустите процедуру щелчком на кнопке ОК.</li> 
<img src="image/3-3.jpg" alt="Фильтрация кодов"> 
Рис. 3.3. Фильтрация кодов разметки 
Рассмотрим настройки команды фильтрации. 
<li>Remove Empty Tag (Удалить пустые дескрипторы).Если этот флажок установлен, программа удаляет коды, которые не содержат текста между открывающим и закрывающим дескрипторами. Так, подлежит ликвидации кодовый фрагмент .</li> 
<li>Remove Redundant Nested Tag (Удалить избыточные дескрипторы). Этот флажок позволяет ликвидировать избыточные вложенные коды. Например, при обработке фрагмента Курсивный текст внутренняя пара дескрипторных скобок удаляется.</li> 
 
<li>Remove Non-Dreamweaver HTML Comments (Удалить комментарии сторонних программ). Убирает комментарии, вставленные в документ любыми программами, кроме Dreamweaver.</li> 
<li>Remove Dreamweaver HTML Comments (Удалить комментарии Dreamweaver). Ликвидирует все комментарии редактора.</li> 
<li>Remove Specific Tag(s) (Удалить указанные дескрипторы). Изымает из кода разметки все дескрипторы указанного вида. Образец вводится в текстовое поле, расположенное справа от флажка. Для удаления нескольких дескрипторов следует записать образцы, разделяя их запятыми, например: blink, font.</li> 
<li>Combine Nested Tags when Possible (Объединить, если возможно, вложенные дескрипторы ). Этот флажок отвечает за консолидации” множественных вложенных дескрипторов форматирования шрифтом. Так, фрагмент, приведенный в начале раздела, после обработки командой фильтрации будет представлен в следующем виде:</li> 
 
Форматированный текст 
<li>Show Log on Completion (Показать протокол после выполнения команды). Выводит диалоговое окно, в котором представлен подробный отчет о выполненной фильтрации.</li> 
<h1>Язык HTML</h1>
Самое короткое и точное истолкование назначения языка HTML заключается в дословном переводе его названия: язык гипертекстовой разметки (HyperText Markup Language). Это не язык программирования и не коммуникативное средство, а набор инструкций или предписаний, которые задают способ представления текста и импортированных объектов на экране монитора. Элементы языка принято называть дескрипторами или тегами, от английского tag (ярлык, метка и пр.). Для записи дескрипторов используются символы первой половины кодовой таблицы, так называемые символы ASCII, поэтому разметку любого гипертекстового документа можно выполнить в любом простом текстовом редакторе — для этого достаточно даже возможностей реликтовой программы Блокнот. 
 Язык гипертекстовой разметки — это один из краеугольных камней World Wide Web — самой представительной и стремительно развивающейся отрасли всемирной Сети. На русском языке вышло множество изданий, в которых синтаксис языка описан достаточно подробно. Напомним лишь основные правила создания гипертекстовых документов. 
 Подобно знакам редакторской правки коды языка HTML являются частью текстового массива документа. Различают одиночные и парные дескрипторы, которые иногда называют контейнерами. Чтобы разделить содержимое документа и его разметку, коды языка HTML записываются в угловых скобках, например или <р>. Контейнер представляет собой дескрипторную пару, которая состоит из открывающего (начального) и закрывающего (конечного) дескрипторов. Подобные пары записываются в виде <tag > </tag> и переносят свое значение на фрагмент документа, заключенный между ними. По сути дела, контейнер представляет собой своеобразные скобки, придающие заданное отличие своему содержимому по статусу или формату. 
Одиночный дескриптор по своему принципу действия больше похож на знак препинания. Он не имеет закрывающего тега и привязан к положению в документе, а не к его содержимому. Например, дескриптор <hr> создает горизонтальную линию, a — обрывает текстовую строчку. Одним из самых важных одиночных дескрипторов является <img> — специальный код, который помечает позицию вставки изображения и указывает его расположение. 
 
 Любой язык представляет собой избыточную конструкцию. В самом деле, по правилам русского языка конец предложения помечается точкой, пробелом и заглавной буквой первого слова следующего предложения. Чтобы справиться с поставнной задачей, достаточно одного из этих соглашений. Формальные лингвистические системы, используемые в программировании и создании гипертекстов, также обладают некоторым запасом выразительных средств. 
Избыточность HTML позволяет записывать некоторые дескрипторы-контейнеры как одиночные: Например, дескриптор , разделяющий текстовый массив на абзацы, по своей формальной спецификации является контейнером. Но поскольку конец одного абзаца — это начало другого фрагмента документа (абзаца, таблицы и пр.), то закрывающий тег можно опустить. 
Если создать в программе Dreamweaver новый документ на основе шаблона, принятого по умолчанию, то его код будет выглядеть так же, как на следующем листинге. Это гипертекстовая разметка самой простой, то есть совершенно пустой страницы. 
<html> 
<head>
<link rel="canonical" href="https://www.e-lave.ru//chapter.htm"/> 
<title>Untitled Document</title> 
<meta http-equiv-"Content-Type" content-"text/html; charset=iso-8859-1"> 
</head> 
<body bgcolor="#FFFFFF"> 
</body> </html> 
Дескриптор <html> обозначает границы гипертекстового документа. Сам документ разделен на две части: раздел заголовков и тело. Раздел заголовков — это фрагмент кода, заключенный между дескрипторами <head>
<link rel="canonical" href="https://www.e-lave.ru//chapter.htm"/> и </head>. Здесь обычно записывается важная служебная информация о странице: название, вид кодировки, параметры фона и многое другое. Раздел заголовков не отображается на экране монитора непосредственно, хотя и оказывает существенное влияние на это процесс. 
Тело документа — это та часть кода, которая расположена в обрамлении дескрипторной пары <body> и </body>. Это самая важная часть документа; она хранит, как принято сейчас выражаться в кругах продвинутой публики в Интернете, контент: текст, рисунки, анимацию, таблицы, ссылки и пр. 
 
<img src="image/3-1-jazyk-html_1.gif" alt="Язык HTML"> Программа Dreamweaver разрешает не включать в состав документа внешние дескрипторные скобки. Отсутствие тегов <html> </html> или одного из них не рассматривается как ошибка. Современные программы просмотра, по крайней мере последние версии броузеров Internet Explorer и Netscape Navigator, корректно читают такие странички. Однако многие текстовые редакторы или почтовые программы могут принять документ без открывающего и закрывающего дескрипторов за текстовый или неправильно интерпретировать его разметку. 
Содержимое дескриптора <title> представляет собой официальное название гипертекстового документа. При просмотре документа в броузере этот текст отображается в строке заголовка программы. Он не только дает пользователю информацию о предполагаемой теме, направлении и содержании документа, но и используется многими поисковыми программами как основание для индексации и рубрикации страничек. 
Атрибут charset дескриптора <meta> отвечает за выбор кодировки документа. Принятый по умолчанию кодовый набор (iso-8859-1) не подходит для работы с текстами на русском языке. Для публикации документа в русской части сети Интернет следует выбрать одну из четырех кодировок, которые поддерживают символы кириллицы. 
Атрибут bgcolor дескриптора <body> задает цвет фона страницы. Для документа, созданного на основе шаблона по умолчанию, в качестве базового цвета принимается белый (шестнадцатеричное значение #FFFFFF). 
<h1>Повторное использование кода</h1>
Одной из многочисленных привлекательных особенностей программы является ее строгое обращение с кодами разметки. По сравнению с другими визуальными редакторами система Dreamweaver весьма экономно использует средства гипертекстовой разметки, поэтому код, который она порождает, является точным и лаконичным. Кроме того, программа толерантна к разметке, созданной другими редакторами HTML. Документы с избыточным, громоздким форматированием можно импортировать в пакет Dreamweaver с минимальными потерями и искажениями. При этом будут сохранены даже нестандартные дескрипторы, например конструкции языка ColdFusion Markup Language и коды, незнакомые программе. 
Перечислим основные соглашения, которые используются в программе но умолчанию при обмене гипертекстовыми документами. 
<li>Исправление неправильно вложенных дескрипторов. Например, фрагмент</li> 
Teкcт превратится в Текст 
<li>Закрытие открытых тегов, если этого требует спецификация языка.</li> 
<li>Удаление избыточных закрывающих дескрипторов.</li> 
<li>Все неизвестные или нераспознанные коды разметки программа оставляет без изменений. В их число входят дескрипторы языка XML (Extended Markup Language}, теги CFML (ColdFusion Markup Lаmguage), коды ASP (Active Server Pages) и пр.</li> 
Если включен режим подсветки некорректных языковых конструкций, то программа помечает все такие фрагменты кода желтым цветом. Если выбрать ошибочный код, то на панели Инспектора свойств выводится сообщение об ошибке и рекомендации по ее исправлению. Подсветку ошибок можно отключить. 
<li>Перейдите в режим отображения кода страницы (вызовите Инспектор кода или включите соответствующий режим в окне документа).</li> 
<li>Щелчком правой кнопки мыши откройте контекстное меню панели инструментов.</li> 
<li>Сбросьте флажок меню Highlight Invalid HTML(Выделять ошибочные коды).</li> 
В режиме отображения планировки страницы программа всегда помечает неправильные конструкции языка HTML. 
<h1>Правила ввода дескрипторов</h1>
Прямой ввод кодов разметки разрешается выполнять в специальном режиме отображения документа, в котором программа выводит на экран содержимое страницы вместе со всеми дескрипторами. Для перехода в этот режим программа предлагает несколько способов. Напомним некоторые из них. 
<li>Откройте Инспектор кода при помощи команды Window > Code Inspector (Окно > Инспектор кода). Кроме того, эту палитру можно вывести на экран при помощи клавиши F10, щелчком на кнопке с изображением угловых скобок на панели быстрого запуска или щелчком на такой же кнопке палитры быстрого запуска.</li> 
<li>Перейдите в режим отображения кодов щелчком на кнопке Code View (Режим разметки) в левой части панели инструментов.</li> 
<li>Разделите окно документа на две части щелчком на кнопке Code and Design View (Режим разметки и планировки), второй слева на панели инструментов.</li> 
Приведем несколько простых правил ввода дескрипторов на примере Инспектора кода. 
В Инспекторе кода отображается код текущего документа. Многие дескрипторы, используемые для разметки, имеют индивидуальную расцветку. Цвета дескрипторов входят в основные настройки программы и допускают изменение по выбору пользователя. Редактирование кода считается законченным, а сделанные изменения переносятся в основной документ после снятия активности с окна Инспектора кода. Проще всего для этого щелкнуть мышкой на любой точке основного окна документа. 
Кроме того, есть специальная команда внесения в документ правок исходного текста. Для этого достаточно нажать клавишу F5 или дать команду View > Design View (Вид > Обновить). 
Любые содержательные изменения, а также команды форматирования и вставки, выполненные в режиме планировки страницы, немедленно переносятся в окно Инспектора кода. Сказанное относится и к выбору — выделение текстового фрагмента или объекта одновременно отображается в обоих окнах. 
Программа Dreamweaver следует принятому в языке HTML соглашению, согласно которому синтаксически правильные, но неизвестные программе дескрипторы игнорируются. Некорректная разметка и части кода, которые программа не смогла разобрать, помечаются желтым цветом. Все исправления возлагаются на пользователя, автоматическая корректировка не применяется. 
 
 Если выбрать дефектную часть кода, помеченную желтым цветом, то в окне Инспектора свойств можно прочитать претензии синтаксического анализатора и рекомендации по исправлению возможной ошибки. 
История языка гипертекстовой разметки сравнительна коротка. Может быть, поэтому некоторые его правила и языковые конструкции выглядят недостаточно сбалансированными. Правила HTML жестко регламентируют применение одних средств и дают неоправданно большую свободу и использовании других. Рассмотрим базовые правила ввода гипертекстовых документов. 
 Толкование, или, как говорят, интерпретация документа HTML выполняется на основе алгоритмов синтаксического разбора текста и кодов разметки Программа обнаруживает и выполняет все команды и декларации форматирования документа только по расположению дескрипторов. Для правильного синтаксического разбора не требуется разделять элементы разметки пробелами, символами перехода на новую строку или пустыми строками Интерпретатор языка HTML рассматривает гипертекстовый документ как одну длинную строчку, состоящую из литер и спецсимволов. Все стандартные разделители, унаследованные от эпохи пишущих машинок и скоросшивателей, просто игнорируются. 
Чтобы придать гипертекстовому документу хорошо обозримый структурированный вид, пользователь может вставлять между дескрипторами пустые строчки, пробелы и символы конца абзаца (ENTER) и перехода на новую строку (SHIFT+ENTER). 
Следующие два фрагмента показывают разные способы оформления одного и того же гипертекстового документа. Первый фрагмент содержит отступы и пустые строки. Эти необязательные элементы подчеркивают структуру документа, соподчиненность разделов и облегчают восприятие документа человеком. 
<html> 
<head>
<link rel="canonical" href="https://www.e-lave.ru//chapter.htm"/> 
<title>Dreamweaver</title> 
<meta charset="windows-1 251 "> 
</head> 
<body> 
Правила ввода кода HTML 
</body> 
</html> 
В следующем примере все языковые конструкции набраны в одну строку, что не влияет на отображение документа в программах просмотра. 
 
<html><head>
<link rel="canonical" href="https://www.e-lave.ru//chapter.htm"/><title>Dreamweaver</title><meta charset="windows-1 251 "></head><body>Правила набора кода HTML </body></html> 
 Дескрипторы HTML не зависят от регистра; они могут быть записаны прописными или строчными буквами. Допускается смешение регистров в пределах одного дескриптора и документа. 
 Имя дескриптора можно отделить пробелами от закрывающей угловой скобки. Между открывающей скобкой и именем дескриптора пробелы недопустимы. Многие параметры дескрипторов языка HTML записываются при помощи знака равенства. Стандарт языка допускает использование пробелов с обеих сторон этого спецсимвола, но самые ранние версии броузеров некорректно обрабатывают такие конструкции. Поэтому лучше ими не пользоваться. 
 Программа без комментариев становится непонятной ее автору сразу после завершения отладки. Неписаные стандарты программирования рекомендуют помещать одну строку комментария примерно на каждые десять строк программного кода. В языке HTML нет таких абстрактных и сложных для восприятия конструкций какими, например, обладает язык C++. Коды разметки привязаны к содержимому документа и поэтому часто обладают свойством, которое программисты называют самодокументируемостью, то есть они свидетельствует о себе без дополнительных комментарием. Тем не менее, при создании сложных гипертекстовых документов с большим количеством скриптов, форм, таблиц и внедренных объектов бывает трудно разобраться в источнике кода без дополнительных пояснений. 
Комментарии в языке HTML записываются в виде: 
<!— Текст комментария —> 
Они видны только в режиме отображения кода; программы просмотра не обрабатывают последовательности символов, заключенные в такие скобки и не отображают их на экране. 
Для вставки комментария можно воспользоваться командой Insert > Invisible Tags > Comment (Вставка > Скрытые коды > Комментарий). 
<h1>Работа с HTML</h1>
Многие разработчики визуальных редакторов HTML говорят о том, что пользователи программных продуктов данного класса избавлены от необходимости работать с дами разметки и что в режиме WYSIWYG можно создавать гипертекстовые документы любой сложности, не зная конструкций и правил языка HTML Это отчасти рекламное утверждение оказывается справедливым далеко не всегда. Авторы программы Dreamweaver в наибольшей степени преуспели в решении этой сверхзадачи. Программа располагает арсеналом средств визуального проектирования, достаточным для того, чтобы сверстать гипертекстовую страничку средней сложности, не прибегая к ручному кодированию и работе с Инспектором кода. Кодирование нельзя рассматривать как неизбежное зло. Многие операции редактирования и тонкой настройки гипертекстовых документов можно выполнить только при помощи прямой работы с дескрипторами HTML. 
<h1>Работа с экспресс-редактором</h1>
Основной объем работы по разметке гипертекстового документа обычно выполняется средствами графической оболочки программы или при помощи Инспектора кода. Для тонкой, локальной настройки лучше использовать специальный экспресс-редактор кодов, встроенный в оболочку про граммы. В документации на программу он называется Quick Tag Editor (Экспресс-редактор). Это удобное оперативное средство впервые появилось в третьей версии программы, откуда почти без изменений перекочевало в ее четвертое издание. 
Вызвать экспресс-редактор можно несколькими способами: 
<li>дайте команду Modify > Quick Tag Editor (Изменить > Экспресс-редактор);</li> 
<li>нажмите комбинацию клавиш CTRL+T;</li> 
<li>вызовите редактор при помощи Инспектора свойств. Для этого щелкните на кнопке с изображением карандаша, расположенной в правой части палитры Инспектора свойств.</li> 
Редактор работает в трех режимах, имеющих незначительные отличия по технике и тактике использования. 
<li>Insert Tag (Вставка кода). Размещает выбранный дескриптор в позиции текстового курсора.</li> 
<li>Edit Tag (Редактирование кода). Редактирует существующий дескриптор.</li> 
<li>Wrap Tag (Замыкание кода). Заключает выбранный фрагмент документа в заданный контейнер.</li> 
<img src="image/3-1.jpg" alt="Работа с экспресс-редактором"> 
Puc. 3.1. Экспресс-редактор в режиме вставки кодов 
Используемый режим зависит от текущего выбора. Если на странице нет выбранных объектов, то редактор работает в режиме вставки. Он разрешает поместить в позицию текстового курсора любой дескриптор, как стандартный, входящий в спецификацию языка HTML, так и нестандартный или специальный код разметки языков XML, CFML и др. 
Если выбран однородный текстовый фрагмент или неформатированный набор символов, то выбирается режим замыкания кода. В этом случае редактор заключает выбранную часть документа в заданные дескрипторные скобки. Причем достаточно ввести только открывающий дескриптор — замыкание программа выполнит самостоятельно. 
<img src="image/rabota-s-jekspress-redaktorom_1.gif" alt="Работа с экспресс-редактором">В режиме замыкания разрешается работать с любыми дескрипторами. Система Dreamweaver принимает и корректно обрабатывает даже коды, не входящие в спецификации наиболее распространенных языков гипертекстовой разметки. 
 
 Чтобы использовать редактор для редактирования кодов, требуется выбрать дескриптор вместе со всем его содержимым. Для этого лучше всего воспользоваться селектором разметки. Напомним, что это средство управления расположено в левой части строки состояния и является лучшим инструментом выбора кодов разметки. Возможен и более громоздкий путь: переход в режим отображения источника, выбор дескриптора и обратный переход к планировке страницы. 
<img src="image/rabota-s-jekspress-redaktorom_1.gif" alt="Работа с экспресс-редактором">Программа Dreamweaver, в принципе, разрешает вызывать экспресс-редактор в режиме отображения кодов, но подобный стиль работы столь же логичен, как прием пищи китайскими палочками за по-европейски сервированном столом в визуальном режиме, когда программа выводит на экран планировку страницы. 
Каким же образом вводятся дескрипторы в экспресс-редакторе? Код разметки вместе с надлежащими атрибутами можно просто ввести с клавиатуры. Если выдержать определенную паузу и не торопиться со вводом, то программа откроет меню, в котором представлены все коды разметки и их атрибуты, актуальные в данной ситуации. Остается только пролистать список и выбрать нужный пункт. 
Приведем основные правила обращения с этим списком: 
<li>для перемещения по списку служат курсорные клавиши;</li> 
<li>выбор пунктов выполняется двойным щелчком мыши или нажатием клавиши ENTER;</li> 
<li>отказ от выбора осуществляется нажатием клавиши ESC.</li> 
Содержимое списка можно редактировать. Оно хранится в файле TagAttributeList.txt, расположенном в папке Dreamweaver\Configuration. Это обычный текстовый файл, который можно открыть и отредактировать в любом текстовом редакторе, например в программе Блокнот. Этот файл не просто перечисление тегов и атрибутов. Он заполняется по строгим, хотя и простым правилам, разобраться в которых вполне по силам пользователю средней квалификации. Подробнее о работе с конфигурационными файлами говорится в главе, посвященной настройкам программы. 
<img src="image/rabota-s-jekspress-redaktorom_1.gif" alt="Работа с экспресс-редактором">В режиме вставки кодов редактор разрешает задавать текстовое наполнение некоторых дескрипторов. После задания кода разметки надо просто нажать клавишу ВПРАВО и ввести необходимую текстовую строку. 
 
Поведение экспресс- редактора допускает определенную настройку. Оно зависит от двух флажков, расположенных в категории Quick Tag Editor (Экспресс-редактор) диалогового окна Preferences (Настройки). 
<li>Apply Changes Immediately While Editing (Применять внесенные изменения немедленно). Если этот флажок установлен, внесенные изменения можно передать в документ, не заканчивая работу с экспресс-редактором. Для этого достаточно нажать клавишу TAB или SHIFT+TAB. Это соглашение действует только при редактировании дескрипторов в режиме Edit Tag (Редактирование кода). В режимах вставки и замыкания изменения переносятся в документ по нажатию клавиши ENTER.</li> 
<li>Enable Tag Hints (Включить контекстный список дескрипторов и атрибутов) Этот флажок управляет выводом контекстного выпадающего меню Выставить требуемую задержку перед появлением этого меню можно при помощи интерактивного движка. </li> 
<img src="image/rabota-s-jekspress-redaktorom_1.gif" alt="Работа с экспресс-редактором">Последовательное нажатие комбинации клавиш CTRL+T выполняет циклическое переключение режимов экспресс-редактора. 
<h1>Специальные символы</h1>
Количество символов, используемых дизайнером в процессе создания документов, намного превышает тот стандартный набор, который унаследовала клавиатура персонального компьютера от эпохи печатных машинок и телетайпов. В электронных документах применяются литеры, не имеющие прямых клавишных аналогов. Для их вставки следует использовать специальные кодовые последовательности. 
В спецификации языка HTML для наиболее востребованных символов предлагается легкая для запоминания мнемоническая запись. Код таких спецсимволов начинается со знака & (амперсанд), за которым следует его сокращенное название и точка с запятой. Например, знак копирайта обозначается как &сору;, а символ зарегистрированной торговой марки ®. 
<img src="image/rabota-s-jekspress-redaktorom_1.gif" alt="Специальные символы">Некоторые старые версии популярных броузеров Internet Explorer и Netscape Navigator могут допускать ошибки в чтении именованных кодовых последовательностей. 
Менее популярные символы, например диакритические знаки, символы псевдографики и пр., представляются более трудным для запоминания десятичным кодом. Такие кодовые последовательности всегда начинаются с двойного спецсимвола &#, за которым следует десятичный номер литеры. Так код символа амперсанд имеет вид &, а длинное тире записывается как—. 
Десятичный номер может принимать любые значение в диапазоне от 0 до 255. Номера от 14 до 31 обозначают управляющие команды и не используются в разметке гипертекстовых документов. Диапазон от 127 до 159 не полностью используется в языке HTML. 
<img src="image/rabota-s-jekspress-redaktorom_1.gif" alt="Специальные символы">Некоторые символические выражения записываются при помощи знаков “больше” или “меньше”, которые в языке HTML выделяют коды разметки. Чтобы избежать двусмысленности, в таких случаях следует применять именованные кодовые последовательности: > для кодирования символа “больше” (>) и < для записи символа меньше (<). 
Именованные и десятичные кодовые последовательности, введенные в режиме просмотра страницы, рассматриваются программой как простые цепочки литер и не переводятся в специальные символы. Чтобы добиться правильной интерпретации таких последовательностей их, следует набирать в режиме отображения кодов, например в окне Инспектора кода. 
 
Таблицы, в которых описаны все допустимые десятичные и именованные кодовые последовательности символов, обычно приводятся в руководствах по языку HTML. Пользователи Dreamweaver в значительной степени избавлены от необходимости обращаться к этим громоздким описаниям, поскольку в программе есть специальные команды для вставки спецсимволов. 
<li>Выберите позицию символа и поместите в нее текстовый курсор.</li> 
<li>Дайте команду Insert > Special Characters (Вставка > Специальные символы).</li> 
<li>Выберите нужный символ из меню.</li> 
<li>Это меню также содержит пункт Other (Другой), который выводит на экран диалоговое окно Insert Other Character (Вставка прочих символов), содержащее 99 дополнительных спецсимволов ограниченного применения.</li> 
<img src="image/3-5.jpg" alt="Специальные символы"> 
Рис. 3.5. Вставка специальных символов 
Все двенадцать специальных символов, представленных в меню Special Characters (Специальные символы), можно разместить на странице и при помощи палитры объектов. Кнопки вставки спецсимволов расположены в отдельной секции палитры под названием Characters (Символы). 
<img src="image/rabota-s-jekspress-redaktorom_1.gif" alt="Специальные символы">Среди всех спецсимволов своей значимостью и частотой применения выделяется неразрывный пробел   (nonbreaking space). Это пробельный символ с особыми свойствами: слова, которые он разделяет, при просмотре всегда располагаются на одной строке и не разделяются. Одно это свойство способно сделать его незаменимым, но неразрывный пробел имеет и несколько других полезных применений, основанных на его некумулятивности. Это значит, что несколько таких символов, поставленных подряд, не поглощают друг друга. 
В языке HTML средства управления позиционированием текста представлены весьма скромно, поэтому неразрывный пробел — это едва ли не единственный универсальный инструмент регулирования горизонтального положения объектов. С его помощью удобно создавать отступы абзацев, увеличивать расстояние между отдельными предложениями, сдвигать пункты списков и перечислений и пр. 
Вставка и копирование кодов 
Пользователь Dreamweaver имеет возможность обмениваться кодами с другими редакторами HTML или приложениями, генерирующими корректную гипертекстовую разметку страниц. Средством передачи служит буфер обмена — штатный инструмент обмена информацией на платформе Windows. 
 
Пусть фрагмент кода записан в буфер обмена. Его источником может быть стороннее приложение, например программа HomeSite, или документ, открытый в другом окне Dreamweaver. 
При работе в режиме отображения кодов копирование и вставка выполняются обычными для этих операций командами: 
<li>Edit > Сору (Правка > Копировать) или CTRL+C для копирования;</li> 
<li>Edit > Paste (Правка > Вставить) или CTRL+V для вставки.</li> 
 В режиме планировки страницы содержимое буфера обмена можно вста-вить как фрагмент HTML, когда попутно выполняется интерпретация кодов и проверки корректности дескрипторов, или обычным образом. 
<li>В первом случае используется команда Edit > Paste HTML (Правка > Вставить кодовый фрагмент) или клавиатурная комбинация CTRL+SHIFT+V. Если буфер содержал синтаксически правильные дескрипторы, то программа выполнит все инструкции по разметке и представит содержимое буфера в надлежащем виде. Все найденные ошибки помечаются желтым цветом.</li> 
<li>Во втором случае применяется стандартная команда Edit > Paste (Правка > Вставить) (CTRL+V). В этом случае внедренный фрагмент в режиме планировки страницы будет выглядеть так же, как в кодовом режиме.</li> 
В режиме планировки пользователю доступны две команды копирования. 
<li>Обычное копирование, когда в буфер обмена заносится то, что представлено на экране, выполняется по команде Edit > Copy (Правка > Копировать) (CTRL+C).</li> 
<li>Чтобы поместить в буфер обмена видимый фрагмент страницы вместе со скрытыми кодами, надо отдать команду Edit > Copy HTML (Правка > Копировать кодовый фрагмент) или нажать клавиши CTRL+SHIFT+C.</li> 
<img src="image/rabota-s-jekspress-redaktorom_1.gif" alt="Специальные символы">В текстовых редакторах хорошо зарекомендовал себя способ копирования и перемещения при помощи перетаскивания выбранного фрагмент. Эта техника работает и в программе Dreamweaver, причем и в кодовом режиме, и в режиме макета страницы. Напомним, что для копирования надо перетащить выбранный фрагмент, удерживая нажатой клавишу CTRL. 
<h1>Справочная панель</h1>
Справочная панель (Reference panel) — это весьма удачное нововведение четвертой версии программы. Она представляет собой электронное справочное руководство по основным средствам создания гипертекстовых документов: дескрипторам языка HTML и их атрибутам, таблицам стилей (CSS) и языку JavaScript. Руководство лицензировано фирмой Macromedia у всемирно известного издательства O'Really & Associates. В его основу положена хорошо зарекомендовавшая себя серия справочных пособий по Web-дизайну и программированию; в их число входит фундаментальное руководство (Danny Goodman “Dynamic HTML: The Definitive Reference”), посвященное языку HTML. 
<img src="image/3-2.jpg" alt="Справочная панель"> 
Рис. З.2. Справочная панель 
Самый удобный способ использования справочной панели следующий. 
<li>Перейдите в режим отображения кода и выберите элемент гипертекстовой разметки документа (дескриптор, атрибут и пр.) или оператор языка JavaScript.</li> 
<li>Выведите на экран справочную палитру. Для этого можно воспользоваться командой Window > Reference (Окно > Справочник), комбинацией клавиши CTRL+SHIFT+F1 или просто щелкнуть мышкой на кнопке панели инструментов с изображением вопросительного знака в угловых скобках.</li> 
 В результате на справочную панель выводится описание выбранного элемента, примеры его использования, информация о совместимости с броузерами и сведения о поддержке в различных версиях языка HTML. Список Description (Описание) содержит перечень всех атрибутов, применимых к данному дескриптору; для функций и операторов языка JavaScript выводится перечень допустимых параметров. 
Размер шрифта справочной панели можно менять. Щелчком на кнопке треугольной формы, расположенной в северо-восточной части панели, открывается меню с тремя стандартными размерами шрифта: Large Font (Крупный шрифт), Medium Font (Средний шрифт), Small Font (Мелкий шрифт). 
<h1>
Dreamweaver 4
</h1>
<h1>Цветовые схемы</h1>
Выбор гармоничной цветовой гаммы проекта — это непростой и весьма ответственный этап создания электронного проекта. Профессионалы в области колористки знают, что существуют цвета-антагонисты, сочетание которых на одной странице производит впечатление тонового диссонанса. И наоборот, есть устойчивые цветовые комбинации; даже значительные расхождения по яркости и контрастности их составляющих не вызывают ощущения цветового рассогласования. 
Универсальные рецепты, позволяющие новичку подобрать сбалансированную по тоновому разнообразию и контрасту цветовую схему для своей странички, пока не выработаны. 
Разработчики программы Dreamweaver пошли по самому рациональному, проверенному пути. Они заложили в программу несколько отработанных цветовых сочетаний и разрешили их незначительную настройку. В стандартных комбинациях выбирается цвет для основных атрибутов гипертекстового документа: фона, текста и ссылок. 
Набор цветовой схемы производится следующим образом. 
<li>Дайте команду Commands > Set Color Scheme (Команды > Выбрать цветовую схему).</li> 
<li>Появится диалоговое окно, показанное на рис. 4.3. В списке Background (Фон) следует выбрать цвет фона, в списке Text and Links (Текст и ссылки) — задать цвет текста и ссылок.</li> 
<img src="image/4-3.jpg" alt="Цветовые схемы"> 
Puc. 4.3. Цветовые схемы 
 <li>Щелкните на кнопке Apply (Применить), чтобы применить выбранные установки к активной странице.</li> 
<li>Завершите процедуру щелчком на кнопке ОК.</li> 
 Эта простая команда способна предотвратить грубые ошибки при выборе основных цветовых параметров документа. А как же быть с картинками. Оставляя подробное описание темы руководствам по колористике и цветовому дизайну, приведем лишь несколько простых рекомендаций по подбору сочетаемых тонов. 
 Не рекомендуется пользоваться цветами, расположенными на цветовом круге рядом друг с другом. С другой стороны, полярные тона тоже плохо сочетаются на одной странице. Такие малогармоничные пары образуют, например, зеленый с фиолетовым или красный с голубым. Принято считать, что оптимальным расстоянием между цветами является примерно четверть цветового круга. Следует ограничивать цветовое разнообразие проектных решений. Страницы с большим количеством использованных красок часто вызывают ассоциации с ярмаркой или балаганом, что может быть уместно не при любой тематике Web-узла. Принято считать, что количество чистых основных тонов визуального пространства не должно превышать четырех. 
<h1>Документ</h1>
Документ 
Документом принято называть различные виды актов, имеющих юридическое значение, или удостоверения, подтверждающие определенные права или личность. В наше время это понятие получило самое широкое хождение в отраслях, связанных с информатикой и вычислительной техникой. Слово “документ” стало универсальным техническим термином, который обозначает материальный носитель или источник данных. Самые различные прикладные программы в результате своей работы порождают электронные документы, различающиеся по форматам и способам организации. Их содержимым может быть обычный текст, таблица, графическое изображение, музыкальный клип, видеоролик и пр. Финалом творческих усилий Web -дизайнера служит документ в формате гипертекста. При всем изобилии технических терминов и жаргонных словечек, которыми щедро снабжает русский язык англоговорящая в массе своей сеть Интернет, понятиям “документ” и “страница” достойной замены не нашлось. В том фрагменте всемирной сети, который называется World Wide Web, гипертекстовый документ и страница HTML - это термины с очень близкой семантикой. Большие массивы неоднородных (текстовых и графических) данных с развитой системой гипертекстовых ссылок принято называть документами. И наоборот, короткие электронные сообщения, преимущественно линейные по структуре и гомогенные по содержанию, целесообразно именовать страницами. 
<h1>Имена объектов</h1>
Имена объектов 
Иногда объекты, расположенные на гипертекстовой странице, не могут оставаться безымянными — для корректного отображения документа в программе просмотра они должны получить собственные уникальные имена. Примерами таких объектов являются слои, формы, структурные составляющие форм, интерактивные графические кнопки и изображения и др. Система присвоения имен в программе достаточно жестко регламентирована, поскольку некорректные имена могут послужить причиной серьезных проблем в работе броузеров и даже вызвать аварийное завершение программы. Кроме того, ошибки, вызванные нелегальными именами, очень трудно правильно диагностировать. 
Приведем базовые правила присвоения имен объектам программы. 
<li>Следует ограничить алфавит, используемый для записи имен. Безопасный набор символов включает в себя только буквы, цифры и символ подчеркивания _ (underscore).</li> 
<li>Целесообразно использовать только строче символы. Записывать имена следует в одно слово. Развернутые названия, состоящие из нескольких слов, можно объединить в одно при помощи символа подчеркивания.</li> 
<li>В пределах одного гипертекстового документа не должно быть повторяющихся имен — все они обязаны быть уникальными. Чтобы различить объекты, сходные по тематике и выполняемым функциям, можно к одинаковым именам добавлять порядковые номера.</li> 
<li>В операционных системах, управляющих работой серверов, могут действовать различные соглашения по поводу букв нижнего и верхнего регистров. Некоторые операционные системы считают прописные и строчные буквы различными; существуют среды, в которых регистр символов не имеет значения. Чтобы избежать возможных ошибок такого рода, целесообразно ограничиться только символами нижнего регистра.</li> 
<li>Пробельный символ относится к группе специальных символов, использование которых в именах и адресах способно привести к ошибкам. Поэтому вместо стандартного символа пробела, код ASCII которого равен 32, следует использовать его шестнадцатеричный эквивалент %20.</li> 
<li>Начальным символом в именах объектов должна быть буква. Лексические анализаторы многих программ считают нелегальными именами, начинающиеся с цифры. На внутренних позициях именных строк применение цифр не ограничивается.</li> 
<li>Запрещается присваивать объектам зарезервированные и предопределенные имена. Например, имена for, document, string имеют в языке JavaScript фиксированный смысл. Их переопределение может запутать интерпретатор языка и вызвать ошибки.</li> 
<h1>Монтажная сетка</h1>
Разметочная сетка — это служебное средство, которое предназначено для выравнивания и позиционирования элементов документа: текста, рисунков, таблиц, форм и др. Это своего рода виртуальные строительные леса сложного документа. Сетка помогает выполнить трудоемкую работу но планировке страниц, расположению врезок и иллюстраций, выравниванию навигационных кнопок. После того как дизайн проекта завершен, разметочная сетка убирается с экрана. 
Для вывода сетки на экран следует дать команду View > Grid > Show Grid (Вид > Разметочная сетка > Показать сетку) или воспользоваться комбинацией клавиш CTRL+ALT+G. Та же команда позволяет убрать сетку с экрана. 
 Команда View > Grid > Edit Grid (Вид > Разметочная сетка > Настроить сетку) выводит на экран настроечное диалоговое окно, оказанное на рис. 4.4. Рассмотрим его поля и переключатели. 
 
<li>Color (Цвет). Служит для выбора цвета разметочной сетки.</li> 
Show Grid (Показать сетку). Управляет отображением сетки. 
<li>Snap to Grid (Захват). Управляет режимом захвата — привязки к разметочной сетке.</li> 
<li>Spacing (Расстояние). Выбирает единицы измерения и задает шаг между разметочными линиями.</li> 
<li>Display (Отображение). Выбирает вид разметочных линий. Они могут быть сплошными (Lines) или отображаться мелким пунктиром (Dots).</li> 
<img src="image/4-4.jpg" alt="Монтажная сетка"> 
Рис. 4.4. Настройки разметочной сетки 
<h1>Невидимые элементы</h1>
Некоторые коды разметки и объекты гипертекстового документа не имеют визуального представления, поэтому не могут быть представлены непосредственно в окне документа или отображены программой просмотра. Конечно, в кодовом режиме доступен весь наличный состав страницы: ее гипертекстовая разметка и содержательная часть, — но непосредственная работа с кодами — это удел немногих профессионалов. 
Разработчики программы Dreamweaver связали со скрытыми объектами специальные значки. Это публичные представители невидимых элементомроекта; они показывают их положение на странице (не всегда), позволяют выполнять выбор, делают доступными некоторые операции редактирования. 
 Видимость значков скрытых объектов определяет команда View > Visual Aids > Invisible Elements (Вид > Служебная разметка > Скрытые элементы). Команда работает как флажок, каждое новое ее исполнение изменяет ранее установленный режим. 
Отображение значков облегчает ориентацию в сложном, насыщенном объектами проекте. Удаление их с экрана приближает представление страницы в окне документа к ее естественному виду. 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Невидимые элементы">Изменение видимости скрытых объектов способно отчасти изменить планировку страницы. 
Команда Invisible Elements (Скрытые элементы) допускает настройку; пользователь может указать скрытые объекты, которые попадают в область действия этой команды. Для этого надо сделать следующее. 
<li>Дайте команду Edit > Preferences (Правка > Настройки).</li> 
<li>Выберите категорию Invisible Elements (Скрытые элементы).</li> 
<li>Включите отображение выбранных значков. Значки, отмеченные установленым флажком, регулируются описанной выше командой. Значки со сброшенным флажком никогда не отображаются в окне документа.</li> 
Перечислим значки скрытых объектов. 
<li>Named Anchors (Именованные символы привязки). Показывают расположение элементов привязки. В языке HTML им соответствуют дескрипторы вида <а name=”имя”></а>.</li> 
<li>Scripts (Сценарии). Показывают расположение программных кодов, написанных на языках JavaScript и VBScript.</li> 
 
<li>Comments (Комментарии). Помечают комментарии HTML.</li> 
<li>Line Breaks (Переходы на новую строку). Значки этого вида служат маркерами специального символа — перехода на новую строку. Напомним, что этому символу соответствует код .</li> 
<li>Client-Side Image Maps (Изображения-карты на стороне клиента). Это значок представляет изображение-карту. Так называется растровый рисунок, который разбит на зоны, чувствительные к нажатию кнопки мыши. По сути дела, подобные картинки являются коллекциями кнопок, с каждой из которых может быть связана отдельная команда перехода.</li> 
<li>Embedded Styles (Внедренные стили). Значки помечают табличные стили, расположенные непосредственно в теле документа.</li> 
<li>Hidden Form Fields (Скрытые поля форм). Значки связаны с полями форм, имеющими атрибут скрытый (hidden).</li> 
<li>Form Delimiter (Границы форм). Этот параметр отвечает за отображение границ вокруг форм. Это не значок в обычном понимании, а прямоугольник, нарисованный красной пунктирной линией.</li> 
<li>Anchor point for Layers (Привязка слоев). Такими значками помечаются коды, определяющие слои документа. Сами слои не являются невидимыми объектами в точном смысле этого слова — невидим только их HTML-код,. Но они способны менять свою позицию в пределах документа, поэтому значки облегчают выбор и редактирование слоев.</li> 
<li>Anchor point for Aligned Elements (Привязка выровненных элементов). Значки показывают расположение элементов, для которых установлено выравнивание при помощи атрибута align.</li> 
<li>Server Markup Tags (ASP, CFML...) (Коды разметки сервера). Значки этого вида показывают расположение кодов разметки, которые обрабатываются сервером, а не программой просмотра. Самыми распространенными языками этого типа являются ASP (Active Server Pages) и CFML (ColdFusion Markup Language).</li> 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Невидимые элементы">Перечисленные значки не только помечают позиции вставки невидимых объектов — во многих операциях редактирования они служат полноценными заменителями соответствующих фрагментов кода. Значки можно копировать при помощи буфера обмена, причем не только в пределах данного документа — их можно переносить и на другие страницы. Щелчок на значке выбирает ту часть разметки, которая отвечает за данный объект. Двойной щелчок выбирает объект и, кроме того, вызывает палитру Property Inspector (Инспектор свойств). 
<h1>Параметры документа</h1>
Параметры документа 
Любой новый документ, созданный в программе, выглядит как совершен но пустая страница с фоном белого цвета. Но даже для такого документа без содержания и форматирования требуется определить несколько важных параметров и создать исходную гипертекстовую разметку. Это базовые установки, отвечающие за кодировку, размеры полей, цвет фона, заголовок документа, раскраску ссылок и пр. Решения, принятые программой Dreamweaver по умолчанию при создании документа, не являются окончательными, и их можно изменить. 
 Все базовые настройки страницы сведены в единое диалоговое окно (рис. 4.1), которое называется Page Properties (Свойства страницы). Открыть это диалоговое окно можно несколькими способами: 
<li>командой Modify > Page Properties (Изменить > Свойства страницы) в окне документа;</li> 
<li>клавиатурной комбинацией CTRL+J;</li> 
<li>командой Page Properties (Изменить > Свойства страницы) контекстного меню, которое открывается при щелчке правой кнопкой мыши на любой точке фона страницы.</li> 
 Рассмотрим элементы управления диалогового окна Page Properties (Свойства страницы). 
<img src="image/4-1.jpg" alt="Параметры документа"> 
Рис. 4.1. Свойства страницы 
<li>Title (Заголовок). Это поле служит для ввода заголовка страницы. Строка, набранная в данной секции окна, выводится в строке заголовка в окне программы просмотра. Многие поисковые машины учитывают содержимое заголовка при индексации страниц и размещении их в рубриках тематических каталогов. Следует отметить, что программа Dreamweaver располагает нескольким способами задания заголовка. Его можно набрать в поле Title панели инструментов, ввести непосредственно в дескриптор <title> в режиме отображения исходного текста, например в Инспекторе кода. Полноты ради упомянем об еще одном способе, более трудоемком по сравнению с предыдущими. Дайте команду View > Head Content (Вид > Содержимое раздела заголовков), в результате окно документа разделяется на две части. Верхняя соответствует разделу заголовков документа HTML, нижняя — телу документа. Щелкните на левой кнопке в разделе заголовков и введите название документа в единственное поле Инспектора свойств.</li> 
 
<li>Background Image (Фоновый рисунок). В этом поле задается полное имя фонового растрового изображения. Его можно ввести с клавиатуры или выбрать при помощи кнопки Browse (Обзор), которая запускает стандартную процедуру поиска и указания файлов. Если рисунок имеет размер, меньший, чем рабочее поле страницы, то программа создаст несколько копий изображения и покроет ими все свободное пространство. Этот прием в графике иногда называют тайлинг — от английского слова tiling (мозаичное покрытие). Запретить мозаику можно при помощи стилевых спефикаций CSS. Кроме того, в растровой графике накоплено большое количество приемов, позволяющих изменить базовое Р изображение таким образом, чтобы скрыть граничные швы. Фоновый рисунок и фоновый цвет могут быть заданы совместно. Если заданы оба параметра: фоновый цвет и фоновый рисунок, — то предпочтение отдается рисунку. Цвет отображается в процессе загрузки страницы и виден только до полной загрузки рисунка. Если фоновый рисунок имеет прозрачные фрагменты, то сквозь них будет виден фоновый цвет.</li> 
<li>Background (Фоновый цвет). Раздел предназначен для задания фонового цвета страницы. Искомый тон можно ввести в правое числовое поле, используя шестнадцатеричную нотацию. По умолчанию там задан белый цвет с кодом #FFFFFF. Щелчком по цветовому образцу слева активизируется инструмент для выбора цвета, который традиционно называется пипеткой. Щелчок пипеткой на клеточке палитры или по любому цветовому фрагменту (образцу документа или части интерфейса) делает данный цвет фоновым. Выбрать цвет можно только в окне программы и в ее палитрах.</li> 
<li>Text (Текст). Раздел устанавливает цвет шрифта по умолчанию. Лю бой введенный текст окрашивается в выбранный в данном поле цвет</li> 
<li>Links (Ссылки). В этом разделе задается цвет текстовых ссылок и цвет рамки вокруг графических ссылок.</li> 
<li>Visited Links (Просмотренные ссылки). Устанавливается цвет, которым помечаются просмотренные ссылки.</li> 
<li>Active Links (Активные ссылки). Определяет цвет активных ссылок, который появляется на короткое время после щелчка на данной ссылке. Некоторые программы просмотра игнорируют этот параметр.</li> 
 
<li>Left Margin (Левое поле). Задает размер левого поля страницы в пикселах. Этот параметр является атрибутом дескриптора <body> и обрабатывается только броузером Internet Explorer, Его вечный визави Netscape Navigator игнорирует данную настройку.</li> 
<li>Top Margin (Верхнее поле). Задает размер верхнего поля страницы в пикселах. Это число становится атрибутом дескриптора <body> и действует только для программы Internet Explorer.</li> 
<li>argin Width (Ширина полей). Устанавливает ширину полей страницы. Единицей измерения служат пикселы. Параметр обрабатывается только программой Netscape Navigator.</li> 
<li>Margin Height (Высота полей). Задается высота полей страницы в пикселах. Параметр действует только для программы Netscape Navigator — броузер Internet Explorer его игнорирует.</li> 
<li>Document Encoding (Кодировка документа). Очень важный параметр для документов, создаваемых на русском языке. От его выбора зависит возможность представления символов кириллицы и вообще диапазон отображаемых символов. Все доступные программе кодировки сведены в список, в котором только четыре поддерживают русские буквы. Это ISO-8859-5, MacCyrillic, KOI8-R и Windows-1251. Чтобы изменить шрифты, выбранные программой для поддержки установленной кодировки, надо открыть окно основных настроек программы Dreamweaver (CTRL+U) и в разделе Font/Encoding (Шрифт/Кодировка) выбрать пропорциональный и моноширинный шрифты, а также шрифт для использования в Инспекторе кода.</li> 
<li>Reload (Повторная загрузка). Кнопка выполняет те же функции, которые в растровых графических редакторах возлагаются на команду Revert (Восстановить). Она возвращает последнюю сохраненную версию документа.</li> 
<li>Tracing Image (Трафаретное изображение). В данном разделе указывается изображение, которое служит образцом при работе над дизайном страницы. Это своеобразная калька, которая помогает трассировать графические элементы страницы, разметить ее планировку. Указанное изображение не появляется в окончательной версии документа.</li> 
<li>Image Transparency (Прозрачность изображения). При помощи этого движка можно настроить прозрачность картинки, выбранной для трассировки.</li> <li>Document Folder (Папка документа). Это информационное поле отображает папку, в которой сохранен данный документ.</li> 
<li>Site Folder (Корневая папка узла). Информационное поле. Показывает полный путь к корневой папке Web-узла, которому принадлежит текущий документ.</li> 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Параметры документа">Программа Dreamweaver не отображает поля в окне документа. Чтобы увидеть истинную планировку страницы вместе с полями, надо просмотреть ее в программе просмотра. Напомним, что загрузить активную страницу в броузер можно по команде File > Preview in Browser (Файл > Просмотр в броузере). 
<h1>Поиск кода</h1>
Программа располагает возможностью выполнять поиск в области гипертекстовой разметки одного документа или нескольких документов сайта. 
Перечислим все доступные режимы. 
<li>Поиск по всей гипертекстовой разметке. В этом режиме код HTML документа обрабатывается как обычный текст. В область поиска входит вся разметка, вместе с дескрипторами, атрибутами, сценариями и пр.</li> 
<li>Поиск текста, входящего в область действия заданного дескриптора.</li> 
<li>Поиск заданных дескрипторов или их атрибутов.</li> 
Поиск в Инспекторе кода 
Этот режим поиска значительно расширяет возможности пользователя по обработке документа, поскольку Инспектор кода открывает доступ к таким атрибутам разметки, которые не видны в окне редактирования. В окне инспектора можно искать и изменять как содержание документа, так и его коды HTML. 
Поиск в Инспекторе кода выполняется следующим образом. 
<li>Дайте команду Edit > Find and Replace (Правка > Найти и заменить).</li> 
<li>В списке Find In (Где искать) выберите область поиска.</li> 
<li>В списке Search For (Искать) выберите пункт Source Code (Код разметки)</li> 
<li>Введите критерий поиска. Это может быть любая последовательность символов — комбинация текста, дескрипторов, атрибутов и программных кодов.</li> 
<li>Уточните режим поиска и запустите процедуру щелчком на кнопке Find Next (Найти далее) или Find All (Найти все).</li> 
Программа откроет Инспектор кода и все найденные вхождения поискового образца будет выбирать в этом окне. 
Расширенный поиск 
Режим расширенного поиска — это мощное средство, которое дает возможность с максимальной точностью задавать области и критерии поиска. 
Запуск этой процедуры выполняется следующим оазом. 
<li>Дайте команду Edit > Find and Replace (Правка > Найти и заменить) из окна документа или Диспетчера узРзла.</li> 
<li>В списке Find In (Где искать) уточните область поиска.</li> 
<li>В списке Search For (Искать) выбрать пункт Text (Advanced) (Расширенный поиск). Диалоговое окно с дополнительными параметрами расширенного поиска показано на рис. 4.6.</li> 
<li>Введите поисковый образец и выберите значения дополнительных параметров.</li> 
 
<li>Уточните режимы поиска и запустите процедуру щелчком на кнопке Find Next (Найти далее) или Find All (Найти все).</li> 
По последовательности действий эта процедура ничем не отличается от рассмотренных ранее. Все своеобразие расширенного режима заключается в возможности подключения нескольких фильтров, которые ограничивают поисковое пространство и способны существенно повысить эффективность команды. 
<img src="image/4-6.jpg" alt="Поиск кода"> 
Puc. 4.6. Расширенный поиск 
Фильтрация — это задание области действия команды с учетом выбранных пользователем дескрипторов и атрибутов. При помощи кнопки со знаком + можно добавлять новые фильтры, кнопка со знаком - служит для их удаления. Фильтрация требует задания специфических параметров, для ввода которых следует воспользоваться дополнительными ассоциированными полями и списками. Их программа выводит с правой стороны от основного поля. 
Рассмотрим типы фильтров. 
<li>Inside Tag (Внутри дескриптора). Ограничивает область поиска заданными дескрипторами. Сам дескриптор следует выбрать из списка, расположенного справа от поля.</li> 
<li>Not Inside Tag (Вне дескриптора). Запрещает поиск в области действия выбранных дескрипторов. Тип дискриминируемого кода разметки выбирается из списка, который находится справа от поля.</li> 
<li>With Attribute (С атрибутом). Сводит область поиска к содержимому дескрипторов с заданными атрибутами. Тип атрибута можно задать в списке справа, содержимое которого зависит от выбранною рапсе дескриптора. Здесь же можно уточнить значение атрибута. Для этого в ассоциированном списке надо выбрать тип отношения: = (равно),< (меньше), > (больше), != (не равно) и задать пороговое значение в самом правом поле этой строки.</li> 
<li>Without Attribute (Без атрибута). Исключает из области поиска содержимое выбранных дескрипторов с заданными атрибутами. Выбор и уточнение последних выполняется так же, как описано в предыдущем пункте.</li> 
<li>Containing (Содержащий). Ограничивает область поиска выбранными дескрипторами с заданным текстовым содержимым или кодами разметки. Чтобы задать текст внутри дескриптора, требуется выбрать в ассоциированном списке пункт Text (Текст) и ввести нужную строку. Для уточнения вложенных кодов требуется выбрать пункт Tag (Дескриптор) в том же списке и нужный дескриптор из ассоциированного списка.</li> 
 
<li>Not Containing (He содержащий). Этот фильтр по технике настройки ничем не отличается от предыдущего, только он не прибавляет, а вычитает заданную область из общего поискового просанства.</li> 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Поиск кода">Если при помощи кнопки со знаком + добавить в диалоговое окно расширенного поиска достаточно много новых фильтров, то управляющие кнопки выйдут за пределы видимой области окна. Чтобы очистить диалоговое окно, надо в поле Search For (Искать) выбрать пункт Text (Текст) а затем опять Text (Advanced) (Расширенный поиск). Такое переключение вызовет “обнуление” списка дополнительных фильтров. 
Поиск дескрипторов 
В этом режиме пользователь может выполнить поиск определенного дескриптора, отдельно или вместе с заданным атрибутом. Эти параметры предназначены для ограничения области поиска; они представляют собой критерии, применимые к документу, сайту или содержимому выбранной папки. Тех же результатов можно добиться, работая с Инспектором кода режиме обычного поиска, но многие конструкции языка HTML неудобны для ввода из-за своей длины и многочисленности параметров. Не всякий искушенный Web-дизайнер помнит наизусть несколько сотен ключевых слов, вошедших в стандарт международного консорциума W3C. Их число может существенно возрасти при использовании заказных и нестандартных дескрипторов (например ColdFusion). 
Поиск дескрипторов выполняется следующим образом. 
<li>Дайте команду File > Find and Replace (Файл > Найти и заменить) в окне редактирования или Диспетчера узла.</li> 
<li>Задайте область поиска в списке Find In (Где искать).</li> 
<li>Выберите пункт Tag (Дескриптор) в списке Search For (Искать).</li> 
<li>Выберите дескриптор и его атрибуты.</li> 
<li>Уточните режимы поиска, выставив требуемые значения флажков Match CaseIgnore Whitespace Differences (Игнорировать количество пробелов), Use Regular Expressions (Использовать метасимволы).</li> 
<li>Запустите процедуру поиска щелчком на кнопке Find Next (Найти далее) или Find All (Найти все).</li> 
Выбор дескрипторов, задание атрибутов и заполнение дополнительных полей, которые открывает программа в этом режиме, выполняются так же, как при расширенном поиске (см. раздел “Расширенный поиск”). Для добавления и удаления атрибутов используются клавиши со знаками + и -. <img src="image/4-7.jpg" alt="Поиск кода"> 
Рис. 4.7. Поиск дескрипторов 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Поиск кода">Вместо утомительного подчас пролистывания длинных списков дескрипторов и атрибутов можно воспользоваться следующим приемом. Откройте список и начните ввод первых букв названия. Программа перейдет в ту часть упорядоченного по алфавиту списка, который начинается с указанных символов. 
<h1>Поиск с использованием регулярных выражений</h1>
Этот режим поиска предоставляет пользователю самые большие возможности для составления сложных критериев, которые способны учитывать особенности расположения символов и структуру документа. Регулярные выражения представляют собой шаблоны, которые могут принимать символьные или строковые значения, обобщая содержимое документа. Многие операционные системы и программы, обрабатывающие большие информационные массивы, располагают подобными средствами. Регулярные выражения, которые предлагает пакет Dreamweaver, по синтаксису и выразительным возможностям близки к аналогичным средствам операционной системы UNIX. 
Для работы с регулярными выражениями требуется включить флажок Usе Regular Expression (Использовать регулярные выражения) в диалоговом окне по иска или замены. 
Групповые символы 
Групповые символы (wildcards) - это простейший тип регулярных выражений. Они служат для обозначения местоположения одиночных символов различных видов и типов. В таблице 4.1 представлеРены все групповые символы программы. 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Поиск с использованием регулярных выражений">Некоторые специальные символы в поисковых образцах могут использоваться двояко: как конструктивные элементы регулярных выражений или текстуально. В первом случае они способны принимать различные значения, во втором — представляют только самих себя. 
Чтобы программа поиска интерпретировала спецсимволы как литеры, а не как регулярные подвыражения, их следует записывать после знака обратной косой черты, например \* или \\. 
 
Символьные позиции и повторения 
С помощью регулярных выражений можно ограничить область поиска определенными позициями в строке или слове. Кроме того, это средство дает возможность формулировать поисковые критерии для нахождения повторяющихся последовательностей символов. Сочетание этих режимов значительно увеличивает и потенциал команды Find and Replace (Найти и заменить). 
Таблица 4.1. Групповые символы 
<table border=1> 
<tr> <td>Групповой символ<td>
<td>Значение<td>
<td>Пример<td>
</tr>
<tr> <td>(точка) 
<td>
<td>Любой одиночный символ, исключая символ перевода строки<td>
<td>Поисковый образец w.d будет соответствовать wide, но не world<td>
</tr>
<tr> <td> \w 
<td>
<td>Любой буквенно-цифровой символ, включая и символ подчеркивания. В эту группу входят прописные строчные символы латиницы, цифры и символ подчеркивания _ (underscore)<td>
<td>Выражение sm\wl отвечает словам smile и small 
<td>
</tr>
<tr> <td>\W 
<td>
<td>Любой не алфавитный символ 
<td>
<td>Так, адрес электронной почты shark@mail.ru можно найти по запросу shark\Wmail.ru<td>
</tr>
<tr> <td>\d 
<td>
<td>Любая цифра<td>
<td>Flash\d соответствует всем версиям программы Flash<td>
</tr>
<tr> <td>\D 
<td>
<td>Любой символ, не являющийся цифрой 
<td>
<td>Образец Flash\D версий программы обозначать не может, но зато подходит под слово Flashing или Flashgun<td>
</tr>
<tr> <td>\s 
<td>
<td>Символ пробела или его I заменители: табулятор, прогон страницы, прогон строки<td>
<td>Выражение \smedia отвечает слову media, но не названию фирмы Macromedia 
<td>
</tr>
<tr> <td>\S 
<td>
<td>Любой символ, кроме пробела и его заменителей<td>
<td>Выражение \Smedia годится как образец для слова Macromedia, но не соответствует media<td>
</tr>
<tr> <td>\t 
<td>
<td>Любой одиночный символ табуляции<td>
<td> 
<td>
</tr>
<tr> <td>\f 
 
<td>
<td>Символ прогона 
страницы<td>
<td> 
<td>
</tr>
<tr> <td>\n 
<td>
<td>Символ прогона строки<td>
<td> 
<td>
</tr>
<tr> <td>\r 
<td>
<td>Символ возврата каретки<td>
<td> 
<td>
</tr>
</table><
 
<h1>Поиск текста</h1>
Поиск текстового образца в текущем документе или по всему узлу почти не имеет отличий от привычной процедуры поиска в текстовых редактоpax. Критерий поиска вводится в поле, которое расположено с правой стороны от списка Search For (Искать). 
 Пошаговый поиск запускается щелчком на кнопке Find Next (Найти далее). Найденные вхождения поискового образца выбираются, и пользователь может внести в окно документа все необходимые коррективы. Если поиск ведется во всем сайте или в выбранной папке, то программа откроет каждый документ, содержащий поисковый образец, в отдельном окне. 
 Общий поиск выполняется по команде Find All (Найти все). После просмотра заданной области программа выводит итоговую сводку в нижней части диалогового окна Find and Replace (Найти и заменить). Чтобы перейти к выбранному документу, достаточно дважды щелкнуть по его имени в этой части окна. 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Поиск текста">Если перед вызовом команды выбрать текст в окне документа, то он автоматически используется в качестве критерия. Это соглашение работает только при поиске в пределах текущего документа. Следует помнить о том, что поисковый образец копируется из окна Инспектора кода, а представления строчек в окне редактирования и в Инспекторе кода могут немного отличаться. 
Однажды введенный поисковый образец сохраняется в поле диалогового окна до тех пор, пока не введен другой критерий. Чтобы выполнить повторный поиск с прежними параметрами, следует воспользоваться командой File > Find Next (Файл > Найти далее) или нажать клавишу F3. 
<h1>Работа с цветом</h1>
В программе Dreamweaver используется простая и весьма экономная техника работы с цветом. Необходимость в изменении цветовой составляющей возникает в разных ситуациях — может меняться цвет фона, ссылок, текста, таблицы или отдельных ее ячеек и пр. 
 Во всех случаях, когда параметр документа допускает цветовую настройку, программа выводит два стандартных элемента управления: прямоугольник с образцом текущего цвета и поле, в котором показаны числовое значение цвета в шестнадцатеричной системе счисления. Например, на рис. 4.1 такими параметрами являются Background (Фон), Text (Текст) и Links (Ссылки). 
Новый цвет можно задать при помощи цветовых координат, которые просто вводятся в соответствующее поле диалогового окна. Однако этот способ слишком обязывающий: он требует от пользователя знания таблицы кодов цвета или обращения к справочникам. 
Если щелкнуть мышкой на прямоугольнике с образцом цвета, то появится палитра цветов (рис. 4.2) и специальный инструмент для выбора цвета пипетка. Этот инструмент разрешает копировать цвет из любой области экрана, даже из других приложений. Для этого достаточно просто щелкнуть в нужной точке Рабочего стола. Это стандартная техника работы с пипеткой — так этот инструмент работает в большинстве графических программ. Щелчок вне пределов окна Dreamweaver снимает активность с программы и может вывести на передний план Рабочего стола другое приложение. 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Работа с цветом">Чтобы при работе с пипеткой сохранить активность программы, надо выполнять выбор цвета при нажатой левой кнопке мыши. Ее можно отпустить после получения нужного образца цвета. 
<img src="image/4-2.jpg" alt="Работа с цветом"> 
Рис. 4.2. Цветовая палитра 
 Рассмотрим дополнительные возможности палитры. 
<li>Перечеркнутая кнопка в верхнем ряду устанавливает цвет, принятый по умолчанию.</li> 
<li>Кнопка, на которой изображен цветовой круг, служит для вызова специального диалогового окна. С его помощью пользователь может синтезировать новый цвет.</li> 
<li>Кнопка в форме треуРугольника служит для вызова дополнительного меню. В нем объединены команды, меняющие исходную палитру. Пункты Color Cubes (Цветовые кубики) и Continuous Tone (Непрерывная шкала) выбирают безопасную палитру Web, команды Windows OS и Mac OS выводят системные палитры, команда Grayscale (Тона серого) — палитру в градациях серого;</li> 
<li>Если включить флажок Snap to Web Safe (Привязка к безопасной палитре), то все нестандартные цвета автоматически заменяются близкими тонами из безопасной палитры.</li> 
<h1>Раздел заголовков документа</h1>
Разделом заголовков принято называть часть кода, ограниченную дескриптором <head>
<link rel="canonical" href="https://www.e-lave.ru//chapter.htm"/> и его завершающей частью </head>. Этот фрагмент разметки не является обязательным, но его включение в документ считается хорошим стилем и в большинстве случаев оправдано. Заголовок хранит разнообразную служебную информацию, облегчающую программам просмотра и серверам обработку данного документа. Дескрипторы заголовочного раздела выполняют самые разнообразные функции, в частности: 
<li>дают название документу и хранят его краткое описание;</li> 
<li>определяют отношение между разными страницами;</li> 
<li>хранят перечень ключевых слов;</li> 
<li>указывают имя автора страницы;</li> 
<li>определяют вид кодировки и тип документа и многое другое. </li> 
 Работа с дескрипторами раздела заголовков требует знания форматов записи его синтаксических конструкций и правил программной обработки Подробная информация такого рода приводится в монографиях, посвященных HTML и программированию в WWW. Пользователи, владеющие английским языком, могут обратиться к превосходному интерактивному справочнику, внедренному в оболочку программы. Напомним, что для вызова справки достаточно щелкнуть на кнопке Reference (Руководство), расположенной в правой части панели инструментов. 
 В состав программы включено несколько команд для вставки самых востребованных дескрипторов раздела заголовков. Работа с ними не требует знания синтаксиса HTML и ориентирована на широкий круг пользователей. От пользователя требуется определить содержательную часть кодов, а их оформление по канонам языка и размещение в заголовке документа программа берет на себя. Перечислим эти дескрипторы и атрибуты. 
<li>Meta (Мета). Служит для вставки глобальной информации, относящейся ко всему документу. Потребителями этих сведении могут быть как сервер, обрабатывающий страницу, так и клиент, инициировавший ее загрузку. Допускается размещать несколько дескрипторов этого типа в пределах одного заголовка.</li> 
<li>Keywords (Ключевые слова). Используется для ввода ключевых слов. Эта информация учитывается поисковыми машинами при реферировании и индексировании материалов гипертекстового документа.</li> <li>Description (Описание). Содержит описание данного сайта или страницы. Разрешает ввести в раздел заголовков любой текст, который, по мнению автора, дает полноценное представление о тематике, направленности и материалах узла.</li> 
 
<li>Refresh (Обновление). Запускает команду, которая выполняет перезагрузку данной страницы или переход на другую страницу по указанному адресу.</li> 
<li>Base (База). Устанавливает полный базовый адрес URL узла. Это позволяет свободно пользоваться относительными адресами при указании связей между документами узла. При переносе узла в другое место относительная адресация не нарушается, а меняется только постоянная часть — информация, заданная в элементе Base (База).</li> 
<li>Link (Связь). Задает связь данного документа с внешними объектами: гипертекстовыми документами, таблицами стилей и др.</li> 
 Для вставки дескрипторов в раздел заголовков требуется выполнить одну из команд раздела вида Insert > Head Tags (Вставка > Дескрипторы заголовка). Другая возможность - это работа с палитрой объектов. 
 <li>Откройте палитру объектов командой Window > Objects (Окно > Объекты) или при помощи комбинации клавиш CTRL+F2.</li> 
<li>Щелчком на верхней треугольной кнопке откройте меню и выберите в нем раздел Head (Заголовок).</li> 
<li>Щелкните на кнопке, отвечающей за вставку нужного дескриптора.</li> 
Каждый элемент этой группы имеет собственный набор параметров, для задания которых надо заполнить поля специальных диалоговых окон. 
Description (Описание). Этот атрибут дескриптора <meta> имеет очень простые правила оформления. Его диалоговое окно состоит из одного текстового поля, в которое надо ввести содержательное описание документа. Дескриптор по требует соблюдения каких-либо синтаксических соглашений или формальных правил. Следует руководствоваться лишь здравым смыслом и правилами грамматики естественного языка. Например, он может выглядеть следующим образом: 
<meta name="description" contenf="Эта страница посвящена описанию самого популярного редактора HTML Dreamweaver"> 
Keywords (Ключевые слова). Является атрибутом дескриптора <meta>. Работа с элементом Keywords (Ключевые слова) немногим сложнее. После вывода диалогового окна на экран от пользователя требуется набрать в единственном поле окна список ключевых слов, разделенных запятыми. В результате в раздел заголовков документа вставляется дескриптор примерно следующего вида: 
 
<meta name-"keywords" content-"HTML, WWW, lnternet"> 
Refresh (Обновление). Представляет собой атрибут дескриптора <meta>. Этот атрибут требует ввода двух параметров. 
<li>Delay (Задержка). Длина в секундах временного интервала перед выполнением команды перехода или повторной загрузки страницы.</li> 
<li>Action (Действие). Раздел служит для выбора команды. Предлагаются следующие альтернативы.</li> 
 <li>Go to URL (Перейти по адресу). Команда перехода к другой странице или документу. В правое поле надо просто ввести адрес страницы или разыскать ее при помощи команды Browse (Обзор).</li> 
<li>Refresh This Document (Обновить данный документ). Команда повторной загрузки текущей страницы.</li> 
Вот возможный вид дескриптора: 
<meta http-equiv="refresh" content="4;URL=http://www.aha.ru"> 
Он предписывает после задержки в 4 секунды перейти по адресу http:// www.aha.ru. 
<li>Base (База). Является самостоятельным дескриптором. Для полного задания требуется ввод двух параметров.</li> 
<li>Href (Ссылка). Хранит полный адрес данного гипертекстового документа. Его можно ввести вручную или определить местоположение при помощи стандартной команды Browse (Обзор).</li> 
<li>Target (Назначение). Задает способ вывода на экран всех связанных документов.</li> 
 Пусть, для примера, базовый адрес имеет вид http://www.aha.ru/~center/, а внутри документа есть ссылка на рисунок image/backgrnd.gif. Тогда программы просмотра будут искать изображение по его полному адресу, который теперь выглядит как http://www.aha.ru/~center/image/backgrnd.gif. 
<li>Link (Ссылка). Этот дескриптор описывает связь между текущим документом и внешними файлами. Часто используется для ссылок на внешние таблицы стилей. Приведем атрибуты, которые требуется задать для этого дескриптора.</li> 
<li>Href (Ссылка). Указывает адрес документа.</li> 
<li>ID (Идентификатор). Задает уникальный идентификатор ссылки.</li> 
<li>Title (Заголовок). Описание вида связи.</li> 
<li>Rel (Отношение). Задает тип связи между текущим документом и целевым, то есть документом, который является источником ссылки.</li> <li>Rev (Обратное отношение). Задает обратное отношение — между целевым и текущим документами.</li> 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Раздел заголовков документа">Для удобства ввода описания документов и списки ключевых слов можно разрывать символом конца абзаца. Следует помнить, что интерпретаторы языка HTML игнорируют подобное форматирование; строка с принудительными разрывами будет воспринята, так же как слитная цепочка символов. 
<h1>Размерные линейки</h1>
Размерные линейки выполняют в программе функции, обычные для системы мер и эталонов в человеческой деятельности. Они позволяют оценить размеры объектов и привязать сложную композицию к единой системе координат. 
Управление размерными линейками выполняется при помощи команд специального меню. Для доступа к нему надо дать команду View > Rulers (Вид > Линейки). Перечислим пункты этого меню. 
<li>Show (Показать). Эта команда, управляющая визуализацией размерных линеек, имеет клавиатурный эквивалент — CTRL+ALT+R. Повторное ее выполнение удаляет линейки с экрана.</li> 
<li>Pixels (Пикселы), Inches (Дюймы), Centimeters (Сантиметры). Команды выбора единиц измерения.</li> 
<li>Reset Origin (Восстановить начало координат). Начало координат можно связать с любой точкой страницы. Для этого достаточно перетащить маркер в форме крестика, расположенный на пересечении линеек, в любое место документа. Выполнение данной команды возвращает точку отсчета в исходную позицию.</li> 
<h1>Сохранение поисковых образцов</h1>
Сложные поисковые процедуры часто требуют тонкой, глубокой настройки параметров диалогового окна Find and Replace (Найти и заменить). Среди всех режимов поиска своей трудоемкостью и обилием опций выделяется режим Specific Tag (Заданные дескрипторы), который дает разработчику очень широкие возможности по изменению исходного кода гипертекстового документа. Если бы каждый поисковый сеанс требовал повторного ввода многочисленных настроечных параметров, то полезность такой команды была бы спорной. Программа Dreamweaver разрешает сохранять поисковые образцы в специальном файле с расширением .DWR и загружать сохраненные образцы в поля диалогового окна Find and Replace (Найти и заменить). Процедура сохранения очень проста. 
<li>Откройте диалоговое окно Find and Replace (Найти и заменить).</li> 
<li>Создайте запрос на поиск. Для этого выберите требуемый режим и заполните все нужные поля окна.</li> 
<li>Щелкните на кнопке Save Query (Сохранить запрос). Она расположена в правой части диалогового окна и представлена значком с изображением гибкого диска.</li> 
 По умолчанию запросы сохраняются в каталоге Configurations\Queries в файле с именем, выбранным пользователем, и расширением .DWR. Для загрузки сохраненного запроса щелкните на кнопке Load Query (Загрузить запрос) и выберите файл, хранящий нужные поисковые параметры. Эта кнопка расположена левее кнопки сохранения. 
<h1>Создание, открытие и сохранение документов</h1>
Начало работы с гипертекстовыми документами в программе Dreamweaver немногим отличается от текстовых редакторов. Пользователь имеет возможность создать новый пустой документ, открыть существующий файл HTML и породить документ с непустым содержанием и форматированием на основе некоторого образца - шаблона. Кроме того, программа способна открывать файлы без гипертекстовой разметки, например простые текстовые документы или описания программ и сценариев. 
Техника открытия файлов, конечно, хорошо знакома каждому пользователю операционной системы Windows. Приведем лишь короткое описание основных команд. 
Новый документ создается “с чистого листа” следующим образом. 
<li>Дайте команду File > New (Файл > Создать) в окне документа. Команда имеет стандартный клавиатурный эквивалент — комбинацию CTRL+N</li> 
<li>Дайте команду File > New Window (Файл > Новое окно) из окна Диспетчера узла.</li> 
Обе команды влекут за собой одинаковые последствия. Откроется новое окно программы, в которое загрузится пустой документ с минимальной гипертекстовой разметкой. 
Создать документ на основе шаблона можно следующим образом. 
<li>Дайте команду File > New from Template (Файл > Создать по шаблону).</li> 
<li>Откроется диалоговое окно Select Template (Выбор шаблона), в котором следует выбрать подходящий образец. В этом окне перечислены все доступные в данный момент шаблоны документов; в начале работы над узлом этот список может быть пустым.</li> 
<li>Завершите операцию щелчком на кнопке ОК.</li> 
 Новый документ, созданный по выбранному образцу, делится на две области: заблокированную и редактируемую. Первая часть документа защищена от изменений — это общая часть нескольких документов одного сайта. В редактируемую область можно вносить любые исправления по выбору автора; она помечается по умолчанию внешней рамкой голубого цвета. Сам документ заключается в рамку желтого цвета — это служит напоминанием, что он создан на основе шаблона и может включать в себя заблокированные области. 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Создание, открытие и сохранение документов">Шаблоны документов программа Dreamweaver сохраняет в отдельной папке под названием Templates, которая размещается в корневой папке Web-узла. Все образцы получают расширение .DWT. Эта папка требует осторожного обращения: нельзя записывать в нее посторонние документы, не рекомендуется перемещать шаблоны в другое место и совершенно запрещено менять ее прописку. 
 
 Существующий документ HTML открывают следующим образом. 
<li>Дайте команду File > Open (Файл > Открыть) или воспользуйтесь клавиатурной комбинацией CTRL+0. Команда представлена в меню окна документа и Диспетчера узла.</li> 
<li>В стандартном для приложений Windows диалоговом окне Open (Открыть) найдите и выберите нужный файл.</li> 
<li>Завершите операцию щелчком на кнопке ОК или нажатием клавиши ENTER.</li> 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Создание, открытие и сохранение документов">Гипертекстовые документы (но не документы с расширением .DOC), созданные средствами текстового редактора Microsoft Word, можно открывать напрямую, как обычные файлы HTML. Этот путь связан с риском получить избыточную и ненадежную разметку документа. Поэтому лучше использовать команду Import Word HTML (Импорт кода HTML из редактора Word), которая не только открывает документ, но и выполняет очистку кода. 
Сохраняют гипертекстовый документ следующим образом. 
<li>Дайте команду File > Save (Файл > Сохранить).</li> 
<li>Выберите расположение документа в файловой системе и введите его полное имя. Эти операции выполняются в стандартном диалоговом окне сохранения и ничем не отличаются от таких же операций в других программах.</li> 
<li>Щелкните на кнопке ОК.</li> 
 По умолчанию гипертекстовые документы получают расширение .НТМ на платформе Windows и .HTML на платформе Macintosh. Это соглашение устанавливается в основных настройках программы и допускает изменение. 
 Для сохранения документа в формате простого текстового файла достаточно присвоить ему расширение .ТХТ. В результате программа Dreamweaver переходит в режим отображения кодов, а некоторые команды и ресурсы программы блокируются. В текстовом режиме разметка документа HTML не теряется; она просто перестает интерпретироваться программой. Если текстовый документ повторно сохранить с расширением .НТМ, то исходный вид гипертекста восстанавливается. 
При сохранении документов следует избегать использования специальных символов. С особенной осторожностью надо отнестись к пробельным символам, знакам пунктуации, диакритическим символам и т. п. В сети Интернет встречаются компьютеры, работающие под управлением самых разнообразных операционных систем. При передаче файлов, имена которых записываются при помощи специальных или редких символов, возможны ошибки. Программа Dreamweaver располагает еще одной обязательной командой сохранения — Save As (Сохранить как). Техника работы с ней не имеет существенных отличий от рассмотренной команды сохранения, за одним лишь исключением. При каждом обращении к команде Save As (Сохранить как (CTRL+SHIFT+S) выводится одноименное диалоговое окно, в котором можно изменить имя или прописку файла. 
<h1>Трафаретное изображение</h1>
Размерные линейки и монтажная сетка являются принадлежностью любого редактора, даже с зачаточными функциями рисования. А трафаретное изображение - это уникальная особенность данной программы. Это растровая картинка, которая располагается на заднем плане документа и служит образцом при создании сложных элементов дизайна. Пользователь может изменять прозрачность изображения, добиваясь компромисса между доступностью трафарета и видимостью основных элементов дизайна. 
В окне документа трафаретное изображение имеет приоритет над цветом фона и фоновым изображением, но в программах просмотра оно не отображается. 
Создание трафаретного изображения выполняется следующим образом. 
<li>Дайте команду View > Tracing Image > Load (Вид > Трафаретное изображение > Загрузить). Есть и другой способ — это команда Modify > Page Properties (Изменить > Свойства страницы).</li> 
<li>Появится диалоговое окно Select Image Source (Выбрать изображение), в котором следует выполнить обычную процедуру поиска файла изображения.</li> 
<li>После того как изображение найдено, программа выведет диалоговое окно Page Proprieties (Свойства страницы), в котором надо настроить прозрачность трафарета. Эту задачу решает интерактивный инструмент Image Transparency (Прозрачность изображения).</li> 
 Трафаретное изображение допускает некоторую настройку. Перечислим все возможности по его редактированию, которые предоставляет программа Dreamweaver. 
 
<li>Для изменения положения в пределах страницы надо выполнить) команду View > Tracing Image > Adjust Position (Вид > Трафаретное изображение > Изменить положение). Программа выведет простое диалоговое окно с двумя числовыми полями, в которых надо задать новые координаты трафаретного изображения. Напомним, что отсчет ведется от левого верхнего угла страницы и не меняется при перетаскивании начала координат.</li> 
<li>Трафарет можно выровнять относительно любого выбранного объекта: текста, таблицы, формы, картинки. После выравнивания совмещаются левые верхние углы трафарета и выбранного объекта. Сама команда имеет вид View > Tracing Image > Align with Selection (Вид > Трафаретное изображение > Выровнять по выбранному).</li> 
<li>Чтобы восстановить положение трафарета, надо дать команду View > Tracing Image > Reset Position (Вид > Трафаретное изображение > Восстановить положение). Эта команда совмещает левый верхний угол изображения с точкой, имеющей координаты (0,0).</li> 
<li>Для удаления трафаретного изображения достаточно вызвать диалоговое окно Page Proprieties (Свойства страницы) и стереть в нем строку, указывающую путь поиска для файла картинки.</li> 
<h1>Визуализация документа</h1>
Программа Dreamweaver располагает несколькими вспомогательными средствами, которые облегчают создание интерактивных публикаций со сложной планировкой и элементами, требующими жесткой взаимной координации. В их число входят: размерные линейки, координатная разметочная сетка и трафаретное изображение. Эти инструменты не только облегчают монтаж страниц, насыщенных таблицами и графикой, но и способны отчасти заменить программы просмотра, поскольку дают представление об истинном дизайне проекта и его привязке к абсолютной системе координат. 
<h1>Выбор объектов</h1>
В предыдущих разделах книги говорилось о различных способах и приема выбора объектов. Приведем полный перечень способов выполнения этой важной операции. 
<li>Самый простой способ выбора видимого объекта в окне документа это щелчок мышкой или протягивание указателя через данный объект.</li> 
<li>Для выбора невидимого объекта надо сначала включить отображение его значка, а затем щелкнуть на нем. Напомним, что визуализацией значков скрытых объектов управляет команда Visual Aids (Служебная разметка) и категория основных настроек Invisible Elements (Скрытые элементы).</li> 
<li>Двойной щелчок мышкой на слове выделяет его целиком.</li> 
<li>При нажатой клавише SHIFT курсорные клавиши выполняют выбор символов по горизонтали или строк по вертикали. Если при этом удерживать нажатой еще и клавишу CTRL, то можно выбирать целые слова.</li> 
<li>Команда Edit > Select All (Правка > Выбрать все) или ее клавиатурный эквивалент CTRL+A выполняет выбор всех объектов, размещенных в теле документа.</li> 
<li>Видимо, самый удобный инструмент для работы со сложным выбором — это селектор разметки. Напомним, что этот элемент управления расположен в левой части строки состояния и выглядит как обычная последовательность дескрипторов. Программа выводит все дескрипторы, окружающие точку ввода или текущий выбор. Чем ближе код к текстовому курсору, тем правее он расположен в селекторе, Программа постоянно отслеживает все изменения в документе и обновляет селектор разметки. Щелчок на имени дескриптора в селекторе выбирает все его содержимое.</li> 
<li>Работа с селектором поддержана двумя удобными клавиатурными комбинациями. Комбинация CTRL+SHIFT+< служит для выделения родительского дескриптора. Каждое ее нажатие расширяет выбор, охватывая старшие дескрипторы, расположенные левее в селекторе разметки. Для сужения области выбора — перехода к вложенным дескрипторам — надо использовать комбинацию клавиш CTRL+SHIFT+>.</li> 
<li>В самых сложных случаях, когда приходиться выделять объект в предельно запутанном фрагменте документа, может помочь работа с рас тепленным окном документа. В этом режиме программа отображает планировку страницы и ее исходный код вместе дескрипторами. По виду страницы легко приблизительно определить расположение нужного объекта и поместить в это место текстовый курсор. При помощи кодовой части окна можно уточнить позицию объекта и выполнить точный выбор.</li> 
<h1>Замена</h1>
Операция замены — это родственная поиску команда; в большинстве текстовых, гипертекстовых и графических редакторов эти команды имеют схожую технику и соседствуют в меню и диалоговых окнах. Программа Dreamweaver в этом смысле не является исключением из общего правила. В ней операции поиска и замены имеют одинаковые режимы и используют одно диалоговое окно для своей настройки, запуска и вывода результатов. 
Для управления заменой служат три элемента управления. 
<li>Replace With (Заменить на). Поле предназначено для ввода образцов замены.</li> 
<li>Replace (Заменить). Кнопка запускает команду поиска следующего вхождения поискового образца и его замены.</li> 
<li>Replace All (Заменить все). Кнопка инициирует процедуру глобального поиска и замены.</li> 
 Команда замены работает во всех режимах и областях, доступных для простого поиска. В режиме поиска дескрипторов (Specific Tag) потенциал этой команды намного превосходит все остальные ее возможности. Она позволяет пользователю внести в исходную разметку документа любые изменения — от тончайшей настройки отдельных атрибутов до масштабного перекодирования больших кодовых фрагментов. Так, с ее помощью можно: 
<li>менять или удалять дескрипторы;</li> 
<li>задавать значения атрибутов дескрипторов;</li> 
<li>удалять выбранные атрибуты;</li> 
<li>добавлять текстовое содержимое или коды разметки перед и после заданного дескриптора-контейнера.</li> 
Диалоговое окно команды замены дескрипторов показано на рис. 4.7. Кроме знакомых кнопок и полей, предназначенных для задания области поиска, выбора фильтров и управления всей процедурой, оно имеет список Action (Действие), с помощью которого выполняется основная настройка команды. 
<img src="image/4-7b.jpg" alt="Замена"> 
Puc. 4.7. Замена кодов 
Рассмотрим список возможных действий раздела Action (Действие). 
<li>Replace Tag & Content (Заменить дескриптор и содержимое). Меняет выбранный дескриптор и его содержимое на заданную в поле With (На) строчку. Последняя может включать в себя любые коды разметки языка HTML.</li> 
<li>Replace Content Only (Заменить содержимое). Меняет содержимое выбранного дескриптора на заданную строчку, в состав которой могут входить коды разметки.</li> 
 
<li>Remove Tag & Content (Удалить дескриптор и содержимое). Удаляет выбранный дескриптор и его наполнение.</li> 
<li>Strip Tag (Удалить дескриптор). Удаляет дескриптор, оставляя его содержимое неизменным.</li> 
<li>Change Tag (Изменить дескриптор). Выполняет замену дескриптора, выбранного в поле Find What (Найти), на выбранный дескриптор поля То (На).</li> 
<li>Set Attribute (Задать значение атрибута). Задает значения существующих атрибутов или вставляет новые атрибуты с выбранными пользователем значениями.</li> 
<li>Remove Attribute (Удалить атрибут). Удаляет выбранный атрибут.</li> 
<li>Add Before Start Tag (Добавить перед открывающим дескриптором). Вставляет текстовую строку перед заданным открывающим дескриптором. Строка может включать любые коды разметки.</li> 
<li>Add After End Tag (Добавить после закрывающего дескриптора). Вставляет текстовую строку (с кодами разметки или без оных) после заданного закрывающего дескриптора.</li> 
<li>Add After Start Tag (Добавить после открывающего дескриптора). Вставляет текстовую строку после выбранного открывающего дескриптора. Строка может включать любые коды разметки.</li> 
<li>Add Before End Tag (Добавить перед закрывающим дескриптором). Встав-ляет текстовую строку (с кодами разметки или без оных) после выбранного закрывающего дескриптора.</li> 
<img src="image/4-1-sozdanie-otkrytie-i-sohranenie-dokumentov_1.gif" alt="Замена">Не все перечисленные настройки команды замены дескрипторов являются универсальными. В языке HTML есть одиночные коды разметки и дескрипторы без параметров, выбор которых существенно ограничивает список доступных настроечных параметров. В таких случаях программа делает недоступными соответствующие поля и списки диалогового окна Replace (Замена). 
<h1>
Dreamweaver 4
</h1>
<h1>Абзацы</h1>
С точки зрения литературного редактора, абзацем называется подразделение текста внутри главы или раздела, обладающее относительным смысловым единством. По мнению оператора настольной издательской системы это часть текста с однородными признаками форматирования. В языке HTML абзацем называется кодовая последовательность, заключенная внутрь контейнера с открывающим дескриптором и закрывающим <\p>. При выводе на экран программа просмотра обрабатывает абзацы как логические единицы документа, пытаясь вписать их содержимое в установленные поля и размеры экрана. 
Во многих руководствах, посвященных языку гипертекстовой разметки, подчеркивается, что абзацы представляют собой средство структурирования страниц и инструмент логической разметки текста и что они не несут никакой оформительской информации. Это утверждение справедливо лишь отчасти, поскольку с каждым таким элементом связывается некоторое простое оформление. Во-первых, все абзацы начинаются с новой строки, во-вторых, перед ними программа помещает свободное пространство, высота которого равна примерно одной строке. 
Программа создает новый абзац по нажатию клавиши ENTER в режиме просмотра страницы. Вновь созданный пустой абзац в режиме просмотра кодов имеет вид   . Символ внутри дескриптора означает неразрывный пробел. Он нужен для того, чтобы сделать новый абзац видимым. Если удалить его, то макет страницы не претерпит никаких видимых изменений. Если после создания нового абзаца продолжить ввод, то неразрывный пробел автоматически заменяется введенным текстом. 
При работе с текстовыми редакторами очень популярен прием, когда для разгона строк по вертикали используют несколько символов конца абзаца. По соглашениям, принятым в языке HTML, последовательность дескрипторов вида <\p><\p>... не дает дополнительного пространства и рассматривается как один абзац. 
<img src="../chapter%204/prim.gif" alt="Абзацы">В ранних версиях языка HTML дескриптор по определению был одиночным. Начиная с версии 3.2, в описание языка введен факультативный закрывающий дескриптор абзаца <\p>. Его использование не обязательно, поскольку для правильного разбора содержимого страницы достаточно выбрать только начало абзаца. Для совместимости с будущими версиями броузеров и языковых стандартов рекомендуется ставить закрывающие дескрипторы в конце абзацев. Это, кроме того, улучшает читаемость листинга. 
 
 В обычных текстовых редакторах сдвинуть строку абзаца по горизонтали можно многими разными способами. Чаще всего для этого используют несколько пробелов (порочный способ) или табуляцию (хороший прием). Ни один из этих приемов не работает в программе Dreamweaver. Программа запрещает ставить серийные пробелы, а по нажатию табулятора в точку вставки помещается обычный пробельный символ. 
 Лучшее решение этой задачи дает применение каскадных листов стилей. В качестве неплохого паллиатива можно использовать символ неразрывного пробела. Для вставки этой литеры следует воспользоваться командой Insert > Special Characters > Non-Breaking Space (Вставка > Специальные символы > Неразрывный пробел) или клавиатурным сочетанием CTRL+SHIFT+ПРОБЕЛ. 
<img src="../chapter%204/prim.gif" alt="Абзацы">Если в документе используется кодировка, отличная от установленной по умолчанию Western (Latin1), то правильное отображение символов неразрывного пробела возможно не во всех броузерах. 
Дескриптор абзаца имеет единственный атрибут — это параметр align, который отвечает за выравнивание и принимает три значения: left (по левому краю), right (по правому краю), center (по центру). 
<h1>Горизонтальные линейки</h1>
Горизонтальные линейки являются одним из способов структурирования гипертекстовых документов. Это эффективное средство в руках дизайнера при умелом и дозированном применении. Они разрушают монотонность страниц, облегчают чтение длинных текстов, выделяют однородные по положению или смыслу фрагменты. 
В языке HTML за вставку горизонтальной линейки отвечает одиночный дескриптор <hr>. До и после горизонтальной линейки автоматически создается по одной пустой строке. Линейка занимает всю ширину окна броузера и при изменении его размеров меняет свои габариты. Дескриптор <hr> помещенный внутрь текстовой строки, разрывает ее в месте вставки. 
Процедура размещения горизонтальной линии состоит из двух простых шагов. 
<li>Поместите текстовый курсор в нужное место страницы.</li> 
<li>Дайте команду Insert > Horizontal Rule (Вставка > Горизонтальная линейка) Кроме того, команду можно выполнить при помощи палитры Objects (Объекты) (CTRL+F2). Соответствующая кнопка находится в разделе Common (Общие), в середине левого столбца.</li> 
Несмотря на внешнюю простоту, горизонтальные линии имеют несколько настроечных параметров. Чтобы получить к ним доступ, надо выбрать этот объект и вывести на экран палитру Property Inspector (Инспектор свойств) (CTRL+F3). Перечислим все атрибуты линеек. 
<li>Align (Выравнивание). Этот раскрывающийся список объединяет варианты выравнивания линейки по вертикали. По умолчанию этот атрибут принимает значение Center (По центру).</li> 
<li>Shading (Тень). Этот флажок управляет отображением тени. Линейка с тенью приобретает рельефность и выглядит намного привлекательнее.</li> 
<li>Horizontal Rule (Горизонтальная линейка). Эта панель содержит два числовых поля и одно текстовое. Числовые поля служат для ввода горизонтального (W) и вертикального (Н) размера линейки. В текстовое поле можно ввести уникальный идентификатор объекта. Многие служебные программы и приложения используют подобные имена для обращения к объектам. Единицами измерения габаритов могут быть пикселы или проценты от ширины окна броузера. Кроме этих стандартных единиц измерения разрешается использовать несколько нестандартных, например сантиметры (cm), миллиметры (mm), пункты (pt), дюймы (in) и пики (рс). После завершения ввода значений программа Dream weaver автоматически преобразует нестандартные единицы измерения в единицы, принятые по умолчанию, — экранные пикселы.</li> 
<img src="image/markirovannye-spiski_1.gif" alt="Горизонтальные линейки">В традиционной полиграфии как элемент оформления книжных и журнальных страниц достаточно часто встречаются вертикальные линейки. Можно предположить, что и в Web-дизайне эти объекты могли бы найти применение. Однако вставить в документ вертикальную линию при помощи дескрипторов нельзя. Язык HTML не поддерживает прямую работу с подобными объектами. Существует множество обходных путей и косвенных приемов, решающих эту задачу, например использование специальных изображений или ложных таблиц. 
<h1>Источники текста</h1>
Хотя программа Dreamweaver и представляет собой гипертекстовый редактор, приставка “гипер” не означает приращения возможностей по сравнению со специализированными программными средствами обработки текста. Программа располагает самым обычным арсеналом возможностей для работы с символьной информацией: ввод, удаление и поиск символов, проверка орфографии (для документов на английском языке) и форматирование. 
 Текстовый массив может быть просто введен с клавиатуры. Большие фрагменты удобнее создавать при помощи текстовых редакторов, а затем импортировать в систему Dreamweaver. Такие обмены можно выполнять посредством промежуточных файлов-посредников или помощи буфера обмена. 
 Управляют работой буфера обмена стандартные для платформы Windows команды: 
<li>Edit > Cut (Правка > Вырезать) или CTRL+X;</li> 
<li>Edit > Copy (Правка > Копировать) или CTRL+C;</li> 
<li>Edit > Paste (Правка > Вставить) или CTRL+V.</li> 
При передаче через буфер обмена не сохраняется форматирование текста, заданное в родительской программе. Программа Dreamweaver сохраняет концы строчек, кроме того, все символы конца абзаца заменяются спецсимволами конца строки. Последовательности пробелов, которые так любят пользователи программы Word, отбрасываются и представляются одним пробельным символом.. 
 Простые текстовые файлы с расширением .ТХТ можно открывать в программе при помощи штатной команды File > Open (Файл > Открыть). При этом некоторые ресурсы Dreamweaver, предназначенные для работы с кодами разметки, будут недоступны. Блокировка снимается после сохранения текста в любом гипертекстовом формате, например в файле с расширением .НТМ. Стоит упомянуть и о перетаскивании. Значки файлов, текстовых и гипертекстовых, можно просто перетаскивать в окно программы. Эта техника не дает никаких дополнительных преимуществ или возможностей; она представляет собой вариант команды открытия файла и передачи через буфер обмена. 
<h1>Маркированные списки</h1>
Маркированными, или неупорядоченными, называются списки с произвольной последовательностью перечисления разделов. Пункты таких списков обычно помечаются специальными символами-маркерами. По умолчанию это кружок небольшого диаметра. Как и нумерованные списки, эти объекты обеспечивают автоматический перевод строк и надлежащий отступ для каждого раздела и допускают иерархическое вложение списков. 
 Внешними дескрипторами для маркированных списков служит пара и . Пункты начинаются с дескриптора <li>, который, как и ранее, является контейнером, но допускает сокращенное указание без закрывающего тега. Следующий короткий листинг иллюстрирует технологию построения маркированных списков. 
 
<li>Темпера </li> 
 <li>Акварель</li> 
 <li>Гуашь</li> 
 <li>Пастель</li> 
 
При создании списков в кодовом режиме пункты списка рекомендуется сдвигать вправо при помощи пробелов. Такая разметка игнорируется программами просмотра, но намного улучшает читаемость листинга. Броузеры последних версий поддерживают очень важный атрибут маркированных списков, который управляет видом маркера. Это атрибут type, он 
<img src="image/5-2.jpg" alt="Маркированные списки"> 
5.2. Представление маркированною списка 
может принимать следующие значения: circle (круг), disk (диск), square (квадрат). 
Процедура создания неупорядоченных списков следующая. 
<li>Выберите несколько смежных структурных блоков документа.</li> 
<li>Дайте команду Text > List > Unordered List (Текст > Список > Неупорядоченi ный список).</li> 
 Эта часто используемая команда представлена кнопкой в палитре Properti Inspector (Инспектор свойств) (CTRL+F3). 
Скудный выбор из нескольких простых маркеров, который предлагает стандарт языка HTML, конечно, не может удовлетворить потребности дизайнеров. Эти кружочки и квадратики, выдержанные в гамме школьной доски, способны испортить впечатление от содержательной страницы с качественным художественным исполнением. Какими же возможностями для работы со специальными маркерами располагает программа? 
 Существует два основных способа вставить картинку небольшого размера в качестве специального маркера. Во-первых, ее можно поместить непосредственно в текст, используя технику вставки рисунков. Эта важная для < Weдизайна тема подробно рассматривается в соответствующем разделе книги. Другой способ требует размещения пункта списка, вместе с помечающим его значком, внутри вспомогательной таблицы. Она играет роль своеобразного каркаса и удерживает текст и его маркер на одной строке. 
<img src="image/markirovannye-spiski_1.gif" alt="Маркированные списки">Чтобы отделить маркер от текста, следует использовать один или несколько неразрывных пробелов (CTRL+SHIFT+ПРОБЕЛ). 
<h1>Нумерованные списки</h1>
Нумерованные списки, которые иногда называют упорядоченными, представляют собой последовательность пунктов или раздел он, каждый из которых начинается с порядкового номера. В языке HTML такие образования создают при помощи дескрипторов-контейнеров (от ordered list, что переводится как упорядоченный список). Это внешние операторные скобки списка; каждый отдельный его пункт начинается тегом <li> (от list item, что можно перевести как элемент списка). Этот дескриптор, по сути дела, является контейнером, но в силу избыточности списочной разметки замыкающий дескриптор </li> допускается не использовать. В стандарте языка не оговариваются никакие ограничения на емкость списка. Внутри списков можно применять дескрипторы физической и логической разметки. Речь об этих инструментах форматирования гипертекстовых документов пойдет в следующих разделах книги. Далее приведен пример листинга упорядоченного списка, в котором перечислены названия некоторых визуальных редакторов гипертекстовых документов. 
 
<li>Dreamweaver</li> 
<li>Homesite</li> 
<li>HotMetal Pro</li> 
<li>FrontPage</li> 
 
Разрешается образовывать на основе упорядоченных списков сложные иерархии, где разделами списка высшего уровня служат списки нижнего уровня. 
Нумерованный список создается следующим образом. 
<li>Выберите несколько структурных блоков документа. Таковыми могут быть абзацы, любые стандартные заголовки, предварительно отформатированный текст, а также разделы других списков.</li> 
<img src="image/5-1.jpg" alt="Нумерованные списки"> 
Рис. 5.1. Представление упорядоченного списка 
<li>Дайте команду Text > List > Ordered List (Текст > Список > Нумерованный список).</li> 
 Эта команда представлена и в Палитре свойств, которая вызывается клавиатурной комбинацией CTRL+F3. 
<h1>Переход на новую строку</h1>
Переход на новую строку — это одно из средств структурирования текста. В языке HTML эту задачу решает одиночный дескриптор . Получив такое предписание, программа обрывает текущую строчку и все объекты, стоящие после тега , выводит с новой строки. 
В отличие от дескриптора абзаца тег обрыва строки не добавляет пустую строку перед собой и не требует замыкания. Его применение позволяет получить расстояние между строками, примерно равное одному интервалу в типографских единицах измерения. Два последовательных перехода ни новую строку дают большее свободное пространство, чем вставка одного дескриптора <р>. 
<img src="../chapter%204/prim.gif" alt="Переход на новую строку">Некоторые программы просмотра игнорируют несколько стоящих рядом дескрипторов вида . Поэтому следует с осторожностью использовать это средство для вставки в документ пустых строк. 
Длина строки, отображаемой на экране, зависит не только от расстановки на странице дескрипторов . Существенное влияние оказывают и размеры окна программы просмотра. Если поместить дескриптор перехода на новую строку в конец очень длинной строки, то при отображении в окне небольшого размера броузер все равно разобьет ее на несколько частей. Чем короче фрагменты между такими дескрипторами, тем выше вероятность того, что пользователь увидит строку такой, какой она должна быть, по мнению дизайнера. Примерно 60-80 символов на строку — это та золотая середина, которая способна сохранить проектную длину и не осложнить восприятие написанного. 
<img src="../chapter%204/prim.gif" alt="Переход на новую строку">Дескриптор прекрасно сочетается с любыми структурными составляющими страницы. В частности, его можно поместить внутрь абзаца или любого стандартного заголовка. 
Ситуации, когда возникает необходимость сохранить строку от разрыва, встречаются на практике намного реже. Чаще всего этого требуют адреса и важные заголовки. Есть несколько способов запретить переход на новую строку, одним из них является полулегальный дескриптор . Этот тег не упоминается в описании языка HTML, но исправно работает в большинстве версий основных броузеров. Дескриптор запрета переносов представляет собой контейнер и требует обязательного указания замыкающего тега. 
 
 Программа Dreamweaver располагает несколькими способами вставки дескрипторов перехода на новую строку. Самый простой — это стандартная комбинация клавиш SHIFT+ENTER. Кроме того, существует специальная команда с длинным названием Insert > Special Characters > Line Break (Вставка > Специальные символы > Переход на новую строку) и кнопка на палитре Objects (Объекты). 
<img src="../chapter%204/prim.gif" alt="Переход на новую строку">Выбор надлежащего межстрочного расстояния — интерлиньяжа, как говорят в типографике, — это одна из трудных для проблем для стандартного языка HTML. Перевод строки дает слишком плотное расположение текста, поскольку в этом случае расстояние между соседними строчками устанавливается равным высоте букв. Дескриптор абзаца, напротив, чрезмерно распахивает текст, оставляя значительные пробелы между соседними линиями. 
 Авторы гипертекстовых документов накопили значительную коллекцию обходных путей решения этой задачи. Так, некоторые вставляют в текст невидимые изображения требуемой высоты. Другие способы — это создание невидимого табличного каркаса, вставка текста в виде картинки, использование предварительно отформатированного текста и пр. Все эти трюки и приемы не дают полного контроля над межстрочным расстоянием. Лучшее решение — это использование табличных стилевых спецификаций. 
<h1>Предварительное форматирование</h1>
По соглашениям, принятым в языке HTML, программы просмотра не принимают во внимание многие параметры форматирования, полученные текстом при его вводе и форматировании в родительском приложении. Так игнорируются дополнительные пробелы, избыточные переходы на новую строку, отступы, табуляторы и др. 
 Однако разработчики ввели в состав языка специальные средства, которые разрешают сохранить исходное форматирование текста. Наиболее употребительным из них является дескриптор <pre>. Это дескриптор-контейнер, который способен удержать почти все атрибуты физического и логического форматирования. Его содержимое выглядит так, как при вводе текста в текстовом редакторе: сохраняются все пробелы, символы конца абзаца транслируются в переводы строк. Внутрь таких фрагментов разрешается вставлять некоторые коды разметки языка HTML. Однако структурные дескрипторы и <h*> в составе предварительно отформатированного текста игнорируются. 
 Дескриптор <pre> отмечен множеством достоинств, но имеет один существенный недостаток. Его содержимое представляется малопривлекательным моноширинным шрифтом. Это наследие архаического кассового набора, когда все литеры занимали одинаковые по ширине гнезда наборного сына, независимо от их подлинных размеров. Самым известным представителем этого семейства является шрифт Courier. 
И каких ситуациях применение предварительно отформатированного текста можно считать оправданным? Без него трудно обойтись при представлении коротких стихотворных строк или листингов программ. В документах типа бухгалтерских отчетов или складских ведомостей, изобилующих числовым материалом, который требует точного выравнивания, дескрипторы <pre> — это неплохая альтернатива таблицам. 
<img src="../chapter%204/prim.gif" alt="Предварительное форматирование">Обычно столбцы чисел выравнивают при помощи табуляторов. Спецификация языка HTML не рекомендует использовать символы табуляции и в предварительно отформатированном тексте, поскольку они не полностью поддерживаются программами просмотра. 
Для вставки дескриптора <pre> достаточно поместить текстовый курсор в любое место абзаца или стандартного заголовка и дать команду Text > Paragraph Format > Preformatted Text (Текст > Формат абзаца > Форматированный текст). 
 Эту команду можно запустить на выполнение при помощи Инспектора свойств (CTRL+F3). Для этого в списке Format (Формат) надо выбрать пункт Preformatted (Предварительное форматирование). 
<h1>Редактирование списков</h1>
Списки в языке HTML — это не застывшие формы; они допускают некоторую настройку поведения и внешнего вида. Все необходимые коррективы, меняющие параметры списков, можно внести непосредственно в коды pазметки страницы, но эта процедура трудоемкая и требует знания синтаксических конструкций языка. 
 Программа Dreamweaver располагает специальным средством управления, которое упрощает редактирование списков. Доступ к нему осуществляется следующим образом. 
<li>Откройте окно Инспектора свойств. Напомним, что для этого можно воспользоваться командой Window > Properties (Окно > Свойства) или комбинацией клавиш CTRL+F3.</li> 
<li>Разверните палитру, если она находится в свернутом состоянии. Для этого щелкните на кнопке с изображением стрелки, расположенной в нижнем правом углу палитры.</li> 
<li>Поместите текстовый курсор в один из разделов существующего списка. Только после этого станет доступной кнопка List Item (Элемент списка).</li> 
<li>Щелчком на этой кнопке откройте диалоговое окно List Properties (Свойства списка), содержащее настроечные параметры списков (рис. 5.4).</li> 
<li>Задайте требуемые параметры и введите их в действие щелчком на кнопке ОК.</li> 
 Диалоговое окно List Properties (Свойства списка) можно активизировать и командой Text > List > Properties (Текст > Список > Свойства). Рассмотрим элементы управления этого диалогового окна. 
<img src="image/5-4.jpg" alt="Редактирование списков"> 
Рис. 5.4. Настроечные параметры списков 
 <li>List Type (Тип списка). Этот раскрывающийся список позволяет изменить выбранный тип списка. Здесь представлены все типы списков: Bulleted List (Маркированный список), Numbered List (Нумерованный список), Directory List (Список каталогов), Menu List (Меню).</li> 
<li>Style (Стиль). Этот элемент управления позволяет изменить способ маркировки или нумерации пунктов неупорядоченного или упорядоченного списка. Для двух других видов списков такая настройка невозможна. Для маркированных списков предлагается следующий выбор.</li> 
<li>Default (По умолчанию). По умолчанию для пометки пунктов неупорядоченного списка используется небольшой сплошной черный кружок.</li> 
 
<li>Bullet (Кружок). Тот же тип маркера.</li> 
<li>Square (Квадрат). Квадрат с черным фоном.</li> 
 Для упорядоченных списков можно выбрать следующие способы нумерации. 
 <li>Default (По умолчанию). По умолчанию принимается цифровая нумерация упорядоченных списков.</li> 
<li>Number (Число).</li> 
<li>Roman Small (Римские цифры, записанные строчными буквами).</li> 
<li>Roman Large (Римские цифры, записанные прописными буквами).</li> 
<li>Alphabet Small (Строчные буквы латинского алфавита).</li> 
<li>Alphabet Large (Прописные буквы латинского алфавита).</li> 
<li>Start Count (Начальный номер). Это числовое поле предназначено для задания начального номера списка.</li> 
<li>New Style (Новый стиль). Здесь можно выбрать собственный номер или маркер для текущего элемента списка.</li> 
<li>Reset Count То (Установить номер). Раздел доступен только для нумерованных списков. Служит для изменения последовательной нумерации.</li> 
<h1>Специальные списки</h1>
В описание языка HTML, начиная с его самых первых версий, входят еще два типа списков специального применения. Это списки, создаваемые дескрипторами <menu> и <dir>. По замыслу авторов, первые должны помечать короткие названия пунктов некоторых меню, областью применения вторых должны были стать иерархические системы типа каталогов и вложенных подкаталогов. Оба дескриптора являются контейнерами; разделы специальных списков задаются обычным образом, при помощи дескрипторов <li>. 
До сего времени возможности, заложенные в эти дескрипторы, остались невостребованными. Большинство популярных программ просмотра отображают меню и каталоги как обычные маркированные списки. 
Программа Dreamweaver не располагает отдельными командами для создания списков специального применения. Необходимую разметку меню и каталогов нетрудно ввести вручную в режиме отображения кодов. Есть и обходной путь. Надо создать стандартный список любого типа, открыть диалоговое окно List Properties (Свойства списка) и в поле List Type (Тип списка) выбрать требуемый списочный тип. Подробнее о работе с этим диалоговым окном говорится в соответствующем разделе. 
<h1>Списки определений</h1>
Списки определений (definition list) по своему виду напоминают представление информации в словарях или глоссариях. Подобно планировке словарной статьи, они состоят из заголовка или названия, за которым с некоторым отступом по горизонтали следует развернутое описание. 
Для создания списка определений используются дескрипторы трех видов: <dl>, <dt> и <dd>. Все они являются контейнерами. Дескриптор <dl> за дает область определения списка, <dt> – помечает название списочного элемента, <dd> – ограничивает его описание. Короткий листинг, приведенный далее, показывает пример построения простого списка определений. 
<img src="image/5-3.jpg" alt="Списки определений"> 
Рис. 5.3. Представление списка определений 
<dl> 
<dt>Легато</dt> 
 <dd>Плавный переход одного звука в другой</dd> 
 <dt>Стаккато</dt> 
 <dd>Oтpывистоe исполнение звyкoв</dd> 
 <dt>Глиссандо</dt> 
 <dd>Скольжение от одного звука к дpyгoмy</dd> 
</dl> 
Замыкающие теги для дескрипторов <dt> и <dd> применяются довольно редко, несмотря на то, что по стандарту языка они являются контейнерами. Синтаксическая избыточность списков определений позволяет выполнить корректный разбор даже по одиночным тегам, помечающим заголовки и их описания. 
Списки определений — это весьма толерантные объекты. В них можно помещать не только текст, но и рисунки, таблицы, команды гипертекстового перехода и множество других элементов без нарушения взаимной координации и планировки гипертекстового документа. 
<img src="image/markirovannye-spiski_1.gif" alt="Списки определений">Иногда это средство используется не по своему прямому назначению. Некоторые дизайнеры применяют списки для создания отступов текстовых фрагментов. Для этого достаточно исключить из описания списка дескрипторы вида <dt>. 
Список определений создается при помощи следующей процедуры. 
<li>Выберите структурные блоки текста. Обычно основой списка служат </li> 
несколько абзацев. 
<li>Дайте команду Text > List > Definition List (Текст > Список > Список определений).</li> 
 
<img src="image/markirovannye-spiski_1.gif" alt="Списки определений">В принципе, в состав списка определений допускается включать не только абзацы, но и любые структурные блоки документа, например стандартные заголовки или предварительно отформатированный текст. Но такое решение выглядит нелогичным и нуждается в серьезных обоснованиях для своего применения. 
Вот несколько замечаний общего характера по технике работы со списками. 
<li>При создании списков не обязательно начинать с ввода текста. Можно стартовать с пустого абзаца и создавать разделы списка постепенно.</li> 
<li>Расстояние между отдельными строчками списка несколько меньше, чем у смежных абзацев, но больше, чем у соседних строк текста, разорванных символом перехода на новую строку.</li> 
<li>Если содержимое раздела списка выходит за пределы установленной ширины страницы, то программа просмотра выполняет автоматический переход на новую строку. При этом новый раздел списка не создается. На символы перехода на новую строку (SHIFT+ENTER) программы просмотра реагируют подобным же образом.</li> 
<li>Для форматирования разделов списков разрешено использовать все команды меню Text > Style (Текст > Стиль).</li> 
<li>Работу со списком можно завершить многими разными способами. Самым естественным, видимо, является двукратное нажатие клавиши ENTER.</li> 
<h1>Списки</h1>
Природа списков двойственна. С одной стороны, они представляют собой мощное средство структурирования документа. Их применение представляет в наглядной доступной форме разнородные качества одной сущности: последовательность пунктов, перечень условий, относящихся к одной теме или предмету. С другой стороны, списки можно рассматривать и как средство форматирования страниц, элементы оформительского стиля документа. 
В языке HTML есть специальные средства для создания списков трех различных видов: нумерованных, маркированных и списков определений. При необходимости списки можно вкладывать друг в друга, это позволяет представить в наглядной форме информацию сложной структуры. 
<h1>Структурирование текста</h1>
Основными средствами структурирования текста в языке HTML являются дескрипторы абзацев, заголовки, концы строк и горизонтальные линейки. 
<h1>Вложенные списки</h1>
Списки разного типа часто приходится объединять. В этом отношении HTML не связывает руки дизайнера жесткими ограничениями и надуманными стандартами. Он разрешает произвольно комбинировать списки и вкладывать их друг в друга. Вложенные списки не теряют своей способности к редактированию. Пользователь может по собственному выбору отредактировать содержание любого пункта или изменить его способ представления. 
 В программе Dreamweaver есть несколько разных способов создания вложенных списков. Видимо, самым удобным из них является использование команды, создающей отступ. Ее применение для списочных разделов дает один полезный побочный эффект: она автоматически создает новый список данного типа. 
Пусть уже создан некоторый список, который требуется сделать иерархическим. Приведем примерную последовательность шагов для решения этой 
задачи. 
<li>Поместите текстовый курсор в тот раздел, который надо сделать вложенным списком.</li> 
<li>Дайте команду Text > Indent (Текст > Отступ). Эту команду можно дать при помощи комбинации клавиш CTRL+ALT+], кроме того, она представлена специальной кнопкой в палитре Property Inspector (Инспектор свойств).</li> 
<li>Не снимая выбора с раздела, укажите для него требуемый тип списка. Для этого следует воспользоваться командами меню List (Список) или средствами, которые предоставляет диалоговое окно List Properties (Свойства списка) (см. следующий раздел).</li> 
Вложение списков — это обратимая операция. Подчиненный подсписок 
легко перенести на более высокий уровень. Для этого достаточно применить, к нему команду Text > Outdent (Текст > Втяжка). Эта команда сдвигает выбранные текстовые блоки в сторону левого поля. Расположение текста, когда заголовок или название рубрики выступает относительно основного текстового массива, называется в типографике втяжкой. 
<img src="image/markirovannye-spiski_1.gif" alt="Вложенные списки">Если попытаться построить вложенный список без использования отступа вложенных разделов, а просто изменить их тип, то программа создаст три независимых списка без какой-либо иерархической соподчиненности. Первый список образуют разделы, расположенные над выбранными, второй — это сами выбранные пункты, третий — это нижняя часть исходного списка. 
<h1>Вставка даты</h1>
Гипертекстовые страницы, которые интенсивно обновляются, принято индексировать — помечать датой внесения изменений. Программа Dreamweaver имеет команду, предназначенную для вставки текущей даты. Это не просто обозначение числа и времени, а специальное поле, которое автоматически обновляет свое значение при каждом сохранении страницы. Значение этого поля основывается на системных часах локального компьютера, на котором создается страницы. После вставки дату разрешается форматировать как обычный текст с применением всего арсенала средств, которым располагает редактор. 
Вставка даты выполняется следующим образом. 
<li>Поместите текстовый курсор в позицию вставки.</li> 
<li>Дайте команду Insert > Date (Вставка > Дата), которая выведет на экран диалоговое окно, показанное на рис. 5.5.</li> 
<li>Настройте значения элементов управления этого диалогового окна. Почти все они относятся к форме представления составляющих текущей даты: дня, месяца, года и показаний системных часов</li> 
<li>Day Format (Формат дня). Список объединяет различные формы представления дня недели.</li> 
<li>Date Format (Формат даты). Список форм представления всей даты.</li> 
<li>Time Format (Формат времени). Варианты записи текущего времени.</li> 
<li>Update Automatically on Save (Автоматически обновлять при сохранении). Если этот флажок установлен, дата автоматически обновляется при каждом сохранении страницы.</li> 
<li>Щелкните на кнопке ОК для завершения процедуры.</li> 
<img src="image/5-5.jpg" alt="Вставка даты"> 
Puc. 5.5. Вставка даты 
Формат вставленной даты можно изменить. Для этого надо щелкнуть указателем по любой ее части, вывести палитру Property Inspector (Инспектор свойств) (CTRL+F3) и щелкнуть на палитре на кнопке Edit Date Format (Редактировать формат даты). 
<h1>Заголовки</h1>
Заголовки — это одно из важнейших средств структурирования документов HTML. Правильно названные и расставленные заголовки служат своеобразными указателями, направляющими внимание читателя, облегчающими его навигацию по длинному и неоднородному гипертекстовому документу. 
 Дескрипторы заголовков представляют собой контейнеры; они начинаются с открывающего дескриптора вида <h*> и заканчиваются тегом </h*>, где звездочка означает номер или уровень заголовка. В языке HTML предусмотрено шесть стандартных заголовков: <h1>, <h2>, <h3>, <h4>, <h5> <h6> (в порядке убывания старшинства). 
 По духу языка HTML эти элементы являются скорее средствами логической разметки документа, инструментами его структурирования, а не частью художественного стиля или элементами оформления. Поэтому способы их представления скрыты от пользователя; они устанавливаются по умолчанию в программах просмотра. 
Часть сетевой общественности считает, что стандартные заголовки выглядят непривлекательно, поэтому страницы, перегруженные этими элементами, способны отпугнуть посетителя с повышенными эстетическими запросами. На страницах академического направления, у которых глубокая содержательная часть оправдывает непритязательное оформление, допустимо использовать до трех уровней заголовков. 
<img src="../chapter%204/prim.gif" alt="Заголовки">Есть ситуации, когда трудно обойтись без стандартных заголовков. Mногие программы автоматического преобразования текста требуют их использования при конвертации из одного формата в другой. 
Приведем еще несколько простых правил использования заголовков. Дескрипторы заголовков являются истинными контейнерами — для них обязательно наличие закрывающего тега. Программы просмотра ставят по одной пустой строке перед каждым таким элементом страницы. Заголовки нельзя применять для описания символов внутри абзаца — они сами определяют отдельный абзац. Если выполнить разметку вручную в кодовом режиме, то содержимое абзаца будет разбито на три независимые части. Дескрипторы стандартных заголовков допускают единственный параметр атрибут выравнивания align с теми же значениями, что и у дескриптора абзаца. 
<h1>
Dreamweaver 4
</h1>
<h1>Цвет</h1>
Если тексту не назначено никакого цвета, то при отображении страниц в программах просмотра используются внешние установки, принятые по умолчанию. Это может быть цвет, принятый в операционной системе Windows или в броузере. Обычно это нейтральный черный цвет, служащий неплохим выбором в большинстве практических случаев. Цвет для всего массива символов документа задается в основных установках документа. Напомним, что вызвать диалоговое окно с базовыми параметрами документа можно по команде Modify > Page Properties (Изменить > Свойства страницы) (CTRL+J) или из контекстного меню, которое вызывается щелчком правой кнопки мыши на любой свободной точке страницы. 
 Для любого набора символов разрешается назначить собственный цвет, отличный от цвета символов страницы. Для хранения цветов и оттенков используется специальный атрибут color дескриптора . Например строка кода, в которой назначается оттенок сине-зеленого, имеет следующий вид: 
Цвет этой надписи похож на бирюзовый 
Напомним, что в языке HTML цвет задается при помощи шестнадцатеричних кодов и некоторые элементы палитры имеют собственные имена, например green (зеленый), red (красный) и др. Программа Dreamweaver способна воспринять любой из этих способов, но для совместимости со старыми версиями броузеров лучше пользоваться шестнадцатеричными кодами. Кроме того, лишь ограниченное число имен обладает межброузерной совместимостью. 
В разделе, посвященном основным настройкам страницы, работа с цветовыми инструментами и палитрами программы рассмотрена достаточно подробно. Поэтому здесь приведем лишь краткое описание основных приемов. 
Присвоить цвет фрагменту текста можно следующим образом. 
<li>Выберите нужный фрагмент текста.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств). Для этого проще всего применить комбинацию клавиш CTRL+F3.</li> 
<li>Щелкните на прямоугольном поле, расположенном в центре верхнего ряда палитры. Оно содержит образец текущего цвета и служит для активизации цветовой палитры.</li> 
 
<li> Выберите искомый цвет из палитры или скопируйте цвет пипеткой из любого открытого окна или с Рабочего стола. Чтобы сохранить работоспособность пипетки за пределами окна программы, требуется лишь не отпускать левую кнопку мыши после щелчка на цветовом поле.</li> 
<img src="image/redaktirovanie-spiska-shriftov_1.gif" alt="Цвет">Если цвет назначается текстовому фрагменту, который находится в области действия дескриптора , то для выбора лучше пользоваться селектором разметки. Ручной выбор в режиме планировки страницы не дает уверенности в том, что выделено все содержимое дескриптора . Это способно привести к размножению подобных кодов. 
В тех случаях, когда изобразительных возможностей безопасной Web-палитры, состоящей из 216 цветов, оказывается недостаточным, программа предоставляет возможность выбора искомого оттенка из нескольких миллионов, доступных для современных цветных мониторов и видеоадаптеров. 
Эта операция выполняется следующим образом. 
<li>Выберите текст.</li> 
<li>Дайте команду Text > Color (Текст > Цвет), которая открывает специальную палитру для синтеза новых цветов и оттенков (рис. 6.2).</li> 
<li>Выберите оттенок и контрастность нового цвета, перемещая в большом цветовом поле специальный маркер в виде перекрестия.</li> 
<li>Настройте яркость цвета при помощи ползунка в правой части диалогового окна.</li> 
<li>Щелкните на кнопке Добавить в набор.</li> 
<li>По завершении всей процедуры щелкните на кнопке ОК.</li> 
<img src="image/6-2.jpg" alt="Цвет"> 
Рис. 6.2. Диалоговое окно цветового синтеза 
<img src="image/redaktirovanie-spiska-shriftov_1.gif" alt="Цвет">Чтобы вернуться к цвету, заданному по умолчанию, откройте цветовую палитру и щелкните на кнопке с изображением перечеркнутого круга, расположенной в верхней правой ее части. 
<h1>Форматирование текста</h1>
Ревнители чистоты HTML и поклонники его прародителя — языка SGML (Standard Generalized Markup Language} настаивают на тезисе о логической природе инструментов гипертекстовой разметки и с неодобрением относятся ко всем средствам и командам форматирования. Согласно их представлениям, в язык HTML должны входить только структурные дескрипторы, которые задают место фрагментов документа и их логическую соподчиненность. Вся конкретика, связанная с признаками форматирования, должна быть вынесена за пределы языка гипертекстовой разметки в отдельный “информационный слой”. 
В таком случае проблема переносимости и представления гипертекста в различных программах просмотра получает простое и элегантное решение. Вся служебная информация гипертекстового документа делится на постоянную структурную и переменную оформительскую части. Благодаря этому разметку может интерпретировать программа, работающая с самыми экзотическим устройствами вывода. После настройки переменной части документ готов к показу на оконечном устройстве, которое способно форматировать документ совершенно непривычным для современного пользователя образом, например при помощи звукового синтезатора или по системе Брайля. 
Язык HTML в его современном состоянии представляет собой причудливую комбинацию логических и оформительских средств и инструментов. Большинство инструментов нелогического характера предназначены для форматирования текста. 
В текстовых редакторах и настольных издательских системах существует два различных по духу и технике подхода к оформлению текста. Их обычно называют прямое и стилевое форматирование. 
<h1>Палитра стилей HTML</h1>
Главным средством работы с классическими стилями в программе является палитра HTML Styles (Стили HTML). Она объединяет команды создания, редактирования, удаления и применения стилей. Для ее активизации доста-точно выполнить команду Window > HTML Styles (Окно > Стили HTML) или воспользоваться комбинацией клавиш CTRL+F11. 
<img src="image/6-3.jpg" alt="Палитра стилей HTML"> 
Puc. 6.3. Палитра HTML Styles (Стили HTML) Рассмотрим возможности этой палитры. 
<li>Развернутая палитра представляет все классические стили, доступные в данном документе. Стили, областью применения которых служат структурные блоки текста (абзацы, стандартные заголовки и пр.), помечаются с левой стороны значком с традиционным изображением спецсимвола конца абзаца. Стили, применимые к произвольным текстовым фрагментам, имеют значок в виде подчеркнутой буквы а. Такие стили принято называть символьными. Первые две позиции в палитре занимают, так сказать, антистили: Clear Selection Style (Убрать символьный стиль) и Clear Paragraph Style (Убрать стиль абзаца). Эти команды убирают стилевое форматирование. Каждый вновь созданный стиль заносится под выбранным пользователем именем в конец списка. Значки стилей получают дополнительный символ +, если в базовое стилевое форматирование внесены какие-то изменения.</li> 
<li>Кнопка Apply (Применить) присваивает параметры выбранного стиля абзацу или текстовому блоку. Если установлен флажок, расположенный слева от этой кнопки, то для назначения стиля достаточно просто выбрать его имя в палитре. Щелчок на кнопке при этом не требуется.</li> 
<li>Кнопка с изображением странички, на которой нарисован знак +, служит для создания нового стиля. По щелчку на ней выводится диало говое окно Define HTML Styles (Описание стилей), средствами которого задаются все стилевые описания.</li> 
<li>Последняя кнопка нижнего ряда служит для удаления стилей. Для этого надо выбрать имя стиля и щелкнуть на этой кнопке.</li> 
<li>Треугольная кнопка, расположенная справа в верхнем ряду, служит для вызова меню. Оно объединяет следующие команды: Edit (Изменить), Duplicate (Дублировать), Delete (Удалить), Apply (Применить),New (Создать). Это меню можно открыть и по-другому —достаточно щелкнуть правой кнопкой мыши на любой внутренней точке палитры.</li> 
<h1>Применение стиля</h1>
Применение стиля, разработанного и внесенного в палитру HTML Styles (Стили HTML), – это элементарная по технике исполнения операция. 
<li>Выберите текстовый фрагмент или абзац. В первом случае необходимо выбрать все символы фрагмента, использовав любой удобный способ выбора. Структурные блоки, содержащие текстовый курсор, считаются выбранными. Напомним, что структурными блоками называются объекты, которые своими свойствами напоминают абзацы. Таковыми являются сами абзацы, стандартные заголовки, предварительно отформатированный текст, нумерованные и маркированные списки, списки определений и др.</li> 
<li>Откройте палитру HTML Styles (Стили HTML).</li> 
<li>Выберите имя стиля в палитре.</li> 
<li>Если флажок слева от кнопки Apply (Применить) установлен, то процедура применения стиля на этом завершается. В противном случае надо щелкнуть на этой кнопке. </li> 
 Снятие назначенного стилевого форматирования выполняется по той же схеме, что и назначение, только вместо имен стилей надо назначать имена “антистилей”. Стили абзацев удаляет команда палитры Clear Paragraph Style (Убрать стиль абзаца), для символов эти функции выполняет команда Clear Style (Убрать символьный стиль). 
<img src="image/redaktirovanie-spiska-shriftov_1.gif" alt="Применение стиля">Эти команды удаляют не только стилевое форматирование, назначенное средствами палитры HTML Styles (Стили HTML); они снимают с выбранного фрагмента все оформительские атрибуты, независимо от способа назначения. Исключением являются каскадные листы стилей. 
<h1>Прямое форматирование</h1>
Техника прямого форматирования хорошо известна даже начинающему пользователю, за плечами которого всего лишь несколько сверстанных писем или простых объявлений. Текстовый массив следует выбрать, после чего назначить ему форматирование при помощи меню или кнопок палитр. В программе Dreamweaver эта техника не имеет существенных отличий от текстовых редакторов. Доступ к командам форматирования можно получить через меню Text (Текст). Самой представительной коллекцией средств текстового форматирования располагает палитра Property Inspector (Инспектор свойств). Состав этой контекстной палитры подробно рассмотрен в разделе, посвященном интерфейсу программы. 
<h1>Размер</h1>
Любому пользователю, даже знакомому только с азами печатного дела, известно, что размеры шрифтов измеряются в специальных типографских| единицах — пунктах. В языке HTML принята иная шкала: шрифтовые габариты меряются при помощи относительных безразмерных величин, которые даже не имеют названия. 
 Установленные размеры хранит специальный атрибут size дескриптора . Существуют две системы нумерации: абсолютная и относительная. Согласно первой, шрифтовые размеры измеряются в единицах некоторой условной шкалы и могут принимать значения от единицы (самый маленький) до семи (самый большой). Соответствующий код может выглядеть следующим образом: 
A6coлютная система измерения 
<img src="image/redaktirovanie-spiska-shriftov_1.gif" alt="Размер">Для шрифтов установлена обратная система нумерации по сравнению со стандартными заголовками. Здесь первый номер соответствует самому маленькому размеру. 
В относительной системе размеры задаются приращением относительно установленной базовой величины, которая или принимается по умолчанию, или задается в явном виде при помощи специального дескриптора. Стандартная величина, принимаемая по умолчанию, обычно равна трем. Если требуется изменить точку отсчета, то сразу после дескриптора <body> следует поставить описание вида <basefont size="значение">, атрибут size может принимать любые значения от единицы до семи. Программа Dreamweaver не располагает специальными средствами для работы с этим дескриптором — его можно ввести в состав разметки вручную или при помощи внешнего редактора HTML. 
Приращение размеров задается в атрибуте size числом со знаком + (увеличение) или - (уменьшение). Приведем пример простановки размеров шрифта в относительной системе: 
Относительная система измерения 
Размер шрифта задается следующим образом. 
<li>Выберите текст или поместите текстовый курсор в позицию ввода.</li> 
<li>Дайте команду Text > Size (Текст > Размер) для задания абсолютного размера или Text > Size Change (Текст > Изменить размер) для выбора размера в относительной системе. Любая из этих команд также доступ на в палитре Property Inspector (Инспектор свойств). Все возможные размеры шрифтов представлены в списке Size (Размер) на этой палитре.</li> 
<li>Выберите абсолютное значение или приращение размера.</li> 
<h1>Редактирование списка шрифтов</h1>
Набор заменителей выбранного шрифта разрешается настраивать по желанию пользователя. 
<li>Дайте команду Text > Font > Edit Font List (Текст > Шрифт > Редактировать список шрифтов), которая выводит на экран одноименное диалоговое окно. Данная команда представлена и в Инспекторе свойств (CTRL+F3).</li> 
<li> Выполните необходимые настройки существующего списка или создайте новый список альтернатив для выбранного шрифта.</li> 
<li>Закончите работу с диалоговым окном щелчком на кнопке ОК.</li> 
<img src="image/6-1.jpg" alt="Редактирование списка шрифтов"> 
Puc. 6.1. Диалоговое окно для редактирования шрифтовых подстановок 
Рассмотрим поля и кнопки этого диалогового окна. 
<li>Font List (Список шрифтов). В этом разделе диалогового окна перечислены псе доступные списки шрифтов. Вновь созданная коллекция подстановок заносится в самый конец этого раздела. Чтобы изменить состав или последовательность альтернатив в некотором наборе, сначала надо выбрать его имя. Для создания нового набора щелкните на кнопке со знаком +. В результате раздел пополнится новым пунктом под названием Add fonts at list below (Добавить шрифт к списку).</li> 
<li>Chosen Font (Выбранные шрифты). Поле содержит имена шрифтов выбранного набора. Для нового набора этот список сначала пуст. Первый выбранный шрифт дает имя всему набору.</li> 
<li>Available Fonts (Наличные шрифты). Список объединяет имена шрифтов, установленных в данной вычислительной системе. Чтобы добавить шрифт к выбранному набору, достаточно выбрать его в этом списке и щелкнуть на кнопке со стрелкой, указывающей влево.</li> 
<li>Кнопки со знаками + и - служат для добавления новых и удаления отслуживших свое шрифтовых наборов.</li> 
<li>Две кнопки с изображением вертикально направленных стрелок предназначены для изменения положения, которое занимает шрифтовой набор в общем списке.</li> 
<li>Кнопки с горизонтально направленными стрелками предназначены для формирования состава шрифтового набора.</li> 
<img src="image/redaktirovanie-spiska-shriftov_1.gif" alt="Редактирование списка шрифтов">Родовые имена шрифтовых коллекций cursive, fantasy, monospace, sans-serif, serif приведены в самом конце списка Available Fonts (Наличные шрифты). 
<h1>Шрифт</h1>
Web-дизайнер не имеет такой свободы обращения со шрифтами, которой обладает его коллега по цеху, работающий для печати. В распоряжении последнего имеются шрифтовые коллекции, состоящие из сотен образцов, которыми он волен пользоваться, сообразуясь только со своими целями и творческими установками. Создатель Web-страниц обязан помнить о том, что потенциальные зрители его творений могут иметь систему с ограниченной шрифтовой поддержкой. В таких случаях программы просмотра выполняют замену шрифтов. В качестве замены обычно выбираются системные шрифты, например Times New Roman или Arial. Такая подстановка способна привести к нарушению планировки страницы и существенным деформациям внешнего вида проекта. 
 Каким образом в HTML назначается шрифтовое оформление? Эту задачу решает специальный дескриптор , важнейшим атрибутом которого является название шрифта. Его значениями могут быть имена нескольких шрифтовых образцов или даже название целого семейства, например: 
Шрифтовое оформление 
Этот кодовый фрагмент предписывает программе просмотра выбор моноширинного шрифта Courier. Если клиентская машина таковым не обладает, то следует применить гарнитуру Helvetica, при отсутствии оной назначить любой рубленый шрифт (sans-serif — это общее обозначение шрифтов, не имеющих засечек). 
Техническая сторона назначения шрифтов ничем не отличается от подобной процедуры в текстовых редакторах. 
<li>Выберите текст или поместите текстовый курсор в то место документа, которому следует назначить шрифтовое оформление.</li> 
<li>Дайте команду Text > Font (Текст > Шрифт) и выберите нужный шрифт. То же самое можно сделать при помощи палитры Property Inspector (Инспектор свойств).</li> 
Название выбранного шрифта фактически является именем списка, в котором перечислены в порядке убывания предпочтительности возможные альтернативы данного выбора. 
<h1>Символьные стили</h1>
Символьные стили — это варианты начертания, применимые к отдельным символам, строчкам и текстовым фрагментам. В эту группу входят физические и логические стили символьного форматирования. Например, хорошо знакомые каждому курсивное и полужирное начертания следует отнести к физическим стилям, поскольку эти виды шрифтового дизайна не зависят от программ просмотра и вычислительных платформ. Логические символьные стили — это особенность языка гипертекстовой разметки; они не имеют прямых аналогов в текстовых редакторах и настольных издательских системах. Логические стили не фиксируют способ визуального представления символов, его зримый графический образ. Они присваивают фрагменту текста некий логический или структурный статус, оставляя его оформление за программой просмотра. 
 Например, в HTML есть дескриптор (от emphasis, что можно перевести как акцент или ударение), который указывает на то, что его содержимое должно быть каким-то образом выделено. При этом способ выделения не оговаривается; он целиком возлагается на программу просмотра. Сейчас потенциал этого средства остается невостребованным — большинстве современных графических броузеров представляют его содержимое курсивом. Легко представить себе ситуации, когда оправдано выделение этого дескриптора звуком или цветом. 
Деление способов символьного начертания на физические и логические стили не является раз и навсегда заданным. Развитие программ просмотра и принятие новых стандартов языка может изменить границу между этими классами. В настоящее время к физическим стилям принято относить: 
<li> — полужирное начертание;</li> 
<li> — курсивное начертание;</li> 
<li><tt> — имитация шрифта пишущей машинки;</li> 
<li> — подчеркивание;</li> 
<li> — подстрочный текст (нижний индекс);</li> 
<li> — надстрочный текст (верхний индекс);</li> 
<li><strike> — зачеркнутый текст.</li> 
 В таблице представлены все дескрипторы стилей, которые поддержаны в программе Dreamweaver. Прочие стили можно ввести в оформление документа только при помощи прямого набора кодов в режиме разметки или во внешнем редакторе HTML. 
 
<img src="image/redaktirovanie-spiska-shriftov_1.gif" alt="Символьные стили"> К сожалению, четвертая версия программы не поддерживает прямую работу с дескриптором <address>. Это дескриптор-контейнер со строго очерченной областью применения. Он служит для выделения описаний адресов. Большинство броузеров представляют его содержимое в виде курсива. Самый простой способ ввести его в состав разметки документа — это воспользоваться экспрес-редактором. Напомним, что удобным способом вызова этого оперативного средства является комбинация клавиш CTRL+T. 
<table border=1>
<tr> <td>
Стиль 
</td>
<td>
Teг 
</td>
<td>
Описание 
</td>
</tr>
<tr> <td>
Hold 
</td>
<td>
 
</td>
<td>
Полужирное начертание 
</td>
</tr>
<tr> <td>
Italic 
</td>
<td>
 
</td>
<td>
Курсивное начертание 
</td>
</tr>
<tr> <td>
Underline 
</td>
<td>
 
</td>
<td>
Подчеркивание 
</td>
</tr>
<tr> <td>
Itrikethrough 
</td>
<td>
<s> 
</td>
<td>
Вычеркивание 
</td>
</tr>
<tr> <td>
Teletype 
</td>
<td>
<tt> 
</td>
<td>
Представление текста моноширинным шрифтом, имитирующим начертание пишущих машинок или телетайпов 
</td>
</tr>
<tr> <td>
Emphasis 
</td>
<td>
 
</td>
<td>
Выделение текста относительно его окружения. В большинстве случаев отображается курсивом 
</td>
</tr>
<tr> <td>
Strong 
</td>
<td>
 
</td>
<td>
Сильное выделение текста. Обычно представляется в виде полужирного начертания 
</td>
</tr>
<tr> <td>
Code 
</td>
<td>
<code> 
</td>
<td>
Имитация программных кодов, листингов, сценариев. Обычно этот стиль отображается моноширинным шрифтом 
</td>
</tr>
<tr> <td>
Sample 
</td>
<td>
<samp> 
</td>
<td>
Выделение строковых последовательностей. Этот стиль применяется к любым текстовым фрагментам с особым структурным статусом. В программах просмотра отображается моноширинным шрифтом 
</td>
</tr>
<tr> <td>
Variable 
</td>
<td>
<var> 
</td>
<td>
Представление программных переменных. Часто отображается курсивом 
</td>
</tr>
<tr> <td>
Keyboard 
</td>
<td>
<kbd> 
</td>
<td>
Стиль для выделения пользовательского ввода. В программах просмотра представляется моноширинным шрифтом или выделяется полужирным начертанием 
</td>
</tr>
<tr> <td>
Citation 
</td>
<td>
<cite> 
</td>
<td>
Цитаты, ссылки, титры и т. п. В большинстве случаев представляются курсивом 
</td>
</tr>
<tr> <td>
Definition 
</td>
<td>
<dfn> 
</td>
<td>
Стиль для представления вхождений терминов и их определения. Обычно отображается курсивом 
</td>
</tr>
</table>
Назначить фрагменту текста стилевое оформление можно следующим образом. 
<li>Выберите текстовый массив.</li> 
<li>Дайте команду Text > Style (Текст > Стиль) и выберите имя искомого стиля из выпадающего меню.</li> 
 
 Два самых ходовых физических стиля — курсивное и полужирное начертание — можно назначить при помощи инспектора свойств. Кроме того, они имеют клавиатурные комбинации CTRL+I для курсива и CTRL+B для полужирного шрифта. Чтобы удалить стандартный стиль, доступный через строку меню, достаточно повторно дать команду, при помощи которой он был назначен. Для удаления нестандартного стиля требуется щелкнуть правой кнопкой мыши по названию дескриптора стиля в селекторе разметки или по самому стилю в окне документа и выбрать в открывшемся контекстном меню команду Remove Tag (Удалить дескриптор). 
<img src="image/redaktirovanie-spiska-shriftov_1.gif" alt="Символьные стили">Стандарт языка гипертекстовой разметки разрешает смешивать и вкладывать друг в друга логические и физические стили. На практике некоторые комбинации логических стилей могут быть неправильно понятны программами просмотра. Сочетания физических стилей оформления более устойчивы. Броузеры уверенно отображают все комбинации курсивного и полужирного начертаний и подчеркивания. 
<h1>Снятие стилевого оформления</h1>
Палитра HTML Styles (Стили HTML) включает в состав стилей любого гипертекстового документа два обязательных пункта: Clear Selection Style (Убрать символьный стиль) и Clear Paragraph Style (Убрать стиль абзаца). Это не стили, как можно было бы заключить по их расположению, для них больше подходит название “антистили”. Это команды, которые убирают форматирование произвольных текстовых фрагментов и структурных блоков документа, оставляя некоторый минимальный набор атрибутов оформления. Несмотря на свое не очень заметное расположение, эти команды весьма полезны во многих ситуациях. Например, они могут помочь, когда требуется быстро убрать последствия многократных экспериментов по форматированию, которые способны привести к нагромождению дескрипторов и предельно запутать исходный код фрагмента. 
 Команда Clear Selection Style (Убрать символьный стиль) убирает все дескрипторы вида и другие дескрипторы, задающие форматирование данного набора символов. Причем происхождение форматирования не имеет значения: оно может быть частью символьного стиля или быть назначено отдельно при помощи команд или сочетания клавиш. Похожим образом работает и команда Clear Paragraph Style (Убрать стиль абзаца) — она убирает все оформительские атрибуты, относящиеся к выбранному абзацу или структурному блоку документа. 
Например, если применить эту команду к строке вида: 
<h4 align="center">Снятие форматирования</h4> 
то получится обычный абзац: 
Снятие форматирования</р> 
без единой оформительской установки. 
В область действия команды Clear Selection Style (Убрать символьный стиль) попадают все атрибуты форматирования выбранного набора символов.Она не требует того, чтобы дескрипторы непосредственно примыкали к выбранному фрагменту. Расположения набора символов в области действия дескриптора вполне достаточно для того, чтобы он был обработан командой Например, в данном кодовом фрагменте: 
<р>Снятие символьного форматирования</р> 
Среднее слово находится в области действия примыкающего дескриптора, устанавливающего курсивное начертание, и попадает под воздействие более далекого дескриптора <Ь>, задающего полужирный шрифт. Команд Clear Selection Style (Убрать символьный стиль), примененная только к среднему слову, снимает с него все виды начертаний. После ее применения строя кода будет выглядеть следующим образом: 
<р>Снятие символьного форматирования</р> 
<h1>Создание стиля</h1>
Программа Dreamweaver поддерживает три основных способа создания новых стилевых описаний: 
<li>создание стиля “с нуля”;</li> 
<li>разработка стиля на основе выбранного образца;</li> 
<li>модификация существующего стиля.</li> 
Для любого из перечисленных способов основным средством работы со стилевыми параметрами является специальное диалоговое окно Define НТМL Styles (Описание стилей), показанное на рис. 5.4. Его выводит на экран любая из команд палитры, выполняющих редактирование стилевых описаний: Edit 
(Изменить), Duplicate (Дублировать), New (Создать).То же самое делает двойной щелчок в палитре по имени существующего стиля. 
С технической точки зрения, варианты разработки новых стилей слегка различаются между собой. Рассмотрим их. 
<li>Чтобы создать новый стиль на основе существующего образца, требуется выбрать эталонный фрагмент в окне документа а и любым удобным способом открыть диалоговое окно Define HTML Styles (Описание стилей). Выбранный образец передает значения атрибутов форматирования в поля палитры. В этом иаключается преемственность данного метода.</li> 
<li>Чтобы внести изменения в существующий стиль, надо дважды щелкнуть на его имени в палитре Define HTML Styles (Описание стилей).</li> 
<li>Для создания нового стиля на базе существующего требуется выбрать имя родительского стиля в палитре и выполнить команду Duplicate (Дублировать).</li> 
<li>Разработка стиля с чистого листа, не опирающаяся на базовое форматирование родителя или образца, начинается по команде New (Создать).</li> 
 Эти различия не имеют принципиального характера. Следование описанным методикам способно отчасти сократить трудоемкость работы по созданию нового стилевого описания, главным образом за счет того, что часть полей диалогового окна Define HTML Styles (Описание стилей) заполняется автоматически. 
<img src="image/6-4.jpg" alt="Создание стиля"> 
 Рис. 6.4. Диалоговое окно для создания новой стилевой спецификации 
Рассмотрим возможности диалогового окна Define HTML Styles (Описание стилей). 
<li>Name (Имя). Поле служит для задания имени нового стиля.</li> 
<li>Apply То (Применить к). Раздел определяет тип стиля. Для этого служат переключатели: Selection (Фрагмент) и Paragraph (Абзац). Первая выбирает символьный стиль, вторая — стиль абзаца.</li> 
 
<li>When Applying (При применении). Эта группа переключателей описывает последствия создания или изменения стиля. В ней два переключателя: Add to Existing Style (Добавить к существующему стилю) и Clear Exisying Style (Заменить существующий стиль). Если установлен первый из них то заданные в диалоговом окне описания добавляются к текущему стилю. Имена таких “кумулятивных стилей” помечаются в дальнейшем знаком +. Второй переключатель ликвидирует старые характеристики форматирования. </li> 
<li>Font Attributes (Шрифтовые атрибуты). Раздел служит для выбора параметров форматирования символов. Это шрифт, размер, цвет и стиль символов. </li> 
<li>Paragraph Attributes (Атрибуты абзаца). Раздел объединяет средства, задающие характеристики форматирования абзацев. Из всего многообразия дескрипторов оформления в этом разделе предлагается ограниченный выбор из типов структурных текстовых блоков и вариантов выравнивания.</li> 
<h1>Стили HTML</h1>
Понятие стиля является универсальным и применяется в любых сферах человеческой деятельности. Существуют художественные стили, стили речи, одежды, поведения и т. п. Можно говорить и о стиле оформления текста. Под стилем в издательском деле понимают множество признаков форматирования, объединенных общим именем. В отличие от литературы и искусства, где к копированию стилей относятся неодобрительно, в области подготовки печатных и виртуальных документов это занятие вполне благопристойное. Использование стилей при форматировании больших массивов текста может существенно повысить эффективность труда дизайнера и уменьшить вероятность появления ошибок. 
Использование стилей форматирования позволяет добиться значительной экономии средств и времени. Работа по определению атрибутов стиля выполняется один раз. Созданный стиль назначается всем частям документа с одинаковым оформлением. При этом экономия достигается не только за счет навигации по сложной системе вложенных меню и диалоговых окон. 
Стиль позволяет сохранить единообразие оформления сходных фрагментов, например заголовков или подписей. 
В области виртуального издательства получили распространение два вида стилей: стили HTML и Cascading Style Sheets (CSS). Последнее название по-разному переводится на русский язык. Некоторые источники используют калькированное с английского имя “каскадные листы стилей”. Намного лучше передает существо дела термин “иерархические стилевые спецификации”. 
 Спецификация четвертой версии языка гипертекстовой разметки отдает решительное предпочтение иерархическим стилевым спецификациям, которые предлагает дизайнеру неизмеримо большие возможности контроля внешнего вида документа по сравнению с классическими стилями HTML Несмотря на приговор официальной инстанции в лице консорциума W3C ( World Wide Web Consortium), последние продолжают активно использоваться дизайнерами. 
 Во-первых, еще не вышли из употребления броузеры первых поколений, которые не поддерживают форматирование, заданное иерархическими стилевыми спецификациями. Для этих программ классические стили HTML дают неплохое решение проблем переносимости и согласованного форматирования. Во-вторых, далеко не всегда требуется мощность и точность иерархических стилей; для многих документов с простой планировкой вполне достаточно изобразительных возможностей HTML. 
 
 При работе со стилями HTML следует помнить о некоторых особенностях, естественно вытекающих из их природы. 
<li>Классические стили представляет собой сочетание дескрипторов HTML. Область их применения — простое форматирование и логическая разметка текстовых фрагментов. Они не предназначены для решения сложных оформительских задач, например изменения межстрочного расстояния или вида подчеркивания ссылок.</li> 
<li>Изменение иерархического стиля влечет за собой автоматическое обновление всех его применений, как в данном документе, так и в других документах. Классические стили ведут себя иначе. Модификация стилевых параметров не влечет за собой немедленное применение новой версии стиля. Все необходимые обновления текстовых фрагментов-носителей стилевого форматирования должны быть выполнены пользователем вручную.</li> 
<li>Несмотря на то что разработанные и документированные стили HTML могут быть использованы в других документах, это скорее, средство локального применения. Его естественным ареалом служит отдельный сайт или даже его часть, состоящая из нескольких страниц с однородным форматированием. Стили CSS — это более универсальное средство, ориентированное на перенос между документами, сайтами и платформами.</li> 
<h1>Выравнивание и отступы</h1>
Выравнивание — это одна из базовых операций форматирования текстов и гипертекстов. В программе Dreamweaver она работает так же, как в любом текстовом редакторе. Областью применения команды служат любые структурные блоки документа. Для текста таковыми являются абзацы, заголовки, предварительно отформатированный текст. 
 Стандартный язык гипертекстовой разметки поддерживает ограниченное число вариантов выравнивания: по левому краю, по правому краю и по центру. Четвертый вид выравнивания, по ширине, получил права гражданства в HTML сравнительно недавно. Популярные броузеры Internet Explorer и Netscape Navigator научились представлять текстовый массив в виде блока с выровненными краями, только начиная с четвертой версии. 
 В области подготовки документов для печати текстовое выравнивание иногда называют выключкой. Какие средства разметки применяет программа Dreamweaver для выключки? Абзацы выравниваются при помощи атрибута align дескриптора <р>, например: 
<р аlign="сеntег">Выравнивание по центру</р> 
Разнородные фрагменты документа, состоящие из нескольких абзацев, таблиц, списков и т. п., получают надлежащее выравнивание при помощи дескриптора разделения <div>. Этот контейнер является удобным средством структурного деления документа; с его помощью легко вычленить некоторую часть документа и придать ей особый статус или отличное от окружения форматирование. Следующий фрагмент кода иллюстрирует применение этого средства для одновременного выравнивания абзаца и простейшей таблицы, состоящей из одной ячейки. 
<div align="right"> 
<р >Выравнивание разнородных фрагментов </р> 
<table > 
<tr> 
<td>Ячейка таблицы</*td> 
</tr> 
</table> 
<img src="image/redaktirovanie-spiska-shriftov_1.gif" alt="Выравнивание и отступы">Начиная с четвертой версии, броузеры распознают и корректно обрабатывают четыре значения атрибута align: left (по левому краю), right (по правому краю), center (по центру) и justify (по ширине). К сожалению, выравнивание по ширине не поддержано средствами управления программы Dreamweaver. Чтобы назначить этот вариант выключки, надо задать выбранному фрагменту любой тип выравнивания из представленных в меню. Потом вручную, в режиме разметки, измените значение атрибута align на justify. 
 
 Выравнивание по ширине имеет один трудноискоренимый недостаток. Компенсация границ текстового блока выполняется за счет изменения пробелов между словами и буквами. Если длины строчек невелики, то деформации пробелов могут стать заметными. Этот эффект в типографском деле иногда называют “жидкими строками”. Профессиональные настольные издательские системы располагают целым арсеналом средств для борьбы с этим явлением. В HTML подобных средств почти нет, за исключением, пожалуй, неразрывного пробела (CTRL+SHIFT+ПРОБЕЛ). 
<img src="image/redaktirovanie-spiska-shriftov_1.gif" alt="Выравнивание и отступы">Выравнивание по ширине не отображается в окне документа Dreamweaver. Его можно увидеть только при помощи программ просмотра, начиная с четвертых версий Internet Explorer и Netscape Navigator. 
По технике исполнения операция выравнивания одна из самих простых. 
<li>Выберите текст или просто поместите курсор в любое место структурного блока.</li> 
<li>Дайте команду Text > Align (Текст > Выравнивание).</li> 
<li>Выберите из открывшегося меню один из предлагаемых видов выравнивания:</li> 
<li>Left (По левому краю);</li> 
<li>Right (По правому краю);</li> 
<li>Center (По центру).</li> 
 Операцию выравнивания часто приходится применять в процессе форматирования даже самых непритязательных по дизайну страниц. Поэтому данные команды поддержаны горячими клавишами и представлены в палитре Property Inspector (Инспектор свойств). Выравнивание по левому краю выполняется при помощи комбинации клавиш CTRL+ALT+SHIFT+L, по правом краю - CTRL+ALT+SHIFT+R, по центру - CTRL+ALT+SHIFT+C. В языке гипертекстовой разметки нет специального средства, единственным предназначением которого было бы создание горизонтального отступа. Но существует несколько дескрипторов, которые с разным успехом решают данную задачу. Самый чистый способ дает, видимо, дескриптор <blockquote>. По замыслу разработчиков языка, в этот контейнер следует заключать длинные цитаты. На практике многие дизайнеры используют его для создания горизонтальных отступов. 
 Программы просмотра отображают его содержимое с левым и правым полями, примерно равными 40 пикселам. Кроме того, сверху и снизу добавляется свободная полоса небольшого размера. Внутрь дескриптора разрешается добавлять коды разметки, например переходы на новую строку, горизонтальные линейки и, в том числе, другие теги этого типа. При помощи многократного применения дескрипторов <blockquote> можно добиться дополнительного сдвига и сжатия текстового блока по ширине. 
 
 Итак, горизонтальные отступы в программе можно создать при помощи дескриптора <blockquote>. 
<li>Выберите текст или поместите курсор в нужное место.</li> 
<li>Дайте команду Text > Indent (Текст > Отступ) или воспользуйтесь комбинацией клавиш CTRL+ALT+].</li> 
Убрать отступ можно следующим образом. 
<li>Выберите текст.</li> 
<li>Дайте команду Text > Outdent (Текст > Втяжка) или воспользуйтесь комбинацией клавиш CTRL+ALT+[.</li> 
Обе команды представлены специальными кнопками в Инспекторе свойств. Они расположены под кнопками выравнивания. 
<img src="image/redaktirovanie-spiska-shriftov_1.gif" alt="Выравнивание и отступы">Многократный сдвиг командой Indent (Отступ) ликвидируется в результате такого же числа применений команды Outdent (Втяжка). Селектор разметки показывает всю цепочку вложенных дескрипторов <blockquote>. 
<h1>
Dreamweaver 4
</h1>
<h1>Фоновые изображения</h1>
Вот уже несколько лет признанным законодателем мод в растровой графике является программа Photoshop. Каждая новая версия редактора предлагает новаторские решения и инструменты, которые, нередко после бурных обсуждений и критики, принимаются сообществом компьютерных художников, переносятся в программы-конкуренты и, в конце концов, становятся неписаными стандартами в области растровой машинной графики. 
 Сейчас недостатка в программах подготовки растровой графики нет. Пользователь может выбирать из нескольких десятков программных продуктов разных ценовых категорий и возможностей, но основная масса дизайнерской продукции создается в стиле, который условно можно назвать “стилем Photoshop”. Его отличительными признаками служат полупрозрачность и наложение слоев. Поддерживается этот стиль и в языке гипертекстовой разметки. 
 Язык HTML располагает различными инструментами для реализации наложения слоев и полупрозрачного объединения, самым простым из них является фоновое изображение. 
Процедура вставки фонового изображения рассматривалась в разделе, посвященном параметрам гипертекстового документа. Повторим здесь лишь ее основные этапы. 
<li>Дайте команду Modify > Page Properties (Изменить > Свойства страницы) ил и воспользуйтесь комбинацией клавиш CTRL+J. Еще один способ выдачи этой команды — это контекстное меню, которое вызывается щелчком правой кнопки мыши на любой свободной точке страницы.</li> 
<li>В поле Background Image (Фоновый рисунок) введите полный путь поиска для изображения. Процедура поиска и выбора графического файла ничем не отличается от стандартной, она запускается щелчком по кнопке Browse (Обзор).</li> 
Сведения о выбранном фоновом рисунке заносятся в дескриптор <body>, например тег <body background="image.jpg"> предписывает поместить на задний план рисунок, расположенный в одном каталоге с документом. А кодовый фрагмент <body background="www.images.com/source/back.gif"> делает фоном внешнее изображение с указанным адресом в Интернете. 
 
<img src="image/izmenenie-razmerov_1.gif" alt="Фоновые изображения"> На форматы фоновых рисунков накладываются обычные для растровой Web-графики ограничения. Изображением заднего плана может быть графический файл одного из трех форматов: GIF, JPEG или PNG. 
Комбинация графического изображения на заднем плане и текста с рисунками на переднем плане служит основой для множества популярных дизайнерских решений. Например, с помощью подходящего фона можно разместить на странице вертикальную линейку, оттенить изобразительный pяд переднего плана, сделать выворотный текст и пр. 
 Каким образом реагируют программы просмотра на фоновые рисунки? Если его размеры меньше, чем габариты окна, то броузер порождает несколько копий фона и покрывает ими все свободное пространство документа. Этот прием называется по-английски tiling, что часто переводят как мозаика. Это сильнодействующее дизайнерское средство имеет свои достоинства и недостатки. Случай, когда мозаичный рисунок фона вписывается в общий художественный замысел страницы или образующее изображение имеет однородную структуру и не порождает видимых границ, можно считать благоприятным. Он не требует каких-либо специальных мероприятий, поэтому обсуждать его не будем. 
Рассмотрим ситуацию, когда требуется скрыть пограничные швы между отдельными кирпичиками в укладке фона. Самое простое решение – использование рисунка достаточно больших габаритов, которое заведомо покроет всю свободную область страницы и, тем самым, позволит избежать создания мозаики. Размеры такого изображения должны быть рассчитаны на мониторы самого крупного формата. Если габариты страницы превысят размеры фона, возникнет мозаика в ее худшем варианте: с массивным усечением образующей фигуры. Кроме того, на пути увеличения размеров стоят ограничения, накладываемые низкой пропускной способностью каналов связи. 
Другой способ — это применение специальных методик удаления граничных швов. С этой проблемой сталкиваются не только разработчики Web-страниц, она хорошо знакома фотохудожникам, верстальщикам и специалистам в области допечаткой подготовки. Накоплена громадная коллекция приемов, методик, способов создания бесшовных фонов (seamless pattern). Существуют даже специальные программные дополнения к известным растровым редакторам и автономные программы, которые позволяют решить эту задачу. Основными средствами маскирования швов в редакторе Photoshop являются фильтр Offset (Сдвиг) и инструмент Rubber stamp (Штамп). 
<h1>Формат GIF</h1>
Формат GIF (Graphics Interchange Format) — это популярный растровый формат. Он предложен фирмой CompuServe в качестве средства обмена растровыми изображениями между платформами и системами и поэтому поддерживается большинством программ, работающих с растровой графикой. Формат можно считать одним из стандартов де-факто для публикации изображений в сети Интернет. Он поддерживает изображения, содержащие до 256 цветов, и сжатие информации по методу LZW. Это эффективный метод сжатия информации, позволяющий во многих случаях сократить объем графического файла в два и более раз. Название метода образовано по первым буквам имен авторов: Lempel, Ziv, Welch. В 1989 году опубликована пересмотренная спецификация формата, которая получила название GIF89а. Возможности формата были значительно расширены, в частности, появилась возможность хранить текстовые и графические данные в одном файле и работать с областями прозрачности, что позволяет создавать изображения непрямоугольной формы. Формат поддерживает запись изображений с чередованием строк. Оригинальное английское название этого свойства — interlacing, что иногда переводят как чересстрочная развертка. При визуализации чересстрочных отображений сначала выводится каждая восьмая строка, затем — каждая четвертая и т. д. Такая схема позволяет оценить изображение по его части. Пользователь может прервать прием картинки из Сети, не дожидаясь вывода всех строк образа. 
Еще одно полезное качество этого формата — это поддержка анимированных изображений. Некоторые программы способны записывать несколько кадров изображения в один файл, что позволяет оживить такую картинку средствами программы просмотра, без использования специальных программных дополнений. 
<img src="prim.gif" alt="Формат GIF">Изображения какого типа следует сохранять в формате GIF? На этот вопрос трудно дать ясный однозначный ответ. Проще привести примеры изображений, для которых такой выбор заведомо неудачен. Пейзажные многоцветные фотографии с плавными цветовыми переходами, игрой света и тени потеряют большую часть своей привлекательности и приобретут значительные искажения при сохранении в этом формате. И наоборот, это хороший выбор для кнопок, навигационных элементов Webстраницы, диаграмм, схем, деловой графики и пр. 
<h1>Формат JPEG</h1>
Развитие технической базы машинной графики, бурный прогресс средств мультимедиа, автоматизация допечатной подготовки цветных изданий и некоторые другие причины вызвали быстрый рост размеров графических файлов. Счет давно идет на мегабайты. Профессиональные дизайнеры и художники оперируют с изображениями размером в сотни мегабайт, рядовые пользователи обмениваются графическими файлами объемом в несколько десятков мегабайт; снимок экрана (screenshot), занимающий 5 Мбайт, в наше время может удивить только стойкого приверженца DOS, хранящего cвои произведения на пятидюймовых дискетах. 
 Для поиска лучшего способа записи больших объемов графической информации при международном комитете по стандартизации (750) была создана исследовательская группа Joint Photographic Experts Group (JPEG, объединенная экспертная группа по фотографии). Работа группы завершилась предложениями по созданию файлового формата с высокой степенью сжатия данных. Свое название формат унаследовал от наименования группы разработчиков. 
 В отличие от формата GIF формат JPEG поддерживает глубину цвета в 24 бита. Это значит, что он способен отображать более шестнадцати миллионов цветов и оттенков, что сравнимо с разрешающей способностью нетренированного человеческого глаза. 
 Формат JPEG существенно отличается от других графических форматов тем, что он поддерживает сжатие информации “с потерями”. Алгоритм сжатия находит и удаляет ту часть графических данных, которая не оказывает существенного влияния на восприятие реального изображения. Этот подход позволил добиться высокой степени сжатия без заметных искажений и существенной потери качества. 
Качество сжатого изображения зависит от преобладающих в рисунке или фотографии геометрических элементов. Сжатие не влечет критических последствий для областей с однородной или плавной заливкой, фоновых элементов, у которых отсутствуют резкие границы и скачки цвета. И наоборот, четкие контуры, линии, углы, шрифты с засечками, резкие переходы цвета или тона могут в результате сжатия смазываться или при просмотре создавать впечатление “вибрации”. 
 
 В большинстве программ, допускающих преобразование изображения в этот формат, степень сжатия допускает настройку. Предлагается шкала с плавным или дискретным переходом от высокого качества и слабого сжатия к противоположной точке, соответствующей низкому качеству и сильному сжатию. Проблема заключается в том, чтобы добиться компромисса между высокой степенью сжатия и приемлемым качеством. Обычно это достигается в результате экспериментов. Следует начинать со средних значений коэффициента сжатия и внимательно оценивать изображение, особенно его критичные области. Последние версии формата разрешают сохранение и передачу по сети графических файлов в чересстрочном виде. 
<img src="prim.gif" alt="Формат JPEG">При сохранении в формате JPEG можно добиться предельной степени сжатия. Алгоритм сжатия для этого формата позволяет записать изображение в гораздо более компактной форме, нежели при сохранении в формате GIF. Но за это приходится платить немалую цену. Сильное сжатие способно внести в картинку недопустимые искажения. Каждое сохранение файла даже с небольшой степенью сжатия вносит в картинку свою толику искажений. Многократное повторение этой операции способно привести к заметной деградации изображения. 
 Если рисунок в этом формате является частью гипертекстовой страницы, то его распаковку выполняет программа просмотра. Эта трудоемкая операция способна замедлить вывод на экран страницы, насыщенной графикой. И еще одна особенность формата JPEG, которую нельзя занести в его актив. Он не использует цветовые палитры, записывая любой рисунок с 24-разрядной глубиной цвета. Это расширяет изобразительные способности формата, но усложняет контроль сохранения соответствия цветов. Конечно, экран пятнадцатидюймового дисплея — это не глянцевая обложка цветного иллюстрированного журнала, в Интернете ошибки цветопередачи не столь принципиальны, как в издательском деле, но существуют и исключения. Таковыми, например, являются изображения тепловых полей критических зон организма в биомедицинской диагностике. 
<h1>Формат PNG</h1>
Благодаря поддержке компьютерной информационной службы CompuServe формат GIF стал одним из стандартов в области представления графической информации. Но этот формат не лишен недостатков. В наше время даже многие офисные пакеты работают с полноцветной графикой (24 или 32 бита на пиксел), не говоря о специальных графических редакторах и программах. Поэтому палитра формата GIF, которая не может превышать 256 цветов, не выглядит убедительно, а для многих задач просто не годится. 
 Формат PNG (Portable Network Graphics) — это растровый формат, который разработан как преемник формата GIF и, по замыслу авторов, должен занять его экологическую нишу. Перечень возможностей, заявленный в спецификации формата, выглядит впечатляюще. Этот способ хранения не защищен патентами, не требует лицензирования и финансовых отчислений, способен работать с альфа-каналами и сохранять информацию о прозрачных областях, поддерживает глубину цвета до 48 битов на пиксел, имеет эффективный алгоритм сжатия данных “без потерь”. Вместе с графической информацией в формате PNG можно сохранить метаданные или информацию об индексировании изображения (в текущей версии эта возможность не реализована). Эти данные используются поисковыми машинами, что значительно ускоряет и облегчает поиск файлов PNG в Интернете. Поддерживается чересстрочный режим вывода по методу Adam?. Метод назван по имени его изобретателя Адама Костелло, а цифра семь указывает на число проходов, за которые изображение полностью выводится на экран. 
 По сравнению с чересстрочной схемой формата GIF метод, Adam7 значительно ускоряет визуализацию растровых изображений. Он позволяет распознать транслируемую картинку после получения примерно трети графической информации, что значительно превосходит показатели формата GIF, которые равны примерно пятидесяти процентам. Факты убедительно свидетельствуют, что формат PNG выигрывает у GIF почти по всем показателям. Исключением является работа с анимированными изображениями, которая не предусмотрена в текущей версии формата. 
 
 Фирма Macromedia, разработчик такой набирающей популярность программы, как Fireworks, сделала формат PNG внутренним форматом этого мощного редактора. Все последние версии броузеров большой тройки (Intenet Explorer, Netscape Navigator и Opera) поддерживают данный способ хранения информации. 
<img src="prim.gif" alt="Формат PNG">Стоит ли использовать чересстрочный режим передачи изображений? 
В теории все выглядит довольно привлекательно. Страницы учебников по И7еЬ-графике единодушно утверждают: “Чересстрочный режим передачи ускоряет просмотр страниц, поскольку у наблюдателя появляется возможность получить представление о изображении по его части или выборочной совокупности строк”. В этом на первый взгляд логично м утверждении заключено скрытое противоречие. Если страница заинтересовала наблюдателя, то он дождется ее полной загрузки. Только после этого он получит полное представление о ее содержании и будет способен сохранить интересующий его материал на диске. 
Для случайного посетителя, который рассматривает данную страницу лишь как отправную точку для очередного броска в незнаемое, чересстрочный вывод, конечно, экономит время. Но разве на таких посетителей рассчитывал автор? Данный режим увеличивает размеры графического файла, а продолжительный чересстрочный вывод изображений большого размера оставляет стойкое впечатление неряшливости и способен испортить впечатление даже от репродукции классического художественного произведения. 
На вопрос: “Какой формат выбрать?” — трудно дать исчерпывающий ответ. Более того, любая развернутая рекомендация, претендующая на полноту и непротиворечивость, может быть опрокинута специально подобранным контрпримером. Назовем лишь несколько предельных случаев, когда выбор оптимального способа хранения диктуется не вкусами или пристрастиями, а объективными причинами. Если требуется сохранить цветовую гамму пейзажной фотографии с плавными переходами красок, тонкими цветовыми нюансами, то выбор формата JPEG становится единственно возможным. Только этот формат способен обеспечить предельное сжатие рисунка в тех случаях, когда размеры файла важнее качества изображения. Немного реальных альтернатив имеет и анимированное изображение. Оно должно быть записано в формате GIF, если только речь не идет о сложных динамических эффектах, для получения которых следует воспользоваться инструментарием языка Dynamic HTML или возможностями Flash-технологии. 
 Подавляющее число навигационных кнопок выполнено в стиле плакатной графики. Это значит, что в их дизайне прямые линии преобладают над кривыми, зоны сплошной заливки — над цветовыми градиентами, ограниченная цветовая палитра — над красочностью полноцветных цветовых моделей. Для таких рисунков хорошим выбором будут форматы PNG или GIF. 
<h1>Форматы графических файлов</h1>
Форматом файла называется набор правил, соглашений, стандартов для записи и хранения информации. Любой файловый формат — это специализированный язык со своим специальным словарем, орфографией и правилами пунктуации. Машинная графика является одним из старейших направлений информатики, но только с середины восьмидесятых годов начали действовать официальные группы по стандартизации графических форматов. В результате в наше время в обращении находятся десятки различных графических форматов, а если учесть их многочисленные версии и релизы, то это число уверенно превысит сотню. Но ситуация совсем не безнадежна. В этом вавилонском столпотворении форматов, их наречий и диалектов есть представители, которые претендуют на роль коммуникативных стандартов своеобразного эсперанто машинной графики. 
Форматы описания графики можно разделить на три основных класса. 
Растровые форматы. Растровые форматы служат для описания растровой графической информации. В их основе лежит битовая карта (матрица), на пересечении строк и столбцов которой располагаются элементы изображения — пикселы. С каждым пикселом связывается числовая характеристика, которая описывает его тон (если изображение черно-белое) или цвет (для цветного изображения). Главным преимуществом растровой формы представления информации является простота исходной концепции. Каждый отдельный пиксел изображения представляет самого себя, вне зависимости от его положения и роли, которую он играет в рисунке. Может быть, по этой причине, существует ограниченное число растровых форматов. Самыми распространенными из них являются: TIFF, BMP, GIF, JPEG, PNG. Графические компоненты всемирной Сети в подавляющем большинстве представлены последними тремя форматами. 
 Векторные форматы. Эти графические форматы служат для хранения сведений о векторных изображениях, которые представляют собой совокупность геометрических примитивов: линий, овалов, прямоугольников, дуг и др. Графические форматы этого типа состоят либо из описаний примитивов, либо включают в себя набор инструкций, команд для построения примитивов. Не исключается и комбинация этих способов. 
 
 В векторном виде хранят информацию системы автоматизированного проектирования, например AutoCAD, программы, которые создают иллюстративную графику, такие как Corel Draw. Плоттеры обрабатывают изображения только в векторных форматах. 
 До настоящего времени векторные изображения встречались на Web-страницах довольно редко. Сейчас ситуация стремительно меняется в связи с бурным распространением формата Shockwave Flash фирмы Macromedia. Этот богатый формат можно назвать собранием геометрических абстракций. Он специально разрабатывался для использования в Интернете и способен хранить гипертекстовые ссылки, графику, анимацию и пр. Для просмотра Flash-графики нужен специальный программный модуль. Эту программу небольшого размера свободно распространяет фирма Macromedia. 
Метафайлы. Метафайлы могут хранить информацию о растровых и векторных изображениях и о командах визуализации. В качестве примеров метафайлов можно назвать WMF, CGM, EPS. В числе немногих примеров использования метафайлов в Интернете в первую очередь следует назвать формат PDF (Portable Document Format), предложенный и активно продвигаемый фирмой Adobe. 
<h1>Интерактивные изображения</h1>
Восприятие графики страницы можно сделать более комфортным и наглядным, применив простейшие эффекты анимации. В наше время анимация элементов навигации стала своего рода стандартом де-факто; редкая страничка обходится без динамических, чувствительных к событиям кнопок или навигационных панелей. 
Известны различные способы оживления картинок. Самый простой - это вставка анимированного GIF-изображения. “Живые картинки” такого типа создаются в специальных программах, например Macromedia Fireworks или Adobe LiveMotion. Процедура их вставки не отличается от обычных растровых изображений. Программа Dreamweaver показывает такие изображения статично, увидеть динамику можно в броузере или при помощи специальной программы просмотра графики. 
 Еще одна методика заключается в сочетании возможностей языка HTML и сценариев JavaScript. В состав страницы встраиваются небольшие программы, написанные на языке JavaScript, которые выполняют мониторинг состояния страницы и запускают программы — обработчики событий. 
Например, событием может быть наведение указателя мыши на изображе-ние. По этому событию специальный сценарий может выполнить замену графической подложки. Эта простая схема лежит в основе множества динамических и анимационных эффектов. Например, можно просто менять цвет картинки или ее яркость, добавлять тень, создавать эффект нажатой кнопки, выводить поясняющую надпись и многое другое. 
Анимация такого типа называется на языке оригинала rollover image, что в дословном переводе означает “перекат изображения”. Устоявшегося перевода этого термина на русский язык пока что не существует. Будем называть изображения такого типа интерактивными, оставляя прилагательное динамический для анимации более сложного типа, созданной на основе языка Dynamic HTML или средствами приложения Flash. 
С технической точки зрения, интерактивные изображения мало отличаются от обычных по способу вставки и методам кодирования в языке HTML. 
Информация о рисунках такого типа записывается в обычный дескриптор <img>. Динамику изображению сообщает небольшая программа, написанная на языке JavaScript, которая при наведении указателя мыши автоматически заменяет базовое изображение указанной пользователем картинкой-дублером. Для этих целей программа Dreamweaver помещает в самое начало документа около двух десятков строк кода программы. 
 
 Вставка интерактивного изображения выполняется следующим образом. 
<li>Поместите текстовый курсор в позицию вставки.</li> 
<li>Дайте команду Insert > Interactive Image > Rollover Image (Вставка > Динамические изображения > Интерактивное изображение). Другой способ выполнения этой команды дает палитра объектов, содержащая в разделе Common (Общие) специальную кнопку. В любом случае откроется диалоговое окно, показанное на рис. 7.4.</li> 
<li>Заполните поля этого окна.</li> 
<li>Image Name (Имя изображения). Поле служит для ввода уникального имени данного объекта.</li> 
<li>Original Image (Исходное изображение). Здесь указывается исходное изображение, которое отображается на позиции вставки в обычном состоянии.</li> 
<li>Rollover Image (Интерактивное изображение). Здесь надо задать изображение-дублер. Оно выводится вместо исходного рисунка после наведения на него указателя мыши.</li> 
<li>Preload Rollover Image (Предварительная загрузка). Этот флажок включает режим предварительной загрузки изображения в кэш программы просмотра.</li> 
<li>When Clicked Go To URL (Переход по адресу). Здесь хранится команда гипертекстового перехода. Нужную ссылку можно ввести с клавиатуры или разыскать и выбрать целевой объект, щелкнув на кнопке Browse (Обзор).</li> 
<li>Завершите процедуру щелчком на кнопке ОК или нажатием клавиши ENTER.</li> 
<img src="image/7-4.jpg" alt="Интерактивные изображения"> 
Puc. 7.4. Вставка интерактивного изображения 
Программа Dreamweaver не показывает динамическую смену картинок; увидеть интерактивное изображение в действии можно после загрузки странички в программу просмотра. Напомним, что самый короткий способ вызвать броузер и загрузить в него документ — это нажатие клавиши F12. Описанный способ создания интерактивного изображения не единственный; программа располагает различными средствами, позволяющими добиться такого же эффекта. Так, при помощи палитры Behaviors (Режимы) можно задать первоначально статичному изображению намного более сложную динамику. 
<img src="image/izmenenie-razmerov_1.gif" alt="Интерактивные изображения">Размеры составляющих интерактивного изображения должны совпадать. Это несколько стеснительное ограничение можно считать платой за простоту создания таких объектов. Если габариты исходной картинки и ее заменителя различны, программа выполняет подгонку альтернативной картинки под размеры основной. 
<h1>Изменение размеров</h1>
Размеры изображения задаются атрибутами height и width дескриптора <img>. Это очень важные параметры, которые всегда следует указывать в явном виде. Они дают программе просмотра информацию о размерах картинки еще до ее полной загрузки. Броузер может отобразить текст страницы, не дожидаясь завершения передачи графических образов, что делает текст доступным для обозрения. Единицами измерения служат экранные пиксели. 
Программы просмотра способны самостоятельно изменять размеры растровых изображений — растягивать и сжимать загруженные картинки. Это позволяет использовать одну картинку в разном масштабе несколько раз, нa различных страницах одного сайта или в разных местах одной страницы. Для этого достаточно ввести новые размеры в полях Н (Высота) и W (Ширина) палитры Property Inspector (Инспектор свойств). Чтобы выполнить масштабирование вручную, требуется выбрать изображение и переместить граничный маркер. Для сохранения пропорций изображения в процессе деформации следует удерживать нажатой клавишу SHIFT. 
<img src="image/izmenenie-razmerov_1.gif" alt="Изменение размеров">Уменьшение изображения вручную имеет предел. Самая маленькая картинка, которую можно получить таким способом, имеет размер 8x8 пикселов. Чтобы выйти за эту границу, следует воспользоваться палитрой Property Inspector (Инспектор свойств). 
Значительное изменение размеров способно существенно ухудшить качество растрового изображения. При его увеличении растут размеры составляющих пикселей. Это может привести к чрезмерному огрублению картинки, при котором гладкие линии приобретают отчетливо видимые зубчатые края. Иногда это явление называют “лестничным эффектом” (jaggies). Уменьшение растрового рисунка связано с риском потери мелких деталей и нарушением визуального баланса. Векторная графика обладает намного более высокой устойчивостью к масштабированию. К сожалению, она имеет ограниченное хождение в сети Интернет. Из многочленных векторных форматов, число которых намного превосходит количество растровых, программа Dreamweaver способна непосредственно работать лишь с объектами в формате Flash (.SWF). 
Радикальные преобразования изображений лучше выполнять при помощи специализированных растровых редакторов, например программы Fireworks. Такие программы принимают специальные меры против увеличения размеров отдельных пикселов. 
<img src="image/izmenenie-razmerov_1.gif" alt="Изменение размеров">Чтобы вернуться к исходным размерам после проб или неудачных экспериментов с масштабированием, достаточно щелкнуть на кнопке (Сброс) в палитре Property Inspector (Инспектор свойств). 
<h1>Изображения</h1>
Редкий документ обходится без графических вставок. К числу немногих примеров можно отнести творения, написанные в жанре милицейского протокола или заявления в домоуправление. Но такие “документы” пишутся собственноручно, и вряд ли стоит прибегать для их составления к помощи программы Dreamweaver и публиковать в Сети. Один рисунок может заменить целый абзац, а удачно подобранная иллюстрация порой выразительнее пространных словесных описаний. 
 Виртуальное пространство Сети предоставляет невиданные ранее возможности для самовыражения. Репутацию успешного Web-дизайнера не требуется защищать дипломом художественного училища; чтобы прослыть искушенным в машинной графике пользователем, не обязательно владеть ремеслом рисовальщика. Сеть наводнена подборками рисунков, коллекциями логотипов, собраниями фотографий любой тематики и художественного направления. Требуется всего лишь терпение и толика художественного вкуса, чтобы сориентироваться в этом бесконечном виртуальном вернисаже и подобрать подходящий изобразительный ряд. 
<h1>Комментарий и название</h1>
С изображением можно связать текстовую информацию двух видов: название и комментарий. 
Выбранное название присваивается атрибуту name дескриптора <img> так, как в следующем примере: 
<img scr="10.jpg" name="Имя_рисунка"> 
Для его ввода служит поле, расположенное в левом верхнем углу палитры Инспектора свойств. Имя рисунка играет не столь заметную роль, как можно было бы предположить, следуя привычным аналогиям. Оно делает возможным обработку изображения сценариями, кроме того, некоторые приложения способны обращаться к рисункам по уникальному имени. 
Комментарий — это любая строка текста, которую пользователь желает связать с данным изображением. При их написании следует иметь в виду следующее. 
<li>Некоторые программы просмотра отображают комментарий до окончания загрузки изображения.</li> 
<li>Заметную долю программ просмотра составляют текстовые броузеры (например Lynx), которые выводят в позиции изображения только связанный с ним текст. Один из способов наладить работу в сети при медленном доступе — это отключить загрузку картинок.</li> 
<li>Самые распространенные программы просмотра Internet Explorer и Netscape Navigator отображают комментарий в виде всплывающей подсказки при наведении указателя мыши на изображение.</li> 
<li>Многие поисковые машины учитывают текст, связанный с изображениями, при индексации узлов и страниц.</li> 
Перечисленного вполне достаточно для того, чтобы отнестись к написанию текста комментария со всей ответственностью. Хороший комментарий должен давать представление о роли, смысле и использовании изображения. Идеальный комментарий — это полный семантический и практический эквивалент рисунка. 
Для ввода комментариев служит поле Alt (Альтернативный текст) палитры Property Inspector (Инспектор свойств). Они представлены атрибутом alt дескриптора <img>, например: 
<img src="10.jpg" аlt="Описание рисунка"> 
 
 
<h1>Обтекание</h1>
Плавающие изображения — это способ взаимной координации рисунков и текста, привычный для настольных издательских систем. Свое название такие изображения получили за отдаленное сходство в поведении с островками суши в окружении морских вод. Плавающие изображения способны до некоторой степени сохранять свое положение на странице гипертекстового документа в процессе его редактирования. “Потоки текста” обтекают графический фрагмент, сохраняя его стабильность и привязку к полям страницы. 
Точка вставки плавающего изображения и его фактическая позиция могут значительно расходиться. Если включен режим отображения невидимых объектов, программа Dreamweaver помечает позицию привязки картинки специальным символом, который называется Anchor Point for Aligned Elements (символ привязки выровненных элементов). Напомним, что отображение этого символа задается в основных настройках программы в разделе Invisible Elements (Скрыты элементы) (CTRL+U). Символ привязки плавающего изображения играет обычную для спецсимволов программы роль полномочного представителя объекта и его якоря. С его помощью можно выбирать и перемещать картинки, вызывать контекстное меню и Инспектора свойств, менять и, наконец, удалять изображения. 
Плавающее изображение сохраняет свое положение при перемещении символа привязки в текущем абзаце. Сдвиг якоря по вертикали влечет за собой перемещение его подопечного в том же направлении. 
Язык гипертекстовой разметки располагает специальными средствами, регулирующими расположение текста в стороне от плавающего изображения. По умолчанию строки занимают все свободное пространство страницы слева или справа от таких рисунков. Чтобы начать строчку не от границы изображения, а от страничного поля, требуется вставить дескриптор обрыва строки с дополнительным атрибутом clear. Рассмотрим все его значения. 
<table border=1> 
<tr> <td>Атрибут 
<td>
<td>Значение 
<td>
</tr>
<tr> <td>br clear=left> 
 
<td>
<td>Последующий текст начинается с новой строки, причем там, где нет плавающего изображения, выровненного по левой стороне. Смысл дескриптора хорошо передает его дословный перевод: левая сторона текста после дескриптора должна быть свободна от изображения 
<td>
</tr>
<tr> <td> <brclear=right> 
 
<td>
<td>Последующий текст начинается с новой строки, причем там, где нет плавающего изображения, выровненного по правой стороне 
<td>
</tr>
<tr> <td><brclear=all> 
<td>
<td>Текст, следующий за плавающим изображением, начинается со строки, в которой нет плавающего изображения ни слева, ни справа 
<td>
</tr>
</table><
 
На рис. 7.2 показано плавающее изображение с выключкой по левому краю. Оно обтекается текстом справа. Символ привязки, который не виден в программе просмотра, расположен перед словом “технология”. 
Если после слова “штампа” поставить дескриптор вида , то последующая часть фразы переносится на первую свободную строку после картинки, как показано на рис. 7.3. 
<img src="image/7-2.jpg" alt="Обтекание"> 
Рис. 7.2. Плавающее изображение 
 <img src="image/7-3.jpg" alt="Обтекание"> 
Рис. 7.3. Действие дескриптора перевода строки с очисткой левого поля 
К сожалению, программа Dreamweaver не располагает специальными элементами управления для вставки дескриптора перевода строки с атрибутом очистки. Видимо, самый экономичный способ ввести его в состав документа — это вставить обычный перевод строки при помощи комбинации клавиш SHIFT+ENTER, а затем перейти в режим просмотра кодов и ввести атрибут clear с нужным значением с клавиатуры. 
 Программа Dreamweaver не всегда корректно отображает действие дескрипторов перевода строки с атрибутами очистки. После загрузки документа в программу просмотра все параметры дескриптора работают правильно. 
<h1>Однопиксельные изображения</h1>
Гипертекстовые документы предоставляют дизайнеру огромную свободу для самовыражения. Перекрестные ссылки, мультимедийные объекты, программное управление встроенной графикой и процессом просмотра документа — таких мощных инструментов не может предложить традиционная технология подготовки печатных изданий. С другой стороны, язык HTML не располагает достаточно эффективными средствами управления типографскими параметрами “гладкого текста”. Многие задачи форматирования, которые в текстовых редакторах или настольных издательских системах решаются простым нажатием кнопки или вводом числа, заставляют Web-дизайнера прибегать к трюкам и ухищрениям. Такие параметры, как Межстрочное расстояние или горизонтальные отступы, не поддаются исчерпывающему контролю только средствами HTML. Задача управления типографскими параметрами получила исчерпывающее решение с появлением иерархических стилевых спецификаций (Cascading Style Sheet, CSS), но многие разработчики Web-страниц, с большим или меньшим на то основанием, до сих пор отказываются от использования этого мощного средства форматирования, предпочитая пользоваться хорошо проверенными обходными приемами. 
К числу бесспорных лидеров по числу полезных применений в разных проектных ситуациях принадлежит прозрачное изображение размером в один пиксел, записанное в формате GIF. Оценим накладные расходы: такое изображение занимает всего лишь 43 байта, на его передачу по сети требуется примерно одна секунда при скорости соединения в 28,8 Кбит/с. Когда картинка такого маленького размера используется в качестве вспомогательного монтажного элемента, она остается невидимой практически во всех ситуациях. Чтобы просто выбрать ее, требуется приложить определенные усилия. Один экземпляр изображения может быть использован в разных частях документа для решения многочисленных задач форматирования. 
 Перечислим несколько примеров “полезного совмещения специальностей” однопиксельного изображения. Это, прежде всего, отступы по горизонтали. В начало строки, требующей регулировки, помещается однопиксельное изображение. Искомую величину отступа можно получить за счет зонтального масштабирования рисунка. Для этого в поле Width палитры свойств надо ввести требуемое значение ширины. Другое, более предпочтительное решение этой задачи дает использование полей. Напомним, что горизонтальное поле задается в атрибуте hspace дескриптора <img>. В палитре свойств этому атрибуту соответствует поле с тем же названием. Следует помнить о том, что введенное значение откладывается в обе стороны от рисунка, поэтому значение атрибута hspace должно быть в два раза меньше, чем требуемый горизонтальный сдвиг. 
 
 Эту схему можно применить для задания требуемого межстрочного расстояния. Расстановка между словами нескольких однопиксельных изображений с подходящими значениями высоты или вертикальных полей позволяет добиться желаемого просвета между строчками текста. Данный прием требует от дизайнера больших усилий, чем регулирование горизонтальных отступов. Расположение слов в окне броузера зависит от ширины страницы и размеров рабочего окна программы просмотра. В предельном случае каждая отдельная строчка состоит только из одного слова. Если такая ситуация реальна, то сохранить требуемое межстрочное расстояние можно, разместив однопиксельные изображения после каждого слова! Прозрачное изображение минимального размера — это своеобразная матрица, которая способна продуцировать разнообразные дизайнерские решения, связанные с отступами и интервалами. Так, по этой схеме можно решить задачу создания заголовков с набором вразрядку, увеличить пробелы между словами и многое другое. 
<h1>Относительный путь поиска</h1>
Файлы с изображениями могут располагаться в любом месте файловой системы компьютера, локальной сети или даже находиться на удаленной машине. Когда изображение не принадлежит корневой папке сайта, программа считает ситуацию нестабильной и принимает ряд мер по ее изменению. Во-первых, в диалоговом окне Select Image Source (Выбрать изображение) файл получает временное имя, похожее на следующее: file:///E|/WEB/ 
Animation/Arrow.gif. Кроме того, программа выдает предупреждение о том, что данный файл находится вне корневой папки сайта, и настоятельно порекомендует сменить расположение рисунка и записать его в указанную папку. Трудно привести разумные доводы в пользу отказа от этого предложения Сайты, составные части которых прописаны в разных частях файловой системы, нельзя обслуживать средствами Диспетчера узла. Любое изменение отдельных компонентов может привести к разрыву связей и нарушению целостности узла. 
 После сохранения документа все временные имена заменяются постоянными. Тип адресации выбирается в поле Relative to (Относительно) диалогового окна Select Image Source (Выбрать изображение). Здесь предлагаются два способа так называемой относительной адресации. 
 <li>Relative to Document (Относительно документа). В этом случае за точку отсчета принимается положение данного документа. Адреса графических вставок задаются относительно его текущей позиции. Этот способ принимается по умолчанию.</li> 
<li>Relative to Site Root (Относительно корневого каталога узла). Для этого способа адресации относительным началом служит положение корневой папки сайта.</li> 
 Каждый из методов относительной адресации имеет свои ограничения области разумного применения. Подробнее эти вопросы обсуждаются в главах, посвященных ссылкам и созданию Web-узла. 
 <img src="prim.gif" alt="Относительный путь поиска">Программа Dreamweaver добавляет специальный префикс вида file:/// С|/ ко всем графическим вставкам не сохраненного гипертекстового документа. Настоятельно рекомендуется записать документ на диск перед его публикацией в Сети. Броузеры локального компьютера способны обработать ссылки такого вида, поэтому просмотр не сохраненной страницы на локальном компьютере может и не выявить никаких ошибок Для внешних программ просмотра этот префикс — источник ошибки. Они не смогут отработать та кую ссылку и вместо картинки подставят специальный значок, символизирующий разорванную связь. 
<h1>Панели навигации</h1>
Чтобы сделать информацию на сложном многостраничном сайте доступной, надо снабдить его развитой системой ссылок и наглядными средствами навигации, упрощающими перемещение по разделам узла. Навигационные панели – это один из способов снабдить Web-узел наглядными и систематичными средствами управления. 
Навигационная панель представляет собой развитие идеи интерактивных кнопок. Это несколько смежных динамических кнопок, расположенных в ряд и, в общем случае, обладающих более сложным поведением. Идея не нова. Каждый искушенный пользователь Интернета встречал на просторах всемирной Сети узлы с подобным расположением управляющих элементов. Преимущества такого решения достаточно очевидны — это, прежде всего, компактное расположение средств навигации и их наглядность. 
В программе Dreamweaver навигационные панели создаются на основе таблицы, которая играет роль каркаса для графических элементов, и нескольких интерактивных кнопок, служащих указателями гипертекстовых команд перехода. 
Чтобы во всей полноте использовать динамический потенциал навигационных панелей, требуется подготовить для каждого их элемента четыре изображения, желательно одинакового размера: 
<li>исходное изображение;</li> 
<li>изображение, которое появляется после наведения указателя;</li> 
<li>изображение, которое отображается после щелчка;</li> 
<li>изображение, появляющееся при наведении указателя мыши после нажатия кнопки.</li> 
Обязательным является только первый рисунок. Остальные изображения можно не указывать, что, естественно, сделает поведение интерактивной кнопки беднее. 
Вставка навигационной панели выполняется следующим образом. 
<li>Поместите текстовый курсор в место будущего расположения объекта.</li> 
<li>Дайте команду Insert > Interactive Images > Navigation Bar (Вставка > Динамические изображения > Навигационная панель). Эта команда откроет диалоговое окно Insert Navigation Bar (Вставка навигационной панели), показанное на рис. 7.5.</li> 
<img src="image/7-5.jpg" alt="Панели навигации"> 
Рис. 7.5. Вставка навигационной панели 
 <li>Выполните настройку навигационной панели с помощью элементов управления этого диалогового окна.</li> 
 
<li>Nav Bar Elements (Элементы навигационной панели). В этом списке перечислены имена всех кнопок панели. Чтобы добавить новый элемент. надо просто щелкнуть на кнопке со знаком +. Щелчок на кнопке со знаком — удаляет выбранный элемент панели. Кнопки со стрелками служат для изменения порядка интерактивных элементов навигационной панели.</li> 
<li>Element Name (Имя элемента). Это поле служит для ввода названия интерактивной кнопки.</li> 
<li>Up Image (Исходное изображение). Это обязательный элемент навигационной панели. Заданный здесь рисунок отображается при первой загрузке страницы.</li> 
<li>Over Image (Изображение при наведении). Этот рисунок появляется вместо исходного при наведении на него указателя мыши.</li> 
<li>Down Image (Изображение при нажатии). Рисунок, который выводит программа просмотра при щелчке мыши на исходном изображении.</li> 
<li>Over While Down Image (Изображение при наведении после щелчка). Этот рисунок появляется при наведении указателя на кнопку после щелчка на ней.</li> 
<li>When Clicked Go To URL (Переход по адресу). Это поле содержит команду гипертекстового перехода, связанную с данной интерактивной кнопкой. Раскрывающийся список In (Открыть в) позволяет выбрать окно или фрейм для загрузки целевого документа.</li> 
<li>Preload Images (Предварительная загрузка). Установка этого флажка разрешает отображение кнопки только после того, как загружены все связанные с ней изображения. Это прием позволяет избежать задержек в работе программных обработчиков событий.</li> 
<li>Show Down Image Initially (Показать вначале изображение при нажатии). Этот флажок меняет очередность показа элементов интерактивной кнопки. Если он установлен, то первым при загрузке страницы появляется изображение при нажатии. Например, при загрузке корневой страницы некоторого сайта целесообразно отображать кнопку, которая ей соответствует, нажатой.</li> 
<li>Insert (Вставка). Этот список служит для выбора способа расположения массива кнопок навигационной панели. Возможны два варианта: Horizontally (По горизонтали) и Vertically (По вертикали);</li> 
<li>Use Tables (Использовать таблицу). Этот флажок обеспечивает расположение всех элементов панели в общем каркасе, которым служит обычная таблица. Если этот флажок сброшен, навигационная панель превращается в простое собрание интерактивных кнопок, положение которых можно свободно менять.</li> 
 
<li> Завершите создание навигационной панели щелчком на кнопке ОК.</li> 
 Какие преимущества дает навигационная панель по сравнению с группой несвязанных интерактивных кнопок? Этот объект работает так же, как хорошо известные всем пользователям Windows группы переключателей. Нажатие одной кнопки автоматически освобождает ранее нажатую. Щелчок по интерактивной кнопке переводит ее в состояние Down (Нажата) и одновременно восстанавливает состояние Up (Обычное) у предыдущей. 
<img src="image/izmenenie-razmerov_1.gif" alt="Панели навигации">На каждой странице можно разместить лишь по одной навигационной панели. При попытке нарушить это ограничение программа Dreamweaver выведет предупреждение и предложит перейти к модификации существующей панели. Если пользователь ответит согласием, откроется диалоговое окно Modify Navigation Bar (Изменение навигационной панели), средствами которого выполняется вся работа по редактированию. 
Нормальный способ внести изменения в существующую навигационную панель — это команда Modify > Navigation Bar (Изменить > Навигационная панель). 
<h1>Поля</h1>
Для любого изображения, встроенного или плавающего, можно назначить поля. Применительно к картинкам гипертекстового документа этот термин имеет общепринятое толкование. Полями называют свободное пространство вокруг некоторого объекта или вдоль границ страницы. Установленные размеры полей хранятся в атрибутах vspace (вертикальные поля) и hspace (горизонтальные поля) дескриптора <img>. Единицами измерения служат пикселы. Размер верхнего и нижнего полей одинаковый, a правое всегда имеет тот же размер, что и левое. 
Технически операция задания полей выполняется очень просто. 
<li>Выберите изображение.</li> 
<li>Откройте Инспектор свойств (CTRL+F3).</li> 
<li>Введите требуемые значения в поля палитры V Space (Вертикальное поле) и Н Space (Горизонтальное поле).</li> 
<li>Нажмите клавишу ENTER или просто перейдите в окно документа.</li> 
 В большинстве числовых полей палитры Property Inspector (Инспектор свойств) разрешается вводить числовые величины с указанием единиц измерения. Программа Dreamweaver понимает следующие обозначения: in (дюймы), рс (пики), pt (пункты), cm (сантиметры), mm (миллиметры). Более того, допускается использование простейших арифметических выражений с использованием операций сложения (+) и умножения (*). Например, в поле Н Space (Горизонтальное поле) можно записать 2pt+lcm, после чего программа самостоятельно переведет все единицы измерения в пикселы и вычислит это выражение. В результате размер горизонтального поля для изображения окажется равным 51 пикселу. 
<h1>Предварительная загрузка</h1>
Тактику предварительной загрузки используют в тех случаях, когда изображение необходимо вывести на экран сразу, исключая задержку на его передачу по Сети. Часто при просмотре Web-страниц, возникают ситуации, когда даже небольшие паузы в процессе визуализации нежелательны, например, если изображение участвует в динамической сцене или взаимодействует с программными сценариями. Задержка с выводом такой картинки способна нарушить авторский порядок просмотра страницы. 
В таких случаях рисунок сначала полностью загружается в некоторое промежуточное хранилище — кэш или буфер — и только после этого ставится доступным для последующей обработки. 
Включить режим предварительной загрузки можно следующим образом. 
<li>Выберите изображение.</li> 
<li>Откройте палитру Behaviors (Режимы). Для этого дайте команду Window > Behaviors (Окно > Режимы) или воспользуйтесь комбинацией клавиш SHIFT+F3.</li> 
<li>Щелчком по кнопке со знаком + откройте меню с перечнем доступных режимов поведения.</li> 
<li>Выберите из этого списка пункт Preload Images (Предварительная загрузка изображений). Откроется одноименное диалоговое окно.</li> 
<li>В диалоговом окне Preload Images (Предварительная загрузка изображений) щелкните на кнопке, отвечающей за пополнение списков. Разработчики программы используют для кнопок такого типа стандартное изображение — знак +.</li> 
<li>В нижнее поле введите полное имя графического файла, хранящего изображение, или запустите процедуру его поиска щелчком на кнопке Browse (Обзор). Имя файла заносится в список имен файлов, выбранных для предварительной загрузки.</li> 
<li>Подтвердите заданные установки щелчком на кнопке ОК.</li> 
 Описанная процедура — это стандартный способ предварительной загрузки в программе Dreamweaver. Он основывается на использовании специальной короткой программы, написанной на языке JavaScript. Все версии популярных броузеров Internet Explorer и Netscape Navigator, начиная с третьей, корректно обрабатывают это предписание. 
<img src="image/izmenenie-razmerov_1.gif" alt="Предварительная загрузка">Существует технический прием, позволяющий добиться предварительной загрузки, не прибегая к помощи сценариев. Для этого надо в начале страницы, в подходящем для этого месте, поставить рисунок и задать ему минимальный размер, например один пиксел по ширине и столько же по высоте. При загрузке страницы изображение запишется в кэш броузера, но в силу крошечных габаритов не будет заметно для наблюдателя. При последующих штатных обращениях к этому рисунку используется предварительно загруженная копия, хранящаяся в кэше программы просмотра. 
<h1>Рамка</h1>
Дополнительная обрамляющая рамка вокруг изображения — это дизайнерский прием ограниченного применения. Одной из немногих ситуаций, когда ее использование можно считать оправданным, является расположение в ряд нескольких картинок небольшого размера. Здесь рамка служит видимой границей между соседними рисунками. 
Толщина рамки измеряется в пикселах, а ее цвет — это цвет текста, заданный по умолчанию в основных настройках страницы. Нулевая толщина означает отсутствие этого элемента оформления. Толщина рамки присваивается атрибуту border, например: 
<img src=" 10.jpg" border="1"> 
Для ввода этого параметра служит поле Border (Рамка) палитры Property Inspector (Инспектор свойств) (CTRL+F3). 
<img src="image/izmenenie-razmerov_1.gif" alt="Рамка">Рамки вокруг изображений способны ввести в заблуждение начинающего Web-дизайнера. Изображение, которое представляет команду гипертекстового перехода, может быть обведено рамкой ярко-синего цвета. Такая рамка — это не элемент декодирования рисунков, а способ выделения активных областей гипертекстовых ссылок. Программа Dreamweaver обычно не создает такую рамку. Ввод ненулевого значения в поле Border (Рамка) делает рамку рисунка-ссылки видимой. 
<h1>Редактирование изображений</h1>
Большинство ресурсов, предназначенных для работы с графикой гипертекстового документа, сосредоточено в одном месте — на палитре Property Inspector (Инспектор свойств) (CTRL+F3). Эта контекстно-чувствительная палитра меняет свой вид и предлагаемый набор инструментов в зависимости от выбранных объектов документа. На рис. 7.1 показано ее состояние при работе с графикой. 
<img src="image/map.jpg" alt="Редактирование изображений"> 
Рис. 7.1. Редактирование параметров изображения 
Рассмотрим элементы управления палитры. 
<li>Image (Изображение). Это информационное поле. Оно показывает размер изображения и его эскиз в виде значка небольшого размера.</li> 
<li>Поле, расположенное ниже раздела Image (Изображение), служит для задания имени рисунка. Текстовая строка, введенная здесь, соответствует значению атрибута name дескриптора <img>.</li> 
<li>W (Ширина). Ширина изображения в пикселах.</li> 
<li>Н (Высота). Высота изображения в пикселах.</li> 
<li>Src (Источник). Поле хранит путь поиска для графического файла, временный или относительный. Его можно ввести непосредственно с клавиатуры или использовать для этого стандартные средства автоматизации программы: маркер-указатель, расположенный справа от поля, и кнопка с изображением папки для вызова процедуры указания файлов. Если перетащить маркер на изображение, расположенное в окне документа или в Диспетчере узла, то оно заменит текущее. Щелчок на кнопке запускает стандартную процедуру поиска и выбора файлов.</li> 
<li>Link (Ссылка). Этот раздел палитры предназначен для определения внешних ссылок. В этом случае изображение становится визуальным образом команды перехода, а для указания целевого объекта надо выделить его при помощи диалогового окна Select File (Выбрать файл) (запускается щелчком на кнопке) или выбрать, перетащив на его имя маркер-указатель.</li> 
<li>Align (Выравнивание). Этот список задает девять видов горизонтального и вертикального выравнивания.</li> 
<li>Alt (Альтернативный текст). Это поле хранит текстовый комментарий, который связывается с изображением. Здесь может быть записана любая информация, относящаяся к картинке.</li> 
 
<li>V Space (Вертикальное поле). Задает размер свободного пространства по вертикали над и под изображением.</li> 
<li>Н Space (Горизонтальное поле). Хранит размер свободного пространства слева и справа от изображения. Единицами измерения для данного и предыдущего полей служат пикселы.</li> 
<li>Target (Назначение). Список объединяет команды, задающие способ вывода целевого документа. Перечислим их.</li> 
<li>_blank. Этот пункт задает загрузку целевого документа в новое окно броузера, не имеющее имени. Это, в частности, делает невозможной ссылку на это окно.</li> 
<li>_self. Задает загрузку целевого документа в то же окно, откуда пришел вызов. Это значение установлено по умолчанию.</li> 
<li>_parent. Загружает документ во фрейм, который является родительским для фрейма, содержащего ссылку. Для документов без фреймов имеет тот же смысл, что и предыдущая команда.</li> 
<li>_top. Команда загрузки документа в окно программы просмотра без учета существующей фреймовой структуры.</li> 
<li>Low Src (Изображение низкого разрешения). Поле задает графический суррогат для целевого изображения. Это картинка, которая имеет низкое разрешение и небольшую глубину цвета, а следовательно, меньшие размеры и более высокую скорость загрузки. Она замещает целевое изображение только на время загрузки последнего.</li> 
<li>Border (Рамка). Поле задает толщину граничной рамки в пикселях. Нулевая толщина означает отсутствие рамки.</li> 
<li>Edit (Изменить). Кнопка запуска внешнего растрового редактора, предназначенного для редактирования изображений. Вид редактора задается в основных установках программы, по умолчанию таковым является программа Fireworks. После завершения правки система Dreamweaver автоматически обновляет вид документа, учитывая изменения, происшедшие с изображением. </li> 
<li>Reset (Сброс). Восстанавливает исходные габариты изображения, измененные перетаскиванием граничных маркеров или заданием новых значений в полях Н (Высота) и W (Ширина) палитры.</li> 
 Раздел палитры под общим названием Map (Карта) предназначен для работы с картами ссылок. Этот вопрос рассматривается в разделе – Карты ссылок. 
<h1>Внешний графический редактор</h1>
Если требуется внести существенные изменения в иллюстрацию и тех, по сути, косметических средств редактирования рисунков, которыми располагает программа Dreamweaver, оказывается недостаточно, следует обратиться к специальному растровому редактору. 
 С изображениями любого типа (динамическими, статическими, анимированными), вставленными в гипертекстовый документ, можно связать специализированную программу, средствами которой и выполняются все радикальные графические преобразования: изменение цвета, применение фильтров, масштабирование образа (resampling) и пр. По умолчанию такой программой является редактор Macromedia Fireworks. 
Существует несколько способов его вызова непосредственно из окна документа: 
<li>двойной щелчок мышкой на изображении при нажатой клавише CTRL;</li> 
<li>вызов контекстного меню при помощи щелчка правой кнопки мыши на изображении и выбор команды Edit With Fireworks 4 (Редактировать с помощью программы Fireworks 4) или Edit With > Browse (Редактировать с помощью > Обзор); первая из команд вызывает редактор, установленный по умолчанию, вторая запускает процедуру поиска внешней программы;</li> 
<li>выбор изображения, открытие палитры Property Inspector (Инспектор свойств) и щелчок на кнопке Edit (Изменить);</li> 
<li>двойной щелчок на имени файла в окне Диспетчера узла.</li> 
 Внешний редактор, ассоциированный с программой Dreamweaver, дает несколько заметных преимуществ при работе с Web-графикой. Любой из перечисленных способов вызова редактора автоматически загружает в него выбранное изображение. Существенно упрощается обновление изображений после внесения в них изменений. Для этого не требуется их повторной загрузки. 
 После окончания редактирования в программе Fireworks надо щелкнуть на кнопке Done (Готово) и вернуться в окно документа. Этого достаточно для обновления рисунка. 
 Ассоциированный редактор не запрещает использовать для редактирования Web-графики любую внешнюю графическую программу. Но в этом случае пользователь лишен тех преимуществ, которые дает работа с присоединенным редактором. 
 
<img src="image/izmenenie-razmerov_1.gif" alt="Внешний графический редактор">Чтобы внести в гипертекстовый документ изменения рисунка, внесенные внешним редактором, надо сохранить их в файле и вернуться в документ. Если рисунок не обновился, то следует выбрать его и щелкнуть на кнопке Reset Size (Сброс размеров) в Инспекторе свойств. 
Выбор внешнего редактора 
Несмотря на то, что программа Fireworks обладает всеми необходимыми инструментами для создания Web-графики, пользователь может связать с системой Dream weaver любой растровый редактор по своему выбору. Следует отметить, что такой выбор способен внести определенное рассогласование в гармоничную совместную работу. 
 Программы Fireworks и Dream weaver разработаны одной фирмой, которая заложила в них возможности глубокой интеграции и информационной” обмена. Но сердцу, как говорится, не прикажешь. Чтобы связать с изображениями гипертекстового документа другую программу, надо действовать следующим образом. 
<li>Откройте диалоговое окно настройки программы Dreamweaver. Этого можно добиться двумя способами:</li> 
<li>командой Edit > Preferences (Правка > Настройки);</li> 
<li>по команде Edit > Edit with External Editor (Правка > Редактировать во внешнем редакторе).</li> 
<li>В диалоговом окне Preferences (Настройки), показанном на рис. 7.6, откройте категорию File Types/Editors (Типы фай лов/Редакторы).</li> 
<li>В разделе Extensions (Расширения) выберите тип графических файлов, для которых будет назначен новый внешний редактор. Если нужное расширение не значится в списке, щелкните на кнопке со знаком +, что означает добавление нового пункта, и введите с клавиатуры его обозначение.</li> 
<img src="image/7-6.jpg" alt="Внешний графический редактор"> 
Puc. 7.6. Выбор внешнего редактора 
 <li>Назначьте редактор для выбранного типа файлов в разделе Editors (Редакторы). Для этого щелкните на кнопке со знаком +. Эта команда инициирует обычную процедуру поиска файлов. Используя стандартные средства Windows, найдите исполняемый файл растрового редактора и выберите его.</li> 
<li>Не снимая выбора с имени редактора, щелкните на кнопке Make Primary (Сделать основным), если требуется сделать его основным.</li> <li>Закончите процедуру щелчком на кнопке ОК.</li> 
<h1>Вставка изображений</h1>
Рисунки, иллюстрирующие содержание Web-страницы, принято делить на две группы: встроенные (inline) и плавающие (floating). Эта классификация основана на привязке изображений к определенным элементам документа. Встроенные графические элементы во многих отношениях ведут себя как необычные литеры нестандартного размера и вида. Они занимают определенную позицию в массиве текста, меняют свое положение в процессе редактирования документа, переходят на другую строку по мере ввода текста, на них действуют команды выравнивания и отступа и т. д. 
 Плавающие изображения обладают большей самостоятельностью, поскольку сохраняют привязку не к текущей позиции, а к полям страницы. Программа Dreamweaver способна работать со всеми тремя растровыми форматами, нашедшими применение в WWW 
Вставка изображения - это технически простая операция; программа располагает несколькими различными путями ее выполнения. Сначала дайте команду вставки любым удобным способом. 
 <li>Откройте палитру Objects (Объекты), перейдите в раздел Common (Общие) и щелкните на кнопке Insert Image (Вставка изображения), которая расположена в левом верхнем углу палитры. Эту кнопку можно просто перетащить на окно документа и бросить в том месте, где должен быть расположен рисунок.</li> 
<li>Дайте команду Insert > Image (Вставка > Изображение).</li> 
<li>Воспользуйтесь комбинацией клавиш CTRL+ALT+I.</li> 
<li>Перетащите изображение из палитры Assets (Фонды) на нужную позицию в окне документа.</li> 
<li>Перетащите значок изображения из окна диспетчера сайта в окно документа.</li> 
<li>Перетащите изображение с Рабочего стола в нужное место окна документа. Здесь источником может быть даже окно программы просмотра.</li> 
 При использовании одного из первых трех способов на экране появится диалоговое окно Select Image Source (Выбрать изображение), средствами которого надо найти и выбрать нужный графический файл. Это стандартная для Windows процедура, которая выполняется при открытии файлов в любом приложении. Следует отметить, что это диалоговое окно содержит два дополнительных поля: URL (Адрес URL) и Relative To (Относительно), которых нет при обычной процедуре поиска файлов. Первое поле служит для записи Интернет-адресов графических файлов, расположенных на удаленных компьютерах. Введенный здесь адрес автоматически повторяется в поле File Name (Имя файла). Второе поле предназначено для выбора способа относительной адресации. Подробнее этот вопрос обсуждается в следующем разделе. 
 
 Параметры изображения задаются при помощи палитры Property Inspector (Инспектор свойств). 
<img src="prim.gif" alt="Вставка изображений">При вставке изображения в не сохраненный документ программа Dreamweaver создает временную ссылку на файл вида file://. После сохранения документа эта временная ссылка преобразуется в обычное для программы относительное путевое файловое имя. 
Положение и свойства вставленного в гипертекстовый документ изображения записываются при помощи одиночного дескриптора <img>. Этот дескриптор может включать в себя многочисленные атрибуты, задающие свойства изображения. Девять атрибутов, как в следующем примере, — это далеко не предел: 
<img src="Temp/anim 1.gif" width="170" height="l80" аlt="Пояснение" border="1" name="ins" align="right" vspace="50" hspace="60"> 
<img src="prim.gif" alt="Вставка изображений">Рисунки — это не только украшение страницы, ее декоративная или оформительская часть. Они способны выполнять многочисленные вспомогательные функции. Приведем несколько примеров. Небольшое прямоугольное изображение, залитое цветом фона, — это неплохое средство регулирования абзацных отступов. Достаточно в самом начале абзаца поместить дескриптор типа <img src=”file_name.gif”>, где file_name.gif— имя файла, хранящего картинку. Прозрачный рисунок, невидимый для наблюдателя, неплохо справляется с ролью регулятора, настраивающего планировку страницы. Если поместить такое изображение в критическую область документа, то при помощи изменения его размеров можно разгонять строки, сдвигать объекты, в общем, выполнять тонкую настройку страничного макета. Небольшое по высоте, но достаточно широкое изображение, размещенное на заднем плане страницы, представляет собой неплохое решение проблемы размещения вертикальных линеек (подробнее см. раздел “Фоновые изображения”). 
<h1>Выравнивание</h1>
Если слова, эти дисциплинированные бойцы за ясность мысли, краткость изложения, всегда расставляются в ряды и выстраиваются по смысловому ранжиру, то изображения имеют намного большую свободу в пространстве документа. Логично предположить, что для определения их положения на странице существует больше возможностей выравнивания, чем для текста. Подобно тексту, рисунки могут быть выровнены по горизонтали. Этот способ координирования имеет смысл почти для всех объектов гипертекстового документа, в том числе и для встроенной графики. Все обычные виды текстового выравнивания, за исключением выключки по ширине, могут быть применены для графических объектов, интегрированных в текстовый массив. Кроме того, рисунки допускают и несколько типов выравнивания по вертикали. Для плавающих изображений можно регулировать способ обтекания текстом и привязку к элементам дизайна страницы, что также можно рассматривать как выравнивание. 
Выравнивание по горизонтали 
Встроенное в текст изображение в определенной степени является его частью. Это утверждение полностью сохраняет свою справедливость в отношении выравнивания. Команды выключки действуют на все содержимое абзацев или структурных блоков, включая и внедренные рисунки. Чтобы добиться их сдвига по горизонтали, достаточно поместить текстовый курсор в любое место структурного блока и применить одну из команд меню Text > Align (Текст > Выравнивание). В плане кодирования здесь также нет никаких отличий от выравнивания текстовых фрагментов. Выбранный тип выключки присваивается атрибуту align, который может быть частью дескриптора абзаца <р> или входить в дескриптор раздела <div>. 
Выравнивание по вертикали 
Размеры литер и встроенной графики могут значительно отличаться, поэтому требуются средства, влияющие на вертикальное положение изображений и позволяющие добиться более гармоничного расположения иллюстраций и связанного с ними текста. В языке HTML эти задачи решают команды выравнивания по вертикали. 
 Носителем информации о выбранном способе выравнивания является атрибут align дескриптора <img>. Так, следующий кодовый фрагмент задает для изображения, записанного в файле anim.gif, вертикальное выравнивание по нижнему краю рисунка: 
 
<img src="anim.gif" width="50" height="60" align="bottom"> 
 Выравнивание изображения по вертикали настраивается следующим образом. 
<li>Выберите рисунок.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств).</li> 
<li>Выберите тип выравнивания рисунка по вертикали из списка Align (Выравнивание), расположенного в правом верхнем углу палитры.</li> 
Все разделы этого списка приведены в следующей таблице 7.1. 
Таблица 7.1. Тип выравнивания рисунка по вертикали 
<table border=1>
<tr> <td>
Вид выравнивания по вертикали 
</td>
<td>
Результат 
</td>
</tr>
<tr> <td>
Browser Default (По умолчанию для броузера) 
</td>
<td>
Если выбрать этот пункт, то в дескриптор <img> не включаются атрибуты выравнивания. Вопрос о выравнивании по вертикали оставляется на усмотрение программы просмотра. Большая часть броузеров принимает по умолчанию вариант Baseline (По базовой линии) 
</td>
</tr>
<tr> <td>
Baseline (По базовой линии) 
</td>
<td>
Нижний край рисунка выравнивается по базовой линии текста 
</td>
</tr>
<tr> <td>
Тор (По верхнему краю) 
</td>
<td>
Верхняя граница изображения выравнивается по верхней части самого высокого объекта, расположенного в данной строке 
</td>
</tr>
<tr> <td>
Middle (По середине) 
</td>
<td>
Середина графического объекта выравнивается по базовой линии текста 
</td>
</tr>
<tr> <td>
Bottom (По нижнему краю) 
</td>
<td>
Нижний край рисунка выравнивается по базовой линии текста 
</td>
</tr>
<tr> <td>
Text Top (По верхнему краю символов) 
</td>
<td>
Верхняя граница изображения выравнивается по верхней части самого высокой литеры, расположенной в данной строке 
</td>
</tr>
<tr> <td>
Absolute Middle (По середине строки) 
</td>
<td>
Середина изображения выравнивается по середине текста или других объектов данной строки 
</td>
</tr>
<tr> <td>
Absolute Bottom (По нижнему краю строки) 
</td>
<td>
 
Нижняя граница изображения выравнивается по нижним выносным элементам букв данной строки. Пусть текстовая строка состоит из одной литеры р. При выравнивании по нижнему краю (Bottom) базой служит основное очко литеры. Для данного способа в качестве базы выбирается самая нижняя точка буквы 
</td>
</tr>
<tr> <td>
Left (По левому краю) 
</td>
<td>
Изображение выравнивается по левой части окна броузера или ячейки таблицы, в результате текст текущего абзаца обтекает картинку справа 
</td>
</tr>
<tr> <td>
Right (По правому краю) 
</td>
<td>
Изображение выравнивается по правой части окна или ячейки таблицы. Массив текста обтекает рисунок слева 
</td>
</tr>
</table> 
<h1>
Dreamweaver 4
</h1>
<h1>Активация команд меню</h1>
Гипертекстовые команды, соответствующие пунктам меню переходов, запускаются сразу при их выборе. Если включить в состав меню переходов кнопку Go (Перейти), то данное положение не изменится, что нельзя признать привычным для большей части пользователей Windows. Сохранить прерогативу запуска команд за кнопкой перехода (Go) можно следующим образом. 
<li>Выберите меню переходов в окне документа в режиме планировки.</li> 
<li>Откройте палитру Behaviors (Режимы) (SHIFT+F3).</li> 
<li>Не снимая выбора с меню, удалите все назначенные для него режимы Они представлены в центральной части палитры. Для удаления режима работы меню достаточно выбрать его и щелкнуть на кнопке со знаком -.</li> 
<img src="image/8-2-sozdanie-ssylok_1.gif" alt="Активация команд меню">Иногда первый пункт меню выполняет функции названия или является предложением выбрать одну из возможных альтернатив. Такой paздел создается обычным образом, но вместо целевого объекта в нем надо указать пустую ссылку(#). Кроме того, целесообразно установить флажок Select First Item After URL Change (Выбрать первый пункт после изменения адреса), чтобы информация первого пункта была доступна всегда. 
Стандартная кнопка перехода по внешнему виду хорошо вписывается в дизайн технического чертежа или строительной схемы - ее “печатный профиль” подходит не для всякой гипертекстовой страницы, претендующей на вкус или художественное оформление. 
Превратить в кнопку перехода выбранное пользователем изображение можно следующим образом. 
<li>Вставьте изображение в нужное место страницы.</li> 
<li>Выберите его.</li> 
<li>Откройте палитру Behaviors (Поведение) (SHIFT+F3).</li> 
<li>Откройте меню режимов работы щелчком на кнопке палитры, на которой изображен знак +.</li> 
<li>Выберите из этого меню пункт Jump Menu Go (Переход по меню). На экране появится одноименное диалоговое окно.</li> 
<li>В единственном списке этого диалогового окна выберите имя меню переходов.</li> 
<li>Завершите процедуру щелчком на кнопке ОК.</li> 
<h1>Использование символов привязки</h1>
И процессе просмотра длинных документов, занимающих больше экрана в программе просмотра, приходится выполнять прокрутку. Процедура эта несложна, но может оказаться утомительной. Не случайно большую популярность в последнее время приобрели мыши со специальным колесиком для пролистывания протяженных документов Интернета. 
Во многих случаях неплохой альтернативой прокрутке могут служить перекрестные ссылки, построенные на основе символов привязки и команд перехода на эти объекты. Уже можно говорить об определенной традиции, которая сложилась в создании внутренних перекрестных ссылок. Обычно в конце каждого раздела ставят команду перехода к его началу и/или к общему оглавлению виртуального документа. 
 Пусть в документе расставлены все необходимые символы привязки. Coздание внутренних ссылок производится следующим образом. 
<li>Выберите изображение или текст, которые должны стать актинвной областью ссылки.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств). </li> 
<li>В поле Link (Ссылка) введите имя символа привязки, предварив его л \ • рой #, например #top.</li> 
<img src="image/8-2-sozdanie-ssylok_1.gif" alt="Использование символов привязки">Некоторые броузеры никак не реагируют на команду внутреннего перехода, если ссылка и символ привязки расположены в пределах видимой части экрана. 
Техника перетаскивания маркера-указателя — это гибкий и наглядный способ создания ссылок на фрагменты внешних документов. Документы, которые являются источником и приемником ссылки, прокручиваются независимо, поэтому их легко настроить таким образом, чтобы сделать видимыми и источник будущей ссылки (в одном окне), и символ привязки (в другом окне). Перетаскивание маркера-указателя автоматически создает ссылку с примерным адресом document.htm#fragment, где document.htm – имя документа приемника, a fragment — название символа привязки, помечающего его часть. 
<h1>Карты ссылок</h1>
В наше время многие масштабные Web-узлы помещают на свои стартовые страницы так называемые карты ссылок. Это графическое изображение, разделенное на активные области, каждая из которых представляет гипертекстовую команду перехода на тематический раздел или группу связанных страниц. Пример такого оформления дает сайт японской компании Seiko, среди компьютерной общественности больше известной своей торговой маркой Epson. Филиалы компании разбросаны по всему свету; на стартовой странице Web-узла ее промышленные отделения представлены контурами стран и частей света на карте мира. Часто встречаются карты ссылок, представляющие панели инструментов перемещения или наборы функциональных кнопок. 
 Существует два типа карт: обрабатываемые клиентом (client-side) и обрабатываемые сервером (server-side). Эти термины говорят о различных способах хранения информации, на которую ссылается карта. Когда пользователь щелкает по активной зоне карты (hotspot), обрабатываемой на стороне сервера, то координаты указателя передаются Web-серверу, который по ним определяет адрес URL и возвращает его броузеру. Карты стороны клиента работают примерно по такой же схеме, но их интерпретацию выполняет сама программа просмотра. 
 Изображения-карты, обрабатываемые сервером, — это более старый способ представления информации. Его поддерживают все броузеры, начиная с самых первых версий. Карты, обрабатываемые на стороне клиента, – это нововведение последних нескольких лет. Броузер Netscape Navigator поддерживает этот способ представления информации, начиная со второй версии, Internet Explorer — с третьей. 
 Карты стороны сервера работают медленнее, поскольку требуют дополнительных ресурсов сервера на расшифровку данных об активных областях и связанных с ними адресах Интернета. Кроме того, они сложнее в установке, требуют знания средств CG1(Common Gateway Interface) и правил конфигурации сервера. Многие провайдеры ограничивают использование CGI-сценариев, поэтому могут потребоваться даже переговоры с администрацией сервера. В настоящее время серверные карты практически вытеснены картами ссылок стороны клиента. 
 
 Для пользователя эти тонкости способов работы и детали правил установки карт не имеют большого значения. Единственное видимое различие между ними заключается в информации, которая выводится в строке состояния программы просмотра. Для карт, обрабатываемых на стороне сервера, там отображаются текущие координаты указателя, при работе с картами клиента — адреса URL. 
Способ кодирования карты ссылок, принятый в HTML, достаточно прост и логичен, несмотря на свою внешнюю громоздкость. Для объектов подобного типа надо задать следующие параметры. 
 Изображение, представляющее карту, и его расположение в пределах документа. В этой части определения карты почти нет различий с обычными рисунками. Основа карты задается при помощи стандартного дескриптора <img>. 
 Объявление карты. Это делается при помощи специального дескриптора: <тар пате="Имя_карты">. 
 Описание формы активных областей, координаты и адреса URL связанных документов, например: 
<area shape="rect” coords=" 16,1,32,22" 
href="biol.htm"> 
Следующий кодовый фрагмент дает описание простой карты ссылок, состоящей из трех активных зон различной формы (прямоугольника, окружности и многоугольника): 
<img src="picture.jpg" width="160" 
height="40" usemap="#Map" border="0"> <map name="Map"> 
<area shape="rect" coords=" 16,1,32,22" 
href="biol.htm"> 
<area shape="circle" coords="64,14,8" href=" chem.htm "> 
<area shape="poly" coords=" 103,20,105,-1,1 30,2,1 32,21" 
href=" mathem.htm "> </map> 
Программа Dreamweaver напрямую поддерживает карты ссылок, работающие на стороне клиента. В принципе, любое изображение, помещенное в гипертекстовый документ, может быть превращено в такой объект с помощью простых инструментов, которыми располагает программа. 
Программа не запрещает и вставку серверных карт, более того, допускается комбинация объектов двух типов на одной странице. Для включения серверной карты в гипертекстовый документ требуется включить в его состав специальный дополнительный код. 
<h1>Кодирование и адресация</h1>
В языке HTML гипертекстовые ссылки записываются при помощи специального дескриптора <а>. Этот тег разрешается вставлять в любую часть документа, за исключением раздела заголовков. В стандарте языка гипертекстовой разметки упоминается о почти двух десятках атрибутов, уточняющих поведение этого дескриптора, но самым важным из них, безусловно, является параметр href. С его помощью записывается адресная часть гиперссылки. Так, следующий фрагмент кода задает ссылку на узел разработчика программы Dreamweaver: 
<а href="http://www.macromedia.com">Caйт разработчика 
программы Dreamweaver 
</a> 
В дескрипторные скобки заключен текстовый указатель гиперссылки, а значением атрибута href служит ее адресная часть. 
Чтобы сделать указателем ссылки изображение, следует поместить в этот контейнер дескриптор, задающий положение рисунка, например: 
<a href="http://www.macromedia.com"> 
<img src="image.gif"></a> 
где файл image.gif служит графическим представлением ссылки. 
 Атрибут href является не только самой важной частью ссылки, но и самой изменчивой и сложной ее частью. Его значениями служат адреса файлов, которые допускают различные способы записи. 
 Напомним некоторые правила образования адресов. Подробно этот вопрос рассматривался в одном из начальных разделов книги, посвященном адресации в World Wide Web. 
Способ, называемый абсолютном адресацией, требует для указания связанного документа записи его полного адреса URL. В общем случае такой адрес может быть весьма громоздким, поскольку должен включать в себя название протокола, имя сервера, путь по вложенным каталогам и подкаталогам, имя файла и ссылку на фрагмент. Например, адрес стартовой страницы сайта технической поддержки программы Dreamweaver имеет вид: 
hltp://www.macromedia.com/support 
/dreamweaver/contents.htm 
Обычно этот способ адресации применяют для ссылки на документы, расположенные на удаленных серверах. Нет принципиальных ограничений и против использования абсолютных адресов в пределах одного локального сайта или сервера, но такой подход требует больших накладных расходов на запись и хранение длинных имен и не обладает достаточной устойчивостью. При смене доменного имени, вызванной, например, переносом сервера, структура абсолютных связей нарушается. 
 
<img src="../chapter%207/prim.gif" alt="Кодирование и адресация">Изображения, расположенные на удаленном сервере и вставленные в документ при помощи абсолютной адресации, не отображаются в окне документа (если их копия не записана на локальный диск). Увидеть их можно только после загрузки документа в программу просмотра в режиме on-line. 
В большинстве случаев вместо указания громоздких абсолютных адресов удобнее взять за начало отсчета текущий документ и от этой “реперной точки” задавать координаты связанных файлов. Такой способ называется документно-зависимой (document-relative) относительной адресацией. Его преимущества очевидны: общую часть адреса текущего и связанного документов в этом случае можно не записывать. Достаточно указать координаты связанного документа в древовидной структуре папок и файлов, корнем которой служит текущий документ: 
<li>для связи с документом, расположенным в той же папке, что и текущий документ, следует просто указать его имя;</li> 
<li>для связи с документом, прописанным во вложенной папке, надо записать имя этого подкаталога и имя файла документа, разделив их символом косой черты (/);</li> 
<li>чтобы адресоваться к документу, расположенному в родительской папке текущего документа, следует использовать символическое имя родительского каталога — две точки (..) и далее, после стандартного разделителя (/) записать имя файла.</li> 
Чтобы создать ссылку на документ, лежащий в другой ветви иерархической файловой системы, можно использовать символическое имя родительского каталога несколько раз подряд, разделяя его последовательные включения символом косой черты, например ../../images /picture.gif. В этом примере относительной адресации требуется подняться вверх в системе каталогов на два уровня, перейти вниз в каталог images и адресоваться к изображению picture.gif. 
<img src="../chapter%207/prim.gif" alt="Кодирование и адресация">Чтобы гарантировать работоспособность относительных ссылок, надо обязательно сохранить текущий документ. До его записи на диск программе неизвестна точка отсчета, поэтому все ссылки с относительной адресацией представляются в виде file://. При сохранении они преобразуются в стандартную форму. 
 
 Кроме лаконичности путевых имен файлов, метод относительной адресации имеет еще одно преимущество — определенную устойчивость. Представим себе фрагмент файловой системы, в каталогах которого хранятся файлы, связанные с гипертекстовым документом. Если, не меняя относительного положения файлов и каталогов, переместить этот фрагмент в любое другое место иерархической файловой системы, то все ссылки, заданные при помощи относительной адресации, сохранят свою работоспособность. 
При нарушении внутренней координации, например после перемещения или переименования файла, требуется вмешательство пользователя и ручное обновление относительных адресов. 
<img src="../chapter%207/prim.gif" alt="Кодирование и адресация">Если операции над файлами и каталогами выполнять при помощи диспетчера узла, программа Dreamweaver самостоятельно внесет все необходимые коррективы в адреса и обновит связи. 
Существует еще один вариант относительной адресации, в котором точкой отсчета служит корневой каталог сайта. Этот способ называется адресацией относительно корня (root-relative). Координаты файлов, записанные в этой системе, начинаются с символа косой черты, например /projects/images/ picture.gif. Во многих операционных системах (в частности в многочисленных клонах UNIX) эта литера означает корневой каталог файловой системы. 
Преимущества этой системы адресации достаточно очевидны. При перемещении гипертекстового документа сохраняются адреса всех связанных файлов относительно корневого каталога сайта. Документно-зависимые адреса в этом случае пришлось бы корректировать. 
Корневая относительная адресация проявляет свои лучшие стороны в процессе создания и администрирования сложных сайтов, распределенных по нескольким серверам и требующих постоянного сопровождения. 
В программе Dreamweaver применение этого способа адресации имеет ограничения. Во-первых, он не работает в автономных гипертекстовых документах. Документ должен являться частью зарегистрированного Web-узла, который имеет корневую папку. Программа использует ее в качестве точки отсчета для записи относительных адресов. 
 
 Во-вторых, относительные адреса этого типа способен интерпретировать только сервер; программы просмотра не могут работать с ними непосредственно. Если открыть страницу с такими связями в броузере напрямую, минуя команду Preview in Browser (Просмотр в броузере), то все ссылки такого типа окажутся неработоспособными. Команда предварительного просмотра (Preview in Browser) временно преобразует относительные адреса, записанные относительно корневого каталога, в абсолютные адреса вида file://path. Такое преобразование относится только к просматриваемой странице; если существуют цепочки ссылок, записанные при помощи корневых относительных адресов, то они не меняют форму представления. Это значит, что перемещение по такой цепочке невозможно. 
Предварительный просмотр документа, содержащего адреса, заданные относительно корневого каталога, можно организовать следующими способами. 
<li>Разместите документ на сервере и просмотрите его удаленную версию.</li> 
<li>Разрешите просмотр на локальном узле. Для этого дайте команду Edit > Preferences (Правка > Настройки), перейдите в раздел Preview in Browser (Просмотр в броузере) и установите флажок Preview using Local Server (Просмотр на локальном сервере). Все необходимое для работы Web-сервера программное обеспечение должно быть установлено на локальный компьютер.</li> 
<h1>Меню переходов</h1>
Меню переходов — это популярный элемент управления, имеющий вид раскрывающегося списка, с пунктами которого связаны гипертекстовые команды. Такой способ организации информации позволяет представить в регулярном систематическом виде связи с внешними документами или файлами. Пункты меню и связанные с ними команды обычно обладают смысловой или тематической однородностью. Пример простого меню переходов показан на рис. 8.3. 
По способу технической реализации меню переходов относятся к классу гипертекстовых объектов, называемых формами. Без форм трудно обой- 
<img src="image/8-3.jpg" alt="Меню переходов"> 
Рис. 8.3. Пример меню переходов 
тись при создании гипертекстовых страниц с интерактивными обратными связями; они подробно рассматриваются в главе 11. В данном разделе обсудим лишь техническую сторону процедуры создания меню переходов, не вдаваясь в тонкости их реализации и кодирования. 
<li>Установите текстовый курсор в то место документа, которое выбрано для вставки меню.</li> 
<li>Дайте команду Insert > Form Object > Jump Menu (Вставка > Элементы форм> Меню переходов) или щелкните на кнопке Jump Menu (Меню переходов), расположенной в разделе Forms (Формы) палитры Objects (Объекты). В pезультате откроется диалоговое окно Insert Jump Menu (Вставка меню переходов) (рис. 8.4), средствами которого выполняется вся работа по созданию меню переходов. Рассмотрим его элементы управления.</li> 
<img src="image/8-4.jpg" alt="Меню переходов"> 
Puc. 8.4. Диалоговое окно Insert Jump Menu (Вставка меню переходов) 
<li>Menu Items (Пункты меню). В данном разделе показываются все созданные пункты меню переходов. Первоначально он состоит из одного пункта с принятым по умолчанию именем unnamed 1. Чтобы добавить новый раздел, следует щелкнуть по кнопке со знаком +, для удаления надо воспользоваться кнопкой со знаком —. При этом удаляемый раздел меню должен быть выбран. Для изменения порядка следования пунктов служат кнопки со стрелками, расположенные справа.</li> 
<li>Text (Текст). Поле предназначено доля ввода текста пунктов меню перехода. Чтобы задать текст, требуется выбрать пункт меню в верхней части диалогового окна и ввести подходящее название с клавиатуры.</li> 
 
<li> When Selected Go To URL (При выборе перейти по адресу). Поле служит для задания адреса URL или полного имени файла для связанного документа или файла.</li> 
<li>Open URLs in (Открыть связанный документ в). В этом списке надо выбрать область загрузки (окно или фрейм) целевого документа. Если исходный документ не разбит на фреймы, то этот список содержит единственный пункт Main Window (Основное окно). В противном случае указываются все существующие имена фреймов.</li> 
<li>Menu Name (Имя меню). Текстовое поле хранит заданное уникальное имя меню переходов. Это поле можно не заполнять.</li> 
<li>Insert Go Button After Menu (Вставить кнопку перехода после меню). Если выставить данный флажок, то рядом с меню появится кнопка Go (Перейти), по щелчку на которой выполняется команда перехода.</li> 
<li>Select First Item After URL Change (Выбрать первый пункт после изменения адреса). Если установить этот флажок, то раскрывающийся список всегда выставляется в первый пункт после перехода на новую страницу.</li> 
<li>Завершите процедуру щелчком на кнопке ОК.</li> 
<h1>Пустые ссылки и ссылки на сценарии</h1>
Ссылки на документы, файлы, фрагменты, электронные адреса и пр. являются результативными, поскольку их исполнение вызывает некоторые содержательные изменения в рабочей ситуации или в документе. В некоторых случаях приходится использовать так называемые пустые ссылки (null links). Это ссылки с пустым адресом, которые сами по себе не инициируют никаких изменений на странице или в окружении броузера. Они увеличивают динамический потенциал текста или объектов, поскольку дают возможность связать со статичными объектами динамические сценарии (behaviors). Например, по щелчку мыши на тексте можно вывести поясняющую надпись в строке состояния броузера или в произвольной области страницы. Динамические сценарии или режимы поведения — это одно из мощнейших изобразительных средств программы Dreamweaver. 
Ссылки на сценарии представляют собой гипертекстовые команды, которые запускают программы, написанные на языке JavaScript. Это программные модули, обычно небольшого размера, которые включаются в коды гипертекстового документа, передаются по Сети вместе с дескрипторами разметки и выполняются на клиентской машине. Они способны выполнять самые разнообразные функции: от вывода простых сообщений до выполнения сложных технических расчетов и обработки баз данных. Пустые ссылки и ссылки на сценарии имеют много общего по технике вставки. 
Поместить в состав документа пустую ссылку можно следующим образом. 
<li>Выберите текст или изображение в окне документа в режиме планировки страницы.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств) (CTRL+F3).</li> 
<li>Введите в поле Link (Ссылка) только один символ #.</li> 
 Ссылки на процедуры, написанные на языке JavaScript, создаются по той же схеме. Все различия состоят в информации, которая заносится в поле Link (Ссылка). В это поле следует записать вызов внешней программы или короткий код функции. Например, если записать следующий вызов: javascript:alert("Этот ресурс в настоящее время отключен") то по щелчку на активной области ссылки будет выведено окно с указанным предупреждением. 
<img src="image/8-2-sozdanie-ssylok_1.gif" alt="Пустые ссылки и ссылки на сценарии">Код языка JavaScript становится значением атрибута href дескриптора <а> и, следовательно, заключается в двойные кавычки. Поэтому в описании сценария следует избегать прямого использования двойных кавычек. Допускаются только одинарные кавычки (апострофы) или двойные после символа обратной косой черты. 
 Пустые ссылки дают возможность связать с активной областью (текстовой или графической) динамический сценарий. Некоторые броузеры реагируют на щелчок на пустой ссылке не совсем ожидаемым образом. Кроме выполнения предписанного сценария, они выполняют переход в начало страницы. Это нештатное поведение программ просмотра корректируется заменой пустой ссылки (#) на ссылку вида javascript:void(0) или javascript:;. 
<h1>Редактирование карты ссылок</h1>
Карту ссылок, как практически любой другой объект, созданный средствами программы Dreamweaver, можно редактировать. Для этого программа предоставляет несколько простых приемов и инструментов, которые почти не отличаются от средств графического редактирования, входящих в обязательный минимум любого графического редактора средней руки. Приведем их краткое описание. 
<li>Карты ссылок можно передавать между документами при помощи буфера обмена.</li> 
<li>Активную область разрешается перемещать. Для этого достаточно зацепить ее мышкой и перетащить в новое положение в пределах подложки. Для точного перемещения удобнее воспользоваться курсорными клавишами, каждое нажатие которых перемещает выбранную область на один пиксел в соответствующем направлении. Если при этом удерживать нажатой клавишу SHIFT, скорость перемещения возрастает в десять раз.</li> 
Чтобы выбрать активную область, достаточно щелкнуть по ней инструментом Pointer Hotspot (Указатель активной области). Он расположен слева в нижней части палитры свойств и имеет вид обыкновенной стрелки. Для группового выбора нескольких областей щелкнуть этим инструментом на каждой из них, удерживая нажатой клавишу SHIFT 
Размеры активной области разрешается менять. Для этого надо выбрать ее инструментом Pointer Hotspot (Указатель активной области), зацепить опорный узел и перетащить его. 
 Для активных областей доступны все команды меню Modify > Arrange (Изменить > Расположить) и Modify > Align (Изменить > Выровнять). Перечислим их. 
<li>Align Left (Выровнять по левому краю). Выравнивает выбранные активные области по левому краю.</li> 
<li>Align Right (Выровнять по правому краю). Выравнивает выбранные активные области по правому краю.</li> 
<li>Align Top (Выровнять по верхнему краю). Выравнивает выбранные активные области по верхнему краю.</li> 
<li>Align Bottom (Выровнять по нижнему краю). Выравнивает выбранные активные области по нижнему краю.</li> 
<li>Make Same Width (Выровнять ширину). Ширина выбранных активных ных областей становится равной ширине той активной области, которая была выбрана последней.</li> 
 
<li>Make Same Height (Выровнять высоту). Высота выбранных активных областей становится равной высоте той активной области, которая была выбрана последней.</li> 
<li>Bring to Front (Перевести на передний план). Переводит выбранную активную область на передний план карты ссылок. В этом положении область имеет приоритет над всеми другими активными зонами, пересекающимися с ней.</li> 
<li>Send to Back (Перевести на задний план). Переводит выбранную активную область на задний план карты ссылок.</li> 
<img src="image/8-2-sozdanie-ssylok_1.gif" alt="Редактирование карты ссылок">Активные области карты ссылок предназначены для открытия внешних или внутренних ссылок в программе просмотра. Таков штатный режим работы с этими навигационными элементами. Иногда на них возлагают нестандартные функции своеобразных триггеров — переключателей, 
запускающих динамические сценарии. Эти сценарии (они называются в программе behaviors — режимы) вносят в первоначально статичную Web-страницу элементы динамического поведения: выводят заданный текст в строке состояния броузера, меняют изображение, показывают или скрывают слои и пр. Умелое, дозированное применение этих простых динамических эффектов способно оживить страницу и сделать ее привлекательной. 
С технической точки зрения, связывание сценария с активной областью выполняется так же, как для обычного изображения — средствами палитры Behaviors (Режимы). Разным активным областям разрешается присваивать различные динамические эффекты. 
<h1>Редактирование меню переходов</h1>
Созданное меню переходов можно редактировать. В программе существуют два средства для выполнения этой работы: палитры Property Inspector (Инспектор свойств) и Behaviors (Режимы). Вторая палитра располагает несколько большими возможностями для внесения изменений в существующее меню переходов. Получить доступ к этим возможностям можно следующим образом. 
<li>Выберите меню переходов.</li> 
<li>Откройте палитру Behaviors (Режимы). Для этого дайте команду Window > Behaviors (Окно > Режимы) или воспользуйтесь ее клавиатурным эквивалентом — комбинацией клавиш SHIFT+F3.</li> 
<li>Дважды щелкните на названии события, связанного с меню переходов. Названия событий (Events) и названия действий (Actions) располагаются в центральной части палитры.</li> 
<li>На экране появится несколько небрежно оформленное —кнопка Browse (Обзор) прорисована не до конца — диалоговое окно Jump Menu (Меню переходов), показанное на рис. 8.5. Внесите все необходимые изменения с помощью элементов управления этого окна.</li> 
<li>Завершите процедуру редактирования щелчком на кнопке ОК.</li> 
<img src="image/8-5.jpg" alt="Редактирование меню переходов"> 
Рис. 8.5. Редактирование меню переходов 
Содержимое диалогового окна Jump Menu (Меню переходов) по смыслу, названиям и способам настройки не отличается от рассмотренного выше основного диалогового окна Insert Jump Menu (Вставка меню переходов). 
 Приблизительно такой же объем редакторской работы позволяет выполнить палитра Property Inspector (Инспектор свойств). Чтобы получить доступ к настройкам меню переходов, выберите его и щелкните на кнопке List Values (Показать значения) на палитре свойств. 
<h1>Создание активных зон</h1>
Теоретически картой ссылок может служить любое растровое изображение, записанное в одном из следующих форматов: GIF, JPEG или PNG. Но при ближайшем рассмотрении оказывается, что далеко не всякий графический образ способен успешно справиться с этой ролью. Практика работы с такими объектами позволила вывести несколько простых рекомендаций по выбору графической основы карты ссылок: 
<li>изображение должно иметь четкую структуру;</li> 
<li>композиция образа не должна противоречить логике структурных составляющих и связей между ними;</li> 
<li>желательно, чтобы рисунок состоял из хорошо различимых областей, окрашенных разными цветами;</li> 
<li>из всех возможных форматов хранения графической информации следует предпочесть формат GIF, лучше без чередования строк.</li> 
 Будем считать, что задача выбора графической основы карты ссылок успешно решена, а само изображение вставлено в документ. Далее требуется разделить будущую карту на области, чувствительные к щелчку мыши (активные области). Программа Dreamweaver поддерживает активные области трех видов: прямоугольники, окружности и многоугольники. Инструменты программы, предназначенные для их создания, являются упрощенными версиями аналогичных средств векторных графических редакторов. Работа с ними не представляет никаких технических сложностей. 
Разметка активных зон выполняется следующим образом. 
<li>Выберите изображение.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств) (CTRL+F3). Если палитра свернута, разверните ее при помощи кнопки со стрелкой, расположенной в правом нижнем углу.</li> 
<li>Введите имя карты в поле Map (Карта). Оно должно быть уникальным, состоять только из букв и цифр и начинаться с буквы.</li> 
<li>В палитре Property Inspector (Инспектор свойств) выберите инструмент нужной формы. Кнопки инструментов расположены слева в нижней части палитры.</li> 
<li>Нарисуйте активную область выбранной формы. После этого палитра изменит свой вид. Из всех разделов, показанных на рис. 8.6, останутся только поля, относящиеся к активным областям карты.</li> 
<img src="image/sozdanie-aktivnyh-zon_1.jpg" alt="Создание активных зон"> 
Pис. 5.6. Инструменты создания карты ссылок 
<li>В поле Link (Ссылка) введите адрес URL связанного документа или файла.</li> 
<li>В списке Target (Назначение) выберите экранную область для вывода связанного документа. Это может быть отдельный фрейм или окно программы просмотра. Более подробно этот вопрос обсуждается в разделах, посвященных созданию ссылок и редактированию изображений.</li> 
<li>В поле Alt (Альтернативный текст) ввести текстовый комментарий, относящийся к данной активной области карты. Напомним, что при наведении указателя на активную область этот текст выводится в виде всплывающей подсказки.</li> 
<li>Повторите шаги 4-8 для создания дополнительных активных областей карты ссылок.</li> 
<li>Закончите процедуру щелчком на любой свободной точке документа или нажатием клавиши ОК.</li> 
<h1>Создание ссылок методом перетаскивания</h1>
Программа Dreamweaver располагает удобным интерактивным инструментом, который позволяет создавать ссылки методом перетаскивания. В программной документации этот инструмент называется Point-to-File icon (Значок указателя файла). Если оттолкнуться от способа использования этого средства, то приемлемым вариантом перевода может быть маркер-указатель или просто указатель. Напомним, что использование указателя для создания ссылок на файлы и документы обсуждалось в разделе, посвященном работе с Диспетчером узла. 
 В палитре Property Inspector (Инспектор свойств) и в окне Site Map (Карта узла) указатель изображается как кружок с перекрестием, отдаленно напоминающим визир дальномера или прицел. Если перетащить указатель на документ или именованный символ привязки (якорь), создается ссылка на объект или фрагмент гипертекстового документа. 
Перечислим все объекты, на которые разрешается перетаскивать указатель. Это любые гипертекстовые документы, загруженные в различные окна программы, видимые символы привязки этих документов и файлы, которые отображаются в окне Диспетчера узла. 
Рассмотрим различные варианты этого технического приема. 
<li>Выберите текст или изображение в режиме планировки страницы.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств) (CTRL+F3).</li> 
<li>Зацепите маркер-указатель, который располагается справа от поля Links (Ссылки), и перетащите его на целевой документ, файл или символ привязки.</li> 
<li>После точного наведения указателя отпустите левую кнопку мыши.</li> 
<img src="image/8-2-sozdanie-ssylok_1.gif" alt="Создание ссылок методом перетаскивания">Для текстовых ссылок описанный прием имеет облегченный вариант применения. Выберите активную часть будущей ссылки, нажмите и удерживайте клавишу SHIFT, зацепите мышкой выбранный текст и перетащите его на целевой объект или файл. В этом случае можно обойтись без вызова палитры свойств. 
Ссылка на объект Диспетчера узла создается следующим способом. 
<li>Откройте окно документа и окно Диспетчера узла (F8 или ALT+F8).</li> 
<li>Выберите в окне документа текст или изображение.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств).</li> 
<li>Зацепите маркер-указатель и перетащите его на значок файла или гипертекстового документа. Целевой значок может быть расположен на любой панели Диспетчера узла: в списке файлов или на карте сайта.</li> 
<h1>Создание ссылок на фрагменты документа</h1>
Когда программа просмотра выполняет команду гипертекстового перехода то связанный документ загружается в окно броузера с самого начала. Это разумное соглашение, которое выполняется для всех способов адресации, не очень удобно при просмотре длинных страниц. Язык HTML располагает специальным средством для выбора стартовой позиции отображаемого документа. 
 Чтобы сделать стартовую позицию заметной для броузера, требуется поместить в нее специальный маркер, роль которого в языке HTML выполняет именованный символ привязки или якорь (named anchor). Это дескриптор вида <а name="selector"></a>. По форме он является контейнером, но помещать какую-либо информацию внутрь дескрипторных скобок не обязательно. 
 Чтобы выполнить переход к позиции, которую помечает символ привязки, требуется включить в описание ссылки его имя. Правила такого включения очень просты: имя символа привязки должно следовать за именем гипертекстового документа после специального разделителя, которым является символ #. Пусть якорь с именем selector находится в документе content.htm, тогда команда перехода в этот место документа может иметь вид: 
<а href="http://www.host.com 
/content.htm#selector"> 
В этом гипотетическом примере опущен замыкающий дескриптор и не указана текстовая или графическая активная область ссылки. 
Ограничений на число символов привязки, включенных в состав одного документа, нет. На основе подходящей расстановки символов привязки можно построить интерактивное оглавление и индексный указатель большого электронного документа. 
Вставка символа привязки выполняется следующим образом. 
<li>Поместите текстовый курсор в то место документа, где должен располагаться якорь.</li> 
<li>Дайте команду вставки символа привязки. Это можно сделать несколькими способами:</li> 
<li>через меню Insert > Invisible Tags > Named Anchor (Вставка > Скрытые коды > Символ привязки);</li> 
<li>комбинацией клавиш CTRL+ALT+A;</li> 
<li>кнопкой Named Anchor (Символ привязки) в разделе Invisibles (Скрытые) палитры Object (Объекты) (CTRL+F2).</li> 
 
<li> В диалоговом окне Insert Named Anchors (Вставка символа привязки) введите имя символа привязки и закончите процедуру щелчком на кнопке ОК.</li> 
<img src="image/8-2-sozdanie-ssylok_1.gif" alt="Создание ссылок на фрагменты документа">В позиции вставки должен появиться специальный символ, обозначающий якорь. Если его не видно, то следует включить режим отображения спецсимволов командой View > Visual Aids > Invisible Elements (Вид > Служебная разметка > Скрытые элементы). 
Образование имен символов привязки подчиняется обычным для программы правилам. Все имена, расположенные на одной странице, должны быть уникальными. Кроме того, следует помнить о зависимости от регистра и избегать использования специальных символов. 
Изменить позицию символа привязки можно перетаскиванием; для переименования следует выбрать его и вызвать палитру Object Inspector (Инспектop объектов). 
<h1>Создание ссылок</h1>
Редактор располагает возможностями для создания следующих типов ссылок. 
<li>Ссылки на внешние гипертекстовые документы или файлы. Перечень типов файлов, на которые могут указывать гиперссылки, весьма представителен. Это может быть графика, звук, анимация, документы в формате PDF, видеоролики, компьютерные презентации и др.</li> 
<li>Ссылки на именованные символы привязки. Это специальные дескрипторы, которые иногда именуются якорями (named anchors), помечающие разные фрагменты одного гипертекстового документа. Связи такого рода позволяют выполнять переходы в пределах одной страницы или документа.</li> 
<li>Ссылки на адреса электронной почты. Связи такого рода представляют собой команды вызова почтовой программы.</li> 
<li>Пустые ссылки и ссылки на сценарии. Эти связи позволяют связывать с объектами режимы поведения и управлять их динамикой при помощи выполнения программ, написанных на языке JavaScript.</li> 
В программе нет недостатка в средствах создания ссылок. Пользователь волен выбрать удобную технику, сообразуясь с требованиями данной ситуации и собственными вкусами. Перечислим основные возможности. 
<li>Диспетчер узла предоставляет несколько различных способов создания новых и модификации существующих ссылок. Самым простым является перетаскивание маркера-указателя, расположенного справа от значка документа.</li> 
<li>В окне документа можно воспользоваться командой Modify > Make Link (Изменить > Создать ссылку) или клавиатурной комбинацией CTRL+L.</li> 
<li>Несколько различных способов предоставляет палитра Property Inspector (Инспектор свойств). Все они подробно рассматриваются далее в этом разделе.</li> 
<li>Команда создания ссылки представлена и в контекстном меню, которое вызывается по щелчку правой кнопкой мыши.</li> 
 С технической точки зрения, процедура создания ссылок в программе Dream weaver не представляет особых сложностей и практически не зависит от выбранного способа создания ссылки. Обычно удобнее всего работать с палитрой Property Inspector (Инспектор свойств). В этом случае действуют следующим образом. 
 
<li> Выберите текст, изображение или объект, используемые качестве указателя ссылки.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств) (CTRL+F3), если она отсутствует на экране. Палитра предлагает три способа создания</li> 
<img src="image/8-1.jpg" alt="Создание ссылок"> 
Рис. 8.1. Создание ссылки 
ссылки. Все необходимые для этого средства сведены в раздел Link (Ссылка). 
<li>Текстовое поле. В нем можно набрать адрес связанного объекта, используя любой удобный метод адресации. Если текущий документ содержит несколько ранее заданных ссылок, то все они перечисляются в раскрывающемся списке, связанном с этим полем. Для повторного использования адреса достаточно просто выбрать его в списке.</li> 
<li>Маркер-указатель, расположенный справа от поля. При помощи этого средства ссылки можно создавать методом перетаскивания. Для этого надо зацепить маркер и перетащить на страницу или существующую ссылку.</li> 
<li>Навигационная кнопка. Этот стандартный элемент приложений Windows запускает процедуру поиска и выбора файлов. По щелчку на кнопке выводится диалоговое окно Search File (Поиск файлов), средствами которого выполняется поиск связанного документа или файла.</li> 
<li>В списке Target (Назначение) выберите окно или фрейм для документа, на который указывает ссылка. Рассмотрим все пункты этого списка. </li> 
<li>_blank. Загрузка связанного документа в новое окно броузера, не имеющее собственного имени.</li> 
<li>_parent. Загрузка связанного документа в родительское окно или родительский фрейм области (окна или фрейма), содержащей ссылку. Если в документе-источнике нет вложенных областей, то связанный документ загружается в полное окно программы просмотра.</li> 
<li>_self. Загрузка связанного документа в то же самое окно или фрейм, которые содержат ссылку. Этот вариант принимается по умолчанию.</li> 
<li>_top. Загрузка связанного документа в полное окно программы просмотра без учета текущей структуры фреймов.</li> 
<li>Завершите процедуру нажатием клавиши ENTER или переходом в оно документа.</li> 
<img src="image/8-2-sozdanie-ssylok_1.gif" alt="Создание ссылок">Если все связанные документы должны быть загружены в одну область окна программы просмотра, то ее можно задать один раз, не упоминая в каждой отдельной ссылке. Для этого надо дать команду Insert > Head Tags > Base (Вставка > Дескрипторы заголовков > База) и в поле Target (Назначение) выберите общую область назначения: окно или фрейм. 
 
 Перечислим те немногочисленные ограничения, которые действуют при вводе адресов Интернета. 
<li>Полная длина адреса не должна превышать 255 символов.</li> 
<li>Программа Dreamweaver не поддерживает символы верхней половины кодовой таблицы, так называемой High ASCII.</li> 
<li>Следует избегать использования пробелов в именах файлов и каталогов. На некоторых платформах адреса с пробелами могут быть прочитаны неправильно. По смыслу и по изображению неплохим заменителем этой литеры служит символ подчеркивания.</li> 
 Чтобы на общем фоне страницы сделать ссылку заметной, программы просмотра текстовые указатели подчеркивают, а графические заключают в рамку синего цвета. Эти элементы оформления не всегда гармонируют с общим стилем оформления страницы. Чтобы убрать рамку, не требуется преодолевать никаких технических сложностей, для этого задать нулевое значение толщины границы — поле Border (Граница) в Инспекторе свойств. Подобное соглашение действует в программе Dreamweaver по умолчанию: все новые графические ссылки создаются без выделяющей рамки. 
 С подчеркиванием текстовых ссылок дело обстоит несколько сложнее. Известны два способа решения этой проблемы. Во-первых, текстовую ссылку можно заменить на графическую с тем же содержанием. Этот радикальный выход из положения имеет существенное ограничение — быстрый рост размеров графического текста. Второе решение дает использование иерархических стилевых спецификаций (Cascading Style Sheets). Этот способ тоже не является универсальным, поскольку работу с этими стилями поддерживают только последние версии броузеров. 
 Цвет текстовых ссылок проще в настройке: чтобы изменить его, требуется дать команду Modify > Page Properties (Изменить > Свойства страницы) и в поле 
Links (Ссылки) ввести или выбрать цветовые координаты нового тона. Кроме того, каждую текстовую ссылку можно перекрасить на индивидуальной основе, как обычный текст. Напомним, что цвет текстовых ссылок и цвет рамок вокруг графических ссылок совпадают. 
<h1>Ссылки на электронную почту</h1>
.Электронная почта — это один из самых простых и, вместе с тем, полезных ресурсов всемирной Сети. Рассылка электронных сообщений выполняется при помощи специальных программ, которые называются почтовыми клиентами. На гипертекстовой странице можно поместить команду вызова почтового клиента, что позволяет совместить навигацию в Сети и обмен почтовыми сообщениями. 
При кодировании вызов программы пересылки электронных сообщений оформляется как гипертекстовая ссылка с адресом, оформленным по особым правилам, например: 
<a href="mailto:guest@aha.ru"> 
Oтослать сообщение</а> 
где в адресной части ссылки стоит гипотетический электронный адрес, а текстовая часть выполняет функции обычного указателя. В режиме планировки страницы и в окне программы просмотра видна только активная область такой ссылки. Щелчок мышкой на активной области вызывает программу пересылки почтовых сообщений, установленную по умолчанию и данной вычислительной системе. 
Вставка ссылки на электронную почту выполняется следующим образом. 
<li>Поместите текстовый курсор в позицию вставки.</li> 
<li>Дайте команду Insert > Email Link (Вставка > Ссылка на электронную почту). Другой способ вставки дает кнопка Email Link (Ссылка на электронную почту), расположенная в разделе Common (Общие) палитры объектов.</li> 
<li>Заполните поля диалогового окна Insert Email Link (Вставка ссылки на электронную почту) (рис. 8.2):</li> 
<li>поле Text (Текст) служит для ввода текста активной области ссылки;</li> 
<li>поле E-Mail (Адрес электронной почты) предназначено для ввода адреса электронной почты.</li> 
<li>Нажмите кнопку ОК.</li> 
<img src="image/8-2-sozdanie-ssylok_1.gif" alt="Ссылки на электронную почту">Вместе с сообщением о том, что данная ссылка служит для вызова почтовой программы, целесообразно в поле Text (Текст) записывать и сам адрес электронной почты. Существует множество ситуаций, когда по разным причинам невозможно воспользоваться услугами программы пересылки сообщений. В этом случае потенциальные посетители данной страницы смогут хотя бы записать для себя адрес электронной почты. 
<img src="image/8-2.jpg" alt="Ссылки на электронную почту"> 
Рис. 8.2. Создание ссылки на электронную почту 
Этот тип ссылок можно создавать обычным образом: при помощи штатного средства работы с гипертекстовыми командами — палитры Property lnspector (Инспектор свойств). Разница со вставкой обычных ссылок состоит лишь в содержимом поля Link (Ссылка), в которое следует ввести имя протокола и, после двоеточия, полный почтовый адрес. Если воспользоваться примером, приведенным в начале раздела, то в поле Link (Ссылка) следует записать mailto:guest@aha.ru. 
<h1>Ссылки</h1>
Гипертекстом называется набор документов, связанных системой перекрестных ссылок — гиперсвязей, которые разрешают пользователю быстро пемещаться из одной части документа в другую или выполнять заданные управляющие инструкции. Структура даже самого сложного печатного текста с развитой системой разделов и рубрик представляет собой цепочку. Гиперсвязи позволяют снабдить документы более развитой, нелинейной структурой, что влечет за собой значительные изменения законов композиции таких изданий и способов общения с ними. 
Гиперсвязи размывают границы документа. При реализации в Интернете документ — это уже не стопка страничек, объединенных общей обложкой. Если экстраполировать в будущее тенденции сегодняшнего дня, то можно предположить, что с развитием средств электронной коммуникации и по мере роста масштабов всемирной Сети технологическое определение документа будет вытеснено его содержательным толкованием. Определение виртуального документа будет основываться на таких свойствах, как внутренняя связность, однотипное построение и примерно однородное содержание фрагментов. 
Концепция перекрестных связей не нова. По этому принципу построены, в частности, библиотечные каталоги и рубрикаторы, справочный аппарат сложных технических изданий и др., но полностью раскрыть свой потенциал они смогли только на основе новых технических решений — в электронных публикациях. 
Перекрестная ссылка, или гиперссылка, состоит из двух частей. Первая, видимая, часть называется указателем или — реже — активной областью (зоной). Это публичная составляющая ссылки — она показывает, что данное место гипертекстового документа является не просто надписью или рисунком, а представляет гипертекстовую команду. Вторая составляющая, скрытая от непосредственного наблюдения, называется адресной частью ссылки или просто адресом (URL, адресом URL). Щелчок на указателе загружает в 
программу просмотра документ, расположенный по этому адресу, или выполняет связанную с ним гипертекстовую команду. 
Активные области ссылок должны быть заметны для наблюдателя. В большей части программ просмотра текстовые указатели выделяются синим цветом и подчеркиванием, графические заключаются в рамку синего цвета. Эти установки принимаются по умолчанию и, если не вписываются в общий стиль оформления документа, могут быть изменены пользователем. Еще одним индикатором активной области ссылки является указатель мыши: при наведении на указатель ссылки он принимает форму “указующего перста”. 
<h1>
Dreamweaver 4
</h1>
<h1>Форматирование строк, столбцов и ячеек</h1>
Программа Dreamweaver разрешает форматировать не только всю таблицу, но и ее отдельные структурные составляющие: строки, столбцы, ячейки. При наложении форматов могут возникать конфликты, когда одинаковые по смыслу признаки форматирования принимают разные значения. Все конфликты такого рода разрешаются согласно принципу “исключения важнее правил”. Установки ячейки отменяют признаки форматирования строк и столбцов, а параметры оформления последних считаются важнее установок всей таблицы. 
 Форматирование структурных элементов таблицы выполняется преимущественно средствами палитры Property Inspector (Инспектор свойств) (рис. 9.11). Многие элементы управления, которые предлагает палитра для работы с 
<img src="image/8-11.jpg" alt="Форматирование строк, столбцов и ячеек"> 
Рис. 9.11. Форматирование структурных элементов таблицы 
ячейками, строками и столбцами, по технике и смыслу совпадают с аналогичными элементами, относящимися ко всей таблице. Поэтому приведем лишь краткую сводку основных возможностей. 
<li>Cell (Ячейка). Раздел объединяет две кнопки Merges selected cells using spans (Объединить выбранные ячейки) и Splits cell into rows or columns (Разделить ячейку на строки или столбцы), предназначенные для объединения (первая) и разбиения (вторая) ячеек.</li> 
<li>W (Ширина). Поле для задания ширины ячейки. Единицами измерения могут быть пикселы и проценты от габаритов таблицы.</li> 
<li>Н (Высота). Поле для задания высоты ячейки.</li> 
<li>No Wrap (Без переноса). Этот флажок выключает перенос слов на другую строку.</li> 
<li>Header (Заголовок). Этот флажок присваивает содержимому выбранной ячейки или строки параметры оформления заголовков. Для текста это полужирное выделение и выравнивание по центру.</li> 
<li>Вg (Фоновый цвет) и Вg (Фоновый рисунок). Два раздела палитры с одинаковыми названиями, но легко различимым оформлением интерфейса, предназначены для выбора фонового рисунка и фонового цвета. По технике использования не имеют никаких отличий от таблиц.</li> 
<li>Brdr (Цвет рамки). Этот раздел отвечает за выбор цвета рамки выбранной ячейки, строки или столбца.</li> 
<li>Horz (Выравнивание по горизонтали). Список команд выравнивания содержимого ячеек по горизонтали. Он объединяет четыре стандартных типа: Default (По умолчанию), Left (По левому краю), Center (По центру), Right (По правому краю). Выбранный тип выравнивания присваивается атрибуту align дескриптора <td>.</li> 
 
<li>Vert (Выравнивание по вертикали). Раздел служит для выбора выравни- вания содержимого ячейки по вертикали. Он состоит из пяти пунктов: Default (По умолчанию), Тор (По верхнему краю), Middle (По середине), Bottom (По нижнему краю), Baseline (По базовой линии). По умолчанию в большинстве программ просмотра принимается выравнивание по вертикали по середине. Первые четыре вида выравнивания работают обычным образом, примерно так же, как в текстовых редакторах. Выравнивание по базовой линии обладает рядом особенностей. Во-первых, оно располагает текст и графику ближе к верхней части ячейки. Во-вторых, если применить этот тип выравнивания к нескольким ячейкам одной строки, то программа разместит их содержимое на одной линии, невзирая на размер шрифта и габариты графики (рис. 9.12). Выбранный тип выравнивания присваивается атрибуту valign дескриптора <td>.</li> 
<img src="image/9-12.jpg" alt="Форматирование строк, столбцов и ячеек"> 
Рис. 9.12. Выравнивание по вертикали по базовой линии 
<h1>Форматирование</h1>
В четвертой версии стандарта языка гипертекстовой разметки табличный дескриптор <table> обладает почти двумя десятками различных атрибутов, от значений которых зависит внешний вид и поведение таблицы. В программе большая часть этих атрибутов настраивается при помощи палитры Property Inspector (Инспектор свойств) (рис. 9.2). Напомним способы ее открытия: 
<li>команда Window >Properties (Окно > Свойства);</li> 
<li>комбинация клавиш CTRL+F3;</li> 
<li>команда Properties (Свойства) в контекстном меню.</li> 
<img src="image/9-1-kodirovanie_1.gif" alt="Форматирование">Все элементы управления палитры доступны в ее развернутом состоянии. Чтобы развернуть палитру, надо щелкнуть по клавише со стрелкой, расположенной в ее правом нижнем углу. 
Все основные инструменты палитры, предназначенные для оформления и редактирования таблиц, подробно рассматриваются в соответствующих тематических разделах. Приведем краткую сводку элементов управления: 
<li>Table Name (Имя таблицы) — название таблицы;</li> 
<li>Rows (Строки) — количество строк;</li> 
<li>Cols (Столбцы) — количество столбцов;</li> 
<li>W (Ширина) — ширина таблицы;</li> 
<li>Н (Высота) — высота таблицы;</li> 
<li>CellPad (Поля) — поля ячейки;</li> 
<li>CellSpace (Интервалы) — расстояние между ячейками;</li> 
<li>Align (Выравнивание) — выравнивание таблицы;</li> 
<li>Border (Рамка) — вид рамки таблицы и ячеек;</li> 
<li>Bg Color (Фоновый цвет) — цвет фона;</li> 
<li>Brdr Color (Цвет рамки) — цвет рамки таблицы и ячеек;</li> 
<li>Bg Image (Фоновый рисунок) — фоновый рисунок;</li> 
<li>Clear Row Heights (Сброс высоты строк) — кнопка сброса значений вертикальных размеров строк;</li> 
<li>Clear Columns Widths (Сброс ширины столбцов) — кнопка сброса значений горизонтальных размеров столбцов;</li> 
<li>Convert Table Widths to Pixels (Преобразовать параметры ширины в пикселы) – кнопка служит для перевода всех относительных горизонтальных размеров таблицы в абсолютные, измеренные в пикселах;</li> 
<li>Convert Table Widths to Percent (Преобразовать параметры ширины в проценты) — кнопка служит для преобразования всех абсолютных горизонтальных размеров таблицы в относительные, заданные в процентах.</li> 
<h1>Граница и фон</h1>
Таблицы, которые создает программа, по умолчанию получают видимую рамку толщиной в один пиксел. Граничный контур образуют две линии, раскрашенные в полярные оттенки серого цвета. Такое сочетание создает иллюзию глубины; кажется, что рамка таблицы и линии разлиновки ее ячеек являются выпуклыми. Это решение можно считать удачным, но, к сожалению, массовое распространение превратило его в дизайнерский штамп. 
Толщина граничной рамки — это величина переменная. Ее значение, заданное в программе, присваивается атрибуту border дескриптора таблицы <table>. Единицами измерения служат пикселы. Нулевое значение этого атрибута убирает прорисовку рамки таблицы и всех внутренних ячеек. 
 В этом случае, контуры таблицы помечаются специальной пунктирной линией, которая видна только в редакторе, но не отображается программами просмотра. Можно убрать и эту вспомогательную разметку. Для этого следует дать команду View > Visual Aids > Table Border (Вид > Служебная разметка > Рамка таблицы). 
Толщина границы задается следующим образом. 
<li>Выберите таблицу.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств).</li> 
<li>Ввести новое значение толщины в поле Border (Рамка).</li> 
Если увеличить толщину граничной рамки одноклеточной таблицы до определенных пределов, то по своему виду эта таблица станет похожей на выпуклую трехмерную кнопку (рис. 9.5). 
<img src="image/9-5.jpg" alt="Граница и фон"> 
Рис. 9.5. Граничные рамки различной толщины 
Изменение толщины внешней границы не влияет на внутреннюю разметку таблицы. 
Для выбора цвета граничных линий следует воспользоваться полем Brdr Color (Цвет границы) палитры Property Inspector (Инспектор свойств). Этот элемент управления открывает доступ к стандартным средствам выбора или синтеза цветов. Работа с ними подробно описана в главе, посвященной общим свойствам документа. 
Новые таблицы, созданные программой, по умолчанию приобретают прозрачный фон. Изменить цвет фона можно при помощи поля Bg Color (Цвет фона) палитры Property Inspector (Инспектор свойств). С технической точки зрения, выбор цвета фона ничем не отличается от задания цвета границы. 
На задний план таблицы можно поместить рисунок. Выбор и вставка фонового изображения выполняется средствами раздела Bg Image (Фоновый рисунок) палитры Property Inspector (Инспектор свойств). И в этом случае стандартизация интерфейса и технических приемов приносит плодотворные результаты. Техника создания фонового рисунка таблицы точно такая же, что и у гипертекстовой страницы. Мы рассматривали ее в главе, посвященной работе с графикой. 
<h1>Импорт табличных данных</h1>
Часто на страницах гипертекстового документа приходится размещать таблицы больших размеров. В качестве популярных примеров можно назвать таблицы со статистическими данными, прейскуранты больших торговых фирм, некоторые виды бухгалтерских и учетных документов. Заполнять такие таблицы вручную — занятие утомительное и опасное потенциальными ошибками. Кроме того, такие документы часто создаются в специальных программах: электронных таблицах или базах данных. 
Программа Dreamweaver располагает специальной командой, которая читает внешний текстовый файл и переводит в его табличную форму. Чтобы программа смогла распределить данные по ячейкам и строкам, текстовый файл должен быть специальным образом размечен. Функции разделителя обычно выполняют следующие символы: символ табуляции, запятая, двоеточие, точка с запятой и др. Следует отметить, что размеченный текстовый файл- это общепринятый способ обмена табличными данными, поэтому многие программы располагают специальными командами для их создания. 
Импорт табличных данных выполняется следующим образом. 
<li>Дайте команду File > Import > Import Tabular Data (Файл > Импорт > Импорт табличных данных). Другой способ выполнения этой операции дает команда Insert > Tabular Data (Вставка > Табличные данные). Эти команды открывают диалоговые окна, отличающиеся только названием.</li> 
<li>Выполните необходимые настройки в диалоговом окне Import Table Data (Импорт табличных данных) (рис. 9.3), которое управляет процедурой импорта. Рассмотрим основные элементы управления этого диалогового окна.</li> 
<li>Data File (Файл данных). В это поле вводится полный путь поиска для текстового файла, хранящего табличные данные. Данное имя можно ввести вручную или выполнить поиск при помощи кнопки Browse (Обзор).</li> 
<li>Delimiter (Разделитель). В этом списке выбирается разделитель, который задает границы ячеек в текстовом файле. Список включает в себя следующие пункты: Tab (Символ табуляции), Comma (Запятая), Semicolon (Точка с запятой), Colon (Двоеточие), Other (Другой). В последнем случае специальный символ-разделитель, отличающийся от уже перечисленных, задается в дополнительном поле.</li> 
 
<li>Fit to Data (Подбирается по данным). Если установлен этот переключатель, ширина таблицы подбирается по размеру самой длинной строки в каждом столбце.</li> 
<li>Set (Равна). Если установить этот переключатель, ширину таблицы можно заранее выбрать в относительных (процентах) или абсолютных (пикселах) единицах измерения.</li> 
<li>Cell Padding (Поля ячейки). Поле задает свободное расстояние между содержимым ячейки и ее границами.</li> 
<li>Cell Spacing (Расстояние между ячейками). Поле задает расстояние между соседними ячейками таблицы.</li> 
<li>Format Top Row (Форматирование верхней строки). Этот список предлагает четыре варианта форматирования первой строки таблицы.</li> 
<li>Border (Рамка). Здесь задается толщина граничной рамки таблицы. Если рамка не нужна, надо задать нулевое значение этого поля.</li> 
<li>Щелкните на кнопке ОК.</li> 
<img src="image/9-3.jpg" alt="Импорт табличных данных"> 
 Рис. 9.3. Импорт табличных данных 
 <img src="image/9-1-kodirovanie_1.gif" alt="Импорт табличных данных"> Если разделители табличных данных, заданный в диалоговом окне и установленный в текстовом файле, не совпадают, то импорт данных выполняется неправильно. Однако программа Dreamweaver в подобных ситуациях ведет себя вполне “миролюбиво” — она не выводит сообщений об ошибках и предупреждений. 
<h1>Изменение размеров таблицы</h1>
Программа Dreamweaver поддерживает стандартный способ изменения размеров таблицы и ее строк и столбцов — перетаскивание границ при помощи мыши. Этот прием можно считать массовым, поскольку чем-то подобным располагают, видимо, все программы, работающие с таблицами. Техника простая, удобная в исполнении, но несколько грубоватая. 
 Основное средство изменения размеров таблицы — это числовые поля Width (Ширина) и Height (Высота) палитры Property Inspector (Инспектор свойств). Единицами измерения габаритов таблицы могут быть проценты или пикселы. В первом случае размеры задаются как доля свободного пространства, окружающего таблицу. Чаще всего отсчет ведется от ширины окна программы просмотра или гипертекстового редактора. Выбор в качестве единиц измерения пикселов означает абсолютный способ измерения, не зависящий от содержащего таблицу контейнера и его размеров. 
 Заданные размеры присваиваются специальным атрибутам дескриптора <table>. Например, строка, в которой задана ширина таблицы в 50 пикселов, а высота равна трети высоты окна, выглядит следующим образом: 
<table height="30%" width="50"> 
Атрибуты, управляющие высотой и шириной, являются легальными параметрами и для дескриптора <td>, который задает границы отдельных ячеек. 
Размеры новой таблицы автоматически подгоняются под ее содержимое. Ширина столбцов не фиксируется и может меняться в зависимости от объема текста и размеров графики. После того как пользователь передвинет любую внутреннюю границу столбца (строки), программа присваивает текущие значения ширины (высоты) всем столбцам (строкам) таблицы. 
Рассмотрим более внимательно ресурсы палитры свойств (рис. 9.2), относящиеся к геометрическим параметрам таблиц. 
<li>W (Ширина). Задает ширину выбранной таблицы. Единицы измерения выбираются в списке справа. Основными единицами являются проценты и пикселы. Как и в большинстве других случаев, ширину можно задавать в нестандартных единицах измерения (пунктах, пиках, дюймах, сантиметрах, миллиметрах) с обязательным добавлением обозначения размерности. Допускается ввод простых арифметических выражений, операнды которых имеют разную размерность.</li> 
 
<li>Н (Высота). Задает высоту выбранной таблицы. Для последующей обработки числовых значений возможности этого элемента управления полностью совпадают с предыдущим полем.</li> 
<li>Clear Row Heights (Сброс значений высоты строк). Удаляет из табличных кодов все атрибуты, отвечающие за высоту строк и самой таблицы.</li> 
<li>Clear Columns Widths (Сброс значений ширины столбцов). Удаляет из дескриптора таблицы все атрибуты, отвечающие за ширину столбцов и всей таблицы.</li> 
<li>Convert Table Widths to Pixels (Преобразовать параметры ширины в пикселы). Переводит все относительные горизонтальные размеры столбцов и самой таблицы в абсолютные, измеренные в пикселах.</li> 
<li>Convert Table Widths to Percent (Преобразовать параметры ширины в проценты). Переводит все абсолютные горизонтальные размеры столбцов и самой таблицы в относительные. Базой для таблицы служит ширина содержащего ее контейнера, для столбцов — ширина самой таблицы.</li> 
Удаление атрибутов, задающих ширину и высоту, фактически является командой подгонки размеров таблицы под фактический объем текстового и графического материала. В большинстве случаев это приводит к сжатию таблицы. 
Следует подчеркнуть особое значение “пустых” полей W (Ширина) и Н (Высота). Если эти поля не заполнены, то дескрипторы, размечающие таблицу, не включают атрибутов ширины и высоты, а сама таблица теряет жесткость. Она меняет свои горизонтальные и вертикальные размеры по мере заполнения. Если очистить ее от всей введенной информации, автоматически восстанавливаются исходные минимальные размеры. Пустые значения размерных атрибутов означают, что вопрос о подлинных размерах таблицы и ее элементов оставляется на усмотрение программ просмотра. 
Иное поведение демонстрируют таблицы с заданными размерами. Если поместить в ячейку такой таблицы объект, габариты которого заведомо превосходят размеры таблицы, то она, естественно, увеличит свои размеры. При этом числовые поля W (Ширина) и Н (Высота) и размерные атрибуты дескрипторов своих значений не изменяют. После удаления негабаритного объекта таблица вернется к исходным пропорциям. 
<h1>Кодирование</h1>
Таблицы, созданные в программе Dreamweaver, по своим базовым свойствам почти не отличаются от таблиц, с которыми работают другие программы, например текстовые редакторы или настольные издательские системы. Все представители этого класса объектов, от простейших “одноклеточных” таблиц до таблиц, выполняющих роль несущих конструкций Web-страниц крупных бирж или новостных компаний, — это просто комбинация строк, столбцов, ячеек, полей и граничных линий. 
 В языке HTML вся информация, относящаяся к таблице (служебная и содернательная), ограничивается парным дескриптором <table> </table>.Этот дескриптор имеет множество атрибутов, которые задают многочисленные размерные и оформительские параметры таблицы, например ширину, цвет фона, границу, выравнивание, поля, расстояние между ячейками и пр. 
 Следующий листинг дает пример записи в кодах HTML таблицы, состоящей из двух строк и двух столбцов. 
<table width="75%” border=" 1 "> 
<tr> 
<d> </td> <d> </td> </tr> <tr> 
<td> </td> <td> </td> </tr> 
 </table> 
Парный дескриптор <tr> ограничивает строку таблицы, а теги вида <td> задают положение и содержание ячеек. Внутрь каждой новой ячейки программа Dreamweaver помещает символ неразрывного пробела  . Это нужно для того, чтобы при просмотре в броузере пустая ячейка не “схлопнулась”. Любая введенная информация автоматически удаляет неразрывный пробел. 
Столбцы не имеют специальных средств разметки; разбивка таблицы на строки и разделение строк на ячейки автоматически порождает систему столбцов таблицы. 
Атрибуты дескриптора строки <tr> могут задавать такие важные свойства, как вертикальное выравнивание, горизонтальное выравнивание, цвет фона строки и некоторые другие, менее востребованные и значимые. Дескриптор ячейки <td> может управлять еще большим числом атрибутов. Среди важнейших упомянем вертикальное и горизонтальное выравнивание, цвет фона, фоновый рисунок и ширина ячейки. 
 
<img src="image/9-1-kodirovanie_1.gif" alt="Кодирование">У ячейки, строки и всей таблицы есть несколько совпадающих атрибутов, например цвет фона. Если их значения противоречат друг другу, то все конфликты разрешаются по правилу “частное важнее общего”. Атрибуты, заданные для отдельной ячейки, отменяют аналогичные параметры строки. Установки строки имеют приоритет над общими атрибутами таблицы. 
Единицами измерения ширины служат пикселы и проценты от общей ширины таблицы. Изменение габаритов ячейки влечет за собой равнозначное преобразование всего столбца. 
Разрешается разворачивать ячейки на несколько строк или столбцов. Эту задачу решают специальные атрибуты colspan (объединить ячейки по столбцам) и rowspan (объединить ячейки по строкам) дескриптора <td>. 
Перечисленные дескрипторы — это основные строительные блоки таблиц. Для работы с этими средствами программа Dreamweaver располагает различными визуальными инструментами и средствами автоматизации, которые позволяют свести к минимуму необходимость прямого ручного кодирования таблиц. 
 Следует упомянуть еще о двух типах структурных кодов разметки таблиц. Это дескриптор <caption>, предназначенный для создания подписи к таблице, и дескриптор <th>, создающий заголовки строк или столбцов. Программа Dreamweaver не располагает специальными средствами для работы с этими тегами. Они могут быть введены в состав таблицы только вручную, в режиме отображения кодов. Справедливости ради стоит отметить, что необходимость в этих средствах возникает довольно редко. 
<h1>Объединение и разбиение ячеек</h1>
Любые операции со строками и столбцами оставляют таблицу в классе регулярных структур. Такие таблицы напоминают своим видом прямоугольные сетки с переменным шагом вдоль координатных осей. Подобная однородность внутреннего устройства существенно ограничивает потенциал таблиц в решении сложных задач размещения и планировки. 
Язык гипертекстовой разметки располагает средствами объединения смежных ячеек. Косвенно эти дескрипторы и атрибуты способны решить и задачу разделения ячейки на составляющие. 
Размеры переменных ячеек задаются при помощи атрибутов colspan и rowspan дескриптора <td>. Первый параметр описывает ячейки, развернутые по горизонтали. Его значение указывает число смежных столбцов, занимаемых данной ячейкой. Второй атрибут устанавливает размеры ячеек, развернутых по вертикали, и определяет число занятых строк. 
Следующие два листинга дают примеры кодирования простейших нерегулярных таблиц с объединенными ячейками. У первой таблицы объединенная ячейка расположена по горизонтали, у второй - по вертикали (рис. 9.9). 
<img src="image/9-9.jpg" alt="Объединение и разбиение ячеек"> 
Рис. 9.9. Таблицы с объединенными ячейками 
<table> 
<tr> 
<td colspan=”2"> </td> 
</tr> 
<tr> 
<td> </td> 
<td> </td> 
</tr> 
</table> 
<table > 
<tr> 
<td rowspan=”2"> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
</tr> 
</table> 
Какими возможностями располагает программа Dreamweaver для создания таблиц с нерегулярной структурой? Она разрешает объединять любые смежные ячейки, образующие форму прямоугольника. Любую одиночную ячейку можно разделить по вертикали или горизонтали. Причем выполнимость этих операций не зависит от предыстории. Любой прямоугольный фрагмент нерегулярной таблицы можно превратить в одну ячейку при помощи операции объединения. И наоборот, неоднородная таблица со сложной структурой ячеек разного размера имеет неограниченный потенциал к дальнейшему усложнению, поскольку любую ее клеточку можно разбить на произвольное число строк или столбцов. 
 
 Рассмотрим технические аспекты операций объединения и разбиения ячеек. Разделение ячейки производится так. 
<li>Поместите текстовый курсор в ячейку.</li> 
<li>Дайте команду разбиения. Сделать это можно несколькими разными способами.</li> 
</li> 
<li>Воспользуйтесь командой Modify > Table > Split Cell (Изменить > Таблица > Разделить ячейку).</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств) и щелкните на кнопке Splits cell into rows or columns (Разделить ячейку на строки или столбцы). Она расположена справа в разделе палитры Cell (Ячейка).</li> 
<li>Нажмите комбинацию клавиш CTRL+ALT+S.</li> 
<li>Любой способ выполнения команды активизирует диалоговое окно, показанное на рис. 9.10. В нем выберите способ разбиения (по горизонтали или по вертикали) и задайте число составляющих ячеек. Способ разбиения выбирается при помощи переключателей Rows (Строки) и Columns (Столбцы). Количество производных ячеек задается в поле Number of Rows/Columns (Число строк/столбцов).</li> 
<li>Щелкните на кнопке ОК или нажмите клавишу ENTER.</li> 
<img src="image/8-10.jpg" alt="Объединение и разбиение ячеек"> 
Puc. 9.10. Параметры разбиения ячеек 
Объединение ячеек производится следующим образом. 
<li>Выберите все ячейки, подлежащие слиянию. Напомним, что только прямоугольные фрагменты таблиц попадают под действие данной операции.</li> 
<li>Дайте команду на объединение ячеек. Для этого программа предлагает следующие возможности:</li> 
<li> </li> 
<li>команда Modify > Table > Merge Cells (Изменить > Таблица > Объединить ячейки);</li> 
<li>кнопка Merges selected cells using spans (Объединить выбранные ки), расположенная слева в разделе Cell (Ячейка) палитры Property Inspector (Инспектор свойств);</li> 
<li>комбинация клавиш CTRL+ALT+M;</li> 
<li>самый простой вариант — это нажатие клавиши М.</li> 
 Результатов, подобных описанным, можно добиться при помощи команд расширения и сокращения диапазона объединения. Эти команды расположены в меню Modify > Table (Изменить > Таблица). Рассмотрим их возможности. 
<li>Increase Row Span (Увеличить охват строк). Объединяет текущую ячейку с ячейкой, расположенной под ней.</li> 
<li>Decrease Row Span (Уменьшить охват строк). Разбивает ранее объединенную ячейку. Из нижней части объединенного элемента вычленяется одна простая ячейка.</li> <li>Increase Column Span (Увеличить охват столбцов). Объединяет текущую ячейку с ее соседом справа.</li> 
<li>Decrease Column Span (Уменьшить охват столбцов). Из правой части объединенной ячейки вычленяет одну простую ячейку.</li> 
<h1>Операции с буфером обмена</h1>
По сравнению с другими редакторами HTML программа Dreamweaver не накладывает жестких ограничений на передачу табличных данных через буфер обмена. Немногие запреты, существующие для подобных операций, объясняются объективными причинами и совсем не стеснительны для пользователя. 
При передаче табличных данных сохраняются важнейшие признаки форматирования ячеек, их содержимое и его оформление. 
Самым важным ограничением является запрет на передачу через буфер обмена табличных фрагментов непрямоугольной формы. Программа pаз- 
решает выбирать несмежные ячейки, но запрещает передавать их через буфер. 
Рассмотрим техническую сторону таких операций. Передача табличной информации при помощи буфера обмена выполняется следующим образом. 
<li>Выберите нужные ячейки в таблице-источнике. Напомним, что группа выделенных ячеек должна иметь прямоугольную форму.</li> 
<li>Дайте команду копирования (CTRL+C) или вырезания (CTRL+X). Вырезание отдельных ячеек забирает в буфер обмена только их содержимое, а если данная операция применена к целой строке или столбцу, в буфер обмена помещается и содержимое, и формат ячеек.</li> 
<li>Поместите текстовый курсор в целевую таблицу. Его положение во многом определяет результат всей операции.</li> 
<li>При копировании ячеек текстовый курсор должен быть размещен в целевой ячейке. Эта ячейка считается левым верхним углом передаваемого фрагмента. Если таблица-приемник обладает достаточным пространством, чтобы вместить подтаблицу из буфера обмена, то операция будет успешно выполнена. В противном случае программа выдаст сообщение о недостатке места.</li> 
<li>Пусть в буфере находится целая строка. Если целевая таблица имеет ту же ширину, что таблица-источник, то содержимое буфера можно вставить как новую строку, а не как прямоугольный фрагмент. Для этого надо найти строку, над которой надо выполнить вставку, и поместить в любую ее ячейку текстовый курсор.</li> 
<li>Все сказанное выше верно и при вставке столбцов. Чтобы определить положение нового столбца, надо найти его соседа справа и поместить текстовый курсор в любую ячейку этого столбца.</li> 
 
<li>Пусть в буфере обмена находится целая строка или столбец. Чтобы заменить строку или столбец таблицы-приемника, требуется выбрать их целиком.</li> 
<li>Чтобы сделать содержимое буфера обмена новой самостоятельной таблицей, надо разместить текстовый курсор за пределами уже существующих таблиц страницы.</li> 
<li>Дайте команду вставки (CTRL+V).</li> 
<img src="image/9-1-kodirovanie_1.gif" alt="Операции с буфером обмена">Чтобы переместить внутреннюю строку или столбец на периферию таблицы, требуется перед операцией вставки добавить к таблице дополнительную строку или столбец. Для этого надо выбрать всю таблицу,открыть палитру Property Inspector (Инспектор свойств) и увеличить значения полей Rows (Строки) или Cols (Столбцы). 
Несколько интересных возможностей для передачи табличной информации разного типа предоставляют команды Copy HTML (Копировать кодовый фрагмент) и Paste HTML (Вставить кодовый фрагмент). Перечислим несколько самых полезных вариантов их использования. 
<li>Последовательность команд Copy HTML (Копировать кодовый фрагмент) и Paste HTML (Вставить кодовый фрагмент) — это хорошая возможность создания вложенных таблиц. Если выбрать прямоугольную подтаблицу, скопировать ее в буфер обмена как фрагмент HTML, а затем выполнить вставку кодового фрагмента, то подтаблица помещается в выбранную ячейку в неизменном виде, вместе со всеми данными и признаками форматирования. </li> 
<li>Последовательность команд Сору (Копировать) и Paste HTML (Вставить кодовый фрагмент) дает возможность извлечь из табличной формы текстовое содержание. Для этого надо перенести в буфер обмена табличный фрагмент при помощи обычной команды копирования (CTRL+С), а вставить как кодовый фрагмент (CTRL+SHIFT+V).</li> 
<h1>Поля и интервалы ячеек</h1>
В языке гипертекстовой разметки предусмотрено два способа управления свободным пространством таблицы. Добавить “воздуха” в таблицу с высокой плотностью размещения данных можно при помощи полей ячеек и интервалов между ними. Поля ячейки — это свободное внутреннее пространство, расположенное по всем четырем ее границам (рис. 9.6). Здесь можно провести полную аналогию с полями обычной печатной страницы. За одним лишь исключением: если поля страницы могут быть разными, то поля ячеек всегда принимают одно и то же значение, общее для всей таблицы. В языке гипертекстовой разметки этим признаком оформления управляет специальный атрибут cellpadding дескриптора <table>. 
<img src="image/9-6.jpg" alt="Поля и интервалы ячеек"> 
Рис. 9.6. Поля ячеек 
Интервалы представляют собой расстояние между смежными ячейками таблицы. В языке HTML эта величина является одинаковой для всех ячеек и их соседей по вертикали и горизонтали (рис. 9.7). Выбранное значение интервала присваивается атрибуту cellspacing дескриптора таблицы <table>. 
<img src="image/9-7.jpg" alt="Поля и интервалы ячеек"> 
Рис. 9.7. Интервалы между ячейками 
Изменить величину полей и интервалы между ячейками таблицы можно. следующим образом. 
<li>Выберите таблицу.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств).</li> 
<li>Введите новые значения в поля CellPad (Поля) и CellSpace (Интервалы).</li> 
<li>Нажмите клавишу ОК.</li> 
<img src="image/9-1-kodirovanie_1.gif" alt="Поля и интервалы ячеек">По умолчанию для новой таблицы поля составляют один пиксел, а интервалы — два пиксела. Этим значениям соответствуют пустые поля CellPad (Поля) и CellSpace (Интервалы) палитры свойств и диалогового окна Insert Table (Вставка таблицы), при посредничестве которого выполняется вставка таблицы. Чтобы сомкнуть ячейки или убрать свободное внутреннее пространство, надо ввести в эти поля нулевые значения. 
<h1>Сортировка таблиц</h1>
Сортировка — это штатная операция любого мощного текстового редактора, электронной таблицы или системы управления базой данных. Может сложиться впечатление, что в редакторе гипертекстовых документов наличие инструмента с подробными функциями необязательно. Действительно, первые поколения редакторов HTML справлялись со своими задачами и без этой команды. Прошло то время, когда верхом технической сложности считались текстовые документы с анимационной графикой, а мастерство дизайнера (и его гонорар) определяли по числу команд гипертекстового перехода. Сейчас на виртуальных страницах размещают технические справочники, обширные прейскуранты, каталоги продуктов, интерактивные учебники, информационная поддержка которых часто основывается на больших таблицах. Ручное упорядочение числового или текстового материала больших таблиц — это утомительное занятие, связанное с риском появления ошибок. 
 В программе есть специальная команда сортировки таблиц с числовым или текстовым наполнением. Операции этого типа хорошо известны и широко распространены в программах различного целевого назначения. Отличительной особенностью сортировки в программе Dreamweaver является то, что она сохраняет заданные признаки форматирования строк. 
В процессе сортировки программа переставляет целые строки, не разрывая их на отдельные ячейки. В качестве критерия выбираются числовые или текстовые данные в одном из столбцов таблицы. Разрешается задавать два критерия: по первому выполняется основная сортировка, второй служит для тонкой сортировки в пределах групп строк, которые имеют одинаковые значения основного критерия. 
Сортировка таблицы выполняется следующим образом. 
<li>Выберите таблицу. Для этого, например, можно воспользоваться командой Modify > Table > Select Table (Изменить > Таблица > Выбрать таблицу).</li> 
<li>Не снимая выбора с таблицы, дайте команду Commands > Sort Table (Команды > Сортировать таблицу).</li> 
<li>Задайте необходимые параметры сортировки в диалоговом окне Sort Table (Сортировка таблицы) (рис. 8.14). Рассмотрим возможности этого диалогового окна.</li> 
 
<li>Sort by (Сортировать по). В этот список программа автоматически включает все столбцы выбранной таблицы. В нем надо выбрать столбец, значения которого выполняют функции основного критерия сортировки.</li> 
<li>Order (Порядок). Раздел служит для задания порядка сортировки. В первом раскрывающемся списке следует выбрать один из двух типов сортировки: Alphabetically (В алфавитном порядке) или Numerically (В числовом порядке). Второй список задает последовательность расположения элементов упорядочения. Он тоже состоит из двух пунктов: Ascending (По возрастанию) и Descending (По yбыванию).</li> 
<li>Then by (Затем по). Раздел предназначен для задания параметра сортировки по вторичному критерию. Вторичная сортировка выполняется только для групп строк, которые обладают одинаковым значением первичного критерия. Все параметры вторичного критерия задаются так же, как для первичного.</li> 
<li>Sort Includes First Row (Включить в сортировку первую строку). Если первая строка таблицы является информационной и должна участвовать в упорядочении, этот флажок следует включить. Если первая строка представляет собой заголовок, флажок надо сбросить.</li> 
<li>Keep TR Attributes With Sorted Row (Сохранить атрибуты дескриптора строк). Если требуется сохранить форматирование строк, следует установить этот флажок. В этом случае переставляются строки целиком, а не только их содержимое.</li> 
<li>Щелкните на кнопке ОК.</li> 
<img src="image/9-14.jpg" alt="Сортировка таблиц"> 
Рис. 9.14. Настройка процедуры сортировки 
<img src="image/9-1-kodirovanie_1.gif" alt="Сортировка таблиц">Программа Dreamweaver обрабатывает пустые поля так же, как любая другая программа или утилита, выполняющая сортировку. Пустое значение считается “меньше” любой литеры или числа, поэтому при сортировке по возрастанию такая строка окажется на первом месте, а при сортировке по убыванию — на последнем. 
<h1>Табличные стили</h1>
Ни один объект гипертекстового документа не может сравниться с таблицами по возможной плотности размещения информации на единицу полезной площади. Форматирование таких информационных хранилищ, насыщенных разнородными данными, — часто трудоемкое и утомительное занятие. Программа Dreamweaver располагает специальными средствами автоматизации рутинных процедур форматирования больших таблиц. В состав программы входит семнадцать заранее разработанных форматов оформления, а также средства их назначения и настройки. Эти предопределенные форматы поддерживают основные приемы делового стиля оформления таблиц. В их число входят: выделение заголовочных строк и столбцов, разлиновка таблицы, задание фона таблицы, раскраска строк с чередованием и пр. Выбранный стиль можно принять за основу и доработать его параметры согласно вкусу и предпочтениям автора. 
Стандартный стиль оформления назначают таблице так. 
<li>Выберите таблицу.</li> 
<li>Дайте команду Commands > Format Table (Команды > Формат таблицы). </li> 
<li>Откроется одноименное диалоговое окно. В его левой части выберите название стиля. Настройте атрибуты стиля, используя другие средства этого окна. Рассмотрим эти средства.</li> 
<li>Row Color: First (Цвет фона строки: первый). Задает цвет фона первой строки основной части таблицы. Верхняя строка считается заголовочной. Для указания цвета надо ввести его шестнадцатеричный код или имя, если таковое имеется.</li> 
<li>Row Color: Second (Цвет фона строки: второй). Задает второй фоновый цвет. Он нужен для того, чтобы организовать чередование раскраски строк таблицы. Этот тон задается обычным для языка HTML способом: именем или шестнадцатеричным кодом.</li> 
<li>Row Color: Alternate (Цвет фона строк: чередование). Задает очередность повторения первого и второго фоновых цветов. Представляет собой список, в котором перечислены варианты чередования. Первый пункт (do not alternate — без чередования) означает отказ от комбинирования цветов. В этом случае все рабочие строки таблицы закрашиваются первичным цветом. Следующие пункты задают правила раскраски: Every Other Rows (Через одну строку), Every Two Rows (Через две строки) и т. д.</li> 
 
<li>Top Row: Align (Первая строка: выравнивание). Задает выравнивание текста первой строки таблицы. Первая строка считается заголовочной, она хранит названия заголовков информационных столбцов.</li> 
<li>Top Row: Text Style (Первая строка: начертание). Задает стиль текстового содержимого первой строки.</li> 
<li>Top Row: Bg Color (Первая строка: цвет фона). Определяет цвет фона первой, заголовочной строки таблицы. Его можно задать по имени или при помощи шестнадцатеричного кода.</li> 
<li>Top Row: Text Color (Первая строка: цвет текста). Устанавливает цвет текста для первой строки таблицы. Этот параметр задается обычным для языка HTML способом.</li> 
<li>Left Col: Align (Левый столбец: выравнивание). Служит для выбора способа выравнивания текстового содержимого левого столбца. Он считается заголовочным, предназначенным для описания одного из входов таблицы.</li> 
<li>Left Col: Text Style (Левый столбец: начертание). Задает стиль текста в столбце таблицы.</li> 
<li>Border (Рамка). Определяет толщину табличной рамки в пикселах.</li> 
<li>Apply All Attributes to TD instead TR Tags (Добавить атрибуты в дескриптор TD). Если установить этот флажок, то все установленные атрибуты добавляются в дескрипторы ячеек <td>, а не в дескрипторы строк <tr>.</li> 
Щелкните на кнопке Apply (Применить), чтобы применить заданное стилевое оформление к таблице, или на кнопке ОК, чтобы применить заданные установки и закончить работу с диалоговым окном. 
<img src="image/9-13.jpg" alt="Табличные стили"> 
Puc. 9.13. Настройка предопределенных форматов 
<img src="image/9-1-kodirovanie_1.gif" alt="Табличные стили">Последний флажок диалогового окна с рекордно длинным для программы названием может оказаться полезным в ряде случаев. Во-первых, при вложении одной таблицы в другую, когда предопределенный формат применяется ко внутренней таблице и требуется защитить ее форматирование от воздействия кодов внешней таблицы. Во-вторых, когда требуется сохранить оформление ячеек при их переносе в другое местоположение. Следует помнить, что эта настройка способна значительно увеличить объем файла гипертекстового документа, особенно при воздействии на большие таблицы. 
<h1>Таблицы</h1>
Таблица в обыденном, привычном понимании этого слова — это сводка текстовых или числовых данных, приведенных в систему и расположенных строкам, столбцам или ячейкам. Это если и не синоним, то понятие, хорошо ложащееся в один ассоциативный ряд с ведомостью, сводкой, реестром, прейскурантом и пр. 
Для печатных публикаций роль таблиц выходит далеко за пределы простых форм для представления числовых или описательных данных. Это мощное техническое и изобразительное средство, незаменимое при разработке документов со сложной структурой и планировкой. Его потенциал объясняется тем, что ячейки представляют собой отдельные клетки страницы, содержание и форматирование которых не зависит от окружения и предыстории. 
Еще более заметна роль таблиц в подготовке гипертекстовых документов Язык HTML — это инструмент логической разметки, большая часть его изобразительных средств не связана с координатными системами и не обращается к абсолютным единицам измерения. Многие задачи точного позиционирования объектов и планировки страницы, требующие привязки и абсолютной системе координат, сохранения размеров и пропорций, не имеют простого решения на уровне чистого HTML. Для этого разработчикам приходилось прибегать к разнообразным ухищрениям и уловкам. 
 До появления иерархических стилевых спецификаций (CSS) таблицы служили чуть ли не единственным надежным инструментом для точной планировки, выравнивания и взаимной координации объектов на гипертекстовых страницах. 
Таблицы — готовые формы для хранения текстовой и графической информации. Самая простая таблица, состоящая из одной ячейки со вложенным рисунком, — это еще один способ взаимной координации текста и изображений. С задачей объединения рисунков и подрисуночных надписей прекрасно справится таблица из двух ячеек, расположенных по вертикали. Два столбца без разбиения на строки — это хороший способ поделить страницу на колонки. Если добавить к этому объекту разбивку на строки, получим удобную форму для хранения неупорядоченного списка со специальными графическими маркерами. Таблицам трудно подобрать равноценную замену при создании алфавитных указателей, индексов, глоссариев и пр. 
<h1>Удаление строк и столбцов</h1>
Удаление граф таблицы — это операция, не требующая настройки и диалога с пользователем. Выполняется она следующим образом. 
<li>Поместите текстовый курсор в ячейку.</li> 
<li>Удалите строку или столбец, на пересечении которых находится данная ячейка. Для этого есть следующие возможности:</li> 
<li>команды Modify > Table > Delete Row (Изменить > Таблица > Удалить строку) или комбинация клавиш CTRL+SHIFT+M;</li> 
<li>Modify >> Table > Delete Column (Изменить > Таблица > Удалить столбец) или комбинация клавиш CTRL+SHIFT+-.</li> 
Строки и столбцы, выбранные целиком, можно удалять более традиционным для приложений Windows способом. С этой задачей прекрасно справляются клавиши DELETE и BACKSPACE. Кроме того, удаляемые графы можно просто вырезать в буфер обмена. 
<img src="image/9-1-kodirovanie_1.gif" alt="Удаление строк и столбцов">Программа Dreamweaver, в отличие от большинства других приложений, выполняет операцию удаления сразу. Она обходится без информационных сообщений и запросов на подтверждение. 
<h1>Вложение таблиц</h1>
Программа Dreamweaver разрешает создавать вложенные таблицы. Следует отметить, что эта весьма ресурсоемкая операция реализована в программе очень чисто. Несмотря на то что в стандарте языка гипертекстовой разметки не оговариваются ограничения на создание многоуровневых таблиц, многие гипертекстовые редакторы начинают сбоить или выдают сообщения о недопустимых действиях примерно на третьем уровне иерархии. Пользо-ватель Dreamweaver может создать сложную иерархическую систему с многократным включением таблиц в ячейки табличных контейнеров. Но возможность не означает необходимость. Большинство реальных задач планировки и размещения гипертекстовых страниц находят эффективное решение при помощи таблиц с однократным вложением. Требуются очень веские аргументы, чтобы оправдать двукратное или еще более глубокое вложение таблиц. На рис. 9.15 показана возможная планировка заглавной страницы гипотетического корпоративного сайта. 
<img src="image/9-15.jpg" alt="Вложение таблиц"> 
Рис. 9.15. Планировка страниц при помощи вложенных таблиц 
Приведем несколько простых рекомендаций по созданию иерархических таблиц. 
<li>Целесообразно начать планировку страницы с создания ее эскиза. С этой ролью успешно справится и простой карандашный набросок, который дает ясное представление о разбиении гипертекстовой страницы на области и подобласти. Предварительно отработанный план позволит минимизировать трудоемкие эксперименты с такими громоздкими объектами, каковыми являются неоднородные иерархические таблицы.</li> 
<li>Не следует забывать о таком эффективном средстве выделения объектов, как селектор разметки. В процессе работы с вложенными таблицами к его услугам приходится прибегать гораздо чаще, чем в обычной ситуации. Визуальный режим работы далеко не всегда позволяет разобраться в хитросплетениях рамок, объединенных ячеек и вложенных таблиц. Последовательность тегов селектора дает ясное представление о соподчиненности таблиц и их структуре и позволяет одним щелчком выделить искомый объект.</li> 
<li>Во многих случаях вложение таблиц является хорошей альтернативой разбиению ячеек. Предположим, что для решения некоторой дизайнерской задачи требуется разделить ячейку на несколько составляющих. Если речь идет о регулярной таблице со слабым информационным наполнением, то эта простая операция не вызывает никаких осложнений. В неоднородных таблицах, насыщенных данными, разбиение ячеек — это источник дополнительных возмущений, способный нарушить хрупкое равновесие всей “конструкции”. При вставке таблицы с требуемым числом ячеек все изменения носят локальный характер и не распространяются за пределы данного контейнера.</li> 
 
<li>Для зазадания размеров внутренних и внешних таблиц следует использовать разные системы измерения. Для таблиц-контейнеров лучше подходит абсолютная система, когда их гариты задаются в пикселах и не зависят от ширины экраны. Для вложенных таблиц относительная система измерения является более предпочтительной. Впрочем, это правило имеет рекомендательный характер.</li> 
<li>если в процессе вставки таблиц не удается добиться плотного контакта границ, то, скорее всего, это вызвано пробельными зонами, которые оставляет программа между ячейками. По умолчанию их размер составляет два пиксела. Напомним, что за этот табличный параметр отвечает поле CellSpace (Интервал) палитры свойств. Чтобы убрать зазор между ячейками, введите в это поле нулевое значение.</li> 
С технической точки зрения, процедура создания вложенных таблиц ничем 
не отличается от вставки на свободное страничное поле. 
<li>Поместите текстовый курсор в ячейку таблицы-контейнера.</li> 
<li>Дайте команду вставки. Напомним существующие альтернативы:</li> 
<li>команда Insert > Table (Вставка > Таблица);</li> 
<li>комбинация клавиш CTRL+ALT+T;</li> 
<li>щелчок на кнопке Insert Table (Вставить таблицу) палитры Objects (Объекты);</li> 
<li>перетаскивание этой кнопки.</li> 
<h1>Вставка строк и столбцов</h1>
Добавление и удаление строк и столбцов — это наиболее часто встречающиеся структурные операции с таблицами. Многие задачи перепланировки таблиц решаются добавлением и удалением строк и столбцов. Программа располагает несколькими техническими приемами для их выполнения. В их число входят команды меню, клавиатурные комбинации, операции с палитрой и буфером обмена. 
Добавление строки или столбца можно выполнить так. 
<li>Поместите текстовый курсор в ячейку, которая служит ориентиром для вставки новых линий таблицы. Действует правило, согласно которому новые строки располагаются над выбранной ячейкой, столбцы — левее ее.</li> 
<li>Дайте команду вставки. Перечислим варианты ее технической реализации.</li> 
 
<li>Команды Modify > Table > Insert Row (Изменить > Таблица > Вставить строку), Modify > Table > Insert Column (Изменить > Таблица > Вставить столбец), Modify > Table > Insert Rows or Columns (Изменить > Таблица > Вставить строки или столбцы). Первые две команды создают одну строку или столбец. Они не требуют ввода дополнительных параметров и не нуждаются в диалоге с пользователем. Последняя команда обладает большими возможностями. Она выводит на экран диалоговое окно Insert Rows or Columns (Вставка строк или столбцов) (рис. 9.8), средствами которого выполняется вся необходимая настройка.</li> 
<li>Все перечисленные команды можно выдать и через контекстное меню. Для этого щелкните правой кнопкой мыши на таблице и выберите нужную команду из раздела Table (Таблица) открывшегося контекстного меню.</li> 
<li>Комбинация клавиш CTRL+M служит для вставки одной строки.</li> 
<li>Комбинация клавиш CTRL+SHIFT+A служит для вставки одного столбца.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств) и увеличьте значения числовых полей, управляющих размером таблицы. Напомним, что эти поля называются Rows (Строки) и Cols (Столбцы).</li> 
 Рассмотрим настройки диалогового окна Insert Rows or Columns (Вставка строк или столбцов) (рис. 9.8). На этом рисунке диалоговое окно находится в режиме вставки строк, поэтому названия его разделов адаптированы к этой ситуации ции. При вставке столбцов все термины, относящиеся к строкам, изменяются. 
 
<li>Rows (Строки). Переключатель, выбирающий вставку строк.</li> 
<li>Columns (Столбцы). Переключатель, выбирающий вставку столбцов.</li> 
<li>Number of Rows (Число строк). Это поле задает количество вставляемых строк.</li> 
<li>Where (Куда). Эти переключатели задают расположение новых элементов. Положение строк регулируется переключателями Above the Selection (Над выбранной) и Below the Selection (Под выбранной). При вставке столбцов эти переключатели называются Before Current Column (Перед текущим столбцом) и After Current Column (После текущего столбца).</li> 
<img src="image/9-8.jpg" alt="Вставка строк и столбцов"> 
Puc. 9.8. Вставка строк таблицы 
<img src="image/9-1-kodirovanie_1.gif" alt="Вставка строк и столбцов">Чтобы добавить в таблицу столбец справа или строку снизу, надо выбрать всю таблицу, открыть палитру свойств и увеличить на единицу значения полей Rows (Строки) или Cols (Столбцы). Кроме того, добавить строку снизу можно, нажав клавишу TAB, когда курсор находится в правой нижней ячейке таблицы. 
<h1>Вставка таблиц</h1>
Вставка таблиц — это технически несложная процедура, выполняемая по стандартной для программы Dreamweaver схеме. 
<li>Поместите курсор в то место страницы, которое выбрано для вставки таблицы.</li> 
<li>Дайте команду Insert > Table (Вставка > Таблица). Существуют и альтернативные варианты выдачи этой команды:</li> 
<li>комбинация клавиш CTRL+ALT+T;</li> 
<li>щелчок на кнопке Insert Table (Вставить таблицу) в разделе Common (Общие) палитры Object (Объекты);</li> 
<li>перетаскивание кнопки Insert Table (Вставить таблицу).</li> 
<li>Заполните поля диалогового окна Insert Table (Вставка таблицы) (рис. 9.1), которое появится на экране при любом варианте выдачи команды. Рассмотрим элементы управления этого окна.</li> 
<li>Rows (Строки).Число строк таблицы.</li> 
Colums (Столбцы). Число столбцов таблицы. 
Width (Ширина). Ширина таблицы. Единицы измерения выбираются в списке справа. Ширина таблицы может быть задана в процентах от горизонтального размера контейнера, содержащего этот объект. В общем случае контейнером может быть окно, слой или другая таблица. Выбор в качестве единицы измерения пикселов задает абсолютную ширину таблицы. 
Border (Рамка). Ширина граничной рамки вокруг каждой ячейки и всей таблицы. Задается в пикселах. 
Cell Padding (Поля ячейки). Величина свободного пространства между границей ячейки и ее содержимым. Измеряется в пикселах, по умолчанию эта величина равна одному пикселу. Чтобы убрать внутренние поля ячейки, надо ввести в это поле нулевое значение. 
Cell Spacing (Расстояние между ячейками). Свободное расстояние между соседними ячейками. Измеряется в пикселах, по умолчанию эта величина равна двум пикселам. Нулевое значение этого поля убирает свободное пространство между ячейками. 
<li>Щелкните кнопке OK или нажмите клавишу ENTER.</li> 
<img src="image/9-1.jpg" alt="Вставка таблиц"> 
Рис 9.1. Вставка таблицы 
Почти все решения, принятые на этапе вставки таблицы, можно изменить позже. Это относится к числу строк и столбцов таблицы, а также к ее размерам и оформительским параметрам. 
Размеры таблицы, заданные в относительной системе, автоматически подгоняются под габариты окна броузера или редактора. Ширина, указанная в пикселах, не изменяется. 
 
 По умолчанию ширина новой таблицы устанавливается в 75% от ширины окна программы просмотра или редактора HTML. В процессе ввода текста и вставки рисунков таблица сохраняет заданную при создании ширину во всех случаях, за исключением следующих ситуаций: 
<li>при вставке рисунка, размеры которого превосходят параметры таблицы;</li> 
<li>когда используется специальный дескриптор <nowrap>, подавляющий переход на новую строку, а длина текста превосходит доступное свободное пространство.</li> 
 Если при вставке сделать поле Width (Ширина) пустым, то программа создаст таблицу минимальных размеров, ширина которой будет автоматически подгоняться под текст. 
<img src="image/9-1-kodirovanie_1.gif" alt="Вставка таблиц">Диалоговое окно Insert Table (Вставка таблицы) сохраняет ранее заданные настройки. Если требуется разместить на странице несколько таблиц с одинаковыми параметрами, то вывод этого окна целесообразно подавить. Для этого в основных настройках программы (CTRL+U) в разделе General (Общие) надо сбросить флажок Show Dialog When Inserting Objects (Показывать диалоговое окно при вставке объектов). 
Следует упомянуть о еще одной особенности работы с таблицами. Для ускорения работы программы принимается соглашение об “отложенном обновлении”. Что это значит? При вводе текста в ячейки все таблицы меняют свои вертикальные размеры, горизонтальные при этом остаются неизменными. Таблицы с относительными размерами подгоняют свои габариты под фактический объем введенного текста только после перехода на страницу. Такое правило принято для ускорения работы программы. Пользователь может отказаться от него и включить для редактирования таблиц режим “реального времени”. Для этого надо в окне настройки программы в разделе General (Общие) сбросить флажок Faster Table Editing (Deferred Update) (Быстрое редактирование таблиц — отложенное обновление). 
Чтобы обновить таблицу в процессе редактирования, без перехода на страницу, достаточно воспользоваться комбинацией клавиш CTRL+ПРОБЕЛ. 
<h1>Выбор ячеек</h1>
Существуют следующие возможности индивидуального выбора ячеек. 
<li>Наведите указатель мыши на ячейку, нажмите левую кнопку мыши и протяните указатель в соседнюю ячейку. Направление протягивания не имеет значения. Отпустить кнопку следует на некотром расстоянии от исходной ячейки, когда появится характерная рамка выбора.</li> 
<li>Удерживая нажатой клавишу CTRL, щелкните на любой точке нужной ячейки.</li> 
<li>Поместите текстовый курсор внутрь ячейки и нажмите комбинацию клавиш CTRL+A.</li> 
<li>Щелкните на дескрипторе <td> в селекторе кодовой разметки.</li> 
 Следует упомянуть и о приемах коллективного выбора нескольких ячеек, Для этого программа Dreamweaver предлагает следующие возможности. 
<li>Последовательно щелкните на нужных ячейках, удерживая нажатой клавишу CTRL. Таким образом можно выделить любую группу ячеек таблицы, даже при отсутствии у них общей границы.</li> 
<li>удерживая нажатой клавишу SHIFT, последовательно щелкните на двух ячейках. В результате будет выбран прямоугольный фрагмент таблицы, у которого эти ячейки располагаются на противоположных концах диагонали.</li> 
<li>Наведите указатель на ячейку таблицы и, не отпуская левой кнопки мыши, перетащите его на другую ячейку. В результате будет выбран такой же прямоугольный фрагмент таблицы, как и в предыдущем случае.</li> 
<img src="image/9-1-kodirovanie_1.gif" alt="Выбор ячеек">Чтобы отменить выбор ячейки, надо щелкнуть на ней при нажатой клавише CTRL. 
<h1>Выбор элементов таблицы</h1>
Средства редактирования таблиц расположены в программе весьма компактно. Большинство команд редактирования расположены в меню Modify > Table (Изменить > Таблица). Ко многим ресурсам открывает доступ палитра Property Inspector (Инспектор свойств) (рис. 9.2) и контекстное меню, которое открывается при щелчке правой кнопки мыши. Необходимым условием успешного редактирования является правильный выбор элементов таблицы. 
Выбор элементов — это первый шаг любой процедуры редактирования таблицы. Программа разрешает выбирать следующие элементы: 
<li>таблицу целиком;</li> 
<li>отдельную строку;</li> 
<li>несколько строк, смежных или отдельных;</li> 
<li>отдельный столбец;</li> 
<li>несколько столбцов, смежных или отдельных;</li> 
<li>отдельную ячейку;</li> 
<li>несколько ячеек, смежных или отдельных.</li> 
<h1>Выбор строк и столбцов</h1>
Выбор строк и столбцов можно выполнить несколькими способами, но все они опираются на работу с мышью. Для этих целей программа не предлагает ни команд меню, ни клавиатурных комбинаций. Перечислим все имеющиеся возможности. 
<li>Подведите указатель к границе строки или столбца. Оставаясь за пределами таблицы на небольшом удалении от нее, перемещайте указатель, пока он не примет форму стрелки. После этого один раз щелкните левой кнопкой мыши.</li> 
<li>Для выбора нескольких строк или столбцов, надо повторить описанную операцию несколько раз при нажатой клавише CTRL.</li> 
<li>Поместите курсор в первую ячейку строки или столбца и, удерживая нажатой левую кнопку мыши, перетащите указатель в последнюю ячейку.</li> 
<li>Удерживая нажатой клавишу CTRL, последовательно щелкните на всех ячейках строки или столбца.</li> 
<li>Поместите текстовый курсор в начальную ячейку строки или столбца, затем, удерживая нажатой клавишу SHIFT, щелкните на последней ячейке.</li> 
 Признаком выбора служит черная рамка вокруг всех ячеек строки или столбца. В палитре Property Inspector (Инспектор свойств), в левой ее части, есть специальный значок с изображением, напоминающим стилизованную таблицу. Он играет роль индикатора выбора таблиц и их элементов. Если этот значок отображает темную строку или столбец, значит, работа выполнен и успешно. 
<h1>Выбор таблицы целиком</h1>
Программа предлагает несколько различных приемов выбора таблиц. Пере-числим их. 
<li>Команда Modify > Table > Select Table (Изменить > Таблица > Выбрать таблицу). Чтобы эта команда была доступна, текстовый курсор должен находиться внутри таблицы или же любая часть таблицы должна быть выбрана ранее.</li> 
<li>Комбинация клавиш CTRL+A работает при выполнении условий, упомянутых в предыдущем пункте.</li> 
<li>Команда Edit > Select All (Правка > Выбрать все) является синонимом команды Select Table (Выбрать таблицу), если текстовый курсор находится в пределах таблицы.</li> 
<li>Щелчок правой кнопкой мыши на любой точке таблицы и выбор из открывшегося контекстного меню команды Table > Select Table (Таблица > Выбрать таблицу).</li> 
<li>Щелчок мыши выбирает всю таблицу, если ее указатель выглядит как четырехнаправленная стрелка. Такую форму он принимает в непосредственной близости от границы таблицы.</li> 
<li>Протягивание указателя мыши через всю таблицу.</li> 
<li>Щелчок мыши на дескрипторе <table> в селекторе разметки, расположенном в левой части строки состояния.</li> 
Выбранная таблица выделяется специальной рамкой с тремя маркерами, расположенными справа в нижней части таблицы. 
<h1>Выравнивание</h1>
Горизонтальное выравнивание — это важная характеристика любой таблицы. Язык гипертекстовой разметки имеет в своем арсенале несколько различных приемов для выравнивания таблиц. Это стандартные типы выравнивания по левому краю, правому краю и центру страницы. Таблицы с такими признаками форматирования “выдавливают” со своей полосы весь текст и объекты другого типа (рис. 9.4). 
Кроме того, существуют способы выравнивания, которые делают таблицу “плавающей”. В этом случае текст обтекает таблицу с одной из сторон, что позволяет добиться более плотного “монтажа” гипертекстовой страницы. 
Выравнивание с обтеканием выполняется при помощи специального атрибута align дескриптора <table>. Так, для выравнивания по левому краю в коды страницы должна быть введена строчка примерно такого содержания (рис. 8.4): 
<table align="left"> 
<img src="image/9-4.jpg" alt="Выравнивание"> 
Рис. 9.4. Виды выравнивания таблиц 
Выравнивание без обтекания реализуется иначе. Эту задачу выполняет специальный парный дескриптор <div>. Табличные коды заключаются внутрь этого тега-контейнера, который управляет положением таблицы при помощи специального атрибута align. Например, следующий кодовый фрагмент дает пример выравнивания по центру простейшей таблицы, состоящей из одной ячейки: 
<div align="center"> 
 <table> 
<tr> 
<td> </td> 
</tr> . 
</table> 
</div> 
Рассмотрим технические аспекты этих операций. Задать выравнивание таблицы без обтекания текстом можно следующим образом. 
<li>Выберите таблицу, используя любой из описанных ранее приемов.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств) и убедитесь в том, что в разделе Align (Выравнивание) выбран пункт Default (По умолчанию).</li> 
<li>Выберите одну из команд меню Text > Align (Текст > Выравнивание). Это меню объединяет три команды выравнивания: Left (По левому краю), Right (По правому краю), Center (По центру).</li> 
Выравнивание с обтеканием настраивается так. 
<li>Выберите таблицу.</li> 
<li>Откройте палитру Property Inspector (Инспектор свойств).</li> 
 
<li>В списке Align (Выравнивание) выберите один из типов выравнивания.</li> 
<li>Default (По умолчанию). Атрибуту выравнивания не присваивается никакого значения, а вопрос о горизонтальном положении таблицы оставляется на усмотрение программы просмотра. Обычно это выравнивание по левому краю без обтекания.</li> 
<li>Left (По левому краю). Выравнивание по левому краю окна программы просмотра и обтекание текста по правому краю таблицы.</li> 
<li>Right (По правому краю). Выравнивание по правому краю окна броузера и обтекание по левой границе таблицы.</li> 
<li>Center (По центру). Выравнивание по середине окна программы просмотра без обтекания текстом. Работает только с новыми версиями броузеров (от 4.0 и выше).</li> 
<img src="image/9-1-kodirovanie_1.gif" alt="Выравнивание">После установки режима обтекания таблица становится плавающим объектом, а ее точка привязки помечается специальным значком, напоминающим символ привязки изображений. Такие значки играют для таблиц примерно ту же роль, что и для плавающей графики. Главные функции — это перемещение, выбор и удаление. 
<h1>Заполнение</h1>
Ячейки таблицы представляют собой относительно независимые “клеточки страницы”, которые в отношении их наполнения текстом и графикой почти не связаны со своими “соседями по общему дому”. При вводе текста и вставке рисунков в ячейки действуют те же правила и ограничения, что и для всей страницы. Напомним основные технические моменты. 
<li>Чтобы добавить в ячейку текст, надо поместить в нее курсор и ввести текст с клавиатуры или вставить из буфера обмена.</li> 
<li>Для вставки рисунка следует поместить в ячейку курсор и выполнить соответствующую команду любым удобным способом: из меню, при помощи комбинации клавиш или посредством палитры Object (Объекты).</li> 
<li>У вновь созданной таблицы горизонтальные размеры ячеек являются “плавающими”. Это значит, что в процессе наполнения ширина текущей ячейки и ее соседей может меняться, для того чтобы предоставить “жизненное пространство” текстовому или графическому содержимому. Горизонтальные габариты ячейки фиксируются после задания ее ширины в относительных или абсолютных единицах измерения.</li> 
<li>Для содержимого ячеек по умолчанию принимается выравнивание по левому краю по горизонтали и по центру по вертикали (рис. 9.2).</li> 
В процессе создания и наполнения таблицы приходится перемещаться по ее структурным составляющим: строкам, столбцам и ячейкам. Рассмотрим имеющиеся в программе способы перехода. 
<img src="image/9-2.jpg" alt="Заполнение"> 
Рис. 9.2. Выбранная таблица и окно Инспектора свойств 
<li>Для перемещения между ячейками можно воспользоваться клавишей TAB (для перехода к следующей ячейке) или комбинацией SHIFT+TAВ (для перехода в обратном направлении).</li> 
<li>Удобный способ перехода между ячейками предоставляют курсорные клавиши.</li> 
<li>Если нажать клавишу TAB, когда курсор находится в самой правой ячейке нижней строки таблицы, в таблице появится новая строка.</li> 
<h1>
Dreamweaver 4
</h1>
<h1>Автоматический запуск</h1>
Если пакет Dreamweaver используется очень интенсивно и его приходится запускать в каждом сеансе работы, то процедуру вызова целесообразно полностью автоматизировать. Для этого достаточно поместить ярлык программы в специальную папку Автозагрузка. Все программы, расположенные в этой папке, система Windows запускает при каждом включении компьютера и запуске операционной системы. 
 Поместить ярлык программы в папку Автозагрузка можно несколькими способами. Основная сложность состоит в том, что у этой папки очень громоздкий адрес: C:\Windows\Главное меню\Программы\Автозагрузка. Чтобы добраться до нее, придется проделать длинный путь по файловой системе Windows. Намного проще сделать это при помощи штатных средств поиска. 
 <li>В Главном меню дайте команду: Пуск > Найти > Файлы и папки.</li> 
 <li>Откроется диалоговое окно для поиска файлов и папок. В поле Имя введите образец для поиска: Автозагрузка; в поле. Где искать укажите имя логического диска, на который установлена операционная система. Запустите поиск щелчком на кнопке Найти.</li> 
 <li>Удерживая нажатой клавишу CTRL, зацепите ярлык программы Dreamweaver и перетащите его с Рабочего стола на значок папки Автозагрузка, расположенный в нижней части окна Найти.</li> 
 Любой способ запуска программы имеет одинаковые последствия. Программа начинает работу, загрузив в окно документа пустую страницу. Эта страница создается па основе шаблона Default.htm, расположенного в подкаталоге \Configuration\Templates внутри папки программы. 
<h1>Инспектор кода</h1>
Среди многочисленных представителей класса редакторов HTML, популяция которых в наши дни стремительно увеличивается, программа Dreamweaver отличается строгой работой с кодами гипертекстовых документов. Но даже эта глубоко продуманная и чисто реализованная программа не в состоянии полностью избавить пользователя от ручной корректировки кодов HTML. 
Прямая работа с кодами — это не только неизбежное зло, но и возможное благо. Она позволяет идентифицировать скрытые ошибки, устранить избыточность кода, быстро внести локальные изменения в выбранные фрагменты гипертекста, оптимизировать структуру документа или его форматирование, 
В состав пакета Dreamweaver входит специальное средство, предназначенное для просмотра и редактирования кодов разметки гипертекстовых документов. В документации на программу оно называется Code Inspector (Инспектор кода). 
 Существует несколько различных способов его вызова. Во-первых, это команда Window > Code Inspector (Окно > Инспектор кода), во-вторых, это клавиша F10. Кроме того, панель и палитра быстрого запуска располагают специальными кнопками активизации этого средства. Они изображаются в виде пары угловых скобок, повторяя обозначение дескрипторов, принятое и языке HTML. 
<img src="image/1-11.jpg" alt="Инспектор кода"> 
Рис. 1.10. Инспектор кода 
Нa рис. 1.10 показано окно Инспектора кода. В четвертой версии программы Dreamweaver это средство реализовано в виде обычной плавающей палитры, которая по технике работы и возможностям почти не отличается от кодового режима окна документа (Code View). Пять кнопок во втором ряду — это дубликаты командных кнопок основной панели инструментов (см. рис. 1.5). Представлением кодов разметки в палитре управляют команды, доступ к которым открывает кнопка View Options (Параметры отображения). Рассмотрим эти команды. 
 <li>Word Wrap (Перенос по словам). Режим переноса строк кода. Если он включен, то декларации языка HTML, длина которых превосходит текущие размеры окна редактора, автоматически переносятся на другую строчку. Никаких символов перехода на новую строку в исходный текст документа при этом не вставляется — речь идет лишь об особом режиме просмотра.</li> 
 
 <li>Line Numbers (Номера строк). Команда отображения нумерации. Если этот режим включен, каждая строка получает порядковый номер, что упрощает ориентацию и поиск в больших гипертекстовых документах.</li> 
 <li>Highlight Invalid HTML (Пометка некорректных кодов). Эта команда активизирует режим, в котором синтаксически ошибочные конструкции выделяются желтым цветом в Инспекторе кода и в окне документа. При этом Инспектор свойств выводит сообщение об ошибке и в некоторых случаях предлагает рецепты ее исправления.</li> 
 <li>Syntax Coloring (Раскраска синтаксических конструкций). В этом режиме различные по смыслу части кодовой разметки выделяются разным цветом, что помогает быстрее ориентироваться в исходном тексте документа. Более того, программа Dreamweaver дает возможность выбрать особое цветовое представление для каждого дескриптора языка HTML. Назначение цветов выполняется в основных настройках программы в разделе Code Colors (Цвета кода).</li> 
 <li>Auto Indent (Автоматический отступ). Команда активизирует режим автоматической установки отступов для дескрипторов разметки, вводимых в окне Инспектора кода. Виды дескрипторов и правила расстановки отступов задаются в специальном файле инициализации SourceFormat.txt.</li> 
В правой части окна Инспектора кода расположена безымянная кнопка треугольной формы. Она вызывает меню с командами обслужившим исходного текста документа. Перечислим эти команды. 
 <li>Find and Replace (Найти и заменить). Вызывает команду поиска и замены.</li> 
 <li>Find Next (Найти далее). Запускает процедуру поиска с ранее введенным образцом для поиска и текущими параметрами поиска. Диалоговое окно настройки поиска и замены не отображается.</li> 
 <li>Reference (Справочное руководство). Вызывает справочное руководство по ресурсам HTML, JavaScript и CSS.</li> 
<li>Set Breakpoint (Вставить контрольную точку). Устанавливает контрольную точку в позиции текстового курсора. Контрольные точки помогают при отладке встроенных программ.</li> 
<li>Remove All Breakpoint (Удалить все контрольные точки). Удаляет все контрольные точки из исходного текста документа.</li> 
 
<li>Cut (Вырезать). Вырезает выбранный кодовый фрагмент в буфер обмена.</li> 
 <li>Сору (Копировать). Копирует выбранный кодовый фрагмент в буфер обмена.</li> 
 <li>Paste (Вставить). Выполняет вставку содержимого буфера обмена.</li> 
<img src="image/prim.gif" alt="Инспектор кода"> Для переключения между Инспектором кода и окном документа можно использовать щелчок мыши или комбинацию клавиш CTRL+TAB. 
Инспектор кода можно вполне успешно использовать в несколько необычной для него роли текстового редактора. Программа Dreamweaver успешно распознает файлы, записанные с использованием символов ASCII, например, простой текстовый файл или исходный текст программы. Такие документы открываются при помощи штатной команды Open (Открыть) и загружаются в окно документа, которое работает в кодовом режиме. При этом некоторые ресурсы программы становятся недоступными. 
<h1>Инспектор свойств</h1>
Палитра Property inspector (Инспектор свойств)— это основной инструмент программы. Большую часть работы по заданию и изменению атрибутов объектов, расположенных на странице HTML, приходится выполнять с его помощью. 
Инспектор свойств представляет собой плавающую палитру, обладающую свойством контекстной зависимости (рис. 1.8). Это значит, что ее содержимое может меняться в зависимости от выполняемой операции, положения курсора и типа выбранных объектов. 
<img src="image/1-8.jpg" alt="Инспектор свойств"> 
Рис. 1.7. Контекстное меню 
Для вывода палитры на экран надо выполнить команду Window > Properties (Окно > Свойства) или воспользоваться комбинацией клавиш CTRL+F3. Повторное выполнение этой команды убирает инспектора с экрана. 
<img src="image/1-9a.jpg" alt="Инспектор свойств"> 
<img src="image/1-9b.jpg" alt="Инспектор свойств"> 
Рис. 1.8. Инспектор свойств 
Перечислим основные поля и кнопки палитры. Эти элементы управлении относятся к форматированию текста и созданию гипертекстовых ссылок и присутствуют в Инспекторе свойств в большей части его состояний. 
 <li>Список Format (Формат) предназначен для выбора одного из стандартных структурных типов текста (1).</li> 
 <li>Список Link (Ссылка) хранит перечень всех ссылок текущего документа. Каждая ссылка обладает неограниченной применимостью. Это значит, что однажды созданную ссылку можно использовать повторно вместе с другими активными областями (2).</li> 
 <li>Список, с помощью которого выбирается шрифтовое оформление выбранного текстового фрагмента. Пункты этого списка представляют собой шрифтовые семейства или наборы, которые объединяют несколько шрифтов и упорядочивают их по предпочтительности применения. Свои названия отдельные пункты получают по заглавным шрифтам наборов (3).</li> 
 <li>Список Size (Размер) предназначен для выбора размера шрифта (4).</li> 
 <li>Кнопка вызова стандартной цветовой палитры. Эта палитра служит для выбора цвета выбранного текстового фрагмента (5).</li> 
 <li>Поле, в котором отображается или задается шестнадцатеричный код выбранного цвета (6).</li> 
 <li>Стандартные по виду и функциям, выполняемым в различных программах, кнопки для выбора начертания шрифта (7).</li> 
 
 <li> Кнопки для выбора типа выравнивания (8).</li> 
 <li>Кнопка вызова интерактивной подсказки (9).</li> 
 <li>Маркер-указатель. Создает гипертекстовые ссылки при его перетаскивании на требуемый источник: файл или символ привязки (якорь) (10). </li> 
 <li>Кнопка открытия диалогового окна Select File (Выбрать файл). С помощью этого окна можно выполнить навигацию по файловой системе и выбрать документ, который будет служить целью гипертекстовой ссылки (11).</li> 
 <li>Список Target (Назначение) предназначен для выбора способа визуализации документа, на который указывает гипертекстовая ссылка. В этом разделе можно определить окно или фрейм, в котором следует выводить ссылочный документ (12).</li> 
 <li>Стандартные для большинства редакторов, текстовых и HTML, кнопки для создания маркированных и нумерованных списков (13).</li> 
 <li>Кнопка List Item (Раздел списка) служит для открытия диалогового окна List Properties (Свойства списка), предназначенного для редактирования списков всех типов (14).</li> 
 <li>Две кнопки, управляющие горизонтальным сдвигом текстовых фрагментов (15).</li> 
 <li>Кнопка вызова экспресс-редактора кодов (16).</li> 
 <li>Кнопка Expander arrow (Расширение) служит для изменения размером палитры. С ее помощью можно сворачивать и разворачивать палитру Property Inspector (Инспектор свойств) (17).</li> 
 Большинство команд, выполняемых при помощи Инспектора свойств, немедленно переносятся на обрабатываемый объект: рисунок, текст или таблицу, Лишь в редких случаях требуется дополнительное подтверждение, которое может выполняться нажатием клавиши ENTER или TAB или щелчком мыши. 
 Для перемещения по разделам Инспектора свойств удобно использовать клавишу TAB. Ее нажатие приводит в действие выбранные установки текущего поля или списка и делает активным следующий элемент управления палитры. 
 Многие элементы управления Инспектора свойств представляют собой комбинацию текстовых или числовых полей и раскрывающихся списков. Это позволяет выбрать удобную тактику задания параметров. Требуемое значение можно просто набрать с клавиатуры или выбрать из меню. Меню открывается стандартным для системы Windows способом — щелчком на раскрывающей кнопке, расположенной справа от поля. 
 
 Инспектор свойств — это особое средство, разработчики программы наделили его рядом дополнительных возможностей, отсутствующих у других диалоговых окон программы. Инспектор свойств полностью автономен и не обладает способностью к стыковке с другими палитрами. Штатный прием перемещения окон в операционной системе Windows — перетаскивание за строку заголовка. Его можно применять к любой палитре или панели программы. 
 Редакторы HTML, работающие в режиме WYSIWYG, весьма расточительно расходуют свободное пространство экрана. Это вызвано отнюдь не нерадивостью разработчиков; тому есть объективные причины. Гипертекстовые документы требуют большего числа обрабатывающих функций, чем документы, выводимые на печать. Каждая утилита или команда должна быть представлена в интерфейсе редактора кнопкой или пунктом меню. Поэтому часто рабочий стол редакторов HTML завален палитрами и панелями, как ломберный стол отыгранными картами в азартной партии с большими ставками. 
Большую часть времени Инспектор свойств приходится держать в раскрытом состоянии. Его окно требуется часто передвигать по экрану, чтобы получить доступ к скрытым частям документа. Эту операцию можно выполнить при помощи перетаскивания любой свободной точки фона палитры. Двойной щелчок на такой точке меняет размеры окна Инспектора свойств. 
<img src="image/prim.gif" alt="Инспектор свойств">Разработчики снабдили программу Dreamweaver несколькими вспомогательными функциями, которые помогают пользователю содержать окно в относительном порядке. Во-первых, палитры Dreamweaver — это отчасти самостоятельные окна, способные располагаться где угодно на Рабочем столе Windows. Это позволяет поделить рабочее пространство монитора между служебными элементами управления и окном документа. Счастливые обладатели двухмониторных систем (подобные конфигурации поддерживают последние версии операционной системы Windows) могут сгруппировать все вспомогательные окна и палитры на одном мониторе, освободив другой для работы с документом. 
Во-вторых, палитры программы обладают способностью к объединению. Это значит, что пользователь имеет возможность формировать сборные комплексные палитры из отдельных простых окон. Для этого достаточно зацепить указателем закладку палитры и перетащить ее на любое свободное место сборной палитры. В-третьих, существует команда, убирающая все открытые палитры с рабочего стола программы. Проще всего эта операция выполняется нажатием клавиш F4. Повторное нажатие этой клавиши восстанавливает исходную конфигурацию экрана. 
<h1>Интерфейс</h1>
Под интерфейсом в информатике понимают совокупность средств и правил, обеспечивающих взаимодействие различных компонентов программы и пользователя. Способ общения, который предлагает пакет Dreamweaver, базируется на привычных для современного пользователя принципах графического оконного интерфейса. По своему внешнему виду программа далека от haute couture некоторых продуктов фирмы Microsoft Это, скорее, уровень добротного pret a porte со всем необходимым для результативной работы. По сравнению с другими программами того же класса и функционального назначения пакет Dreamweaver обладает более ясным, гибким и одновременно мощным интерфейсом. Его главными “несущими конструкциями” являются палитры, многочисленные клавиатурные комбинации и строка меню. 
 У [налоговые окна, которые остаются на экране после прекращения всех операций с ними, принято называть палитрами (palette) или панелями (panel). Окна, способные располагаться в любом месте экрана, а не только н специально отведенных для этого позициях, обычно называют плавающими палитрами (floatingpalette). Большинство диалоговых окон программы Dreamweaver выполнено в виде плавающих палитр. 
<img src="image/prim.gif" alt="Интерфейс">Небольшие различия, которые существуют между палитрами и панелями, не имеют принципиального значения для описания программы. Поэтому в дальнейшем будем использовать эти термины как синонимы. 
Почти все палитры обладают способностью к объединению. Это означает, что разные палитры можно совместить в одном диалоговом окне. Операция объединения позволяет получить многофункциональные сборные палитры, которые содержат средства управления, относящиеся к разным темам или командам. Палитры, обладающие способностью к объединению (их в программе большинство), будем называть модульными (dockable). Сложные палитры, состоящие из нескольких отдельных модулей, называются сборными (tabbed). 
Нa рис. 1.1 показан внешний вид программы с четырьмя раскрытыми диалоговыми окнами. Самым востребованным средством управления, бесспорно, является палитра Property inspector (Инспектор свойств). С ее помощью выполняется множество операций по форматированию и редактированию объектов па страницах HTML. Палитра Behaviors (Режимы) — это пример модульной плавающей палитры. Программа Dreamweaver располагает примерно дюжиной подобных объектов, предназначенных для решения раз- 
 
<img src="image/1-1.jpg" alt="Интерфейс"> 
Рис. 1.1. Внешний вид окна программы 
 личных проектных задач. На рисунке приведен пример сборной палитры, которая состоит из двух простых модульных палитр: Layers (Слои) и History (Предыстория). Палитра Objects (Объекты) предназначена для вставки внешних объектов: рисунков, таблиц, слоев, фреймов и пр. Все остальные элементы управления, показанные на рисунке, являются неотъемлемыми составными частями окна документа. 
 Многие находят интерфейс программы Dreamweaver избыточным, вкладывая в это понятие некоторый оттенок предосудительности. Бесспорно, излишек выразительных средств или понятий - это недостаток, если речь идет о формулировке физических гипотез или доказательстве математических теорем. Но позитивистское отношение к избыточности, утвердившееся в точных науках, нельзя применять расширительно. В основе надежного функционирования технических систем, живучести биологических организмов, удобства интерфейсов программных продуктов лежит правильно организованная избыточность. Почти для всех основных команд форматирования и редактирования пакет Dreamweaver предлагает несколько различных способов реализации. Счастливые обладатели широкоформатных экранов могут выполнять их посредством палитр и панелей. Пользователям, обделенным экранным пространством, программа предлагает команды строки меню и клавиатурные комбинации. 
<h1>Окно документа</h1>
Окно документа — это то рабочее пространство, где создаются гипертекстовые документы (рис. 1.2). Оно хранит текст, картинки, таблицы, формы и другие объекты, которые составляют содержимое страниц HTML. Программа Dreamweaver является редактором класса WYSIWYG. Эта громоздкая аббревиатура образована по первым буквам английской фразы What you see is what you get (что видите, то и получите). Это значит, что изображение страницы HTML в окне документа не сильно отличается от ее представления в наиболее популярных программах просмотра — броузерах Microsoft Internet Explorer и Netscape Navigator. Несмотря на то, что прямая работа с кодами HTML считается признаком высокого профессионализма, даже самый искушенный Web-дизайнер едва ли откажется от преимуществ, которые дает графический интерфейс и создание документов в режиме WYSIWYG. 
<img src="image/1-2.jpg" alt="Окно документа"> 
Рис. 1.2. Окно документа 
<img src="image/prim.gif" alt="Окно документа">В отличие от большинства приложений Windows программа Dreamweaver не может работать с несколькими документами в одном окне программы. В зависимости от выбранных установок новый документ загружается в отдельное окно программы или заменяет ранее открытый документ в текущем окне. При таком режиме работы разницы между окном программы и окном документа практически нет. Поэтому далее мы будем использовать эти названия как синонимы. 
Режимы работы 
В режиме WYSIWYG создание гипертекстового документа немногим отличается от работы с обычным текстовым редактором. 
 Базовые операции ввода и форматирования текста, команды вставки объектов, техника навигации и выбора — все эти приемы реализованы в программе Dreamweaver в стиле, который доминирует в визуальных средах последние несколько лет. Разработчик может работать с документом, используя привычные средства редактирования и форматирования и не задумываясь о том, как реализуются его проектные решения средствами языка HTML. Пакет Dreamweaver автоматически создает исходный текст, в котором информационное наполнение документа и его оформление записывается в кодах языка разметки гипертекста. 
 
 Несмотря на то, что большая часть созидательной работы может быть выполнена в режиме WYSIWYG, иногда приходится прибегать к прямому кодированию. Причин тому несколько. Главным образом, это необходимость тонкой настройки кодов разметки. Кроме того, в стандарте языка HTML упоминается более сотни дескрипторов, каждый из которых может иметь несколько атрибутов или модификаторов. Трудно представить себе программу, в которой все лексические единицы языка HTML поддержаны элементами управления: кнопками или командами. В рамках интерфейса системы Dreamweaver свое воплощение нашли самые востребованные средства гипертекстовой разметки. Малоупотребительные коды приходится вводить вручную. 
 Все версии программы Dreamweaver, начиная с первой, предоставляют пользователю возможной прямого редактирования кодов разметки. Какие средства применяются для этой работы? Во-первых, это специальный встроенный редактор Code Inspector (Инспектор кодов), который сопровождает программу Dreamweaver с самых первых версий и претерпел за это время только косметические изменения. Во-вторых, пользователь имеет возможность подключить внешний редактор HTML по собственному выбору. В этой роли могут выступать различные программы: от простейших текстовых редакторов универсального назначения (например, Блокнот) до высокоспециализированных программных средств, предназначенных для работы со сложными гипертекстовыми документами (Allaire HomeSite). 
В четвертой версии редактора появилась очень удачная новинка — режимы работы окна документа. Окно документа может находиться в одном из трех режимов или видов. 
 <li>Design View (Режим планировки). Это обычный для визуального редактора режим WYSIWYG, в котором отображаются объекты гипертекстовой страницы, их форматирование и расположение. От пользователя скрыты коды разметки, с помощью которых решаются информационные и оформительские задачи создания гипертекстового документа. Далее будем иногда называть этот режим визуальным.</li> 
 <li>Code View (Режим разметки). В этом режиме в окне документа отображается полный исходный код гипертекстовой страницы, со всеми дескрипторами, метатегами, сценариями и комментариями. Этот режим работы будем называть кодовым. На рис. 1.3 показана пустая страница в режиме отображения кодов. Каждая новая страница, не содержащая ни одного текстового или графического объекта, автоматически получает базовую гипертекстовую разметку.</li> 
 
<img src="image/1-3.jpg" alt="Окно документа"> 
Рис. 1.3. Окно документа в режиме разметки 
Code and Design View (Режим разметки и планировки). Это комбинированный режим, в котором окно документа расщепляется на две секции. В одной секции отображаются коды гипертекстовой разметки, в другой программа показывает планировку страницы со всеми объектами и атрибутами форматирования. На рис. 1.4. показано расщепленное окно документа, в котором представлена пустая страница.) 
<img src="image/1-4.jpg" alt="Окно документа"> 
Рис. 1.4. Расщепленное окно документа 
Имеется несколько способов изменения режима работы. Во-первых, это команды строки меню: View > Code (Вид > Разметка), View > Design (Вид > Планировка), View > Code and Design (Вид > Разметка и планировка). Во-вторых, на панели инструментов представлены кнопки, позволяющие быстро переходить из одного режима в другой. Наконец, при помощи клавиатурной комбинации CTRL+TAB можно переходить из режима планировки в режим разметки и обратно или перемещаться из одной части расщепленного окна в другую. 
Размеры частей расщепленного окна документа можно менять. Для этого следует зацепить указателем разделительную линию и перетащить ее. 
<img src="image/prim.gif" alt="Окно документа">Среди программистов получил хождение термин “исходный текст”. Так называется программа, записанная на языке программирования высокого уровня, на начальных этапах ее разработки. Этот термин неплохо передает отношения, существующие между кодовой частью гипертекстового документа и его видимым образом. Запись документа на языке HTML будем называть исходным текстом. 
Строка меню 
Строка меню — это непременный атрибут любого приложения Windows. Она открывает доступ к командам, диалоговым окнам, кнопкам, с помощью которых выполняется вся содержательная работа по созданию документа, настройке программы, управлению процессом визуализации и пр. 
Каждый пункт строки меню объединяет группу функционально близких команд, которые образуют иерархию вложенных меню и подменю. Приведем краткое описание этих пунктов. 
 <li>Меню File (Файл) объединяет основные файловые команды, средства работы с шаблонами гипертекстовых документов, команды экспорта, импорта и просмотра во внешних броузерах.</li> 
 
 <li>В меню Edit (Правка) входят команды, управляющие буфером обмена, средства поиска, директивы выбора объектов и настройки программы. Отдельный раздел составляют команды, управляющие кодами гипертекстовой разметки.</li> 
 <li>Все пункты меню View (Вид) имеют близкое назначение. Здесь объединены средства визуализации вспомогательных элементов интерфейса и объектов гипертекстового документа.</li> 
 <li>В меню Insert (Вставка) входят команды импорта различных объектов: изображений, таблиц, сценариев, форм, слоев, специальных символов, метадескрипторов и пр.</li> 
 <li>Меню Modify (Изменить) объединяет средства и команды для изменения атрибутов объектов гипертекстового документа.</li> 
 <li>Меню Text (Текст) включает в себя ресурсы программы, связанные с созданием текстовых фрагментов и их форматированием.</li> 
 <li>Содержимое меню Commands (Команды) составляют различные командные средства, предназначенные для автоматической обработки гипертекстовых документов: сценарии, верификаторы кодов, утилиты и пр.</li> 
 <li>Пункт Site (Сайт) в строке меню включает в себя средства работы с сайтами и связанными системами гипертекстовых документов, обладающими сложной структурой и многочисленными ссылками.</li> 
 <li>В меню Window (Окно) входят команды визуализации палитр, панелей и диалоговых окон программы.</li> 
 <li>В меню Help (Справка) расположены команды вызова интерактивной справки, запуска электронного учебника, средства автоматической электронной регистрации и запуск демонстрационного ролика.</li> 
Панель инструментов 
Панель инструментов выполняет функции основного диспетчерского пульта программы (рис. 1.5). Она объединяет кнопки вызова наиболее востребованных команд и ресурсов редактора. Эта компактная панель существенно сокращает накладные расходы, связанные с навигацией по системе вложенных меню и подменю. 
<img src="image/1-5.jpg" alt="Окно документа"> 
Рис. 1.5 Панель инструментов 
Перечислим все элементы управления, расположенные на ней (слева направо). 
 <li>Code View (Режим разметки). Кнопка перехода в режим отображения исходной гипертекстовой разметки документа.</li> 
 
 <li>Code and Design View (Режим разметки и планировки). Кнопка перехода в комбинированный режим работы, когда окно документа расщепляется на две части: в одной выводятся коды разметки, в другой отображается внешний вид гипертекстовой страницы.</li> 
 <li>Design View (Режим планировки). Кнопка перехода в визуальный режим работы редактора — режим WYSIWYG.</li> 
<li>Title (Заголовок). Текстовое поле, предназначенное для ввода заголовка документа.</li> 
 <li>File Management (Управление файлами). Кнопка открывает меню, содержащее файловые команды сетевого обмена и контроля обращения.</li> 
 <li>Preview/Debug in Browser (Просмотр/отладка в броузере). Кнопка открывает меню с командами просмотра и отладки гипертекстового документа. Первые выполняют верификацию гипертекстовой разметки. Для этого они загружают документ в одну из установленных и связанных с системой Dreamweaver программ просмотра. Команды отладки проверяют работоспособность кодов языка JavaScript в выбранном броузере.</li> 
 <li>Refresh Design View (Обновить страницу). По этой команде все изменения, сделанные в исходном тексте документа, переносятся в режим планировки. При этом выполняется проверка синтаксиса и интерпретация кодов. Корректные фрагменты отображаются на странице, ошибочные помечаются желтым цветом.</li> 
 <li>Reference (Справка). Кнопка выводит на экран электронное справочное руководство, содержащее описание дескрипторов языка гипертекстовой разметки, конструкций иерархических стилевых спецификаций (CSS) и операторов языка JavaScript.</li> 
<li>Code Navigation (Навигация по кодам). Кнопка открывает доступ к меню с командами, управляющими отладкой встроенных программ, написанных на языке JavaScript.</li> 
<li>View Options (Параметры отображения). Кнопка открывает меню с командами, которые управляют визуализацией вспомогательных элементов окна документа. В это меню входят многие команды меню View (Вид) строки меню, а также команды, которые управляют представлением кодов.</li> 
Селектор разметки 
В левой части строки состояния расположен селектор разметки (tag selector). Он представляет собой своеобразный индикатор, который показывает дескрипторы разметки HTML, окружающие текущую позицию курсора. Так, для любой пустой страницы селектор принимает значение <body>. Если набрать строчку текста и нажать клавишу ENTER, то появится дескриптор параграфа <р>. Если поместить курсор внутрь таблицы, селектор покажет дескрипторы <table>, <tr>, <td>, относящиеся к таблице, активной строке и ячейке. 
 
 Программа постоянно отслеживает положение курсора и обновляет состояние селектора разметки. Это облегчает ориентацию в сложных гипертекстовых документах, содержащих вложенные таблицы, слои и фреймы, Обычно фрагменты гипертекстового документа находятся в области действия нескольких вложенных дескрипторов. Селектор показывает все релевантные дескрипторы в порядке их расположения в документе. Чем ближе дескриптор к текущей позиции курсора, тем правее он расположен в строке состояния. 
Селектор разметки — это не только средство навигации, он представляет собой удобный инструмент для выбора объектов. Щелчок на имени дескриптора в строке состояния выбирает всю его область действия в окне документа. Выбранный дескриптор выделяется в селекторе разметки полужирным шрифтом. 
<img src="image/prim.gif" alt="Окно документа">Выбор объектов гипертекстового документа при помощи селектора разметки — это более надежный способ, чем стандартный прием протягивания мыши. Этот способ позволяет идентифицировать скрытые дескрипторы, которые не отображаются в окне документа, например дескрипторы . 
Размеры страницы 
Виртуальное сообщество развивается по стихийным законам, не подчиняясь регламентации и стандартам. Это одна из причин быстрого роста “популяции Интернета”, которая, однако, является источником многочисленных трудностей для разработчиков и программистов. В самом деле, разрабатывая страничку или сайт, автор должен помнить, что его произведение может отображаться на самых различных компьютерных системах. Если он не хочет потерять посетителей, то должен, в частности, побеспокоиться о корректном представлении документа на мониторах, имеющих разный размер и использующих разные технологии (не обязательно на базе электронно-лучевой трубки). 
<img src="image/prim.gif" alt="Окно документа">Есть и другие причины, заставляющие менять размеры окна броузера при просмотре онлайновых документов. Каждый грамотный человек согласится с тем, что скорость чтения зависит, кроме всего прочего, и от длины строки. Восприятие прочитанного существенно осложняется, если строчки значительно отличаются от некоторой нормы. Исследования по психологии показали, что оптимальная длина текстовой строки тесно связана с числом символов алфавита. Чтобы определить зону комфортного чтения, надо размер алфавита умножить на коэффициент, который принимает значения от 1,5 до 2. Это значит, что строчки текста на русском языке не должны быть длиннее 70 символов. Многие пользователи, и не подозревая о существовании подобной формулы, ограничивают размеры окна броузера, чтобы предотвратить появление чрезмерно длинных строчек. 
 
 Разработчики пакета Dreamweaver снабдили программу специальным средством, которое позволяет представить, как документ будет выглядеть на мониторах различного размера. 
 В средней части строки состояния (рис. 1.2) расположено поле, в котором выводятся текущие размеры окна документа в пикселях. Первое число дает значение ширины, второе — высоты. Если щелкнуть мышкой на любой точке поля, то выводится диалоговое окно, содержащее семь стандартных размеров для наиболее популярных конфигураций вычислительных систем на платформах Windows и Macintosh. Для выбора размера достаточно выбрать соответствующую строку окна. 
 Первый пункт меню 592w задает ширину области документа равной 592 пикселям и оставляет текущую высоту области без изменений. Последний пункт Edit SizesРs (Правка размеров) позволяет выбрать размеры окна документа и внести их в список стандартных. На экране отображается диалоговое окно Preferences (Настройки), где в поле Width (Ширина) задается ширина, а в ноле Height (Высота) — высота области. Текстовое описание нового стандарта указывается в поле Description (Описание). 
<img src="image/prim.gif" alt="Окно документа">Все размеры рассчитываются без учета служебных элементов окна программы: размерных линеек и строки меню. Учитывается только рабочая область, отведенная под документ и его объекты. Высота строки состояния и левые и правые поля в программе Dreamweaver подобраны по размерам аналогичных элементов наиболее популярных броузеров Microsoft Explorer и Netscape Navigator. 
Индикатор загрузки 
Посещаемость страницы зависит не только от ее содержания или, как сейчас принято выражаться, контента. Даже глубокая, содержательная страница с отшлифованным дизайном вряд ли будет успешной, если она требует в ходе загрузки нескольких минут ожидания. 
В правой части строки состояния (см. рис. 1.2) расположен специальный индикатор, отображающий рассчитанную программой информацию о суммарном объеме файла и скорости его загрузки. Первое число на индикаторе — это размеры файла в килобайтах, второе представляет собой расчетное время ожидания загрузки в секундах. Понятно, что скорость передачи зависит от типа соединения, пропускной способности линии, протокола, марки модема и множества других факторов, часто не поддающихся учету. По умолчанию время загрузки рассчитывается для скорости соединения в 28,8 Кбит/с. 
 
<img src="image/prim.gif" alt="Окно документа">Скорость модемного соединения, принятая в качестве базы расчета, входит в число основных настроек программы и допускает изменение. Для этого надо дать команду Edit > Preferences > Status Bar (Правка > Настройки > Строка состояния) и в поле Connection Speed (Скорость соединения) ввести новое значение скорости. 
<img src="image/prim.gif" alt="Окно документа">Основной вклад в суммарные килобайты гипертекстового документа вносят рисунки, мультимедийные файлы и файлы анимации. Чтобы оценить индивидуальный размер картинки, следует ее выбрать и прочитать искомую величину в левом верхнем поле палитры Property inspector (Инспектор свойств) (см. рис. 1.8). 
Палитра и панель быстрого запуска 
Палитра быстрого запуска (Launcher) — это служебная, вспомогательная палитра, предназначенная для вывода на экран основных диалоговых окон м панелей программы. Для отображения палитры (рис. 1.6) следует выполнить команду Window > Launcher (Окно > Палитра быстрого запуска). Повторное выполнение этой команды убирает палитру с экрана. 
<img src="image/1-7.jpg" alt="Окно документа"> 
Рис. 1.6. Палитра быстрого запуска 
Щелчок на кнопке палитры Launcher (Быстрый запуск) выводит на экран соответствующее диалоговое окно. Повторное нажатие командной кнопки закрывает раскрытую палитру, если она расположена на переднем плане экрана. Если активная палитра хотя бы частично загорожена другими объектами, она переводится на передний план. 
По умолчанию палитра объединяет кнопки быстрого запуска семи самых востребованных компонентов программы. 
<li>Site (Сайт). Диалоговое окно для управления большим сайтом: системой взаимосвязанных гипертекстовых документов со сложными перекрестными ссылками.</li> 
 <li>Assets (Библиотека). Это название, буквальный перевод которого означает активы или фонды, разработчики программы присвоили панели, которая играет в программе роль библиотеки или главного фондохранилища. Она хранит типовые элементы дизайна гипертекстовых документов: изображения, цвета, внешние ссылки, сценарии, Flash-ролики, шаблоны и т. п.</li> 
<li>HTML Styles (Стили HTML).Палитра, предназначенная для работы со стилями разметки HTML для текстовых строк и абзацев.</li> 
 
 <li>CSS Styles (Каскадные листы стилей). Палитра служит для управления каскадными листами стилей (cascading style sheet). Этот не очень удачный дословный перевод термина, к сожалению, уже закрепился в русском языке. Термин “иерархические стилевые спецификации” — это неплохой вариант перевода, который следует смыслу явления, а не его букве. В дальнейшем будем использовать оба варианта.</li> 
 <li>Behaviors (Режимы). Палитра объединяет средства управления динамическими сценариями. Динамический сценарий программно управляет интерактивностью гипертекстовой страницы. Сценарии строятся на основе событий, которые происходят на странице в процессе их просмотра. События запускают процедуры обработки объектов, которые обычно пишутся на языке JavaScript. В эту схему укладывается великое множество интерактивных эффектов: от простейших анимированных кнопок, проявляющих чувствительность к положению указателя, до сложных процедур обработки баз данных.</li> 
 <li>History (Предыстория). Палитра записывает и хранит действия пользователя по редактированию документа HTML. Протокол работы с программой позволяет выполнять многоуровневую отмену операций редактирования и сохранять типовые повторяющиеся цепочки как команды.</li> 
 <li>Code Inspector (Инспектор кода). Одна из самых важных палитр программы. По сути дела это внутренний редактор кода HTML, интегрированный в графическую оболочку Dreamweaver. В предыдущих версиях программы, где не было возможности менять режимы работы окна документа, эта палитра была одной из самых важных составляющих. В четвертой версии это обычная модульная палитра, которую можно объединять с другими объектами такого класса.</li> 
В правом нижнем углу палитры быстрого запуска расположена прямоугольная кнопка. Это непритязательное по графическому исполнению средство предназначено для изменения ориентации палитры. 
Содержимое палитры быстрого запуска можно менять. Для этого надо дать команду Edit > Preferences (Правка > Настройки). Откроется диалоговое окно с главными настройками программы. В нем выберите категорию Panels (Панели) и измените содержимое палитры средствами, которые предоставляет раздел Show in Launcher (Показать в палитре быстрого запуска). 
 
 В правой части строки состояния находится панель (см. рис. 1.2), которая но виду кнопок и функциональному назначению полностью идентична палитре быстрого запуска. Это своеобразный филиал палитры Launcher (Быстрый запуск), его содержимое дублирует содержимое основной палитры. Будем называть это средство панелью быстрого запуска. 
Контекстное меню 
Контекстное меню хорошо известно даже начинающим пользователям операционной системы Windows. Это стандартный прием управления, который широко используется большинством приложений, работающих под управлением этой операционной системы. Суть его проста. Щелчок правой кнопкой мыши по объекту окна документа выводит на экран меню, содержимое которого зависит от типа объекта. В этом меню собраны команды, которые относятся к данному объекту или с большой вероятностью могут быть востребованы в данной ситуации. 
 Все версии программы Dreamweaver поддерживают работу с контекстным меню. В четвертом издании редактора эта идея получила дальнейшее развитие. Контекстные меню увеличилась в размерах, получили дополнительные уровни вложения и могут теперь вызываться практически в любой ситуации. На рис. 1.7 показан пример контекстного меню, которое программа выводит по щелчку правой кнопкой мыши на любой свободной точке окна или текстового фрагмента. 
<h1>Открытие файлов</h1>
Техника открытия файлов в программе ничем не отличается от тех шаблонных приемов, которыми располагают приложения Windows. Штатный способ — это команда File > Open (Файл >Открыть). Команда имеет клавиатурный эквивалент — сочетание клавиш CTRL+0. Кроме того, в программе поддерживается прием перетаскивания. Значок файла HTML можно перетащить и бросить в любом месте окна документа или на значок или ярлык неактивной программы. 
 По умолчанию новый файл открываются в собственном окне программы. Это не всегда удобное соглашение можно изменить. Для этого надо по команде Edit > Preferences (Правка > Настройки) получить доступ к основным настройкам программы и в разделе General (Общие) сбросить флажок Open Files in New Window (Открывать файлы в новом окне). 
Число одновременно открытых окон программы ограничивается только свободной памятью компьютера. Если программа начала работу с пустой страницы, то новый файл в любом случае занимает ее место. 
Программа Dreamweaver выполняет проверку синтаксиса открываемых страниц HTML. При обнаружении ошибок программа пытается самостоятельно внести в разметку необходимые коррективы. Обо всех неисправимых ошибках кода программа информирует пользователя в специальном окне под названием HTML Corrections (Исправления HTML). 
Режим исправления ошибок и вывод протокола проверки допускают настройку. Для этого следует по команде Edit > Preferences (Правка > Настройки) вывести на экран диалоговое окно с основными параметрами программы и внести необходимые коррективы в раздел Code Rewriting (Переписывание кодов). 
 Программа способна открывать почти все документы, основанные на гипертекстовой разметке стандартного HTML и его расширений и версий. 
 Приведем далеко не полный перечень файловых форматов, доступных программе: .HTM, .HTML, .ASP, .CFM, .CFML, .TXT, .SHTM, .SHTML, .STM, 
 .LASSO,.ХМL,.CSS, .PHP. 
<h1>Отмена и повторение</h1>
Большинство физических процессов, протекающих в природных условиях или научных лабораториях, принято считать необратимыми. Это одно из фундаментальных допущений естествознания, формирующих всю научную картину мира. На этом базовом предположении основывается весь познавательный арсенал теоретической и экспериментальной физики. Современные вычислительные машины способны отчасти освободить человека от оков этой философской категории. Большинство современных программ дают возможность отменить неудачные действия, пересмотреть несостоятельные дизайнерские решения, вернуться к исходному состоянию документа. Отмену последовательности принятых решений иногда называют откатом. 
В программе Dreamweaver для этого достаточно выполнить команду Edit > Undo (Правка > Отмена) или воспользоваться клавиатурной комбинацией CTRL+Z. 
Программа допускает отмену нескольких последовательных действий. Глубина отката входит в число основных настроек программы; по умолчанию она равна 100. 
Изменить это число можно следующим образом. 
 <li>Дайте команду Edit>Preferences(Правка>Настройки)</li> 
 <li>Откройте категорию General (Общие).</li> 
 <li>Задайте значение глубины отката в поле Maximum Number of History Stеps (Максимальное число записей журнала).</li> 
<img src="image/prim.gif" alt="Отмена и повторение">Запись и хранение редакторской правки и команд пользователя требует дополнительных вычислительных ресурсов. Если резервы оперативной памяти невелики, то большие значения, установленные в поле Maximum Number of History Steps (Максимальное число записей журнала), могут приводить к существенному замедлению работы программы. 
Команда Undo (Отмена) позволяет выполнить отмену только “по горячим следам”. Если требуются применить метод проб и ошибок, провести эксперименты с проектом, проверить различные варианты, то она оказывается мало полезной. Кроме того, некоторые команды в принципе нельзя отменить таким способом. 
 Чтобы выполнить глубокий откат или отменить необратимые команды, можно воспользоваться командой File > Revert (Файл > Вернуться к сохраненному). Эта команда восстанавливает то состояние документа на момент последнего сохранения файла. 
 
 Тактика использования команды проста. Перед запуском необратимых или рискованных команд следует сохранить документ на диске. Если опыт оказался неудачным, то команда Revert (Файл > Вернуться к сохраненному) восстановит сохраненное состояние документа. 
 Программа ведет протокол работы с документом; выполненные команды и операции по редактированию страницы записываются в специальную палитру History (Предыстория). Это гибкое средство управления предоставляет пользователю намного большую свободу управления, чем стандартные команды отмены и возврата к сохраненной версии. 
 Способы повторения выполненных операций представлены в программе намного скромнее. Команда Edit > Redo (Правка > Повторить) позволяет повторно выполнить предыдущую команду или редакторское действие. Ей соответствует стандартная клавиатурная комбинация CTRL+Y. 
<img src="image/prim.gif" alt="Отмена и повторение">Следует помнить о том, что в протокол работы программы заносятся только результативные операции, например: ввод и удаление символов, встав-ка объектов, команды форматирования и др. Только такие действия можно отменить или повторить. Многие команды вспомогательного характера и внешние для программы операции протоколированию не подлежат. Таковыми являются перемещение курсора, выделение объектов, сохранение документа и т. п. 
<h1>Палитра объектов</h1>
Только самые простые гипертекстовые документы представляют собой фрагменты текста, размеченные командами перехода по ссылке. Большинство современных страниц HTML мультимедийные. Это значит, что в их состав входят внешние объекты: мультимедийные файлы, средства воспроизведения, картинки, файлы анимации и пр. 
 Палитра Objects (Палитра объектов) служит для вставки и создания внешних объектов. Все, что можно включить в состав страницы HTML, от растровых изображений до апплетов, написанных на языке Java, можно вставить при помощи палитры объектов. 
 Чтобы вывести палитру на экран, следует выполнить команду Window > Objects (Окно > Объекты). Клавиатурный эквивалент команды это комбинация CTRL +F2.Повторное выполнение команды убирает палитру с экрана. 
<img src="image/1-10.jpg" alt="Палитра объектов"> 
Рис. 1.9. Палитра объектов 
Содержимое палитры разделено на семь тематических разделов. 
 <li>Characters (Специальные символы). Вставка специальных символов, отсутствующих на клавиатуре (торговая марка, копирайт и пр.).</li> 
 <li>Common (Общие). Раздел объединяет самые ходовые объекты, без которых трудно обойтись даже при создании простых гипертекстовых документов. Это таблицы, изображения, горизонтальные линейки, текущие календарные даты и т. д.</li> 
 <li>Forms (Формы). Формы и элементы, их образующие: переключатели, списки, текстовые поля и пр.</li> 
 <li>Frames (Фреймы). Создание фреймовых структур с различным положением составных частей — фреймов.</li> 
 <li>Head (Заголовок). Вставка метаописаний в заголовочную часть гипертекстового документа.</li> 
 <li>Invisibles (Скрытые объекты). Размещение скрытых объектов, которые не отображаются программами просмотра страниц HTML. Это самый маленький раздел палитры; он позволяет добавлять всего лишь три типа объектов: символы привязки, комментарии и сценарии.</li> 
 <li>Special (Специальные объекты). Раздел объединяет кнопки вставки специальных объектов. К таковым разработчики программы отнесли апплеты, объекты ActiveX и внешние дополнения (plag- ins).</li> 
 В нижней части палитры расположены четыре кнопки, разделенные на две группы: Layout (Компоновка) и View (Вид). Эти средства — нововведение четвертой версии программы. Они предназначены для перехода в режим макетирования и быстрого создания структуры или макета страницы. Подробнее эти вопросы обсуждаются в главе, посвященной компоновке страницы. Приведем только краткие описания этих элементов управления. 
 
 <li>Draw Layout Cell (Создание макетной ячейки). Доступ к инструменту создания макетной ячейки.</li> 
 <li>Draw Layout Table (Создание макетной таблицы). Доступ к инструменту создания макетной таблицы. </li> 
 <li>Standard View (Стандартный режим). Переход в стандартный режим работы с документом. </li> 
 <li>Layout View (Режим макетирования). Переход в режим макетирования документа.</li> 
Название текущего раздела отображается под строкой заголовка палитры. Чтобы сменить раздел, щелкните на этом названии. Откроется меню, позволяющее выбрать нужный раздел. 
У некоторых разделов на палитре отображаются не все кнопки. В частности, раздел Common (Общие) объединяет почти два десятка кнопок, которые просто не помещаются в окно палитры. Чтобы получить доступ ко всем ресурсам больших разделов, можно использовать прокрутку (ее обеспечивают две кнопки со стрелками, расположенные у края палитры) или просто увеличить размеры диалогового окна. 
<img src="image/prim.gif" alt="Палитра объектов">Процедура вставки объектов в большинстве случаев требует ввода дополнительных параметров настройки. В таких случаях на экране появляется диалоговое окно, в котором пользователь должен выбрать или ввести требуемые параметры. В основных настройках программы в разделе General (Общие), есть флажок Show Dialog When Inserting Objects (Показывать диалоговые окна при вставке объектов), управляющий отображением этих окон. Если сбросить этот флажок, то для большинства объектов (хотя и не для всех) принимаются стандартные параметры и вывод промежуточных окон подавляется. Чтобы выполнить такую настройку, дайте команду Edit > Preferences > General (Правка > Настройки > Общие). 
<h1>Работа с палитрой History</h1>
Шаги по созданию и форматированию текущего документа записываются в специальную палитру History (Предыстория). В ней сохраняются самые различные действия и команды: от ввода текста до вставки слоев. Палитра надежно страхует пользователя от возможных ошибок и неудач. С ее помощью можно отменить несколько последних действий по форматированию и редактированию документа, повторить удачную цепочку шагов, записать типовую последовательность операций в виде макрокоманды, чтобы использовать ее в другом документе. 
 Вывести палитру на экран можно по команде Window > History или при помощи комбинации клавиш SHIFT+F10 (рис. 1.11). 
<img src="image/1-12.jpg" alt="Работа с палитрой History"> 
Рuс. 1.11. Палитра History (Предыстория) 
Содержимое палитры — это протокол работы пользователя с редактором. В палитру заносятся команды и действия в порядке их выполнения и под типовыми именами, которые дает им программа. 
Рассмотрим основные приемы работы с этим объектом 
 <li>Для отмены нескольких последовательных </li> 
действий достаточно перетащить ползунок, расположенный в левой части палитры, вверх. Вес команды, расположенные в палитре ниже бегунка, отменяются ик знак этого помечаются серым цветом. 
 Вместо перетаскивания можно просто щелкнуть на левой полосе палитры напротив 
названия последней действительной команды. Щелчок наименования команды просто выбирает ее, отмены при этом не происходит. 
 <li>Отмененные команды можно вновь привести в исполнение. Для этого надо просто перетащить движок вниз или щелчком на левой полосе палитры выставить его напротив последней результативной команды.</li> 
 Отмена отмены действует только до первого изменения в окне документа. После любой вставки или форматирования запись всех отмененных команд ликвидируется. 
 <li>Чтобы повторить отдельную выполненную и записанную операцию, надо ее выбрать и нажать кнопку Replay (Воспроизвести) в левом нижнем углу палитры. Программа дает возможность повторно выполнить несколько различных операций. Для этого их надо выбрать и щелкнуть на той же кнопке палитры. Для выбора несмежных команд надо удерживать нажатой клавишу CTRL.</li> 
 
 <li>Емкость палитры — величина переменная, она задается в основных настройках программы. Откройте командой Edit > Preferences (Правка > Настройки) диалоговое окно с настройками, выберите раздел General (Общие) и введите в поле Maximum Number of History Steps (Максимальное число записей журнала) максимальное число шагов, записываемых в палитру. По умолчанию оно равно 100. Когда число команд палитры превысит установленную емкость, новые команды записываются за счет старых.</li> 
<img src="image/prim.gif" alt="Работа с палитрой History">Не следует рассматривать палитру History (Предыстория) как место, где хранится коллекция записанных команд, действий и операций, которые можно произвольно упорядочить или выборочно исполнить. Все события предыстории образуют строгую последовательность, не подлежащую реорганизации. 
<h1>Сохранение файлов</h1>
Сохранение файлов в программе Dreamweaver выполняется стандартными для любых приложений Windows средствами. Это команды строки меню: File > Save (Файл > Сохранить) и File > Save as (Файл > Сохранить как). Первая команда имеет клавиатурный эквивалент — комбинацию клавиш CTRL+S. Она отображает диалоговое окно, в котором задается имя, тип и расположение файла, только в том случае, если имя текущего документа отсутствует. Это же диалоговое окно появляется при каждом обращении к команде Save as (Сохранить как). Этой команде поставлена в соответствие комбинация клавиш CTRL+SHIFT+S. Во всем остальном команды не имеют различий. 
 По умолчанию файлы гипертекстовых документов получают расширение .НТМ в операционной системе Windows и .HTML на платформе Macintosh.В программе существует полное равновесие между командами открытия и сохранения файлов. Все типы файлов, которые могут быть открыты программой, доступны и для сохранения. 
<img src="image/prim.gif" alt="Сохранение файлов">Длинные имена файлов, поддерживаемые операционными системами, начиная с Windows95, стали привычными для современного пользователя. Некоторые серверы к известным правилам образования имен добавляют свои ограничения. Следует избегать в именах пробелов и любых знаком пунктуации, за исключением дефисов (hyphen) и символов подчеркивания (underscore). 
<h1>Создание ярлыка</h1>
Самым простым и удобным способом является, видимо, запуск программы при помощи ярлыка. Ярлык отображается в виде специального значка. Он представляет собой ссылку на программу и может располагаться в любой папке Windows. Вид значка и подпись под ним выбираются обычно так, чтобы они соответствовали стилю, принятому в программе. Двойной щелчок мышкой на ярлыке запускает связанную с ним программу. 
 Сразу после установки программы на Рабочем столе отображается папка с ярлыком Dreamweaver. Это самый подходящий момент для того, чтобы создать копию ярлыка в удобном месте Рабочего стола. Если этого не сделать сразу, то при последующих сеансах работы потребуется приложить большие усилия. 
 Чтобы поместить на Рабочий стол ярлык программы Dreamweaver, надо выполнить следующую последовательность шагов. 
 <li>В окне Мой компьютер или при помощи программы Проводник найдите значок программы Dreamweaver. По умолчанию программа устанавливается в папку C:\Program Files\Macromedia\Dreamweaver 4.</li> 
 <li>Зацепите значок мышкой и перетащите его на свободное место Рабочего стола или окна папки.</li> 
 <li>Ярлык получит стандартное имя Ярлык для Dreamweaver.exe, которое можно и изменить. Для этого следует, не отменяя выбора значка, нажать клавишу F2, ввести с клавиатуры новое имя и подтвердить его нажатием на клавишу ENTER.</li> 
<h1>Установка</h1>
Искушенный пользователь не найдет в процедуре установки программы ничего нового для себя. На дистрибутивном диске надо разыскать и запустить на выполнение программу Dreamweaver 4 lnstaller.exe (инсталлятор). Как и большинство приложений Windows, программа устанавливается в несколько этапов, каждый из которых представлен отдельным диалоговым окном. 
Последовательно перечислим основные этапы работы программы установки. 
<li>Extracting Files (Извлечение файлов). На этом этапе из архивов извлекаются файлы, необходимые для работы программы-инсталлятора и установки системы Dreamweaver. Этап не требует вмешательства пользователя.</li> 
 <li>Welcome (Добро пожаловать). Первый этап собственно установки, на котором пользователь получает основные сведения о выбранной программе и правилах ее инсталляции.</li> 
 <li>License Agreement (Лицензионное соглашение). На втором этапе предлагается ознакомиться с лицензионным соглашением и авторскими правами на программный продукт. Пользователь должен принять предлагаемые обязательства или отвергнуть их.</li> 
<li>Macromedia Dreamweaver Serialization (Регистрация программы). На третьем этапе появляется диалоговое окно, в которое следует ввести реквизиты пользователя и серийный номер программы.</li> 
 <li>Choose Destination Location (Расположение). На этом этапе требуется вы брать диск и папку для установки программы. Адрес, отличный от предлагаемого по умолчанию, можно задать при помощи стандартной для операционной системы Windows процедуры выбора активного диска и каталога. Запускается процедура щелчком на кнопке Browse (Обзор).</li> 
 <li>Default Editor (Редактор по умолчанию). На этом этапе работы процедуры установки предлагается выбрать типы файлов, для которых программа Dreamweaver будет основным редактором, используемым по умолчанию.</li> 
 <li>Select Program Folder (Выбрать папку программы). Здесь следует выбрать папку, в которой будет находиться ярлык для запуска программы. Напомним, что доступ к этой папке и ее содержимому можно получить при помощи кнопки Пуск и меню Программы. В нелокализованной версии операционной системы они обозначаются соответственно: Start и Programs. По умолчанию инсталлятор предлагает для этих целей папку \Macromedia Dreamweaver 4.</li> 
Все дальнейшие операции установки не требуют вмешательства пользователя. Инсталлятор распаковывает архивы, создает систему каталогов и подкаталогов, копирует в нее все необходимые для работы файлы и выводит на экран содержимое гипертекстового файла с описанием возможностей программы, ссылками на полезные информационные источники и краткими сведениями о фирменных программных продуктах. Для запуска программы Dreamweaver не требуется обычная в таких случаях перезагрузка операционной системы. Программа готова к работе сразу после установки. 
<h1>Запуск программы</h1>
 Операционные системы семейства Windows 9x предлагают пользователю несколько различных способов запуска программ. 
 После установки пакета в Главное меню Windows добавляется специальный раздел с командами для запуска программы Dreamweaver и сопутствующих файлов. Конкретный вид этих команд зависит от версии операционной системы и редакции самого пакета. В любом случае команда для запуска пакета будет примерно такой: Пуск > Программы > Macromedia Dreamweaver 4 > Dreamweaver 4. Это официальный, штатный способ запуска программы, доступный в операционной среде любой конфигурации. 
 С ростом числа установленных приложений Главное меню Windows увеличивается в размерах и запуск приложений с его помощью становится все менее удобным. Операционная система предлагает несколько способов упрощения этой процедуры. 
<h1>Запуск с клавиатуры</h1>
В операционной системе Windows многие действия можно выполнить при помощи клавиатурных комбинаций (“горячих клавиш”). Клавиатурные комбинации позволяют быстро, без обращения к сложной системе вложенных меню, изменить установку или параметр, получить доступ к ресурсам и, в частности, запустить программу. 
 Существует несколько способов назначить команде подходящий “клавишный аккорд”. Пусть ярлык программы Dreamweaver создан и находится на Рабочем столе системы Windows. Рассмотрим самый простой способ создании горячей клавиши: 
 <li>щелкните правой кнопкой мыши на ярлыке программы и выберите в открывшемся контекстном меню пункт Свойства;</li> 
 <li>в открывшемся диалоговом окне Свойства: Dreamweaver 4 выберите вкладку Ярлык;</li> 
 <li>щелкните на поле Быстрый вызов и введите в него выбранную клавиатурную комбинацию для запуска пакета. Подтвердите выбор щелчком на кнопке. Применить и закончите работу с окном щелчком на кнопке ОК. В качестве клавиатурных сокращений можно использовать сочетания управляющих клавиш CTRL, ALT, SHIFT с алфавитно-цифровыми клавишами или специальными клавишами F1-F12.</li>

<a name="34"><h1>  <img src="/8.gif">  Бизнес в интернете: Сайты - Софт - Языки - Дизайн</h1>
<ul>
<li><a href="/390-1/index.htm">Киберсантинг</a> 
<li><a href="/391-1/index.htm">Киберсантинг как бизнес</a> 
<li><a href="/392-1/index.htm">Виды Киберсантинга</a> 
<li><a href="/691-1/index.htm">Создание игр</a> 
<li><a href="/393-1/index.htm">Дизайн как бизнес</a> 
 
<li><a href="/394-1/index.htm">Dreamweaver</a> 
<li><a href="/395-1/index.htm">PHP</a> 
<li><a href="/396-1/index.htm">Homesite</a> 
<li><a href="/397-1/index.htm">Frontpage</a> 
<li><a href="/398-1/index.htm">Studio MX</a> 
 
<li><a href="/432-1/index.htm">Сайтостроительство</a> 
<li><a href="/433-1/index.htm">Citrix MetaFrame</a> 
<li><a href="/434-1/index.htm">Стили сайта</a> 
<li><a href="/435-1/index.htm">ActiveX на сайте</a> 
<li><a href="/436-1/index.htm">HTML как основа сайта</a> 
 
<li><a href="/437-1/index.htm">Adobe GoLive</a> 
<li><a href="/438-1/index.htm">Что такое WEB</a> 
<li><a href="/439-1/index.htm">Мобильные WAP сайты</a> 
<li><a href="/440-1/index.htm">3D графика на сайтах</a> 
<li><a href="/442-1/index.htm">3DS MAX графические решения</a> 
 
<li><a href="/443-1/index.htm">Графика в 3D Studio MAX и на сайте</a> 
</ul>

</div></div>
</body></html>