Link Checker способен проверять корректность внешних ссылок, ссылок на локальные HTML-файлы, а также ссылок на связанные с ними графические и мультимедийные файлы. Не могут быть проверены ссылки на защищенные страницы (HTTPS), FTP-ссылки и почтовые ссылки (mailto). Кроме того, не анализируются ссылки на большие двоичные файлы (такие как EXE, PDF и ZIP), а также на некоторые мультимедийные файлы, поскольку разработчики HomeSite полагают, что подобные операции значительно замедлили бы процесс тестирования. Полный перечень типов файлов, для которых по умолчанию не выполняется проверка ссылок, указан в соответствующем разделе реестра Windows. Этот список содержится в параметре LinkVerifyExcludeExts приложения и может быть просмотрен с помощью редактора реестра (Рисунок 1.1).
HomeSite позволяет объединять ресурсы, подлежащие включению в состав сайта (HTML-файлы, изображения, мультимедийные файлы) в единый проект. При этом совершенно не имеет значения, где физически расположены файлы ресурсов: в одной папке или в разных, на жестком диске локального компьютера или на дисках нескольких компьютеров, объединенных в сеть. После создания проекта HomeSite автоматически отслеживает его состояние и при внесении пользователем изменений в проект регистрирует эти изменения.
Автоматическое сопровождение проекта позволяет облегчить решение целого ряда задач. Например, HomeSite обеспечивает выгрузку файлов проекта на удаленный сервер с сохранением единой структуры проекта, что в дальнейшем позволяет достаточно просто переносить изменения, сделанные в локальной копии проекта, в удаленную копию. Кроме того, проект рассматривается как «единое информационное пространство» при выполнении операций поиска и/или замены фрагментов кода либо текстового содержимого страниц.
Рисунок 1.21. Диалоговое окно для изменения списка или параметров использования внешних броузеров
После выполнения описанной процедуры в список будут добавлены указанные пользователем броузеры, причем для наглядности вместе с пиктограммами (Рисунок 1.23).
Рисунок 1.32. Диалоговое окно для размножения нового документа
Рисунок 1.22. Диалоговое окно для установки параметров внешнего броузера
Рисунок 1.31. Диалоговое окно для выбора шаблонов и мастеров
Рисунок 1.41. Диалоговое окно со списком файлов, для которых было выполнено резервное копирование
Рисунок 1.2. Диалоговые окна Мастера обновления конфигурации
Если вы используете оценочную версию HomtSite 5, то при каждом запуске программы на экране появляется окно, в котором отображается информация об оставшемся количестве дней ее легального использования (Рисунок 1.3). Чтобы перейти в режим работы с приложением, следует щелкнуть по кнопке Try (Испытать).
Рисунок 1.3. Диалоговое окно, используемое при запуске оценочной версии HomeSite 5
| Назад
|
Формат диалогового окна Save as при использовании неANSI кодовРисунок 1.45. Формат диалогового окна Save as при использовании не-ANSI кодов
Расположенный справа от списка флажок Check the document character set Проверять набор символов документа) позволяет указать, должен ли HomeSite при сохранении файла с не-ANSI кодировкой выполнять проверку соответствия гго истинной кодировки (указанной в теге <МЕТА> документа) той, которая выбрана в списке. Если такая проверка выполняется, и было выявлено несоответствие, на экран выводится предупреждающее сообщение (Рисунок 1.46). В этом случае возможны два корректных выхода из ситуации:
отказаться от сохранения с данной кодировкой;
после завершения операции сохранения скорректировать значение атрибута HTTP-EQUIV тега <МЕТА>.
Замечание
Замечание
Аналогичная проверка выполняется также для XML-документов Некоторые параметры работы HomeSite, связанные с кодировкой документов, присутствуют еще на одной вкладке окна Settings, которая относится непосредственно к редактору кода и называется Editor (Редактор). Таких параметров два: используемый шрифт и применяемый набор символов. Установка обоих параметров выполняется с помощью соответствующих раскрывающихся списков — Font (Шрифт) и Charset (Набор символов), Рисунок 1.47.
Формат контекстного меню списка файловРисунок 1.28. Формат контекстного меню списка файлов
Edit (Правка) - - открытие файла в окне документа (в режиме Edit):
Insert as Link (Вставить в качестве ссылки) — в текст активного документа (открытого в режиме Edit) помещается тег <А HREF>, содержащий ссылку на данный файл; эта операция может применяться к любому файлу, отображаемому в окне ресурсов;
Filter (Отбор) - - каскадное меню, которое позволяет управлять списком отображаемых файлов; оно содержит три варианта:
Web Documents (Web-документы) — в списке файлов отображаются только файлы, формат которых определен в параметрах настройки HomeSite как «Wcb-докумснты» (о том, как изменить эти параметры, см. подраздел «Настройка параметров работы с файлами» этой главы);
Web Images (Wcb-изображсния) - - в списке файлов отображаются только файлы, формат которых определен в параметрах настройки HomeSite как «Web-изображения» (о том, как изменить эти параметры, см. подраздел «Настройка параметров работы с файлами» этой главы);
All Web Files (Все Web-файлы) - - в списке файлов отображаются файлы, формат которых определен в параметрах настройки HomeSite как «Wеb-докумснты» и как «Web-изображения»;
All Files (Все файлы) — в списке файлов отображаются все файлы, имеющиеся в текущей папке;
View (Вид) — каскадное меню, которое позволяет управлять форматом списка файлов (то есть составом столбцов таблицы списка); оно содержит следующие пункты:
Document Title (Заголовок документа) - - в данном столбце отображается содержимое тега Web-документа, хранящегося в этом файле; соответственно, для файлов, не являющихся Web-документами, этот столбец смысла не имеет (для графических файлов информация в столбце вообще не выводится, а для файлов других типов выводится признак [Untitlcd] - - «безымянный»);</li>
<li> Document Size — размер файла в килобайтах; данные выводятся для всех типов файлов;</li>
<li> Modified Date/Time (Дата и время изменения) -- дата и время последнего изменения файла; данные выводятся для всех типов файлов;</li>
<li> Document Type (Тип документа) - - тип файла, который HomeSite определяет по расширению файла на основе системного списка зарегистрированных типов файлов; данные выводятся для всех зарегистрированных типов файлов;</li>
<li> Create Folder (Создать папку) -- создание новой папки, вложенной по отношению к текущей (открытой) папке; результат выполнения команды (значок новой папки) отображается в дереве каталогов вкладки Files.</li>
<li> Favorite Folders (Избранные папки) - - каскадное меню, которое позволяет создавать и корректировать подмножество папок, отнесенных пользователем к числу «избранных»; оно содержит два варианта: </li>
<li> Add Current Folder to Favorites (Добавить текущую папку в число избранных) - - при выборе данной команды текущая папка будет отнесена к числу избранных;</li>
<li> Customize Favorites... (Организовать избранное) -- при выборе данной команды открывается дополнительное диалоговое окно, с помощью которого можно скорректировать список избранных папок;</li>
<li> File (Файл) -- каскадное меню, которое содержит «стандартный» набор команд по управлению файлами (создать, копировать, переместить и т. д., см. Рисунок 1.28);</li>
<li> Refresh (Обновить) - - обновление содержимого окна ресурсов; применение этой команды имеет смысл в том случае, если во время сеанса работы с HomeSite состав панок или файлов был изменен другими средствами (например, с помощью Windows Explorer);</li>
<li> Select All (Выбрать все) - - выбор всех файлов в списке;</li>
<li> Properties (Свойства) - - вызов стандартной (для Windows) панели свойств файла.</li>
Контекстное меню списка файлов может быть открыто щелчком правой кнопки мыши либо на значке файла, либо в пустой позиции подокна. Во втором случае в меню будут недоступны команды Edit и Properties.<br>
Для графических файлов контекстное меню содержит вместо команды Edit команду Insert as <img> (Вставить как тег <img>) и, кроме того, в него добавляется команда Preview Image (Просмотр рисунка), как показано на Рисунок 1.29.<br><br>
<h1>Формат утилиты быстрого просмотра изображений</h1>Рисунок 1.30. Формат утилиты быстрого просмотра изображений<br><br><br><img src="image/format-utility-bystrogo-prosmotra-izobrazhenij_1.gif" alt="Формат утилиты быстрого просмотра изображений"><br>
<li> Format (Формат) — наименование формата файла с указанием используемого алгоритма сжатия (если таковой был использован при создании файла);</li>
<li> Width (Ширина), Height (Высота) — «истинные» геометрические размеры изображения;</li>
<li> Bits Per Pixel (Число бит на пиксел) - - глубина цвета изображения;</li>
<li> Size on Disk (Размер на диске) - - размер файла в байтах при его записи на диск;</li>
<li> Size in Мет (Размер в памяти) — размер файла в байтах при его загрузке в оперативную память.</li>
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index21.htm">Назад</a>
</td>
<td>
<h1>Формат вкладки AutoBackup диалогового окна Settings</h1>Рисунок 1.40. Формат вкладки Auto-Backup диалогового окна Settings<br><br><br><img src="image/format-vkladki-auto-backup-dialogovogo-okna_1.gif" alt="Формат вкладки AutoBackup диалогового окна Settings"><br><br>
<br><br>
<h1>Формат вкладки File Settings</h1>Рисунок 1.39. Формат вкладки File Settings<br><br><img src="image/39.gif" alt="Формат вкладки File Settings"><br>
В силу важности последнего параметра его смысл и влияние на работу с редактируемыми документами рассмотрен более подробно в следующем подразделе - <a href="Index25.htm">-«Управление кодировкой текстовых файлов»</a>.<br>
Еще один весьма важный аспект работы с файлами — это организация их резервного копирования. Многие не очень опытные пользователи персональных компьютеров (в том числе и начинающие Web-дизайнеры) уделяют вопросам резервного копирования недостаточное внимание. Такое пренебрежение собственной информационной безопасностью еще можно как-то оправдать, если вам приходится работать только с собственными наборами данных. Но представьте себе такую ситуацию. Вы провели в Сети несколько часов, с трудом отыскали интересующую вас информацию, потратили время и нервы па закачку найденных Web-документов на свой компьютер, и за несколько секунд до завершения закачки одного из этих файлов в HomeSite происходит разрыв связи с провайдером, отключение питания компьютера или... да мало ли что еще может случиться. Так вот, чтобы свести к минимуму отрицательные поcлeдствия подобных явлений, в HomeSite и реализована функция резервного копирования - - Auto-Backup. В отличие от многих других Windows-приложс-шш, в которых поддерживается лишь возможность автоматического сохранения временной копии файла на диске через заданный интервал времени, в HomeSite возможности функции Auto-Backup значительно шире. В частности, она позволяет:<br>
<li> создавать резервную копию перед сохранением исходного файла;</li>
<li> создавать резервную копию для всех открытых и редактируемых файлов через заданный интервал времени;</li>
<li> создавать резервную копию файлов, изменяемых в результате выполнения операции поиска и замены;</li>
<li> удалять резервные копии файлов через заданное количество дней;</li>
<li> восстанавливать файлы, открытые на момент аварийного завершения работы HomeSite.</li>
Параметры работы функции Auto-Backup могут быть скорректированы пользователем с помощью элементов управления, имеющихся на вкладке Auto-Backup диалогового окна Settings (Рисунок 1.40).<br>
Если на вкладке Auto-Backup установлен флажок Timed Auto-Backup (Периодическое копирование), то в случае аварийного завершения работы HomeSite цля всех открытых файлов будут созданы временные резервные копии. При повторном запуске HomeSite на экране появится диалоговое окно со списком гаких файлов (Рисунок 1.41). Чтобы восстановить файл на основе резервной копии, необходимо выбрать его в списке и щелкнуть на кнопке ОК.<br>
Если же периодическое копирование не разрешено, то возможность восстановления файлов после аварийного завершения работы HomeSite все равно существует. Соответствующие действия реализуются с помощью специальной утилиты, которая называется AUTO-BACKUP FILE MAINTENANCE (Восстановление файлов по резервной копии). Чтобы инициировать эту утилиту, необходимо в меню Options главного окна HomeSite выбрать команду Auto-Backup File Maintenance. Окно утилиты содержит список файлов, для которых имеются резервные копии, а также элементы управления работой утилиты (Рисунок 1.42).<br><br>
<h1>Формат вкладки General</h1>Рисунок 1.35. Формат вкладки General<br><br><br><img src="image/format-vkladki-general_1.gif" alt="Формат вкладки General"><br>
Замечание
<br>Замечание<br><br>Несколько забегая вперед, отметим, что подобная индикация используется в HomeSite и для других открытых файлов. Например, если в файл внесены изменения, и они не сохранены на диске, то имя такого файла выводится на этикетке синим цветом, а возле него появляется индикатор в виде крестика (см. Рисунок 1.36).
<li> Dynamically refresh local file list (Динамически обновлять локальный список файлов) — если во время текущего сеанса работы с HomeSite состав папок и/или файлов на текущем локальном дисководе был изменен какими-то другими средствами, то информация на вкладке Files будет обновлена автоматически (если данный флажок снят, то обновление выполняется с помощью команды Refresh из контекстного меню);</li>
<li> Use standard file dialogs (Использовать стандартные диалоги) -- при выполнении операций с файлами (копировать, переместить и т. д.) должны использоваться стандартные диалоговые окна Windows (по умолчанию используются их аналоги, входящие в состав HomeSite);</li>
<li> Display current folder in file dialogs (показывать текущую папку в диалоге) - - диалоговое окно, открываемое при выполнении операций над файлом, позиционируется относительно текущей папки (по умолчанию - - относительно папки, открытой при запуске HomeSite);</li>
<li> Use short filenames for temporary files (Использовать короткие имена для временных файлов) - - для временных файлов разрешается использовать только имена в формате DOS: не более восьми символов для имени файла и не более трех - - для расширения;</li>
<li> Prompt before opening unknown file types (Запрос при открытии файла неизвестного типа) - - при попытке открыть файл, не поддерживаемый HomeSite, на экран выводится окно с соответствующим предупреждением (см. Рисунок 1.25).</li>
<br><br>
<br>
<br>
<h1>Формат вкладки Location</h1>Рисунок 1.38. Формат вкладки Location<br><br><img src="image/38.gif" alt="Формат вкладки Location"><br>
В категорию File Settings включены следующие параметры (Рисунок 1.39):<br>
<li> Recognized file extension (Распознаваемые расширения файлов) -типы файлов (задаваемые расширениями файлов), которые должен поддерживать HomeSite; поддерживаемые типы HomeSite относит к категории Web-файлов (Web Files), которые разделяются на два вида:</li>
<li>Web documents (Web-документы) — текстовые файлы; типы файлов, представленные в данном поле, могут быть открыты для редактирования в окне документа; если добавить в перечень какой-либо не текстовый тип (например, .схс), то файлы такого типа будут отображаться в списке файлов окна ресурсов как Web-документы, однако попытка открыть такой файл в окне документа приведет к непредсказуемым последствиям (например, к зависанию HomeSite);</li>
<li>Web images (Web-изображения) — графические файлы; типы файлов, представленные в данном поле, могут быть открыты для просмотра с помощью средств, указанных в табл. 1.1; если добавить в перечень какой-либо тип графических файлов, не поддерживаемый HTML (например, .tif), то файлы такого типа будут отображаться в списке файлов окна ресурсов как Web-изображения, однако допустимый набор операций для них останется прежним (см. табл. 1.1);</li>
<li> Default extension (Расширение по умолчанию) - - расширение, устанавливаемое по умолчанию для сохраняемого на диске нового документа; поскольку HomeSite при работе с текстовыми файлами учитывает в первую очередь расширение, то некорректная установка этого параметра может привести к неправильной интерпретации HomeSite содержимого файла; например, если HTML-документ сохранить с расширением .sql, то HomeSite попытается применить к нему цветовую схему подсветки, установленную для SQL-файлов;</li>
<li> Include full path in save dialog (Включать полный путь в диалог сохранения) - - в поле File Name (Имя файла) в диалоговых окнах Save и Save as будет отображаться полный путь к сохраняемому файлу;</li>
<li> Format when saving (Формат сохранения) — формат текстового файла, который следует использовать при его сохранении на диске; возможны три значения этого параметра, выбираемые посредством установки соответствующего переключателя (PC, Unix, Macintosh);</li>
<li> If another process modifies the document (Если документ изменен другим процессом) - - вид реакции HomeSite на изменение открытого документа каким-либо другим приложением (например, редактором Dreamweaver); возможны три варианта, выбираемые посредством установки соответствующего переключателя: </li>
<li>Prompt to reload (Обновлять по запросу) --в случае модификации документа на экран выводится окно с вопросом о необходимости перезагрузки документа;</li>
<li>Always reload (Обновлять всегда) — измененный документ перезагружается автоматически;</li>
<li> Never reload (Не обновлять) — измененный документ не перезагружается до тех пор, пока пользователь не сделает этого вручную;</li>
<li> Enable non-ANSI file encoding (Разрешить нe-ANSI кодировку файлов) -включить режим работы с текстовыми файлами, в которых используется нe-ANSI кодировка.</li>
<br><br>
<h1>Формат вкладки Startup</h1>Рисунок 1.37. Формат вкладки Startup<br><br><img src="image/37.gif" alt="Формат вкладки Startup"><br>
Замечание
<br>Замечание<br><br>Флажок Restore last opened documents at startup вкладки Startup имеет (как это ни странно) более высокий приоритет, поэтому если установить оба первых флажка, то при запуске HomeSite в окне документа будет открыт тот документ, с которым вы работали при завершении предыдущего сеанса.
<li> Startup folder (Начальная папка) - - папка, которая будет назначена текущей при запуске HomeSite; значение этого параметра задастся посредством установки одного из трех переключателей:</li>
<li> Skirl in the folder last opened in the Files lab (Папка, открытая последней на вкладке Files) - - в качестве текущей пайки будет использоваться папка, которая была таковой при завершении предыдущего сеанса работы с HomeSite;</li>
<li>Start in ilic folder last opened in the file open dialog (Папка, открытая последней в диалоговом окне Open):</li>
<li>Always start in the folder (Всегда наминать работу с папкой...) в качестве текущей всегда должна использоваться при запуске HomeSite папка, указанная в связанном с переключателем поле.</li>
Из параметров, которые могут быть установлены в категории Location (Рисунок 1.38), рассмотрим только два, входящие в группу Default template (Шаблон, используемый по умолчанию):<br>
<li> Use this file as a template when creating new documents (Использовать этот файл в качестве шаблона при создании нового документа) - - в качестве шаблона по умолчанию будет использоваться файл, указанный в расположенном ниже текстовом поле; для выбора файла может использоваться кнопка, находящаяся справа от поля;</li>
<li> Always show the template dialog when creating new documents (Всегда при создании нового документа показывать диалоговое окно для выбора шаблона) - - при выборе в меню File команды New Document на окран будет выводится диалоговое окно со списком имеющихся шаблонов (см. Рисунок 1.31).</li>
<br><br>
<h1>Интерфейс листа Files окна ресурсов</h1>Интерфейс листа Files окна ресурсов<br><br>
Для тех типов файлов, которые поддерживаются HomeSite, большая часть операций может быть выполнена с помощью элементов интерфейса листа Files окна ресурсов. Фактически это окно обеспечивает выполнение тех же операций при работе с файлами, что и Windows Explorer и, кроме того, выполнение ряда специфических операций, связанных с редактированием Web-документов.<br>
Некоторые из этих операций (в частности, такие как открытие и сохранение файлов, создание резервной копии перед заменой текста в файлах) выполняются для текущей папки (каталога).<br>
Текущий каталог определяется HomeSite по следующим правилам:<br>
<li> по умолчанию текущим каталогом считается тот, в котором находится текущий (активный) документ, открытый в окне редактора кода;</li>
<li> при просмотре файла в диалоговом окне Редактора тегов (это относится в первую очередь к графическим файлам) текущим каталогом считается тот, в котором находится этот файл;</li>
<li> если видима только одна вкладка Files, текущим каталогом считается выбранный в видимой вкладке Files;</li>
<li> если обе вкладки Files видимы, или наоборот обе вкладки скрыты, то текущим считается каталог, выбранный на основной вкладке (то ость на вкладке Files 1).</li>
Основные элементы вкладки Files показаны на Рисунок 1.27.<br><br>
<h1>Интерфейс утилиты Tag</h1>Рисунок 1.11. Интерфейс утилиты Tag<br><br><img src="image/interfejs-utility-tag_1.gif" alt="Интерфейс утилиты Tag"><br>
И, наконец, еще один вид отображаемой информации — содержание справочной системы HomeSite (Рисунок 1.13); каждый раздел справочника также может быть открыт двойным щелчком кнопкой мыши. Информация из выбранного раздела по умолчанию выводится в окне документа на вкладке Help. Однако существует возможность просмотра справочной информации в отдельной панели окна ресурсов.<br>
Особенности работы с различными листами окна ресурсов будет рассмотрена более подробно при описании соответствующих этапов разработки узла.<br>
Пользователь может скрыть или, наоборот, сделать видимым любой лист окна ресурсов. Для управления составом листов окна используется каскадное меню Resource Window, которое входит в состав меню View (Рисунок 1.14).<br><br>
<h1>Исходный список типов файлов для которых HomeSite не тестирует ссылки</h1>Рисунок 1.1. Исходный список типов файлов, для которых HomeSite не тестирует ссылки<br><br><img src="image/ishodnyj-spisok-tipov-fajlov-dlja-kotoryh-homesite_1.gif" alt="Исходный список типов файлов для которых HomeSite не тестирует ссылки"><br>
По умолчанию проверяются все ссылки в выбранных файлах проекта, однако пользователь имеет возможность указать, какие ссылки пропустить.<br>
По результатам проверки Link Checker создает протокол, на основании которого пользователь может принять решение относительно последующих действий.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Использование линеек в режиме просмотра</h1>Рисунок 1.19. Использование линеек в режиме просмотра<br><br><img src="image/ispolzovanie-lineek-v-rezhime-prosmotra_1.gif" alt="Использование линеек в режиме просмотра"><br>
В качестве еще одного параметра настройки внутреннего броузера следует отмстить возможность совмещения окна броузера с окном редактирования на одной вкладке окна документа (Рисунок 1.20).<br><br>
<h1>Изменение набора символов документа</h1>Рисунок 1.47. Изменение набора символов документа<br><br><img src="image/47.gif" alt="Изменение набора символов документа"><br>
В некоторых случаях (прежде всего - - при конвертировании «обычных» текстовых файлов в HTML-документы) могут возникнуть проблемы с преобразованием кириллических символов. Объясняется это тем, что при выполнении конвертирования HomeSite всегда использует кодовую таблицу ISO-8S59-1. В результате такого преобразования отдельные буквы («д», «ц», «ь») представляются в документе своими именами, причем с западно европейским «акцентом». Например букве «д» соответствует немецкая буква «а умлаут» (то есть «а» с двумя точками наверху). Имена символов начинаются знаком амперсанда и заканчиваются точкой с запятой. В частности, имя символа «а умлаут» выглядит так: ä. Пример конвертированной страницы с именами символов вместо их изображений показан на Рисунок 1.48.<br>
При переключении в окно просмотра имена символов заменяются изображениями символов, однако если используется «не та» кодовая таблица, то текст все равно окажетад трудно читаем.<br>
Указанные проблемы позволяет преодолеть специальная функция, которая имеется в составе HomeSite. Она называется Replace Extended Characters (Замена развернутых символов).<br><br>
<h1>Элементы управления окном документа</h1>Рисунок 1.5. Элементы управления окном документа<br><br><br><img src="image/jelementy-upravlenija-oknom-dokumenta_1.gif" alt="Элементы управления окном документа"><br><br>
<br><br>
<h1>Конфигурирование броузеров</h1>Конфигурирование броузеров<br><br>
Основным недостатком любого текстового редактора, используемого для создания Web-документов, является то, что невозможно мгновенно получить визуальное представление редактируемого документа. Как правило, чтобы увидеть результаты внесенных в документ изменений, требуется выполнить как минимум два действия: сохранить документ на диске и затем открыть его в броузере. Кроме того, опытные Web-дизайнеры знают, что для объективной оценки качества страницы следует использовать для просмотра несколько различных броузеров (тех, которые гипотетически могут находиться в распоряжении потенциальных посетителей вашего сайта). Все это делает процесс разработки Web-документов в обычных текстовых редакторах весьма утомительным делом. Разработчики HomeSite постарались свести к минимуму объем рутинных операций, необходимых для просмотра документа:<br>
<li> во-первых, просмотр результатов правки возможен без предварительного сохранения документа на диске;</li>
<li> во-вторых, для перехода в режим просмотра достаточного щелкнуть кнопкой мыши на вкладке Browse окна документа;</li>
<li> в-третьих, пользователь может заранее сформировать список броузеров, которые будут использоваться для просмотра документов, и затем переключаться между ними, практически оставаясь в среде HomeSite.</li>
При работе с HomeSite пользователь имеет дело с тремя типами броузеров:<br>
<li> внутренним (Internal); </li>
<li> внешним (External); </li>
<li> встроенным (Built-in).</li>
Внутренний броузер — это броузер, динамически подключаемый к HomeSite и позволяющий просматривать Web-документы непосредственно в окне документа (на вкладке Browse); в качестве внутреннего броузера может быть назначен либо один из броузеров, установленных на компьютере пользователя, либо встроенный броузер HomeSite.<br>
Встроенный броузер — это утилита, входящая в состав HomeSite; ее можно считать «ущербным» броузером, поскольку встроенный броузер не может быть использован вне окна документа; кроме того, визуальное представление Web-документа в этом броузере в большинстве случаев отличается от представления этого документа в «настоящих» броузерах; поэтому встроенный броузер может быть использован либо для грубой предварительной оценки результата, либо если по какой-либо причине на компьютере отсутствуют другие броузеры.<br>
В качестве внешнего броузера может быть определен любой из установленных на компьютере броузеров; количество внешних броузеров, с которыми может быть интегрирован HomeSite, не ограничено.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index16.htm">Назад</a>
</td>
<td>
<h1>Конфигурирование внешних броузеров</h1>Конфигурирование внешних броузеров<br><br>
Разработчик сайта не в состоянии предугадать, броузер какого типа (а тем более - - какой версии) будут использовать потенциальные посетители при просмотре страниц. Поскольку каждый броузер отличается определенной самостоятсльностью в интерпретации содержимого страниц, то рекомендуется при разработке публикации выбирать некий компромиссный вариант. Поэтому при подключении к HomeSite внешних броузеров целесообразно придерживаться принципа «чем больше -- тем лучше».<br>
Если установка HomeSite на компьютер производится после установки броузеров, то он пытается обнаружить их самостоятельно и в случае обнаружения назначает их своими внешними броузерами. В противном случае необходимо сформировать список внешних броузеров вручную. Для этого необходимо выполнить следующие действия:<br>
<li> 1. В меню Options главного окна HomeSite выбрать команду Configure External Browsers... (Конфигурировать внешние броузеры).</li>
<li> 2. В открывшемся диалоговом окне (Рисунок 1.21) скорректировать список<br>внешних броузеров или изменить параметры их использования.</li>
<br><br>
<h1>Контекстное меню графического файла</h1>Рисунок 1.29. Контекстное меню графического файла<br><br><img src="image/kontekstnoe-menju-graficheskogo-fajla_1.gif" alt="Контекстное меню графического файла"><br>
Замечание
<br>Замечание<br><br>Хотя команда Insert as <img> присутствует в контекстном меню любого графического файла, но реально она может быть выполнена только для файлов, указанных в параметрах настройки HomeSite как «Web-изображения».
Выбор команды Preview Image приводит к открытию выбранного файла с помощью специальной утилиты быстрого просмотра, которая, помимо собственно изображения, позволяет также получить сведения, зачастую необходимые при подготовке Web-публикаций (Рисунок 1.30):<br><br>
<h1>Меню File</h1>Меню File<br><br>
Команды, собранные в меню File, предназначены для работы с текстовыми файлами, открытыми в окне документа, а также для создания (и открытия) новых текстовых файлов.<br>
Многие из команд этого меню вынесены на панели инструментов главного окна HomeSite.<br>
Ниже приведено краткое описание тех команд меню File, которые являются специфическими именно для HomeSite:<br>
<li> New... (Создать) — при выборе данной команды открывается диалоговое окно (Рисунок 1.31), которое обеспечивает доступ к шаблонам и мастерам, позволяющим создать тот или иной «типовой» документ; чтобы создать документ на основе шаблона, достаточно выбрать требуемый шаблон и щелкнуть на кнопке ОК; пользователь может разрабатывать собственные мастера и шаблоны, доступ к которым осуществляется также с помощью этого окна; особенности применения различных видов предустановленных мастеров и шаблонов будут рассмотрены в соответствующих разделах книги;</li>
<li> New Document (Создать документ) - - создание нового документа на основе шаблона, используемого по умолчанию; новый документ автоматически открывается в окне документа в режиме Edit; как установить шаблон, используемый по умолчанию, см. следующий подраздел «Настройка параметров работы с файлами»;</li>
<li> Multiple New Documents... (Размножить цовый документ) — при выборе данной команды открывается диалоговое окно (Рисунок 1.32), с помощью которого можно указать количество копий нового документа, создаваемого на основе шаблона, используемого по умолчанию; вес копии документа получают возрастающие порядковые номера и помещаются на отдельные листы в окне документа;</li>
<li>Open from Web... (Открыть из Web) — команда обеспечивает загрузку файла в окно документа (в режиме Browse) непосредственно из Сети; при этом HomeSite практически полностью берет на себя функции броузера, отображая в строке состояния информацию о процессе закачки документа (Рисунок 1.33); при выборе команды открывается диалоговое окно, позволяющее ввести (или выбрать из списка, если загрузка по этому адресу уже выполнялась) требуемый URL, а также установить параметры (имя и номер порта) прокси-сервера и допустимое время ожидания (Рисунок 1.34); при необходимости е помощью имеющихся в окне кнопок Favorites (Избранное) и Bookmarks (Закладки) можно выбрать URL наиболее посещаемых вами ресурсов, запомненные броузерами IE и NC соответственно;</li>
Замечание
<br>Замечание<br><br>В отличие от загрузки Web-документа из Сети с помощью команды Open URL, при выполнении команды Open from Web для загружаемого файла создается отдельный лист в окне документа. Это позволяет после завершения загрузки работать с ним таким же образом, как с локальными файлами (редактировать, сохранять на диске и т. д.). <li> Recent Files (Последние файлы) - - это каскадное меню, содержащее список последних файлов, которые были открыты в окне документа;</li>
<li> Save as... (Сохранить как) --данная команда практически ничем не отличается от одноименной команды любого Windows приложения, за исключением того, что позволяет сохранить исходный текстовый файл в новой кодировке (подробнее об этом см. подраздел «Настройка параметров работы с файлами»);</li>
<li> Save as Template... (Сохранить как шаблон) -- команда обеспечивает сохранение текущего документа в списке шаблонов;</li>
<li> Insert File... (Вставить файл) - - вставка в редактируемый документ содержимого указанного файла; в качестве файла-источника может быть использован только файл, относящийся к Web-документам;</li>
<li> Convert Text File... (Конвертировать текстовый файл) -- преобразование выбранного текстового файла в HTML-документ; в ходе такого преобразования в исходный текстовый файл добавляются парные теги <HTML>, <head>
<link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/>, <TITLE> и <BODY>; кроме того, выполняется соответствующая замена специальных символов (например, символ конца строки заменяется тегом <BR>, а угловые скобки заменяются их колами).</li>
<br><br>
<h1>Настройка параметров работы с файлами</h1>Настройка параметров работы с файлами<br><br>
Настройка параметров работы с файлами, как и настройка других параметров HomeSite, выполняется в диалоговом окне Settings, с которым вы познакомились при установке параметров внутреннего броузера. Параметры HomeSite, относящиеся к работе с файлами, распределены по нескольким категориям: General (Общие), Startup (Запуск), Location (Расположение), File Settings (Параметры файла). Ниже приведены пояснения к тем параметрам, которые либо относятся к рассмотренным выше операциям по работе с файлами, либо представляются недостаточно очевидными.<br>
В категорию General включены следующие параметры (Рисунок 1.35):<br>
<li>Warn when opening read-only files (Предупреждать, когда открывается файл, доступный только для чтения) — при открытии текстового файла, для которого установлен атрибут «Только для чтения», на экран выводится окно сообщения с просьбой подтвердить намерение открыть такой файл; хотя файл будет открыт в режиме Edit, любые операции редактирования для него запрещены; соответствующее напоминание выводится в строке состояния главного окна HomeSite (Рисунок 1.36);</li>
<li> Flag read-only files in the file list (Признак файла, доступного только для чтения, в списке файлов) — в окне документа на этикетке файла, доступного только для чтения, выводится красная метка (см. Рисунок 1.36);</li>
<br><br>
<h1>Окно документа</h1>Окно документа<br><br>
Хотя окно документа может использоваться в трех различных режимах (Edit, Browse, Help), в первую очередь оно предназначено для работы с текстовым редактором. Поэтому, рассказывая об особенностях интерфейса этого окна, вольно или невольно придется знакомить читателя с особенностями реализации редактора кода. Поскольку описанию работы с редактором кода посвящена значительная часть материала поcледующих глав книги, то здесь мы ограничимся описанием лишь тех аспектов, которые не зависят от синтаксиса кода и относятся к визуальному представлению информации в окне документа.<br>
Управление параметрами представления информации выполняется с помощью кнопок панели инструментов, расположенной вдоль левой вертикальной границы окна документа.<br>
Эти кнопки достаточно условно можно разделить на несколько групп (Рисунок 1.5):<br>
<li> кнопка разделения окна (Split Current Document); обеспечивает разделение окна документа по горизонтали на две части (на два подокна); такой режим целесообразно использовать при работе с большим документом, когда требуется иметь перед глазами одновременно два различных его фрагмента; размеры подокон можно изменять, перемещая горизонтальную полосу разделения (Рисунок 1.6);</li>
<li> кнопки управления форматом; в эту группу входят четыре кнопки:</li>
<li> Word-wrap (Перенос строки) — установка режима, при котором длинные строки форматируются по ширине окна документа;</li>
<li> Show Gutter (Показывать служебное поле) — установка режима, при котором вдоль левой границы окна выводится поле, содержащее дополнительную (служебную) информацию: символы переноса строки, номера строк и т. д. (см. Рисунок 1.5);</li>
<li> Show Line Numbers in Gutter (Показывать номера строк в служебном поле) — установка режима, при котором в служебном поле выводятся номера строк кода;</li>
<li> Show Hidden Symbols (Показывать скрытые символы) — установка режима, при котором в тексте документа отображаются символы, которые по умолчанию скрыты (пробел, конец строки и т. д.);</li>
<li> кнопка полноэкранного режима (Full Screen); обеспечивает увеличение размеров окна документа за счет того, что в главном окне HomeSite не отображаются панели инструментов и строка состояния;</li>
<li>кнопки навигации по открытым документам; в эту группу входят пять кнопок: </li>
<li>Show Open Document List (Показать список открытых документов) — щелчок на кнопке открывает список открытых документов (Рисунок 1.7); выбор документа в списке приводит к переходу на соответствующий лист в окне документа;</li>
<li> First Document (Первый документ) — переход на первый по порядку открытый документ; кнопка недоступна, если активен первый документ;</li>
<br><br>
<h1>Окно ресурсов</h1>Окно ресурсов<br><br>
Окно ресурсов (Resource Window) позволяет весьма существенно повысить эффективность работы с HomeSite, поскольку обеспечивает быстрый доступ к различным информационным ресурсам. Каждому виду информационных ресурсов соответствует свой «лист» окна. Переход между «листами» производится с помощью этикеток ресурсов. Всего таких «листов» семь (см. Рисунок 1.4):<br>
<li> File 1, File 2 — обеспечивают работу с деревом каталогов, имеющихся на компьютере пользователя либо на сетевом диске, доступном с данного компьютера (Рисунок 1.8); файл из открытой папки может быть загружен в окно документа посредством двойного щелчка левой кнопкой мыши; наличие двух однотипных листов объясняется тем, что это позволяет существенно повысить эффективность одновременной работы с несколькими источниками данных (например, с локальным жестким диском и с каким-либо сетевым ресурсом);</li>
<li> Projects (Проекты) — обеспечивает просмотр и редактирование данных об информационных ресурсах сайта (Рисунок 1.9); перечень файлов, имеющихся в выбранной папке, отображается в нижней панели окна; чтобы поместить ссылку на любой из этих файлов в открытый документ, достаточно перетащить мышью значок файла в окно документа в требуемую позицию; помимо данных о ресурсах, на этом листе отображается список удаленных серверов, на которые предполагается производить выгрузку сайта, а также перечень сценариев развертывания сайта;</li>
<li> Site view (Вид сайта) — визуальное представление навигационной схемы узла (Рисунок 1.10); состав отображаемой информации зависит от активного в данный момент документа (то есть видимого в окне документа); если открыта индексная (главная) страница сайта, то можно получить информацию о ссылках, имеющихся на страницах нижних уровней;</li>
<br><br>
<h1>Окно результатов</h1>Окно результатов<br><br>
В отличие от рассмотренного выше окна ресурсов, окно результатов (Results Window) по умолчанию не отображается на экране. Оно может быть открыто в двух случаях:<br>
<li> когда пользователь выбирает в меню View (Вид) команду Results (Результаты) или щелкает кнопку с тем же именем на панели инструментов;</li>
<li>когда выполняется одна из операций, связанных с тестированием страницы (активного документа), чем, собственно, и объясняется название окна. </li>
Окно результатов располагается в нижней части основного окна HomeSite (Рисунок 1.15).<br><br>Рисунок 1.15. Окно результатов<br><br><img src="image/15.gif" alt="Окно результатов"><br>
С точки зрения пользовательского интерфейса окно реализовано в виде так называемой рабочей книги (Work book), состоящей из пяти «листов». Подобно окну ресурсов, окно результатов является многофункциональным, поскольку каждый из листов связан с определенной операцией:<br>
<li> Search (Поиск) — на этом листе отображаются результаты поиска и/или замены заданного фрагмента текста; поиск производится по всем файлам проекта;</li>
<li> Validation (Проверка корректности) — лист результатов проверки синтаксиса кода страницы;</li>
<li> Links (Ссылки) — лист результатов тестирования гиперссылок, имеющихся на странице;</li>
<li> Thumbnails (Миниатюры) — на этом листе отображаются миниатюры изображений, хранящихся в текущей папке;</li>
<li> Deployment (Развертывание) — лист результатов загрузки проекта на удаленный Web-ссрвер.</li>
Примеры представления соответствующих данных на различных листах окна результатов показаны на Рисунок 1.16.<br>
<img src="image/okno-rezultatov_1.gif" alt="Окно результатов"><br>
Рисунок 1.16. Примеры представления данных на различных листах окна результатов<br> Переключение между листами окна результатов производится с помощью этикеток листов.<br> Каждый лист окна результатов связан с текущим редактируемым документом. Это означает, что в нем отображается информация, относящаяся к тому документу, который был открыт в окне редактирования в момент запуска команды тестирования. При выполнении той же команды для другого документа содержимое соответствующего листа окна результатов обновляется (то есть предыдущая информация с этого листа будет потеряна). Разные листы окна результатов могут быть связаны с разными документами. При переключении между листами представленная на них информация сохраняется. Она сохраняется также и в том случае, если окно результатов будет закрыто (то есть открыв его снова, вы увидите тс же результаты).<br> Команды инициализации различных видов тестирования страницы собраны в меню Tools (Инструменты), а также представлены на панели инструментов главного окна HomeSite.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index15.htm">Назад</a>
</td>
<td>
<h1>Окно с сообщением о том что данный формат не поддерживается HomeSite</h1>Рисунок 1.25. Окно с сообщением о том, что данный формат не поддерживается HomeSite<br><br><img src="image/okno-s-soobshheniem-o-tom-chto-dannyj-format-ne_1.gif" alt="Окно с сообщением о том что данный формат не поддерживается HomeSite"><br>
<li> Open in Associated Program (Открыть с помощью связанного приложения) -- файл будет открыт с помощью приложения, связанного (ассоциированного) с данным типом файлов" (если таковое имеется);</li>
<li> Open it (Открыть) -- HomeSite попытается открыть файл своими силами;</li>
<li> Skip it (Пропустить) -- операция открытия выполняться не будет.</li>
Если пользователь выберет второй вариант (Open it), то HomeSite попытается определить используемый способ кодирования и открыть файл. Если при этом возможны различные варианты обработки кода, то HomeSite может вывести на экран дополнительное окно, чтобы получить от пользователя необходимую информацию (Рисунок 1.26).<br><br>
<h1>Окно утилиты AutoBackup File Maintenance</h1>Рисунок 1.42. Окно утилиты Auto-Backup File Maintenance.<br><br><img src="image/okno-utility-auto-backup-file-maintenance_1.gif" alt="Окно утилиты AutoBackup File Maintenance"><br>
Чтобы восстановить файл, необходимо:<br>
<li> 1. Выбрать файл в списке.</li>
<li>2. В меню File утилиты выбрать команду Open Selected Files for Edit (Открыть выбранные файлы для редактирования).</li>
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index23.htm">Назад</a>
</td>
<td>
<h1>Организация пользовательского интерфейса</h1>Организация пользовательского интерфейса<br><br>
Необходимо подчеркнуть, что хотя HomeSite 5 вышел под торговой маркой компании Macromedia, его интерфейс не претерпел существенных изменений по сравнению с предыдущей версией.<br>
Главное окно HomeSite предоставляет пользователю, по сути, стандартный Windows-интерфейс, что значительно упрощает знакомство с инструментом. На первый взгляд может показаться, что окно несколько перегружено элементами управления, но это действительно только на первый взгляд. Кроме того, у пользователя имеется возможность на каждом этапе создания узла оставлять на экране только необходимые в данный момент элементы управления (подробнее об этом будет сказано при их описании).<br>
Итак, в начале первого сеанса работы с HomeSite вы можете видеть следующие основные элементы интерфейса (Рисунок 1.4):<br><br>
<h1>К основным функциональным возможностям HomeSite </h1>Основные функциональные возможности HomeSite 5<br><br>
К основным функциональным возможностям HomeSite 5 можно отнести следующие:<br><br>
<li> непосредственное редактирование HTML-кода Web-страницы;</li>
<li> поддержка синтаксиса нескольких языков разметки, а также языков сценариев;</li>
<li> быстрый просмотр страниц во всех броузерах, установленных на компьютере пользователя;</li>
<li> централизованное хранение и автоматическое обновление информации о проекте;</li>
<li> навигация по страницам сайта, а также просмотр и навигация по иерархии тегов внутри страницы;</li>
<li>автоматическая проверка корректности ссылок в пределах создаваемого сайта;</li>
<li> поиск требуемых фрагментов текста по всем страницам узла;</li>
<li> проверка корректности кода страницы, а также контроль правописания текстового содержимого страниц;</li>
<li> быстрый предварительный просмотр изображений, подлежащих включению в страницу, с указанием их основных характеристик;</li>
<li> выгрузка файлов проекта на удаленный сервер;</li>
<li> поддержка технологий создания динамических и интерактивных страниц;</li>
<li> поддержка технологии стилевого оформления страниц узла на основе каскадных таблиц стилей (CSS);</li>
<li> автоматический контроль целостности проекта, размещенного как на локальном компьютере, так и на удаленном сервере;</li>
<li> оценка длительности загрузки страниц;</li>
<li>оперативная поддержка действий пользователя, наличие развитой справочной системы;</li>
<li> предоставление пользователю широких полномочий по настройке параметров рабочей среды;</li>
<li> создание макросов и новых элементов пользовательского интерфейса средствами встроенного языка программирования;</li>
<li> интеграция с визуальным редактором Web-страниц Macromedia Dreamweaver либо с пакетом UltraDev (инструмент визуального проектирования баз данных для Web).</li>
Наиболее важные из перечисленных возможностей рассмотрены ниже несколько подробнее. По замыслу автора, это должно помочь читателю выбрать для себя ту отправную точку, с которой он хотел бы начать более близкое знакомство с HomeSite 5.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td>
<h1>Основные элементы пользовательского интерфейса HomeSite</h1>Рисунок 1.4. Основные элементы пользовательского интерфейса HomeSite<br><br><img src="image/osnovnye-jelementy-polzovatelskogo-interfejsa_1.gif" alt="Основные элементы пользовательского интерфейса HomeSite"><br>
<li> панели инструментов (Toolbars); на них вынесены наиболее часто применяемые команды из всех разделов меню; каждая кнопка имеет всплывающую подсказку, поясняющую ее назначение; любая из панелей инструментов может быть закрыта либо открыта с помощью соответствующей команды из меню View (Вид);</li>
<li> окно ресурсов (Resource Window); название окна является достаточно условным, поскольку в нем может быть представлена самая разнообразная информация, например, файловая структура проекта, перечень разделов справочной системы, результаты поиска и т. д.; при этом каждый вид данных отображается на отдельном «листе», переключение между которыми производится с помощью этикеток ресурсов (Resource Tabs), расположенных в нижней части окна; окно может быть закрыто с помощью небольшой кнопочки с крестиком в правом верхнем углу;</li>
<li> окно документа (Document Window); в этой позиции экрана может быть представлено либо окно редактора кода (Code Editor), либо окно броузера страниц (Page Browser), либо окно справочника (Help); переключение между окнами выполняется с помощью соответствующих этикеток, расположенных сверху; в режиме текстового редактирования окно содержит текст документа; для редактора кода предусмотрена собственная панель инструментов, которая находится слева от окна; для просмотра документа в виде Web-страницы (в режиме Browse) используется броузер, указанный в параметрах настройки HomeSite; при работе в этом режиме также используется собственная панель инструментов (на рисунке не показана); третий режим — Help — предоставляет возможность просмотра содержимого выбранного раздела справочника;</li>
<li> этикетка документа (Document Tab); на ней выводится имя файла открытого документа; когда в окне документа открыто несколько документов (число одновременно редактируемых документов не ограничено), с помощью этикеток можно быстро переключаться между ними;</li>
<li> панель быстрой вставки (Quick Bar); она содержит кнопки, соответствующие основным тегам языка HTML и элементам некоторых других языков, поддерживаемых HomeSite; в зависимости от типа связанного с кнопкой тега щелчок на ней приводит либо к вставке тега в текст документа, либо к открытию соответствующего диалогового окна редактора тегов (Tag Editor), с помощью которого производятся установки требуемых параметров; для удобства работы кнопки панели сгруппированы по предназначению, переключение между группами выполняется с помощью этикеток групп; при желании панель быстрой вставки можно закрыть, щелкнув на кнопке QuickBar основной панели инструментов;</li>
<li>строка состояния (Stains Bar), в которой выводится дополнительная информация о выполняемых операциях. </li>
Как и в других Windows-приложениях, перечень доступных элементов управления (в частности, кнопок панелей инструментов) определяется текущим состоянием редактора и свойствами того объекта, который в настоящий момент активен. Например, вкладка Help появляется на экране только после первого обращения к справочнику.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index12.htm">Назад</a>
</td>
<td>
<h1>Основные элементы вкладки Files</h1>Рисунок 1.27. Основные элементы вкладки Files<br><br><img src="image/osnovnye-jelementy-vkladki-files_1.gif" alt="Основные элементы вкладки Files"><br>
Такими элементами являются:<br>
<li> список дисководов (Drive List);</li>
<li> список папок, хранящихся на выбранном дисководе;</li>
<li> список файлов, имеющихся в выбранной папке.</li>
При работе с папками и файлами, представленными на вкладке Files, используются два механизма:<br>
<li> прямое манипулирование с помощью мыши; </li>
<li> контекстные меню.</li>
Замечание
<br>Замечание<br><br>Следует помнить, что команды, имеющиеся в меню File главного окна HomeSite, относятся к файлу (активному документу), открытому в окне документа, а не к файлу, выбранному в окне ресурсов.
Работа со списком дисководов и со списком папок реализована в HomeSite практически так же, как в Windows Explorer (например, чтобы открыть папку, можно либо щелкнуть на се значке левой кнопкой мыши, либо щелкнуть на значке «+»). Контекстное меню, используемое для папок, -- это системное контекстное меню Windows, предназначенное для работы с объектами такого типа.<br>
Существенные особенности имеются при работе со списком файлов, представленном в нижнем подокне вкладки Files:<br>
<li> во-первых, состав команд контекстного меню отличается от системного; </li>
<li> во-вторых, для выполнения многих специфических операций с файлами поддерживается техника прямого манипулирования.</li>
В состав контекстного меню входят следующие команды и каскадные меню (Рисунок 1.28):<br><br>
<h1>В целом процесс установки HomeSite </h1>Особенности инсталляции HomeSite 5<br><br>
В целом процесс установки HomeSite 5 на компьютер пользователя выполняется таким же образом, как и установка большинства других Windows-приложений. В частности, для установки HomeSite 5 используется весьма распространенный мастер установки InstallShield производства компании InstallShield Software Coqioration. При установке следует иметь в виду:<br><br>
<li> предусмотрены минимальные системные требования, необходимые для нормального функционирования продукта;</li>
<li> если на компьютере установлена одна из предыдущих версий HomeSite (4.5 или 4.52), то возможно ее частичное автоматическое обновление (upgrade);</li>
<li> в случае установки оценочной (Evaluation или Trial) версии продукта период его использования ограничен 30 днями; любое изменение показаний системного таймера в течение этого периода приводит к досрочному завершению периода пользования;</li>
<li> в процессе инсталляции в папке Windows создается файл HomeSite5.log, в который заносятся сведения о ходе инсталляции; в случае возникновения проблем при инсталляции вы можете отослать этот файл в центр технической поддержки компании Macromedia (адрес электронной почты customerscrvice@macroincdia.com, URL HTTP://WWW.MACROMEDIA.COM/SUPPORT/EMAIL/CSCONTACT).</li>
К аппаратному и программному обеспечению компьютера, на который производится установка HomeSite 5, предъявляются следующие требования:<br><br>
<li> Pentium-совместимый процессор (рекомендуется Pentium II или выше); </li>
<li> 64, но лучше 128 Мб оперативной памяти (RAM);</li>
<li> видеосистема должна поддерживать не менее 256 цветов и разрешение 800x600;</li>
<li> 35 Мб свободного пространства на жестком диске; </li>
<li> операционная система Windows 98, ME, NT 4, 2000, ХР; </li>
<li> броузер Internet Explorer 4.5 или выше.</li>
Предыдущая версия HomeSite и HomeSite 5 вполне уживаются на одном компьютере. Тем не менее при желании вы можете выполнить обновление предыдущей версии. Поэтому не следует перед установкой HomeSite 5 удалять имеющуюся более раннюю версию. После того как инсталляция HomeSite 5 будет успешно завершена, при первом его запуске активизируется так называемый Мастер обновления конфигурации — Initial Configuration Wizard (ICW). На первом шаге пользователю предлагается выбрать, хочет ли он выполнить обновление предыдущей версии (Рисунок 1.2, вверху). Если такое желание есть, то с помощью последующих диалоговых окон пользователь может выбрать те настройки предыдущей версии, которые он хотел бы сохранить (Рисунок 1.2, внизу).<br><br>
<h1>Открытие документа во внешнем броузере</h1>Рисунок 1.24. Открытие документа во внешнем броузере<br><br><img src="image/otkrytie-dokumenta-vo-vneshnem-brouzere_1.gif" alt="Открытие документа во внешнем броузере"><br>
Замечание
<br>Замечание<br><br>Обратите внимание, что броузер, используемый в качестве внутреннего, может также использоваться и в качестве внешнего.
В раскрывающемся меню броузеры расположены в том же порядке, что и в окне External Browsers (см. Рисунок 1.23). Если требуется изменить порядок расположения пунктов меню, необходимо:<br>
<li> 1. Открыть окно External Browsers (Options -> Configure External Browsers...).</li>
<li> 2. В списке броузеров выбрать тот, который требуется переместить.</li>
<li> 3. С помощью кнопок со стрелками, расположенных слева от окна списка, изменить расположение пунктов списка.</li>
Замечание
<br>Замечание<br><br>Если для просмотра во внешнем броузере используется временная копия документа, следует соответствующим образом установить параметры броузера для работы в режиме offline.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index18.htm">Назад</a>
</td>
<td>
<h1>Панель инструментов внутреннего броузера</h1>Рисунок 1.18. Панель инструментов внутреннего броузера<br><br><img src="image/panel-instrumentov-vnutrennego-brouzera_1.gif" alt="Панель инструментов внутреннего броузера"><br>
Назначение кнопок следующее (они перечислены слева направо):<br>
<li> Previous (Предыдущая) — переход на предыдущую страницу; кнопка становится доступна, если текущая страница была загружена в броузер в результате перехода по ссылке с предыдущей страницы;</li>
<li> Next (Следующая) — переход на следующую страницу; кнопка становится доступна, если переход на текущую страницу был выполнен с помощью кнопки Previous,</li>
<li> Stop (Прервать) — прерывание загрузки страницы; как правило, эта кнопка дает эффект при загрузке страницы не с локального диска, а с удаленного сервера (о загрузке файлов с удаленного сервера в окно документа см. раздел <a href="Index20.htm">«Работа с файлами»</a>);</li>
<li> Refresh (Обновить) — перезагрузка страницы;</li>
<li> Browser Size (Размер броузера) — щелчок на кнопке открывает меню, с помощью которого может быть выбран один из трех вариантов масштабирования открытой страницы:</li>
<li> Fit to window (Согласовать с окном) — страница масштабируется в соотвестьвии с текущими размерами окна документа;</li>
<li> 640x480 — для страницы устанавливается фиксированный размер 640 на 480 пикселов (этот размер соответствует стандартному разрешению монитора, использующего видеоадаптер VGA);</li>
<li> 800x600 — для страницы устанавливается фиксированный размер 800 на 600 пикселов (этот размер соответствует стандартному разрешению монитора, использующего видеоадаптер SVGA);</li>
<li> Edit (Правка) — переключение в режим редактирования кода (то есть переход на вкладку Edit);</li>
<li> Open URL (Открыть URL) — загрузка страницы по заданному URL; щелчок на кнопке приводит к открытию дополнительного диалогового окна, в котором следует ввести URL;</li>
<li> Toggle rulers (Переключение линеек) -- включение по периметру окна документа линеек с разметкой, облегчающих пространственную компоновку элементов страницы (Рисунок 1.19); на горизонтальной и на вертикальной линейках красным цветом отмечены деления, соответствующие двум предопределенным размерам окна (640x480 и 800x600);</li>
<li> Open in external browser (Открыть во внешнем броузере) — загрузка текущей страницы во внешний броузер, указанный в списке первым.</li>
<br><br>
<h1>Поддержка пользователя</h1>Поддержка пользователя<br><br>
Диапазон средств поддержки пользователя, предоставляемых HomeSite, чрезвычайно широк. К ним относятся как достаточно привычные для всех Windows-приложений (стандартные элементы интерфейса, всплывающие подсказки, возможности по настройке визуальных параметров рабочей среды), так и специфические, характерные именно для HomeSite. В первую очередь следует отметить наличие развитой справочной системы, которая содержит не только сведения по самому редактору, но также полную спецификацию языка HTML 4.01, руководство по применению каскадных таблиц стилей, введение в технологию ColdFusion, а также рекомендации по проектированию и разработке Web-сайтов.<br>
Многие средства оперативной помощи пользователю включены непосредственно в состав редактора. К ним относятся, в частности, уже упоминавшиеся выше инструменты по работе с тегами и средства настройки параметров работы редактора.<br>
Кроме того, в состав HomeSite входит собственный встроенный язык программирования VTML (Visual Tools Markup Language — язык разметки для создания инструментов визуального проектирования), который по своим возможностям близок к языку программирования VBA (Visual Basic Applications). С помощью VTML пользователь может создавать собственные дополнительные инструменты для работы с кодом Web-страниц, в том числе собственные Мастера, другие индивидуальные элементы интерфейса.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index10.htm">Назад</a>
</td>
<td>
<h1>Поддержка технологии каскадных таблиц стилей (CSS)</h1>Поддержка технологии каскадных таблиц стилей (CSS)<br><br>
Одним из важнейших достоинств HomeSite является то, что в нем реализован весьма удобный и эффективный механизм работы с каскадными таблицами стилей. Этот механизм базируется на использовании самостоятельного приложения, которое называется TopStyle Lite (производитель — фирма Bradbure Software, LLC). Оно инсталлируется вместе с HomeSite при согласии пользователя. Вызов этого приложения выполняется непосредственно из текстового редактора и благодаря этому стилевое оформление страниц сайта может рассматриваться как составная часть единого процесса редактирования кода страниц.<br>
Поскольку в TopStyle Lite предусмотрена поддержка всех существующих на сегодняшний день спецификаций языка CSS и наиболее распространенных броузеров, созданное в HomeSite стилевое оформление узла с высокой вероятностью будет корректно воспроизведено броузерами потенциальных посетителей вашего сайта.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Поддержка технологий создания динамических и интерактивных страниц</h1>Поддержка технологий создания динамических и интерактивных страниц<br><br>
HomeSite обеспечивает поддержку языков и технологий, позволяющих создавать динамические и интерактивные страницы, которые могут генерироваться как на стороне клиента, так и с помощью сценариев, выполняемых на сервере.<br>
Поскольку предыдущие версии HomeSite были созданы компанией Allaire, то значительная часть входящих в его состав инструментов ориентирована на технологию ColdFusion. Эта технология предназначена для создания Web-приложений, выполняемых на стороне сервера, и базируется на применении одноименного языка разметки — ColdFusion Markup Language (CFML).<br>
Тем не менее в HomeSite реализована возможность применения и других современных технологий, начиная от включения в страницу форм, и заканчивая созданием Java-сервлетов.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index9.htm">Назад</a>
</td>
<td>
<h1>Представление используемой кодировки на этикетке документа</h1>Рисунок 1.44. Представление используемой кодировки на этикетке документа<br><br><br><img src="image/predstavlenie-ispolzuemoj-kodirovki-na-jetiketke_1.gif" alt="Представление используемой кодировки на этикетке документа"><br><br>
<br><br>
<h1>Представление на листе Projects информационных ресурсов сайта</h1>Рисунок 1.9. Представление на листе Projects информационных ресурсов сайта<br><br><br><img src="image/predstavlenie-na-liste-projects-informacionnyh_1.gif" alt="Представление на листе Projects информационных ресурсов сайта"><br>
<li> Tag Inspector (Инспектор тегов) — данный лист обеспечивает доступ к специальной утилите, входящей в состав HomeSite — так называемому инспектору тегов; он обеспечивает представление структуры документа в виде дерева тегов и быстрое редактирование атрибутов выбранного тега (Рисунок 1.11);</li>
<li> Snippets (Фрагменты кода) — обеспечивает быструю вставку фрагментов HTML-кода страницы (или других текстовых фрагментов), предназначенных для многократного повторного использования (Рисунок 1.12); чтобы вставить фрагмент в документ, достаточно дважды щелкнуть левой кнопкой мыши на значке этого фрагмента в окне ресурсов.</li>
<br><br>
<br>
<br>
<h1>Представление на листе Site view навигационной схемы узла Inspector</h1>Рисунок 1.10. Представление на листе Site view навигационной схемы узла Inspector<br><br><br><img src="image/predstavlenie-na-liste-site-view-navigacionnoj_1.gif" alt="Представление на листе Site view навигационной схемы узла Inspector"><br><br>
<br><br>
<h1>Представление списка открытых документов</h1>Рисунок 1.7. Представление списка открытых документов<br><br><br><img src="image/predstavlenie-spiska-otkrytyh-dokumentov_1.gif" alt="Представление списка открытых документов"><br>
<li> Previous Document (Предыдущий документ) — переход на предыдущий документ; кнопка недоступна, если активен первый документ;</li>
<li> Next Document (Следующий документ) — переход на следующий документ; кнопка недоступна, если активен последний документ;</li>
<li> Last Document (Последний документ) — переход на последний по порядку открытый документ; кнопка недоступна, если активен последний документ.</li>
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index13.htm">Назад</a>
</td>
<td>
<h1>Представление в окне ресурсов дерева каталогов пользователя</h1>Рисунок 1.8. Представление в окне ресурсов дерева каталогов пользователя<br><br><br><img src="image/predstavlenie-v-okne-resursov-dereva-katalogov_1.gif" alt="Представление в окне ресурсов дерева каталогов пользователя"><br><br>
<br><br>
<h1>Представление в окне ресурсов справочной информации</h1>Рисунок 1.13. Представление в окне ресурсов справочной информации<br><br><img src="image/predstavlenie-v-okne-resursov-spravochnoj_1.gif" alt="Представление в окне ресурсов справочной информации"><br>
<img src="image/predstavlenie-v-okne-resursov-spravochnoj_2.gif" alt="Представление в окне ресурсов справочной информации"><br>
Рисунок 1.14. Каскадное меню Resource Window
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index14.htm">Назад</a>
</td>
<td>
<h1>Представление в строке состояния информации о процессе закачки документа</h1>Рисунок 1.33. Представление в строке состояния информации о процессе закачки документа<br><br><img src="image/predstavlenie-v-stroke-sostojanija-informacii-o_1.gif" alt="Представление в строке состояния информации о процессе закачки документа"><br>
<img src="image/predstavlenie-v-stroke-sostojanija-informacii-o_2.gif" alt="Представление в строке состояния информации о процессе закачки документа"><br>
Рисунок 1.34. Диалоговое окно для установки параметров закачки файла из Сети
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index22.htm">Назад</a>
</td>
<td>
<h1>Предупреждение о возможном замедлении работы HomeSite при разрешении использования неANSI кодов</h1>Рисунок 1.43. Предупреждение о возможном замедлении работы HomeSite при разрешении использования не-ANSI кодов<br><br><img src="image/preduprezhdenie-o-vozmozhnom-zamedlenii-raboty_1.gif" alt="Предупреждение о возможном замедлении работы HomeSite при разрешении использования неANSI кодов"><br>
Разрешение использовать не-ANSI коды приводит также к ряду других последствий.<br>
В частности, пользователь может изменить текущую кодировку документа при его сохранении на диске. Поэтому в диалоговом окне Save as становится доступен раскрывающийся список Encoding (Кодировка), который содержит четыре варианта (Рисунок 1.45):<br>
<li> ANSI;</li>
<li> Unicode;</li>
<li> Unicode Big Endian;</li>
<li> UTF-8.</li>
<br><br>
<h1>Пример списка повторно используемых фрагментов кода</h1>Рисунок 1.12. Пример списка повторно используемых фрагментов кода<br><br><br><img src="image/primer-spiska-povtorno-ispolzuemyh-fragmentov-koda_1.gif" alt="Пример списка повторно используемых фрагментов кода"><br><br>
<br><br>
<h1>Пример страницы с именами символов</h1>Рисунок 1.48. Пример страницы с именами символов<br><br><img src="image/primer-stranicy-s-imenami-simvolov_1.gif" alt="Пример страницы с именами символов"><br>
Замечание
<br>Замечание<br><br>Не следует путать функцию Replace Extended Characters с функцией Extended Replace, которая входит также в меню Search, но предназначена для выполнения операции замены текстовых фрагментов (она будет описана в разделе <a href="../Glava%202/Index10.htm">Поиск и замена в файлах</a> проекта главы Разработка структуры сайта.
Функция Replace Extended Characters обеспечивает замену имен символов визуальным представлением этих символов, причем на основе системной кодовой таблицы.<br>
Чтобы выполнить требуемое преобразование, необходимо:<br>
<li> В меню Search (Поиск) выбрать команду Replace Extended Characters...</li>
<li> В открывшемся диалоговом окне (Рисунок 1.49) установить второй переключатель -- Replace character entities with extended characters (Заменить символы развернутыми символами) и щелкнуть на кнопке ОК.</li>
<img src="image/primer-stranicy-s-imenami-simvolov_2.gif" alt="Пример страницы с именами символов"><br>
Рисунок 1.49. Диалоговое окно функции Replace Extended Characters
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index24.htm">Назад</a>
</td>
<td>
<h1>Просмотр страниц с помощью броузера</h1>Просмотр страниц с помощью броузера<br><br>
HomeSite обеспечивает возможность просмотра редактируемой страницы во всех броузерах, установленных на компьютере пользователя. Один из них может быть назначен основным (точнее, внутренним — Internal). Для такого броузера переход в режим просмотра выполняется одним щелчком мыши. При необходимости для просмотра страниц может быть использован встроенный (собственный) броузер HomeSite. Кроме того, в HomeSite предусмотрена возможность совмещения текстового и визуального режимов (то есть когда окно документа разделяется на два подокна, в одном из которых отображается код страницы, а в другом — ее визуальное представление). Это позволяет непосредственно наблюдать результат вносимых в документ изменений.<br>
В некоторых случаях редактируемую страницу можно открыть и в окне редактора Dreamweaver. Это позволит не только получить представление о внешнем виде страницы, но и оперативно внести в нее необходимые изменения.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Работа с файлами</h1>Работа с файлами<br><br>
В зависимости от типа файла и типа выполняемой операции HomeSite предоставляет пользователю различные средства для работы с ним: на основе команд и/или на основе прямого манипулирования (drag-and-drop -- «перетащи и оставь»). Например, чтобы сохранить на диске редактируемый текстовый файл, следует выбрать в меню File команду Save, а чтобы создать ссылку на графический файл, можно перетащить мышью его значок из окна ресурсов в окно документа. Большая часть операций прямого манипулирования файлами выполняется с помощью листов File1 и File2 окна ресурсов.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index19.htm">Назад</a>
</td>
<td>
<h1>Работа с редактором кода</h1>Работа с редактором кода<br><br>
Непосредственное редактирование кода Web-страницы позволяет получать результат, оптимальный в смысле размера и качества публикации. Встроенный редактор кода HomeSite поддерживает все «стандартные» операции по работе с текстом (он позволяет вырезать, вставить, поместить в буфер обмена фрагменты кода страницы, сохранить их для повторного использования и т. д.); кроме того, предусмотрена возможность цветового выделения различных синтаксических конструкций языка и автоматическое форматирование кода страницы, что существенно повышает его читабельность. Пользователю предоставлены большие права по настройке параметров работы редактора кода. В частности, он может:<br>
<li> выбрать язык разметки, на котором будет выполняться разработка страницы;</li>
<li> выбрать собственную цветовую схему подсветки синтаксических конструкций;</li>
<li> разрешить или запретить автоматический ввод парных закрывающих тегов;</li>
<li> разрешить или запретить автоматический ввод атрибутов тегов.</li>
Редактор кода поддерживает работу практически со всеми основными языками Web-программирования. Такая возможность обусловлена тем, что в HomeSite хранятся определения тегов для каждого из этих языков.<br>
Замечание
<br>Замечание<br><br>Напомним, что подмножество тегов, разрешенных к использованию в конкретном документе, определяется специальной нотацией, которая называется описанием типа документа — Document Type Definition (DTD) и указывается в идентификаторе документа. DTD содержит, в частности, перечень названий (имен) всех тегов, отношения подчиненности между ними, тип содержания, для которых они применимы, а также перечень допустимых атрибутов.
Итак, редактор кода HomeSite 5 обеспечивает поддержку на уровне DTD для следующих языков:<br>
<li> HTML (Hypertext Markup Language);</li>
<li> XHTML (Extensible Hypertext Markup Language);</li>
<li> CFML (ColdFusion Markup Language);</li>
<li> VTML (Visual Tools Markup Language);</li>
<li> Java;</li>
<li> JSP (JavaServer Pages);</li>
<li> Jrun;</li>
<li> WML (Wireless Markup Language);</li>
<li> HDML (Handheld Device Markup Language);</li>
<li> SMIL (Synchronized Multimedia Integration Language);</li>
<li> IMFL (Interactive Fiction or Framework Markup Language);</li>
<li> RTML (Real-time Markup Language).</li>
На уровне инструментальных средств программирования, выбора схем цветной маркировки и проверки корректности кода HomeSite поддерживает работу со многими другими языками, помимо перечисленных выше, в том числе с ActiveServer Page (ASP), ActiveX, ActiveScript, Cascading Style Sheets (CSS), Dynamic HTML (DHTML), JavaScript, JScript, Perl, Personal Home Page (PHP), Structured Query Language (SQL), VBScript и Web Distributed Data Exchange (WDDX).<br>
Как следствие, в редакторе могут быть открыты файлы различных форматов, содержащие код Web-страницы на любом из перечисленных выше языков (подробнее о поддерживаемых HomeSite 5 типах файлов см. раздел <a href="Index20.htm">«Работа с файлами»</a> этой главы).
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Разделение окна документа на два подокна</h1>Рисунок 1.6. Разделение окна документа на два подокна<br><br><br><img src="image/razdelenie-okna-dokumenta-na-dva-podokna_1.gif" alt="Разделение окна документа на два подокна"><br><br>
<br><br>
<h1>Режим совмещения окна броузера с окном редактирования</h1>Рисунок 1.20. Режим совмещения окна броузера с окном редактирования<br><br><img src="image/rezhim-sovmeshhenija-okna-brouzera-s-oknom_1.gif" alt="Режим совмещения окна броузера с окном редактирования"><br>
Чтобы получить такое совмещенное представление документа, необходимо:<br>
<li> 1. Перейти на вкладку Edit окна документа.</li>
<li> 2. Щелкнуть на панели инструментов окна документа на кнопке Show Browser below Editor (Показать окно броузера ниже окна редактора).</li>
После разделения окна вы можете изменять размеры подокон, перемещая с помощью мыши линию разделения.<br>
При переходе в режим совмещенного просмотра сохраняется возможность редактирования кода страницы. Внесенные изменения обрабатываются броузером и отображаются в его окне. Благодаря этому вы можете почти сразу оценить последствия правки.<br>
Чтобы отменить режим совмещенного просмотра, достаточно повторно щелкнуть на кнопке Show Browser below Editor.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index17.htm">Назад</a>
</td>
<td>
<h1>Сообщение предупреждающее о несоответствии кодировки документа его атрибутам</h1>Рисунок 1.46. Сообщение, предупреждающее о несоответствии кодировки документа его атрибутам<br><br><br><img src="image/soobshhenie-preduprezhdajushhee-o-nesootvetstvii_1.gif" alt="Сообщение предупреждающее о несоответствии кодировки документа его атрибутам"><br><br>
<br><br>
<h1>Средства автоматизации работы с тегами</h1>Средства автоматизации работы с тегами<br><br>
В процессе редактирования кода страницы пользователь имеет возможность использовать совместно с редактором кода также дополнительные инструменты, учитывающие структуру документа на уровне тегов. Таких инструментов пять:<br>
<li>Tag Editor (Редактор тегов) — это набор диалоговых окон, каждое из которых предназначено для установки значений атрибутов конкретного тега;</li>
<li> Tag Tree (Дерево тегов) — панель, в которой иерархическая структура документа отображается в виде дерева тегов; основное предназначение дерева тегов — быстрая навигация по коду документа;</li>
<li> Tag Inspector (Инспектор тегов) — панель, в которой содержится полный список тегов и их атрибутов, соответствующий указанному в документе типу DTD; Tag Inspector позволяет быстро отредактировать значение конкретного атрибута выбранного тега;</li>
<li> CodeSweeper (Чистильщик кода) — специальная утилита, предназначенная для синтаксически зависимого форматирования кода документа; в составе HomeSite имеется шесть вариантов чистильщика, настроенных на работу с конкретным языком, и кроме того, «пользовательский» вариант, который соответствует варианту, используемому по умолчанию; параметры всех вариантов чистильщика могут настраиваться пользователем;</li>
<li> Tag Insight (Предсказатель тегов) — специальная утилита, реализованная в виде всплывающего списка, с помощью которого реализуется опережающий ввод наименований тегов и их атрибутов при ручном редактировании кода страницы.</li>
Все пять перечисленных инструментов являются синтаксически зависимыми в том смысле, что состав отображаемых в них тегов и атрибутов зависит от используемого в данный момент языка разметки.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Форматы файлов поддерживаемые HomeSite</h1>Таблица 1.1. Форматы файлов, поддерживаемые HomeSite<br><br>
<tr> <td> Форматы файлов</td> <td> Допустимые операции</td> </tr> <tr> <td> <p align="center">Текстовые файлы</td> </tr> <tr> <td> HTML- документы (.htm, .html)</td> <td> Просмотр и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> XHTML- документы (.xlitnil)</td> <td> Просмотр и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> XML-документы (.xnil)</td> <td> Просмотр и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> Шаблоны ColdFusion — ColdFusion Templates (.сfm, .cfml, .dbm)</td> <td> Просмотр и редактированис с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> Java-сервлеты — Java Seiner Page(jsp)</td> <td> Просмотр в окне документа и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> Файлы Active Server Page (.asp, .aspx, .asmx, .asax, .asa)</td> <td> Просмотр в окне редактора кода и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> Исходные файлы программ на языке PHP — PHP Files (.php, . php3)</td> <td> Просмотр в окне редактора кода и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> Исходные файлы пpoгpaмм на языке Perl (.pi)</td> <td> Просмотр в окне редактора кода и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> Исходные файлы программ на Visual Basic (,\b)</td> <td> Просмотр в окне редактора кода и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> Исходные файлы программ на VBScript (.vbs)</td> <td> Просмотр в окне редактора кода и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата; автоматическая генерация тега <SCRIPT> в редактируемом документе</td> </tr> <tr> <td> Исходные файлы программ на JavaScript (.js)</td> <td> Просмоф в окне редакюра кода и редактирование с учетом синтаксиса языка, запись на диске сохранением формата; автоматическая генерация тега <SCRIPT> в редактируемом документе</td> </tr> <tr> <td> Исходные файлы программ на SMIL (.smil)</td> <td> Просмотр в окне редактора кода и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> Исходные файлы программ на VTML (.vtm, .vtrnl, .wizml, .wml)</td> <td> Просмотр в окне редактора кода и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> Файлы таблиц стилей — Style Sheets (.ess)</td> <td> Просмотр в окне редактора кода и редактирование с учетом синтаксиса языка, запись на диске сохранением формата</td> </tr> <tr> <td> Файлы расширяемых таблиц стилей — Extensible Style Language (.xsi)</td> <td> Просмотр в окне редактора кода и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> Обычные текстовые файлы — Text Files (.txt)</td> <td> Просмочр в окне редактора кода и редактирование с учетом спи таксиса языки, запись па диск с сохранением формата</td> </tr> <tr> <td> Исходные файлы программ на языке SQL — SQL Files (.sq1)</td> <td> Просмотр в окне редактора кода и редактирование с учетом синтаксиса языка, запись на диск с сохранением формата</td> </tr> <tr> <td> Файлы определений типа документа — Document Type Definition (.did)</td> <td> Просмотр в окне редактора кода и редактирование с учетом синтаксиса языка; запись на диск с сохранением формата</td> </tr> <tr> <td> <p align="center">Графические файлы</td> </tr> <tr> <td> Форматы изображений, используемые и Web- документах (.gif .jpg, jpeg, .png. .bmp)</td> <td> Просмотр с помощью утилиты быстрою просмотра, а также в окне результатов и в окне редактора тегов; генерация тега <IМС> в редактируемом документе</td> </tr> <tr> <td> Форматы изображений, не используемые в Web-документах</td> <td> Открытие с помощью утилиты быстрого просмотра или ассоциированною приложения</td> </tr>
</table>
Помимо перечисленных в таблице 1.1 форматов, HomeSite способен открыть в окне редактора двоичный файл (например, .exe, .dll), предварительно предупредив пользователя о том, что данный формат не входит в число поддерживаемых HomeSite. При этом пользователю предлагается три варианта действий, каждому из которых соответствует своя кнопка в окне сообщения (Рисунок 1.25):<br><br>
<h1>Типы файлов поддерживаемые HomeSite</h1>Типы файлов, поддерживаемые HomeSite<br><br>
В предыдущем разделе было отмечено, что возможности HomeSite выходят за рамки «обычного» текстового редактора. Поскольку современную Web-пуб-ликацию сложно представить себе без графики (а также других мультимедийных элементов), без поддержки интерактивности и других современных Web-технологий, то в HomeSite предусмотрена возможность работы с данными, представленными в различных форматах. Перечень форматов файлов, которые способен узнавать HomeSite, приведен в табл. 1.1.<br><br>
<h1>Управление кодировкой текстовых файлов</h1>Управление кодировкой текстовых файлов<br><br>
Чтобы обеспечить возможность взаимодействия различных аппаратно-программных платформ, SGML требует, чтобы каждое приложение (включая HTML) явным образом указывало используемый в нем набор символов документа -document character set. Любой набор символов характеризуется двумя составляющими: репертуаром (Repertoire) и способом кодирования позиции (Code positions).<br>
Репертуар — это набор абстрактных символов, используемых для записи слов и выражений на соответствующем языке (например, в pcncpiyap могут входить латинский символ «А», кириллический символ «Ы», китайский иероглиф, означающий «воду», и т. д.).<br>
Способ кодирования позиции -- это набор целочисленных ссылок на символы, входящие в репертуар. Например, компьютерные системы опознают каждый символ по его числовому коду; так, в наборе символов ASCII коды 65. 66, и 67 ссылаются на символы "А", "В" и "С" соответственно.<br>
В настоящее время существует достаточно большое число различных способов кодирования текстовой информации. Некоторые из них возникли значительно раньше Интернета, были стандартизованы и продолжают использоваться в локальных вычислительных системах. Другие же были разработаны специально для обмена данными через Сеть.<br>
Наиболее известным представителем первой группы является код ASCII (American Standard Code for Information Interchange - - стандартный американский код для обмена информацией). В нем для кодирования каждого символа используется 7 двоичных разрядов. Набор символов ASCII обеспечивает представление всего лишь 127 различных символов (около 30 служебных, десятичные цифры, буквы английского алфавита и символы пунктуации). Модификацией кода ASCII является так называемый ANSI-код (код, разработанный Американским национальным институтом стандартов - - American National Standard Institute), в котором для кодирования каждого символа используется 8 двоичных разрядов, что обеспечивает представление уже 256 символов. Особенностью ANSI-кода является то, что первые 127 символов он «унаследовал» от ASCII (поскольку они стандартизованы), а вторая половина кода (точнее, половина соответствующей кодовой таблицы) используется в разных странах и разными разработчиками по-своему. Например, в СССР эта часть кодовой таблицы была использована для кодирования символов кириллицы.<br>
На сегодняшний день наиболее распространенным вариантом ANSI-кода (в том числе в Интернете) является так называемая «Латиница» (Latin-1) — код, регламентированный международным стандартом ISO-8859-1. Этот код поддерживает практически все западноевропейские языки. Кроме него, в Сети (по крайней мере, в русскоязычной ее части) также достаточно широко применяются следующие ANSI-коды:<br>
<li> ISO-8859-5 - - содержит символы кириллицы и применяется в вычислительных системах, работающих под управлением операционных систем Unix и Sun Solaris;</li>
<li> Windows-1251 - - содержит символы кириллицы и применяется в вычислительных системах, работающих под управлением операционных систем семейства Windows.</li>
Коды ASCII и ANSI зачастую оказываются недостаточны для глобальной информационной системы типа Интернета, поскольку ни один из них не обладает требуемой «многоязычностью». Поэтому HTML использует более совершенный набор символов, который называется «Универсальный набор символов» (Universal Character Set — UCS). Параметры этого, кода определены в стандарте ISO-10646. Он обеспечивает использование набора из нескольких тысяч символов, позволяющих представить символы, используемые практически во всех языках (в том числе и в профессиональных, например, в математике). Такое количество прсдставимых символов объясняется тем, что код UCS является двухбайтовым, то есть для кодирования символов в нем используются 16 разрядов.<br>
Набор символов, определенный в ISO-10646, эквивалентен используемому в другом двухбайтовом коде - - Unicode. Оба эти стандарта пополняются время от времени новыми символами, и относительно принятых изменений следует консультироваться на соответствующих информационных узлах Сети.<br>
Огромное количество символов, прсдставимых с помощью двухбайтовых кодов, не позволяет применять для этих кодов простейший алгоритм кодирования, основанный на методике «один байт- - один символ». В некоторых случаях с целью упрощения алгоритмов кодирования и сокращения затрат времени и памяти на храпение кодовой таблицы вместо полной версии кода UCS используются его подмножества. Один из таких «частичных» кодов - - код UTF-8 (UCS Transformation Format), в котором число байтов, используемых для кодирования символа, зависит от вида символа: для первых 256 символов используется 1 байт, а для «старших» символов - - 2 банта.<br>
Сам по себе набор символов документа не позволяет средствам просмотра пользователя (броузеру) правильно интерпретировать документы HTML, поскольку они обычно пересылаются по сети в виде последовательности байтов. Соответственно, для пересылки документа должно быть предварительно выполнено преобразование его символов (character encoding).<br>
Средства разработки (например, текстовые редакторы) могут использовать различные методы кодирования документов HTML (то есть способы преобразования символов в последовательность байтов), и выбор метода в значительной степени зависит от соглашений, используемых системным программным обеспечением компьютера, на котором создавался документ. Кроме того, не всегда для всех символов документа применяется один и тот же способ кодирования.<br>
В силу указанных причин броузер должен знать конкретный способ кодирования символов, который использовался для преобразования последовательности символов документа в поток байтов.<br>
Каким образом броузер может получить сведения об используемом в документе способе кодирования? Основных механизмов три:<br>
<li> указания от Wеb-сервсра, выполняющего пересылку документа (соответствующая информация содержится в параметре «charsct» поля «Content-Type» заголовка HTTP-протокола);</li>
<li> тег <МЕТА> с атрибутом HTTP-EQUIV, содержащийся в заголовке документа;</li>
<li> использование атрибута CHARSET в теге <А> для элементов документа, ссылающегося на внешний ресурс.</li>
Замечание
<br>Замечание<br><br>Если ни один из этих механизмов не используется, то броузер по умолчанию пытается интерпретировать кодировку документа как ISO-8859-1.
Кроме этих трех средств, большинство современных броузеров предоставляют пользователю возможность вручную выбрать метод декодирования документа. Ну а самые продвинутые из них пытаются определить кодировку документа с помощью различных эвристических алгоритмов. После столь продолжительного отступления вернемся к HomeSite.<br>
Как было сказано в предыдущем подразделе, по умолчанию HomeSite использует для кодирования создаваемых с его помощью документов кодировку ANSI, а именно код ISO-8859-1. Этот же код он использует и для декодирования открываемых документов. Тем не менее, в окне Settings на вкладке File Settings пользователь может разрешить использование не-ANSI кодов, установив соответствующий флажок (см. Рисунок 1.39). В этом случае при открытии любого документа HomeSite будет пытаться определить используемую в нем кодировку. Для больших документов или при открытии нескольких файлов это может привести к замедлению работы, о чем и предупреждает HomeSite (Рисунок 1.43).<br>
Дополнительно пользователь может указать, что используемый код должен отображаться на этикетке открытого документа (Рисунок 1.44).<br><br>
<h1>Установка параметров внутреннего броузера</h1>Установка параметров внутреннего броузера<br><br>
Прежде всего необходимо уточнить, что в качестве внутреннего броузера может быть использован далеко не любой из броузеров, имеющихся на вашем компьютере. Эта почетная роль предусмотрена для MS Internet Explorer (в дальнейшем просто IE) версии 3.01 или выше, либо для Netscape Communicator (в дальнейшем просто NC) версии 6 или выше (но только при условии, что дополнительно установлена компонента NGLayout/Gecko).<br>
Чтобы назначить внутренний броузер, необходимо:<br>
<li> 1. В меню Options (Параметры) главного окна HomeSite выбрать команду Settings... (Параметры настройки).</li>
<li> 2. В открывшемся диалоговом окне в списке категорий параметров, расположенном слева, выбрать категорию Browse (Просмотр).</li>
<li> 3. В группе элементов Internal Browser (Рисунок 1.17) установить один из трех переключателей:</li>
<li> Use Microsoft Internet Explorer (Использовать IE);</li>
<li> Use Netscape (Использовать NC)</li>
<li> Use built-in browser (Использовать встроенный броузер). </li>
<li>4. Если необходимо, чтобы параметры внутреннего броузера совпадали с параметрами внешнего броузера того же типа, то следует установить флажок Use external browser configuration for internal browser. </li>
<li> 5. Если требуется разрешить обработку страниц на стороне сервера, установить флажок Enable server mappings (подробнее о работе с удаленным сервером рассказано в шестой главе).</li>
<li>6. Щелкнуть на кнопке Apply (Применить), чтобы передать HomeSite установленные параметры; при этом окно установки параметров закроется.</li>
При выборе внутреннего броузера следует иметь в виду, что он используется также и для отображения справочной информации в окне документа на вкладке Help.<br><br>Рисунок 1.17. Установка параметров внутреннего броузера<br><br><img src="image/ustanovka-parametrov-vnutrennego-brouzera_1.gif" alt="Установка параметров внутреннего броузера"><br>
В любой момент времени пользователь может заменить внутренний броузер.<br>Дополнительные параметры использования внутреннего броузера могут быть установлены непосредственно в окне документа. Для этого служат кнопки панели инструментов, отображаемой в верхней части окна документа, на вкладках Browse и Help (Рисунок 1.18).<br><br>
<h1>Вид модифицированного списка внешних броузеров</h1>Рисунок 1.23. Вид модифицированного списка внешних броузеров<br><br><img src="image/vid-modificirovannogo-spiska-vneshnih-brouzerov_1.gif" alt="Вид модифицированного списка внешних броузеров"><br>
Дополнительно для каждого из внешних броузеров можно указать параметры его запуска, а именно - - что делать с активным документом перед его открытием во внешнем броузере (предварительно броузер должен быть выбран в списке). Возможны три варианта, каждому из которых соответствует свой переключатель в группе When Launching External Browser (При запуске внешнею броузера):<br>
<li> Prompt to save changes to the current document (Выдавать запрос на сохранение внесенных изменений) - - при запуске броузера на экран выводится диалоговое окно с просьбой подтвердить сохранение на диске внесенных в документ изменений;</li>
<li> Automatically save changes to the current document (Автоматически сохранять изменения) - - при запуске броузера внесенные в документ изменения сохраняются па диске автоматически;</li>
<li> Browse using a temporary copy (no need to save) (Просмотр временной копии, без сохранения) - - в броузер загружается временная копня активного документа (взятая из рабочей области HomeSite, а не из файла на диске).</li>
Чтобы открыть активный документ во внешнем броузере, необходимо:<br>
<li> 1. Щелкнуть на панели инструментов главного окна HomeSite на кнопке View External Browser List (Просмотр списка внешних броузеров).</li>
<li> 2. В открывшемся меню выбрать требуемый броузер (Рисунок 1.24).</li>
<br><br>
<h1>Визуальные признаки работы с различными файлами</h1>Рисунок 1.36. Визуальные признаки работы с различными файлами<br><br><img src="image/36.gif" alt="Визуальные признаки работы с различными файлами"><br>
Дополнительно с помощью имеющихся на вкладке раскрывающихся списков можно выбрать визуальный стиль этикеток окна ресурсов.<br>
В категорию Startup включены следующие параметры (Рисунок 1.37):<br>
<li> Restore last opened documents at startup (Восстанавливать при запуске последний открытый документ) -- при запуске HomeSite в окне документа будет открыт тот документ, с которым вы работали при завершении предыдущего сеанса;</li>
<li> Restore last opened project at startup (Восстанавливать при запуске последний открытый проект) - - при запуске HomeSite в окне ресурсов (на листе Project) будет открыт тот проект, с которым вы работали при завершении предыдущего сеанса;</li>
<li> Start with a blank document (override default template) (Начинать работу с пустого документа, вместо используемого по умолчанию шаблона) — при запуске HomeSite в окне документа будет открыт пустой бланк документа, невзирая на то, какой шаблон должен использоваться по умолчанию;</li>
<br><br>
<h1>Возможный результат анализа HomeSite содержимого двоичного файла</h1>Рисунок 1.26. Возможный результат анализа HomeSite содержимого двоичного файла<br><br><img src="image/vozmozhnyj-rezultat-analiza-homesite-soderzhimogo_1.gif" alt="Возможный результат анализа HomeSite содержимого двоичного файла"><br>
После этого двоичный файл будет успешно (скорее всего) открыт в окне документа в режиме Edit.<br>
Таким образом, в тех случаях, когда у вас возникнет необходимость заглянуть внутрь двоичного файла, вы вполне можете использовать для этого HomeSite, не прибегая к услугам других приложений (например, Norton Commander).
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index20.htm">Назад</a>
</td>
<td>
<h1>Выгрузка файлов проекта на удаленный сервер</h1>Выгрузка файлов проекта на удаленный сервер<br><br>
Выше уже было отмечено, что организация ресурсов сайта в виде проекта позволяет существенно упростить процесс его выгрузки на удаленный сервер. Вместе с тем, HomeSite поддерживает возможность частичного обновления удаленной копии — на уровне отдельных папок или даже отдельных файлов, сохраняя при этом неизменной структуру сайта.<br>
Пользователю предоставляются достаточно широкие возможности по настройке параметров выгрузки. В частности, он может указать сразу несколько удаленных серверов, на которые следует произвести выгрузку, установить уровень защищенности сайта, создать и использовать собственный сценарий выгрузки.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Знакомство с HomeSite</h1>Знакомство с HomeSite<br><br>
Одним из замечательных свойств HomeSite является то, что для начала работы с ним не требуется знакомство со всеми его возможностями. Чтобы создать с помощью HomeSite простейшую Web-страницу, достаточно иметь навыки по работе с каким-либо текстовым редактором типа Write (Блокнот). Однако, в отличие от Блокнота, HomeSite берет на себя почти 90% работ по вводу основных синтаксических конструкций HTML (или другого используемого языка разметки). Кроме того, чтобы увидеть, как созданная страница выглядит в окне броузера, достаточно одним щелчком мыши переключиться в режим просмотра. В процессе работы с HomeSite вы сможете постепенно наращивать уровень знаний, осваивая его возможности.<br>
Второе важное достоинство — это наличие прекрасно организованной системы поддержки пользователя, которая наряду с развернутым справочником включает также средства оперативной помощи, вплоть до опережающего ввода HTML-кода.<br>
Благодаря этим особенностям HomeSite можно рассматривать не только как мощный инструмент разработки Web-публикаций профессионального качества, но и как средство обучения технологии Web-дизайна.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td>
<h1>Разработка структуры сайта</h1>
<h1>Диалоговое окно для установки параметров раздела списка ресурсов</h1>Рисунок 2.6. Диалоговое окно для установки параметров раздела списка ресурсов<br><br><br><img src="image/dialogovoe-okno-dlja-ustanovki-parametrov-razdela_1.gif" alt="Диалоговое окно для установки параметров раздела списка ресурсов"><br><br>
<br><br>
<h1>Диалоговое окно для установки параметров расширенного поиска</h1>Рисунок 2.19. Диалоговое окно для установки параметров расширенного поиска<br><br><img src="image/dialogovoe-okno-dlja-ustanovki-parametrov_2.gif" alt="Диалоговое окно для установки параметров расширенного поиска"><br>
Искомый фрагмент текста, выбранный в открытом документе, при вызове функции Extended Find отображается в поле Find what (Что искать).<br>
Чтобы HomeSite запомнил фрагмент для повторного поиска, необходимо:<br>
<li>1. Щелкнуть кнопку со стрелкой, расположенную над полем Find what.</li>
<li> 2. В открывшемся меню (Рисунок 2.20) выбрать команду Save find text... (Сохранить искомый текст).</li>
<li> 3. В дополнительном диалоговом окне (Рисунок 2.21) подтвердить или скорректировать имя, под которым будет сохранен фрагмент; обратите внимание, что имя фрагмента должно начинаться и завершаться символами подчеркивания.</li>
<br><br>
<h1>Диалоговое окно для установки параметров расширенной замены</h1>Рисунок 2.24. Диалоговое окно для установки параметров расширенной замены<br><br><img src="image/dialogovoe-okno-dlja-ustanovki-parametrov_3.gif" alt="Диалоговое окно для установки параметров расширенной замены"><br>
Отличие состоит в том, что замена может привести к нежелательному результату, который потребуется отменить. Поэтому при использовании функции замены предусмотрена возможность резервного копирования редактируемых документов. Чтобы его разрешить, следует установить флажок Make backups (Выполнить резервное копирование). Если флажок установлен, то можно дополнительно указать каталог, в котором будут храниться резервные копии:<br>
<li> Backup Director (Каталог для резервных копии) — резервные копии создаются в папке, указанной в параметрах настройки HomeSite (см. раздел <a href="../Glava%201/Index24.htm">Настройка параметров работы с файлами</a> главе «Знакомство с HomeSite»).</li>
<li> Original Director (Исходный каталог) — резервные копии создаются в тех же папках, в которых расположены редактируемые документы.</li>
Замечание
<br>Замечание<br><br>Если замена производится только в текущем документе, то его резервная копия всегда создается в папке, указанной в параметрах настройки HomeSite. Поэтому при выборе диапазона Current Document флажок Make backups становится недоступен.
Итак, чтобы выполнить расширенную замену, необходимо:<br>
<li>1. В открытом документе выбрать фрагмент, который требуется найти в других файлах.</li>
<li> 2. В меню Search главного окна HomeSite выбрать команду Extended Replace...</li>
<li> 3. В открывшемся диалоговом окне (см. Рисунок 2.24) установить параметры и диапазон замены и щелкнуть на кнопке Replace (Заменить).</li>
Результаты выполнения команды Extended Replace выводятся в окне результатов. Состав отображаемой в нем информации аналогичен формату результатов расширенного поиска (см.<a href="Index11.htm#55"> Рисунок 2.23</a><a href="#12">).</a>
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index11.htm">Назад</a>
</td>
<td>
<h1>Диалоговое окно для установки свойств папки с «ручным» заполнением</h1>Рисунок 2.12. Диалоговое окно для установки свойств папки с «ручным» заполнением<br><br><img src="image/dialogovoe-okno-dlja-ustanovki-svojstv-papki-s_1.gif" alt="Диалоговое окно для установки свойств папки с «ручным» заполнением"><br>
Все последующие изменения содержимого реальной папки потребуется, тем не менее, отслеживать без участия HomeSite.<br>
Поясним процедуру формирования файловой структуры проекта на небольшом примере.<br>
Предположим, что в созданный ранее проект New_Pro (см. Рисунок 2.4) требуется добавить одну физическую папку для хранения HTML-файлов (назовем ее HTML), которая должна заполняться автоматически, и одну виртуальную для хранения файлов с Flash-фильмами (назовем ее Flash). В свою очередь, папка HTML будет содержать две вложенные папки НТМ_1 (физическую) и НТМ_2 (виртуальную).<br>
Чтобы HomeSite корректно выполнил все необходимые действия, предварительно следует создать на диске в корневой иапке проекта папку HTML, a в ней - - вложенную папку НТМ_1.<br>
После добавления в проект указанных выше папок его структура будет выглядеть так, как показано на Рисунок 2.13.<br><br>
<h1>Диалоговое окно для включения файлов в папку проекта</h1>Рисунок 2.14. Диалоговое окно для включения файлов в папку проекта<br><br><img src="image/dialogovoe-okno-dlja-vkljuchenija-fajlov-v-papku_1.gif" alt="Диалоговое окно для включения файлов в папку проекта"><br>
Замечание
<br>Замечание<br><br>Тип включаемых в папку файлов не обязательно должен совпадать с параметрами фильтра, установленными при создании папки. Если файлы требуемого типа не отображаются в окне Add Files to Folder, выберите нужный тип в списке Files of Type, либо установите вариант All Files.
Если вы хотите добавить в физическую папку с «ручным» заполнением файл, который реально находится на диске в другой папке, HomeSite выведет на экран соответствующее предупреждение и предложит выбрать одно из двух решений проблемы (Рисунок 2.15):<br>
<li> копировать файл в реальную папку, связанную с физической папкой (для этого требуется щелкнуть на кнопке Сору);</li>
<li> переместить файл в реальную папку, связанную с физической папкой (для этого требуется щелкнуть на кнопке Move).</li>
<br><br>
<h1>Диалоговое окно Settings категория Projects</h1>Рисунок 2.18. Диалоговое окно Settings, категория Projects<br><br><img src="image/dialogovoe-okno-settings-kategorija-projects_1.gif" alt="Диалоговое окно Settings категория Projects"><br>
Параметры развертывания проекта, которые входят в категорию Deployments, будут рассмотрены в разделе <a href="../Glava%207/Index7.htm">Выгрузка сайта на удаленный сервер </a>главы «Тестирование сайта и выгрузка на удаленный сервер».
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Формирование файловой структуры проекта</h1>Формирование файловой структуры проекта<br><br>
Итак, в качестве основы файловой структуры будущего сайта целесообразно использовать файловую структуру проекта, точнее, дерево каталогов (папок), в которые затем будут помещены HTML-файлы и другие компоненты публикации.<br>
В состав проекта могут входить папки двух типов: физические (Physical Pokier) и виртуальные (Virtual Folder).<br>
Каждая физическая папка привязана к конкретному каталогу на вашем компьютере. Файлы, которые существуют в этом каталоге, могут быть полностью или частично включены в физическую папку проекта. Каталог, с которым связана физическая папка, может быть расположен на локальном или на сетевом диске.<br>
Виртуальные папки используются в качестве виртуальных контейнеров для файлов, которые физически располагаются в разных каталогах (или даже на разных дисках). Другими словами, в виртуальную папку вы можете помещать любые файлы. Благодаря этому виртуальные папки обеспечивают эффективный способ группирования файлов, которые физически разнесены, но связаны логически как компоненты единой публикации.<br>
На работу с виртуальными папками налагаются два ограничения:<br>
<li> виртуальную папку нельзя включить как вложенную в состав физической папки (при этом физические папки могут входить в состав виртуальной);</li>
<li> для виртуальной папки неприменимы средства автоматического контроля версий.</li>
<br><br>
<h1>Функция Extended Find</h1>Функция Extended Find<br><br>
Итак, чтобы выполнить расширенный поиск некоторого фрагмента публикации, необходимо:<br>
<li> 1. В открытом документе выбрать фрагмент, который требуется найти в других файлах.</li>
<li> 2. В меню Search (Поиск) главного окна HomeSite выбрать команду Extended Find...</li>
<li> 3. В открывшемся диалоговом окне (Рисунок 2.19) установить параметры и диапазон поиска и щелкнуть на кнопке Find (Искать).</li>
<br><br>
<h1>Функция Extended Replace</h1>Функция Extended Replace<br><br>
Применение функции расширенной замены - - Extended Replace - - во многом аналогично применению рассмотренной выше функции поиска. В частности, вы можете задавать диапазон, в котором требуется выполнить замену, вести список замененных фрагментов и т. д. (Рисунок 2.24).<br><br>
<h1>Интерфейс вкладки Projects окна ресурсов</h1>Интерфейс вкладки Projects окна ресурсов<br><br>
Все основные действия по созданию проекта и последующей работе с ним выполняются с помощью элементов управления, имеющихся на вкладке Projects окна ресурсов. Кроме того, некоторые команды для работы с проектом содержатся в меню Project главного окна HomeSite.<br>
Некоторые из элементов управления, имеющихся на листе Projects окна ресурсов, показаны на Рисунок 2.1.<br>К ним, в частности, относятся:<br>
<li> раскрывающийся список Recent Projects (Последние проекты), который содержит перечень проектов, с которыми пользователь работал в последнее время (по умолчанию список ограничен 10 пунктами, однако этот параметр может быть изменен);</li>
<li> кнопка Open Project (Открыть проект), которая обеспечивает вызов окна просмотра дерева каталогов и файлов;</li>
<li> кнопка New Project (Создать проект), кото'рая обеспечивает вызов мастера создания нового проекта;</li>
<li> кнопка Deployment Wizard (Мастер развертывания), которая обеспечивает вызов мастера развертывания проекта на Web-сервере;</li>
<li> дерево проекта, которое отображает состав и иерархию элементов проекта;</li>
<li> окно файлов, которое содержит список файлов, либо имеющихся в текущей папке проекта, либо относящихся к выбранной категории ресурсов.</li>
<br><br>
<h1>Исходный состав списка ресурсов</h1>Рисунок 2.5. Исходный состав списка ресурсов<br><br><img src="image/ishodnyj-sostav-spiska-resursov_1.gif" alt="Исходный состав списка ресурсов"><br>
Еще до того, как вы сформируете файловую структуру проекта и начнете наполнять папки проекта файлами различных типов, целесообразно скорректировать список ресурсов таким образом, чтобы он в наибольшей степени соответствовал замыслам разработчика. Например, если вы не предполагаете использовать в публикации рисунки в формате PNG, то следует удалить этот тип файлов из числа графических ресурсов; если вы планируете включать в страницы Flash-фильмы, то их можно описать как отдельный вид ресурсов.<br>
Чтобы добавить в список ресурсов новый раздел, необходимо:<br>
<li>1. Щелкнуть правой кнопкой мыши на корневом элементе списка (на значке Resources) и в контекстном меню выбрать единственную имеющуюся там команду Add Resource... (Добавить ресурс).</li>
<li> 2. В открывшемся диалоговом окне (Рисунок 2.6) ввести параметры раздела ресурсов:</li>
<li> в поле Resource Name (Имя ресурса) ввести подходящее наименование раздела (например, раздел с Flash-фильмами может называться Flash);</li>
<li> в поле Resource Filter (Фильтр ресурса) ввести список расширений файлов, соответствующих данному типу ресурсов (разделив их точкой с запятой).</li>
<li>3. Щелкнуть на кнопке ОК.</li>
Новый раздел будет добавлен в список ресурсов, как показано на Рисунок 2.7 (список автоматически упорядочивается по алфавиту).<br><br>
<h1>Изменение параметров проекта</h1>Изменение параметров проекта<br><br>
При создании нового проекта HomeSite использует параметры, установленные по умолчанию. При необходимости пользователь может скорректировать значения этих параметров (либо до создания проекта, либо уже после того, как проект будет создан).<br>
Элементы управления параметрами проекта размещены на двух вкладках диалогового окна Settings (Рисунок 2.18):<br>
<li> Projects (Общие параметры проекта); </li>
<li> Deployments (Параметры развертывания).</li>
На вкладке Projects могут быть установлены следующие параметры HomeSite по работе с проектами:<br>
<li> максимальный размер списка проектов; устанавливается с помощью дискретного счетчика Maximum recent projects (Максимальное число свежих проектов);</li>
<li> используемый по умолчанию способ заполнения физических папок; выбирается с помощью пары переключателей Default project folder type (Тип папок, используемый по умолчанию):</li>
<li> Manual include - - папки с «ручным» заполнением;</li>
<li> Auto include - - папки с автозаполнснием;</li>
<li> дополнительно можно указать, следует ли при добавлении в проект новой панки с автозаполнснием включать в проект также вложенные в нее панки; если да, то необходимо установить флажок New auto-include folders include sub folders;</li>
<li> автоматическое ведение списка ресурсов проекта; если флажок Include project resources (Включать в ресурсы проекта) снят, то в дереве проекта отображается только корневой элемент списка ресурсов (значок Resources), без подразделов; если флажок установлен, то с помощью расположенного ниже списка можно описать состав разделов списка ресурсов, которые должны быть представлены в дереве при создании нового проекта.</li>
<br><br>
<h1>Элементы управления вкладки Projects окна ресурсов</h1>Рисунок 2.1. Элементы управления вкладки Projects окна ресурсов<br><br><img src="image/jelementy-upravlenija-vkladki-projects-okna_1.gif" alt="Элементы управления вкладки Projects окна ресурсов"><br>
Помимо перечисленных элементов, в распоряжении пользователя при работе с проектом имеется система контекстных меню. Состав команд каждого из них зависит от типа элемента проекта, к которому относится меню, а также от текущего состояния этого элемента. Ниже приведен перечень команд контекстных меню существующего проекта и краткие пояснения к ним.<br>
Чтобы открыть контекстное меню проекта, необходимо щелкнуть правой кнопкой мыши на значке проекта. Меню содержит следующие команды (Рисунок 2.2):<br><br>
<h1>Команды для сохранения и вызова фрагмента текста</h1>Рисунок 2.20. Команды для сохранения и вызова фрагмента текста<br><br><br><img src="image/komandy-dlja-sohranenija-i-vyzova-fragmenta-teksta_1.gif" alt="Команды для сохранения и вызова фрагмента текста"><br><br>
<br><br>
<h1>Контекстное меню проекта</h1>Рисунок 2.2. Контекстное меню проекта<br><br><img src="image/kontekstnoe-menju-proekta_1.gif" alt="Контекстное меню проекта"><br>
<li> Open All Documents in Project (Открыть вес документы проекта) -открытие всех файлов проекта в окне документа (для каждого документа создастся отдельный лист); при выполнении этой команды HomeSite пытается открыть все файлы, а не только текстовые, поэтому как только доходит очередь до нетекстового файла (например, графического), на экране появляется окно с просьбой уточнить дальнейшие действия;</li>
<li> Add Folder... (Добавить папку) — вызов диалогового окна, с помощью которого выполняется добавление папки в состав проекта; подробнее процедура создания папок проекта рассмотрена в разделе<a href="Index6.htm"> «Разработка файловой структуры сайта»;</a></li>
<li> Source Control (Управление версиями) — каскадное меню, которое обеспечивает подключение и использование системы управления версиями; чтобы интегрировать HomeSite с одной из таких систем, следует выбрать команду Choose Source Control Provider (Выбрать средство управления версиями);</li>
<li> Verify Links... (Проверить ссылки) — вызов диалогового окна, с помощью которого выполняется настройка параметров и инициализация процедуры проверки ссылок, имеющихся в составе проекта; подробнее этот вопрос рассмотрен в разделе <a href="../Glava%207/Index2.htm">Тестирование страниц</a> главe «Тестирование сайта и выгрузка на удаленный сервер»;</li>
<li> Rename Project (Переименовать проект) — вызов диалогового окна, с помощью которого может быть изменено имя проекта;</li>
<li> Save Project (Сохранить проект) — сохранение информации о проекте в виде файла <имя проекта>.арf; данный файл создастся в корневой папке проекта;</li>
<li> Close Project (Закрыть проект) — закрытие проекта; если в проект были внесены изменения, котопыс нс сохранены на лиске, на экран выводится окно с вопросом, следует ли их сохранить перед закрытием проекта;</li>
<li> Delete Project (Удаление проекта) — удаление проекта (после подтверждения пользователем своих намерений); удаление проекта заключается в удалении файла .apf;</li>
<li> Properties... (Свойства) — вызов диалогового окна, с помощью которого выполняется настройка параметров и инициализация процедуры развертывания сайта на Wеb-сервер; подробнее этот вопрос рассмотрен в разделе <a href="../Glava%207/Index7.htm">Выгрузка сайта на удаленный сервер </a>в главе «Тестирование сайта и выгрузка на удаленный сервер».</li>
Контекстные меню папок и списка ресурсов проекта, отображаемых в дереве проекта, будут рассмотрены в разделе<a href="Index6.htm"> «Разработка файловой структуры сайта» </a>данной главы. Назначение команд контекстных меню списка серверов и списка сценариев будут описаны в главе<a href="../Glava%206/Index0.htm"> Создание интерактивных страниц.</a>
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Контекстные меню файла а) для вкладки Files б) для вкладки Projects</h1>Рисунок 2.17. Контекстные меню файла:<br>а) для вкладки Files, б) для вкладки Projects<br><br><img src="image/17-a.gif" alt="Контекстные меню файла а) для вкладки Files б) для вкладки Projects"><br>
Если на доступных с вашего компьютера дисках отсутствует файл, который требуется включить в состав проекта, то он (файл) должен быть создан.<br>
Чтобы после создания нового Web-документа он был автоматически включен в состав проекта, необходимо:<br>
<li>1. Щелкнуть правой кнопкой мыши на значке той папки, в которую следует поместить создаваемый файл, и в контекстном меню выбрать команду Create a New Document... (Создать новый документ).</li>
<li> 2. В открывшемся диалоговом окне в зависимости от типа папки выполнить следующие действия: </li>
<li> для виртуальной папки — выбрать реальный каталог на диске и затем в поле File Name ввести имя файла (с расширением);</li>
<li> для физической папки (с автозаполнением или нет) - - ввести в поле File Name имя файла с расширением (возможность выбора каталога для физической папки отсутствует);</li>
<li> щелкнуть на кнопке Save.</li>
В результате описанной процедуры HomeSite выполнит следующие действия:<br>
<li> 1. создаст на диске текстовый файл (на основе используемого по умолча нию шаблона);</li>
<li> 2. добавит созданный файл в папку проекта и в соответствующий раздел списка ресурсов;</li>
<li> 3. откроет файл в окне документа в режиме редактирования.</li>
Следует отметить, что такой способ создания новых документов обладает це лым рядом преимуществ по сравнению с тем, когда документ сначала создается, и лишь потом вручную добавляется в одну из папок проекта. Вот основные из них:<br>
<li> вы можете выбрать наиболее подходящую стратегию наполнения папок проекта, и затем следовать ей, имея постоянно перед глазами картину текущего состояния проекта;</li>
<li> вы гарантированно не забудете включить созданный документ в состав проекта;</li>
<li> количество манипуляций, которые потребуется выполнить для включения документа в проект, будет минимальным.</li>
Любой файл, включенный в состав проекта, может быть выгружен на сервер в индивидуальном порядке. Подробнее процедура выгрузки описана в разделе <a href="../Glava%207/Index7.htm">Выгрузка сайта на удаленный сервер </a>главы «Тестирование сайта и выгрузка на удаленный сервер».
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Начальная структура проекта</h1>Рисунок 2.4. Начальная структура проекта<br><br><br><img src="image/nachalnaja-struktura-proekta_1.gif" alt="Начальная структура проекта"><br><br>
<br><br>
<h1>Общая схема разработки узла с помощью HomeSite</h1>Общая схема разработки узла с помощью HomeSite<br><br>
Последовательность этапов разработки Web-сайта с помощью HomeSite может быть достаточно произвольной, однако лучше все-таки придерживаться технологии, которой стараются следовать профессиональные Web-дизайнеры и которая в большинстве случаев гарантирует успешное завершение проекта. Основными шагами на пути воплощения творческого замысла в реальный продукт являются следующие:<br>
<li>1. Определение общей концепции и предназначения публикации. Выбор общей концепции и предназначения публикации (будет ли это информационный, развлекательный сайт или, например, электронный магазин) влияет на архитектуру, информационное наполнение и стилевое оформление сайта. Поэтому процесс разработки должен начинаться с попытки классифицировать будущий проект, то есть определить ту роль, которую он должен будет играть в информационном наполнении Интернета.</li>
<li> 2. Определение категорий потенциальных посетителей сайта. Для посещаемости сайта важны как его информационное наполнение, так и выбранная автором форма подачи материала. Учитывая многообразие посетителей Интернета, трудно рассчитывать на то, что удастся подобрать выразительные средства, которые удовлетворили бы всех посетителей. Именно поэтому вторым шагом в проектировании публикации является определение особенностей той аудитории, на которую рассчитана публикация.</li>
<li> 3. Выбор общего стиля публикации. Стиль публикации определяется не только визуальным оформлением страниц сайта, но также стилем изложения его содержания (как пишут некоторые авторы — «контента», заменяя хорошее русское слово транслитерацией английского слова content) и средствами взаимодействия посетителя с этим содержанием. Все вместе это формирует пользовательский интерфейс сайта, который должен обладать такими свойствами, как естественность, дружественность, согласованность и т. д.</li>
<li> 4. Разработка структуры публикации (с учетом внешних и внутренних ссылок, а также возможной последующей модификации сайта). При разработке структуры публикации целесообразно использовать подход, давно известный и хорошо зарекомендовавший себя в среде разработчиков программных систем. Называется он «проектирование сверху вниз». Применительно к Web-публикации его суть заключается в том, что сначала определяется состав публикации на уровне крупных разделов, содержание которых постепенно детализируется и уточняется. В такой же последовательности устанавливаются связи между разделами и между отдельными страницами публикации.</li>
<li> 5. Разработка главной страницы. Главная страница — это в некотором смысле «лицо» сайта. И хотя народная мудрость и утверждает, что «с лица не воду пить», но все-таки при встрече с незнакомым человеком мы примерно 90% информации о нем «считываем» с его лица. В связи с этим при проектировании главной страницы в наибольшей степени должны учитываться все те требования, которые предъявляются к сайту в целом. Это относится и к структурной организации информации, и к выбору визуальных атрибутов, и к стилю изложения выносимых на эту страницу материалов.</li>
<li>6. Разработка остальных страниц публикации. Проектирование структуры Web-страниц существенно отличается от проектирования печатных документов. Разрабатывая формат страниц узла, помните, что вы не можете в полной мере управлять их визуальными атрибутами, поскольку читатель сам устанавливает размер видимой части окна броузера, параметры шрифтов и т. д.</li>
<li> 7. Размещение публикации в Сети и регистрация в поисковых системах.</li>
<li> 8. Анализ рейтинга и принятие решения о внесении изменений в проект. Многие современные HTML-редакторы (в том числе HomeSite) располагают средствами тестирования сайта на предмет длительности загрузки отдельных страниц и на наличие некорректных ссылок. Однако возможность оценить реальное качество вашего произведения появляется только после размещения сайта на Web-сервере. Причем для накопления достаточной статистики может понадобиться (в зависимости от темы публикации, успешности регистрации в поисковых системах и других, иногда совершенно случайных, факторов) от пары недель до нескольких месяцев.</li>
<li> 9. Пересмотр ранее принятых решений, относящихся к одному (или ко всем) из пунктов с первого по седьмой. Регулярное обновление представленной информации является важнейшим условием сохранения интереса посетителей к вашей публикации. Еще одна причина: в процессе разработки и реализации любого нового проекта Web-дизайнер вольно или невольно повышает свой профессиональный уровень, а вместе с этим могут изменяться и его художественные пристрастия. Ну и, наконец, если работа носила заказной характер, то взгляды заказчика на проект также могли претерпеть существенные изменения.</li>
По итогам выполнения трех первых этапов может быть определена структура узла, которая имеет два представления:<br>
<li> в виде файловой структуры;</li>
<li> в виде навигационной схемы.</li>
Следует заметить, что обе формы представления структуры узла удобнее разрабатывать параллельно, поочередно уточняя и корректируя их. Но начинать все-таки лучше с определения файловой структуры проекта. Еще одно важное правило касается того, насколько большим должен быть каждый раздел (страница) сайта. Ведь каждая страница -- это отдельный HTML-файл, и от се размера зависит размер соответствующего файла. Определяющим здесь является условие, чтобы каждая страница была завершенной с логической точки зрения. Так, не стоит делить изложение некоторой идеи на несколько страниц только для того, чтобы сократить размер каждой из них. С другой стороны, нецелесообразно объединять на одной странице не связанные между собой темы только для того, чтобы увеличить размер документа и уменьшить число файлов проекта.<br>
В общем случае при выборе размера документа следует учитывать следующие факторы:<br>
<li> длинный документ требует больше времени для пересылки и отображения броузером;</li>
<li> читателю сложнее работать с большим по объему документом: он не может быстро переходить к нужной его части и возвращаться назад, используя полосу прокрутки, в то время как переход по ссылкам может оказаться значительно эффективнее;</li>
<li> чем длиннее документ, тем менее заметны в нем слова, заданные в запросе, и, следовательно, ваша страница будет ниже в результатах поиска при прочих равных условиях; более того, роботы некоторых поисковых систем просто отказываются обрабатывать слишком длинные документы, например максимальный размер документа для роботов Rambler составляет 200 Кбайт (и вообще считается дурным тоном делать документы такого объема без особой на то необходимости). </li>
Приведенное выше описание общей технологии разработки Web-публикаций должно напомнить читателю о том, что качество публикации не зависит непосредственно от времени, проведенного за компьютером. Совсем наоборот: непосредственной реализации проекта должна предшествовать достаточно длительная и кропотливая «ручная» работа, связанная с выбором направления и стиля публикации, подбором материала, изучением особенностей той категории посетителей, кому она предназначена. К этим вопросам придется неоднократно возвращаться и в процессе выполнения последующих этапов, и даже после того, как созданный сайт будет размещен на Web-сервере. Как бы ни был хорош инструмент, с помощью которого вы реализовывали проект, сам по себе он на эти вопросы ответить не в состоянии.<br>
Основное предназначение такого инструмента — снизить долю рутинных операции, выполняемых вручную, и предоставить разработчику публикации удобный доступ к наиболее эффективным технологиям создания Web-публикаций. С этой точки зрения общая схема разработки узла с помощью HomeSite выглядит следующим образом:<br>
<li> 1. Создание проекта и установка его параметров.</li>
<li>2. Разработка файловой структуры проекта.</li>
<li> 3. Разработка главной страницы публикации.</li>
<li> 4. Создание шаблонов для публикации в целом и/или для разделов публикации.</li>
<li>5. Разработка остальных страниц публикации; разработка каждой страницы должна завершаться тестированием страницы, в том числе по времени загрузки.</li>
<li> 6. Проверка соответствия полученной навигационной схемы узла ее «бумажному» прототипу.</li>
<li>7. Выгрузка сайта на Web-сервер.</li>
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Поиск и замена в файлах проекта</h1>Поиск и замена в файлах проекта<br><br>
В первой главе, посвященной знакомству с основными возможностями HomeSite, было отмечено, что это не только текстовый редактор. Это инструмент подготовки Web-публикаций. Именно поэтому в его составе имеются функции, обеспечивающие работу с несколькими документами (страницами публикации) одновременно. К таким функциям относятся, в частности, Extended Find (Расширенный поиск) и Extended Replace (Расширенная замена). В отличие от стандартных функций поиска и замены, присутствующих практически во всех текстовых редакторах, функции Extended Find и Extended Replace позволяют обработать за одно обращение любое подмножество файлов вашего компьютера, а также файлы, доступные через сетевое соединение. Обе эти функции имеют достаточно большое количество настраиваемых параметров, что позволяет гибко изменять критерии и диапазон поиска.<br>
Замечание
<br>Замечание<br><br>Не следует путать функцию Extended Replace с функцией Replace Extended Characters, которая входит также в меню Search, но предназначена для работы с кодами символов (она была описана в разделе <a href="../Glava%201/Index25.htm">Управление кодировкой текстовых файлов</a> главе «Знакомство с HomeSite»).
При разработке и сопровождении сайта возможность поиска и замены фрагментов текста во всех (или указанных пользователем) файлах проекта обеспечивает сокращение времени на:<br>
<li> устранение однотипных ошибок;</li>
<li> поиск и редактирование произвольных текстовых фрагментов;</li>
<li> поиск требуемых фрагментов кода страниц;</li>
<li> редактирование общих элементов страниц публикации (например, кнопок или меню).</li>
Следует отметить, что обе рассматриваемые функции предоставляют весьма удобные средства по вводу искомого фрагмента:<br>
<li> фрагмент может быть введен с клавиатуры или встаачен в соответствующее поле через буфер обмена;</li>
<li> если в одном из открытых документов имеется интересующий фрагмент, то его достаточно выделить (выбрать) в документе, после чего он будет автоматически помещен в окно поиска;</li>
<li> искомый фрагмент может быть сохранен для последующего повторного использования и затем выбран из списка фрагментов.</li>
Практика показывает, что наиболее часто используется второй из указанных вариантов, поэтому при описании последовательности действий за основу взят именно он.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index9.htm">Назад</a>
</td>
<td>
<h1>Представление файлов проекта на вкладке Projects</h1>Рисунок 2.16. Представление файлов проекта на вкладке Projects<br><br><img src="image/predstavlenie-fajlov-proekta-na-vkladke-projects_1.gif" alt="Представление файлов проекта на вкладке Projects"><br>
Кроме того, добавленные в проект файлы автоматически становятся частью его ресурсов и помещаются HomeSite в тот раздел списка ресурсов, который соответствует типу включенных файлов (разумеется, если таковой был создан заранее). Чтобы убедиться в этом, требуется развернуть список Resources и щелкнуть на значке соответствующего раздела. В примере, приведенном на Рисунок 2.16, справа, таким разделом является Flash.<br>
Обратите внимание, что состав информации, отображаемой в списке файлов, в обоих случаях разный. Тем не менее информация о ресурсах формируется на основе информации о содержимом папок проекта. То есть любое изменение в папках (добавление или удаление файлов) приводит к автоматическому изменению списка ресурсов. Именно поэтому в контекстном меню файла в списке ресурсов недоступна команда Remove from this folder (Удалить из этой папки), которая позволяет удалить файл из папки проекта.<br>
Вместе с тем, работа с файлами проекта (как на уровне папок проекта, так и на уровне ресурсов) существенно отличается от работы с файлами, отображаемыми на вкладках Files 1 и Files 2 (они были рассмотрены в разделе <a href="../Glava%201/Index20.htm">Работа с файлами</a> главе Знакомство с HomeSite).<br>
Дело в том, что на этих вкладках представлены сведения о реальных файлах, а в дереве проекта - - сведения о файлах как элементах этого проекта. Благодаря такому механизму один и тот же реальный файл может использоваться одновременно в нескольких проектах. По этой причине в контекстных меню файлов проекта отсутствуют команды, изменяющие состояние и положение существующих реальных файлов (такие как «переместить», «переименовать», «удалить»). В остальном состав команд контекстного меню файлов проекта и контекстного меню файлов на вкладках Files 1 и Files 2 идентичен.<br>
Для наглядности сравнения контекстные меню файла, используемые на вкладке Files и на вкладке Projects, показаны на Рисунок 2.17.<br>
а)<br><br>
<h1>Работа с файлами проекта</h1>Работа с файлами проекта<br><br>
В состав проекта (и, соответственно, в состав сайта) могут входить не только файлы, разложенные по папкам, но и «беспризорные» файлы, которые, например, лежат непосредственно в корневой папке сайта. Такими файлами являются, как правило, файл главной (начальной) страницы публикации и файлы с описанием таблиц стилей (.ess).<br>
После того, как будет сформирована структура проекта на уровне папок, вы можете добавить (или удалить) в любую из них требуемые файлы. В этом отношении работа с папками различных типов отличается незначительно, тем не менее следует иметь в виду:<br>
<li> вы не можете включить самостоятельно новый файл в состав физической папки с автозаполнснисм: если новый файл будет создан или добавлен в связанную с ней реальную папку, HomeSite тут же автоматически включит его в состав папки проекта; ни один файл из такой папки нс может быть также удален, пока он имеется в реальной папке;</li>
<li> перемещение файла из одной виртуальной папки в другую не требует его физического перемещения на диске;</li>
<li> перемещение файла между физическими папками или включение нового файла в физическую папку требует его реального перемещения или копирования в новую папку.</li>
Чтобы добавить новый файл в виртуальную папку или в физическую папку ручным заполнением, необходимо:<br>
<li> 1. Щелкнуть на значке папки правой кнопкой мыши и в открывшемся<br>контекстном меню выбрать команду Add Files to Folder... (Добавить в папку файлы).</li>
<li> 2. В открывшемся диалоговом окне выбрать один или несколько файлов,<br>подлежащих включению в папку (чтобы выбрать в списке несколько файлов, следует пользоваться клавишами <Ctrl> или <Shift>), и щелкнуть на кнопке Add (Рисунок 2.14).</li>
<br><br>
<h1>Разработка файловой структуры сайта</h1>Разработка файловой структуры сайта<br><br>
Хорошо продуманная с самого начала файловая структура проекта поможет вам существенно сэкономить время и силы позже, на этапе размещения сайта на Wcb-серверс, и в еще большей степени -- на этапе его сопровождения.<br>
Разумеется, невозможно предложить некую универсальную структуру, которая подошла бы для любого узла, но существуют проверенные практикой правила, придерживаясь которых можно получить неплохие результаты:<br>
<li>размещайте взаимосвязанные страницы в одной папке; например, в одну папку могут входить каталог предлагаемых товаров и сведения о производителях;</li>
<li> для упорядочения информации внутри больших разделов используйте вложенные папки;</li>
<li> размещайте файлы разных типов в отдельных папках; например, графические файлы — в папке Images или Pictures, звуковые файлы — в папке Sound и т. п.; если таких файлов много, распределите их по вложенным папкам, имена которых должны соответствовать наименованиям страниц, где эти файлы используются;</li>
<li> используйте одну и ту же структуру для проекта, размещенного локально, и для его копии, развернутой на удаленном сервере.</li>
На Рисунок 2.8 показан наиболее распространенный вариант файловой структуры небольшого узла.<br>
<img src="image/razrabotka-fajlovoj-struktury-sajta_1.gif" alt="Разработка файловой структуры сайта"><br>
Рисунок 2.8. Пример файловой структуры узла
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Разработка структуры сайта</h1> Разработка структуры сайта<br><br>
Любую Web-публикацию можно рассматривать с двух точек зрения.<br>
С одной стороны, она представляет собой некий «информационный ресурс», то есть предоставляет некоторый набор сведений или услуг, которые были бы полезны или интересны для определенной категории посетителей WWW.<br>
С другой стороны, Web-сайт — это результат применения тех или иных технологий, поддерживаемых на сегодняшний день аппаратными и программными средствами Интернета. Причем количество этих самых технологий увеличивается буквально с каждым днем. Каждая из них, как говорится, хороша по-своему. Зачастую это порождает у некоторых (особенно у начинающих) Web-дизайнеров желание насытить свои публикации всем, до чего «руки дотянутся»: здесь и звуковое сопровождение, и Flash-фильмы и т. д.<br>
Однако практика показывает, что любая технология хороша ровно настолько, насколько она подходит для решения конкретной задачи. Некоторые страницы нисколько не теряют от того, что на них представлен «голый» текст, иногда даже без графических иллюстраций.<br>
Поэтому Wеb-дизайнеру, который действительно хочет создать нечто стоящее, приходится решать две весьма сложные взаимосвязанные проблемы: какой именно материал следует включить в публикацию, и какие технологии в наибольшей степени подходят для его подачи посетителям сайта.<br>
Заметим, что отправной точкой должно быть именно содержание публикуемых материалов.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td>
<h1>З Окно мастера создания проекта</h1>Рисунок 2.З. Окно мастера создания проекта<br><br><img src="image/risunok-2-z-okno-mastera-sozdanija-proekta_1.gif" alt="З Окно мастера создания проекта"><br>
После завершения описанной процедуры в окне ресурсов будет представлена начальная структура проекта (Рисунок 2.4).<br>
Список ресурсов (Resources) представляет собой список файлов проекта, упорядоченный по типам (без учета распределения файлов по папкам); в исходном состоянии список содержит два раздела: HTML-документы (HTML Documents) и графические файлы (image files), как показано на Рисунок 2.5.<br><br>
<h1>Сообщение о том что добавляемый файл не принадлежит физической папке</h1>Рисунок 2.15. Сообщение о том, что добавляемый файл не принадлежит физической папке<br><br><img src="image/soobshhenie-o-tom-chto-dobavljaemyj-fajl-ne_1.gif" alt="Сообщение о том что добавляемый файл не принадлежит физической папке"><br>
После включения файлов в папку они сразу отображаются в нижней части окна ресурсов (в списке файлов), как показано на Рисунок 2.16, слева.<br><br>
<h1>Создание и установка параметров проекта</h1>Создание и установка параметров проекта<br><br>
Под проектом (Project) в HomeSite понимается набор файлов, которые используются при создании сайта. Эти файлы могут быть физически расположены в различных папках (и даже на разных дисках) и иметь различный тип и формат. Так, в состав проекта могут входить HTML-страницы, графические файлы, файлы каскадных таблиц стилей, файлы сценариев и т. д. Вся информация о проекте хранится в специальном файле, который имеет расширение .apf и помещается в корневую папку проекта.<br>
Разработка сайта с помощью HomeSite не требует обязательного создания проекта, однако применение этого механизма обеспечивает существенное повышение эффективности работы. В частности, использование проекта обеспечивает:<br>
<li> централизованное хранение информации о файлах сайта, что, в свою очередь, дает два важных преимущества: автоматический контроль<br>целостности проекта и удобный доступ к файлам проекта, независимо от их физического размещения;</li>
<li> возможность корректного развертывания проекта на Web-сeрвeре, гарантирующего, что ни один из файлов проекта не будет пропущен;</li>
<li> эффективную процедуру сопровождения проекта после выгрузки на сервер: вы сможете с минимальными затратами обновлять отдельные файлы или целые папки проекта, не опасаясь нарушить исходную структуру сайта;</li>
<li> возможность выполнения операций, связанных с сопровождением сайта (типа поиска и замены, проверки ссылок) на всем проекте, устраняя необходимость их повторения для каждого файла в отдельности.</li>
Дополнительное преимущество в использовании проекта состоит в том, что в HomeSite предусмотрена возможность интеграции с системами управления версиями (Source System Control - - SSC), установленными на компьютере пользователя. После установления связи с одной из таких систем (например, с Microsoft Visual SourceSafe), HomeSite обеспечивает выполнение всех необходимых операций по контролю без непосредственного запуска SSC.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Создание нового проекта</h1>Создание нового проекта<br><br>
Хотя создание проекта в HomeSite не требует физического объединения файлов в одной папке, тем не менее с целью облегчения публикации сайта и повышения эффективности его последующего сопровождения рекомендуется хранить все файлы проекта в одной корневой папке. Поэтому формирование проекта следует начинать с создания корневой папки на жестком диске вашего компьютера (для удобства дальнейшего изложения назовем ее New_Pro и будем считать, что она находится на диске С:/).<br>
Вес последующие действия по созданию проекта выполняются с помощью элементов управления, имеющихся на вкладке Project окна ресурсов (в исходном состоянии она пуста).<br>
Итак, для создания нового проекта необходимо:<br>
<li> 1. В правом верхнем углу окна ресурсов щелкнуть на кнопке New Project<br>(альтернативный вариант — выбрать в меню Project главного окна команду New Project).</li>
<li> 2. В открывшемся диалоговом окне New Project (Рисунок 2.3) ввести следующие данные: </li>
<li>Project Name — имя проекта; будем считать, что оно совпадает с названием корневой папки проекта — New_Pro', </li>
<li>Location of project file — расположение файла проекта (в эту папку будет помещен и файл проекта, для рассматриваемого примера — это файл New_Pro.apj)\ адрес можно ввести либо вручную, либо воспользовавшись находящейся справа кнопкой; разместим наш проект в корневой папке проекта; если установлен флажок Add all subfolders, and include files of the following types (Добавить все вложенные папки и включить файлы следующих типов), то в состав проекта будут автоматически включены все вложенные папки, а также файлы, имеющие тип из приведенного ниже раскрывающегося списка File Types (Типы файлов); папка New_Pro пока пуста, поэтому флажок сработает «вхолостую»;</li>
<li> File Types — список типов файлов, которые могут быть автоматически включены в состав проекта при его создании; список содержит два пункта:</li>
<li> All Files (Все файлы);</li>
<li> перечень типов файлов, выбранных пользователем; этот перечень устанавливает все типы файлов, которые могут быть использованы в качестве ресурсов узла;</li>
<li> при выборе второго пункта он становится доступен для редактирования, и вы сможете удалить из него лишние типы или добавить необходимые; типы файлов в перечне должны быть разделены точкой с запятой.</li>
<li> 3. Щелкнуть на кнопке ОК.</li>
<br><br>
<h1>Список фрагментов по которым выполнен поиск</h1>Рисунок 2.22. Список фрагментов, по которым выполнен поиск<br><br><img src="image/spisok-fragmentov-po-kotorym-vypolnen-poisk_1.gif" alt="Список фрагментов по которым выполнен поиск"><br>
<li> Current document (Текущий документ) - - поиск выполняется в документе, который был активен на момент вызова функции поиска; этот документ не обязательно должен быть сохранен на диске;</li>
<li> All open documents (Все открытые документы) — поиск выполняется во всех файлах, открытых в окне документа на момент вызова функции поиска; среди них могут быть также безымянные и не сохраненные документы;</li>
<li> In folder (В папке) — поиск выполняется в папке, указанной в связанном с переключателем поле; дополнительно с помощью флажка Include subfolders (Включая вложенные папки) можно указать, следует ли выполнять поиск в подкаталогах;</li>
<li>In project (В проекте) -- поиск выполняется в пределах проекта, указанного в связанном с переключателем поле (точнее, в раскрывающемся списке); список проектов содержит перечень всех последних (по умолчанию --не более 10) проектов, с которыми вы работали.</li>
Перечень типов файлов, в которых должен выполняться поиск, может быть конкретизирован двумя способами:<br>
<li> с помощью фильтра File Types (Типы файлов);</li>
<li> посредством установки флажка Exclude Binary Files (За исключением двоичных файлов), входящего в группу флажков, расположенную в правой части окна.</li>
Остальные флажки позволяют указать некоторые дополнительные параметры поиска:<br>
<li> Match case (Соответствие регистра) — поиск выполняется с учетом регистра символов;</li>
<li> Regular expression (Регулярные выражения) — при поиске разрешен синтаксический анализ регулярных выражений;<br><br>Замечание<br>Регулярные выражения — это специальные конструкции, которые обеспечивают представление последовательностей символов в формальном виде. Например, регулярное выражение А-В означает «любая строка, соответствующая А, но не соответствующая В».<br><br></li>
<li> Skip tags while searching (Пропускать теги при поиске) — при поиске анализируется только собственно текстовое содержание публикации, без учета названий тегов и их атрибутов (то есть при поиске пропускаются последовательности символов, заключенные в угловые скобки); данный флажок недоступен, если разрешено использование регулярных выражений;</li>
<li> Display Line info (Выводить информацию о строках) — при выводе результатов поиска указываются номера строк, в которых обнаружен искомый текст, а также номер позиции внутри строки; кроме того, в окне результатов в этом случае полностью выводится строка, содержащая искомый фрагмент; поскольку подсчет номеров строк замедляет поиск, то при попытке пользователя установить этот флажок HomeSite выводит на экран соответствующее предупреждение.</li>
Результаты поиска выводятся в окне результатов (Results Window). Если при инициализации поиска окно закрыто, то по окончании поиска оно будет отрыто автоматически. По умолчанию окно результатов содержит следующую информацию (Рисунок 2.23):<br>
<li> File (Файл) — путь доступа к файлу, в котором найден искомый фрагмент; в этом же столбце (ниже последнего найденного файла) отображается общее число совпадений (Total Matches);</li>
<li> Title (Заголовок) — заголовок документа, в котором найден фрагмент;</li>
<li> Match (Соответствие) — найденный фрагмент;</li>
<li> Position (Позиция) — номер символа от начала документа, с которого начинается найденный фрагмент; если в параметрах поиска установлен флажок Display Line info, то информация в этом столбце выводится в формате <номер строки>:<номер символа>;</li>
<li> Length (Длина) - - число символов в искомом фрагменте;</li>
<li> Line Information (Информация в строке) - - содержимое всей строки, включающей искомый фрагмент; этот столбец выводится только в том случае, если в параметрах поиска установлен флажок Display Line info. </li>
<img src="image/spisok-fragmentov-po-kotorym-vypolnen-poisk_2.gif" alt="Список фрагментов по которым выполнен поиск">
Рисунок 2.23. Вывод результатов поиска в окне результатов
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index10.htm">Назад</a>
</td>
<td>
<h1>Список ресурсов после добавления нового раздела</h1>Рисунок 2.7. Список ресурсов после добавления нового раздела<br><br><img src="image/spisok-resursov-posle-dobavlenija-novogo-razdela_1.gif" alt="Список ресурсов после добавления нового раздела"><br>
Если требуется скорректировать название или параметры фильтра одного из имеющихся разделов списка ресурсов, необходимо:<br>
<li>1. Щелкнуть правой кнопкой мыши на значке раздела и в контекстном меню выбрать команду Properties... (Свойства).</li>
<li> 2. В открывшемся диалоговом окне (см. Рисунок 2.6) внести необходимые изменения и щелкнуть на кнопке ОК.</li>
Чтобы удалить раздел ресурсов, следует в его контекстном меню выбрать команду Remove Resource (Удалить ресурс).<br>
Новый проект не обязательно создавать с нуля. Если вы имеете в своем распоряжении проект, структуру которого вы хотели бы использовать в качестве основы для построения нового сайта, можно поступить следующим образом:<br>
<li> 1. Создать на диске корневую папку для нового проекта. </li>
<li>2. На вкладке Projects окна ресурсов щелкнуть на кнопке New Project и в открывшемся диалоговом окне New Project (см. Рисунок 2.3) ввести имя и размещение нового проекта.</li>
<li> 3. Закрыть новый проект в окне ресурсов.</li>
<li> 4. Вручную (точнее, средствами Windows) заменить apf-файл нового проекта АРЕ-файлом проекта-прототипа.</li>
<li>5. Переименовать АРЕ-файл в соответствии с названием нового проекта.</li>
<li> 6. Открыть новый проект в окне ресурсов и внести в него необходимые изменения.</li>
Если вы хотите использовать в новом проекте не только структуру, но и HTML-файлы проекта-прототипа, то их также следует скопировать (сохраняя размещение по папкам) в корневую папку нового проекта.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Структура проекта после добавления новых папок</h1>Рисунок 2.13. Структура проекта после добавления новых папок<br><br><img src="image/struktura-proekta-posle-dobavlenija-novyh-papok_1.gif" alt="Структура проекта после добавления новых папок"><br>
После создания папки ее свойства могут быть изменены. Например, вы можете изменить имя папки, условия ее заполнения и выгрузки на Web-сeрвeр. Кроме того, физическая папка может быть преобразована в виртуальную. Однако эту операцию следует выполнять, только хорошенько взвесив все «за» и «против», поскольку обратное преобразование невозможно. Для изменения свойств папки необходимо выбрать в ее контекстном меню команду Properties... и выполнить соответствующие установки в панели свойств.<br>
Чтобы удалить любую папку из проекта (в том числе корневую), достаточно выбрать в ее контекстном меню команду Remove Folder (Удалить папку). При этом следует иметь в виду, что удаление физической папки из проекта не приводит к удалению связанной с ней реальной папки на диске.<br>
Более подробно соответствующие аспекты работы с папками и файлами проекта рассмотрены в следующем подразделе.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>В этом диалоговом окне можно изменить имя под которым будет сохранен фрагмент</h1>Рисунок 2.21. В этом диалоговом окне можно изменить имя, под которым будет сохранен фрагмент<br><br><img src="image/v-jetom-dialogovom-okne-mozhno-izmenit-imja-pod_1.gif" alt="В этом диалоговом окне можно изменить имя под которым будет сохранен фрагмент"><br>
Чтобы выполнить поиск по одному из сохраненных ранее фрагментов, необходимо:<br>
<li>1. Щелкнуть кнопку со стрелкой, расположенную над полем Find what.</li>
<li>2. В открывшемся меню (см. Рисунок 2.20) выбрать команду Open find text... (Сохранить искомый текст).</li>
<li> 3. В списке фрагментов (Рисунок 2.22) выбрать тот, по которому должен выполняться поиск. .</li>
Выбор диапазона поиска выполняется посредством установки соответствующего переключателя в группе Find where (Где искать), а также с помощью связанных с переключателями полей:
<br><br>
<h1>Варианты значков для представления папок проекта</h1>Рисунок 2.11. Варианты значков для представления папок проекта<br><br><img src="image/varianty-znachkov-dlja-predstavlenija-papok_1.gif" alt="Варианты значков для представления папок проекта"><br><br>
<br><br>
<h1>Вкладка Deployment панели свойств папки проекта</h1>Рисунок 2.10. Вкладка Deployment панели свойств папки проекта<br><br><img src="image/vkladka-deployment-paneli-svojstv-papki-proekta_1.gif" alt="Вкладка Deployment панели свойств папки проекта"><br>
Выполнив необходимые установки на панели свойств создаваемой папки, вы увидите изменения в структуре проекта. Новая папка будет представлена в дереве проекта значком, вид которого зависит от параметров папки (Рисунок 2.11).<br>
Вложенная папка произвольного уровня вложенности может быть создана аналогичным способом. Для этого необходимо щелкнуть правой кнопкоймыши на значке родительской папки, в контекстном меню выбрать команду Add Folder... и затем установить параметры новой папки.<br><br>
<h1>Вкладка General панели свойств папки проекта</h1>Рисунок 2.9. Вкладка General панели свойств папки проекта<br><br><img src="image/vkladka-general-paneli-svojstv-papki-proekta_1.gif" alt="Вкладка General панели свойств папки проекта"><br>
Чтобы добавить в исходный (пустой) проект новую папку, необходимо:<br>
<li> 1. Щелкнуть на значке корневой папки проекта правой кнопкой мыши и выбрать в открывшемся контекстном меню команду Add Folder... (Добавить папку).</li>
<li> Замечание<br>В оценочной версии HomeSite 5, в отличие от предыдущих версий пакета, перед выполнением первого шага требуется создать средствами Windows в корневой папке проекта реальную вложенную папку (в противном случае команда Add Folder... будет недоступна). </li>
<li> 2. В открывшемся диалоговом окне (Рисунок 2.9) на вкладке General (Общие свойства) установить параметры создаваемой папки.</li>
<li> имя папки; оно вводится в поле Folder Name (Имя папки);</li>
<li> тип папки (Virtual или Physical); выбор производится с помощью пары соответствующих переключателей; если выбран тип Virtual, то остальные элементы вкладки (кроме поля Folder Name) становятся недоступны;</li>
<li> для физической папки указать физический каталог, который будет ей сопоставлен; его адрес можно либо ввести вручную в поле Directory Patch (Адрес каталога), либо внести с помощью расположенной справа кнопки;</li>
<li> способ заполнения папки файлами; возможны два варианта:</li>
<li> занесение файлов вручную; папка, для которых используется такой способ, называется manual-inclusive folder (папка, заполняемая вручную); по умолчанию применяется этот вариант, поскольку он доступен для папок обоих типов (и виртуальных, и физических);</li>
<li> автоматическое занесение файлов, имеющихся в связанном с папкой физическом каталоге; такой вариант может применяться только для физических папок; для его реализации необходимо установить флажок Auto Include Files Using Filter (Автоматически добавлять файлы, используя фильтры); если флажок установлен, то в раскрывающемся списке можно выбрать фильтр, используемый для отбора включаемых файлов:</li>
<li> All Files (Все файлы);</li>
<li> Web-документы (с указанием конкретных типов текстовых файлов);</li>
<li> Web-изображения (с указанием конкретных типов графических файлов).</li>
<li>3. На второй вкладке панели свойств папки - - Deployment (Развертывание) указать параметры выгрузки папки на Web-сервер (Рисунок 2.10):</li>
<li>Relative to the Parent Folder Deployment Location (Сохранить расположение относительно родительской папки); размещение папки останется таким же, как в локальном варианте проекта;</li>
<li>Dynamic Deployment Location (Динамический адрес развертывания); расположение папки на сервере указывается в текстовом поле Deployment Path (Адрес загрузки); при выполнении операции выгрузки к этому адресу автоматически добавляется префикс, отражающий адрес сервера, на который выполняется выгрузка; данный вариант рекомендуется использовать при выгрузке сайта на несколько серверов;</li>
<li> Absolute Deployment Path (Абсолютный адрес развертывания); адрес развертывания указывается как абсолютный маршрут, содержащий в том числе и адрес сервера; данный вариант рекомендуется использовать при выгрузке сайта на единственный сервер;</li>
<li> Do Not Upload (He загружать); при выгрузке проекта на сервер данная папка будет пропущена).</li>
<li>4. Щелкнуть на кнопке ОК.</li>
<br><br>
<h1>Еще раз отметим, что не </h1>Замечания<br><br>1. Еще раз отметим, что не разрешается создавать виртуальные папки внутри физических. Тем не менее, если вы попытаетесь нарушить это правило и создать виртуальную папку внутри физической, HomeSite на это никак не отреагирует.<br>2. Для корректной работы с физическими папками должны существовать связанные с ними каталоги на диске компьютера. При этом иерархия создаваемых физических папок должна соответствовать иерархии реально существующих на диске каталогов (в предыдущих версиях HomeSite такое ограничение отсутствовало).
В том случае, если при создании физической папки будет указано, что файлы в нее будут помещаться вручную (то есть флажок Auto Include Files Using Filter снят), после щелчка на кнопке ОК на экране отображается дополнительное диалоговос окно Populate New Folder (Заполнение новой папки). Имеющиеся в этом окне два флажка позволяют установить дополнительные условия, которые должны учитываться при первоначальном заполнении папки (Рисунок 2.12):<br>
<li> All files in the selected directoiy path (Все файлы в выбранном каталоге) -в новую папку будут автоматически включены вес файлы, имеющиеся в соответствующей реальной папке на момент создания физической папки проекта;</li>
<li> All subfolders under the selected directory path (Все вложенные папки в выбранном каталоге) --в новую папку будут автоматически включены все вложенные папки, имеющиеся в соответствующей реальной папке.</li>
<br><br>
<h1>Основные инструменты</h1>
<h1>Дерево тегов</h1>Дерево тегов<br><br>
Как было сказано выше, Tag Inspector тесно связан с другой утилитой -Tag Tree. Она представляет собой интерактивное дерево тегов редактируемого документа, а также дополнительные элементы интерфейса для работы с ним.<br>
Дерево тегов отображается в окне ресурсов сразу, как только вы переключаетесь на вкладку Tag Inspector этого окна.<br>
Для документа, не содержащего сценариев, дерево тегов в исходном состоянии выглядит так, как показано на Рисунок 3.48. То есть в нем отображаются только две основные части документа: заголовок, ограниченный тегами <head>
<link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/>, и тело документа, представленное в дереве ветвью Body.<br>
Для каждого документа дерево тегов строится на основе так называемого профиля, выбранного в списке профилей (см. Рисунок 3.48).<br><br>
<h1>Диалоговое окно Customize</h1>Рисунок 3.41. Диалоговое окно Customize<br><br><img src="image/dialogovoe-okno-customize_1.gif" alt="Диалоговое окно Customize"><br>
Чтобы добавить на вкладку новую кнопку, необходимо:<br>
<li> 1. Выбрать вкладку в списке Visible Toolbar (Видимые панели инструментов); образец вкладки появится в поле Toolbar, расположенном в верхней части окна;</li>
<li> 2. В списке имеющихся кнопок установить указатель мыши на значок добавляемой кнопки и перетащить его (значок) в поле Toolbar.</li>
<li> 3. Если требуется добавить кнопку, отсутствующую в списке, щелкните на кнопке Add Custom Button (Добавить пользовательскую кнопку), в открывшемся диалоговом окне укажите параметры новой кнопки и затем выполните п. 2.</li>
Чтобы удалить кнопку с вкладки, достаточно перетащить значок кнопки за пределы поля Toolbar.<br>Если требуется восстановить прежние параметры панели Quick Bar, щелкните на кнопке Reset to Defaults (Восстановить параметры по умолчанию).<br>
Подробнее технология использования панели быстрой вставки описана в других главах, применительно к созданию конкретных элементов страницы.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index13.htm">Назад</a>
</td>
<td>
<h1>Диалоговое окно для изменения списка тегов</h1>Рисунок 3.20. Диалоговое окно для изменения списка тегов<br><br><img src="image/dialogovoe-okno-dlja-izmenenija-spiska-tegov_1.gif" alt="Диалоговое окно для изменения списка тегов"><br>
Чтобы использовать функцию Tag Insight для введенного рапсе тега или атрибута, необходимо ввести после имени тега (или атрибута) пробел.<br>
Вы можете временно отказаться от услуг функции Tag Insight, щелкнув соответствующую кнопку на панели инструментов редактора кода (см. Рисунок 3.1).
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Диалоговое окно для изменения взаимного расположения вкладок</h1>Рисунок 3.40. Диалоговое окно для изменения взаимного расположения вкладок<br><br><br><img src="image/dialogovoe-okno-dlja-izmenenija-vzaimnogo_1.gif" alt="Диалоговое окно для изменения взаимного расположения вкладок"><br><br>
<br><br>
<h1>Диалоговое окно для описания шаблона</h1>Рисунок 3.26. Диалоговое окно для описания шаблона<br><br><img src="image/dialogovoe-okno-dlja-opisanija-shablona_1.gif" alt="Диалоговое окно для описания шаблона"><br>
Если вы используете большое количество шаблонов и забыли какой-либо из них, то можете оперативно воспользоваться списком имеющихся шаблонов. Для этого достаточно установить курсор в любой свободной позиции редактируемого документа и нажать комбинацию клавиш <Ctrl>+J. В результате на экране появится список (Рисунок 3.27), в котором вы можете выбрать необходимый шаблон и вставить его в документ, нажав клавишу <Enter> (в документ будет помещен реальный код).<br>
<img src="image/dialogovoe-okno-dlja-opisanija-shablona_2.gif" alt="Диалоговое окно для описания шаблона"><br>
Рисунок 3.27. Интерактивный список шаблонов
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index9.htm">Назад</a>
</td>
<td>
<h1>Диалоговое окно для редактирования цветовой схемы</h1>Рисунок 3.12. Диалоговое окно для редактирования цветовой схемы<br><br><img src="image/dialogovoe-okno-dlja-redaktirovanija-cvetovoj_1.gif" alt="Диалоговое окно для редактирования цветовой схемы"><br>
<li> список Elements (Элементы) содержит перечень элементов и синтаксических конструкций соответствующего языка; данный список связан с расположенными справа от него кнопками и находящимся ниже окном просмотра;</li>
<li> окно просмотра содержит своеобразный фрагмент документа, в котором представлены образцы всех элементов, имеющихся в списке Elements; окно является интерактивным: выбор некоторого элемента в нем приводит к выбору соответствующей категории в списке Elements, а также к изменению состояния упомянутых выше кнопок; благодаря этому вы имеете возможность не только изменить цвет выбранного элемента, но и получить информацию относительно его предназначения с точки зрения синтаксиса языка;</li>
<li> кнопки Foreground (Передний план) и Background (Фон), входящие в группу элементов управления Current Element (Текущий элемент) обеспечивают доступ к палитрам, которые позволяют выбрать цвет шрифта и фона для элемента языка, выбранного в списке Elements; другие элементы управления из этой группы имеют следующее предназначение:</li>
<li> флажки Use default (Использовать по умолчанию), связанные с кнопками Foreground и Background, позволяю! закрепить выбранные цвета как используемые пв умолчанию;</li>
<li> флажки Bold (Полужирный), Italic (Курсив) и Underline (Подчеркнутый) позволяют установить соответствующие дополнительные атрибуты символов шрифта для синтаксических конструкций;</li>
<li> кнопка Reset to Defaults (Вернуть параметры, используемые по умолчанию), расположенная в нижней части окна, обеспечивает отмену внесенных в схему изменений.</li>
Следующая важная функция управления визуальным представлением документа -- это функция свертывания/развертывания текстовых фрагментов. Особенно эффективно ее применение при работе с большими документами, занимающими несколько экранов.<br>
Каждый свернутый фрагмент представляется в окне документа специальным значком; подведя к такому значку указатель мыши, можно увидеть во всплывающем окне развернутый вариант фрагмента (Рисунок 3.13).<br><br>
<h1>Формат HomeSite при вызове Tag Inspector</h1>Рисунок 3.43. Формат HomeSite при вызове Tag Inspector<br><br><img src="image/format-homesite-pri-vyzove-tag-inspector_1.gif" alt="Формат HomeSite при вызове Tag Inspector"><br>
Рассмотрим подробнее интерфейс инспектора тегов (Рисунок 3.44). В верхней части окна отображается, кроме имени активного тега, собственная панель инструментов Tag Inspector, которая содержит пять кнопок:<br>
<li> Edit Tag Definitions (Редактировать определение тега) — вызов утилиты редактирования определений тегов; </li>
<li> Version Specific (Специфическая версия) — вывод информации по специфической версии данного тега (если таковая имеется); </li>
<li> Categorized (По категориям) - - список атрибутов упорядочивается по категориям; подробнее об этом режиме будет сказано немного позже; </li>
<li> Alphabetically Z-to-A (В алфавитном порядке от Z к А) — список атрибутов упорядочивается по алфавиту, но в обратном порядке; </li>
<li> Alphabetically A-to-Z (В алфавитном порядке от А к Z) — список атрибутов упорядочивается по алфавиту в обычном порядке.</li>
Собственно окно инспектора тегов представляет собой список, состоящий из двух столбцов:<br>
<li> в левом приведен перечень атрибутов, разрешенных для данного тега, а также список событий, поддерживаемых для соответствующего элемента страницы в Dynamic HTML;</li>
<li> в ячейках правого столбца отображаются значения атрибутов либо (если ячейка сопоставлена событию) - - вид обработчика события.</li>
<br><br>
<h1>Формат окна Tag Tree в исходном состоянии</h1>Рисунок 3.48. Формат окна Tag Tree в исходном состоянии<br><br><img src="image/format-okna-tag-tree-v-ishodnom-sostojanii_1.gif" alt="Формат окна Tag Tree в исходном состоянии"><br>
В терминологии разработчиков HomeSite профиль (или профиль иерархии -- Outline Profile) -- это подмножество тегов, учитываемых при анализе структуры документа. В составе Tag Tree имеется почти два десятка профилей, соответствующих различным спецификациям языков разметки, а также наиболее часто используемым их комбинациям. Например, для HTML-документов по умолчанию используется профиль CFML and HTML tags, представляющий собой набор из наиболее употребительных тегов языка CFML, стандартизованных тегов языка HTML 4.0 и некоторых дополнительных тегов (типа <?РНР>). Вы можете создать собственный профиль с помощью специального диалогового окна, которое вызывается на экран с помощью кнопки Configure Outline Profiles (Изменить профили), входящей в панель инструментов окна Tag Tree (см. Рисунок 3.48).<br>
Дерево тегов связано по информации с окном документа и с окном утилиты Tag Inspector, если вы выберете в дереве какой-либо элемент (тег), то он будет также выбран и в окне документа, а его аргументы будут представлены в окне Tag Inspector. Причем, если соответствующий фрагмент документа не виден в окне, то выполняется автоматическая прокрутка документа.<br>
Кроме того, дерево тегов позволяет управлять визуальным представлением текста документа. Имеется в виду следующее. Если в дереве некоторый элемент (тег) представлен как свернутый, то он может быть автоматически свернут и в окне документа. Для этого достаточно щелкнуть на кнопке Collapse document based on outline (Свернуть документ в соответствии с деревом тегов), расположенную на панели инструментов окна Tag Tree. Пример такого соответствия показан на Рисунок 3.49.<br><br>
<h1>Формат вкладки Events (HTML 4 0)</h1>Рисунок 3.36. Формат вкладки Events (HTML 4.0)<br><br><img src="image/format-vkladki-events-html-4-0_1.gif" alt="Формат вкладки Events (HTML 4 0)"><br>
Помимо перечисленных выше вкладок, во всех диалоговых окнах редактора тегов имеются следующие элементы управления (см. Рисунок 3.32):<br>
<li> флажки, управляющие использованием в документе кавычек:</li>
<li> Quote all attributes (Использовать кавычки для всех атрибутов) - если флажок установлен, значения всех атрибутов тега будут заключены в кавычки;</li>
<li> Single quotes on attributes (Одиночные кавычки для атрибутов) - флажок позволяет уточнить вид кавычек: если он установлен, то используются одиночные кавычки (апострофы);</li>
<li> флажок Output attributes on single line (Выводить атрибуты в одной строке), который позволяет указать, следует ли каждый атрибут тега выводить на новой строке: если он установлен, то значения всех атрибутов выводятся на одной строке;</li>
Замечание
<br>Замечание<br><br>Состояние указанных флажков, как и других элементов управления диалогового окна, влияет только на текущий (создаваемый или редактируемый) тег.
<li> две кнопки, управляющие выводом на экран справочной информации по тегу данного типа; кнопка Help обеспечивает вывод справки (точнее, соответствующего фрагмента спецификации) в подокне того же диалогового окна (Рисунок 3.37), а расположенная рядом с ней безымянная кнопочка — в отдельном окне.</li>
<br><br>
<h1>Формат вкладки Style Sheets/Accessibility (HTML 4 0)</h1>Рисунок 3.35. Формат вкладки Style Sheets/Accessibility (HTML 4.0)<br><br><br><img src="image/format-vkladki-style-sheets-accessibility-html-4-0_1.gif" alt="Формат вкладки Style Sheets/Accessibility (HTML 4 0)"><br>
<li> вкладку Events (HTML 4.0) (События), которая используется при создании интерактивных страниц на основе Dynamic HTML; эта вкладка позволяет задавать для элемента список событий и реакцию на них (Рисунок 3.36); подробнее о создании интерактивных страниц с помощью HomeSite рассказано в главе <a href="../Glava%205/Index0.htm">Разработка навигационной схемы сайта.</a></li>
<br><br>
<br>
<br>
<h1>Функция Auto Completion</h1>Функция Auto Completion<br><br>
Эта сервисная функция автоматически добавляет в код документа закрывающий элемент для тех конструкций, синтаксис которых этого требует. Например, такой конструкцией является комментарий в HTML-документе: он начинается с символов <!- и завершается символами ->.<br>
Функция работает следующим образом: как только вы введете последний символ открывающей последовательности, она добавит завершающую последовательность.<br>
Параметры функции устанавливаются на вкладке Auto Completion диалогового окна Sellings. На ней имеются следующие элементы управления (Рисунок 3.23):<br>
<li> флажок Enable auto completion (Разрешить автоматическое завершение); если флажок установлен, то пользователь может скорректировать список конструкций, для которых будут вставляться символы завершения;</li>
<li> список парных символов, для которых разрешено автоматическое завершение; список реализован в виде таблицы, состоящей из двух столбцов:</li>
<li>Trigger Siring (Строка переключения) — столбец содержит список символов (или комбинаций символов), играющих роль открывающей скобки;</li>
<li>Completion String (Строка завершения) — столбец содержит список символов (или комбинаций символов), играющих роль закрывающей скобки;</li>
<li> кнопка Add (Добавить); щелчок на ней открывает диалоговое окно, в котором можно ввести новую комбинацию символов (Рисунок 3.24); дополнительно в этом окне с помощью трех переключателей можно задать положение курсора после автоматической вставки закрывающей скобки: </li>
<li> Place cursor after the completion string (Поместить курсор после завершающей строки);</li>
<li> Place cursor before the completion string (Поместить курсор перед завершающей строкой);</li>
<li> Select the text as shown (Выбрать текст как показано) — после автоматической вставки «закрывающей скобки» текст будет выделен в соответствии с образцом, заданным в поле Trigger String или Completion String',</li>
<li> кнопка Edit (Правка), с помощью которой можно вызвать то же диалоговое, окно и внести изменения в выбранную в списке комбинацию символов;</li>
<li> кнопка Delete (Удалить) обеспечивает удаление из списка выбранного элемента.</li>
<br><br>
<h1>Функция Code Template</h1>Функция Code Template<br><br>
Данная функция обеспечивает автоматическую подстановку фрагментов HTML-кода вместо некоторого статического текста, используемого в качестве заменителя, или псевдонима реального кода. Разработчики HomeSite используют для обозначения таких псевдонимов термин Template (шаблон). Например, если вы используете в своей публикации встроенные таблицы стилей, то вместо тега <style type-«text/css»> можете ввести шаблон st.<br>
Механизм подстановок позволяет существенно сократить время на ручной ввод часто встречающихся конструкций и, кроме того, свести к минимуму число возможных ошибок.<br><br>
<h1>Функция Tag Completion</h1>Функция Tag Completion<br><br>
Данная функция автоматически вставляет закрывающий тег для последнего введенного незакрытого парного тега. Закрывающий тег вставляется в код страницы после ввода правой угловой скобки для открывающего тега.<br>
Параметры функции устанавливаются на вкладке Tag Completion диалогового окна Settings. На ней имеются следующие элементы управления (Рисунок 3.21):<br>
<li> флажок Enable tag completion (Разрешить вставку закрывающих тегов); если флажок установлен, то пользователь может скорректировать список тегов, для которых будут вставляться закрывающие теги;</li>
<li> список тегов, для которых разрешена вставка парного тега;</li>
<li> кнопка Add (Добавить); нажав се, вы откроете диалоговое окно, в котором можно ввести наименование добавляемого тега (Рисунок 3.22); при добавлении нового элемента требуется определенная аккуратность, поскольку HomeSite не контролирует синтаксис вводимого тега; правда, в отличие от окна параметров функции Tag Insight, здесь предусмотрена кнопка Edit (Правка), с помощью которой можно вызвать то же диалоговое окно и исправить допущенную ошибку;</li>
<li> кнопка Delete (Удалить) обеспечивает удаление из списка выделенного элемента.</li>
Использование функции можно временно запретить, щелкнув на соответствующей кнопке на панели инструментов редактора кода (см. <a href="#19">Рисунок 3.1</a>).<br><br>
<h1>Функция Tag Insight</h1>Функция Tag Insight<br><br>
Функция Tag Insight (Предсказатель тегов) — это одна из сервисных функций, входящих в состав редактора кода. Она реализована в виде нескольких всплывающих списков, с помощью которых выполняется опережающий ввод наименований тегов и их атрибутов при «ручном» редактировании кода страницы.<br>
Эффект применения функции Tag Insight состоит в следующем.<br>
Когда вы начинаете вводить с клавиатуры очередной тег, и вставляете в код страницы открывающую угловую скобку, в позиции ввода появляется (возможно, с некоторой задержкой) список тегов. По мере ввода очередного символа имени тега список автоматически прокручивается, избавляя вас от необходимости искать в нем нужный пункт (Рисунок 3.17).<br><br>
<h1>Функция Tag Validation</h1>Функция Tag Validation<br><br>
Данная функция позволяет проверять корректность фрагментов HTML-кода страницы, не дожидаясь окончания разработки страницы. Применение функции эффективно в том случае, если имя тега вводится вручную. Проверка выполняется после того, как будет введена закрывающая угловая скобка. Если имя тега введено правильно, то в строке состояния главного окна HomeSite появляется сообщение Tag Validated (Тег корректен). В противном случае в строке состояния выводится на красном фоне сообщение о том, что тег с таким именем в описании текущей версии языка не обнаружен (Рисунок 3.28).<br><br>
<h1>Функциональные возможности редактора кода</h1>Функциональные возможности редактора кода<br><br>
Вес действия по вводу и редактированию кода Web-документа выполняются на вкладке Edit окна документа.<br>
Для ввода и правки кода Web-документа вы можете использовать:<br>
<li> непосредственный набор текста на клавиатуре;</li>
<li> вставку текста через буфер обмена;</li>
<li> включение содержимого файла, выбранного в окне ресурсов;</li>
<li> вставку повторно используемых фрагментов (Snippets);</li>
<li> сервисные функции:</li>
<li> завершения строки - - Auto Completion,</li>
<li> вставки имен тегов и атрибутов — Tag Insight;</li>
<li> завершения парных тегов — Tag Completion;</li>
<li> вставки атрибутов функции — Function Insight;</li>
<li> подстановки фрагментов — Code Templates.</li>
Для упрощения работы с отдельными фрагментами и блоками текста редактор кода поддерживает операции прямого манипулирования (перетаскивание фрагмента в другую позицию), а также «многоместный» буфер обмена.<br>
Кроме того, как уже было сказано, в процессе работы с кодом вы всегда можете обратиться к одному из дополнительных инструментов, имеющихся в составе HomeSite.<br>
Эффективность работы с большими документами существенно зависит от читабельности текста. Поэтому в составе редактора кода имеются средства управления визуальным представлением кода:<br>
<li> цветовая подсветка синтаксических конструкций используемого языка;</li>
<li> автоматическое форматирование текста с учетом синтаксиса;</li>
<li> функция свертывания/развертывания текстовых фрагментов;</li>
<li> управление параметрами шрифта; </li>
<li> управление отображением скрытых символов;</li>
<li> управление выводом номеров строк.</li>
Для ускорения выбора требуемой функции или изменения режима работы редактора кода предназначены два основных механизма:<br>
<li> собственная панель инструментов; </li>
<li> контекстные меню.</li>
Некоторые кнопки, имеющиеся на панели инструментов редактора кода, были описаны в первой главе (раздел «<a href="../Glava%201/Index13.htm">Организация пользовательского интерфейса</a>», Рисунок 1.5).<br>
Ниже приведены пояснения к остальным кнопкам панели инструментов (Рисунок 3.1):<br>
<li> Close Active Document (Закрыть активный документ) — закрывает текущий (активный) документ;</li>
<li> Indent (Отступ) — сдвигает активную строку (в которой находится курсор) или выбранный фрагмент текста на одну позицию табуляции вправо;</li>
<li> Unindent (До сдвига) -- отменяет результат однократного сдвига;</li>
<li> Tag Insight -- кнопка-переключатель, которая разрешает или запрещает использование функции Tag Insight,</li>
<li> Tag Completion -- кнопка-переключатель, которая разрешает или запрещает использование функции Tag Completion;</li>
<br><br>
<h1>Графическое обозначение специфических атрибутов</h1>Рисунок 3.33. Графическое обозначение специфических атрибутов<br><br><br><img src="image/graficheskoe-oboznachenie-specificheskih-atributov_1.gif" alt="Графическое обозначение специфических атрибутов"><br><br>
<br><br>
<h1>Инспектор тегов</h1> Инспектор тегов<br><br>
Чтобы перейти в режим работы с Tag Inspector, необходимо:<br>
<li> 1. В окне ресурсов открыть вкладку Tag Inspector.</li>
<li> 2. В окне документа щелкнуть мышью на том теге, атрибуты которого вы хотели бы изменить (если тег парный, то щелкать следует на открывающем теге).</li>
После этого в нижней части окна ресурсов, отведенной для Tag Inspector, появится имя редактируемого (активного) тега и список его допустимых атрибутов (Рисунок 3.43).<br><br>
<h1>Интерфейс окна Tag Inspector</h1>Рисунок 3.44. Интерфейс окна Tag Inspector<br><br><img src="image/interfejs-okna-tag-inspector_1.gif" alt="Интерфейс окна Tag Inspector"><br>
Способ ввода значения атрибута зависит от типа атрибута: если для него существуют предопределенные значения, то они могут быть выбраны из раскрывающегося списка, связанного с ячейкой. Чтобы активизировать список, требуется щелкнуть либо в ячейке с именем атрибута, либо в ячейке значения.<br>
Чтобы вставить значение атрибута в код документа, следует нажать клавишу <Entеr>.<br>
Выбор обработчика события несколько сложнее и состоит из двух этапов:<br>
<li> 1. Сначала в раскрывающемся списке, связанном с ячейкой правого столбца, требуется выбрать язык сценария (VBScript или JavaScript), как показано на Рисунок 3.45.</li>
<li> 2. Затем в открывшемся дополнительном окне выбрать или ввести имя функции-обработчика (Рисунок 3.46) и щелкнуть на кнопке ОК.</li>
<br><br>
<h1>Изменение конфигурации панели быстрой вставки</h1>Рисунок 3.39. Изменение конфигурации панели быстрой вставки<br><br><img src="image/izmenenie-konfiguracii-paneli-bystroj-vstavki_1.gif" alt="Изменение конфигурации панели быстрой вставки"><br>
Альтернативный способ удалить вкладку щелкнуть правой кнопкой мыши в любой позиции панели Quick Bar и в открывшемся контекстном меню щелкнуть на имени вкладки. Аналогичным образом можно и восстановить вкладку на экране. Однако при этом она отображается как отстыкованная. Чтобы вернуть се в состав панели, достаточно перетащить ее мышью на свободное место в правой части панели.<br>
Чтобы изменить взаимное расположение вкладок, необходимо:<br>
<li>1. Щелкнуть правой кнопкой мыши в любой позиции панели Quick Bar и в открывшемся контекстном меню выбрать, команду Organize Quick Bar...</li>
<li> 2. В открывшемся диалоговом окне (Рисунок 3.40) выбрать вкладку и с помощью кнопок со стрелками переместить се в нужную позицию. . Для изменения состава кнопок на любой вкладке панели Quick Bar следует воспользоваться диалоговым окном Customize (Рисунок 3.41).</li>
<br><br>
<h1>Эффект применения функции Tag Insight</h1>Рисунок 3.17. Эффект применения функции Tag Insight<br><br><img src="image/jeffekt-primenenija-funkcii-tag-insight_1.gif" alt="Эффект применения функции Tag Insight"><br>
После того, как в списке будет выбран требуемый тег, остается только нажать клавишу <Enter>, и тег будет вставлен в код страницы. Обратите внимание, что в этом списке некоторые теги представлены по несколько раз — в сочетании с наиболее часто применяемыми атрибутами. Но и на этом возможности функции Tag Insight не исчерпываются. Если после вставки тега вы начинаете вводить его атрибут, то в окне редактирования появится новый список - - список атрибутов, разрешенных для данного тега (Рисунок 3.18, слева). В том случае, когда для атрибута может быть установлено одно из стандартных значений, то на экране появляется третий список — список возможных значений атрибута (Рисунок 3.18, справа).<br><br>
<h1>Настройка параметров редактора кода</h1>Настройка параметров редактора кода<br><br>
Общие параметры работы редактора кода могут быть скорректированы с помощью элементов управления, размещенных на вкладке Editor диалогового окна Settings (Рисунок 3.30).<br><br>
<h1>Окно установки параметров функции Auto Completion</h1>Рисунок 3.23. Окно установки параметров функции Auto Completion<br><br><img src="image/okno-ustanovki-parametrov-funkcii-auto-completion_1.gif" alt="Окно установки параметров функции Auto Completion"><br>
<img src="image/okno-ustanovki-parametrov-funkcii-auto-completion_2.gif" alt="Окно установки параметров функции Auto Completion"><br>
Рисунок 3.24. Диалоговое окно для изменения списка комбинаций символов
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Окно установки параметров функции Tag Completion</h1>Рисунок 3.21. Окно установки параметров функции Tag Completion<br><br><img src="image/okno-ustanovki-parametrov-funkcii-tag-completion_1.gif" alt="Окно установки параметров функции Tag Completion"><br>
<img src="image/okno-ustanovki-parametrov-funkcii-tag-completion_2.gif" alt="Окно установки параметров функции Tag Completion"><br>
Рисунок 3.22. Диалоговое окно для изменения списка закрываемых тегов
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Окно установки параметров функции Tag Validation</h1>Рисунок 3.29. Окно установки параметров функции Tag Validation<br><br><br><img src="image/okno-ustanovki-parametrov-funkcii-tag-validation_1.gif" alt="Окно установки параметров функции Tag Validation"><br>
<li> список версий языков создания Web-докумeнтов, для которых поддерживается синтаксический контроль с помощью утилиты Validator; список представляет собой таблицу из двух столбцов:</li>
<li> Version (Версия) - - наименование дочерней версии (конкретного подмножества тегов);</li>
<li> Parent Version (Родительская версия) -- наименование стандартизованной версии языка, на основе которой получена дочерняя версия;</li>
<li> кнопка Validator Settings... (Параметры синтаксического анализатора); щелчок на кнопке приводит к открытию панели свойств синтаксического анализатора;</li>
<li> гипертекстовая ссылка CSE HTML Validator, которая обеспечивает переход на Web-сайт фирмы-производителя указанного продукта (http:// \www.htmlvalidator.com): этой ссылкой имеет смысл воспользоваться в том случае, если на вашем компьютере не установлен CSE HTML Validator;</li>
<li> флажок Use CSE HTML Validator when validating the entire document (Использовать CSE HTML Validator после завершения разработки документа); если флажок поставлен, то диагностика документа будет выполняться только перед тем, как вы решите сохранить его на диске; кроме того, установка данного флажка делает доступными две кнопки, расположенные под ним: Configure CSE (Конфигурация CSE) и CSE Options (Параметры CSE);</li>
<li> флажок Tag validation validates the... (Проверка корректности тега...); он управляет автоматическим включением функции Tag Validation: если флажок установлен, то проверка каждого введенного тега будет выполняться автоматически, как только вы напечатаете в документе правую угловую скобку; этот флажок связан с кнопкой Tag Validation на панели инструментов редактора кода -- чтобы изменить его состояние, достаточно щелкнуть эту кнопку (и наоборот).</li>
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index10.htm">Назад</a>
</td>
<td>
<h1>Окно утилиты Tag Chooser</h1>Рисунок 3.42. Окно утилиты Tag Chooser<br><br><img src="image/okno-utility-tag-chooser_1.gif" alt="Окно утилиты Tag Chooser"><br>
Чтобы добавить тег в код документа, достаточно дважды щелкнуть на его имени в правом подокне (если для тега требуется установить атрибуты, это приведет к открытию соответствующего диалогового окна редактора тега).<br>
В нижней части окна, справа имеются две кнопки для вызова справки по выбранному тегу. Они работают так же, как и подобные кнопки редактора тегов: кнопка Help выводит справку непосредственно в окне утилиты Tag Chooser, а вторая кнопка открывает отдельное окно.<br>
В общем случае вес теги языка подразделяются (создателями HomeSite) на четыре категории:<br>
<li> General (Общие) - - стандартизованные теги;</li>
<li> Browser-specific (Специфические для броузера) -- введенные разработчиками соответствующего броузера и, как правило, не поддерживаемые «конкурирующей фирмой»;</li>
<li> Deprecated (Неодобряемые) - - теги, применение которых не рекомендуется консорциумом W3C;</li>
<li> Obsolete (Устаревшие) -- устаревшие теги, которые не поддерживаются старшими версиями броузеров.</li>
Важным достоинством утилиты Tag Chooser является то, что она реализована на основе так называемого нсмодального окна, то есть после вставки тега можно продолжать работать с документом, не закрывая окно утилиты. При необходимости размеры окна можно изменить с помощью мыши.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index14.htm">Назад</a>
</td>
<td>
<h1>Основные инструменты</h1>Основные инструменты<br><br>
Все операции по разработке страниц выполняются в окне документа (его интерфейс был подробно описан вразделе <a href="../Glava%201/Index13.htm">Организация пользовательского интерфейса</a> в главе «Знакомство с HomeSite»).<br>
Это окно является как бы общей строительной площадкой, на которой размещается редактируемая страница, и на которой вы можете поочередно (или совместно) использовать различные инструменты, предоставляемые HomeSite. Такими инструментами являются:<br>
<li> Code Editor (Редактор кода) -- текстовый редактор, обеспечивающий правку документа в текстовом режиме с поддержкой синтаксиса используемого языка; в состав редактора кода входит несколько сервисных функций, которые повышают эффективность работы пользователя (например, Tag Insight, которая обеспечивает автоматический ввод имен тегов и атрибутов); подробно сервисные функции редактора кода будут рассмотрены в следующем разделе;</li>
<li> Tag Editor (Редактор тегов) -- это набор диалоговых окон, каждое из которых предназначено для установки значений атрибутов конкретного тега;</li>
<li> Quick Bar (Панель быстрой вставки) — набор панелей с кнопками, обеспечивающих совместное использование функций редактора кода и редактора тегов;</li>
<li> Tag Chooser (Выборщик тегов) — утилита, которая обеспечивает просмотр и вставку в текст документа тегов из любого поддерживаемого HomeSite языка разметки; при необходимости из этой утилиты автоматически вызывается Tag Inspector;</li>
<li> Tag Inspector (Инспектор тегов) -- панель, в которой содержится полный список тегов и их атрибутов, соответствующий указанному в документе типа DTD; Tag Inspector позволяет быстро отредактировать значение конкретного атрибута выбранного тега;</li>
<li>Tag Tree (Дерево тегов) —- панель, в которой иерархическая структура документа отображается в виде дерева тегов; основное предназначение дерева тегов - - быстрая навигация по коду документа;</li>
<li> Code Sweeper (Чистильщик кода) -- специальная утилита, предназначенная для синтаксически-зависимого форматирования кода документа; в составе HomeSite имеется шесть вариантов чистильщика, настроенных на работу с конкретным языком, и кроме того, пользовательский вариант, который соответствует варианту, используемому по умолчанию; параметры всех вариантов чистильщика могут настраиваться пользователем;</li>
<li> Code Validator (Синтаксический анализатор кода) — утилита, которая обеспечивает диагностирование синтаксических ошибок в коде документа;</li>
<li> Link Checker (Контролер ссылок) — утилита, способная проверять корректность внешних ссылок, ссылок на локальные HTML-файлы, а также ссылок на связанные с ними графические и мультимедийные файлы;</li>
<li> Checker Spelling (Контролер правописания) -- утилита, которая обеспечивает выявление орфографических ошибок в документе;</li>
<li> TopStyle Lite -- внешнее приложение, интегрированное с HomeSite и предназначенное для работы с каскадными таблицами стилей (CSS);</li>
<li> Image Map Editor (Редактор сенсорных карт) — утилита, предназначенная для создания и редактирования сенсорных карт (карт-изображений).</li>
В данной главе описаны инструменты, непосредственно относящиеся к редактированию страницы (Tag Editor, Tag Tree, Tag Inspector и частично — Quick Bar). Средства диагностирования и контроля рассмотрены в главе <a href="../Glava%207/Index0.htm">Тестирование сайта и выгрузка на удаленный сервер</a>, a TopStyle Lite в главe <a href="../Glava%204/Index0.htm">Разработка страниц публикации.</a> Редактору сенсорных карт посвящен отдельный раздел главы<a href="../Glava%205/Index0.htm"> Разработка навигационной схемы сайта.</a>
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td>
<h1>Панель быстрой вставки</h1>Панель быстрой вставки<br><br>
На самом деле панель быстрой вставки (Quick Bar) не является самостоятельным инструментом редактирования документа. Это всего лишь посредник, обеспечивающий быстрый и удобный доступ к таким инструментам. Тем не менее в процессе работы над документом невольно начинаешь воспринимать панель быстрой вставки как своеобразный швейцарский десантный нож с несколькими десятками лезвий: тут тебе и отвертка, и штопор, и пилочка для ногтей...<br>
Панель быстрой вставки состоит из нескольких вкладок, каждая из которых предназначена для работы с определенной категорией элементов страницы (Рисунок 3.38). Набор вкладок, отображаемых на экране, а также состав кнопок на вкладке может настраиваться пользователем (подробнее о процедуре настройки будет сказано ниже).<br><br>
<h1>Панель инструментов редактора кода</h1>Рисунок 3.1. Панель инструментов редактора кода<br><br><img src="image/panel-instrumentov-redaktora-koda_1.gif" alt="Панель инструментов редактора кода"><br>
<li> Tag Validation — кнопка-переключатель, которая разрешает или запрещает использование функции Tag Validation;</li>
<li> Open in Macromedia Dreamweaver/Ultradev (Открыть в Dreamweaver/ Ultradev) -- обеспечивает загрузку текущего документа в визуальный редактор Dreamweaver (если вместо него на компьютере установлено приложение Macromedia Ultradev, то документ будет загружен в него). </li>
Команды, имеющиеся в контекстном меню редактора кода, разделены на несколько групп. Некоторые из них являются контекстно-зависимыми, другие — нет. В общем случае в меню присутствуют следующие команды (Рисунок 3.2):<br><br>
<h1>Панель Quick Bar</h1>Рисунок 3.38. Панель Quick Bar<br><br><img src="image/panel-quick-bar_1.gif" alt="Панель Quick Bar"><br>
В общем случае Quick Bar обеспечивает выполнение следующих операций:<br>
<li> автоматическую вставку в текст документа тега с установленными по умолчанию значениями атрибутов, а также тегов, не требующих обязательных атрибутов;</li>
<li> вызов диалогового окна редактора тегов, соответствующего вставляемому тегу;</li>
<li> вызов мастеров, обеспечивающих автоматическую генерацию фрагментов кода;</li>
<li> активизацию утилиты JavaScript Tree, предназначенной для вставки в документ фрагментов кода на JavaScript.</li>
Как уже было сказано, вы можете изменять состав вкладок панели Quick Bar, набор и расположение кнопок на вкладке, а также расположение панели и отдельных вкладок на экране. Существуют два механизма настройки панели Quick Bar:<br>
<li> на основе прямого манипулирования (то есть с помощью мыши);</li>
<li> с помощью элементов управления диалогового окна Customize (Настройка), вызываемого одноименной командой из меню Options главного окна HomeSite.</li>
Чтобы с помощью мыши удалить ненужную вкладку или переместить ее в другую позицию на экране, необходимо:<br>
<li> 1. Установить указатель на элемент перемещения вкладки; при этом на экране появится всплывающая подсказка с названием вкладки (Рисунок 3.39, вверху).</li>
<li> 2. Нажать левую кнопку мыши, переместить контур вкладки в новую позицию и отпустить кнопку; вкладка будет представлена в отдельном окне (Рисунок 3.39, внизу).</li>
<li> 3. Если необходимо изменить положение вкладки, перетащить се с помощью мыши, зацепив за полосу заголовка.</li>
<li> 4. Если требуется закрыть вкладку, щелкните на кнопке с крестиком.</li>
<br><br>
<h1>Представление свернутого фрагмента</h1>Рисунок 3.15. Представление свернутого фрагмента<br><br><img src="image/predstavlenie-svernutogo-fragmenta_1.gif" alt="Представление свернутого фрагмента"><br>
Чтобы развернуть свернутый фрагмент, достаточно дважды щелкнуть на его значке левой кнопкой мыши.<br>
Если требуется свернуть конкретный тег, необходимо щелкнуть правой кнопкой мыши на любом символе внутри тега и в контекстном меню выбрать команду Collapse Full Tag (Свернуть полностью тег).<br>
Замечание
<br>Замечание<br><br>Если необходимо свернуть парный тег, следует щелкнуть правой кнопкой мыши либо внутри открывающего, либо внутри закрывающего тега.
Чтобы свернуть все имеющиеся в документе теги одного типа, следует на гиобом из них щелкнуть правой кнопкой мыши и в контекстном меню выбрагь команду Collapse All Identical Tags (Свернуть все однотипные теги).<br>
Если требуется развернуть все свернутые фрагменты, необходимо в контекстном меню выбрать команду Expand All Collapsed Sections (Развернуть все :вернутыс фрагменты).<br>
Параметры функции свертывания/развертывания представлены на вкладке Collapsed Text диалогового окна Settings (Рисунок 3.16).<br><br>
<h1>Пример диалогового окна редактора тегов</h1>Рисунок 3.32. Пример диалогового окна редактора тегов<br><br><img src="image/primer-dialogovogo-okna-redaktora-tegov_1.gif" alt="Пример диалогового окна редактора тегов"><br>
Как правило, окно редактора тегов содержит следующие вкладки:<br>
<li> вкладку стандартизованных атрибутов тега; наименование этой вкладки включает название соответствующего тега (в приведенном на Рисунок 3.32 примере -- это вкладка HR Tag);</li>
<li> вкладку Browser-specific (Специфические для броузера), на которой могут быть установлены атрибуты, введенные разработчиками конкретных броузеров; на этой вкладке возле поля каждого атрибута присутствует значок соответствующего броузера (Рисунок 3.33); все возможные значки броузеров и пояснения к ним приведены на Рисунок 3.34.</li>
Замечание
<br>Замечание<br><br>В некоторых диалоговых окнах вкладка Browser-specific может отсутствовать; при наличии специфических атрибутов они просто помечаются соответствующим значком.
<br><br>
<h1>Пример свертывания фрагментов документа с помощью Tag Tree</h1>Рисунок 3.49. Пример свертывания фрагментов документа с помощью Tag Tree<br><br><img src="image/primer-svertyvanija-fragmentov-dokumenta-s_1.gif" alt="Пример свертывания фрагментов документа с помощью Tag Tree"><br>
Чтобы развернуть свернутый фрагмент в окне документа, следует развернуть соответствующий тег в дереве и еще раз щелкнуть на кнопке Collapse document...<br>
Кроме этой кнопки, на панели инструментов окна Tag Tree имеется еще одна — Refresh (Обновить). Она позволяет обновить (построить заново) дерево тегов после редактирования документа.<br>
Если дерево тегов не умещается в окне Tag Tree, нижнюю границу окна можно переместить с помощью мыши, как показано на Рисунок 3.48. При этом, разумеется, изменится размер окна Tag Inspector.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index17.htm">Назад</a>
</td>
<td>
<h1>Работа с фрагментами текста и блоками</h1>Работа с фрагментами текста и блоками<br><br>
Редактор кода поддерживает большое число операций, выполняемых над выбранным фрагментом кода страницы. С целью ускорения работы пользователя для многих из этих операций предусмотрены горячие клавиши и вызов через контекстное меню.<br>
В таблице 3.1 приведены способы быстрого выбора (выделения) требуемого фрагмента.<br><br>
<h1>Работа с Tag Inspector и Tag Tree</h1>Работа с Tag Inspector и Tag Tree<br><br>
Инспектор тегов Tag Inspector обладает примерно теми же функциональными возможностями, что и редактор тегов, однако в некоторых случаях его применение оказывается более удобным по трем причинам:<br>
<li> Tag Inspector не мешает просмотру текста документа, поскольку для работы с ним используется окно ресурсов;</li>
<li> интерфейс Tag Inspector обеспечивает более гибкий переход от редактирования одного тега к редактированию другого, а также более удобный выбор конкретного редактируемого атрибута;</li>
<li> в Tаg Inspector реализована более полная поддержка синтаксиса языков сценариев.</li>
Еще большая функциональность Tag Inspector достигается при его совместном использовании с другой утилитой -- деревом тегов (Tag Tree), интерфейс которой также реализован на основе окна ресурсов. Основное предназначение Tag Tree - - быстрая навигация по документу, представленному в виде дерева тегов.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index15.htm">Назад</a>
</td>
<td>
<h1>Расширенный и сокращенный (стандартный) форматы окон редактора тегов для тега <А></h1>Рисунок 3.52. Расширенный и сокращенный (стандартный) форматы окон редактора тегов для тега <А><br><br><img src="image/rasshirennyj-i-sokrashhennyj-standartnyj-formaty_1.gif" alt="Расширенный и сокращенный (стандартный) форматы окон редактора тегов для тега <А>"><br>
Завершая описание основных инструментов, предоставляемых HomeSite, отметим, что многие типовые операции по строительству сайта могут быть выполнены с помощью так называемых мастеров (Wizards). Каждый мастер является специализированным инструментом, то есть обеспечивает решение одной, достаточно узкой задачи. Поэтому наиболее полезные из них будут представлены при рассмотрении соответствующих этапов строительства.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index18.htm">Назад</a>
</td>
<td>
<h1>Редактор кода</h1> Редактор кода<br><br>
Хотя редактор кода является текстовым редактором, тем не менее объем операций, которые пользователь вынужден выполнять в нем вручную, сведен к минимуму. Обеспечивается это большим количеством сервисных функций, входящих в состав редактора, а также его тесной интеграцией с другими инструментами для работы с кодом (они были перечислены выше).
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Редактор тегов Tag Editor</h1>Редактор тегов Tag Editor<br><br>
Редактор тегов фактически представляет собой своеобразную форму реализации мастера (или конструктора), который на основе полученной от пользователя информации генерирует различные элементы страницы. Соответственно, работа с редактором тегов заключается в установке различных параметров в отображаемых на экране диалоговых окнах.<br>
Состав конкретных элементов управления, имеющихся в окне, зависит от создаваемого элемента страницы. Тем не менее, формат диалогового окна редактора тегов можно считать достаточно стандартным. Основные его элементы приведены на Рисунок 3.32.<br><br>
<h1>Результат применения функции Tag Validation</h1>Рисунок 3.28. Результат применения функции Tag Validation<br><br><img src="image/rezultat-primenenija-funkcii-tag-validation_1.gif" alt="Результат применения функции Tag Validation"><br>
Следует отмстить, что в HomeSite помимо функции Tag Validation предусмотрено использование еще двух инструментов синтаксического контроля документов: встроенной утилиты Validator (Синтаксический анализатор) и внешнего приложения - - CSE HTML Validator производства фирмы AI Internet Solutions, которое может быть интегрировано с HomeSite (если оно установлено на компьютере). Оба эти инструмента значительно мощнее функции Tag Validation. Описание работы и настройки параметров встроенной утилиты Validator приведено в разделе <a href="../Glava%207/Index2.htm">Тестирование страниц </a>главе Тестирование сайта и выгрузка на удаленный сервер.<br>
Доступ к настраиваемым параметрам всех трех инструментов осуществляется посредством элементов управления вкладки Validation диалогового окна Settings. На ней имеются следующие элементы (Рисунок 3.29):<br><br>
<h1>Результат применения команды Strip Outermost Tags</h1>Рисунок 3.8. Результат применения команды Strip Outermost Tags<br><br><img src="image/rezultat-primenenija-komandy-strip-outermost-tags_1.gif" alt="Результат применения команды Strip Outermost Tags"><br>
Чтобы создать блок, необходимо:<br>
<li> 1. Выбрать в документе требуемый фрагмент и поместить его в буфер обмена.</li>
<li>2. В окне ресурсов перейти на вкладку Snippets, щелкнуть в пустой позиции правой кнопкой мыши и в контекстном меню выбрать команду Create Folder (Создать папку); по умолчанию новая папка для хранения «отрывков» создается в каталоге Ноmе Site 5\User Data\Snippets.</li>
<li> 3. Щелкнуть правой кнопкой мыши на значке папки и в контекстном меню выбрать команду Add Snippet (Добавить фрагмент).</li>
<li>4. В открывшемся диалоговом окне (Рисунок 3.9) вставить в поле Start Text из буфера фрагмент документа (при необходимости его можно ввести и с клавиатуры), в поле Description указать имя отрывка (в качестве имени можно использовать любую последовательность символов, допустимую в качестве имени файла).</li>
<li> 5. Щелкнуть на кнопке ОК.</li>
<br><br>
<h1>Представление в окне документа свернутых фрагментов</h1>Рисунок 3. 13. Представление в окне документа свернутых фрагментов<br><br><img src="image/risunok-3-13-predstavlenie-v-okne-dokumenta_1.gif" alt="Представление в окне документа свернутых фрагментов"><br>
В HomeSite предусмотрены два способа свертывания фрагментов:<br>
<li> ручной, при котором пользователь может свернуть любой фрагмент без учета его синтаксиса; </li>
<li> автоматический, при котором достаточно указать HomeSite тип тега, для которого следует выполнить операцию.</li>
Кроме того, пользователь имеет возможность изменять некоторые параметры визуального представления свернутых фрагментов.<br>
Чтобы быстро свернуть произвольный фрагмент, необходимо выполнить следующие действия:<br>
<li> Убедитесь, что в окне документа отображается служебное поле (Gutter); если нет -- щелкните на кнопке Show Gutter панели инструментов редактора кода.</li>
<li> Любым наиболее удобным для вас способом выделите сворачиваемый фрагмент; при этом в служебном поле появится линия, отмечающая размер выделенного фрагмента, а на ее концах -- две небольшие кнопки с символами «-» (Рисунок 3.14).</li>
<li> Щелкните левой кнопкой мыши на любой из двух кнопок; в результате выделенный фрагмент окажется свернут и заменен соответствующим значком (Рисунок 3.15).</li>
<br><br>
<h1>Ввод атрибутов тега с помощью функции Tag Insight</h1>Рисунок 3. 18. Ввод атрибутов тега с помощью функции Tag Insight<br><br><img src="image/risunok-3-18-vvod-atributov-tega-s-pomoshhju_1.gif" alt="Ввод атрибутов тега с помощью функции Tag Insight"><br>
Пользователю предоставлено право изменять некоторые параметры функции Tug Insight. Они размещены на вкладке Tag Insight диалогового окна Settings (Рисунок 3.19).<br><br>
<h1>Основной формат контекстного меню редактора кода</h1>Рисунок З.2. Основной формат контекстного меню редактора кода<br><br><img src="image/risunok-z-2-osnovnoj-format-kontekstnogo-menju_1.gif" alt="Основной формат контекстного меню редактора кода"><br>
<li> Edit Current Tag (Редактировать текущий тег) — открытие диалогового окна редактора тегов, соответствующего выбранному в документе тегу;</li>
<li> Insert Tag (Вставить тег) -- вызов утилиты Tag Chooser,</li>
<li> Insert Expression (Вставить выражение) — вызов редактора выражений;</li>
<li> Edit Include File (Редактировать включенный файл) — вызов приложения, ассоциированного с файлом, ссылка на который выбрана в документе;</li>
<li> Close (Закрыть) — закрывает текущий документ;</li>
<li> File (Файл) - - каскадное меню, содержащее некоторые команды из меню File главного окна HomeSite;</li>
<li> Cut (Вырезать), Сору (Копировать), Paste (Вставить) — стандартные команды редактирования, выполняемые с использованием буфера обмена;</li>
<li> Insert Dale/Time (Вставить дату/время) — каскадное меню, которое обеспечивает выбор формата и вставку в активную позицию документа текущего значения даты и времени;</li>
<li> Select Full Tag (Выбрать тег) - - выбор (выделение) тега, в пределах которого находится курсор, включая открывающую и закрывающую угловые скобки (Рисунок 3.3, вверху); для парных тегов данная команда обеспечивает выбор фрагмента документа от левой угловой скобки открывающего тега до правой угловой скобки закрывающего тега (Рисунок 3.3, внизу);</li>
<li> Selection (Выбранное) - - каскадное меню, которое содержит команды редактирования выбранного фрагмента; подробнее их применение будет рассмотрено в следующем подразделе;</li>
<li> группа команд, предназначенных для свертывания и развертывания фрагментов текста (Collapse Current Selection и др.); работа с ними описана в подразделе <a href="Index6.htm">«Управление визуальным представлением документа».</a></li>
Контекстное меню тега <IMG>, описывающего параметры сенсорной карты, дополнительно к перечисленным выше содержит команду Edit Image Map (Редактировать сенсорную карту), которая обеспечивает вызов утилиты Image Map Editor.<br>
<img src="image/risunok-z-2-osnovnoj-format-kontekstnogo-menju_2.gif" alt="Основной формат контекстного меню редактора кода"><br>
Рисунок 3.3. Результат применения команды Select Full Tag
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Состав команд меню Selection</h1>Рисунок З.4. Состав команд меню Selection<br><br><br><img src="image/risunok-z-4-sostav-komand-menju-selection_1.gif" alt="Состав команд меню Selection"><br><br>
<br><br>
<h1>Пример использования команды Convert Lines to Ordered List</h1>Рисунок З.5. Пример использования команды Convert Lines to Ordered List<br><br><br><img src="image/risunok-z-5-primer-ispolzovanija-komandy-convert_1.gif" alt="Пример использования команды Convert Lines to Ordered List"><br>
<li> Convert Lines to Ordered List (Преобразовать в упорядоченный список) — преобразование произвольной последовательности строк документа в нумерованный список посредством автоматической вставки соответствующих тегов форматирования; пример использования команды показан на Рисунок 3.5; </li>
<li> Convert Lines fa Unordered List (Преобразовать в неупорядоченный список) — преобразование произвольной последовательности строк документа в маркированный список посредством автоматической вставки соответствующих тегов форматирования;</li>
<li> Convert Lines to Table (Преобразовать в таблицу) -- преобразование произвольной последовательности строк документа в таблицу; при этом содержимое каждой строки помещается в отдельную строку таблицы, в один столбец, как показано на Рисунок 3.6; рамки для ячеек таблицы по умолчанию не используются;</li>
<li> Add Line Breaks <br> (Добавить разрыв строки <br>) — в позицию, определяемую текущим положением курсора, вставляется тег перехода на новую строку;</li>
<li> Strip Tags (Убрать теги) - - удаление тегов в выбранном фрагменте; при удалении тегов содержание, заключенное между открывающим и закрывающим тегами парного тега, сохраняется; если в выбранном фрагменте имеется несколько тегов, они будут удалены все; пример использования команды показан на Рисунок 3.7;</li>
<li>Strip Outermost Tags (Убрать охватывающие теги) — удаление тегов в выбранном фрагменте; данная команда отличается от предыдущей тем, что если в выбранном фрагменте имеется несколько тегов, то будет удален самый внешний (относительно содержания) парный тег; результат применения этой команды к фрагменту, приведенному на Рисунок 3.7, слева, показан на Рисунок 3.8;</li>
<li> Convert to Uppercase (Преобразовать к верхнему регистру) - - все строчные символы в выбранном фрагменте преобразуются в прописные (включая наименования тегов и их атрибутов);</li>
<li> Convert to Lowercase (Преобразовать к нижнему регистру) — вес прописные символы в выбранном фрагменте преобразуются в строчные (включая наименования тегов и их атрибутов).</li>
<br><br>
<br>
<br>
<h1>Пример использования команды Convert Lines to Table</h1>Рисунок З.6. Пример использования команды Convert Lines to Table<br><br><br><img src="image/risunok-z-6-primer-ispolzovanija-komandy-convert_1.gif" alt="Пример использования команды Convert Lines to Table"><br><br>
<br><br>
<h1>Пример использования команды Strip Tags</h1>Рисунок З.7. Пример использования команды Strip Tags<br><br><img src="image/risunok-z-7-primer-ispolzovanija-komandy-strip_1.gif" alt="Пример использования команды Strip Tags"><br>
Любой фрагмент текста документа может быть сохранен в качестве повторно используемого блока (Snippet, в дальнейшем — просто «блок») и затем помещен в тот же или в другой документ.<br><br>
<h1>Диалоговое окно Snippet</h1>Рисунок З.9. Диалоговое окно Snippet<br><br><img src="image/risunok-z-9-dialogovoe-okno-snippet_1.gif" alt="Диалоговое окно Snippet"><br>
Замечание
<br>Замечание<br><br>Поле End Text, присутствующее в диалоговом окне Snippet, используется в том случае, когда блок представляет собой парный тег, состоящий из двух частей. Первая из них (открывающий тег) помещается в поле Start Text, а вторая (закрывающий тег) — в поле End Text.
После создания нового блока на вкладке Snippets окна ресурсов появляется его значок (Рисунок 3.10).<br>
Чтобы вставить содержимое блока в текущий документ, достаточно переместить курсор в позицию вставки и дважды щелкнуть мышью на значке блока в окне ресурсов.<br>
Если необходимо вставить блок, состоящий из двух частей (Start Text и End Text), то в документе требуется выделить фрагмент, который должен быть окружен ими, и затем дважды щелкнуть мышью на значке блока.<br>
Выбранный в документе фрагмент текста может быть свернут с целью повышения компактности экранного представления документа. Подробнее об этой функции рассказано в следующем подразделе.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Создание и сохранение документа</h1>Создание и сохранение документа Команды и элементы интерфейса, связанные с созданием и сохранением редактируемого документа, не относятся непосредственно к редактору кода. Тем не менее при редактировании документа пользователь вынужден использовать их не реже, чем собственные функции редактора. Поэтому прежде чем перейти к описанию работы с редактором, еще раз перечислим средства, предоставляемые HomeSite при создании, открытии и сохранении файлов (подробнее см. раздел <a href="../Glava%201/Index20.htm">Работа с файлами</a> главы Знакомство с HomeSite и раздел <a href="../Glava%202/Index6.htm">Разработка файловой структуры сайта</a> главы Разработка структуры сайта).<br> Новый документ может быть создан н открыт в окне документа с помощью одной из следующих команд:
<li> New Document из меню File главного окна HomeSite либо с помощью одноименной кнопки панели инструментов этого окна; в обоих случаях документ создастся на основе шаблона, используемого по умолчанию (если не изменен соответствующий параметр на вкладке Locations диалогового окна Sellings); файл документа создастся в каталоге, который является в данный момент текущим (активным);</li>
<li> Multiple New Document из меню File главного окна HomeSite; данная команда отличается от предыдущей тем, что она обеспечивает создание нескольких экземпляров документа, число которых следует указать в дополнительном диалоговом окне;</li>
<li> New... из меню File главного окна HomeSite; в этом случае на экране появляется диалоговое окно, обеспечивающее выбор шаблона или мастера, с помощью которого должен быть создан документ; файл документа создастся в каталоге, который является в данный момент текущим (если иное не указано на вкладке Locations диалогового окна Settings);</li>
<li> Convert Text File... из меню File главного окна HomeSite; в этом случае на экране появляется диалоговое окно, обеспечивающее выбор исходного текстового файла; документ создается на основе «собственного» шаблона HomeSite;</li>
<li> File <img src="image/232323.gif" alt="Создание и сохранение документа">Create Here из контекстного меню списка файлов вкладки Files окна ресурсов; документ создается на основе шаблона, используемого по умолчанию; чтобы его открыть в окне документа, следует дважды щелкнуть мышью на значке файла;</li>
<li>Create a New Document из контекстного меню папки проекта на вкладке Projects окна ресурсов; документ создается в соответствующей папке на основе шаблона, используемого по умолчанию, и открывается в окне документа.</li>
<br>
Существующий документ может быть открыт в окне документа одним из следующих способов:<br><br>
<li> с помощью команды Open... меню File главного окна HomeSite либо с помощью одноименной кнопки панели инструментов этого окна; </li>
<li> посредством выбора нужного документа в каскадном меню Recently Files из меню File главного окна HomeSite; </li>
<li> с помощью команды Open from Web меню File главного окна HomeSite;</li>
<li> с помощью команды Insert File... меню File главного окна HomeSite; в этом случае содержимое файла будет вставлено в указанную позицию активного документа;</li>
<li> посредством двойного щелчка мышью на значке файла, представленного в одном из следующих списков:</li>
<li> в списке файлов текущего каталога на вкладке Files 1 или Files 2 окна ресурсов; </li>
<li> в списке файлов папки проекта на вкладе Projects окна ресурсов; </li>
<li> в списке файлов ресурсов проекта на вкладке Projects;</li>
<li> в дереве ссылок открытого документа на вкладке Site View окна ресурсов.</li>
<br>
Редактируемый документ может быть сохранен на диске одним из следующих способов:<br>
<li> с помощью команды Save из меню File главного окна HomeSite либо с помощью одноименной кнопки панели инструментов этого окна; документ будет сохранен под тем же именем и в том же каталоге, что и исходный файл;</li>
<li> с помощью команды Save as... из меню File главного окна HomeSite; имя файла и каталог, в котором следует сохранить документ, выбирает пользователь; файлу присваивается расширение, заданное на вкладке File Settings диалогового окна Settings;</li>
<li> с помощью команды Save as Template... из меню File главного окна HomeSite; имя шаблона выбирает пользователь; файл сохраняется в папке HomeSite 5\Wizards\Custom с расширением, заданным на вкладке File Settings диалогового окна Settings.</li>
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Свертывание произвольного фрагмента</h1>Рисунок 3.14. Свертывание произвольного фрагмента<br><br><br><img src="image/svertyvanie-proizvolnogo-fragmenta_1.gif" alt="Свертывание произвольного фрагмента"><br><br>
<br><br>
<h1>Способы быстрого выбора (выделения) фрагмента текста</h1>Таблица 3.1. Способы быстрого выбора (выделения) фрагмента текста<br><br>
<tr VALIGN="TOP"> <td VALIGN="TOP" "34"> Выбираемый фрагмент </td> <td VALIGN="TOP" "34"> Способ выбора </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "50"> Слово (неразрывная последовательность символов) </td> <td VALIGN="TOP" "50"> Дважды щелкнуть на слове левой кнопкой мыши </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "50"> Строка </td> <td VALIGN="TOP" "50"> Щелкнуть мышью слева от первого символа строки </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "90"> Последовательность строк </td> <td VALIGN="TOP" "90"> Установить указатель мыши слева от первого символа первой строки выделяемого фрагмента и, не отпуская кнопку мыши, протащить указатель до конца последней строки </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "69"> Произвольным фрагмент, начиная от текущей позиции курсора </td> <td VALIGN="TOP" "69"> Нажать клавишу <Shift> и, удерживая се, щелкнуть на последнем символе выделяемого фрагмента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "90"> Непарный тег (вместе с атрибутами) </td> <td VALIGN="TOP" "90"> Нажать клавишу <Ctrl> и, удерживая се, дважды щелкнуть в любой позиции между открывающей и закрывающей угловыми скобками </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "69"> Парный тег (вместе с содержимым) </td> <td VALIGN="TOP" "69"> Нажать клавиши <Shift> и <Ctrl> и, удерживая их, дважды щелкнуть либо внутри открывающего, либо внутри закрывающего тега </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "72"> Открывающий или закрывающий тег мирного тега </td> <td VALIGN="TOP" "72"> Нажать клавишу <Ctrl> и, удерживая ее, дважды щелкнуть на открывающем или закрывающем теге </td> </tr>
</table>
Над выбранным фрагментом текста могут быть выполнены как стандартные операции редактирования (Вырезать, Копировать и т. д.), так и специфические, учитывающие синтаксис языка разметки.<br>
Специфические команды редактирования выбранного фрагмента входят в состав каскадного меню Selection, которое, в свою очередь, является одним из пунктов контекстного меню редактора кода (Рисунок 3.4). Ниже рассмотрены некоторые из команд этого меню:<br><br>
<h1>Управление визуальным представлением документа</h1>Управление визуальным представлением документа<br><br>
Цветовая подсветка синтаксических конструкций является наиболее эффективным средством повышения читабельности документа. Помимо повышения наглядности, этот механизм способствует также и усвоению синтаксиса языка.<br>
HomeSite позволяет установить индивидуальную схему цветовой подсветки для каждого из поддерживаемых языков.<br>
Параметры используемых цветовых схем размещены на вкладке Color Coding (Цветовая маркировка) диалогового окна Settings (Рисунок 3.11).<br><br>
<h1>Установка глобальных параметров</h1> Установка глобальных параметров<br><br>
Под глобальными понимаются параметры, влияющие на работу всех рассмотрснных выше инструментов. Они относятся к двум аспектам работы с кодом:<br>
<li> визуальному представлению кода в окне документа;</li>
<li> выбору одного из возможных альтернативных вариантов кода.</li>
Глобальные параметры устанавливаются с помощью элементов управления, размещенных на двух вкладках диалогового окна Settings:<br>
Markup Languages (Языки разметки) -- параметры, применимые для всех языков, поддерживаемых HomeSite;<br>HTML/XHTML -- параметры, являющиеся специфическими для языков разметки HTML и XHTML.<br>
На вкладке Markup Languages могут быть установлены следующие параметры (Рисунок 3.50):<br>
<li> Lowercase all inserted lags — для имен тегов используются строчные буквы (то есть символы нижнего регистра);</li>
<li> Always insert colors as hexadecimal values — значения цвета представляются шестнадцатеричным кодом;</li>
<li> Force filenames to lowercase when inserting links — символы имен файлов в ссылках и URL приводятся к нижнему регистру;</li>
<br><br>
<h1>Вкладка Code Template диалогового окна Settings</h1>Рисунок 3.25. Вкладка Code Template диалогового окна Settings<br><br><img src="image/vkladka-code-template-dialogovogo-okna-settings_1.gif" alt="Вкладка Code Template диалогового окна Settings"><br>
Чтобы использовать шаблон при вводе кода, необходимо:<br>
<li> 1. С помощью элементов управления, имеющихся на вкладке Code Template диалогового окна Settings (Рисунок 3.25), создать требуемый шаблон.</li>
<li>2. В документе ввести шаблон и нажать комбинацию клавиш <Ctrl>+J (при этом курсор должен находиться непосредственно за последним символом шаблона).</li>
Вкладка Code Template содержит:<br>
<li> список шаблонов, реализованный в виде таблицы, которая состоит из двух столбцов:</li>
<li>Keyword (Ключевое слово) — перечень существующих шаблонов, то есть тех самых «псевдонимов», которые могут быть использованы в документе;</li>
<li>Description (Описание) — краткое пояснение к шаблону;</li>
<li> окно просмотра, в котором отображается реальный код, соответствующий выбранному в списке шаблону;</li>
<li> кнопка Add (Добавить); щелчок на ней открывает диалоговое окно, в котором можно ввести информацию о новом шаблоне (Рисунок 3.26);</li>
<li> кнопка Edit (Правка), с помощью которой можно вызвать то же диалоговое окно и внести изменения в описание шаблона;</li>
<li> кнопка Delete (Удалить) обеспечивает удаление из списка выбранного элемента .</li>
<br><br>
<h1>Вкладка Collapsed Text диалогового окна Settings</h1>Рисунок 3.16. Вкладка Collapsed Text диалогового окна Settings<br><br><img src="image/vkladka-collapsed-text-dialogovogo-okna-settings_1.gif" alt="Вкладка Collapsed Text диалогового окна Settings"><br>
К ним относятся:<br>
<li>параметры шрифта надписи, выводимой на значке свернутого фрагмента; собственно тип шрифта выбирается с помощью раскрывающегося списка Font, размер символов устанавливается с помощью дискретного счетчика Size, а для выбора цвета символов служит раскрывающийся список Foreground color,</li>
<li> цвет значка; он выбирается из раскрывающегося списка Background color,</li>
<li> количество первых символов фрагмента, выводимых на значке; устанавливается с помощью дискретного счетчика Length (characters);</li>
<li> возможность просмотра текста свернутого фрагмента; если флажок Show full text in him снят, то при установке указателя на значке фрагмента всплывающее окно не выводится; если флажок поставлен, то дополнительно с помощью дискретного счетчика Max no. of hint lines можно задать максимально допустимое число строк, отображаемых во всплывающем окне;</li>
<li> сохранение выделения фрагмента после его развертывания; если флажок Show full text in hint поставлен, то после развертывания фрагмента он отображается в окне документа как выбранный (выделенный); такой режим удобен при краткосрочном развертывании, поскольку позволяет быстро вновь свернуть фрагмент (либо выполнить над ним какую-либо другую операцию, например удалить или копировать);</li>
<li> возможность сохранения фрагментов в свернутом состоянии при записи документа на диск и при последующем открытии; такая возможность реализуется, если поставлен флажок Preserve collapsed text on file open/save; в этом случае с помощью дискретного счетчика Number of days to retain... можно задать количество дней, в течение которых в файле будет сохраняться информация о свернутых фрагментах.</li>
Установленные значения параметров визуального представления значка свернутого фрагмента можно оценить с помощью окна предварительного просмотра Sample.<br><br>
<h1>Вкладка Color Coding диалогового окна Settings</h1>Рисунок 3.11. Вкладка Color Coding диалогового окна Settings<br><br><img src="image/vkladka-color-coding-dialogovogo-okna-settings_1.gif" alt="Вкладка Color Coding диалогового окна Settings"><br>
На этой вкладке имеются следующие элементы управления:<br>
<li> список существующих схем; он реализован в виде таблицы, состоящей из трех столбцов:</li>
<li> Scheme (Схема) - перечень наименований схем; по сути, этот столбец отражает перечень языков и их подмножеств, синтаксис которых способен распознавать HomeSite;</li>
<li> Extensions (Расширения) - - каждая строка этого столбца содержит список расширении файлов, которые соответствуют данной схеме; на самом деле при открытии документа имеет место обратная зависимость: HomeSite выбирает схему подсветки на основе расширения открытого файла; если расширение отсутствует в списке, то используется схема, установленная по умолчанию;</li>
<li> Default? (Использовать по умолчанию?) - - столбец содержит признак схемы, используемой по умолчанию; этот признак (Yes) может быть установлен только для одной из существующих схем;</li>
<li> кнопка Edit Scheme (Редактировать схему); она обеспечивает открытие диалогового окна, предоставляющего возможность просмотра и изменения схемы, выбранной в списке; подробнее его формат будет рассмотрен ниже;</li>
<li> кнопка Edit Extensions (Изменить расширения); она обеспечивает открытие диалогового окна, с помощью которого можно изменить список расширений файлов, связанных с данной схемой;</li>
<li> кнопка Set as Default (Назначить используемой по умолчанию); она позволяет назначить выбранную в списке схему используемой по умолчанию.</li>
Диалоговое окно для редактирования схемы имеет следующий формат (Рисунок 3.12):<br><br>
<h1>Вкладка Editor диалогового окна Settings</h1>Рисунок 3.30. Вкладка Editor диалогового окна Settings<br><br><img src="image/vkladka-editor-dialogovogo-okna-settings_1.gif" alt="Вкладка Editor диалогового окна Settings"><br>
Всего таких параметров более двух десятков, поэтому обратим внимание читателя лишь на те, которые представляются наиболее важными:<br>
<li> набор символов (кодовая таблица), используемый при создании документа; этот параметр задастся посредством двух раскрывающихся списков: Font (Шрифт) и Charset (Набор символов): подробнее об управлении кодировкой документа см. раздел <a href="../Glava%201/Index25.htm">Управление кодировкой текстовых файлов </a>главы Знакомство с HomeSite;</li>
<li> цвет символов текста (содержания) документа и цвет фона окна документа; эти параметры устанавливаются с помощью раскрывающихся списков Foreground color и Background color соответственно; на эти два параметра мы указали только для того, чтобы подчеркнуть: они влияют лишь на визуальное представление документа в окне редактора кода и совершенно не связаны с цветовой схемой документа и фоном окна броузера при просмотре документа (то есть с атрибутом BGCOLOR тега <BODY>);</li>
<li> автоматическая установка отступа для следующей строки; выше уже отмечалось, что правильное форматирование документа значительно повышает его читабельность; чтобы разрешить автоотступ, следует установить флажок Auto indent в списке параметров Options;</li>
<li> возможность перетаскивания фрагментов текста с помощью мыши определяется состоянием флажка Allow text drag-and-drop;</li>
<li> возможность «отката» (отмены операции) после сохранения файла на диске; определяется состоянием флажка Allow undo after save;</li>
<li> использование двойных и одиночных кавычек в качестве разделителей между словами; использование кавычек в языках разметки не стандартизовано, поэтому в разных версиях броузеров их присутствие или, наоборот, отсутствие, может интерпретироваться по-разному; вы можете разрешить или запретить использование двойных и одиночных кавычек в качестве разделителей, изменив состояние флажков Double quote as word delimiter и Single quote as word delimiter,</li>
<li> возможность импорта HTML-кода из документов, созданных другими приложениями, в виде обычного текста; применение такой возможности даст ощутимый эффект при импорте из тех приложений, которые используют собственные дополнительные параметры разметки (к таким приложениям относится, например, MS Word); в качестве иллюстрации к сказанному на Рисунок 3.31 приведены результаты двух вариантов импорта содержимого HTML-файла, созданного с помощью MS Word: слева вверху -- без очистки, справа внизу -- тот же фрагмент, импортированный как гладкий текст; чтобы воспользоваться функцией очистки, следует установить флажок Treat HTML dropped from external applications as plain text;</li>
<li> возможность автоматического преобразования имен символов, имеющих в кодовой таблице ASCII код больше 127, в их представление; эта возможность реализуется при установке флажка Automatically convert extended characters (characters above ASCII 127...);</li>
<li> длина строки (в символах); этот параметр устанавливается с помощью дискретного счетчика Right Margin Position,</li>
<li> число мест в буфере обмена; значение параметра устанавливается с помощью дискретного счетчика Maximum clipboard entries, no умолчанию значение равно 36; если емкость буфера исчерпана, самое старое значение будет замещено новым; максимально допустимое число мест равно 200.</li>
<img src="image/vkladka-editor-dialogovogo-okna-settings_2.gif" alt="Вкладка Editor диалогового окна Settings"><br>
Рисунок 3.31. Пример использования функции очистки HTML-кода
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index11.htm">Назад</a>
</td>
<td>
<h1>Вкладка HTML/XHTML диалогового окна Settings</h1>Рисунок 3.51. Вкладка HTML/XHTML диалогового окна Settings<br><br><br><img src="image/vkladka-html-xhtml-dialogovogo-okna-settings_1.gif" alt="Вкладка HTML/XHTML диалогового окна Settings"><br>
<li> Use <tille> of dragged documents as the link description — при создании ссылки на перетаскиваемый документ (файл) в качестве текста ссылки автоматически вставляется заголовок этого документа (подробнее о способах создания ссылок см. раздел «Текстовые ссылки» пятой главы);</li>
<li> Display DTD selection dialog when the XHTML namespace is specified - при преобразовании HTML-документа в XHTML-докумснт на экран выводится диалоговое окно, позволяющее выбрать формат тега <!DOCTYPE>;</li>
<li> Compatibility mode for older browsers — при работе с XHTML-доку-мснтом для некоторых тегов используются их альтернативные варианты, «понятные» ранним версиям броузеров;</li>
<li> Use these tags when the "Align Center" toolbutton is pressed — данный параметр определяет результат использования кнопки Align Center, расположенной на вкладке Common панели быстрой вставки; по умолчанию щелчок на ней обеспечивает вставку в код документа тега <DIV> с атрибутом ALIGN="center"; вы можете изменить установку, введя требуемые значения в поля Start и End;</li>
<li> Use these lags when the "Align Right" toolbutton is pressed — данный параметр определяет результат использования кнопки Align Right, расположенной на вкладке Common панели быстрой вставки; по умолчанию щелчок на ней обеспечивает вставку в код документа тега <DIV> с атрибутом align="right"; вы можете изменить установку, введя требуемые значения в поля Start и End;</li>
<li> Use the VTML Tag Dialog for:... -- данный параметр обеспечивает выбор формата диалогового окна редактора тегов; альтернативные варианты существуют для трех тегов: <А>, <BODY> и <IMG>; если соответствующий флажок поставлен, то используется расширенный формат, в противном случае -- сокращенный; например, на Рисунок 3.52 показаны расширенный и сокращенный (стандартный) форматы для тега <А>.</li>
<br><br>
<br>
<br>
<h1>Вкладка Markup Languages диалогового окна Settings</h1>Рисунок 3.50. Вкладка Markup Languages диалогового окна Settings<br><br><img src="image/vkladka-markup-languages-dialogovogo-okna-settings_1.gif" alt="Вкладка Markup Languages диалогового окна Settings"><br>
<li> When editing tags, return the output on a single line — после редактирования атрибутов тега с помощью Tag Editor все его атрибуты выводятся на одной строке, независимо от того, как текст документа был отформатирован ранее;</li>
<li> Include closing <br> when inserting paragraph tag — при вставке тега параграфа <Р> после него автоматически вставляется закрывающий тег </Р>;</li>
<li> Inserting numeric values surrounded by quotes (Tag Inspector) -- числовые значения атрибутов, установленные с помощью Tag Inspector, заключаются в кавычки;</li>
<li> Minimize empty tags — если текущий документ является XHTML-доку-мснтом, то кнопки на панели QuickBar обеспечивают вставку свернутых вариантов тегов форматирования (например, вместо парного тега <BR> </BR> вставляется <BR />);</li>
<li> Enforce required attribute validation (Tag Editor) - - редактор тега не вставляет тег в код страницы, если для всех обязательных атрибутов не заданы значения;</li>
<li> Use <EM> tag in place of <l> —для установки стиля «курсив» вместо тега <1> используется тег <ЕМ>;</li>
<li> Use <STRONG> tag in place of<B> — для установки стиля «полужирный» вместо тега <В> используется тег <STRONG>;</li>
<li> Insert special characters as... — с помощью соответствующего списка выбирается формат представления в коде документа специальных символов; возможны три варианта:</li>
<li> символ представлен его именем (например, для знака амперсанда -&атр);</li>
<li> символ представлен его десятичным кодом в используемой кодовой таблице;</li>
<li> символ представлен его шсстнадцатеричным кодом.</li>
На вкладке HTML/XHTML могут быть установлены следующие параметры (Рисунок 3.51):<br><br>
<h1>Вкладка Tag Insight диалогового окна Settings</h1>Рисунок 3.19. Вкладка Tag Insight диалогового окна Settings<br><br><img src="image/vkladka-tag-insight-dialogovogo-okna-settings_1.gif" alt="Вкладка Tag Insight диалогового окна Settings"><br>
К ним относятся:<br>
<li> флажок Enable Tag Insight... (Разрешить автоматическую вставку тега); если он установлен, то данная функция может использоваться при редактировании страницы;</li>
<li> ползунковый регулятор Delay before displaying tag insight (Задержка перед включением автоматической вставки); регулятор позволяет установить задержку (в секундах) перед появлением списка тегов на экране;</li>
<li> флажок Enable Tag Insight Tag List (Разрешить использование списка тегов); если флажок снят, то список тегов на экран не выводится, используется только список атрибутов; если же флажок установлен, то пользователь может скорректировать список тегов, который будет появляться на экране;</li>
<li> список тегов, который должен отображаться на экране при автоматической вставке;</li>
<li> кнопка Add (Добавить); нажав ее, вы откроете диалоговое окно, в котором можно ввести наименование добавляемого тега (при необходимости -- вместе с каким-либо атрибутом, Рисунок 3.20);</li>
<li> кнопка Delete (Удалить) обеспечивает удаление из списка выделенного элемента.</li>
Замечание
<br>Замечание<br><br>При добавлении нового элемента в список тегов следует быть достаточно внимательным, поскольку HomeSite не контролирует синтаксис вводимого тега и его атрибута.
<br><br>
<h1>Вставка тегов с помощью Tag Chooser</h1>Вставка тегов с помощью Tag Chooser<br><br>
Утилита Tag Chooser позволяет вставлять в текст документа теги или другие элементы кода из любого языка, поддерживаемого HomeSite.<br>
Технология работы Tag Chooser во многом аналогична применению панели быстрой вставки: теги без атрибутов вставляются в документ автоматически, а в том случае, когда требуется установка значений атрибутов, Tag Chooser обращается за помощью к редактору тегов и открывает соответствующее диалоговое окно.<br>
Чтобы активизировать Tag Chooser, необходимо щелкнуть правой кнопкой мыши в свободной позиции документа и в контекстном меню выбрать команду Insert Tag...(Вставить тег).<br>
Окно Tag Chooser имеет следующий формат (Рисунок 3.42).<br>
Оно разделено на два подокна:<br>
<li> левое содержит список поддерживаемых языков, а также дерево категорий тегов для каждого языка;</li>
<li> в правом отображается список тегов, относящихся к выбранной категории; для парных тегов отображаются открывающий и закрывающий теги.</li>
<br><br>
<h1>Выбор языка сценария</h1>Рисунок 3.45. Выбор языка сценария<br><br><br><img src="image/vybor-jazyka-scenarija_1.gif" alt="Выбор языка сценария"><br><br>
<br><br>
<h1>Выбор обработчика события</h1>Рисунок 3.46. Выбор обработчика события<br><br><img src="image/vybor-obrabotchika-sobytija_1.gif" alt="Выбор обработчика события"><br>
После выполнения описанной процедуры Tag Inspector сгенерирует соответствующий код заголовка сценария и вызов функции-обработчика и поместит их в текст редактируемого документа.<br>
Подробнее о создании интерактивных страниц с помощью HomeSite рассказано в главе <a href="../Glava%206/Index0.htm">Создание интерактивных страниц.</a><br>
В некоторых случаях удобнее работать со списком атрибутов, упорядоченном по категориям. Чтобы перейти в такой формат, достаточно щелкнуть на кнопке Categorized на панели инструментов инспектора тегов.<br>
В данном случае под категорией атрибута разработчики HomeSite понимают один из следующих признаков (Рисунок 3.47):<br>
<li> является атрибут обязательным или нет; если тег может использоваться без атрибутов, то вес его допустимые атрибуты входят в категорию необязательных (Optional); обязательные атрибуты относятся к категории Required; если атрибут является обязательным только для языка HTML, то он входит в категорию Required HTML;</li>
<li> определен ли атрибут в версии HTML 4.0; если да, то он входит в категорию «HTML 4.0»;</li>
<li> тип и версия броузера, который поддерживает данный атрибут.</li>
Поскольку приведенные выше признаки не являются взаимоисключающими, то один и тот же атрибут может входить одновременно в несколько категорий (как, например, атрибут WIDTH тега <TABLE>, см. Рисунок 3.47).<br>
Если редактируемый тег имеет большое количество атрибутов, то для улучшения зрительного восприятия списка атрибутов вы можете свернуть те категории, которые вас не интересуют. Для этого достаточно щелкнуть мышью на кнопочке с символом «-», расположенной возле названия категории.<br>
<img src="image/vybor-obrabotchika-sobytija_2.gif" alt="Выбор обработчика события"><br>
Рисунок 3.47. Упорядочивание атрибутов тега по категориям
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index16.htm">Назад</a>
</td>
<td>
<h1>Вывод справки по тегу</h1>Рисунок 3.37. Вывод справки по тегу<br><br><img src="image/vyvod-spravki-po-tegu_1.gif" alt="Вывод справки по тегу"><br>
Вызов редактора тегов выполняется одним из следующих способов:<br>
<li> щелкнуть в окне документа правой кнопкой мыши на теге, атрибуты которого требуется изменить, и в контекстном меню выбрать команду Edit Current Tag (Редактировать текущий тег);</li>
<li> установить курсор в позицию, куда требуется поместить новый тег, и щелкнуть соответствующую кнопку на панели быстрой вставки.</li>
Второй способ является менее предсказуемым, поскольку при вставке некоторых тегов для них используются значения атрибутов, заданные по умолчанию. В этом случае диалоговое окно редактора'тегов на экран не выводится. Подробнее особенности работы с панелью быстрой вставки описаны в следующем подразделе, а также в других разделах этой главы (применительно к созданию конкретных элементов страницы).
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index12.htm">Назад</a>
</td>
<td>
<h1>Свернутый фрагмент может быть перемещен </h1>Замечания<br><br>1. Свернутый фрагмент может быть перемещен в другую позицию с помощью мыши, как любой другой фрагмент документа.<br>2. Разрешается создавать вложенные свернутые фрагменты, то есть внутри сворачиваемого фрагмента могут присутствовать другие свернутые фрагменты.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Значки броузеров используемые в диалоговых окнах редактора тегов</h1>Рисунок 3.34. Значки броузеров, используемые в диалоговых окнах редактора тегов<br><br><br><img src="image/znachki-brouzerov-ispolzuemye-v-dialogovyh-oknah_1.gif" alt="Значки броузеров используемые в диалоговых окнах редактора тегов"><br>
<li> вкладку Style Sheets/Accessibility (HTML 4.0) (Таблицы стилей/доступность - - для HTML 4.0), которая позволяет устанавливать значения дополнительных атрибутов тега, поддерживаемых только в HTML 4.0; эти атрибуты разделены на вкладке на две группы (Рисунок 3.35):</li>
<li> связанные с описанием стиля элемента с помощью CSS;</li>
<li> атрибуты, обеспечивающие наличие у страниц публикации свойства доступности (Accessibility);</li>
Замечание
<br>Замечание<br><br>В свое время организация W3C выступила с инициативой, которая получила название Web Accessibility Initiative (Доступность Web). Ее суть состоит в том, что Web-публикации должны учитывать в первую очередь интересы и возможности потенциальных посетителей (например, отсутствие продвинутых аппаратно-программных средств, проблемы со зрением и т. д.). Компания Macromedia (как, впрочем, и автор предыдущих версий HomeSite — компания Allaire) поддержала эту инициативу. Правда, пока весьма простым способом — введя в диалоговые окна редактора тегов возможность установки атрибутов, обеспечивающих текстовую замену графических и мультимедийных элементов страниц.
<br><br>
<br>
<br>
<h1>Разработка страниц публикации</h1>
<h1>Автоматическое форматирование фрагмента текста</h1>Рисунок 4.9. Автоматическое форматирование фрагмента текста<br><br><img src="image/avtomaticheskoe-formatirovanie-fragmenta-teksta_1.gif" alt="Автоматическое форматирование фрагмента текста"><br>
Тег <HR> обеспечивает удобный и эффективный способ форматирования больших текстовых фрагментов, а также позволяет в какой-то степени оживить страницу, если она не содержит других графических элементов.<br>В последних версиях броузеров для этого тега поддерживаются дополнительные атрибуты, позволяющие указывать цвет, ширину, расположение и некоторые /другие параметры разделителей. На Рисунок 4.10 показано окно редактора тегов, с помощью которого могут быть установлены следующие атрибуты тега <HR>:<br>
<li> способ выравнивания разделителя по ширине страницы (атрибут ALIGN); значение выбирается из раскрывающегося списка Align;</li>
<li> ширина разделителя (точнее, его длина) (атрибут WIDTH); значение вводится в текстовом поле Width;</li>
<li> высота («толщина») разделителя (атрибут SIZE); значение вводится в текстовом поле Size; </li>
<li> отсутствие «тени» (атрибут ); наличие атрибута определяется флажком No Shading (Без затенения): если он снят, то разделитель отображается с «тенью».</li>
На вкладке Browser-specific можно дополнительно установить цвет разделителя (атрибут COLOR в настоящее время поддерживается только броузером MSIE).<br>
<img src="image/avtomaticheskoe-formatirovanie-fragmenta-teksta_2.gif" alt="Автоматическое форматирование фрагмента текста"><br>
Рисунок 4.10. Окно редактора тегов для установки атрибутов тега <HR>
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Диалоговое окно для создания нового стиля</h1>Рисунок 4.46. Диалоговое окно для создания нового стиля<br><br><img src="image/dialogovoe-okno-dlja-sozdanija-novogo-stilja_1.gif" alt="Диалоговое окно для создания нового стиля"><br>
В результате выполненных действий в окне редактирования появится имя стиля с парой фигурных скобок. Чтобы ввести значения параметров нового стиля, возможны два способа действий:<br>
<li> установить курсор после открывающей фигурной скобки и нажать клавишу <Spacebar> (пробел); после небольшой задержки на экране появится список параметров, которые могут установлены для данного стиля (Рисунок 4.48, вверху); выбрать нужный параметр и нажать <Enter>; затем аналогичным образом вставить значение параметра (Рисунок 4.48, внизу); </li>
<li> установить курсор после открывающей .фигурной скобки, и в окне Style Inspector в списке параметров щелкнуть на требуемой ячейке; затем либо ввести с клавиатуры, либо выбрать из раскрывающегося списка нужное значение.</li>
<br><br>
<h1>Диалоговое окно для создания списка</h1>Рисунок 4.12. Диалоговое окно для создания списка<br><br><img src="image/dialogovoe-okno-dlja-sozdanija-spiska_1.gif" alt="Диалоговое окно для создания списка"><br>
В результате выполнения описанной процедуры в код документа будет помещен тег-контейнер, соответствующий типу выбранного списка ( или ), и теги элементов списка с наименованиями пунктов.<br>
Кнопки Unordered List (Неупорядоченный список), Ordered List (Упорядоченный список) и List Item (Пункт списка) полезно применять в тех случаях, когда требуется сформировать список с нестандартной структурой (в частности, с использованием вложенных списков другого типа).<br><br>
<h1>Диалоговое окно Font редактора тегов</h1>Рисунок 4.19. Диалоговое окно Font редактора тегов<br><br><img src="image/dialogovoe-okno-font-redaktora-tegov_1.gif" alt="Диалоговое окно Font редактора тегов"><br>
Относительно применения этих списков требуется сделать следующее пояснение. Приоритет каждого из этих списков соответствует его расположению в окне: чем выше список, тем выше его приоритет. При этом список, в котором значение отсутствует, в «рейтинге» не участвует. Другими словами, вы можете установить требуемые значения во всех трех списках, но в код страницы будет помещен только один тег <FONT> со значением атрибута SIZE, соответствующем значению в верхнем из списков. Например, если в списке Absolute выбрать значение 4, а в списке Relative- установить -2, то в страницу будет вставлен тег <FONT SIZE?="4">.<br>
На вкладке Browser-specific может быть установлено значение единственною специфического атрибута, поддерживаемого броузером Netscape — Point-size. Этот атрибут позволяет указать «физический» размер шрифта — в пунктах (или в точках), размер которых зависит от разрешения монитора.<br>
Еще раз отметим, что HomeSite способен вставлять парные теги «вокруг» выделенного участка кода страницы. Поэтому, если требуется изменить параметры шрифта для некоторого фрагмента текста, введенного ранее, достаточно выделить этот фрагмент в окне документа, и после этого щелкнуть на соответствующей кнопке.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index9.htm">Назад</a>
</td>
<td>
<h1>Диалоговое окно редактора тегов для тега <BODY></h1>Рисунок 4.6. Диалоговое окно редактора тегов для тега <BODY><br><br><img src="image/dialogovoe-okno-redaktora-tegov-dlja-tega-body_1.gif" alt="Диалоговое окно редактора тегов для тега <BODY>"><br>
Большая часть атрибутов тега, влияющих на визуальные параметры страницы, устанавливаются на вкладке BODY Tag:<br>
<li> раскрывающийся список Background Color (Цвет фона) обеспсчивает выбор цвета фона страницы (атрибут BGCOLOR); выбранный цвет вставляется в текст страницы по умолчанию в виде шестнадцатеричного кода;</li>
<li> в поле Background Image (Фоновое изображение) указывается адрес изображения, используемого для формирования фона страницы (атрибут BACKGROUND); </li>
<li> раскрывающийся список Text Color (Цвет текста) обеспечивает выбор цвета текста страницы (атрибут TEXT); </li>
<li> следующие три раскрывающихся списка предназначены для выбор, цвета гиперссылок в различных состояниях:</li>
<li>Link Color (Цвет ссылки) — цвет ссылки в исходном состоянии (атрибут LINK);</li>
<li>Visited Link Color (Цвет посещенных ссылок) — цвет посещении; ссылок (атрибут VLINK);</li>
<li>Active Link Color (Цвет активных ссылок) — цвет активных ссылог (атрибут ALINK).</li>
Выбранную цветовую схему ссылок можно оценить с помощью окна предварительного просмотра; в этом же окне отображается цвет фона и выбранное фоновое изображение.<br>
Элементы управления, расположенные на вкладке Browser-specific, позволяют установить размеры полей страницы (Рисунок 4.7). Поскольку различные версии броузеров используют различные варианты соответствующих атрибутов, то для обеспечения большей совместимости страницы рекомендуется ввести значения во все поля этой вкладки.<br>
Любой из установленных атрибутов может быть впоследствии быстро скорректирован с помощью Tag Inspector либо посредством повторного вызова редактора тегов.<br>
Если редактируемая страница является первой (начальной) страницей публикации либо открывает какой-либо ее раздел, то после завершения установки общих параметров страницы полезно сохранить ее в качестве шаблона. Это позволит в дальнейшем с минимальными затратами времени и сил выполнить одно из важнейших требований к дизайну публикации — единство стиля (по крайней мере, в пределах некоторого логически завершенного раздела). Чтобы использовать страницу в качестве шаблона при создании последующих страниц, необходимо:<br><br>
<h1>Форматирование текста</h1>Форматирование текста<br><br>
Кнопки для форматирования текста собраны в основном на вкладке Common. К ним, в частности, относятся следующие (Рисунок 4.8):<br><br>
<h1>Кнопка Style Editor позволяет</h1>
В окне просмотра отображается текст, оформленный в соответствии с имеющимися в файле стилями. При этом используется следующее правило:<br>
<li> для представления стиля класса выводится строка Class <имя стиля>; </li>
<li> для представления стиля конкретного элемента страницы выводится строка ID <имя стиля>; </li>
<li> для представления стиля переопределенного тега выводится строка Element <имя тега>.</li>
Например, в окне просмотра, приведенном на Рисунок 4.44, показаны три стиля (два стиля класса и один стиль элемента), с помощью которых была сформирована страница, приводившаяся на<a href="Index21.htm#100"> Рисунок 4.36.</a><br>
Эффективность редактирования стилей существенно повышается за счет использования инструмента Style Inspector. Его окно состоит из двух вкладок: Properties (Свойства) и Selectors (Селекторы).<br>
Вкладка Properties содержит перечень параметров, которые могут быть использованы при создании стиля. При выборе в окне редактирования некоторого стиля (а точнее, при установке указателя на любой его параметр) в окне Style Inspector выводятся значения, установленные для данного стиля. Например, на Рисунок 4.44 в окне Style Inspector указаны значения параметров, установленные для стиля tl (цвет символов — silver, смещение от верхнего края окна броузера — 70 пикселов и т. д.). Образец применения этого стиля выводится в дополнительном окне просмотра, расположенного ниже списка параметров (с помощью слова Sample).<br>
В верхней части окна Style Inspector имеется раскрывающийся список, который содержит перечень версий CSS, поддерживаемых TopStyle Lite.<br>
На вкладке Selectors содержимое CSS-файла представлено в виде дерева, в котором имеющиеся в файле стили упорядочены по категориям (Рисунок 4.45):<br>
<li> Elements — стили, переопределяющие теги HTML;</li>
<li> Classes — стили классов;</li>
<li> IDs — индивидуальные стили.</li>
<br><br>
<h1>Контекстное меню миниатюры</h1>Рисунок 4.25. Контекстное меню миниатюры<br><br><img src="image/kontekstnoe-menju-miniatjury_1.gif" alt="Контекстное меню миниатюры"><br>
<li> Reset to current folder (Обновить с помощью текущей папки) — при выборе команды содержимое окна обновляется; команду целесообразно применять после того, как изменялось содержимое текущей папки, либо был изменен текущий каталог;</li>
<li> Open (Открыть) — выбор команды приводит к открытию изображения с помощью ассоциированного с ним приложения (например, графического редактора Paint Shop Pro или программы просмотра ACDSee);</li>
<li>Properties (Параметры) — команда обеспечивает вывод на экран окна, в котором представлено полноформатное изображение и его параметры (см. <a href="../Glava%201/Index22.htm#50">Рисунок 1.30</a>); </li>
<li>Insert into current document (Вставить в текущий документ) — в код страницы будет добавлен тег <IMG> с соответствующими атрибутами;</li>
<li>Close results (Закрыть результаты) — команда закрывает окно результатов.</li>
Завершая раздел, посвященный работе с графическими файлами, хотелось бы еще раз обратить внимание читателя на основную проблему, которую приходится решать всем Web-дизайнерам, независимо от их опыта и уровня подготовки. Заключается она в отыскании компромисса между изысканностью художественного (читай — графического) оформления страниц и приемлемым временем загрузки этих страниц броузером читателя.<br>
В связи с этим уместно привести еще раз известные рекомендации по использованию графики на Web-страницах:<br>
<li> 1. Общий объем графики, используемой на одной странице, не должен превышать 50 кб.</li>
<li> 2. Для сокращения объема графических файлов выбирайте формат изображения с учетом его вида и цветовой гаммы.</li>
<li> 3. Указывайте в теге <IMG> действительные размеры изображения, чтобы броузер не тратил время на их определение и последующее масштабирование изображения;</li>
<li> 4. При создании изображений используйте минимально необходимую цветовую палитру; не пренебрегайте средствами оптимизации изображений, имеющимися в графических редакторах.</li>
<li> 5. Не помещайте на страницы крупные изображения (размер которых превосходит 500x300 пикселов); если без этого не обойтись, замените рисунок на основной странице миниатюрой; помните: указание уменьшенных размеров рисунка в теге <IMG> сокращения времени загрузки не дает.</li>
<li>6. Как можно более эффективно реализуйте возможности броузеров по кэшированию содержимого страниц; если один и тот же рисунок помещен на нескольких страницах, включите в состав сайта единственный его экземпляр.</li>
<li>7. Где это возможно, используйте вместо графики стилевое оформление шрифта.</li>
<li> 8. Аналогичная рекомендация в отношении фона: если можете обойтись без графического фона — обходитесь.</li>
<li> 9. При создании фона на основе графических изображений используйте элемент заполнения размером не более. 100x100 пикселов.</li>
<li>10. Не злоупотребляйте анимацией.</li>
И, наконец, обязательно тестируйте страницы, содержащие графику, по времени загрузки.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index13.htm">Назад</a>
</td>
<td>
<h1>На вкладке Browserspecific устанавливаются размеры полей страницы</h1>Рисунок 4.7. На вкладке Browser-specific устанавливаются размеры полей страницы<br><br><br><img src="image/na-vkladke-browser-specific-ustanavlivajutsja_1.gif" alt="На вкладке Browserspecific устанавливаются размеры полей страницы"><br>
<li> 1. В меню File главного окна HomeSite выбрать команду Save as Template... и затем в открывшемся диалоговом окне ввести имя шаблона (подробнее о создании шаблонов см. раздел <a href="../Glava%201/Index20.htm">Работа с файлами</a> главы Знакомство с HomeSite.</li>
<li> 2. В меню Options главного окна HomeSite выбрать команду Settings, перейти на вкладку Locations и в поле Default template указать адрес шаблона.</li>
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<br><br>
<h1>Общий подход к подготовке текстовых материалов</h1>Общий подход к подготовке текстовых материалов<br><br>
Разумеется, стиль определяется в первую очередь характером освещаемой предметной области и спецификой вашей аудитории. Но при всем при том любому посетителю значительно проще будет воспринимать написанное, если вы станете придерживаться трех правил:<br>
<li> не пишите длинно; всегда есть возможность разбить одно длинное предложение на два коротких;</li>
<li> не используйте снисходительных интонаций; даже если вы считаете себя корифеем в данной области, вы должны быть благодарны читателю, посетившему ваши страницы;</li>
<li> не используйте для выражения своих мыслей слова, в точном значении которых вы не до конца уверены.</li>
Если текстовая часть документа занимает более двух экранов, позаботьтесь о разделении ее на фрагменты, каждый из которых будет иметь свой заголовок. Если же объем текста настолько велик, что фрагменты требуют дальнейшего разбиения, не стесняйтесь использовать подзаголовки более низких уровней (благо в HTML их предусмотрено шесть). При этом уровни заголовков должны изменяться последовательно: после заголовка первого уровня не следует применять заголовок третьего или четвертого уровней.<br>
Надо сказать, что существующие HTML-редакторы не очень-то приспособлены для работы именно с текстовым содержимым документа. При всех достоинствах HomeSite это замечание относится и к нему. И хотя он позволяет применять различные варианты форматирования текста (подробнее о них рассказано ниже), но не обеспечивает наглядного представление структуры текстовой части Web-страницы. Разумеется, выполнив очередную операцию по форматированию текста, вы можете перейти в режим просмотра страницы с помощью броузера, однако это не совсем то, что требуется.<br>
Вообще, большие фрагменты текста значительно удобнее набирать с помощью «офисных» текстовых редакторов, и затем конвертировать их в формат HTML. Правда, полученный таким образом документ во многих случаях содержит не совсем чистый HTML-код, сохраняя информацию об особенностях того инструмента, с помощью которого был создан. В частности, документ, созданный в MS Word, практически всегда содержит встроенные таблицы стилей, а так же фрагменты XML-кода. Во многих случаях эти элементы разметки оказы-<br>отся избыточными. В составе HomeSite имеются специальные средства, позволяющие выполнять чистку кода. Это набор утилит CodeSweeper, предназначенных для выполнения некоторых операций по преобразованию кода документа с учетом используемого языка разметки. Однако при борьбе с изыточностью CodeSweeper не очень эффективен. Значительно больший выигрыш можно получить от использования средств чистки кода, имеющихся в визуальном редакторе Dreamweaver.<br>
Дополнительным преимуществом использования «офисных» текстовых докторов является возможность автоматической проверки орфографии и рас-ановки знаков препинания в русскоязычных текстах. Это тем более важно, го многие популярные HTML-редакторы (в том числе HomeSite) пока не русифицированы и не позволяют проверять правописание в русскоязычных публикациях.<br>
Кстати говоря, грамматические ошибки, опечатки и неправильная расстановка знаков препинания вовсе не такая уж мелочь, как кажется некоторым вторам. Во-первых, обилие ошибок отвлекает от вдумчивого чтения и тем амым затрудняет восприятие смысла прочитанного. Во-вторых, ошибка может вообще исказить этот самый смысл (помните классику: «Казнить нельзя помиловать»?). В-третьих, большое количество опечаток и ошибок говорит о невысоких деловых качествах автора (несобранность, невнимательность и т. д.). И, наконец, в-четвертых, малограмотная речь способна вызвать недоверие к содержанию излагаемого материала. Вам это надо?<br>
Итак, при создании больших страниц, насыщенных текстовым материалом, целесообразно придерживаться такой последовательности действий:<br>
<li> 1. Создать документ в одном из «офисных» текстовых редакторов, обращая при этом внимание на его структурную организацию.</li>
<li> 2. Выполнить проверку правописания.</li>
<li>3. Конвертировать документ в HTML-формат и открыть его в HomeSite.</li>
<li> 4. Оценить разбиение документа на разделы и подразделы, просмотрев в подключенных к HomeSite броузерах.</li>
<li>5. Открыть документ в Dreamweaver и выполнить чистку кода.</li>
После этого можно продолжить доводку дизайна страницы средствами HomeSite.<br>
Замечание
<br>Замечание<br><br>Если разрабатываемая страница содержит текст на английском языке, то для проверки правописания можно воспользоваться имеющейся в составе HomeSite утилитой, которая называется Spell Checker. Для ее активизации достаточно щелкнуть одноименную кнопку на панели инструментов главного окна HomeSite.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Окно мастера Quick Start Wizard</h1>Рисунок 4.5. Окно мастера Quick Start Wizard<br><br><br><img src="image/okno-mastera-quick-start-wizard_1.gif" alt="Окно мастера Quick Start Wizard"><br>
Замечание
<br>Замечание<br><br>В оценочной версии HomeSite 5 после щелчка на кнопке Finish на экране появляется диалоговое окно редактора тегов для тега <BODY>, причем в сокращенном (стандартном) формате, который использовался в предыдущих версиях HomeSite. Тем не менее, если вы используете мастер Quick Start Wizard для создания новой страницы, то можете продолжить работу в этом окне: тег <BODY> будет создан с заданными атрибутами. Впоследствии их можно скорректировать с помощью окна расширенного формата, используемого по умолчанию (см. Рисунок 4.6).
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<br><br>
<h1>Окно редактора тегов для маркированного списка</h1>Рисунок 4.14. Окно редактора тегов для маркированного списка<br><br><br><img src="image/okno-redaktora-tegov-dlja-markirovannogo-spiska_1.gif" alt="Окно редактора тегов для маркированного списка"><br><br>
<br><br>
<h1>Окно редактора тегов для установки атрибутов тега <МЕТА></h1>Рисунок 4.3. Окно редактора тегов для установки атрибутов тега <МЕТА><br><br><img src="image/okno-redaktora-tegov-dlja-ustanovki-atributov-tega_1.gif" alt="Окно редактора тегов для установки атрибутов тега <МЕТА>"><br>
Третий способ вставки тега <МЕТА> - - с помощью мастера Quick Start Wizard -- отличается от двух предыдущих тем, что мастер создает новую страницу, которая не включена в состав проекта. Вместе с тем, мастер за однo обращение создаст сразу два тега, а не один, как альтернативные инструменты. Итак, для создания тегов <МЕТА> с помощью мастера необходимо:<br>
<li> На вкладке Common (Теги общего назначения) панели быстрой встан ки щелкнуть на кнопке Quick Start Wizard (Рисунок 4.4).</li>
<li> В первом окне мастера щелкнуть на кнопке Next (Далее), оставив пол не заполненными.</li>
<li> Во втором окне мастера (Рисунок 4.5) ввести в полях Keywords (Ключевы слова) и Description (Описание) значения соответствующих парамел ров тега <МЕТА> и щелкнуть на кнопке Finish (Готово).</li>
<li> Скопировать созданные теги в окно документа проекта.</li>
<br><br>
<h1>Перечень графических форматов распознаваемых HomeSite</h1>Рисунок 4.20. Перечень графических форматов, распознаваемых HomeSite<br><br><img src="image/perechen-graficheskih-formatov-raspoznavaemyh_1.gif" alt="Перечень графических форматов распознаваемых HomeSite"><br>
С учетом приведенного выше замечания все последующее изложение относится к файлам указанных четырех типов.<br>
Поскольку графика является достаточно своеобразным, и в то же время очень популярным средством формирования Web-страниц, то в HomeSite предусмотрены многочисленные и весьма эффективные механизмы добавления в страницы графических элементов. Мы рассмотрим три из них:<br>
<li> вставка с помощью панели быстрой вставки;</li>
<li> вставка из окна ресурсов;</li>
<li> копирование из окна результатов.</li>
Еще один важный аспект работы с графикой — создание сенсорных карт — вынесен в отдельный раздел пятой главы.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index10.htm">Назад</a>
</td>
<td>
<h1>Первое окно мастера создания таблицы</h1>Рисунок 4.27. Первое окно мастера создания таблицы<br><br><img src="image/pervoe-okno-mastera-sozdanija-tablicy_1.gif" alt="Первое окно мастера создания таблицы"><br>
В исходном состоянии таблица в окне просмотра содержит две строки и два столбца, то есть четыре ячейки равного размера. Вы можете произвольным образом изменять количество строк и столбцов, изменять размер ячеек, а также объединять ячейки:<br>
<li> чтобы добавить или удалить строку, необходимо щелкнуть на соответствующей кнопке Rows (Строки), либо со знаком «+», либо со знаком «-»;</li>
<li> чтобы добавить или удалить столбец, необходимо щелкнуть на соответствующей кнопке Columns (Столбцы), либо со знаком «+», либо со знаком «-»;</li>
<li> чтобы изменить размер ячейки, следует установить указатель на се границе, нажать левую кнопку мыши (при этом указатель примет форму двойной стрелки, см. Рисунок 4.27) и переместить границу в нужном направлении;</li>
<li> чтобы объединить две ячейки одной строки, необходимо: </li>
<li> 1. щелкнуть мышью внутри левой ячейки (она будет выделена синим цветом);</li>
<li> 2. щелкнуть на кнопке Column Span + (Объединить столбцы);</li>
<li> чтобы объединить две ячейки одного столбца, необходимо: </li>
<li> 1. щелкнуть мышью внутри левой ячейки (она будет выделена синим цветом);</li>
<li> 2. щелкнуть на кнопке Row Span (Объединить строки).</li>
Замечание
<br>Замечание<br><br>С помощью кнопок Row Span и Column Span со знаками «-» можно разделить только такие ячейки, которые ранее были получены путем объединения соседних ячеек.
Читатели, хорошо знакомые с языком HTML, догадались, что кнопки, имеющиеся в первом окне мастера, позволяют изменять количество и значения соответствующих атрибутов «табличных» тегов:
<li> кнопки Rows изменяют количество тегов <TR>, вложенных в тег <TABLE>;</li>
<li> кнопки Columns изменяют количество тегов <TD>, вложенных в каждый тег <TR>;</li>
<li> кнопки Column Span изменяют значение атрибута COLSPAN тегов <TD>;</li>
<li> кнопки Row Span изменяют значение атрибута ROWSPAN тегов <TD>.</li>
<br>
<img src="image/pervoe-okno-mastera-sozdanija-tablicy_2.gif" alt="Первое окно мастера создания таблицы"><br>
Рисунок 4.28. Пример создания таблицы<br> Например, чтобы получить таблицу, приведенную на Рисунок 4.28, требуется выполнить такую последовательность действий:
<li> 1. Переместить границу между строками вниз.</li>
<li>2. Щелкнуть на кнопке Columns (будет добавлен третий столбец).</li>
<li> 3. Выделить верхнюю левую ячейку и щелкнуть на кнопке Column Span + (выбранная ячейка будет объединена с соседней ячейкой той же строки).</li>
<br>
После формирования подходящей структуры таблицы вы можете завершить работу мастера, щелкнув на кнопке Finish (Готово). При этом в редактируемый документ будет помещен соответствующий фрагмент HTML-кода.<br>Если же вы хотите продолжить установку атрибутов таблицы, щелкните на кнопке Next (Далее).<br> Второе окно мастера — Table Properties (Параметры таблицы) — содержит элементы управления, которые позволяют установить следующие атрибуты тега <TABLE> (Рисунок 4.29):
<li> ALIGN — действие этого атрибута аналогично действию одноименного атрибута, используемому для создания «плавающих» изображений: он позволяет выравнивать таблицу относительно левого или правого края страницы, обеспечивая эффект «обтекания» текста вокруг таблицы; значение атрибута выбирается из раскрывающегося списка Alignment (Выравнивание);</li>
<li> CELLSPACING задает расстояние (в пикселах) между ячейками; значение устанавливается с помощью дискретного счетчика Cell Spacing (Промежуток между ячейками);</li>
<li> CELLPADING задает расстояние (в пикселах) между рамкой ячеек и их содержимым; значение устанавливается с помощью дискретного счетчика Cell Padding (Заполнение ячейки);</li>
<li> WIDTH, HEIGTH определяют соответственно ширину и высоту таблицы или в пикселах, или как долю (в процентах) от размера окна браузера, отображаемого на экране монитора читателя; чтобы указать значение в процентах, требуется ввести после числа символ %;</li>
<li> BGCOLOR устанавливает цвет фона для всех ячеек таблицы (при отсутствии индивидуальных установок для отдельных ячеек); значение цвета выбирается из раскрывающейся палитры, связанной с флажком Use Color (Использовать цвет);</li>
<li> BORDER управляет внешним видом рамки,- отображаемой вокруг таблицы; если значение атрибута не задано, то рамка не отображается, но таблица выводится в той же самой позиции, как если бы рамка имелась (то есть сохраняется соответствующее свободное пространство вокруг ячеек); толщина рамки может быть установлена равной 0, в этом случае броузер не оставляет свободного пространства под рамку; значение атрибута устанавливается с помощью дискретного счетчика Size (Размер); если задать значение больше 0, то становятся доступны связанные со счетчиком списки Frames и Rules: первый из них обеспечивает расположение внешней рамки, а второй определяет наличие рамок между строками и столбцами внутри таблицы.</li>
<br>
<img src="image/pervoe-okno-mastera-sozdanija-tablicy_3.gif" alt="Первое окно мастера создания таблицы"><br>
Рисунок 4.29. Второе окно мастера, позволяющее установить атрибуты тега <TABLE><br> После установки атрибутов таблицы мастер «заставляет» перейти к следующему шагу — установке параметров отдельных ячеек, которая выполняется в третьем окне — Cell Properties (Параметры ячейки). Однако, если это не входит в ваши планы, можете в этом окне просто щелкнуть на кнопке Finish.<br> Чтобы элементы окна стали доступны, необходимо выделить какую-либо ячейку таблицы, щелкнув на ней мышью (Рисунок 4.30). Именно к этой ячейке будут относится те значения, которые вы установите в окне. Чтобы установить атрибуты для других ячеек, требуется просто поочередно выбирать их и редактировать либо оставлять прежними значения атрибутов.<br> <img src="image/pervoe-okno-mastera-sozdanija-tablicy_4.gif" alt="Первое окно мастера создания таблицы"><br>
Рисунок 4.30. Третье окно мастера, позволяющее установить атрибуты ячеек<br> С помощью окна Cell Properties могут быть заданы следующие атрибуты ячейки:
<li>ALIGN— способ горизонтального выравнивания содержимого ячейки; устанавливается с помощью раскрывающегося списка Horizontal',</li>
<li> VALIGN— способ вертикального выравнивания содержимого ячейки; устанавливается с помощью- раскрывающегося списка Vertical;</li>
<li> WIDTH — ширина ячейки в пикселах или как доля (в процентах) от ширины таблицы, отображаемой в окне броузера; данный параметр достаточно указать для одной ячейки столбца, поскольку для остальных автоматически будет установлено то же значение; значение атрибута вводится в одноименном поле;</li>
<li> NOWRAP — запрещает перенос строк внутри ячейки; обычно текст, не умещающийся в одну строку ячейки, переходит на следующую строку; однако при использовании атрибута NOWRAP ширина ячейки увеличивается на столько, чтобы заключенный в ней текст поместился в одну строку. Это требует определенной осторожности при использовании данного атрибута; наличие атрибута определяется состоянием флажка No Wrappin (He переносить).</li>
<br>
Кроме того, с помощью флажка Header (Заголовок) может быть установлен признак того, что содержимое данной ячейки должно отображаться как заголовок (другим шрифтом). Этому признаку в коде страницы соответствует тег <ТН>.<br> Собственно содержимое ячейки вводится в поле Content (Содержание).<br> HTML-код, сгенерированный мастером, вставляется в текст страницы с учетом синтаксического форматирования, то есть вложенные теги смещаются относительно позиции тега верхнего уровня. Это значительно улучшает визуальное восприятие кода документа.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index15.htm">Назад</a>
</td>
<td>
<h1>Представление миниатюр изображений в окне результатов</h1>Рисунок 4.24. Представление миниатюр изображений в окне результатов<br><br><br><img src="image/predstavlenie-miniatjur-izobrazhenij-v-okne_1.gif" alt="Представление миниатюр изображений в окне результатов"><br><br>
<br><br>
<h1>Представление стилей на вкладке Selectors</h1>Рисунок 4.45. Представление стилей на вкладке Selectors<br><br><img src="image/predstavlenie-stilej-na-vkladke-selectors_1.gif" alt="Представление стилей на вкладке Selectors"><br>
Чтобы добавить в CSS-файл новый стиль, необходимо:<br>
<li>1. Щелкнуть на кнопке New Selector на панели инструментов окна редактирования;</li>
<li>2. В открывшемся диалоговом окне (Рисунок 4.46) выполнить следующие действия:</li>
<li> 2.1. Указать категорию стиля, установив соответствующий переключа тель (Class или ID), либо выбрав переопределяемый тег в списке HTML Element.</li>
<li>2.2. Если создается стиль Class или ID, ввести его имя в поле списка, расположенного под переключателями; при вводе имени со ответствующий префикс (. или #) будет вставлен автоматичес ки; имя стиля отображается также в поле Current Selector (Текущий селектор).</li>
<li> 2.3. Если требуется создать несколько стилей с одинаковыми параметрами, то необходимо внести текущий стиль (селектор) в список Selectors, щелкнув на кнопке «>» (Рисунок 4.47) и затем повторить п.п. 2.1, </li>
<li>3. Щелкнуть на кнопке ОК.</li>
<br><br>
<h1>Пример создания вложенных списков</h1>Рисунок 4.13. Пример создания вложенных списков<br><br><img src="image/primer-sozdanija-vlozhennyh-spiskov_1.gif" alt="Пример создания вложенных списков"><br>
Например, для создания списка, приведенного на Рисунок 4.13, требуется выполнить такую последовательность действий:<br>
<li> 1. На панели быстрой вставки щелкнуть на кнопке Unordered List и в открывшемся окне редактора тегов (Рисунок 4.14) выбрать в списке Туре (Тип маркера) форму маркера; в результате в код документа будет добавлена пара тегов и , причем курсор будет установлен между ними.</li>
<li> 2. Щелкнуть на кнопке List Item; в открывшемся окне редактора тегов:</li>
<li> 2.1. Перейти на вкладку Content (Содержимое) и ввести в текстовом поле наименование первого элемента списка («Цвет»), как показано на Рисунок 4.15.</li>
<li> 2.2. Вернуться на вкладку LI Tag, в ней перейти на мини-вкладку Unordered List; оставив все параметры без изменения, щелкнуть на кнопке ОК; в результате в код документа будет добавлена пара тегов <LI> и </LI>, а также наименование элемента списка.</li>
<li> 3. Повторить п. 2 для создания второго элемента списка («Размер»).</li>
<li> 4. Установив курсор между закрывающим тегом </LI> первого элемента и открывающим тегом второго, щелкнуть на кнопке Ordered List и в открывшемся окне редактора тегов (Рисунок 4.16) выбрать в списке Туре (Способ нумерации) вид порядкового номера элементов, а в поле Start (Начальный номер) указать значение номера первого элемента; щелкнуть на кнопке ОК; в результате в код документа будет добавлена пара тегов и с соответствующими атрибутами.</li>
<li> 5. С помощью кнопки List Item ввести теги для пунктов нумерованного списка (в данном случае атрибуты должны устанавливаться на вкладке Ordered List диалогового окна).</li>
<li> 6. Ввести с клавиатуры наименования пунктов нумерованного списка.</li>
<li> 7. Установить курсор после закрывающего тега </LI> элемента «Размер» и выполнить действия, аналогичные описанным в п.п. 5...7, для второго нумерованного списка (с той лишь разницей, что в качестве способа нумерации можно использовать не цифры, а буквы английского алфавита).</li>
<br><br>
<h1>Работа с графическими элементами</h1>Работа с графическими элементами<br><br>
HomeSite ориентирован на работу с наиболее распространенными графическими форматами Web — GIF, JPEG и PNG. Кроме того, поскольку многие броузеры, работающие под управлением Windows, понимают формат BMP, HomeSite поддерживает аналогичные операции и для этого формата. Чтобы включить BMP-файлы в число «избранных», следует добавить соответствующее расширение в список Web Images на вкладке File Settings диалогового окна Settings (Рисунок 4.20).<br>
Замечание
<br>Замечание<br><br>В первой главе (см. раздел <a href="../Glava%201/Index20.htm">«Работа с файлами»</a>) было отмечено, что в список Web Images могут быть включены любые графические файлы, однако для всех них (кроме указанных выше четырех форматов) HomeSite поддерживает лишь две операции: просмотр в списке файлов в окне ресурсов и создание ссылки как на внешний ресурс (то есть как на любой не графический файл).
<br><br>
<h1>Разработка страниц публикации</h1>Разработка страниц публикации
В этой главе рассматривается общая технология создания и редактирования HTML-страниц в HomeSite, вне зависимости от того, какое место занимает страница в структуре узла.<br><br>
Несмотря на все достоинства описанных выше инструментов, ни один из них нельзя считать основным средством разработки HTML-страниц. Практика показывает, что наибольший эффект дает именно совместное их применение.<br>
Итак, при создании новой страницы целесообразно придерживаться такой последовательности действий (предполагается, что эскиз страницы, выполненный на бумаге, находится перед вами):<br>
<li> 1. На вкладке Location диалогового окна Settings выбрать шаблон, на основе которого будет создана «заготовка» будущей страницы.</li>
<li> 2. В дереве проекта (на вкладке Projects окна ресурсов) выбрать папку, в которую следует поместить новый документ, и в ее контекстном меню выбрать команду Create New Document...; в открывшемся диалоговом окне указать имя файла.</li>
<li>3. После того, как «заготовка» будет открыта в окне документа, установить общие параметры страницы.</li>
<li> 4. С помощью кнопок панели быстрой вставки либо (если требуемый тег на ней не представлен) с помощью утилиты Tag Chooser добавить тег в код документа.</li>
<li> 5. Если вставляемый тег требует задания обязательных атрибутов, ввести их в открывшемся диалоговом окне редактора тегов.</li>
<li>6. Оценить полученный результат, переключившись в режим просмотра (сначала во внутреннем броузере, а затем и во внешних).</li>
<li> 7. Если результат оказался не тем, который вы ожидали, повторно вызвать редактор тегов (выбрав в контекстном меню тега команду Edit Tag), либо изменить значение конкретного атрибута с помощью Tag Inspector.</li>
<li>8. Если тег был вставлен с атрибутами, принятыми по умолчанию, но они вас не удовлетворяют, также необходимо выполнить действия, указанные в предыдущем пункте.</li>
<li>9. Повторно выполнять п.п. 6 и 7 до тех пор, пока у вас не появится чувство «глубокого удовлетворения», после чего вернуться к п. 4.</li>
Замечание
<br>Замечание<br><br>В приведенном выше (достаточно общем) алгоритме отсутствуют шаги, связанные с созданием элементов навигации и тестированием страницы. Дело в том, что этим важнейшим вопросам посвящены отдельные главы.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td>
<h1>Редактирование таблиц стилей в</h1>Редактирование таблиц стилей в TopStyle Lite В предыдущем подразделе было сказано, что в зависимости от контекста выполняемой операции приложение TopStyle Lite может быть открыто в одном из двух форматов:
<li> расширенном — для редактирования CSS-файла;</li>
<li> сокращенном — для создания или редактирования параметров атрибута STYLE конкретного элемента страницы.</li>
<br>
Кроме того, TopStyle Lite может быть открыт из окна HomeSite для создания нового CSS-файла (в этом случае также используется расширенный формат). Для этого достаточно щелкнуть на кнопке Style Editor, расположенную на панели инструментов главного окна HomeSite (Рисунок 4.43).<br><br>
<h1>Создание списков</h1>Создание списков<br><br>
Кнопки, обеспечивающие создание различных типов списков, представлены на вкладке Lists (Рисунок 4.11). При щелчке на любой из этих кнопок открывается диалоговое окно, с помощью которого могут быть установлены требуемые атрибуты создаваемого списка.<br>
С помощью кнопок вкладки Lists можно сформировать список двумя способами:<br>
<li> быстро создать список с параметрами по умолчанию, введя заодно и названия пунктов списка;</li>
<li> строить список поэлементно, устанавливая для каждого пункта свои значения атрибутов.</li>
<br><br>
<h1>Создание таблицы с помощью мастера</h1>Создание таблицы с помощью мастера<br><br>
Это наиболее простой и удобный способ для тех, кто не очень силен в языке HTML вообще и в применении таблиц в частности.<br>
Щелчок на кнопке Table Wizard приводит к появлению на экране первого окна мастера — Table Design (Проектирование таблицы). Оно содержит интерактивное окно просмотра и кнопки для изменения структуры таблицы (Рисунок 4.27).<br><br>
<h1>Таблицы</h1>Таблицы<br><br>
Таблицы, используемые на Web-страницах, практически ничем не отличаются от таблиц, создаваемых с помощью текстовых процессоров: те же строки, столбцы и ячейки. Однако большой набор регулируемых параметров и все усиливающиеся возможности броузеров по визуальному представлению таблиц делают их одним из средств формирования структуры Web-страниц. Рассказывая о способах форматирования текста, мы уже упоминали об таком варианте их применения. Но ведь это вовсе не отменяет возможности их применения по прямому назначению — для представления табулированных данных. Причем ячейки таблицы могут содержать как текстовую информацию, так и графику. Разрешается также создание вложенных таблиц, то есть когда ячейка таблицы более высокого уровня представляет собой контейнер для таблицы следующего уровня. Таким образом, диапазон применения таблиц весьма широк. Вот далеко не полный перечень задач, которые могут успешно решаться с их помощью:<br>
<li> представление табулированных данных;</li>
<li> форматирование текстового содержимого страницы (например, вывод его в несколько колонок — в «журнальном» формате); </li>
<li>группирование взаимосвязанных элементов страницы; </li>
<li> выравнивание различных фрагментов страницы относительно друг друга.</li>
Благодаря перечисленным особенностям практически ни одна современная Web-страница не обходится без использования таблиц.<br>
Для работы с таблицами в HomeSite имеется целый набор инструментов, большинство из которых позволяют забыть, что вы имеете дело не с визуальным, а с текстовым редактором.<br>
Итак, для создания и редактирования атрибутов таблицы вы можете использовать:<br>
<li> мастер для создания таблиц — Table Wizard;</li>
<li> инструмент быстрой разметки таблицы — Table Sizеr;</li>
<li> диалоговые окна редактора тегов;</li>
<li> кнопки быстрой вставки «табличных» тегов.</li>
Доступ ко всем перечисленным инструментам выполняется с помощью вкладки Tables (Таблицы) панели быстрой вставки (Рисунок 4.26).<br>
<img src="image/tablicy_1.gif" alt="Таблицы"><br>
Рисунок 4.26. Вкладка Tables (Таблицы) панели быстрой вставки
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index14.htm">Назад</a>
</td>
<td>
<h1>Теги форматирования текста представленные на вкладке Common</h1>Рисунок 4.8. Теги форматирования текста, представленные на вкладке Common<br><br><img src="image/tegi-formatirovanija-teksta-predstavlennye-na_1.gif" alt="Теги форматирования текста представленные на вкладке Common"><br>
<li> Paragraph (Параграф) — обеспечивает вставку тега <Р>; тег помещается в код страницы без атрибутов, но (по умолчанию) с парным закрывающим тегом;</li>
<li> Break (Разрыв) — обеспечивает вставку тега <BR>; тег помещается в код страницы без атрибутов;</li>
<li> Non-breaking space (Неразрывный пробел) — обеспечивает вставку специального символа «неразрывный пробел»; по умолчанию символ добавляется в код страницы в виде последовательности ' ';</li>
<li> Horizontal rule (Горизонтальный разделитель) — обеспечивает вставку тега <HR>; щелчок на кнопке приводит к открытию диалогового окна редактора тегов, позволяющего установить атрибуты тега; формат этого окна будет описан ниже;</li>
<li> Align Center (Выравнивание по центру) — обеспечивает вставку в код страницы тега <DIV> с атрибутом ALIGN=«centcr»> и с парным закрывающим тегом; вставляемый тег и его атрибуты могут быть изменены пользователем (см. раздел «<a href="../Glava%203/Index19.htm">Установка глобальных параметров</a>» третьей главы);</li>
<li> Align right (Выравнивание по правому краю) — обеспечивает вставку в код страницы тега <DIV> с атрибутом ALIGN=«right»> и с парным закрывающим тегом; вставляемый тег и его атрибуты могут быть изменены пользователем (см. раздел «Установка глобальных атрибутов» третьей главы);</li>
<li> DIV — обеспечивает вставку тега <DIV>; чтобы тег был помещен в код страницы, требуется установить его атрибуты в соответствующем диалоговом окне редактора тегов.</li>
Многие теги форматирования текста являются парными. HomcSilc поддерживает два способа вставки парных тегов.<br>
При первом вы сначала вставляете открывающий и закрывающий теги (щелкнув на соответствующей кнопке панели быстрой вставки), а затем помещаете между ними подлежащий форматированию фрагмент текста.<br>Второй способ применяется, когда форматируемый текст уже присутствует в документе. Например, если требуется вынести некоторый фрагмент текста в отдельный параграф, необходимо:<br>
<li>1. Выделить фрагмент текста, подлежащий форматированию.</li>
<li> 2. Щелкнуть на кнопке Paragraph.</li>
В результате открывающий тег будет помещен перед фрагментом, а закрывающий -- после него (Рисунок 4.9).<br><br>
<h1>Установка атрибутов тега <BODY></h1>Установка атрибутов тега <BODY><br><br>
В заготовке кода страницы этот тег присутствует, хотя при необходимости может быть помещен в документ и с помощью панели быстрой вставки (вторая левая кнопка на вкладке Common, см. Рисунок 4.4).<br>
Щелкнув на указанной кнопке или выбрав в контекстном меню тега команду Edit Tag, вы увидите на экране соответствующее диалоговое окно редактора тегов (Рисунок 4.6).<br><br>
<h1>Установка общих параметров страницы</h1>Установка общих параметров страницы<br><br>
Под общими параметрами страницы в данном случае понимаются:<br>
<li> заголовок страницы (содержимое тега <TITLE>);</li>
<li> краткая характеристика содержания страницы, ключевые слова, другие сведения для роботов поисковых систем (то есть информация, содержащаяся в тегах <МЕТА>);</li>
<li> общие визуальные параметры страницы (размеры полей, фон, цветовая схема ссылок); напомним, что эти параметры устанавливаются с помощью атрибутов тега <BODY>.</li>
Во всех шаблонах, имеющихся в HomeSite, присутствует тег <TITLE>. Поэтому для создания заголовка страницы достаточно изменить его содержимое (в стандартных шаблонах это Untitled).<br>
С тегами <МЕТА> дело обстоит несколько сложнее. Разумеется, редактор кода позволяет ввести теги и атрибуты вручную, однако в составе HomeSite, как вы знаете, имеются и другие средства. Об их применении — в следующем подразделе.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Установка параметров шрифта</h1>Установка параметров шрифта<br><br>
Шрифт является вспомогательным, хотя и очень мощным средством обеспечения комфортности пребывания пользователей Интернета на ваших страницах. С его помощью могут быть решены три задачи:<br>
<li> оформление логической структуры текстового содержания страницы; </li>
<li> обеспечение единства и согласованности стилевого оформления публикации в целом;</li>
<li> повышение эстетической привлекательности страниц.</li>
Почему повышение эстетической привлекательности занимает последнее (хотя и призовое) место? Вы можете найти (или изготовить самостоятельно) восхитительный по красоте шрифт, подобрать к нему замечательную цветовую схему, прекрасно гармонирующую с фоном публикации, но если аппаратные и программные средства пользователя будут не в состоянии воспроизвести все это на его компьютере, то затраченные вами усилия окажутся напрасными.<br>
Итак, какие же возможности по управлению параметрами шрифта предоставляет HomeSite?<br>
Основным инструментом при работе с шрифтом является вкладка Fonts панели быстрой вставки. Набор кнопок, представленных на этой вкладке, обеспечивает установку большей части физических и логических стилей шрифта, предусмотренных в языке HTML (Рисунок 4.18).<br><br>
<h1>Установка параметров таблицы с</h1>Установка параметров таблицы с помощью редактора тегов Редактор тегов может быть вызван щелчком на одной из четырех кнопок вкладки Tables:
<li> Table Dialog (Диалог таблицы) — вызов диалогового окна для установки атрибутов тега <TABLE>;</li>
<li>Table Row Dialog (Диалог строки таблицы) — вызов диалогового окна для установки атрибутов тега <TR>;</li>
<li>Table Data Dialog (Диалог ячейки таблицы) — вызов диалогового окна для установки атрибутов тега <TD>;</li>
<li>Table Header Dialog (Диалог заголовка таблицы) — вызов диалогового окна для установки атрибутов тега <ТН>.</li>
<br>
Необходимо отметить, что перечисленные диалоговые окна вовсе не дублируют соответствующие окна мастера создания таблиц (см. подраздел «<a href="Index16.htm">Создание таблицы с помощью мастера</a>»). Хотя, разумеется, они содержат многие идентичные элементы. Основным достоинством применения окон редактора тегов заключается в наличии дополнительных вкладок, которые обеспечивают доступ к более современным средствам разметки страниц (в частности, к средствам работы с CSS).<br> Ниже приведена краткая характеристика перечисленных окон для работы с табличными тегами. Возможно, это поможет вам быстрее выбирать наиболее подходящий инструмент в каждой конкретной ситуации. Замечание<br><br>Для любого из табличных тегов, уже вставленных в код страницы, соответствующее окно редактора тегов может быть вызвано с помощью команды контекстного меню Edit Current Tag.<br> Итак, с помощью окна редактора тегов могут быть установлены следующие атрибуты тега <TABLE> (Рисунок 4.32).<br> Замечание
<br>Замечание<br><br><img src="image/ustanovka-parametrov-tablicy-s-pomoshhju-redaktora_1.gif" alt="Установка параметров таблицы с"><br>Атрибуты BORDERCOLOR, BORDERCOLORLIGHT и BORDERCOLORDARK предназначены для управления цветом рамок таблицы. Если задано значение атрибута BORDERCOLOR, все рамки таблицы считаются «плоскими» и потому отображаются одним цветом, без «теней». Если указываются значения атрибутов BORDERCOLORLIGHT и BORDERCOLORDARK, то рамка отображается как «выпуклая», то есть с тенью. При этом считается, что источник света находится в левом верхнем углу экрана. Соответственно, атрибут BORDERCOLORLIGHT задает цвет «освещенных» частей рамок, то есть расположенных слева и сверху, в то время как атрибут BORDERCOLORDARK — цвет «затененных» частей, расположенных справа и снизу.
<li> на вкладке Browser-specific (2) — атрибуты, поддерживаемые на сегодняшний день только ведущими броузерами (MSIE, Netscape и Opera): BACKGROUND и HEIGTH; атрибут BACKGROUND позволяет задать фоновое изображение для ячеек таблицы; значение этого атрибута (URL источника изображения) указывается в поле Background image (Фоновый рисунок); если атрибут задан, то в поле Columns (Столбцы) дополнительно можно указать способ укладывания рисунка в площади таблицы.</li>
<br>
Окно редактора тегов, предназначенное для работы с тегом <TR>, позволяет установить значения следующих атрибутов (Рисунок 4.33).
<li>на вкладке TR Tag — атрибуты ALIGN и VALIGN; их значения выбираются в раскрывающихся списках Align и Vert. Align соответственно; оба атрибута не являются обязательными, но поддерживаются всеми броузерами;</li>
<li> на вкладке Browser-specific — атрибуты BORDERCOLOR, BORDERCOLORLIGHT и BORDERCOLORDARK (в данном случае они управляют цветом рамки ячеек строки), а также атрибут NOWRAP.</li>
<br>
Замечание
<br>Замечание<br><br><img src="image/ustanovka-parametrov-tablicy-s-pomoshhju-redaktora_2.gif" alt="Установка параметров таблицы с"><br>Атрибут SCOPE имеет смысл только для тех ячеек таблицы, для которых установлен стиль «заголовок» (то есть если для ячейки дополнительно применен тег <ТН>). Возможные значения этого атрибута определяют то подмножество ячеек таблицы, для которых данная ячейка играет роль заголовка.<br> <img src="image/ustanovka-parametrov-tablicy-s-pomoshhju-redaktora_3.gif" alt="Установка параметров таблицы с"><br>
Рисунок 4.34. Окно для установки атрибутов тега <TD>
<li> на вкладке Browser-specific — атрибуты BORDERCOLOR, BORDER-COLORLIGHT и BORDERCOLORDARK (в данном случае они управляют цветом рамки конкретной ячейки), а также атрибут BACKGROUND, который задаст фоновое изображение для этой ячейки.</li>
<br>
Помимо этих двух вкладок, окно тега <TD> содержит еще одну специфическую (для данного тега) вкладку — Content. Основным элементом на этой вкладке является многострочноe текстовое поле, предназначенное для ввода содержимого ячейки.<br> Формат окна редактора тегов, которое используется для работы с тегом <ТН>, абсолютно идентичен формату окна тега <TD>, рассмотренному выше. Объясняется это тем, что для ячеек, используемых в качестве «заголовков», тег <ТН> применяется самостоятельно, без участия тега <TD>. Такой синтаксис позволяет упростить код и сократить размер тех страниц, которые содержат таблицы с большим числом ячеек.<br> Остальные кнопки вкладки Tables, которые обеспечивают быструю вставку «табличных» тегов без атрибутов, можно считать вспомогательными инструментами. Их целесообразно применять в том случае, если вы хотите внести небольшие изменения в таблицу, созданную ранее другими средствами.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index17.htm">Назад</a>
</td>
<td>
<h1>Установка визуальных атрибутов текста</h1>Установка визуальных атрибутов текста<br><br>
Теперь обратимся к третьей составляющей стиля текстового содержимого документа — его визуальным атрибутам. Наиболее важными из них являются два:<br>
<li> способ форматирования текста;</li>
<li> набор и параметры используемых шрифтов.</li>
<li> Напомним, что для форматирования текста HTML-документа могут использоваться следующие методы:</li>
<li> центрирование и абзацные отступы (табуляция);</li>
<li> введение заголовков различных уровней (теги <Н1>...<Н6>);</li>
<li> применение списков (нумерованного, маркированного, списка определений); </li>
<li> введение разделителей (горизонтальных линий, создаваемых тегом</li>
<li> применение различных параметров шрифта для разных фрагментов текста.</li>
Работая с редактором кода, вы можете ввести с клавиатуры любой тег, реализующий перечисленные выше методы форматирования. Однако значительно удобнее применять те готовые инструменты форматирования, которые имеются в HomeSite. Доступ практически ко всем этим инструментам реализован посредством панели быстрой вставки. Соответствующие кнопки размещены на трех вкладках: Common (Элементы общего назначения), Fonts (Шрифты) и Lists (Списки).<br>
Далее приведено краткое описание основных из них.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Вкладка Browserspecific</h1>Рисунок 4.22. Вкладка Browser-specific<br><br><img src="image/vkladka-browser-specific_1.gif" alt="Вкладка Browserspecific"><br>
На вкладке Browser-specific могут быть установлены значения следующих атрибутов (Рисунок 4.22):<br>
<li> DYNSCR, который задаст URL файла видеоклипа; значение атрибута устанавливается в поле Dyn Source (Динамический источник);</li>
<li> LOOP, определяющего число повторов видеоклипа; его значение вводится или выбирается в списке Loop (Цикл); если значение атрибута не задано, или в списке выбран пункт Infinity, то цикл считается бесконечным (при кэшировании данных этот режим может привести к переполнению буфера на жестком диске);</li>
<li> START, который определяет условие запуска видеоклипа; значение атрибута выбирается из списка Start (Пуск):</li>
<li> fileopen -- воспроизведение видеоклипа начинается при открытии файла-источника;</li>
<li>mouseover — воспроизведение начинается, когда пользователь перемещает указатель мыши на изображение;</li>
<li> CONTROLS, который обеспечивает вывод броузером на странице панели управления видеоклипом; атрибут добавляется в код, если установлен флажок Controls (Элементы управления);</li>
<li> LOWSCR, который позволяет задать адрес альтернативного изображения ухудшенного качества (обычно такое изображение используется для ускорения загрузки страницы и служит в качестве ссылки на полноценное изображение); атрибут устанавливается в поле LowScr;</li>
<li> ALIGN, который обеспечивает выбор способа выравнивания «плавающего» изображения; в данном случае список Align содержит расширенный перечень вариантов, соответствующий возможностям младших версий броузеров MSIE и Netscape. </li>
<li>START, который определяет условие запуска видеоклипа; значение атрибута выбирается из списка Start (Пуск):</li>
<li>fileopen - - воспроизведение видеоклипа начинается при открытии файла-источника;</li>
<li>mouseover — воспроизведение начинается, когда пользователь перемещает указатель мыши на изображение;</li>
<li> CONTROLS, который обеспечивает вывод броузером на странице панели управления видеоклипом; атрибут добавляется в код, если установлен флажок Controls (Элементы управления);</li>
<li> LOWSCR, который позволяет задать адрес альтернативного изображения ухудшенного качества (обычно такое изображение используется для ускорения загрузки страницы и служит в качестве ссылки на полноценное изображение); атрибут устанавливается в поле LowScr; ALIGN, который обеспечивает выбор способа выравнивания «плавающего» изображения; в данном случае список Align содержит расширенный перечень вариантов, соответствующий возможностям младших версий броузеров MSIE и Netscape.</li>
<br><br>
<h1>Вкладка Common панели быстрой вставки</h1>Рисунок 4.4. Вкладка Common панели быстрой вставки<br><br><br><img src="image/vkladka-common-paneli-bystroj-vstavki_1.gif" alt="Вкладка Common панели быстрой вставки"><br><br>
<br><br>
<h1>Вкладка Content окна редактора тегов для элемента списка</h1>Рисунок 4.15. Вкладка Content окна редактора тегов для элемента списка<br><br><img src="image/vkladka-content-okna-redaktora-tegov-dlja_1.gif" alt="Вкладка Content окна редактора тегов для элемента списка"><br>
Замечание
<br>Замечание<br><br>Во всех приведенных выше диалоговых окнах имеется флажок Compact, если он установлен, то соответствующий тег используется с атрибутом COMPACT.
Для создания так называемого списка определений (Definition List) на вкладке Lists имеется три кнопки: Definition List, Definition Term (Определяемый термин) и Definition (определение).<br>
Первая из них обеспечивает вставку в код страницы «заготовки» списка, которая содержит теги <DL>, <DT> и <DD>, как показано на Рисунок 4.17.<br><br>
<h1>Вкладка Fonts панели быстрой вставки</h1>Рисунок 4.18. Вкладка Fonts панели быстрой вставки<br><br><img src="image/vkladka-fonts-paneli-bystroj-vstavki_1.gif" alt="Вкладка Fonts панели быстрой вставки"><br>
Щелчок на любой из этих кнопок приводит к непосредственной вставке соответствующего тега в код страницы. Исключение составляет лишь кнопка Font, которая открывает диалоговое окно редактора тегов.<br>
Диалоговое окно Font содержит следующие элементы (Рисунок 4.19):<br>
<li> раскрывающийся список Color (Цвет), позволяющий выбрать цвет символов шрифта;</li>
<li>три взаимосвязанных списка Size (Размер), которые позволяют, с одной стороны, указать способ измерения размера (в абсолютных или в относительных единицах), а с другой — выбрать значение атрибута SIZE:</li>
<li> Relalive+ — размер шрифта устанавливается больше стандартного в заданное число раз;</li>
<li> Absolute — размер шрифта устанавливается в абсолютных единицах;</li>
<li> Relative - —размер шрифта устанавливается меньше стандартного<br>в заданное число раз.</li>
<br><br>
<h1>Вкладка IMG Tag окна редактора тегов</h1>Рисунок 4.21. Вкладка IMG Tag окна редактора тегов<br><br><img src="image/vkladka-img-tag-okna-redaktora-tegov_1.gif" alt="Вкладка IMG Tag окна редактора тегов"><br>
На вкладке IMG Tag имеются следующие элементы (Рисунок 4.21):<br>
<li> поле Source (Источник), предназначенное для ввода значения атрибута SRC; значение может быть введено либо с клавиатуры, либо с помощью расположенной справа кнопки, открывающей стандартное диалоговое окно Windows; выбранное изображение отображается в находящемся ниже окне просмотра; звездочка возле имени атрибута означает, что он является обязательным;</li>
<li> поле Alt. Text (Альтернативный текст) для ввода альтернативного текста для данного изображения (атрибут ALT); флажок Include when blank (Включать, когда пусто), связанный с этим полем, указывает, будет ли вставляться в код документа атрибут ALT, когда его значение не задано; если в поле Alt. Text введен какой-либо текст, то флажок будет установлен автоматически (независимо от вашего желания);</li>
<li> поле Name (Имя) предназначено для ввода значения одноименного атрибута; если установлен флажок Include identical NAME and ID (Включать идентичные значения NAME и ID), то в код страницы будет помещен атрибут ID с тем же значением; </li>
<li> поля Width (Ширина) и Height (Высота) позволяют указать абсолютные значения (в пикселах) соответствующих атрибутов тега <IMG>1 при загрузке выбранного изображения в окно просмотра значения этих атрибутов определяются (и устанавливаются) автоматически;</li>
<li> кнопка Recalc Image Size (Пересчитать размер изображения); се целесообразно применять в тех случаях, когда атрибуты WIDTH и HEIGHT были установлены вручную и отличаются от действительных размеров изображения; щелчок на кнопке обеспечивает восстановление истинных размеров изображения;</li>
<li> поля HSpace и VSpace предназначены для установки размеров горизонтального и вертикального полей вокруг изображения;</li>
<li> поле Border (Рамка) позволяет указать толщину рамки (в пикселах) вокруг изображения;</li>
<li> раскрывающийся список Align (Выравнивание) обеспечивает выбор способа выравнивания плавающего изображения;</li>
<li> группа Image Map (Сенсорная карта), в которую входят два элемента, предназначена для установки атрибутов изображения, используемого в качестве сенсорной карты:</li>
<li> поле Use Map (Использовать карту) обеспечивает установку значения атрибута USEMAP; он необходим в том случае, когда сенсорная карта обрабатывается на стороне клиента; если описание карты находится в том же документе, то значение атрибута USEMAP должно начинаться с символа "#";</li>
<li> флажок ISMAP; его установка означает включение в код атрибута ISMAP; напомним, что если атрибут USEMAP используется вместе с атрибутом ISMAP, это говорит о том, что изображение-карта может быть обработано и на стороне клиента, и на стороне сервера.</li>
<br><br>
<h1>Вкладка Lists</h1>Рисунок 4.11. Вкладка Lists<br><br><img src="image/vkladka-lists_1.gif" alt="Вкладка Lists"><br>
Для быстрого создания списка необходимо:<br>
<li> 1. Установить курсор в требуемую позицию.</li>
<li> 2. На вкладке Lists щелкнуть на кнопке Quick List (Быстрое создание списка).</li>
<li> 3. В открывшемся диалоговом окне (Рисунок 4.12) выполнить следующие действия:</li>
<li> 3.1. С помощью пары переключателей List Style выбрать тип списка (Ordered — нумерованный или Unordered — маркированный);</li>
<li>3.2. С помощью дискретного счетчика Rows (Строки) указать число элементов списка;</li>
<li> 3.3. В раскрывающемся списке Туре (Тип) выбрать способ нумерации (или маркировки) пунктов списка;</li>
<li> 3.4. Щелкнуть в первой строке текстового поля и ввести наименование первого пункта списка; нажать клавишу <Enter>;</li>
<li> 3.5. Ввести аналогичным образом наименования остальных пунктов списка;</li>
<li>3.6. Если требуется создать в коде документа закрывающие теги для каждого элемента списка <LI>, установить флажок Generate </LI> tags;</li>
<li> 3.7. Щелкнуть на кнопке ОК.</li>
<br><br>
<h1>Включение изображений с помощью панели быстрой вставки</h1>Включение изображений с помощью панели быстрой вставки<br><br>
Чтобы вставить изображение (точнее, тег <IMG>) в код страницы, достаточно щелкнуть соответствующую кнопку на вкладке Common панели быстрой вставки. В результате будет открыто окно редактора тега, которое содержит, как и большинство окон других тегов, несколько вкладок.<br>Мы пока рассмотрим только две из них:<br>
<li> IMG Tag, предназначенную для установки значений основных атрибутов изображения;</li>
<li> Browser-specific, с помощью элементов которой можно установить значения некоторых специфических атрибутов, поддерживаемых конкретными броузерами.</li>
<br><br>
<h1>Вставка изображений из окна ресурсов</h1>Вставка изображений из окна ресурсов<br><br>
С графическими файлами можно работать на вкладках Files (обеих) и Projects.<br>Перечень возможных действий на всех вкладках идентичен. Вы можете:<br>
<li> вставить в код документа тег <IMG> с соответствующим значением атрибута SRC и установленными по умолчанию значениями других атрибутов; </li>
<li> вызвать окно IMG редактора тегов с загруженным в него изображением.</li>
Для быстрой вставки тега <IMG> необходимо:<br>
<li> 1. В окне ресурсов установить указатель мыши на значке требуемого файла.</li>
<li> 2. Нажать левую кнопку мыши и, не отпуская ее, перетащить контуры значка в окно документа на позицию вставки; отпустить кнопку мыши.</li>
Формат создаваемого таким образом тега <IMG> показан на Рисунок 4.23.<br>Альтернативный способ — щелкнуть правой кнопкой мыши на значке файла в окне ресурсов и в открывшемся контекстном меню выбрать команду Insert as Link (Вставить как ссылку).<br>
Чтобы вызвать для конкретного графического файла окно редактора тегов, необходимо выполнить одно из двух действий:<br>
<li> дважды щелкнуть на значке файла;</li>
<li> щелкнуть правой кнопкой мыши на значке файла и в открывшемся контекстном меню выбрать команду Insert as <img> (для вкладки Files) или команду Edit (для вкладки Projects).</li>
<img src="image/vstavka-izobrazhenij-iz-okna-resursov_1.gif" alt="Вставка изображений из окна ресурсов"><br>
Рисунок 4.23. Тег <IMG>, созданный перетаскиванием файла
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index12.htm">Назад</a>
</td>
<td>
<h1>Вставка изображений из окна результатов</h1>Вставка изображений из окна результатов<br><br>
При создании страниц, насыщенных графикой, приходится одновременно работать с несколькими графическими файлами. В такой ситуации полезно иметь возможность визуального представления содержимого этих файлов. В HomeSite имеется механизм, позволяющий просматривать миниатюры всех изображений, содержащихся в текущей папке. Доступ к этому механизму реализуется с помощью кнопки Thumbnails (Миниатюры), расположенной на основной панели инструментов HomeSite.<br>
Щелчок на этой кнопке приводит к тому, что в нижней части главного окна HomeSite открывается окно результатов — Results window, в котором представлены уменьшенные копии изображений (Рисунок 4.24).<br>
При наведении указателя мыши на миниатюру появляется всплывающая подсказка с основными параметрами изображения (имя и формат файла, размеры изображения в пикселах).<br>
Чтобы вставить любое изображение на страницу, достаточно просто установить на нем указатель мыши, нажать левую кнопку и перетащить контуры изображения в окно документа. После того, как кнопка будет отпущена, в код страницы будет добавлен тег <IMG> с соответствующими атрибутами.<br>
Дополнительные возможности по работе с миниатюрами обеспечиваются через контекстное меню, которое открывается щелчком правой кнопки мыши на миниатюре. Меню содержит следующие команды (Рисунок 4.25):<br><br>
<h1>Вставка тега <МЕТА> с помощью Tag Chooser</h1>Рисунок 4.2. Вставка тега <МЕТА> с помощью Tag Chooser<br><br><br><img src="image/vstavka-tega-meta-s-pomoshhju-tag-chooser_1.gif" alt="Вставка тега <МЕТА> с помощью Tag Chooser"><br><br>
<br><br>
<h1>Вставка тегов <МЕТА> с помощью шаблонов кода</h1>Рисунок 4.1. Вставка тегов <МЕТА> с помощью шаблонов кода<br><br><img src="image/vstavka-tegov-meta-s-pomoshhju-shablonov-koda_1.gif" alt="Вставка тегов <МЕТА> с помощью шаблонов кода"><br>
Для вставки тегов <МЕТА> с помощью Tag Chooser необходимо:<br>
<li> 1. Щелкнуть правой кнопкой мыши в позиции вставки тега и в контекстном меню выбрать команду Insert Tag...</li>
<li>2. В открывшемся окне утилиты Tag Chooser выбрать группу HTML-тегов Page Composition (Композиция страницы), а в ней — категорию General (Рисунок 4.2).</li>
<li> 3. В правом подокне дважды щелкнуть на пункте МЕТА (HTML).</li>
<li> 4. В открывшемся окне редактора тегов (Рисунок 4.3) выполнить следующие действия:</li>
<li> 4.1. С помощью двух «мини-вкладок» Name и HTTP-Equiv выбрать атрибут тега, а в раскрывающемся списке - - параметр атрибута.</li>
<li>4.2. В текстовом поле Content ввести значение атрибута и щелкнуть на кнопке ОК.</li>
<br><br>
<h1>Вставка тегов <МЕТА></h1>Вставка тегов <МЕТА><br><br>
Тег <МЕТА> -- один из немногих популярных тегов, которые почему-то не были удостоены чести включения в состав панели быстрой вставки. Правда, вы можете создать собственную кнопку либо включить необходимые теги непосредственно в шаблон. Тем не менее, для вставки тегов <МЕТА> можно использовать имеющиеся в составе HomeSite готовые средства:<br>
<li> список шаблонов кода (Code Template);</li>
<li> утилиту Tag Chooser совместно с редактором тегов;</li>
<li> мастер быстрого создания страниц (Quick Start Wizard).</li>
Список шаблонов кода содержит шаблоны для тега <МЕТА> со всеми возможными атрибутами. Чтобы воспользоваться списком шаблонов кода, необходимо:<br>
<li> 1. Установить курсор в позицию вставки тега и нажать комбинацию клавиш <Ctrl>+J.</li>
<li> 2. В появившемся списке (Рисунок 4.1) выбрать тег <МЕТА> с нужным атрибутом и нажать клавишу <Enter>.</li>
После этого останется только ввести значения атрибутов.<br><br>
<h1>Ввод и форматирование текста</h1>Ввод и форматирование текста<br><br>
Несмотря на все более широкое использование при создании Web-страниц графики и мультимедийных элементов, текст по-прежнему является основным средством информационного наполнения сайта. При этом легкость и удобство восприятия текстовой информации определяется в основном тремя факторами:<br>
<li> стилем изложения;</li>
<li> соблюдением правил орфографии и пунктуации;</li>
<li> формой визуального представления текстовой части документа.</li>
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Ввод параметров стиля с помощью всплывающих списков</h1>Рисунок 4.48. Ввод параметров стиля с помощью всплывающих списков<br><br><img src="image/vvod-parametrov-stilja-s-pomoshhju-vsplyvajushhih_1.gif" alt="Ввод параметров стиля с помощью всплывающих списков"><br>
Сокращенный формат окна TopStyle Lite используется в том случае, ecj; приложение открывается из окна редактора тегов (с помощью кнопки Style, Editor)].<br>
Этот формат отличается от расширенного следующими параметрами:<br>
<li> отсутствует строка меню, так как в данном случае отсутствует нсобхс димость работы с CSS-файлами;</li>
<li> в панели инструментов отсутствует кнопка New Selector, так как для одного элемента не может быть задано более одного стиля; по этой же причине отсутствуют кнопки для работы с файлом и окно просмотра Preview: чтобы оценить созданный стиль, вполне достаточно области просмотра, входящей в состав окна Style Inspector,</li>
<li>на панели инструментов присутствуют две новые кнопки:</li>
<li> Done (Готово), которая позволяет вставить описание стиля в окно редактора тегов и закрыть TopStyle Lite;</li>
<li> Cancel (Отменить), которая закрывает TopStyle Lite без сохранения результатов работы;</li>
<li> в окне Style Inspector отсутствует вкладка Selectors (причина все та же — для одного стиля нет смысла строить дерево).</li>
Остальные элементы окна имеют то же предназначение, что и при использовании расширенного формата TopStyle Lite. Соответственно, для установки параметров стиля элемента необходимо:<br>
<li> 1. Внутри фигурных скобок ввести параметры и их значения (либо с помощью всплывающих списков, либо с помощью Style Inspector).</li>
<li> 2. Оценить полученный результат, воспользовавшись областью просмотра.</li>
<li> 3. Если стиль соответствует замыслу, щелкнуть на кнопке Done.</li>
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>«Заготовка» списка определений созданная с помощью кнопки Definition List</h1>Рисунок 4.17. «Заготовка» списка определений, созданная с помощью кнопки Definition List<br><br><img src="image/zagotovka-spiska-opredelenij-sozdannaja-s_1.gif" alt="«Заготовка» списка определений созданная с помощью кнопки Definition List"><br>
Эта конструкция помещается в страницу без вызова окна редактора тегов. По умолчанию закрывающие теги для термина и пояснения не создаются. Чтобы добавить в список новые элементы, следует воспользоваться кнопками Definition Term и Definition.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>При вставке видеоклипа следует обязательно </h1>Замечания<br><br>1. При вставке видеоклипа следует обязательно предусмотреть использование альтернативного статического изображения, которое будет отображаться на странице в том случае, если броузер читателя не обладает средствами воспроизведения видео. Создание альтернативного изображения выполняется с помощью элементов вкладки IMG Tag, рассмотренной выше.<br>2. Напомним, что для тега <IMG> может быть использован альтернативный (сокращенный) вариант окна редактора тегов. Для работы с ним следует предварительно установить соответствующий флажок на вкладке HTML/XHTML диалогового окна Settings.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index11.htm">Назад</a>
</td>
<td>
<h1>Несколько забегая вперед, отметим, что </h1>Замечания<br><br>1. Несколько забегая вперед, отметим, что приложение TopStyle Lite может использоваться в составе HomeSite в двух форматах: расширенном, который обеспечивает редактирование CSS-файлов, и в сокращенном, предназначенном для редактирования атрибута STYLE отдельного элемента HTML-страницы.<br>2. Если вы попытаетесь поместить значок CSS-файла не в заголовок, а в тело документа, на экране появится окно с предупреждением о том, что вы совершаете ошибку (не смертельную, но все же...). HomeSite предоставляет возможность настройки цветовой схемы, используемой для CSS-файлов. Чтобы открыть окно для настройки схемы, необходимо в диалоговом окне Settings перейти на вкладку Color Coding, в списке схем выбрать пункт ess и щелкнуть на кнопке Edit Scheme. Это окно полезно тем, что позволяет познакомиться с основными конструкциями языка CSS (Рисунок 4.37). О назначении элементов управления окна редактирования цветовой схемы см. подраздел «Управление визуальным представлением документа» третьей главы. К встроенным средствам HomeSite для работы с CSS также относятся:
<li> диалоговые окна редактора тегов для установки атрибутов тегов <STYLE>, <LINK>, <DIV> и <SPAN>; </li>
<li>специальные элементы управления в диалоговых окнах других тегов, а также наличие во всех окнах специальной вкладки StyleSheet/ Accessibility. </li>
<br>
Замечание
<br>Замечание<br><br><img src="image/zamechanija_1.gif" alt="Несколько забегая вперед, отметим, что "><br>Указанная кнопка имеет по сравнению с другими аналогичными кнопками редактора тегов две особенности: во-первых, в окнах других тегов такие кнопки размещены на вкладке Stylesheets/Accessibility, во-вторых, они обеспечивают вызов TopStyle Lite в сокращенном формате.
<li> на вкладке HTML 4.0 — два параметра, соответствующие атрибутам тега <STYLE>, предусмотренным спецификацией HTML 4.0:</li>
<li> TYPE — указывает броузеру, что в тексте HTML-документа содержится описание стилей, либо сценарий на JavaScript; в первом случае атрибут принимает значение text/сss, во втором — text/ javascript; требуемое значение выбирается из раскрывающегося списка Туре;</li>
<li> MEDIA — указывает броузеру, каким образом (какими средствами) должен отображаться элемент страницы, для которого задан стиль (например, вывод на экран в обычном режиме или в режиме предварительного просмотра печатного документа); значение атрибута устанавливается с помощью трех раскрывающихся списков Media (три списка позволяют задать до трех альтернативных вариантов вывода).</li>
<br>
Выше было сказано, что ссылка на внешнюю таблицу стилей, хранящуюся в CSS-файлах, создастся с помощью тега <LINK> с атрибутом REL. Для вставки тега в код страницы следует воспользоваться, как и для тега <STYLE>, утилитой Tag Chooser. Единственное отличие — тег <LINK> входит в категорию Page Composition (Композиция страницы), которая содержит один раздел — General. При выборе в списке тега <LINK> на экране появится соответствующее диалоговое окно редактора тегов.<br> Поскольку тег <LINK> применяется на HTML-страницах не только для создания ссылок на таблицы стилей, то окно редактора тегов предоставляет возможность задавать самые разные сочетания атрибутов этого тега (Рисунок 4.39). Тем ж менее, в данном подразделе мы рассмотрим установку лишь трех атрибутов которые непосредственно связаны с применением CSS: REL, HREF и TYPE.<br> <img src="image/zamechanija_2.gif" alt="Несколько забегая вперед, отметим, что "><br>
Рисунок 4.39. Окно установки атрибутов тега <LINK><br> Установка значений атрибутов REL и HREF выполняется на вкладке LINK Tag, а установка значения атрибута TYPE — на вкладке HTML 4.0.<br> Чтобы задать значение атрибута HREF, следует ввести в поле Href (unu выбрать с помощью расположенной рядом кнопки) адрес CSS-файла с таблицей стилей.<br> Установка значения атрибута REL выполняется с помощью раскрывающегося списка Forward link types (Тип ссылки в прямом направлении), который содержит перечень всех допустимых значений этого тега.<br> Для установки требуемого значения атрибута TYPE следует перейти на вкладку HTML 4.0 и воспользоваться раскрывающимся списком Туре.<br> После вставки в код документа тега <LINK> с указанными атрибутами в контекстное меню окна документа для этого -тега добавляется команда Edit Linked Style Sheet (Редактировать связанную таблицу стилей), как показано на Рисунок 4.40. Ее выбор приводит к вызову приложения TopStyle Lite в расширенном формате и загрузке в него соответствующего CSS-файла.<br> <img src="image/zamechanija_3.gif" alt="Несколько забегая вперед, отметим, что "><br>
Рисунок 4.40. Контекстное меню тега <LINK>, ссылающегося на CSS-файл<br> Для вставки в код страницы тегов <DIV> и <SPAN>, с помощью которых выполняется обращение к встроенной (то есть заданной в том же документе) таблице стилей, необходимо:
<li> 1. В позиции вставки (в теле документа) щелкнуть правой кнопкой мыши и в контекстном меню выбрать команду Insert Tag...</li>
<li> 2. В открывшемся окне утилиты Tag Chooser выбрать категорию Formatting and Layout (Форматирование и компоновка), а в ней — раздел General.</li>
<li>3. В правом подокне в списке тегов дважды щелкнуть на имени вставляемого тега (<DIV> или <SPAN>).</li>
<li>4. В открывшемся диалоговом окне редактора тегов (Рисунок 4.41) перейти на вкладку StyleSbeet/Accessibility (для тега <SPAN> она открыта по умолчанию).</li>
<li>5. В зависимости от уровня стиля (стиль класса или отдельного элемента) ввести его имя в поле Class или ID и щелкнуть на кнопке ОК.</li>
<br>
Чтобы установить значение атрибута STYLE для любого элемента страницы, необходимо:
<li> 1. Щелкнуть правой кнопкой мыши на имени тега и в контекстном меню выбрать команду Edit Current Tag.</li>
<li>2. В открывшемся диалоговом окне редактора тегов перейти на вкладку StyleSheet/Accessibility.</li>
<li>3. Щелкнуть на кнопке Style Editor (Редактор стилей) и с помощью приложения TopStyle Lite описать параметры стиля; на панели инструментов TopStyle Lite щелкнуть на кнопке Done (Готово); приложение будет закрыто, а параметры стиля появятся в поле Style (Рисунок 4.42).</li>
<li> 4. В окне редактора тегов щелкнуть на кнопке ОК.</li>
<br>
В результате выполнения описанной процедуры в код тега будет добавлен атрибут STYLE с заданными параметрами.<br>
<img src="image/zamechanija_4.gif" alt="Несколько забегая вперед, отметим, что "><br>
Рисунок 4.41. Окна редактора тегов для тегов <D/V> и <SPAN><br> <img src="image/zamechanija_5.gif" alt="Несколько забегая вперед, отметим, что "><br>
Рисунок 4.42. Вкладка StyleSheet/Accessibility диалогового окна редактора тегов
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Разработка навигационной схемы сайта</h1>
<h1>Дерево ссылок построенное относительно файла главной страницы (lndex html)</h1>Рисунок 5.5. Дерево ссылок, построенное относительно файла главной страницы (lndex.html)<br><br><img src="image/derevo-ssylok-postroennoe-otnositelno-fajla_1.gif" alt="Дерево ссылок построенное относительно файла главной страницы (lndex html)"><br>
<img src="image/derevo-ssylok-postroennoe-otnositelno-fajla_2.gif" alt="Дерево ссылок построенное относительно файла главной страницы (lndex html)"><br>
Рисунок 5.6. «Раскрытие» ссылки следующего уровня
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br><br>Рисунок 5.12. HTML-код, сгенерированный редактором тегов<br><br><br><img src="image/html-kod-sgenerirovannyj-redaktorom-tegov_1.gif" alt="<title>(.*)">
Замечание
Замечание
После того как почтовая ссылка будет помещена в код документа, для ее редактирования с помощью команды Edit Current Tag будет вызываться окно тега <А>.
|
|
| |
|
|
Разработка навигационной схемы сайта
Та легкость, с которой современные HTML- редакторы позволяют созда вать гиперссылки на основе произвольного фрагмента текста документа или графического изображения, вызывают соблазн расставить их везде, где только можно. Однако практика показывает, что чрезмерное увлечение создание ссылок может выйти боком как создателю сайта, так и посетителям.
Продуманная навигационная схема сайта должна предоставлять посетителям важную возможность — оценить, какая информация находится на узле, насколько быстро можно до нее добраться. Находясь на любой странице узла, посетители должны представлять свое местоположение, знать, что они могут сделать на этой странице, и куда могут пойти дальше. |
|
|
Кнопка вызова утилиты Image Map EditorРисунок 5.13. Кнопка вызова утилиты Image Map Editor
На экране появится диалоговое окно, в котором отображается список графических файлов, используемых в редактируемой странице (Рисунок 5.14). В этом списке следует выбрать изображение, на основе которого будет создана сенсорная карта. Имя этого файла появится в поле Image Name (Имя изображения). После этого остается только указать имя карты (произвольный идентификатор) в поле Map Name (Имя карты) и нажать кнопку ОК.
Замечание
Замечание
Если в редактируемом документе уже имеются сенсорные карты, то они в список не включаются.
В открывшемся окне редактора представлено выбранное изображение, а также набор инструментов для создания сенсорной карты (Рисунок 5.15).
Напоминание о том что для создания относительной ссылки требуется сохранить документ на дискеРисунок 5.7. Напоминание о том, что для создания относительной ссылки требуется сохранить документ на диске
При создании ссылки на основе тега <А> HomeSite автоматически, генерирует текст ссылки, в качестве которого используется заголовок документа.
Замечание
Замечание
Напомним, что от этой услуги можно отказаться, сняв флажок Use of dragged documents... на вкладке HTML/XHTML диалогового окна Settings.
При создании ссылки на основе тега <IMG> в код документа вставляются атрибуты SRC, WIDTH, HEIGHT, ALT и BORDER. При этом значение атрибута SRC генерируется по тем же правилам, что и для атрибута HREF тега <А>: относительный адрес будет вычислен только после сохранения документа на диске.<br> Значения атрибутов WIDTH, HEIGHT устанавливаются на основе фактичес-ких параметров изображения, атрибут ALT вставляется с пустым значением, а атрибут BORDER равен 0.<br> Чтобы создать ссылку с помощью редактора тегов, следует на вкладке Common панели быстрой вставки щелкнуть на кнопке Anchor (Якорь).<br> Обязательные атрибуты тега устанавливаются на вкладке A Tag, которая содержит следующие элементы управления (Рисунок 5.8):
<li> текстовое поле HREF, которое предназначено для ввода значения одноименного атрибута; адрес-ссылку можно либо ввести вручную, либо выбрать с помощью одной из трех расположенных справа кнопок: первая из них открывает список файлов текущей папки, вторая — список файлов в папке Favorites броузера MSIE, а третья — список закладок (Bookmarks), созданных с помощью броузера Netscape; если маршрут ссылки был выбран с помощью кнопок, то при работе с несохраненным документом на экране появится сообщение, что в ссылке будет использован абсолютный адрес (Рисунок 5.9); для подтверждения следует щелкнуть на кнопке ОК (правда, если просто закрыть окно, все равно в поле будет помещен абсолютный адрес); если вы работаете с сохраненным документом, то HomeSite вычислит относительный адрес;</li>
<br><br>
<h1>Общие правила проектирования навигационной схемы сайта</h1> Общие правила проектирования навигационной схемы сайта<br><br>
Для выполнения приведенного выше требования достаточно соблюдать не-сколько не очень сложных правил:<br>
<li> на главной странице сайта обязательно должна быть представлена карта сайта, причем не только в графической, но и в текстовой форме (подробнее о структуре главной страницы мы поговорим немного позже);</li>
<li> на всех последующих страницах должны присутствовать ссылки на главную страницу и/или на первую страницу данного раздела (на которой, в свою очередь, должно быть представлено содержание раздела);</li>
<li> при использовании рисунков в качестве ссылок они должны быть однотипными на всех страницах и располагаться в одной и той же позиции;</li>
<li> рисунки, используемые в качестве ссылок (в том числе «кнопки»), должны быть интуитивно различимы для читателей относительно других элементов страницы.</li>
На достаточно крупных сайтах дополнительно целесообразно предусмотреть возможность оперативной связи с автором (Web-мастером), к которому можно было бы обратиться в затруднительных ситуациях.<br>
Для реализации навигационной схемы обычно используются следующие типы ссылок (текстовых или графических):<br>
<li> внутренние ссылки, связывающие страницы в пределах одного сайта;</li>
<li> внешние ссылки, обеспечивающие связь с документами, расположенными вне данного сайта;</li>
<li> ссылки на адреса электронной почты, которые открывают форму для отправки электронной почты;</li>
<li> локальные ссылки (иногда именуемые якорями), которые позволяют посетителю переходить на конкретный фрагмент той же страницы или одной из других страниц узла.</li>
Поскольку даже относительно небольшая публикация, состоящая из нескольких страниц, может содержать весьма сложную систему перекрестных ссылок, полезно для любого проекта предварительно представить навигационную схему сайта в графической форме. Причем совсем необязательно использовать для этих целей графический редактор — вполне достаточно карандаша, ластика и листа бумаги.<br>
Будет ли это линейная схема или схема в виде дерева, либо полносвязная структура, ее ядром, источником всех связей должна стать главная страница, поскольку читатель должен иметь возможность вернуться на нее из любой точки узла.<br>
На Рисунок 5.1 показан вариант навигационной схемы для небольшого узла.<br>Хорошо спланированная структура является фундаментом для дальнейшего развития узла.<br>
Возможность наращивания информационного наполнения сайта без кардинального изменения его структуры называется масштабируемостью сайта.<br><br>
<h1>Окно для установки атрибутов тега <FRAME></h1>Рисунок 5.22. Окно для установки атрибутов тега <FRAME><br><br><img src="image/okno-dlja-ustanovki-atributov-tega-frame_1.gif" alt="Окно для установки атрибутов тега <FRAME>"><br>
Тег <NOFRAMES> используется для вывода на экран альтернативного текста для тех читателей, броузеры которых не поддерживают работу с фреймами. Как правило, этот тег используется без атрибутов и должен помещаться внутри тега <FRAMESET>. Окно редактора тегов содержит соответствующую информацию о тeгe.<br>
Тег <IFRAME> включен как стандартный элемент лишь в версию языка HTML 4.0. Он позволяет создавать так называемые «плавающие» фреймы (по аналогии с «плавающими» изображениями и «плавающими» таблицами). «Плавающие» фреймы, в отличие от «стандартных», не выравниваются по краю окна броузера, а могут располагаться в произвольной позиции (Рисунок 5.23).<br>
Еще одна важная особенность тега <IFRAME> состоит в том, что он используется без тега-контейнера <FRAMESET> и может быть непосредственно вставлен в любом месте тела HTML-страницы.<br>
В настоящее время тег <IFRAME> поддерживается только броузером MSIE. Тем не менее, в окне редактора тегов, предназначенного для установки его атрибутов, об этом ничего не сказано (Рисунок 5.24).<br>
С помощью этого окна могут быть заданы следующие атрибуты тега <IFRAME>:<br>
<li> на вкладке IFRAME Tag — атрибуты SRC и NAME (они используются так же, как одноименные атрибуты «стандартных» фреймов), атрибуты HEIGHT и WIDTH (они определяют размеры окна фрейма и могут быть заданы в пикселах или в процентах), MARGINHEIGHT, MARGINWIDTH, SCROLLING, NORESIZE и BORDER (этот атрибут может принимать одно из двух значений — «О» — рамка не выводится и «1»— рамка выводится); кроме того, здесь имеется раскрывающийся список Align (Выравнивание), с помощью которого устанавливается значение одноименного атрибута (он управляет взаимным расположением окна фрейма и введенного рядом текста);</li>
<li> на вкладке Alternative Content вводится текст, который будет помещен между открывающим и закрывающим тегами <IFRAfyffi> и </IFRAME>; он предназначен для тех читателей, броузеры которых не поддерживают работу с «плавающими» фреймами;</li>
<li> на вкладке Browser-specific — атрибуты HSPACE и VSPACE, значения которых определяют размеры вертикального и горизонтального смещения окна фрейма относительно предыдущего элемента страницы и/ или края окна броузера.</li>
Тег <BASE> прямого отношения к фреймам не имеет. Он позволяет указать полный URL документа, с тем чтобы использовать его в качестве базового адреса для определения частичных URL связанных с ним документов.<br>
Размещение кнопки Base Target на вкладке Frames объясняется тем, что применение тега <BASE> особенно эффективно именно при работе с фреймами. Указав базовый адрес страницы, содержащей тег <FRAMSET>, вы можете использовать частичные URL для адресации, документов, образующих фреймы. Это не только делает более компактным код базовой страницы, но и способствует повышению надежности ссылок: при изменении базового адреса частичные URL останутся корректными.<br>
Щелчок на кнопке Base Target приводит к открытию окна редактора тегов, с помощью которого может быть установлен единственный обязательный атрибут тега <BASE> — HREF. Его значением является абсолютный адрес текущего документа.<br>
Замечание
<br>Замечание<br><br>Тег <BASE> должен находиться внутри заголовка документа (то есть внутри тега <head>
<link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/>).
Кнопки вкладки Frames, которые обеспечивают быструю вставку «фреймовых» тегов без атрибутов, можно считать вспомогательными инструментами. Их целесообразно применять в том случае, если вы хотите внести небольшие изменения в набор фреймов, созданный ранее другими средствами.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index9.htm">Назад</a>
</td>
<td>
<h1>Окно для установки атрибутов тега <FRAMESET></h1>Рисунок 5.21. Окно для установки атрибутов тега <FRAMESET><br><br><img src="image/okno-dlja-ustanovki-atributov-tega-frameset_1.gif" alt="Окно для установки атрибутов тега <FRAMESET>"><br>
<li> на вкладке FRAMESET Tag — атрибуты ROWS и COLS (их значения вводятся в одноименных полях);</li>
<li> на вкладке Browser-specific — атрибуты FRAMEBORDER (он управляет выводом рамок фреймов в наборе), FRAMESPACING (позволяет устанавливать ширину рамки) и BORDERCOLOR (цвет рамки).</li>
Для тега <FRAME> с помощью окна редактора тегов могут быть установлены следующие атрибуты (Рисунок 5.22).<br>
<li> на вкладке FRAME Tag — атрибуты SRC (его значение устанавливается в поле Source), NAME, MARGINHEIGHT, MARGINWIDTH, SCROLLING, NORESIZE и FRAMEBORDER (в данном случае его значения могут быть выбраны из одноименного раскрывающегося списка, в котором присутствуют упоминавшиеся выше варианты "Yes" и "No"); </li>
<li> на вкладке Browser-specific — единственный атрибут — BORDERCOLOR.</li>
<br><br>
<h1>Окно Frame Attributes</h1>Рисунок 5.20. Окно Frame Attributes<br><br><img src="image/okno-frame-attributes_1.gif" alt="Окно Frame Attributes"><br>
Окно Frame Attributes содержит следующие элементы (Рисунок 5.20):<br>
<li> поле Name (Имя), предназначенное для ввода значения атрибута NAME; этот атрибут задаст имя фрейма; он не является обязательным и нужен только для тех фреймов, содержимое которых будет обновляться при просмотре страницы читателем; в качестве имени фрейма может использоваться любая последовательность латинских букв, цифр и символов подчеркивания (цифра не должна стоять первой); имя фрейма должно использоваться в качестве значения атрибута TARGET тега <А>, который содержит ссылку на вызываемый документ;</li>
Замечание
<br>Замечание<br><br>Чтобы управлять выводом информации в различные окна набора фреймов, не обязательно именовать фреймы. В качестве значения атрибута TARGET вместо конкретного имени могут быть введены предопределенные значения:<br>_blank — вызываемый документ всегда загружается в новое, неименованное окно;<br>_self -— вызываемый документ всегда загружается в то же окно, в котором была инициирована ссылка;<br>_parent — вызываемый документ загружается в родительский фрейм (то есть фрейм более высокого уровня иерархии). Если данный фрейм не имеет «родителя», или сам является таковым, то результат аналогичен применению значения _self;<br>_top — вызываемый документ загружается в окно самого верхнего уровня (если данный фрейм сам является таковым, то результат аналогичен применению значения _self).
<li>поле Source URL (URL источника), в котором следует указать (или выбрать с помощью расположенной рядом кнопки) адрес документа, помещаемого в фрейм; с точки зрения HTML атрибут SRC является обязательным, хотя мастер разрешает оставить и это поле пустым;</li>
<li>поля Height (Высота) и Width (Ширина), входящие в группу Margins (Поля), которые обеспечивают установку атрибутов MARGINHEIGHT и MARGINWIDTH, управляющих размерами вертикального и горизонтального полей вокруг содержимого фрейма; минимальное значение для каждого из атрибутов равно 1 (0 указывать нельзя); если значения не заданы, броузер установит собственное значение; </li>
<li>группу элементов Frame Appearance (Визуальное представление фрейма), в которую входят:</li>
<li> раскрывающийся список Scrolling (Прокрутка), с помощью которого устанавливается значение одноименного атрибута (он управляет отображением полос прокрутки в окне фрейма); значение Аutо позволяет броузеру добавлять полосу прокрутки только в том случае, если содержимое документа не умещается в окно фрейма; </li>
<li>флажок Border (Рамка), управляющий значением атрибута FRAMEBORDER: если флажок снят, атрибут равен 0 (рамка не выводится), если поставлен, то его значение равно 1 (рамка выводится);</li>
Замечание
<br>Замечание<br><br>Атрибут FRAMEBORDER может принимать еще два предопределенных значения: «Yes» — рамка выводится; ее толщина определяется в соответствии с атрибутом BORDER тега <FRAMESET>; «No» — рамка для данного фрейма не выводится; поскольку эти значения являются специфическими для броузера Netscape, то они могут быть введены либо вручную, либо с помощью окна редактора тегов (о котором будет рассказано ниже).
<li> флажок No Resize (Не изменяемый), управляющий значением атрибута NORESIZE: если флажок снят, атрибут отсутствует (посетитель может изменять размеры окна фрейма), если поставлен, то атрибут присутствует и не позволяет изменять размеры фрейма.</li>
После того, как установка атрибутов фреймов будет завершена, щелкните на кнопке Finish (Готово). Мастер сгенерирует соответствующий код и вставит его в редактируемый документ.<br>
Обратите внимание, что кнопка Finish доступна во втором окне мастера еще до того, как будут установлены параметры хотя бы одного фрейма. Это означает, что вы можете прекратить работу с мастером. В этом случае для всех фреймов набора будут заданы значения атрибутов по умолчанию.<br>
Важное замечание<br>Напомним, что HTML-страница, в которой содержится тег <FRAMESET>, должна быть без тега <BODY>. Поэтому, если вы создавали набор фреймов на основе стандартного шаблона, необходимо после завершения работы мастера вручную удалить теги <BOOY> и </BOOY> из кода страницы. Из этого следует вывод: для страницы с описанием набора фреймов должен использоваться отдельный файл, «без тела».
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Окно редактора Image Map Editor</h1>Рисунок 5.15. Окно редактора Image Map Editor<br><br><img src="image/okno-redaktora-image-map-editor_1.gif" alt="Окно редактора Image Map Editor"><br>
Кроме того, в правой части окна имеется панель активных зон (Regions Window), в которой отображается информация об активных зонах изображения (если они есть).<br>
Работа с редактором Image Map Editor состоит в выполнении следующих действий:<br>
<li>1. Выбрать форму очередной горячей зоны, щелкнув на соответствующей кнопке панели инструментов.</li>
<li> 2. Установить указатель мыши в начальной точке будущей горячей зоны, и, нажав левую кнопку мыши, переместить его до конечной точки (если горячая зона должна иметь форму многоугольника, то очередная его вершина создается щелчком кнопки мыши), после чего отпустить кнопку мыши. </li>
<li>3. В открывшемся окне редактора тегов (Рисунок 5.16) установить необходимые атрибуты тега <AREA> (адрес перехода — HREF и альтернативный текст) и нажать кнопку ОК; после того, как окно редактора тегов закроется, в панели активных зон появится уменьшенное изображение зоны и адрес связанного с ней документа (Рисунок 5.17); /двойной щелчок левой кнопкой мыши на изображении зоны позволяет повторно открыть окно установки атрибутов тега <AREA>. </li>
<li> 4. Если определены все активные зоны сенсорной карты, выбрать в меню File (Файл) команду Save and exit (Сохранить и выйти); окно Image Map Editor закроется, а в код редактируемой страницы будет вставлен тег <МАР> со всеми необходимыми атрибутами.</li>
<br><br>
<h1>Окно редактора тегов для создания почтовой ссылки</h1>Рисунок 5.11. Окно редактора тегов для создания почтовой ссылки<br><br><img src="image/okno-redaktora-tegov-dlja-sozdanija-pochtovoj_1.gif" alt="Окно редактора тегов для создания почтовой ссылки"><br>
<li> Subject (Тема); оно предназначено для ввода произвольного текста, поясняющего содержание письма; введенный текст будет вставлен поле «Тема» почтового клиента; </li>
<li> Link image (Значок ссылки); в нем может быть указан адрес графического файла, который будет использоваться в качестве значка, отобр жаемого на странице возле текста ссылки;</li>
<li> Addressee/ link text (Адресат/текст ссылки); в нем следует ввести текст ссылки (в качестве такого текста может быть непосредственно указан имя адресата или наименование организации-адресата).</li>
HTML-код, который будет сгенерирован редактором тегов и помещен в дoкумент, показан на Рисунок 5.12 (применительно к параметрам примера, приведи ного на Рисунок 5.11).<br><br>
<h1>Окно установки атрибутов тега <AREA></h1>Рисунок 5.16. Окно установки атрибутов тега <AREA><br><br><img src="image/okno-ustanovki-atributov-tega-area_1.gif" alt="Окно установки атрибутов тега <AREA>"><br>
К сожалению, утилита Image Map Editor не может быть открыта повторно для редактирования параметров существующей сенсорной карты. Вместе с тем, могут быть скорректированы атрибуты тегов, с помощью которых формируется карта (<МАР> и <AREA>). Для этого можно воспользоваться редактором тегов, вызвав его командой Edit Current Tag из контекстного меню тега.<br>
<img src="image/okno-ustanovki-atributov-tega-area_2.gif" alt="Окно установки атрибутов тега <AREA>"><br>
Рисунок 5.17. Представление активной зоны в информационном окне
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Окно выбора изображения для создания сенсорной карты</h1>Рисунок 5.14. Окно выбора изображения для создания сенсорной карты<br><br><br><img src="image/okno-vybora-izobrazhenija-dlja-sozdanija-sensornoj_1.gif" alt="Окно выбора изображения для создания сенсорной карты"><br><br>
<br><br>
<h1>Первое окна мастера создания фреймов</h1>Рисунок 5.19. Первое окна мастера создания фреймов<br><br><img src="image/pervoe-okna-mastera-sozdanija-frejmov_1.gif" alt="Первое окна мастера создания фреймов"><br>
Замечание
<br>Замечание<br><br>Если требуется активизировать некоторый набор фреймов в целом (то есть все фреймы набора), следует щелкнуть на любом фрейме при нажатой клавише <Shift>.
Напомним, что структура набора фреймов определяется атрибутами ROWS и COLS тега <FRAMESET>. При этом значения указанных атрибутов (размеры фреймов) могут быть заданы как в абсолютных единицах (пикселах), так и в процентах от размера окна броузера. Мастер Frame Wizard обеспечивает установку значений в процентах, поскольку такой вариант является более «безопасным» (результат не зависит от разрешения монитора читателя). При необходимости вы можете впоследствии заменить установленные значения абсолютными величинами, отредактировав код документа.<br>
После того как структура набора фреймов будет определена, щелкните на кнопке Next (Далее), чтобы перейти на второй шаг работы с мастером.<br>
На втором шаге вы можете установить индивидуальные атрибуты каждого фрейма (то есть атрибуты тегов <FRAME>).<br>
В исходном состоянии элементы управления, имеющиеся во втором окне мастера (оно называется Frame Attributes — «атрибуты фрейма»), недоступны. Чтобы установить атрибуты фрейма, требуется щелкнуть на его изображении.<br><br>
<h1>Представление навигационной схемы в окне ресурсов</h1>Представление навигационной схемы в окне ресурсов<br><br>
Несмотря на то, что разработчики HomeSite постарались свести к минимуму долю ручного кодирования, при создании ссылок понимание способов адресации ресурсов публикации просто необходимо. Поэтому прежде, чем перейти к описанию технологии построения ссылок с помощью HomeSite, напомним особенности различных способов адресации документов, входящих в состав публикации.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Представление параметров набора фреймов на вкладке Tag Inspector окна ресурсов</h1>Рисунок 5.25. Представление параметров набора фреймов на вкладке Tag Inspector окна ресурсов<br><br><img src="image/predstavlenie-parametrov-nabora-frejmov-na-vkladke_1.gif" alt="Представление параметров набора фреймов на вкладке Tag Inspector окна ресурсов"><br>
Обратите внимание, что фреймы, для которых задан атрибут NAME, представлены в дереве тегов своим именем, для остальных же указывается значение атрибута SRC.<br>
Выбор фрейма в дереве тегов приводит к тому, что в окне инспектора тегов отображается список атрибутов этого фрейма и их значения. В зависимости от типа значений атрибутов некоторые из них вводятся непосредственно с клавиатуры, другие выбираются из раскрывающихся списков.<br>
Замечание
<br>Замечание<br><br>Основные теги, предназначенные для работы с фреймами (<FRAMESET>, <FRAME> и <NOFRAMES>) доступны через утилиту Tag Chooser. Они входят в категорию Page Composition.
Завершая описание инструментов для разработки элементов навигации, еще раз повторим, что разработка схемы навигации обязательно должна сопровождаться ее тестированием. Средства тестирования ссылок описаны в седьмой главе.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td><a href="Index10.htm">Назад</a>
</td>
<td>
<h1>Представление ссылок на вкладке Site View</h1>Представление ссылок на вкладке Site View<br><br>
HomeSite, в отличие от многих визуальных HTML-редакторов (например, в отличие от того же Dreamweaver), не располагает инструментами проектирования навигационной схемы публикации в целом или отдельной страницы. Тем не менее он позволяет достаточно быстро создать новые элементы навигации и затем визуально оценить полученный результат.<br>
Для создания и редактирования элементов навигации могут применяться те универсальные инструменты, которые были рассмотрены выше (редактор кода, редактор тегов, Tag Inspector, Tag Chooser). Кроме того, для создания сенсорных карт в составе HomeSite имеется утилита Image Map Editor.<br>
Для просмотра навигационной схемы применяется вкладка Site View окна ресурсов.<br>
Данный раздел посвящен описанию работы с этой вкладкой, а инструменты создания элементов навигации будут рассмотрены в других разделах главы.<br>
Следует отметить, что вкладка Site View является весьма универсальным средством.<br>
Если текущим документом является индексная (главная) страница сайта, то в окне ресурсов вы увидите навигационную схему сайта; если редактируется начальная страница раздела — то навигационную схему этого раздела; если же редактируется страница более низкого уровня, то вы сможете проконтролировать навигационную схему этой страницы.<br>
В отличие от окна результатов и других вкладок окна ресурсов, информация на вкладке Site View формируется динамически, при переключении на один из открытых документов; поэтому вы всегда можете вернуться к визуальному представлению навигационной схемы документа, переключившись на него в окне редактирования.<br>
Если на вкладке отсутствует навигационная схема, следует воспользоваться командой Refresh (Обновить), входящей в контекстное меню вкладки.<br>
Замечание
<br>Замечание<br><br>Команда Refresh позволяет также обновить содержимое вкладки Site View после внесения правки в документ. Однако предварительно документ следует сохранить на диске.
HomeSite обеспечивает включение в навигационную схему ссылок, создаваемых с помощью следующих типов тегов:<br>
<li><А>;</li>
<li><IMG>;</li>
<li><FRAME> (если он содержит атрибут SRC);</li>
<li><APPLET> (если он содержит атрибуты CODE или CODEBASE).</li>
Возможны два варианта представления навигационной схемы документа:<br>
<li> в виде дерева (Рисунок 5.3, слева);</li>
<li> в виде диаграммы (Рисунок 5.3, справа).</li>
Какой вариант считать более наглядным и информативным — зависит от ваших пристрастий, состава и количества ссылок.<br>
В обоих случаях представление ссылки состоит из двух частей:<br>
<li> значка, отражающего тип ресурса, на который указывает ссылка;</li>
<li> собственно адреса ресурса.</li>
Со значками все достаточно просто. В таблице 5.1 приведен перечень значков и соответствующих им типов ссылок.<br><br>
<h1>Предупреждение о том что при работе</h1>Рисунок 5.9. Предупреждение о том, что при работе с несохраненным документом в поле HREF создается абсолютный адрес<br><br><img src="image/preduprezhdenie-o-tom-chto-pri-rabote-s_1.gif" alt="Предупреждение о том что при работе"><br>
_parent — вызванный документ будет загружен в окно, которое является родительским по отношению к окну, содержащему ссылку;<br>_top — вызванный документ будет загружен в окно, которое будет открыто поверх всех существующих на данный момент окон;<br>_blank — вызванный документ будет загружен в новое пустое окно.<br>
Кроме того, в поле списка может быть вручную введено имя любого окна, либо созданного с помощью тега <FRAME>, либо открываемого с помощью метода (функции сценария) window_ореn.<br>
По умолчанию вызванный документ открывается в том же окне, в котором содержится ссылка на него.<br>
Подробнее об управлении окнами броузера при работе с фреймами будет рассказано в разделе <a href="Index8.htm"> «Создание фреймов».</a><br>
Теперь вернемся к обещанному примеру, поясняющему создание с помощью HomeSite локальных ссылок.<br>
Формирование локальных ссылок (то есть ссылок, обеспечивающих переход на некоторый подраздел внутри документа) предполагает выполнение двух шагов: присвоение имени (метки) целевому подразделу и создание ссылки на эту метку.<br>
С точки зрения HTML-кода создание локальной ссылки основано на совместном использовании атрибутов NAME и HREF тега <А>. В этом случае атрибут NAME служит для описания метки, на которую должен происходить переход; эта метка должна быть указана в качестве адреса перехода в атрибуте HREF (перед именем метки должен стоять символ #).<br>
Предположим, что документ представляет собой глоссарий, и в нем требуется обеспечить быстрый переход между двумя взаимосвязанными терминами, которые не видны одновременно на экране. Пусть первый из этих терминов -«Маркированный список», а второй — «Нумерованный список». Предположим также, что в качестве метки первого термина выбран идентификатор label1, < качестве метки второго — label2 (вообще имя метки — это произвольная пос ледовательность латинских букв и цифр).<br>
Тогда фрагмент HTML-кода страницы, обеспечивающий переход к термину «Нумерованный список», должен выглядеть так:<br>
<А NAME =« label1">Маркированный список</А> представляет собой последовательность элементов, каждый из которых снабжен графичес ким маркером в виде кружка или квадратика (сравните с <А HREF=«#label2"> нумерованным списком </А>).<br>
Фрагмент кода, обеспечивающий переход к термину «Маркированный список», должен быть построен аналогичным образом, но метки label1 и label2 меняются ролями.<br>
Чтобы создать локальную ссылку с помощью HomeSite, необходимо:<br>
1. В окне документа установить курсор в ту позицию, куда требуетcя поместить метку (то есть в начало вызываемого раздела) и на панели быстрой вставки щелкнуть кнопку Anchor. <li> 2. В открывшемся окне редактора тегов ввести в поле Name имя метки а в поле Description — название раздела (или его первую фразу, если раздел не имеет отдельного заголовка), как показано на<a href="Index2.htm#200"> Рисунок 5.1</a><a href="#200"> </a>вверху; щелкнуть на кнопке ОК.</li>
<li>3. В окне документа выделить фрагмент текста, который будет ис-пользоваться в качестве текста ссылки (например, «см. Маркированный список»), и на панели быстрой вставки щелкнуть на кнопке Anchor.</li>
<li> 4. В окне редактора тегов ввести в поле HREF имя метки с префиксом (Рисунок 5.10, внизу) и щелкнуть на кнопке ОК.</li>
С помощью редактора тегов может быть создана ссылка еще одного специ ального типа — почтовая. Правда, кнопка вызова соответствующего диалогово го окна отсутствует на панели быстрой вставки, поэтому необходимо использо вать утилиту Tag Chooser. Окно, предназначенное для создания почтовой ссыл ки, называется MAILTO. В списке тегов утилиты Tag Chooser оно входит категорию Page Elements, раздел General.<br>
Окно содержит следующие поля (Рисунок 5.11):<br>
<li> Email address (Адрес электронной почты); оно предназначено для вво да адреса, который будет помещен в поле «Куда» почтового клиента установленного на компьютере;</li>
<br><br>
<h1>Пример представления адресов в HomeSite</h1>Рисунок 5.4. Пример представления адресов в HomeSite<br><br><img src="image/primer-predstavlenija-adresov-v-homesite_1.gif" alt="Пример представления адресов в HomeSite"><br>
На этом же рисунке показан формат представления различных видов адре сов на вкладке Site View.<br>
Практически все операции на вкладке Site View могут быть выполнены с помо щью контекстного меню. Его можно открыть, щелкнув правой кнопкой мыши в любой позиции вкладки. Контекстное меню содержит следующие команды:<br>
<li> Edit (Правка); команда позволяет открыть в окне редактирования доку мент, на который указывает выбранная ссылка; команда применима только к файлам, относящимся к категории Web-документов;</li>
<li> Expand Links (Развернуть ссылку); с помощью этой команды можно «заглянуть» внутрь документа, вызываемого по данной ссылке, и по-лучить его навигационную схему; тот же результат можно получить дважды щелкнув на ссылке мышью;</li>
<li> Set as Root (Установить как корневую); команда позволяет изменить уровень представления навигационной схемы, оставив в окне только ссылки более низкого уровня по сравнению с выбранной ссылкой (при этом сама ссылка отображается как корневая); чтобы вернуться к исходному варианту представления, требуется переключиться на лю бой другой документ и затем — вновь на редактируемый;</li>
<li> Refresh (Обновить); команда обеспечивает обновление содержимого окна ресурсов (например, после внесения изменений в редактируемый документ и сохранения их на диске);</li>
<li> Options (Дополнительно); это каскадное меню, в которое входят две команды:</li>
<li> Show <Title> (Показать заголовок); выбор команды приводит к тому, что адреса файлов в навигационной схеме заменяются заголовками хранящихся в них HTML-документов (то есть значениями тегов <TITLE>);</li>
<li> Gradient (Градиент); команда обеспечивает создание для навигационной схемы фона, насыщенность которого увеличивается от верхних ссылок к нижним;</li>
<li> View Style (Способ представления); это также каскадное меню, содержащее два варианта представления навигационной схемы: в виде дерева (Tree) или в виде диаграммы (Chart).</li>
Все команды контекстного меню (за исключением Options и View Style, которые доступны всегда) становятся доступны только в том случае, если выбрана соответствующая ссылка.<br>
Замечание
<br>Замечание<br><br>В отличие от стандартного механизма выбора, используемого в Windows-приложениях (да и в других окнах HomeSite), щелчок правой кнопкой на ссылке не означает ее выбор. Чтобы выбрать ссылку, требуется щелкнуть на ней левой кнопкой (при этом она будет выделена инверсным цветом), и только потом открыть контекстное меню с помощью правой кнопки.
Чтобы получить на вкладке Site View коррективе представление навигационной структуры сайта, требуется выполнить два условия:<br>
<li> строить ссылки «сверху вниз», используя в качестве «корня» файл главной страницы (Index.html), расположенный в корневой папке проекта; при этом дерево ссылок должно соответствовать дереву папок проекта;</li>
<li> открыть файл главной страницы в окне документа и перейти на вкладку Site View (если вкладка окажется пустой, выберите в контекстном меню команду Refresh).</li>
Дополнительное преимущество указанного подхода состоит в том, что для всех ресурсов (файлов) проекта будет использована относительная адресация.<br>
Например, на Рисунок 5.5 показано дерево ссылок, построенное относительно файла Index.html, который находится в корневой папке проекта (New).<br>
Если требуется получить дерево ссылок какого-либо файла нижнего уровня, достаточно дважды щелкнуть мышью на значке соответствующей ссылки. При этом в тексте документа выбранная ссылка также будет выделена (Рисунок 5.6).<br>
Чтобы на вкладке Site View были представлены только ссылки, являющиеся подчиненными (или дочерними) по отношению к выбранной, следует в контекстном меню этой ссылки выбрать либо команду Set as Root, либо команду Edit. Во втором случае соответствующий файл будет также открыт в окне документа.<br><br>
<h1>Пример создания локальной ссылки</h1>Рисунок 5.10. Пример создания локальной ссылки<br><br><br><img src="image/primer-sozdanija-lokalnoj-ssylki_1.gif" alt="Пример создания локальной ссылки"><br><br>
<br><br>
<h1>Пример структуры сайта</h1>Рисунок 5.2. Пример структуры сайта<br><br><img src="image/primer-struktury-sajta_1.gif" alt="Пример структуры сайта"><br>
Для изображенной на рисунке структуры относительные адреса будут выглядеть следующим образом:<br>
<li> ссылка от файла prog1.html к prog2.html (оба файла находятся ъ одной папке)— просто имя связываемого файла: prog2.html;</li>
<li> ссылка от файла content.html (расположенного в папке support) к файлу prog1.html (находящемуся в папке следующего уровня software) содержит имя вложенной папки и имя файла: software/prog1.html',</li>
<li> ссылка от файла content.html к index.html (находящемуся в корневой папке, на один уровень выше contents.html), содержит относительный путь ../index.html;</li>
<li> ссылка от файла prog1.html к devicel.html (находящемуся в другой вложенной папке по отношению к папке support), использует относительный путь ../hardware/deviceI.html, в данном случае символ ../ означает переход на один уровень вверх, к папке support, а hardware/ обеспечивает переход внутрь папки hardware.</li>
Замечание
<br>Замечание<br><br>Перед созданием относительного адреса необходимо сначала сохранить на диске файл-источник связи (если он является новым файлом), поскольку относительный адрес некорректен без привязки к конкретной точке отсчета.
И еще одни достаточно важный момент.<br>
Если вы перемещаете группу файлов как единое целое (например, при перемещении всей папки целиком), то, чтобы прежние относительные ссылки между файлами остались корректными, не следует модифицировать эти ссылки. Однако если вы перемещаете отдельный файл, который содержит относительные ссылки, или файл, на который имеется относительная ссылка, вы должны скорректировать эти ссылки.<br>
Адресация относительно корневой папки узла предполагает описание маршрута доступа к связываемому документу относительно папки самого высокого уровня в иерархии узла.<br>
Обычно описание адреса относительно корневой папки требует большей аккуратности, чем относительная адресация, но в некоторых случаях оно может оказаться более эффективным. В частности, такой способ адресации является наиболее подходящим для такого узла, в котором приходится часто перемещать HTML-файлы из одной папки в другую.<br>
Адрес, построенный относительно корневой папки, всегда начинается с косой черты, которая обозначает корневую папку узла. Например, /support/ content.html является адресом файла content.hlml, находящегося в папке support, вложенной в корневую папку узла.<br>
При перемещении файла, содержащего адреса относительно корневой папки, их коррекция не требуется. Например, если ваши HTML-файлы используют относительные ссылки на зависимые файлы (типа изображений), то если вы переместите HTML-файл, его связи с зависимым файлом останутся корректными. Однако когда вы перемещаете или переименовываете документы, связанные между собой относительными ссылками, вы должны модифицировать эти ссылки, даже если взаимное положение документов не изменилось. Например, если вы перемещаете папку, то все относительные ссылки на файлы внутри этой папки должны модифицироваться.
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Редактирование фреймов с помощью Tag Tree и Tag Inspector</h1>Редактирование фреймов с помощью Tag Tree и Tag Inspector<br><br>
В отличие от инструментов, рассмотренных выше, Tag Tree и Tag Inspectoi не позволяют создавать новые фреймы, однако предоставляют удобный интерфейс для редактирования имеющихся.<br>
Tag Tree обеспечивает просмотр структуры набора фреймов с различной степенью детализации и быстрый переход от одного фрейма к другому (Рисунок 5.25). Эффективность применения Tag Tree тем выше, чем сложнее структура набора фреймов.<br><br>
<h1>Создание фреймов с помощью мастера</h1>Создание фреймов с помощью мастера<br><br>
Мастер Frame Wizard обеспечивает существенное повышение эффективности работы независимо от того, насколько богатым опытом вы обладаете в использовании фреймов. Пожалуй, его достоинства в полной мере смогут оценить именно те из читателей, кто в свое время помучался, описывая структуру набора фреймов вручную.<br>
Щелчок на кнопке Frame Wizard приводит к появлению на экране первого окна мастера — Frame Design (Проектирование фрейма). Оно содержит интерактивное окно просмотра и кнопки для изменения структуры набора фреймов.<br>
В исходном состоянии набор фреймов в окне просмотра содержит четыре фрейма равного размера (Рисунок 5.19, вверху), причем все фреймы отображаются как выбранные (синим цветом). Это означает, что активным является набор фреймов в целом.<br>
Вы можете произвольным образом изменять как количество фреймов в активном наборе, так и создавать вложенные наборы произвольной конфигурации:<br>
<li> чтобы добавить или удалить горизонтальный фрейм, необходимо щелкнуть на соответствующей кнопке Row (Строка) либо со знаком «+», либо со знаком «-»;</li>
<li> чтобы добавить или удалить вертикальный фрейм, необходимо щелкнуть на соответствующей кнопке Col (от Columns —- «столбцы») либо со знаком «+», либо со знаком «-»;</li>
<li> чтобы изменить размер любого фрейма, следует установить указатель на его границе, нажать левую кнопку мыши (при этом указатель примет форму двойной стрелки) и переместить границу в нужном направлении;</li>
<li> чтобы создать вложенный набор фреймов, необходимо: </li>
<li> 1. Щелкнуть на том фрейме, внутри которого он будет создан (при этом с других фреймов выделение будет снято).</li>
<li> 2. С помощью кнопок Row и/или Col сформировать требуемую структуру.</li>
Пример создания вложенного набора фреймов показан на Рисунок 5.19, внизу.<br><br>
<h1>Создание фреймов с помощью редактора тегов</h1>Создание фреймов с помощью редактора тегов<br><br>
Редактор тегов может быть вызван щелчком на одной из четырех кнопок вкладки Frames:<br>
<li> Frameset Dialog (Диалог набора фреймов) — вызов диалогового окна для установки атрибутов тега <FRAMESET>;</li>
<li> Frame Dialog (Диалог фрейма) — вызов диалогового окна для установки атрибутов тега <FRAME>;</li>
<li> Floating Frame Dialog (Диалог плавающего фрейма) — вызов диалогового окна для установки атрибутов тега <IFRAME>;</li>
<li> Noframes Dialog — вызов диалогового окна для установки атрибутов тега <NOFRAMES>.</li>
Перечисленные диалоговые окна содержат многие элементы, идентичные тем, которые используются при работе с мастером создания фреймов. Тем не менее при работе с редактором тегов появляется возможность установить или изменить значения атрибутов, которые мастер устанавливает «по умолчанию». Поэтому ниже приведена краткая характеристика перечисленных окон для работы с «фреймовыми» тегами.<br>
Замечание
<br>Замечание<br><br>Для любого из «фреймовых» тегов, уже вставленных в код страницы, соответствующее окно редактора тегов может быть вызвано с помощью команды контекстного меню Edit Current Tag.
Итак, с помощью окна редактора тегов могут быть установлены следующие атрибуты тега <FRAMESET> (Рисунок 5.21).<br><br>
<h1>Создание фреймов</h1>Создание фреймов<br><br>
На первый взгляд, механизм фреймов не связан непосредственно с навигационной схемой сайта. Но это не совсем верно. Достаточно тесная связь между этими аспектами создания сайта обуславливается двумя факторами. Во-первых, для правильной работы фреймов требуется тщательно продумать и корректно реализовать систему ссылок между ними. Во-вторых, зачастую фреймы обеспечивают удобные средства навигации по сайту. Например, поместив сенсорную карту (в виде линейки кнопок) в фрейм, расположенный в верхней части окна броузера, вы обеспечите ее постоянную доступность для посетителя, какой бы длинной ни была страница.<br>
В HomeSite для создания фреймов и редактирования их атрибутов предназначены следующие инструменты:<br>
<li> мастер для создания фреймов -- Frame Wizard;</li>
<li> диалоговые окна редактора тегов;</li>
<li> кнопки быстрой вставки тегов создания фреймов.</li>
Доступ ко всем перечисленным инструментам выполняется с помощью вкладки Frames (Фреймы) панели быстрой вставки (Рисунок 5.18).<br>
<img src="image/sozdanie-frejmov_1.gif" alt="Создание фреймов"><br>
Рисунок 5.18. Вкладка Frames панели быстрой вставки
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Создание гипертекстовых ссылок</h1>Создание гипертекстовых ссылок<br><br>
В данном случае в категорию гипертекстовых ссылок включены все виды ссылок, создаваемых с помощью тегов <А> и <IMG>. Однако сразу оговоримся: создание сенсорных карт будет рассмотрено в следующем разделе.<br>Итак, для создания ссылок на основе тегов <А> и <IMG> могут использоваться следующие средства:<br>
<li> перетаскивание мышью значка файла из окна ресурсов в окно документа;</li>
<li> команда Insert as Link (Вставить как ссылку) контекстного меню файла;</li>
<li> вставка ссылки с помощью окна редактора тегов.</li>
При использовании первого способа курсор в окне документа перемещается вслед за контуром файла. Поэтому тег ссылки будет помещен в ту позицию документа, где будет находиться курсор в тот момент, когда вы отпустите кнопку мыши. Это требует определенной аккуратности при выполнении операции.<br>
При использовании команды Insert as Link и редактора тегов ссылка будет вставлена в ту позицию, где находился курсор перед выбором команды или перед вызовом редактора тегов.<br>
Если ссылка создастся перетаскиванием или с помощью команды Insert as Link, для тегов <А> и <IMG> генерируется предопределенный набор атрибутов.<br>
Для тега <А> таким атрибутом является HREF с адресом соответствующего файла. При этом возможны следующие варианты:<br>
<li> если ссылка создастся в сохраненном ранее документе, то HomeSite автоматически генерирует относительный адрес вставляемого файла;</li>
<li> если вы перетаскиваете значок файла в документ, который ни разу не был сохранен на диске, то на экран выводится сообщение, что относительный адрес не может быть вычислен, пока документ не будет сохранен (Рисунок 5.7); в окне сообщения имеются две кнопки:</li>
<li> кнопка Yes позволяет сохранить документ, после чего в него будет вставлена ссылка с относительным адресом;</li>
<li> щелчок на кнопке No приводит к отмене операции создания ссылки.</li>
<br><br>
<h1>Создание сенсорной карты</h1> Создание сенсорной карты<br><br>
Сенсорная карта (или карта-изображение, Image Map) — это изображение, содержащее специальные области, так называемые активные (или горячие зоны (hotspots), которые позволяют пользователю перемещаться на связанный (ассоциированный) с картой URL или на другую страницу в пределах того же узла посредством щелчка ЛКМ на выбранной зоне. Сенсорная карта может иметь несколько активных зон, с каждой из которых связан собственный URL. Хотя в большинстве случаев сенсорные карты используются для перехода на другую страницу или на другой URL, с их помощью можно также вызывать файлы произвольного типа (например, Flash-фильмы).<br>
Web-дизайнер обладает достаточно большой свободой в выборе расположения и конфигурации активных зон. Они могут создаваться на любой части изображения и иметь форму прямоугольника, круга, многоугольника или точки. При этом границы между зонами визуально не отображаются. В связи с этим целесообразно предусмотреть для каждой активной зоны всплывающую подсказку, появляющуюся на экране при наведении на соответствующую зону указателя мыши. Кроме того, в качестве основы для разработки сенсорной карты лучше использовать такие изображения, на которых границы между зонами логически и визуально различимы.<br>
Современные броузеры поддерживают сенсорные карты двух типов:<br>
<li> обрабатываемые на стороне сервера (server-side image map); </li>
<li>обрабатываемые на стороне клиента (client-side image map).</li>
Особенность карт первого типа состоит в том, что реакция активной зоны на действия пользователя (то есть на щелчок кнопкой мыши) формируется программой-сценарием, выполняемой на сервере. Результатом является URL, который пересылается броузеру пользователя.<br>
При использовании карт второго типа адреса, связанные с активными зонами, содержатся непосредственно в тексте просматриваемого документа.<br>
Очевидно, что работа с картами первого типа требует больших затрат времени. Поэтому их целесообразно использовать только в тех случаях, когда связанные с активными зонами адреса могут изменяться, либо предполагается некоторая дополнительная обработка действий пользователя.<br>
О том, что карта-изображение обрабатывается на стороне сервера, говорит атрибут ISMAP тега <IMG>.<br>
Атрибут USEMAP тега <IMG> служит признаком того, что изображение является сенсорной картой, обрабатываемой на стороне клиента. Данный атрибут может использоваться одновременно с атрибутом ISMAP, чтобы указать на возможность обработки изображения как на стороне клиента, так и на стороне сервера (это гарантирует независимость HTML-документов от типа браузера). Значение атрибута USEMAP определяет расположение описания карты. Если оно начинается с символа "#", описание карты находится в том же HTML-документе, что и само изображение.<br>
HomeSite предоставляет средства автоматизации только для создания клиентских сенсорных карт. Для разработки карты, обрабатываемой на стороне сервера, требуется написать соответствующий HTML-код вручную.<br>
Основным инструментом создания клиентских сенсорных карт являете утилита Image Map Editor.<br>
Для описания сенсорной карты необходимо предварительно поместить в ко, документа изображение, на основе которого она будет создана (то есть тег <IMG> с атрибутом SRC).<br>
Чтобы активизировать редактор, требуется щелкнуть на панели инструмен тов главного окна HomeSite на кнопке New Image Map (Создать сенсорнук карту), Рисунок 5.13.<br><br>
<h1>Способы адресации ресурсов публикации</h1>Способы адресации ресурсов публикации<br><br>
Каждому типу ссылок соответствует, как правило, свой способ адресации связанного документа:<br>
<li> абсолютный (например: http://www.service.com/support/software/prog1l.html); </li>
<li> документо-относительный (например: software/prog1. html); </li>
<li> относительно корневой папки узла (например: /support/software/ prog1.html).</li>
Абсолютный адрес предполагает использование полного URL связанного документа, включая соответствующий протокол доступа. Такой способ адресации обязателен для осуществления связи с документом, расположенном на другом сервере. При желании можно, конечно, использовать абсолютный адрес для связи со страницами внутри сайта, размещенного на вашем локальном компьютере. Однако большая часть адресной информации в этом случае будет избыточной. Кроме того, если вы переместите связанный файл на новое место, или измените файловую структуру вашего сайта, то абсолютный адрес станет некорректным.<br>
Документо-отиосительные адреса (в дальнейшем для краткости будем называть их просто относительными) являются, как правило, наиболее удобными для организации внутренних ссылок сайта. Они особенно удобны в тех случаях, когда документ, содержащий ссылку («источник связи») и связанный с ним документ находятся в одной папке и, по вероятности, останутся вместе в течение всей жизни сайта.<br>
Вы можете также использовать относительный адрес при создании ссылки на документ, находящийся в другой папке, указав путь через иерархию папок от текущего документа до связанного с ним документа. При описании относительного адреса вы можете опустить ту часть полного URL, которая является общей и для текущего, и для связанного документа.<br>
Чтобы создать ссылку на файл, находящийся в той же папке, что и источник связи, достаточно указать только имя этого файла. Если связываемый файл находится в папке следующего уровня иерархии по отношению к источнику связи, то требуется указать имя вложенной папки, затем слэш (косую черту), а после него — имя связываемого файла. При создании ссылки на файл, расположенный в родительской папке по отношению к папке, содержащей источник связи, имени связываемого файла должны предшествовать символы ../ (где ../ означает «на один уровень выше текущей папки»).<br>
Сказанное поясним на примере. Предположим, что сайт имеет структуру, приведенную на Рисунок 5.2.<br><br>
<h1>Перечень условных обозначений типов ссылок</h1>Таблица 5.1. Перечень условных обозначений типов ссылок<br><br>
<tr> <td> Значок </td> <td> Тип ссылки </td> </tr> <tr> <td> </td></tr></table>
<br><br>
<h1>Вариант навигационной схемы небольшого узла</h1>Рисунок 5.1. Вариант навигационной схемы небольшого узла<br><br><img src="image/variant-navigacionnoj-shemy-nebolshogo-uzla_1.gif" alt="Вариант навигационной схемы небольшого узла"><br>
Масштабируемость — это важное свойство любого сайта: каким бы высоким ни был первоначальный рейтинг, узел обязательно должен развиваться. Застывшие формы чужды самой природе Интернета. Необходимость развития узла может быть обусловлена и «внутренними» причинами: ростом профессионального мастерства его создателя, увеличением объема предоставляемых услуг организацией — владельцем узла, стремлением к повышению конкурентоспособности и т. д.<br>
Кроме того, масштабируемость узла является одним из условий согласованности его интерфейса: после того, как посетители уже изучили структуру и схему навигации узла, они будут опираться на это знание во время последующих посещений. Если в своих поисках информации они станут терять ориентацию и попадать совсем не туда, куда привыкли, следующего посещения может и не быть.<br>
Изложенные выше принципы специалисты в области Web-дизайна уместили в двух «законах разработчика»:<br>
<li> закон ссылок: чем большее число ссылок на странице конкурирует за внимание пользователя, тем меньше вероятность, что он воспользуется хотя бы одной из них;</li>
<li> закон щелчков: чем больше щелчков (мышью) нужно сделать, чтобы добраться до страницы, тем меньше на ней окажется посетителей.</li>
<tr>
<td>
</td>
</tr>
</table>
<br> <br> <br><br>
<h1>Варианты представления навигационной схемы</h1>Рисунок 5.3. Варианты представления навигационной схемы<br><br><img src="image/icon-1.gif" alt="Варианты представления навигационной схемы"><br>
Теперь вернемся к способам адресации ресурсов, рассмотренным в предыдущем подразделе.<br>
В HomeSite реализованы два вида адресации: абсолютная и относительная. Адресация относительно корневой папки проекта не предусмотрена, хотя, как было отмечено выше, в некоторых случаях такой способ весьма удобен.<br>
В остальном разработчики HomeSite полностью соблюдают описанные выше правила и стараются приучить к ним пользователя. В частности, создание ссылки с относительным адресом невозможно до тех пор, пока не будет сохранен на диске новый документ (файл), в который вы хотите добавить такую ссылку.<br>
Визуальное представление ссылок с различными способами адресации также соответствует приведенным правилам. Например, на Рисунок 5.4 показан фрагмент документа с тремя видами ссылок:<br>
<li> абсолютной (ссылка на файл Index.html)',</li>
<li> относительной ссылкой на файл, расположенный в той же папке (ссылка на файл Slart_1.html);</li>
<li> относительной ссылкой на файл, расположенный в другой папке (ссылк на файл File_01.gif).</li>
<br><br>
<h1>Вкладка A Tag окна редактора тегов Замечание</h1>Рисунок 5.8. Вкладка A Tag окна редактора тегов Замечание<br><br><img src="image/vkladka-a-tag-okna-redaktora-tegov-zamechanie_1.gif" alt="Вкладка A Tag окна редактора тегов Замечание"><br>Если при работе с не сохраненным документом ввести в поле HREF вручную относительный адрес, то HomeSite его «проглотит» и вставит в код документа. Однако созданная ссылка останется неработоспособной до тех пор, пока вы не сохраните документ на диске.<br>Ручной ввод адреса целесообразно использовать при создании ссылок на внешние ресурсы. При этом URL внешнего ресурса следует ввести полностью, например: http://www.wsoort.ru.
<li>раскрывающийся список Protocol (Протокол), позволяющий выбрать протокол, который должен использоваться при закачке документа; </li>
<li> поле Name, предназначенное для ввода значения атрибута NAME; этот атрибут необходим для создания локальных ссылок (якорей); пример создания локальной ссылки будет рассмотрен ниже; </li>
<li> поле Title, предназначенное для ввода значения одноименного атрибута (позволяющего использовать для ссылки всплывающую подсказку); атрибут поддерживается только броузером MSIE; </li>
<li> многострочное поле Description, в котором может быть введен текст ссылки; этот текст HomeSite поместит между тегами <А> и </А>.</li>
На вкладке HTML 4.0 окна редактора тегов дополнительно может быть задан атрибут TARGET. Он позволяет указать окно, в которое требуется вывести содержимое документа, вызванного по ссылке. Выбор значения атрибута выполняется с помощью одноименного раскрывающегося списка, который содержит следующие варианты:<br> _self — вызванный документ будет загружен в то же окно броузера, в котором содержится ссылка;<br><br>
<h1>Создание интерактивных страниц</h1>
<h1>Для каждого языка сценариев используется своя схема цветовой подсветки</h1>Рисунок 6.15. Для каждого языка сценариев используется своя схема цветовой подсветки<br><br><img src="image/dlja-kazhdogo-jazyka-scenariev-ispolzuetsja-svoja_1.gif" alt="Для каждого языка сценариев используется своя схема цветовой подсветки"><br>
Чтобы создать с помощью Tag Inspector шаблон сценария для «оживления» некоторого элемента страницы, необходимо:<br>
<li>В окне ресурсов перейти на вкладку Tag Inspector.</li>
<li> В окне документов щелкнуть на теге элемента, с которым должен быть связан сценарий; при этом на панели Tag Inspector будут представлены разрешенные для элемента атрибуты и события.</li>
<li> Щелкнуть на событии, инициирующем выполнение сценария, и в соседней ячейке в раскрывающемся списке выбрать язык сценария (Рисунок 6.16); независимо от выбранного языка на экране появится диалоговое окно, в котором следует ввести имя функции-обработчика события (по умолчанию имя функции совпадает с типом события), формальные параметры (если требуется) и щелкнуть на кнопке ОК. </li>
В результате выполнения описанной процедуры в код документа будет вставлен шаблон для создания сценария и вызов функции-обработчика (Рисунок 6.17).<br>
Кроме того, имя функции-обработчика будет помещено в список сценариев (Рисунок 6.18). Это позволяет отслеживать использованные имена функций и при необходимости связать сценарий с каким-либо другим Событием или элементом. При наличии в списке хотя бы одной функции-обработчика в нем появляется пункт Clear Cashed Values... (Очистить буфер), выбор которого приводит к удалению из списка (после подтверждения) всех функций. Это удаление не влияет на код страницы.<br><br>
<h1>Флажок Include identical NAME and ID позволяет устанавливать значение атрибута ID</h1>Рисунок 6.9. Флажок Include identical NAME and ID позволяет устанавливать значение атрибута ID<br><br><img src="image/flazhok-include-identical-name-and-id-pozvoljaet_1.gif" alt="Флажок Include identical NAME and ID позволяет устанавливать значение атрибута ID"><br>
В HomeSite поддержка Dynamic HTML реализована следующими средствами:<br>
<li>наличием в окнах редактора тегов специальной вкладки Events, позволяющей быстро сформировать список событий, на которые должен реагировать соответствующий элемент страницы, и связать с ними вид реакции; при этом список событий, представленных на вкладке, зависит от типа элемента; например, на Рисунок 6.8 приведены фрагменты вкладок Events для тегов <FORM> (вверху) и <BODY> (внизу); </li>
<li> наличием в окнах редактора тегов флажка Include identical NAME and ID (Вставлять идентичные NAME и ID), Рисунок 6.9; если он установлен, то для создаваемого элемента в код документа будут вставлены идентичные значения атрибутов NAME и ID; имеется в виду следующее: в ранних версиях броузеров поддерживается атрибут NAME, на смену которому в языке HTML 4.0 (и в новых версиях броузеров) пришел<br>Tag Editor-BODY (HTML) атрибут ID; при установленном флажке HomeSite вставит в код документа оба атрибута, что призвано обеспечить доступность документа всем версиям броузеров;</li>
<li> возможностью оперативного редактирования атрибута STYLE и таблиц стилей с помощью утилиты TopStyle Lite (подробнее о редактировании стилей см. раздел <a href="../Glava%204/Index20.htm">«Работа с таблицами стилей»</a> четвертой главы);</li>
<li> возможностью редактировать список событий и связанных с ними обработчиков с помощью Tag Inspector,</li>
<li> наличием в составе редактора тегов окон для редактирования атрибутов тегов, предназначенных для описания параметров слоев: <LAYER>, <ILAYER>, <DIV> <SPAN>;</li>
<li> наличием в составе HomeSite мастеров, обеспечивающих генерацию кода динамических страниц; в частности, на вкладке DHTML диалогового окна New Document представлены два таких мастера: Outline Wizard (он предназначен для создания раскрывающихся меню) и Slide Show Wizard (обеспечивает генерацию страниц презентации).</li>
Наиболее удобным способом описания поведения элементов страницы является применение вкладки Events окна редактора тегов.<br>
Например, предположим, что требуется заставить изменяться цвет надписи на кнопке Submit при наведении на нес указателя мыши.<br>
Чтобы описать поведение такой кнопки, необходимо:<br>
<li> 1. В окне документа щелкнуть правой кнопкой на соответствующем теге <INPUT> и в контекстном меню выбрать команду Edit Current Tag.</li>
<li>2. В окне редактора тегов перейти на вкладку Events и затем щелкнуть на «мини-вкладке», соответствующей событию onMouseOver.</li>
<li> 3. В текстовом поле ввести описание реакции на данное событие (то есть на перемещение указателя в позицию кнопки); реакция состоит в изменении цвета надписи (например, на красный): stylе.color='red' (Рисунок 6.10, вверху).</li>
<li> 4. Щелкнуть на «мини-вкладке», соответствующей событию onMouseOut (перемещение указателя за пределы кнопки).</li>
<li> 5. В текстовом поле ввести описание реакции на данное событие, которая состоит в восстановлении исходного цвета надписи (черного): style.color='black' (Рисунок 6.10, внизу).</li>
<li>6. Щелкнуть на кнопке ОК.</li>
<br><br>
<h1>Мастера для создания сценариев на JavaScript</h1>Рисунок 6.22. Мастера для создания сценариев на JavaScript<br><br><img src="image/mastera-dlja-sozdanija-scenariev-na-javascript_1.gif" alt="Мастера для создания сценариев на JavaScript"><br>
Они предназначены для создания следующих сценариев:<br>
<li> URL Selection (Выбор URL) — создает раскрывающийся список адресов (URL), выбор любого из которых обеспечивает переход по указанному адресу; чтобы сценарий выполнялся корректно, значения цветов в коде страницы должны быть представлены шестнадцатеричными значениями;</li>
<li> Background Fade (Изменяющийся фон) — создаст сценарий, с помощью которого начальный цвет фона страницы изменяется на заданный;</li>
<li> Frame Busier (Разрушитель фреймов) — создает сценарий, который запрещает открывать страницу внутри фрейма (она будет насильно развернута на все окно);</li>
<li> Last Modified Date (Дата последнего изменения) — обеспечивает вывод на странице даты и (дополнительно) времени се последнего редактирования;</li>
<li>Вrowser Type (Тип броузера) — обеспечивает распознавание и вывод на странице типа и версии используемого броузера;</li>
<li> Current URL (Текущий URL) — обеспечивает вывод на странице адреса файла-источника.</li>
<br> <br> <br><br>
<h1>Общая характеристика ColdFusion</h1>Общая характеристика ColdFusion<br><br>
ColdFusion основана на применении специального сервера Web-приложений, который при поступлении соответствующего запроса обрабатывает программы, написанные на языке CFML (ColdFusion Markup Language), и отсылает результат клиенту.<br>
Язык CFML можно рассматривать как расширение HTML, поскольку он представляет собой набор тегов, которые могут непосредственно вставляться в текст HTML-документа. Например, CFML-тег <CFOUTPUT> обеспечивает вывод на экран заключенного внутри него текста:<br>
<CFOUTPUT><br><В>Текущая дата: </В><br>#Now( )#<br></CFOUTPUT>.<br>
Файл с программой на языке CFML — это обычный текстовый файл, подобный HTML-файлу. Единственное отличие состоит в том, что для CFML-файлов используется расширение .сfm.<br>
Для эффективного использования CFML необходимо знать (или по крайней мере представлять себе) перечень CFML-тегов и реализуемые ими функции. Задача не очень простая, поскольку существует около сотни CFML-тегов, каждый из которых может иметь несколько атрибутов, управляющих работой тега. Кроме того, имеются сотни тегов, созданных сторонними разработчиками. Поскольку CFML является расширяемым языком, то после знакомства с ним вы также сможете создавать собственные теги.<br>
Многие теги языка CFML ориентированы на работу с данными, поскольку при всей универсальности ColdFusion основное ее предназначение — создание Web-приложений для работы с базами данных.<br>ColdFusion работает следующим образом:<br>
<li> 1. Когда броузер пользователя запрашивает с Web-сервера CFM-файл (страницу с CFML-тегами), Web-сервер распознает его по расширению и передаст на обработку серверу ColdFusion.</li>
<li> 2. Сервер ColdFusion обрабатывает имеющиеся в странице CFML-теги и на их основе генерирует динамическое содержание страницы.</li>
<li>3. После этого серверColdFusion возвращает результат Web-ссрверу в виде HTML-страницы, который в свою очередь передаст ее назад броузеру пользователя.</li>
Важно отмeтить, что сервер ColdFusion обрабатывает только собственные теги, сохраняя остальную часть кода в исходном состоянии. ColdFusion поддерживает Java, ActiveX, JavaScript, DHTML, VRML, HDML и многие другие Web-технологии.
<br> <br> <br><br>
<h1>Окно редактора тегов для формирования списка</h1>Рисунок 6.6. Окно редактора тегов для формирования списка<br><br><img src="image/okno-redaktora-tegov-dlja-formirovanija-spiska_1.gif" alt="Окно редактора тегов для формирования списка"><br>
По поводу результатов работы редактора тегов следует, сделать несколько достаточно важных замечаний:<br>
<li> хотя в окне установки атрибутов тега <SELECT> атрибут VALUE отсутствует, его значение для всех элементов списка генерируется автоматически;</li>
<li> для первого элемента списка также автоматически устанавливается атрибут SELECTED (то есть он считается выбранным по умолчанию);</li>
<li> параметр SELECT Indent level дееспособен только при создании списка, если впоследствии открыть окно редактора тегов с помощью команды Edit Current Tag, то новое значение этого параметра игнорируется;</li>
<li> если открыть окно редактора тегов для тега <SELECT> с помощью команды Edit Current Tag, и ввести в поле Number of Tags какое-либо значение, то в список будет добавлено соответствующее число новых элементов.</li>
Относительно тегов <OPTION> следует иметь в виду следующее. На панели быстрой вставки отсугствует кнопка, непосредственно связанная с этим тегом. Тем не менее, после того, как будет создан список (то есть после того, как в код страницы будет вставлен тег <SELECT> с тегами <OPTION> внутри), с помощью команды Edit Current Tag контекстного меню может быть открыто окно редактора тегов для установки атрибутов тега <OPTION>. В этом окне представлены (и могут быть изменены) текущие значения всех основных атрибутов тега (Рисунок 6.7):<br><br>
<h1>Окно редактора тегов для установки атрибутов тега <FORM></h1>Рисунок 6.2. Окно редактора тегов для установки атрибутов тега <FORM><br><br><img src="image/okno-redaktora-tegov-dlja-ustanovki-atributov-tega_2.gif" alt="Окно редактора тегов для установки атрибутов тега <FORM>"><br>
<li> ACTION — указывает адрес сервера, на котором должен выполняться сценарий (или приложение CGI), обеспечивающий обработку перeсылаемых данных формы; если атрибут ACTION отсутствует, используется URL самого документа, содержащего форму; способ пересылки данных на сервер определяется протоколом доступа, указанным в URL, а также значениями атрибутов METHOD и ENCTYPE; значение атрибута вводится в поле Action; </li>
<li> METHOD — определяет метод доступа к серверу, определенному в атрибуте ACTION, и может иметь одно из двух значений: "get" или "post"; при значении "get" данные из формы добавляются непосредственно к URL сервера, поэтому метод обычно используется для таких форм, данные которых не требуют внешней обработки; при использовании метода "post" отсутствуют ограничения на объем пересылаемых данных; значение атрибута выбирается из раскрывающегося списка Method;</li>
<li> ENCTYPE — определяет тип кодирования данных формы для пересылки; по умолчанию используется значение "application/www-form-itrlencoded"; при использовании такой кодировки пробелы в данных заменяются символами «+», а все нестандартные символы — комбинацией символа % и шсстнадцатсричного кода пересылаемого символа в таблице ASCII; при использовании второго возможного значения "multipart/form-data " — преобразования символов не выполняются, и данные из формы пересылаются в виде MIME-докумснта; такой способ используется, когда в форме имеется поле выбора файла (то есть тег <INPUT TYPE="file">); если для атрибута указано третье возможное значение — "text/plain " — данные пересылаются в исходном виде; такой вариант применяется при использовании почтового протокола (mailto:); значение атрибута выбирается из раскрывающегося списка ЕnсТуре;</li>
Замечание
<br>Замечание<br><br>MIME (Multipurpose Internet Mail Extension) — это так называемые многоцелевые расширения почты Интернета. Имеются в виду расширения (типы) файлов, которые разрешается использовать в Сети в качестве информационного содержимого почтовых сообщений. Всего таких типов насчитывается более четырех десятков. Наиболее часто используемые из них — это графические форматы BMP, TIP, PDF, JPEG и GIF, текстовые RTF, HTML, TXT, ТЕХ, видеофайлы MOV, AVI, MPEG, звуковые файлы WAV, AIF, SND.
<li>NAME — задает имя формы; по этому имени к ней можно обратиться из клиентского сценария обработки формы; значение атрибута вводился в поле Name.</li>
На вкладке HTML 4.0 дополнительно может быть указано значение атрибута TARGET (подобным одноименному атрибуту тега <А>), который позволяет указать, какое окно должно использоваться для отображения результатов обработки формы (то есть для обратной связи с читателем). Значение атрибута выбирается из раскрывающегося списка Target.<br>
Как было отмечено выше, окно редактора тегов для установки атрибутов тега <INPUT> является универсальным, в том смысле, что оно пригодно для изменения параметров любого элемента формы, создаваемого на основе тега <INPUT>. Каждому такому элементу соответствует отдельная вкладка (Рисунок 6.3).<br><br>Рисунок 6.7. Окно редактора тегов для установки атрибутов тега <OPTION><br><br><img src="image/okno-redaktora-tegov-dlja-ustanovki-atributov-tega_3.gif" alt="Окно редактора тегов для установки атрибутов тега <FORM>"><br>
<li>значение, пересылаемое на сервер (Value),</li>
<li> состояние — выбран или нет (Selected), </li>
<li> наименование пункта (Text).</li>
Динамизм любого элемента формы, как, собственно, и формы в целом, может быть значительно повышен за счет применения современных технологий, описанных в следующих разделах.
<br> <br> <br><br>
<h1>Поддержка CFML в HomeSite</h1>Поддержка CFML в HomeSite<br><br>
Вообще для разработки публикаций, ориентированных на ColdFusion, существует специальное приложение — ColdFusion Studio, интерфейс которого во многом аналогичен интерфейсу HomeSite. Тем не менее, для создания отдельных страниц с использованием тегов CFML вполне пригоден HomeSite.<br>Для работы с CFML в HomeSite имеются следующие возможности:<br><br>
<h1>Поддержка Dynamic HTML</h1>Поддержка Dynamic HTML<br><br>
Dynamic HTML является, по сути, развитием идеи объединения языков сценариев и объектной модели HTML-документа. Другими словами, он обеспечивает более тесную и удобную связь между элементами страницы и описанием их поведения. При этом перечень возможных событий и вызываемых ими действий совпадает с используемыми в языках JavaScript и VBScript.<br>
В Dynamic HTML практически все элементы документа рассматриваются как объекты, для каждого из которых может быть задан перечень событий и соответствующая реакция на эти события. Например, щелчок мышью на каком-то фрагменте текста может заставить его изменить цвет или «переехать» на другую позицию; щелчок на, казалось бы, статичном изображении может привести к тому, что оно «рассыплется» на мелкие кусочки и т. п.<br>
Наряду с опорой на объектную модель документа, важнейшее значение для реализации идей Dynamic HTML имеют два понятия: идентификатор (уникальное имя) элемента страницы и стиль элемента. Имя элемента задастся атрибутом ID а стиль элемента — либо с помощью атрибута STYLE, либо на основе таблицы стилей (Style Sheets). Благодаря этому разработчик имеет возможность обращаться из сценария к любому элементу и изменять те или иные параметры его стиля (например, в зависимости от действий или характеристик читателя страницы).<br>
Еще один аспект применения Dynamic HTML связан с использованием слоев. Слой (Layer) — это своеобразный контейнер, который может содержать различные элементы страницы. Применение слоев обеспечивает повышение управляемости и динамичности элементов страницы. Вы можете размещать слои один поверх другого, изменять их видимость, а также описывать перемещение слоев. Для создания слоев могут использоваться четыре тега: <DIV>, <SPAN>, <LAYER> и <ILAYER>.<br>
Проблема в использовании Dynamic HTML состоит в том, что фирмы Microsoft и Netscape несколько по-разному реализуют его поддержку в своих броузерах. Microsoft опирается на объектную модель стандартизованного языка каскадных таблиц стилей (Cascading Style Sheets, CSS), утвержденного консорциумом W3C, в то время как Netscape использует собственный стандарт -JavaScript Style Sheets (JASS). Почти такая же ситуация и с применением слоев. Теги <DIV> и <SPAN> являются наиболее общими (они поддерживаются как IE 4.0, так и Netscape). Теги <LAYER> и <ILAYER> поддерживает только Netscape. Вариант Microsoft является более полным, поэтому при создании публикаций с использованием Dynamic HTML целесообразно ориентироваться на те возможности, которые доступны обоим типам броузеров.<br><br>
<h1>Представление дерева сценариев</h1>Рисунок 6.19. Представление дерева сценариев<br><br><img src="image/predstavlenie-dereva-scenariev_1.gif" alt="Представление дерева сценариев"><br>
Для редактирования или создания нового сценария на JavaScript в «полуавтоматическом» режиме, можно воспользоваться утилитой JavaScript Tree. Ее вызов выполняется посредством одноименной кнопки, расположенной на вкладке Script панели быстрой вставки (см. Рисунок 6.14).<br><br>Окно JavaScript Tree содержит дерево объектов и методов языка JavaScript, а также упорядоченный список библиотечных функций.<br>
В исходном состоянии дерево объектов содержит следующие категории (Рисунок 6.20):<br>
<li> Window — свойства, методы и подчиненные объекты объекта window (поддерживаемые как MSIE, так и Netscape);</li>
<li> Navigator — свойства, методы и подчиненные объекты объекта navigator;</li>
<li>Date — свойства и методы объекта Date;</li>
<li> Math — свойства и методы объекта Math;</li>
<li> Siring — параметры и функции для работы со строками; </li>
<li> Reserved Words — зарезервированные (ключевые) слова языка JavaScript.</li>
<br><br>
<h1>Представление классов объектов в окне JavaScript Tree</h1>Рисунок 6.20. Представление классов объектов в окне JavaScript Tree<br><br><img src="image/predstavlenie-klassov-obektov-v-okne-javascript_1.gif" alt="Представление классов объектов в окне JavaScript Tree"><br>
Утилита JavaScript Tree обеспечивает доступ практически ко всем объектам, используемым в языке JavaScript, а также к их свойствам и методам. Чтобы «добраться» до требуемого свойства или метода, достаточно просто последовательно раскрывать ветви дерева. Например, на Рисунок 6.21 приведен формат окна утилиты при работе с объектами формы.<br><br>
<h1>Представление одной и той же формы разными броузерами</h1>Рисунок 6.4. Представление одной и той же формы разными броузерами<br><br><img src="image/predstavlenie-odnoj-i-toj-zhe-formy-raznymi_1.gif" alt="Представление одной и той же формы разными броузерами"><br>
Поэтому, если ваш сайт ориентирован на русскоязычную аудиторию, подберите для этих кнопок подходящее название (например, «Отправить» и «Отменить») и добавьте для тега <INPUT> атрибут VALUE, указав в качестве его значения название кнопки.<br>
Еще одна особенность состоит в том, что броузер Netscape не обрабатывает элементы, если" они не вложены в тег <FORM>.<br>
Как правило, наибольшие затруднения у начинающих Web-дизайнеров вы-зьнрст использование в форме флажков, переключателей и списков. Поэтому ниже описана процедура их создания с помощью редактора тегов.<br>
Между флажками и переключателями имеется два существенных различия:<br>
<li> переключатели отражают взаимоисключающие варианты выбора, а флажки — совместимые; поэтому в группе переключателей может быть выбран только один элемент, а в группе флажков — произвольное число (хоть все);</li>
<li> отсюда следствие: нельзя использовать в форме «одиночный» переключатель, их должно быть не менее двух, поскольку изменить состояние переключателя можно только выбрав другой переключатель в группе.</li>
Общие правила использования флажков и переключателей состоят в следующем:<br>
<li> если имеется группа из нескольких элементов (флажков или переключателей), то всем им должно быть присвоено одно и то же имя;</li>
<li> каждый выбранный в группе элемент генерирует собственную пару имя/значение в пересылаемых данных; поэтому обязательными атрибутами для флажков и переключателей являются NAME и VALUE.</li>
Например, чтобы поместить в форму группу переключателей, обеспечивающих выбор одного из нескольких цветов, необходимо:<br>
<li> 1. Щелкнуть на кнопке Radio Button на панели быстрой вкладки.</li>
<li> 2. В окне редактора тегов в поле Name ввести имя группы флажков (например, Color, как показано на Рисунок 6.5)</li>
<li> 3. В поле Value указать значение, соответствующее первому переключателю в группе (например, 1).</li>
<li>4. В поле Caption ввести пояснение к переключателю (например, наименование цвета); это поле не связано ни с одним атрибутом элемента, оно лишь обеспечивает добавление надписи рядом с переключателем.</li>
<li> 5. Если данный переключатель должен быть выбран по умолчанию, следует установить флажок Checked, который управляет наличием одноименного атрибута.</li>
<li> 6. Щелкнуть на кнопке ОК.</li>
<li> 7. В окне документа скопировать в буфер обмена сгенерированный тег <INPUT> и затем поместить в код документа требуемое число копий.</li>
<li> 8. Скорректировать значения атрибутов VALUE у вставленных экземпляров, а также текст подписи; следует также помнить, что атрибут CHECKED может быть установлен только для одного переключателя в группе.</li>
<br><br>
<h1>Применение технологии ColdFusion</h1>Применение технологии ColdFusion<br><br>
Технология ColdFusion была разработана компанией Allaire, но теперь, как и HomeSite, является собственностью Macromedia.
<br> <br> <br><br>
<h1>Пример описания поведения кнопки</h1>Рисунок 6.10. Пример описания поведения кнопки<br><br><img src="image/primer-opisanija-povedenija-knopki_1.gif" alt="Пример описания поведения кнопки"><br>
После закрытия окна редактора тегов в код документа будут внесены требуемые изменения.<br><br>
<h1>Пример установки атрибутов при создании группы переключателей</h1>Рисунок 6.5. Пример установки атрибутов при создании группы переключателей<br><br><img src="image/primer-ustanovki-atributov-pri-sozdanii-gruppy_1.gif" alt="Пример установки атрибутов при создании группы переключателей"><br>
Флажки и переключатели рекомендуется использовать в тех случаях, когда число альтернативных вариантов относительно невелико (не более 5—6). Если же их значительно больше, лучше использовать списки. При этом список единичного выбора работает так же, как группа переключателей, а список множественного выбора -- как группа флажков.<br>
Данные, которые пользователь вводит в форму с помощью списка, также обрабатываются по правилам, аналогичным для флажков и переключателей — выбранному в списке пункту соответствует пара «имя/значение», где в качестве имени используется имя списка.<br>
Чтобы создать список с помощью редактора тегов, необходимо:<br>
<li>1. Щелкнуть на кнопке Select на панели быстрой вкладки.</li>
<li> 2. В окне редактора тегов (Рисунок 6.6) в поле Name ввести имя списка.</li>
<li>3. В поле Size (Размер) указать размер окна списка (его значение равно числу элементов списка, которые должны уместиться в этом окне); если значение меньше числа пунктов списка, то он будет представлен в окне броузера либо как раскрывающийся список (в случае списка единичного выбора), либо как прокручиваемый список (в случае списка множественного выбора).</li>
<li> 4. Если требуется создать список множественного выбора, установите флажок Allow Multiple Selections (Разрешить множественный выбор).</li>
<li> 5. С помощью элементов, имеющихся в группе Generate OPTION Tag (Создание тегов <OPTION>), описать структуру списка: </li>
<li> поле Number of Tags (Количество тегов) определяет число элементов списка; при генерации HTML-кода страницы внутри тега <SELECT> будет создано соответствующее количество тегов <OPTION>;</li>
<li> поле SELECT Indent level (Размер отступа от тега <SELECT>) позволяет указать, На сколько позиций табуляции будут смещены в коде документа теги <OPTION> относительно тега <SELECT>.</li>
<li>6. Щелкнуть на кнопке ОК, чтобы закончить работу с редактором тегов. </li>
<br><br>
<h1>Просмотр списка сценариев</h1>Рисунок 6.18. Просмотр списка сценариев<br><br><img src="image/prosmotr-spiska-scenariev_1.gif" alt="Просмотр списка сценариев"><br>
Вы можете получить визуальное представление структуры страницы с точки зрения используемых в ней сценариев. Для этого необходимо:<br>
<li> 1. В окне ресурсов перейти на вкладку Tag Inspector.</li>
<li> 2. В панели утилиты Tag Tree открыть список профилей тегов и в нем выбрать пункт Client and Server-side Scripts (Клиентские и серверные сценарии).</li>
Если на странице имеются описания функций-обработчиков, то они будут представлены в дереве тегов специальными значками (Рисунок 6.19).<br><br>
<h1>Работа с формами</h1>Работа с формами<br><br>
Форма — это аналог диалоговой панели, встроенный в Web-страницу. Одно из основных отличий состоит в том, что само поле формы на Web-странице не отображается, читателю доступны лишь ее элементы — флажки, переключатели, текстовые области и т. п.<br>
До появления языка DynamicHTML формы оставались единственным средством интерактивного взаимодействия пользователя с содержимым страницы (не считая, разумеется, гиперссылок).<br>
Формы позволяют получить ту или иную информацию от пользователей. Чаще всего они используются для регистрации пользователей, оформления заказов на коммерческих сайтах, а также при вводе поисковых запросов.<br>
Реализация любой формы требует наличия двух программных компонентов: HTML-кода, описывающего форму, и сценария обработки вводимых пользователем данных. Сценарий может выполняться как на стороне сервера, так и на стороне клиента (то есть броузером).<br>
Сценарий, исполняемый на стороне сервера, может быть написан на любом языке программирования: Си, Java, Perl, либо с применением других интернет-технологий (например, ColdFusion). Сценарий, выполняемый броузером, должен быть написан на языке сценариев (JavaScript или VBScript).<br>
В качестве элементов формы могут использоваться практически те же элементы графического интерфейса, что и на диалоговых панелях «настольных» приложений:<br>
<li> кнопки (Billions);</li>
<li> переключатели (Radio Billions),</li>
<li> флажки (Checkboxes);</li>
<li> текстовые области (Text area);</li>
<li> списки (Lists);</li>
<li> изображения (Images).</li>
Кроме того, форма может содержать два специфических элемента: поле выбора файла (File Field) и скрытое поле (Hidden Field).<br>
Каждый элемент, используемый в форме, должен иметь имя, позволяющее идентифицировать его как источник соответствующих данных, подлежащих обработке с помощью сценария.<br>
Форма создается с помощью тега <FORM>, который служит контейнером для элементов формы. Наряду с этим он выполняет еще одну важную задачу. Поскольку на одной странице может находиться несколько форм, то каждый из тегов <FORM> позволяет связать с соответствующей формой свой сценарий обработки вводимых данных, а также метод пересылки данных на сервер.<br>
В HomeSite наиболее удобным инструментом создания элементов формы на Web-странице является редактор тегов. Для создания сценариев обработки данных формы могут использоваться другие средства, которые будут рассмотрены в разделе «Создание сценариев на JavaScript» этой главы.<br>
Вызов редактора тегов выполняется с помощью кнопок панели быстрой вставки, размещенных на вкладке Forms (Формы). Они разделены на четыре подгруппы (Рисунок 6.1):<br><br>
<h1>З Окно редактора тегов для установки атрибутов тега <INPUT></h1>Рисунок 6.З. Окно редактора тегов для установки атрибутов тега <INPUT><br><br><img src="image/risunok-6-z-okno-redaktora-tegov-dlja-ustanovki_1.gif" alt="З Окно редактора тегов для установки атрибутов тега <INPUT>"><br>
Так что, решив создать один из элементов формы, вы можете определить значения атрибутов для какого-либо другого элемента. Тем не менее, за одно обращение к редактору тегов могут быть заданы атрибуты только для одного элемента формы (соответственно, и в код документа будет добавлен только один экземпляр тега <INPUT>).<br>
Мы не будем подробно рассматривать атрибуты, представленные на всех вкладках этого окна редактора тегов. Остановимся лишь на некоторых особенностях создания элементов формы с помощью HomeSite.<br>
Вначале о двух предопределенных кнопках формы — Submit и Reset.<br>
Чтобы добавить в форму любую из них, достаточно сначала щелкнуть на соответствующей кнопке панели быстрой вставки, а затем в открывшемся окне редактора тегов (не внося никаких изменений) — на кнопке ОК. В результате в код страницы будет помещен тег <INPUT TYPE="submit"> (или <INPUT TYPE="reset">). При всей простоте такой процедуры она имеет один недостаток. Дело в том, что большинство современных броузеров интерпретируют стандартные названия этих кнопок по-своему. Например, на Рисунок 6.4 показана одна и та же форма, сгенерированная тремя разными броузерами (MSIE, Opera и Netscape).<br><br>
<h1>Шаблон сценария сгенерированный HomeSite</h1>Рисунок 6.17. Шаблон сценария, сгенерированный HomeSite<br><br><br><img src="image/shablon-scenarija-sgenerirovannyj-homesite_1.gif" alt="Шаблон сценария сгенерированный HomeSite"><br><br>
<br><br>
<h1>Создание интерактивных страниц</h1> Создание интерактивных страниц
Под интерактивными страницами в общем случае понимаются такие, которые содержат элементы, реагирующие на действия посетителя сайта (например, на перемещение указателя мыши, ввод каких-либо данных и т. д.). Наиболее распространенными из таких элементов являются формы (или их элементы), изображения-ролловеры и кнопки. Однако благодаря поддержке последними версиями броузеров Dynamic HTML, Flash, ASP и других современных технологий список интерактивных элементов значительно расширился.<br><br>
Так или иначе, в основе практически любой технологии создания интерактивных страниц лежит тот или иной язык программирования и механизм взаимодействия броузера с программой, написанной на этом языке.<br>
Арсенал инструментов, предоставляемых HomeSite 5 разработчику, для разных технологий различен. Для одних он ограничен возможностью проверки корректности кода, для других имеются средства автоматической генерации фрагментов страниц.<br>
Итак, говоря о поддержке HomeSite той или иной технологии, мы имеем в виду поддержку соответствующего языка разработки.<br>
Разумеется, HomeSite в полном объеме поддерживает «чистый» HTML, который позволяет включать в Web-страницы формы или отдельные их элементы. Если вы решили поместить на страницу любую форму — в вашем распоряжении все тс основные инструменты HomeSite, которые были рассмотрены в третьей главе.<br>
Особенности применения этих инструментов при работе с формами описаны в следующем разделе.<br>
Кроме того, при разработке интерактивных страниц с помощью HomeSite вы можете:<br>
<li> создавать список событий и обработчиков для элементов страницы;</li>
<li> устанашшвать и редактировать значения атрибутов тегов <SCRIPT>, <APPLET>, <PARAM>, <EMBED>;</li>
<li> использовать цветовую подсветку синтаксических конструкций при анализе файлов сценариев;</li>
<li> использовать автоматически сгенерированные шаблоны сценариев на JavaScript;</li>
<li> получать автоматически сгенерированный код сценария для некоторых типовых операций;</li>
<li> применять средства быстрой вставки основных синтаксических конструкций следующих языков: JavaScript, Active Server Page (ASP), Java Server Page (JSP), ColdFusion Markup Language (CFML);</li>
<li> вставлять в код страницы элементы ActiveX и редактировать атрибуты тега <OBJECT>.</li>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
<tr>
<td>
<h1>Создание сценариев на JavaScript и VBScript</h1>Создание сценариев на JavaScript и VBScript<br><br>
Оба языка предназначены для создания «клиентских» сценариев, то есть сценариев, выполняемых броузером читателя.<br>
Основной частью сценария (программы на языке JavaScript или на VBScript) является описание событий и обработчиков этих событий. События инициируются, главным образом, теми или иными действиями пользователя. Например, щелчку мышью на некотором элементе страницы соответствует событие onClick. Если указатель мыши оказывается над какой-либо областью страницы, имеет место событие onMoitseOver. Таким образом, суть выполнения сценария заключается в воспроизведении реакции на события, происходящие при работе с HTML-документом. Так, в результате щелчка на кнопке может открываться новое окно броузера.<br>
По сравнению с обработкой событий средствами Dynamic HTML (на основе изменения стиля элемента) сценарии обладают более мощными возможностями. Это объясняется тем, что в языках JavaScript и VBScript поддерживается механизм функций. Наряду со стандартными функциями и процедурами (например, вывода на экран диалогового окна) разработчик может создавать собственные функции и использовать их с различными параметрами.<br>
В состав HTML-документа могут быть включены сценарии на обоих языках — как на JavaScript, так и на VBScript. Однако для их эффективного совместного использования надо быть уверенным в том, что броузеры читателей ваших страниц обладают соответствующими возможностями.<br>
В HomeSite поддерживается работа с обоими языками, однако большее внимание уделено все-таки JavaScript.<br>
Объясняется это тем, что VBScript понятен только броузерам MSIE, в то время как JavaScript является фактически стандартным языком сценариев, который обязаны понимать все броузеры.<br>В HomeSite имеются следующие средства повышения эффективности разработки сценариев:<br>
<li> вкладка Script панели быстрой вставки, обеспечивающая удобный доступ к основным инструментам создания и редактирования сценариев (Рисунок 6.14);</li>
<li> специальное окно редактора тегов для установки атрибутов тега <SCRIPT>, позволяющее быстро установить значения его атрибутов;</li>
<li>цветовая подсветка синтаксических конструкций сценария, причем для каждого из двух языков — своя, учитывающая особенности языка (Рисунок 6.15);</li>
<li> средства автоматической генерации шаблонов сценариев, входящие в состав Tag Inspector,</li>
<li> возможность настройки утилиты Tag Tree для работы с файлом сценария;</li>
<li> утилита JavaScript Tree, предназначенная для работы с объектами и функциями языка JavaScript;</li>
<li> набор мастеров, обеспечивающих генерацию кода сценариев для некоторых типовых операций.</li>
<br><br>
<h1>Списки допустимых событий для различных элементов страницы</h1>Рисунок 6.8. Списки допустимых событий для различных элементов страницы<br><br><br><img src="image/spiski-dopustimyh-sobytij-dlja-razlichnyh_1.gif" alt="Списки допустимых событий для различных элементов страницы"><br><br>
<br><br>
<h1>Список версий ColdFusion для которых возможен анализ корректности кода</h1>Рисунок 6.23. Список версий ColdFusion, для которых возможен анализ корректности кода<br><br><br><img src="image/spisok-versij-coldfusion-dlja-kotoryh-vozmozhen_1.gif" alt="Список версий ColdFusion для которых возможен анализ корректности кода"><br>
<li> цветовая подсветка CFML-тегов в коде страницы; </li>
<li> анализ корректности кода с помощью утилиты Validator, поддерживающей вес существующие версии ColdFusion (Рисунок 6.23); подробнее об использовании и настройке утилиты Validator см. раздел <a href="../Glava%207/Index2.htm">«Тестирование страниц» </a>седьмой главы; </li>
<li> вставка любого CFML-тега в код страницы с помощью утилиты Tag Chooser; </li>
<li> установка значений атрибутов CFML-тегов с помощью диалоговых окна редактора тегов;</li>
<li> вставка в код страницы наиболее популярных CFML-тегов с помощью вкладки CFML панели быстрой вставки (Рисунок 6.24); </li>
<li> просмотр и редактирование атрибутов CFML-тегов с помощью Tag Inspector (Рисунок 6.25); </li>
<li> визуальное представление структуры CFML-страницы в окне Tag Tree;</li>
<li> оперативное использование справки по всем CFML-тегам.</li>
<br><br>
<br>
<br>
<h1>Установка атрибутов CFMLтега с помощью Tag Inspector</h1>Рисунок 6.25. Установка атрибутов CFML-тега с помощью Tag Inspector<br><br><img src="image/ustanovka-atributov-cfml-tega-s-pomoshhju-tag_1.gif" alt="Установка атрибутов CFMLтега с помощью Tag Inspector"><br>
Ниже приведен список тегов, вынесенных на панель быстрой вставки, с кратким пояснением:<br>
<CFQUERY> — передает инструкции (запросы), записанные на языке SQL (Structured Query Language — язык структурных запросов), к источникам данных, поддерживающих ODBC (Open Database Connectivity — открытый доступ к базам данных), и возвращает результирующий набор данных для обработки (как правило, для вывода на экран с помощью тега CFOUTPUT);<br><CFOUTPUT> — указывает, какие данные должны быть отображены на страниде, и в какой форме;<br><CFLOOP> — определяет условия для итерационного выполнения команд или вывода данных; другими словами, представляет собой аналог оператора цикла в алгоритмических языках программирования;<br><CFBREAK> —: позволяет досрочно завершить итерационный процесс, реализованный с помощью тега CFLOOP;<br><CFIF> — управляет процессом обработки данных на основе некоторого логического условия (аналог условного оператора if в в алгоритмических языках программирования);<br><CFABORT> — прерывает обработку страницы и дополнительно генерирует сообщение об ошибке;<br><CFSET> — позволяет объявить переменные и их значения;<br><CFCOOKIE> — определяет переменные, используемые и cookie;<br><CFINCLUDE> — обеспечивает возможность модульного программирования за счет включения содержимого внешней страницы в текущую страницу;<br><CFLOCATION> — переназначает пользователей на другой URL;<br><CFFILE> — обрабатывает все взаимодействия с файлами;<br><CFDIRECTORY> — управляет структурой каталогов сервера;<br><CFMAIL> — генерирует и пересылает сообщения электронной почты;<br><CFTABLE> и <CFCOL> — определяют параметры HTML-таблиц для вывода данных.<br>
После вставки CFML-тега в код страницы для изменения его атрибутов может быть стандартным образом вызван редактор тегов — для этого следует в контекстном меню тега выбрать команду Edit Current Tag.
<br> <br> <br><br>
<h1>Установка значения параметра position</h1>Рисунок 6.12. Установка значения параметра position<br><br><img src="image/ustanovka-znachenija-parametra-position_1.gif" alt="Установка значения параметра position"><br>
Теперь в качестве примера рассмотрим процедуру создания «прыгающего» слоя на основе тега <DIV>. Пусть слой перемещается на новую позицию при двойном щелчке на нем мышью. Чтобы выполнить поставленную задачу, необходимо:<br>
<li> 1. В окне документа щелкнуть правой кнопкой в пустой позиции и в контекстном меню выбрать команду Insert Tag.</li>
<li>2. В окне утилиты Tag Chooser щелкнуть на категории Formatting and Layout и в правой панели дважды щелкнуть на имени тега <DIV>.</li>
<li>3. В открывшемся окне редактора тегов описать положение слоя до и после щелчка мышью; для этого:</li>
<li> 3.1. Перейти на вкладку StyleSheet/Accessibility и на ней щелкнуть на кнопке Style Editor.</li>
<li> 3.2.В окне утилиты TopStyle Lite в списке параметров стиля (панель Slylе Inspector) щелкнуть в ячейке position и в соседней ячейке с помощью раскрывающегося списка выбрать значение absolute (Рисунок 6.11).</li>
<li> 3.3. В окне редактирования параметров установить курсор после вставленного параметра position и нажать клавишу <Spacebar>; ввести с клавиатуры пару первых символов параметра left (он задаст позицию слоя относительно левого края окна броузера); в появившемся списке (Рисунок 6.12) выбрать пункт left и нажать клавишу <Entеr>.</li>
<li> 3.4. В дополнительном списке (Рисунок 6.13, вверху) выбрать пункт length (это значит, что положение будет задано в пикселах) и еще раз нажать клавишу <Entеr>.</li>
<li> 3.5. В открывшемся диалоговом окне (Рисунок 6.13, внизу) указать величину отступа (например, 80 пикселов) и щелкнуть на кнопке ОК.</li>
<li> 3.6. На панели инструментов утилиты TopStylc Lite щелкнуть на кнопке Done; после того, как окно закроется, в поле Style окна редактора тегов будут выведены параметры слоя (его исходное положение).</li>
<li> 3.7. В окне редактора тегов перейти на вкладку Events, щелкнуть на ярлычке события onDblClick и в текстовом поле ввести реакцию на это событие: style.left='280px' (предполагается, что по двойному щелчку слой должен переместиться на 200 пикселов вправо).</li>
<li> 3.8. Щелкнуть на кнопке ОК.</li>
<img src="image/ustanovka-znachenija-parametra-position_2.gif" alt="Установка значения параметра position"><br>
Рисунок 6.13. Установка значения параметра left
<br> <br> <br><br>
<h1>Утилита JavaScript Tree обеспечивает</h1>Рисунок 6.21. Утилита JavaScript Tree обеспечивает доступ практически ко всем объектам, используемым в языке JavaScript<br><br><img src="image/utilita-javascript-tree-obespechivaet-dostup_1.gif" alt="Утилита JavaScript Tree обеспечивает"><br>
Чтобы вставить в код страницы обращение к некоторому свойству или вызов метода объекта, достаточно дважды щелкнуть на имени этою свойства или метода. Причем имя соответствующего объекта будет добавлено автоматически. Например, если требуется вставить в страницу вызов метода confirm для объекта window, следует дважды щелкнуть мышью в дереве на ветви confirm, и в страницу будет добавлена конструкция window.confirm(«»).<br>
Некоторые типовые сценарии на JavaScript и на VBScript могут быть сгенерированы полностью автоматически с помощью соответствующих мастеров. Например, кнопка JavaScript Wizard, вынесенная на вкладку Script панели быстрой вставки, обеспечивает доступ сразу к шести мастерам. Каждому из них отведена отдельная вкладка в окне редактора тегов (Рисунок 6.22).<br><br>
<h1>Вкладка CFML панели быстрой вставки</h1>Рисунок 6.24. Вкладка CFML панели быстрой вставки<br><br><br><img src="image/vkladka-cfml-paneli-bystroj-vstavki_1.gif" alt="Вкладка CFML панели быстрой вставки"><br><br>
<br><br>
<h1>Вкладка Forms панели быстрой вставки</h1>Рисунок 6.1. Вкладка Forms панели быстрой вставки<br><br><img src="image/vkladka-forms-paneli-bystroj-vstavki_1.gif" alt="Вкладка Forms панели быстрой вставки"><br>
<li> кнопка Form обеспечивает вызов окна редактора тегов для установки атрибутов тега <FORM>, главное назначение которых — описание используемого механизма пересылки данных на сервер; </li>
<li> кнопки второй группы предназначены для создания двух стандартных кнопок формы — Submit и Reset; </li>
<li> кнопки третьей группы обеспечивают добавление в форму текстовых областей (то есть элементов формы, с помощью которых пользователь вводит символьную информацию); </li>
<li> кнопки четвертой группы используются для создания таких элементов формы, с помощью которых пользователь вводит булевы величины («истина» — если элемент выбран и «ложь» — в противном случае); это переключатели, флажки и списки.</li>
Несмотря на достаточно большое число кнопок, создание форм с помощью панели быстрой вставки строится на работе с панелями трех типов, показанных на рисунках 6.2, 6.3 и 6.6.<br>
Первая из них открывается с помощью кнопки Form, вторая — при выборе любой другой кнопки, соответствующей элементу, создаваемому тегом <INPUT>, а третья — при выборе кнопки Select.<br>
Для тега <FORM> с помощью окна редактора тегов могут быть заданы значения следующих атрибутов (см. Рисунок 6.2):<br><br>
<h1>Вкладка Script панели быстрой вставки</h1>Рисунок 6.14. Вкладка Script панели быстрой вставки<br><br><br><img src="image/vkladka-script-paneli-bystroj-vstavki_1.gif" alt="Вкладка Script панели быстрой вставки"><br><br>
<br><br>
<h1>Выбор языка сценария</h1>Рисунок 6.16. Выбор языка сценария<br><br><br><img src="image/vybor-jazyka-scenarija_2.gif" alt="Выбор языка сценария"><br><br>
<br><br>
<h1>Выбор способа позиционирования слоя</h1>Рисунок 6.11. Выбор способа позиционирования слоя<br><br><br><img src="image/vybor-sposoba-pozicionirovanija-sloja_1.gif" alt="Выбор способа позиционирования слоя"><br><br>
<br><br>
<h1>Тестирование сайта и выгрузка на удаленный сервер</h1>
<h1>Диалоговое окно для указания адреса развертывания проекта</h1>Рисунок 7.16. Диалоговое окно для указания адреса развертывания проекта<br><br><img src="image/dialogovoe-okno-dlja-ukazanija-adresa_1.gif" alt="Диалоговое окно для указания адреса развертывания проекта"><br>
После этого необходимо в меню Project основного окна HomeSite выбрать команду Deployment Wizard (Мастер развертывания). При этом откроется окно,<br><br>
<h1>Диалоговое окно для управления работой Spell Checker</h1>Рисунок 7.13. Диалоговое окно для управления работой Spell Checker<br><br><img src="image/dialogovoe-okno-dlja-upravlenija-rabotoj-spell_1.gif" alt="Диалоговое окно для управления работой Spell Checker"><br>
Кроме того, в этом диалоговом окне имеется кнопка Add (Добавить), которая позволяет добавить слово, отсутствующее в основных словарях, в словарь пользователя. Последующие вхождения этого слова уже не будут восприниматься утилитой как ошибка.<br>
Утилита Spell Checker может также работать в облегченном режиме, при использовании которого утилита только выделяет в тексте документа (подчеркивает) слова с ошибками, не предлагая вариантов замены. Для запуска Checker в таком режиме достаточно щелкнуть на кнопке Mark Spelling Errors (см. Рисунок 7.1).
<br> <br> <br><br>
<h1>Диалоговое окно для установки параметров соединения с удаленным сервером</h1>Рисунок 7.24. Диалоговое окно для установки параметров соединения с удаленным сервером<br><br><img src="image/dialogovoe-okno-dlja-ustanovki-parametrov_4.gif" alt="Диалоговое окно для установки параметров соединения с удаленным сервером"><br>
Диалоговое окно для установки параметров соединения с удаленным сервером содержит следующие поля (Рисунок 7.24):<br>
<li>Description (Описание) — условное обозначение FTP-сервсра, используемое для его представления в списке Deployment Servers и в папке Macromedia FTP/RDS;</li>
<li>Host Name (Имя хост-компьютера) — сетевое имя FTP-сервера; может быть указано либо в виде IP-адреса, либо в виде доменного имени; если тип протокола ftp используется как часть доменного имени, необходимо ввести полное имя, например ftp.macromedia.com;</li>
<li> Initial Directory (Начальный каталог) — имя каталога верхнего уровня, в котором размещаются папки проекта; если при создании учетной записи соединения (аккаунте) имя этого каталога установлено по умолчанию, то данный параметр является необязательным; параметр необходим, если для учетной записи имя каталога должно быть задано явным образом;</li>
<li> Relative from server-assigned directory (Относительно каталога, назначенного сервером) — если задан параметр Initial Directory, то данный параметр определяет «точку отсчета» при размещении папок проекта; если в качестве начального каталога (Initial Directory) указан корневой каталог сервера, то флажок должен быть снят;</li>
<li> Username (Имя пользователя) — зарегистрированное имя, используемое для подключения к FTP-ссрверу (или anonymous для FTP-сервера с анонимным подключением, если поле оставлено пустым, то им пользователя потребуется ввести по запросу от сервера непосредственно при подключений;</li>
<li> Password (Пароль) — пароль для подключения к серверу; </li>
<li> Root URL (Корневой URL) — полный URL сервера; данный параметр позволяет открывать, редактировать и сохранять файлы на удаленно сервере;</li>
<li> Remote Port (Удаленный порт) — номер порта, используемого для noдключения к FTP-сервсру; по умолчанию используется 21 (если интернет-провайдер не определит другое значение); </li>
<li> Request Timeout (Длительность отработки запроса) — максимальны интервал времени (в секундах), в течение которого следует ожидать соединения с сервером; </li>
<li> Disable passive mode (Запретить пассивный режим) — соответствующий флажок должен быть установлен, если FTP-сервср не поддерживает пассивный режим подключения;</li>
<li> File time offset (Смещение времени файла) — разница во времени (часах) между текущим временем на вашем компьютере и на сервере; заданная величина учитывается при установке атрибутов файла при его сохранении на диске; если значение параметра больше нуля, то флажок Assume UTC file times недоступен; </li>
<li> Assume UTC file times (Время приема файла по UTC) — если этот флажок установлен, то время записи файла указывается в формате UTC (Universal Coordinated Time — единые временные координаты)</li>
Дополнительно могут быть заданы параметры безопасной передачи файле на основе протокола SSL (Secure Sockets Layer).<br>
Замечание
<br>Замечание<br><br>Протокол SSL не может применяться для пересылки файлов, для которых используется кодировка UNICODE.
После установки параметров соединения с FTP-сервером развертывание проекта на нем выполняется с помощью мастера развертывания (Deployment Wizard), описанным в предыдущем подразделе.
<tr>
<td><a href="Index9.htm">Назад</a>
</td>
<td>
<h1>Диалоговое окно с результатами оценки длительности загрузки страницы</h1>Рисунок 7.14. Диалоговое окно с результатами оценки длительности загрузки страницы<br><br><img src="image/dialogovoe-okno-s-rezultatami-ocenki-dlitelnosti_1.gif" alt="Диалоговое окно с результатами оценки длительности загрузки страницы"><br>
Если длительность загрузки страницы превышает требуемую, следует отредактировать страницу, и повторить тестирование.
<br> <br> <br><br>
<h1>Форма отчета о неработоспособных ссылках</h1>Рисунок 7.10. Форма отчета о неработоспособных ссылках<br><br><img src="image/forma-otcheta-o-nerabotosposobnyh-ssylkah_1.gif" alt="Форма отчета о неработоспособных ссылках"><br>
Контекстное меню окна содержит следующие команды:<br>
<li> Edit this Link (Редактировать ссылку) — соответствующая ссылка выделяется в тексте документа;</li>
<li> Browse this Link (Просмотреть ссылку) — связанный документ открывается с помощью ассоциированного приложения;</li>
<li> Verify this Link (Проверить ссылку) — инициализация процесса тестирования ссылки;</li>
<li> Save as... (Сохранить как...) — содержимое окна результатов записывается в текстовый файл (по умолчанию — links.txt);</li>
<li> Clear (Очистить) — команда очищает содержимое окна результатов, но не закрывает его;</li>
<li> Open in Browser (Открыть в броузере) — содержимое окна результатов открывается в используемом по умолчанию броузере в виде Web-страницы (Рисунок 7.11);</li>
<li> Close Results (Закрыть результаты) — закрывает окно результатов.</li>
<br><br>
<h1>Форма отчета о результатах тестирования ссылок</h1>Рисунок 7.11. Форма отчета о результатах тестирования ссылок<br><br><img src="image/forma-otcheta-o-rezultatah-testirovanija-ssylok_1.gif" alt="Форма отчета о результатах тестирования ссылок"><br>
Еще раз напомним: если возможности утилиты Link Checker покажутся вам недостаточными, вы можете воспользоваться приложением Linkbot. После его установки на компьютере процесс тестирования может быть начат с помощью одной из двух команд меню Tools главного окна HomeSite:<br>
<li> Verify Links with Linkbot (Проверить ссылки с помощью Linkbot) - проверка ссылок текущего документа; </li>
<li> Verify Project with Linkbot (Проверить проект с помощью Linkbot) - проверка ссылок во всем текущем проекте.</li>
<br> <br> <br><br>
<h1>Кнопки для вызова средств тестирования</h1>Рисунок 7.1. Кнопки для вызова средств тестирования<br><br><img src="image/knopki-dlja-vyzova-sredstv-testirovanija_1.gif" alt="Кнопки для вызова средств тестирования"><br>
Эти кнопки имеют следующее предназначение:<br>
<li> Verify Links (Проверить ссылки) — вызов утилиты Link Checker, </li>
<li>Validate Current Document (Проверить текущий документ) — вызов утилиты Validator,</li>
<li> Spell Check (Проверка правописания) — вызов утилиты Spell Checker, </li>
<li> Mark Spelling Errors (Пометить грамматические ошибки) — включение режима быстрой проверки правописания (без исправления ошибок).</li>
<br> <br> <br><br>
<h1>Оценка длительности загрузки</h1>Оценка длительности загрузки<br><br>
Длительность загрузки страниц публикации — это один из важнейших показателей качества не только дизайна отдельных страниц, но и узла в целом.<br>
Чтобы оценить длительность загрузки текущего документа, необходимо выбрать в меню Tools команду Document Weight (Вес Документа). На экране появится диалоговое окно, в котором отображается список ресурсов, загружаемых вместе с тестируемым документом (например, графические файлы), и размеры соответствующих файлов. Ниже в этом окне приводятся оценки времени загрузки самого документа, используемых им ресурсов и суммарное время загрузки. Все эти значения рассчитываются для трех модификаций модема, различающихся быстродействием (Рисунок 7.14).<br><br>
<h1>Окно настройки параметров утилиты Spell Checker</h1>Рисунок 7.12. Окно настройки параметров утилиты Spell Checker<br><br><br><img src="image/okno-nastrojki-parametrov-utility-spell-checker_1.gif" alt="Окно настройки параметров утилиты Spell Checker"><br><br>
<br><br>
<h1>Первый шаг работы мастера развертывания</h1>Рисунок 7.17. Первый шаг работы мастера развертывания<br><br><img src="image/pervyj-shag-raboty-mastera-razvertyvanija_1.gif" alt="Первый шаг работы мастера развертывания"><br>
с помощью которого выполняется первый шаг процедуры загрузки: выбирается способ размещения проекта.<br>
Возможны два варианта (Рисунок 7.17):<br>
<li> прямая загрузка (Direct Deployment);</li>
<li> загрузка на основе сценария (Schptable Deployment).</li>
Выберите первый вариант и щелкните на кнопке Next (Далее). Второе окно мастера позволяет еще раз проверить (или изменить) параметры развертывания, установленные ранее на вкладке Deployment диалогового окна Settings (Рисунок 7.18).<br>
На третьем, последнем шаге, остается только щелкнуть кнопку Finish (Готово), и ваш сайт будет загружен на Web-сервер, а в окне результатов (на листе Deployment) будут отражены результаты выполнения загрузки (Рисунок 7.19).<br>
Если на первом шаге мастера развертывания выбрать вариант Scriptable Deployment, то мастер автоматически сгенерирует сценарий на указанном вами языке: JavaScript или VBScript и сохранит его в файле на диске для последующего использования.<br><br>
<h1>Представление информации об ошибках в окне результатов</h1>Рисунок 7.2. Представление информации об ошибках в окне результатов<br><br><br><img src="image/predstavlenie-informacii-ob-oshibkah-v-okne_1.gif" alt="Представление информации об ошибках в окне результатов"><br>
<li> Line (Строка) — номера строк, в которых обнаружены ошибки; в этом же столбце выводится значок, поясняющий уровень ошибки; возможные варианты приведены в табл. 7.1;</li>
<li> Message (Сообщение) — комментарий к обнаруженной ошибке.</li>
<br><br>
<br>
<br>
<h1>Представление Macromedia FTP/RDS в окне Windows Explorer</h1>Рисунок 7.21. Представление Macromedia FTP/RDS в окне Windows Explorer<br><br><img src="image/predstavlenie-macromedia-ftp-rds-v-okne-windows_1.gif" alt="Представление Macromedia FTP/RDS в окне Windows Explorer"><br>
При работе в среде HomeSite доступ к папкам удаленных серверов может выполняться посредством интерфейса двух типов вкладок окна ресурсов: Files и Projects. В первом случае доступ выполняется так же, как через Windows Explorer (Рисунок 7.22, слева). На вкладке Projects список удаленных серверов называется Deployment Servers (Рисунок 7.22, справа).<br>
В исходном состоянии как папка Macromedia FTP/RDS, так и список Deployment Servers пусты. Чтобы добавить новый сервер, требуется щелкнуть правой кнопкой мыши на значке папки или списка серверов и выбрать в контекстном меню единственную команду — Add FTP Server (Добавить FTP-cepвер). При выборе команды открывается диалоговое окно, с помощью которого выполняется установка параметров соединения с сервером (подробнее они будут описаны ниже).<br><br>
<h1>Представление списка ссылок документа в окне результатов</h1>Рисунок 7.9. Представление списка ссылок документа в окне результатов<br><br><img src="image/predstavlenie-spiska-ssylok-dokumenta-v-okne_1.gif" alt="Представление списка ссылок документа в окне результатов"><br>
Если ссылка оказалась неработоспособна, то выводится соответствующее пояснение (например. Object Not Found — объект не найден) и длительность проверки.<br>
Для работы с представленными в списке ссылками могут использоваться либо расположенная в левой части окна панель инструментов, либо контекстное меню окна.<br>
Кнопки панели инструментов имеют следующее назначение:<br>
<li> Start Link Verification (Начать проверку ссылок) — активизация процесса тестирования (он всегда начинается с начала документа);</li>
<li> Stop Link Verification (Закончить проверку ссылок) — прерывание процесса тестирования;</li>
<li> Set Root URL (Установить корневой URL) — вызывает диалоговое окно, с помощью которого можно указать корневой (абсолютный) URL, который должен использоваться для вычисления относительных ссылок;</li>
<li> Set Timeout (Установить интервал) — вызывает диалоговое окно, с помощью которого можно указать максимальную длительность проверки одной ссылки; </li>
<li> Set Proxy (Установить прокси-сервер) — вызывает диалоговое окно, с помощью которого можно указать имя и номер порта используемого прокси-сервера;</li>
<li> Print Failed Links (Печать плохих ссылок) — формирование отчета о неработоспособных ссылках (отчет создается в виде HTML-страницы и открывается в используемом по умолчанию броузере), Рисунок 7.10.</li>
<br><br>
<h1>Проверка корректности кода</h1>Проверка корректности кода<br><br>
Для проверки синтаксиса кода страницы требуется щелкнуть на кнопке Validate Current Document или выбрать в меню Tools (Инструменты) команду Validate Document (Проверить документ). В обоих случаях будет запущена утилита Validator. По умолчанию она настроена на анализ HTML-кода, но параметры утилиты могут быть скорректированы (подробнее о настройке параметров будет рассказано ниже).<br>
Информация о найденных ошибках отображается в окне результатов на листе Validation в виде таблицы, содержащей два столбца (Рисунок 7.2):<br><br>
<h1>Проверка правописания</h1>Проверка правописания<br><br>
Проверку орфографии с помощью HomeSite следует начинать с установки соответствующих параметров его работы. Для этого необходимо открыть с помощью команды Settings одноименное диалоговое окно и выбрать в списке пункт Spelling (Проверка правописания). Окно настройки параметров содержит следующие элементы (Рисунок 7.12):<br>
<li> список Main Dictionaries (Основные словари), который содержит перечень используемых словарей;</li>
<li> поле User Dictionary (Словарь пользователя), в котором можно ввести (или выбрать с помощью имеющейся кнопки) имя текстового файла, используемого в качестве дополнительного словаря;</li>
<li> список флажков, с помощью которых можно установить параметры работы утилиты Spell Checker,</li>
<li> дискретный счетчик Maximum number of suggestions (Максимальное число предлагаемых исправлений), который определяет, после какого количества обнаруженных ошибок следует прекратить проверку.</li>
После того, как соответствующие установки выполнены, можно переходить непосредственно к проверке правописания. Процесс инициируется либо с помощью команды Spell Check... из меню Tools, либо щелчком на одноименной кнопке панели инструментов.<br>
При обнаружении ошибки на экране появляется диалоговое окно, в котором отображается найденная ошибка, список возможных вариантов исправления ошибки, а также кнопки, с помощью которых можно «заставить» Spell Checker игнорировать ошибку (Рисунок 7.13).<br><br>
<h1>З Сообщение об отсутствии ошибок</h1>Рисунок 7.З. Сообщение об отсутствии ошибок<br><br><img src="image/risunok-7-z-soobshhenie-ob-otsutstvii-oshibok_1.gif" alt="З Сообщение об отсутствии ошибок"><br>
Разработчику Web-страниц предоставлены широкие возможности по настройке параметров работы валидатора. Основной из них — выбор спецификации языка, на основе которой должен выполняться анализ кода. Для установки требуемого режима работы необходимо:<br><br>
<h1>Список файлов выгружаемой папки</h1>Рисунок 7.20. Список файлов выгружаемой папки<br><br><img src="image/spisok-fajlov-vygruzhaemoj-papki_1.gif" alt="Список файлов выгружаемой папки"><br>
Протокол выгрузки будет представлен в окне результатов. Если папку следует загрузить по новому адресу, то требуется выполнить следующие действия:<br>
<li>1. В дереве проекта щелкнуть правой кнопкой на значке папки и в контекстном меню выбрать команду Properties (Свойства).</li>
<li> 2. В открывшемся окне перейти на вкладку Deployment. </li>
<li>3. С помощью элементов управления, имеющихся на вкладке, указать адрес выгрузки и щелкнуть на кнопке ОК.</li>
<li> 4. В контекстном меню папки выбрать команду Deploy Files in Folder и далее выполнить описанную выше процедуру.</li>
Выгрузка одного отдельного файла выполняется аналогичным образом:<br>
<li> 1. В дереве проекта открыть папку, в которой находится выгружаемый файл (альтернативный вариант — открыть соответствующий раздел дерева ресурсов).</li>
<li> 2. В списке файлов щелкнуть правой кнопкой на значке файла и в контекстном меню выбрать команду Deploy File...</li>
<li> 3. В открывшемся диалоговом окне щелкнуть на кнопке Deploy.</li>
<br> <br> <br><br>
<h1>Средства доступа к списку удаленных серверов в окне ресурсов HomeSite</h1>Рисунок 7.22. Средства доступа к списку удаленных серверов в окне ресурсов HomeSite<br><br><img src="image/sredstva-dostupa-k-spisku-udalennyh-serverov-v_1.gif" alt="Средства доступа к списку удаленных серверов в окне ресурсов HomeSite"><br>
Замечание
<br>Замечание<br><br>Список серверов, добавленных в папку Macromedia FTP/RDS, хранится в реестре Windows, а список серверов развертывания проекта записывается в файл проекта .apt. Если вы хотите, чтобы одни и те же серверы были представлены и в папке Macromedia FTP/RDS, и в списке Deployment Servers, необходимо ввести данные о них и там, и там.
Для выполнения операций с удаленным сервером требуется наличие двух условий:<br>
<li> в параметрах HomeSite должна быть разрешена работа с удаленными серверами;</li>
<li> должна быть установлена связь с удаленным сервером. </li>
Параметры HomeSite, связанные с использованием удаленных серверов, размещены на вкладке File Settings — FTP диалогового окна Settings (Рисунок 7.23). К ним относятся:<br>
<li> Enable Explorer shell integration (Разрешить интеграцию с Explorer) — если флажок установлен, разрешена работа с папкой Macromedia FTP/ RDS в окне Windows Explorer;</li>
<li> Enable Byte Count Checking (Разрешить контроль числа байтов) — если флажок установлен, то после завершения пересылки файла на сервер будет выполняться сравнение числа отправленных и принятых байтов; в случае несоответствия на экран выводится соответствующее сообщение;</li>
<li> Always use binary for FTP transfer (Всегда использовать двоичный формат при передаче по FTP) — при пересылке содержимого файлов по FTP оно представляется в двоичном формате. </li>
<br><br>
<h1>Виды сообщений об ошибках выдаваемых утилитой Validator</h1>Таблица 7.1. Виды сообщений об ошибках, выдаваемых утилитой Validator<br><br>
<tr valign="TOP" class="text_b">
<td valign="TOP" "42">Вид сообщения </td>
<td valign="TOP" "42">Значок </td>
<td valign="TOP" "42">Пояснение </td>
</tr>
<tr valign="TOP">
<td valign="middle" "99">Error </td>
<td valign="middle" "99"></td></tr></table>
<br><br>
<h1>Тестирование сайта и выгрузка на удаленный сервер</h1>Тестирование сайта и выгрузка на удаленный сервер<br><br>
Мы уже неоднократно говорили о том, что тестирование страниц является обязательным этапом разработки сайта, независимо от его размера и предназначения. И если HomeSite не способен полностью заменить вас на этапе разработки и редактирования страниц, то на этапе их тестирования он практически всю работу берет на себя.<br>
То же самое можно сказать и о процедуре развертывания сайта на удаленном сервере.<br>
Как тестирование, так и выгрузка страниц публикации на сервер выполняются не только при первоначальной разработке сайта, но и в процессе его сопровождения. Причем (отметим это еще раз) регулярное обновление содержания публикации является обязательным условием обеспечения ее популярности среди посетителей Интернета.<br>
Именно на этапе сопровождения сайта проявляются в полной мере преимущества разработки его как единого целого, то есть как проекта.
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td>
<h1>Тестирование ссылок</h1>Тестирование ссылок<br><br>
При тестировании ссылок, присутствующих на странице, целесообразно использовать как окно результатов, так и окно ресурсов. Сначала следует сравнить полученную навигационную схему страницы с ее проектом, созданным вами на бумаге. Для такого визуального сравнения как раз и применяется окно ресурсов (точнее, его вкладка Site View). Особенности представления ссылок в окне ресурсов были рассмотрены в разделе <a href="../Glava%205/Index5.htm">Представление ссылок на вкладке Site View </a>в главе Разработка навигационной схемы.<br>
Если сравнение даст положительный результат, то можно переходить к анализу работоспособности ссылок, то есть к работе с окном результатов.<br>
Проверка работоспособности ссылок в HomeSite возложена на специальную встроенную компоненту — Link Checker. Однако при желании можно воспользоваться и внешним приложением — Linkbot фирмы Tetranet Software, которое может быть загружено с ее узла.<br>
Link Checker способен проверять расположение документов на Web-сайте, корректность ссылок на локальные HTML-файлы, а также наличие связанных с ними графических и мультимедийных файлов. Ссылки на защищенные страницы (HTTPS), FTP-ссылки и почтовые ссылки (mailto) не могут быть проверены. По умолчанию проверяются все ссылки проекта, но пользователь имеет возможность указать, какие ссылки пропустить.<br>
Link Checker инициируется щелчком кнопки Verify Links на панели инструментов или при выборе одноименной команды в меню Tools. Выполнение команды приводит к тому, что в окне результатов (на листе Links) отображается список всех ссылок текущего документа с результатами их проверки. Список выводится в виде таблицы, содержащей четыре столбца (Рисунок 7.9):<br>
<li>Source (Источник) — имя файла, содержащего ссылку (как правило, это имя файла проверяемого документа); в этом же столбце слева от имени файла выводятся значки, отражающие результат проверки; всего предусмотрено четыре вида значков, их смысл поясняется на Рисунок 7.9;</li>
<li> Link (Ссылка) — URL, используемый в документе в качестве адреса связанного ресурса;</li>
<li> Full URL (Полный URL) — полный URL связанного ресурса;</li>
<li> Status (Статус) — состояние ссылки; может принимать одно из следующих значений:</li>
<li> Untested — ссылка не проверена;</li>
<li> Testing... — ссылка проверяется;</li>
<li> Cancelled — тестирование ссылки было прервано пользователем;</li>
<li> ОК — ссылка проверена и работоспособна; дополнительно выводится время, затраченное на проверку (в миллисекундах).</li>
<br><br>
<h1>Тестирование страниц</h1>Тестирование страниц<br><br>
Тестирование (оценка качества) любой страницы публикации должно включать:<br>
<li> проверку корректности кода;</li>
<li> проверку работоспособности имеющихся на странице ссылок;</li>
<li> контроле текстового содержимого страницы на отсутствие грамматических и синтаксических ошибок;</li>
<li> оценку длительности загрузки страницы броузером потенциального посетителя.</li>
Замечание
<br>Замечание<br><br>Разумеется, наряду с перечисленными аспектами, нельзя забывать о качестве пользовательского интерфейса страниц, но, хотя этот фактор является, пожалуй, важнейшим, оценить его формально с помощью HomeSite не представляется возможным.
Для активизации основных средств тестирования страниц удобнее всего использовать группу кнопок, расположенных на панели инструментов главного окна HomeSite (Рисунок 7.1).<br><br>
<h1>Установка параметров развертывания</h1>Установка параметров развертывания<br><br>
Первое, что необходимо сделать для развертывания проекта — установить параметры этой процедуры.<br><br>
<h1>Вкладка Deployment диалогового окна Settings</h1>Рисунок 7.15. Вкладка Deployment диалогового окна Settings<br><br><img src="image/vkladka-deployment-dialogovogo-okna-settings_1.gif" alt="Вкладка Deployment диалогового окна Settings"><br>
Установка параметров развертывания выполняется с помощью элементов управления, размещенных на вкладке Deployment (Развертывание) диалогового окна Settings (Рисунок 7.15):<br>
<li> Create Missing Folders/Directories (Создавать отсутствующие папки/каталоги) — перед загрузкой проекта на сервер на нем будет воссоздана структура папок, использовавшаяся для проекта на локальном компьютере; отсутствие такого соответствие вызовет ошибку при выполнении развертывания;</li>
<li> Upload Only Newer (Загружать только обновленные) — перед выгрузкой каждого файла проекта выполняется сравнение с его копией, размещенной на сервере; если файл не изменялся, его выгрузка не производится; </li>
<li> Encrypt CFML (Зашифровать CFML) - - выполняется кодирование CFM-файлов таким образом, чтобы запретить их просмотр конечными пользователями;</li>
<li> Force to Lower Case (Привести к нижнему регистру) - - имена всех файлов проекта преобразуются к нижнему регистру; для UNIX-систем это может привести к неработоспособности ссылок, в которых имена файлов записаны с использованием символов верхнего регистра; </li>
<li> Show Deployment Warning Dialog (Показывать окно предупреждения при развертывании) -- перед развертыванием проекта на экран выводится окно с просьбой подтвердить необходимость выполнения процедуры. </li>
Кроме того, с помощью флажка Disable Logging (Запретить ведение протокола) вы можете указать, требуется ли регистрировать шаги развертывания. Если да, то в поле Log File следует указать файл, в который будет записываться информация о развертывании.<br>
Далее необходимо внести URL сервера (или серверов), на который вы собираетесь выгрузить сайт, в свойства проекта. Эта процедура выполняется следующим образом:<br>
<li> Щелкнуть правой кнопкой мыши на имени проекта в окне ресурсов и выбрать в контекстном меню команду Properties...(Параметры).</li>
<li> В открывшемся диалоговом окне (Рисунок 7.16) в поле Deployment Path (Маршрут развертывания) ввести URL, по которому будет размещен созданный вами сайт (маршрут вводится либо вручную, либо с помощью расположенной рядом кнопки).</li>
<br><br>
<h1>Вкладка File Settings — FTP диалогового окна Settings</h1>Рисунок 7.23. Вкладка File Settings — FTP диалогового окна Settings<br><br><img src="image/vkladka-file-settings-ftp-dialogovogo-okna_1.gif" alt="Вкладка File Settings — FTP диалогового окна Settings"><br>
Параметры соединения с конкретным FTP-ссрвером устанавливаются с помощью диалогового окна, которое вызывается на экран либо с помощью команды Add FTP Server (если создастся соединение с новым сервером), либо с помощью команды Properties (если редактируются параметры соединения с существующим сервером).<br><br>
<h1>Вкладка Options панели свойств утилиты Validator</h1>Рисунок 7.5. Вкладка Options панели свойств утилиты Validator<br><br><img src="image/vkladka-options-paneli-svojstv-utility-validator_1.gif" alt="Вкладка Options панели свойств утилиты Validator"><br>
На вкладке Options могут быть установлены следующие параметры (Рисунок 7.5):<br>
<li> виды ошибок, подлежащие включению в отчет (то есть выводу в окне результатов); выбор производится путем изменения состояния флажков в группе Report (Отчет);</li>
<li> максимальное число ошибок, после которого следует прекратить проверку; вводится в поле Maximum Number (Максимальное количество); ввод нуля аналогичен установке значения Аll(то есть должны быть найдены все ошибки);</li>
<li> дополнительные параметры, управляемые флажками в группе Other (Другое):</li>
<li> Check for High ASCII characters — выдавать сообщение о наличии в документе не ASCII символов (коды которых превышают 127);</li>
<li> Check for Quotes in text — выдавать сообщение об использовании кавычек в тексте;</li>
<li> Check for Line Spanning Quotes — проверять строки, заключенные в кавычки;</li>
<li> Ignore ASP <%...%> delimited text — пропускать текст внутри ASP-тегов; </li>
<li> Ignore PHP <?...?> delimited text — пропускать текст внутри PHP-тегов;</li>
<li> Report Special Characters — выдавать сообщение об использовании специальных символов.</li>
Вкладка Tags позволяет указать синтаксические правила использования каждого тега индивидуально. Чтобы получить такую возможность, необходимо выбрать тег в списке (щелкнуть на его имени). При этом в правой части окна появится группа элементов Tag Options (Параметры тега), Рисунок 7.6.<br>В нее входят:<br>
<li> переключатели Closing Tag (Закрывающий тег), которые позволяют указать правило использования закрывающего тега:</li>
<li> Requred — используется обязательно;</li>
<li> Optional — может использоваться;</li>
<li> Not Permitted — не разрешен;</li>
<li> None Specified — не определено;</li>
<li> флажок Case Sensitive (Чувствительный к регистру), который определяет, требуется ли использовать при написании имени тега символы определенного регистра;</li>
<li> Required In Document (Требуется в документе), который определяет статус тега — является ли тот обязательным для документа данного типа.</li>
Чтобы установленные параметры вступили в силу, необходимо щелкнуть на кнопке Apply Options (Применить параметры).<br>
Помимо перечисленных параметров, при анализе корректности кода для каждого тега проверяются:<br>
<li> список используемых атрибутов; </li>
<li> наличие обязательных атрибутов;</li>
<li> контекст, в котором используется тег (то есть возможность его совместного использования с тегами других типов).</li>
Информация о разрешенном контексте отображается на вкладке Tags непосредственно в дереве тегов (см. Рисунок 7.6). Вы можете изменить контекст, используя кнопки Add (Добавить) и Remote (Удалить). Чтобы кнопка Add стала доступна, необходимо щелкнуть на значке папки Context.<br><br>
<h1>Вкладка Tags панели свойств утилиты Validator</h1>Рисунок 7.6. Вкладка Tags панели свойств утилиты Validator<br><br><img src="image/vkladka-tags-paneli-svojstv-utility-validator_1.gif" alt="Вкладка Tags панели свойств утилиты Validator"><br>
Информация об атрибутах тега на вкладке Tags не отображается, поскольку разработчик не вправе изменять их стандаргный набор. Вместе с тем, разрешается дополнить список атрибутов, включив их в папку Attributes.<br>
Те атрибуты, которые вы считаете обязательными, следует включить в папку Required. Изменение содержимого обеих папок также выполняется с помощью кнопок Add и Remote.<br>
Вкладка Versions (Рисунок 7.7) позволяет внести изменения в дерево версий языков, для которых Validator может выполнять синтаксический анализ. Информация на этой вкладке связана с информацией, отображаемой на вкладке Validation диалогового окна Settings (см. Рисунок 7.4). Вкладка содержит собственно дерево версий, кнопки для его редактирования, а также тскспшос поле, в котором отображается полное наименование версии (в том виде, как она представлена в списке версий в окне Settings).<br><br>
<h1>Вкладка Values позволяет выбрать форму представления символьных величин</h1>Рисунок 7.8. Вкладка Values позволяет выбрать форму представления символьных величин<br><br><br><img src="image/vkladka-values-pozvoljaet-vybrat-formu_1.gif" alt="Вкладка Values позволяет выбрать форму представления символьных величин"><br>
<li> поле Allowed Value (Разрешенное значение); в нем можно просмотреть и при необходимости изменить способ представления символьной величины, выбранной в расположенном ниже списке; если величина представлена в виде регулярного выражения, то при ее выборе автоматически устанавливается флажок Regular Expression (Регулярное выражение); например, на Рисунок 7.8 показано, как выглядит регулярное выражение для представления символов (цифр) целых отрицательных чисел (negative integer)',</li>
<li>поле Value Display Siring (Строковое представление значения); оно позволяет изменить наименование элемента в списке (например, вместо negative integer можно ввести «целые отрицательные числа»); если в списке выбрано некоторое ключевое слово или предопределенное значение, то данное поле недоступно; </li>
<li>раскрывающийся список Quotation (Использование кавычек); позволяет указать, должны ли (или могут ли) использоваться кавычки для этого типа данных; </li>
<li>кнопка Add (Добавить) открывает дополнительное окно, с помощью которого можно пополнить список разрешенных символьных значений; </li>
<li>флажки Show Regular Expression Values (Показать значения, представленные регулярным выражением) и Show Plain Values (Показать значения, представленные явно) играют роль фильтров: если флажок снят, то соответствующие значения в списке не отображаются.</li>
Замечание
<br>Замечание<br><br>Совсем не обязательно использовать все рассмотренные выше средства для изменения параметров работы утилиты Validator. Часто их полезно применять в качестве источника дополнительной информации.
<br> <br> <br><br>
<br><br>
<h1>Вкладка Versions позволяет внести изменения в дерево версий</h1>Рисунок 7.7. Вкладка Versions позволяет внести изменения в дерево версий<br><br><img src="image/vkladka-versions-pozvoljaet-vnesti-izmenenija-v_1.gif" alt="Вкладка Versions позволяет внести изменения в дерево версий"><br>
Дерево версий отражает их преемственность. Тe из версий, для которых разрешен синтаксический контроль, отмечены в дереве зелеными кружками, остальные — красными.<br>
Кроме того, статус версии выводится справа от поля с ее наименованием (Inactive — неактивна или Active — активна).<br>
Вкладка Values позволяет указать, каким образом должны быть представлены в коде документа символьные (строковые) величины, не являющиеся названиями тегов, их атрибутов либо текстовым содержимым страницы (например, ключевые слова-языков сценариев, численные значения атрибутов и т. д.).<br>
Проблема использования различных символьных кодировок в текстовых документах была рассмотрена в разделе <a href="../Glava%201/Index25.htm">Управление кодировкой текстовых файлов</a> главы Знакомство с HomeSite. В данном случае учитывается еще один аспект представления символьных данных. Любой символ может быть представлен в коде документа либо явно (на основе используемого репертуара), либо посредством регулярного выражения (то есть выбран из некоторого набора символов на основе заданной формулы).<br>
Имеющиеся на вкладке Values элементы управления позволяют указать для каждого символьного элемента страницы либо форму явного представления, либо соответствующее регулярное выражение. Такими элементами являются (Рисунок 7.8):<br><br>
<h1>Второй шаг работы мастера</h1>Рисунок 7.18. Второй шаг работы мастера<br><br><img src="image/vtoroj-shag-raboty-mastera_1.gif" alt="Второй шаг работы мастера"><br>
<img src="image/vtoroj-shag-raboty-mastera_2.gif" alt="Второй шаг работы мастера"><br>
Рисунок 7. 19. Представление результатов выгрузки на листе Deployment
<br> <br> <br><br>
<h1>Выбор контролируемых версий на вкладке Validation</h1>Рисунок 7.4. Выбор контролируемых версий на вкладке Validation<br><br><img src="image/vybor-kontroliruemyh-versij-na-vkladke-validation_1.gif" alt="Выбор контролируемых версий на вкладке Validation"><br>
<li> 1. В меню Options выбрать команду Settings... и в открывшемся окне настроек перейти на вкладку Validation.</li>
<li> 2. В списке используемых версий (Рисунок 7.4) снять или установить метку в соответствующей строке.</li>
<li> 3. Щелкнуть на кнопке Apply.</li>
Установка других параметров работы утилиты выполняется в дополнительном диалоговом окне, которое вызывается щелчком на кнопке Validator Settings. Это окно содержит четыре вкладки:<br>
<li> Options (Параметры) — общие параметры работы утилиты; </li>
<li> Tags (Теги) — параметры контроля синтаксиса тегов;</li>
<li> Versions (Версии) — параметры используемых версий языков;</li>
<li> Values (Значения) — параметры контроля синтаксиса строковых значений, используемых в коде страницы.</li>
<br><br>
<h1>Выгрузка cайта на удаленный сервер</h1>Выгрузка cайта на удаленный сервер<br><br>
В составе HomeSite имеется утилита, которая позволяет работать с файлами, размещенными на удаленном сервере так же, как если бы они находились на локальном диске. Эта утилита называется Macromedia FTP/RDS (в предыдущих версиях HomeSite она называлась Allaire FTR/RDS). ипа как оы выполняет функции виртуальной папки, содержащей доступные FTP-каталоги одного или нескольких удаленных серверов. Эта папка доступна не только из среды HomeSite, но и непосредственно из диалоговых окон Windows Explorer (Рисунок 7.21).<br><br>
<h1>Выгрузка отдельных папок и файлов</h1>Выгрузка отдельных папок и файлов<br><br>
При выгрузке на сервер некоторой папки, входящей в состав проекта, возможны три случая:<br>
<li> папка выгружается на тот же сервер, на который был выгружен весь проект, причем сохраняется ее место в структуре проекта;</li>
<li> папка выгружается на тот же сервер, но по иному адресу внутри корневой папки проекта;</li>
<li> папка выгружается на другой сервер.</li>
Чтобы выгрузить папку (точнее, содержащиеся в ней файлы) по прежнему адресу, необходимо:<br>
<li> 1. В дереве проекта (на вкладке Projects окна ресурсов) щелкнуть правой кнопкой на значке папки и в контекстном меню выбрать команду Deploy Files in Folder (Выгрузить файлы в папке); это приведет к двум последствиям: </li>
<li> будет открыто окно результатов и в нем появится сообщение Project opened (Проект открыт);</li>
<li> на экране появится диалоговое окно (Рисунок 7.20). содержащее список файлов, имеющихся в папке, и кнопку Deploy (Выгрузить).</li>
<li> 2. В диалоговом окне щелкнуть на кнопке Deploy.</li>
<li></li>
<br><br>
<h1>Выгрузка сайта на удаленный сервер</h1>Выгрузка сайта на удаленный сервер<br><br>
Развертывание, или выгрузка сайта (английский термин Deployment) — это процесс копирования файлов проекта на один или более Web-серверов. Вы можете указать путь развертывания либо для всего проекта, либо для отдельных папок и файлов.<br>
Основную роль в подготовке и выполнении этапа загрузки сайта на Web-сервер играет проект, созданный нами заблаговременно (см. раздел <a href="../Glava%202/Index3.htm">Создание и установка параметров проекта</a> главы Разработка структуры сайта). Однако при формировании проекта мы определили лишь некоторые параметры загрузки, указав способ размещения на Web-сервере отдельных папок. Вернемся еще раз к описанию проекта и внесем в него необходимые дополнения.
<a name="34"><h1> <img src="/8.gif"> Бизнес в интернете: Сайты - Софт - Языки - Дизайн</h1>
<ul>
<li><a href="/390-1/index.htm">Киберсантинг</a><br>
<li><a href="/391-1/index.htm">Киберсантинг как бизнес</a><br>
<li><a href="/392-1/index.htm">Виды Киберсантинга</a><br>
<li><a href="/691-1/index.htm">Создание игр</a><br>
<li><a href="/393-1/index.htm">Дизайн как бизнес</a><br>
<br>
<li><a href="/394-1/index.htm">Dreamweaver</a><br>
<li><a href="/395-1/index.htm">PHP</a><br>
<li><a href="/396-1/index.htm">Homesite</a><br>
<li><a href="/397-1/index.htm">Frontpage</a><br>
<li><a href="/398-1/index.htm">Studio MX</a><br>
<br>
<li><a href="/432-1/index.htm">Сайтостроительство</a><br>
<li><a href="/433-1/index.htm">Citrix MetaFrame</a><br>
<li><a href="/434-1/index.htm">Стили сайта</a><br>
<li><a href="/435-1/index.htm">ActiveX на сайте</a><br>
<li><a href="/436-1/index.htm">HTML как основа сайта</a><br>
<br>
<li><a href="/437-1/index.htm">Adobe GoLive</a><br>
<li><a href="/438-1/index.htm">Что такое WEB</a><br>
<li><a href="/439-1/index.htm">Мобильные WAP сайты</a><br>
<li><a href="/440-1/index.htm">3D графика на сайтах</a><br>
<li><a href="/442-1/index.htm">3DS MAX графические решения</a><br>
<br>
<li><a href="/443-1/index.htm">Графика в 3D Studio MAX и на сайте</a><br>
</ul>
<br>
<hr>
<center>
<!--LiveInternet counter--><a href="https://www.liveinternet.ru/click"
target="_blank"><img id="licnt5E16" width="88" height="31" style="border:0"
title="LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7"
alt=""/></a><script>(function(d,s){d.getElementById("licnt5E16").src=
"https://counter.yadro.ru/hit?t14.4;r"+escape(d.referrer)+
((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+
(s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+
";h"+escape(d.title.substring(0,150))+";"+Math.random()})
(document,screen)</script><!--/LiveInternet-->
</center>
<hr>
<br>
</div></div>
</body>
</html>
| |
