Иллюстрированный самоучитель по Macromedia HOMESITE

Автоматическая проверка корректности ссылок


Для проверки корректности ссылок в HomeSite предусмотрены два инструмента:
  • встроенная утилита Link Checker;

  • внешнее приложение Linkbot (версии 5.0 или выше) фирмы Tetranet Software, которое может быть загружено с ее узла и интегрируется с HomeSite после его установки.

    • Link Checker способен проверять корректность внешних ссылок, ссылок на локальные HTML-файлы, а также ссылок на связанные с ними графические и мультимедийные файлы. Не могут быть проверены ссылки на защищенные страницы (HTTPS), FTP-ссылки и почтовые ссылки (mailto). Кроме того, не анализируются ссылки на большие двоичные файлы (такие как EXE, PDF и ZIP), а также на некоторые мультимедийные файлы, поскольку разработчики HomeSite полагают, что подобные операции значительно замедлили бы процесс тестирования. Полный перечень типов файлов, для которых по умолчанию не выполняется проверка ссылок, указан в соответствующем разделе реестра Windows. Этот список содержится в параметре LinkVerifyExcludeExts приложения и может быть просмотрен с помощью редактора реестра (рис. 1.1).
    Автоматическая проверка корректности ссылок
    Рис. 1.1. Исходный список типов файлов, для которых HomeSite не тестирует ссылки
    По умолчанию проверяются все ссылки в выбранных файлах проекта, однако пользователь имеет возможность указать, какие ссылки пропустить.
    По результатам проверки Link Checker создает протокол, на основании которого пользователь может принять решение относительно последующих действий.

    Автоматическое сопровождение проекта


    HomeSite позволяет объединять ресурсы, подлежащие включению в состав сайта (HTML-файлы, изображения, мультимедийные файлы) в единый проект. При этом совершенно не имеет значения, где физически расположены файлы ресурсов: в одной папке или в разных, на жестком диске локального компьютера или на дисках нескольких компьютеров, объединенных в сеть. После создания проекта HomeSite автоматически отслеживает его состояние и при внесении пользователем изменений в проект регистрирует эти изменения.
    Автоматическое сопровождение проекта позволяет облегчить решение целого ряда задач. Например, HomeSite обеспечивает выгрузку файлов проекта на удаленный сервер с сохранением единой структуры проекта, что в дальнейшем позволяет достаточно просто переносить изменения, сделанные в локальной копии проекта, в удаленную копию. Кроме того, проект рассматривается как «единое информационное пространство» при выполнении операций поиска и/или замены фрагментов кода либо текстового содержимого страниц.

    Знакомство с HomeSite


  • Знакомство с HomeSite

  • Основные функциональные возможности HomeSite 5
  • Работа с редактором кода

  • Просмотр страниц с помощью броузера

  • Автоматическое сопровождение проекта

  • Средства автоматизации работы с тегами

  • Автоматическая проверка корректности ссылок

  • Выгрузка файлов проекта на удаленный сервер

  • Поддержка технологии каскадных таблиц стилей (CSS)

  • Поддержка технологий создания динамических и интерактивных страниц

  • Поддержка пользователя

  • Особенности инсталляции HomeSitе 5

  • Организация пользовательского интерфейса
  • Окно документа

  • Окно ресурсов

  • Окно результатов

  • Конфигурирование броузеров
  • Установка параметров внутреннего броузера

  • Конфигурирование внешних броузеров

  • Работа с файлами
  • Типы файлов, поддерживаемые HomeSite

  • Интерфейс листа Files окна ресурсов

  • Меню File

  • Настройка параметров работы с файлами

  • Управление кодировкой текстовых файлов




    • Интерфейс листа Files окна ресурсов


    Для тех типов файлов, которые поддерживаются HomeSite, большая часть операций может быть выполнена с помощью элементов интерфейса листа Files окна ресурсов. Фактически это окно обеспечивает выполнение тех же операций при работе с файлами, что и Windows Explorer и, кроме того, выполнение ряда специфических операций, связанных с редактированием Web-документов.
    Некоторые из этих операций (в частности, такие как открытие и сохранение файлов, создание резервной копии перед заменой текста в файлах) выполняются для текущей папки (каталога).
    Текущий каталог определяется HomeSite по следующим правилам:
  • по умолчанию текущим каталогом считается тот, в котором находится текущий (активный) документ, открытый в окне редактора кода;

  • при просмотре файла в диалоговом окне Редактора тегов (это относится в первую очередь к графическим файлам) текущим каталогом считается тот, в котором находится этот файл;

  • если видима только одна вкладка Files, текущим каталогом считается выбранный в видимой вкладке Files;

  • если обе вкладки Files видимы, или наоборот обе вкладки скрыты, то текущим считается каталог, выбранный на основной вкладке (то ость на вкладке Files 1).

    • Основные элементы вкладки Files показаны на рис. 1.27.
    Интерфейс листа Files окна ресурсов
    Рис. 1.27. Основные элементы вкладки Files
    Такими элементами являются:
  • список дисководов (Drive List);

  • список папок, хранящихся на выбранном дисководе;

  • список файлов, имеющихся в выбранной папке.

    • При работе с папками и файлами, представленными на вкладке Files, используются два механизма:
  • прямое манипулирование с помощью мыши;

  • контекстные меню.

    • Замечание

    Следует помнить, что команды, имеющиеся в меню File главного окна HomeSite, относятся к файлу (активному документу), открытому в окне документа, а не к файлу, выбранному в окне ресурсов.
    Работа со списком дисководов и со списком папок реализована в HomeSite практически так же, как в Windows Explorer (например, чтобы открыть папку, можно либо щелкнуть на се значке левой кнопкой мыши, либо щелкнуть на значке «+»). Контекстное меню, используемое для папок, -- это системное контекстное меню Windows, предназначенное для работы с объектами такого типа.
    Существенные особенности имеются при работе со списком файлов, представленном в нижнем подокне вкладки Files:
  • во-первых, состав команд контекстного меню отличается от системного;

  • во-вторых, для выполнения многих специфических операций с файлами поддерживается техника прямого манипулирования.

    • В состав контекстного меню входят следующие команды и каскадные меню (рис. 1.28):
    Интерфейс листа Files окна ресурсов
    Рис. 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><br> <li> Document Size — размер файла в килобайтах; данные выводятся для всех типов файлов;</li><br> <li> Modified Date/Time (Дата и время изменения) -- дата и время последнего изменения файла; данные выводятся для всех типов файлов;</li><br> <li> Document Type (Тип документа) - - тип файла, который HomeSite определяет по расширению файла на основе системного списка зарегистрированных типов файлов; данные выводятся для всех зарегистрированных типов файлов;</li><br> <li> Create Folder (Создать папку) -- создание новой папки, вложенной по отношению к текущей (открытой) папке; результат выполнения команды (значок новой папки) отображается в дереве каталогов вкладки Files.</li><br> <li> Favorite Folders (Избранные папки) - - каскадное меню, которое позволяет создавать и корректировать подмножество папок, отнесенных пользователем к числу «избранных»; оно содержит два варианта: <br> <li> Add Current Folder to Favorites (Добавить текущую папку в число избранных) - - при выборе данной команды текущая папка будет отнесена к числу избранных;</li><br> <li> Customize Favorites... (Организовать избранное) -- при выборе данной команды открывается дополнительное диалоговое окно, с помощью которого можно скорректировать список избранных папок;</li><br> <li> File (Файл) -- каскадное меню, которое содержит «стандартный» набор команд по управлению файлами (создать, копировать, переместить и т. д., см. рис. 1.28);</li><br> <li> Refresh (Обновить) - - обновление содержимого окна ресурсов; применение этой команды имеет смысл в том случае, если во время сеанса работы с HomeSite состав панок или файлов был изменен другими средствами (например, с помощью Windows Explorer);</li><br> <li> Select All (Выбрать все) - - выбор всех файлов в списке;</li><br> <li> Properties (Свойства) - - вызов стандартной (для Windows) панели свойств файла.</li><br> Контекстное меню списка файлов может быть открыто щелчком правой кнопки мыши либо на значке файла, либо в пустой позиции подокна. Во втором случае в меню будут недоступны команды Edit и Properties.<br> Для графических файлов контекстное меню содержит вместо команды Edit команду Insert as <img> (Вставить как тег <img>) и, кроме того, в него добавляется команда Preview Image (Просмотр рисунка), как показано на рис. 1.29.<br> <img src="image/29.gif" alt="Интерфейс листа Files окна ресурсов"><br> Рис. 1.29. Контекстное меню графического файла<br> Замечание<br><br> Хотя команда Insert as <img> присутствует в контекстном меню любого графического файла, но реально она может быть выполнена только для файлов, указанных в параметрах настройки HomeSite как «Web-изображения».<br> Выбор команды Preview Image приводит к открытию выбранного файла с помощью специальной утилиты быстрого просмотра, которая, помимо собственно изображения, позволяет также получить сведения, зачастую необходимые при подготовке Web-публикаций (рис. 1.30):<br> <img src="image/30.gif" alt="Интерфейс листа Files окна ресурсов"><br> Рис. 1.30. Формат утилиты быстрого просмотра изображений<br> <li> Format (Формат) — наименование формата файла с указанием используемого алгоритма сжатия (если таковой был использован при создании файла);</li><br> <li> Width (Ширина), Height (Высота) — «истинные» геометрические размеры изображения;</li><br> <li> Bits Per Pixel (Число бит на пиксел) - - глубина цвета изображения;</li><br> <li> Size on Disk (Размер на диске) - - размер файла в байтах при его записи на диск;</li><br> <li> Size in Мет (Размер в памяти) — размер файла в байтах при его загрузке в оперативную память.</li><br> <td><br> </tr> </table><br><br> <h1>Конфигурирование броузеров</h1> </h2><br> Основным недостатком любого текстового редактора, используемого для создания Web-документов, является то, что невозможно мгновенно получить визуальное представление редактируемого документа. Как правило, чтобы увидеть результаты внесенных в документ изменений, требуется выполнить как минимум два действия: сохранить документ на диске и затем открыть его в броузере. Кроме того, опытные Web-дизайнеры знают, что для объективной оценки качества страницы следует использовать для просмотра несколько различных броузеров (тех, которые гипотетически могут находиться в распоряжении потенциальных посетителей вашего сайта). Все это делает процесс разработки Web-документов в обычных текстовых редакторах весьма утомительным делом. Разработчики HomeSite постарались свести к минимуму объем рутинных операций, необходимых для просмотра документа:<br> <li> во-первых, просмотр результатов правки возможен без предварительного сохранения документа на диске;</li><br> <li> во-вторых, для перехода в режим просмотра достаточного щелкнуть кнопкой мыши на вкладке Browse окна документа;</li><br> <li> в-третьих, пользователь может заранее сформировать список броузеров, которые будут использоваться для просмотра документов, и затем переключаться между ними, практически оставаясь в среде HomeSite.</li><br> При работе с HomeSite пользователь имеет дело с тремя типами броузеров:<br> <li> внутренним (Internal); </li><br> <li> внешним (External); </li><br> <li> встроенным (Built-in).</li><br> Внутренний броузер — это броузер, динамически подключаемый к HomeSite и позволяющий просматривать Web-документы непосредственно в окне документа (на вкладке Browse); в качестве внутреннего броузера может быть назначен либо один из броузеров, установленных на компьютере пользователя, либо встроенный броузер HomeSite.<br> Встроенный броузер — это утилита, входящая в состав HomeSite; ее можно считать «ущербным» броузером, поскольку встроенный броузер не может быть использован вне окна документа; кроме того, визуальное представление Web-документа в этом броузере в большинстве случаев отличается от представления этого документа в «настоящих» броузерах; поэтому встроенный броузер может быть использован либо для грубой предварительной оценки результата, либо если по какой-либо причине на компьютере отсутствуют другие броузеры.<br> В качестве внешнего броузера может быть определен любой из установленных на компьютере броузеров; количество внешних броузеров, с которыми может быть интегрирован HomeSite, не ограничено. </td> </tr> </table><br><br> <h1>Конфигурирование внешних броузеров</h1> </h2><br> Разработчик сайта не в состоянии предугадать, броузер какого типа (а тем более - - какой версии) будут использовать потенциальные посетители при просмотре страниц. Поскольку каждый броузер отличается определенной самостоятсльностью в интерпретации содержимого страниц, то рекомендуется при разработке публикации выбирать некий компромиссный вариант. Поэтому при подключении к HomeSite внешних броузеров целесообразно придерживаться принципа «чем больше -- тем лучше».<br> Если установка HomeSite на компьютер производится после установки броузеров, то он пытается обнаружить их самостоятельно и в случае обнаружения назначает их своими внешними броузерами. В противном случае необходимо сформировать список внешних броузеров вручную. Для этого необходимо выполнить следующие действия:<br> <li> 1. В меню Options главного окна HomeSite выбрать команду Configure External Browsers... (Конфигурировать внешние броузеры).</li><br> <li> 2. В открывшемся диалоговом окне (рис. 1.21) скорректировать список<br><br> внешних броузеров или изменить параметры их использования.</li><br> <img src="image/21.gif" alt="Конфигурирование внешних броузеров"><br> Рис. 1.21. Диалоговое окно для изменения списка или параметров использования внешних броузеров<br> Чтобы добавить в список внешний броузер, необходимо:<br> <li> 1. Щелкнуть на кнопке Add (Добавить).</li><br> <li>2. В открывшемся диалоговом окне (рис. 1.22) ввести в поле Location (Расположение) путь к ЕХЕ-файлу броузера (для этого можно воспользоваться расположенной справа кнопкой); имя файла HomeSite использует в качестве имени броузера и автоматически помещает его в поле Name (Имя).</li><br> <li> 3. Если не требуется использовать для данного броузера механизм DDE (Dynamic Data Exchange — динамический обмен данными), снять флажок Use DDE (по умолчанию он установлен).</li><br> <li> 4. Щелкнуть на кнопке ОК.</li><br> <li>5. Если требуется внести в список еще один (или более) броузер, повторить шаги 1..4.</li><br> <li> 6. В окне External Browsers щелкнуть на кнопке ОК.</li><br> После выполнения описанной процедуры в список будут добавлены указанные пользователем броузеры, причем для наглядности вместе с пиктограммами (рис. 1.23).<br> <img src="image/22.gif" alt="Конфигурирование внешних броузеров"><br> Рис. 1.22. Диалоговое окно для установки параметров внешнего броузера<br> <img src="image/23.gif" alt="Конфигурирование внешних броузеров"><br> Рис. 1.23. Вид модифицированного списка внешних броузеров<br> Дополнительно для каждого из внешних броузеров можно указать параметры его запуска, а именно - - что делать с активным документом перед его открытием во внешнем броузере (предварительно броузер должен быть выбран в списке). Возможны три варианта, каждому из которых соответствует свой переключатель в группе When Launching External Browser (При запуске внешнею броузера):<br> <li> Prompt to save changes to the current document (Выдавать запрос на сохранение внесенных изменений) - - при запуске броузера на экран выводится диалоговое окно с просьбой подтвердить сохранение на диске внесенных в документ изменений;</li><br> <li> Automatically save changes to the current document (Автоматически сохранять изменения) - - при запуске броузера внесенные в документ изменения сохраняются па диске автоматически;</li><br> <li> Browse using a temporary copy (no need to save) (Просмотр временной копии, без сохранения) - - в броузер загружается временная копня активного документа (взятая из рабочей области HomeSite, а не из файла на диске).</li><br> Чтобы открыть активный документ во внешнем броузере, необходимо:<br> <li> 1. Щелкнуть на панели инструментов главного окна HomeSite на кнопке View External Browser List (Просмотр списка внешних броузеров).</li><br> <li> 2. В открывшемся меню выбрать требуемый броузер (рис. 1.24).</li><br> <img src="image/24.gif" alt="Конфигурирование внешних броузеров"><br> Рис. 1.24. Открытие документа во внешнем броузере<br> Замечание<br><br> Обратите внимание, что броузер, используемый в качестве внутреннего, может также использоваться и в качестве внешнего.<br> В раскрывающемся меню броузеры расположены в том же порядке, что и в окне External Browsers (см. рис. 1.23). Если требуется изменить порядок расположения пунктов меню, необходимо:<br> <li> 1. Открыть окно External Browsers (Options -> Configure External Browsers...).</li><br> <li> 2. В списке броузеров выбрать тот, который требуется переместить.</li><br> <li> 3. С помощью кнопок со стрелками, расположенных слева от окна списка, изменить расположение пунктов списка.</li><br> Замечание<br><br> Если для просмотра во внешнем броузере используется временная копия документа, следует соответствующим образом установить параметры броузера для работы в режиме offline.<br><td><br> </tr> </table><br><br> <h1>Меню File</h1> </h2><br> Команды, собранные в меню File, предназначены для работы с текстовыми файлами, открытыми в окне документа, а также для создания (и открытия) новых текстовых файлов.<br> Многие из команд этого меню вынесены на панели инструментов главного окна HomeSite.<br> Ниже приведено краткое описание тех команд меню File, которые являются специфическими именно для HomeSite:<br> <li> New... (Создать) — при выборе данной команды открывается диалоговое окно (рис. 1.31), которое обеспечивает доступ к шаблонам и мастерам, позволяющим создать тот или иной «типовой» документ; чтобы создать документ на основе шаблона, достаточно выбрать требуемый шаблон и щелкнуть на кнопке ОК; пользователь может разрабатывать собственные мастера и шаблоны, доступ к которым осуществляется также с помощью этого окна; особенности применения различных видов предустановленных мастеров и шаблонов будут рассмотрены в соответствующих разделах книги;</li><br> <li> New Document (Создать документ) - - создание нового документа на основе шаблона, используемого по умолчанию; новый документ автоматически открывается в окне документа в режиме Edit; как установить шаблон, используемый по умолчанию, см. следующий подраздел «Настройка параметров работы с файлами»;</a></li><br> <li> Multiple New Documents... (Размножить цовый документ) — при выборе данной команды открывается диалоговое окно (рис. 1.32), с помощью которого можно указать количество копий нового документа, создаваемого на основе шаблона, используемого по умолчанию; вес копии документа получают возрастающие порядковые номера и помещаются на отдельные листы в окне документа;</li><br> <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 для загружаемого файла создается отдельный лист в окне документа. Это позволяет после завершения загрузки работать с ним таким же образом, как с локальными файлами (редактировать, сохранять на диске и т. д.).<br> <li> Recent Files (Последние файлы) - - это каскадное меню, содержащее список последних файлов, которые были открыты в окне документа;</li><br> <li> Save as... (Сохранить как) --данная команда практически ничем не отличается от одноименной команды любого Windows приложения, за исключением того, что позволяет сохранить исходный текстовый файл в новой кодировке (подробнее об этом см. подраздел «Настройка параметров работы с файлами»);</li><br> <li> Save as Template... (Сохранить как шаблон) -- команда обеспечивает сохранение текущего документа в списке шаблонов;</li><br> <li> Insert File... (Вставить файл) - - вставка в редактируемый документ содержимого указанного файла; в качестве файла-источника может быть использован только файл, относящийся к Web-документам;</li><br> <li> Convert Text File... (Конвертировать текстовый файл) -- преобразование выбранного текстового файла в HTML-документ; в ходе такого преобразования в исходный текстовый файл добавляются парные теги <HTML>, <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/>, <TITLE> и <BODY>; кроме того, выполняется соответствующая замена специальных символов (например, символ конца строки заменяется тегом <BR>, а угловые скобки заменяются их колами).</li><br> <img src="image/31.gif" alt="Меню File"><br> Рис. 1.31. Диалоговое окно для выбора шаблонов и мастеров<br> <img src="image/32.gif" alt="Меню File"><br> Рис. 1.32. Диалоговое окно для размножения нового документа<br> <img src="image/33.gif" alt="Меню File"><br> Рис. 1.33. Представление в строке состояния информации о процессе закачки документа<br> <img src="image/34.gif" alt="Меню File"><br> Рис. 1.34. Диалоговое окно для установки параметров закачки файла из Сети<br><td><br> </tr> </table><br><br> <h1>Настройка параметров работы с файлами</h1> </h2><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><br> <li> Flag read-only files in the file list (Признак файла, доступного только для чтения, в списке файлов) — в окне документа на этикетке файла, доступного только для чтения, выводится красная метка (см. рис. 1.36);</li><br> <img src="image/35.gif" alt="Настройка параметров работы с файлами"><br> Рис. 1.35. Формат вкладки General<br> Замечание<br><br> Несколько забегая вперед, отметим, что подобная индикация используется в HomeSite и для других открытых файлов. Например, если в файл внесены изменения, и они не сохранены на диске, то имя такого файла выводится на этикетке синим цветом, а возле него появляется индикатор в виде крестика (см. рис. 1.36).<br> <li> Dynamically refresh local file list (Динамически обновлять локальный список файлов) — если во время текущего сеанса работы с HomeSite состав папок и/или файлов на текущем локальном дисководе был изменен какими-то другими средствами, то информация на вкладке Files будет обновлена автоматически (если данный флажок снят, то обновление выполняется с помощью команды Refresh из контекстного меню);</li><br> <li> Use standard file dialogs (Использовать стандартные диалоги) -- при выполнении операций с файлами (копировать, переместить и т. д.) должны использоваться стандартные диалоговые окна Windows (по умолчанию используются их аналоги, входящие в состав HomeSite);</li><br> <li> Display current folder in file dialogs (показывать текущую папку в диалоге) - - диалоговое окно, открываемое при выполнении операций над файлом, позиционируется относительно текущей папки (по умолчанию - - относительно папки, открытой при запуске HomeSite);</li><br> <li> Use short filenames for temporary files (Использовать короткие имена для временных файлов) - - для временных файлов разрешается использовать только имена в формате DOS: не более восьми символов для имени файла и не более трех - - для расширения;</li><br> <li> Prompt before opening unknown file types (Запрос при открытии файла неизвестного типа) - - при попытке открыть файл, не поддерживаемый HomeSite, на экран выводится окно с соответствующим предупреждением (см. рис. 1.25).</li><br> <img src="image/36.gif" alt="Настройка параметров работы с файлами"><br> Рис. 1.36. Визуальные признаки работы с различными файлами<br> Дополнительно с помощью имеющихся на вкладке раскрывающихся списков можно выбрать визуальный стиль этикеток окна ресурсов.<br> В категорию Startup включены следующие параметры (рис. 1.37):<br> <li> Restore last opened documents at startup (Восстанавливать при запуске последний открытый документ) -- при запуске HomeSite в окне документа будет открыт тот документ, с которым вы работали при завершении предыдущего сеанса;</li><br> <li> Restore last opened project at startup (Восстанавливать при запуске последний открытый проект) - - при запуске HomeSite в окне ресурсов (на листе Project) будет открыт тот проект, с которым вы работали при завершении предыдущего сеанса;</li><br> <li> Start with a blank document (override default template) (Начинать работу с пустого документа, вместо используемого по умолчанию шаблона) — при запуске HomeSite в окне документа будет открыт пустой бланк документа, невзирая на то, какой шаблон должен использоваться по умолчанию;</li><br> <img src="image/37.gif" alt="Настройка параметров работы с файлами"><br> Рис. 1.37. Формат вкладки Startup<br> Замечание<br><br> Флажок Restore last opened documents at startup вкладки Startup имеет (как это ни странно) более высокий приоритет, поэтому если установить оба первых флажка, то при запуске HomeSite в окне документа будет открыт тот документ, с которым вы работали при завершении предыдущего сеанса.<br> <li> Startup folder (Начальная папка) - - папка, которая будет назначена текущей при запуске HomeSite; значение этого параметра задастся посредством установки одного из трех переключателей: <br> <li> Skirl in the folder last opened in the Files lab (Папка, открытая последней на вкладке Files) - - в качестве текущей пайки будет использоваться папка, которая была таковой при завершении предыдущего сеанса работы с HomeSite;</li><br> <li>Start in ilic folder last opened in the file open dialog (Папка, открытая последней в диалоговом окне Open):</li><br> <li>Always start in the folder (Всегда наминать работу с папкой...) в качестве текущей всегда должна использоваться при запуске HomeSite папка, указанная в связанном с переключателем поле.</li><br> Из параметров, которые могут быть установлены в категории Location (рис. 1.38), рассмотрим только два, входящие в группу Default template (Шаблон, используемый по умолчанию):<br> <li> Use this file as a template when creating new documents (Использовать этот файл в качестве шаблона при создании нового документа) - - в качестве шаблона по умолчанию будет использоваться файл, указанный в расположенном ниже текстовом поле; для выбора файла может использоваться кнопка, находящаяся справа от поля;</li><br> <li> Always show the template dialog when creating new documents (Всегда при создании нового документа показывать диалоговое окно для выбора шаблона) - - при выборе в меню File команды New Document на окран будет выводится диалоговое окно со списком имеющихся шаблонов (см. рис. 1.31).</li><br> <img src="image/38.gif" alt="Настройка параметров работы с файлами"><br> Рис. 1.38. Формат вкладки Location<br> В категорию File Settings включены следующие параметры (рис. 1.39):<br> <li> Recognized file extension (Распознаваемые расширения файлов) -типы файлов (задаваемые расширениями файлов), которые должен поддерживать HomeSite; поддерживаемые типы HomeSite относит к категории Web-файлов (Web Files), которые разделяются на два вида: <br> <li>Web documents (Web-документы) — текстовые файлы; типы файлов, представленные в данном поле, могут быть открыты для редактирования в окне документа; если добавить в перечень какой-либо не текстовый тип (например, .схс), то файлы такого типа будут отображаться в списке файлов окна ресурсов как Web-документы, однако попытка открыть такой файл в окне документа приведет к непредсказуемым последствиям (например, к зависанию HomeSite);</li><br> <li>Web images (Web-изображения) — графические файлы; типы файлов, представленные в данном поле, могут быть открыты для просмотра с помощью средств, указанных в табл. 1.1; если добавить в перечень какой-либо тип графических файлов, не поддерживаемый HTML (например, .tif), то файлы такого типа будут отображаться в списке файлов окна ресурсов как Web-изображения, однако допустимый набор операций для них останется прежним (см. табл. 1.1);</li><br> <li> Default extension (Расширение по умолчанию) - - расширение, устанавливаемое по умолчанию для сохраняемого на диске нового документа; поскольку HomeSite при работе с текстовыми файлами учитывает в первую очередь расширение, то некорректная установка этого параметра может привести к неправильной интерпретации HomeSite содержимого файла; например, если HTML-документ сохранить с расширением .sql, то HomeSite попытается применить к нему цветовую схему подсветки, установленную для SQL-файлов;</li><br> <li> Include full path in save dialog (Включать полный путь в диалог сохранения) - - в поле File Name (Имя файла) в диалоговых окнах Save и Save as будет отображаться полный путь к сохраняемому файлу;</li><br> <li> Format when saving (Формат сохранения) — формат текстового файла, который следует использовать при его сохранении на диске; возможны три значения этого параметра, выбираемые посредством установки соответствующего переключателя (PC, Unix, Macintosh);</li><br> <li> If another process modifies the document (Если документ изменен другим процессом) - - вид реакции HomeSite на изменение открытого документа каким-либо другим приложением (например, редактором Dreamweaver); возможны три варианта, выбираемые посредством установки соответствующего переключателя: <br> <li>Prompt to reload (Обновлять по запросу) --в случае модификации документа на экран выводится окно с вопросом о необходимости перезагрузки документа;</li><br> <li>Always reload (Обновлять всегда) — измененный документ перезагружается автоматически;</li><br> <li> Never reload (Не обновлять) — измененный документ не перезагружается до тех пор, пока пользователь не сделает этого вручную;</li><br> <li> Enable non-ANSI file encoding (Разрешить нe-ANSI кодировку файлов) -включить режим работы с текстовыми файлами, в которых используется нe-ANSI кодировка.</li><br> <img src="image/39.gif" alt="Настройка параметров работы с файлами"><br> Рис. 1.39. Формат вкладки File Settings<br> В силу важности последнего параметра его смысл и влияние на работу с редактируемыми документами рассмотрен более подробно в следующем подразделе - -«Управление кодировкой текстовых файлов».</a><br> Еще один весьма важный аспект работы с файлами — это организация их резервного копирования. Многие не очень опытные пользователи персональных компьютеров (в том числе и начинающие Web-дизайнеры) уделяют вопросам резервного копирования недостаточное внимание. Такое пренебрежение собственной информационной безопасностью еще можно как-то оправдать, если вам приходится работать только с собственными наборами данных. Но представьте себе такую ситуацию. Вы провели в Сети несколько часов, с трудом отыскали интересующую вас информацию, потратили время и нервы па закачку найденных Web-документов на свой компьютер, и за несколько секунд до завершения закачки одного из этих файлов в HomeSite происходит разрыв связи с провайдером, отключение питания компьютера или... да мало ли что еще может случиться. Так вот, чтобы свести к минимуму отрицательные поcлeдствия подобных явлений, в HomeSite и реализована функция резервного копирования - - Auto-Backup. В отличие от многих других Windows-приложс-шш, в которых поддерживается лишь возможность автоматического сохранения временной копии файла на диске через заданный интервал времени, в HomeSite возможности функции Auto-Backup значительно шире. В частности, она позволяет:<br> <li> создавать резервную копию перед сохранением исходного файла;</li><br> <li> создавать резервную копию для всех открытых и редактируемых файлов через заданный интервал времени;</li><br> <li> создавать резервную копию файлов, изменяемых в результате выполнения операции поиска и замены;</li><br> <li> удалять резервные копии файлов через заданное количество дней;</li><br> <li> восстанавливать файлы, открытые на момент аварийного завершения работы HomeSite.</li><br> Параметры работы функции 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> <img src="image/40.gif" alt="Настройка параметров работы с файлами"><br> Рис. 1.40. Формат вкладки Auto-Backup диалогового окна Settings<br> <img src="image/41.gif" alt="Настройка параметров работы с файлами"><br> Рис. 1.41. Диалоговое окно со списком файлов, для которых было выполнено резервное копирование<br> <img src="image/42.gif" alt="Настройка параметров работы с файлами"><br> Рис. 1.42. Окно утилиты Auto-Backup File Maintenance.<br> Чтобы восстановить файл, необходимо:<br> <li> 1. Выбрать файл в списке.</li><br> <li>2. В меню File утилиты выбрать команду Open Selected Files for Edit (Открыть выбранные файлы для редактирования).</li><br> <td><br> </tr> </table><br><br> <h1>Окно документа</h1> </h2><br> Хотя окно документа может использоваться в трех различных режимах (Edit, Browse, Help), в первую очередь оно предназначено для работы с текстовым редактором. Поэтому, рассказывая об особенностях интерфейса этого окна, вольно или невольно придется знакомить читателя с особенностями реализации редактора кода. Поскольку описанию работы с редактором кода посвящена значительная часть материала поcледующих глав книги, то здесь мы ограничимся описанием лишь тех аспектов, которые не зависят от синтаксиса кода и относятся к визуальному представлению информации в окне документа.<br> Управление параметрами представления информации выполняется с помощью кнопок панели инструментов, расположенной вдоль левой вертикальной границы окна документа.<br> Эти кнопки достаточно условно можно разделить на несколько групп (рис. 1.5):<br> <li> кнопка разделения окна (Split Current Document); обеспечивает разделение окна документа по горизонтали на две части (на два подокна); такой режим целесообразно использовать при работе с большим документом, когда требуется иметь перед глазами одновременно два различных его фрагмента; размеры подокон можно изменять, перемещая горизонтальную полосу разделения (рис. 1.6);</li><br> <li> кнопки управления форматом; в эту группу входят четыре кнопки: <br> <li> Word-wrap (Перенос строки) — установка режима, при котором длинные строки форматируются по ширине окна документа;</li><br> <li> Show Gutter (Показывать служебное поле) — установка режима, при котором вдоль левой границы окна выводится поле, содержащее дополнительную (служебную) информацию: символы переноса строки, номера строк и т. д. (см. рис. 1.5);</li><br> <li> Show Line Numbers in Gutter (Показывать номера строк в служебном поле) — установка режима, при котором в служебном поле выводятся номера строк кода;</li><br> <li> Show Hidden Symbols (Показывать скрытые символы) — установка режима, при котором в тексте документа отображаются символы, которые по умолчанию скрыты (пробел, конец строки и т. д.);</li><br> <li> кнопка полноэкранного режима (Full Screen); обеспечивает увеличение размеров окна документа за счет того, что в главном окне HomeSite не отображаются панели инструментов и строка состояния;</li><br> <li>кнопки навигации по открытым документам; в эту группу входят пять кнопок: <br> <li>Show Open Document List (Показать список открытых документов) — щелчок на кнопке открывает список открытых документов (рис. 1.7); выбор документа в списке приводит к переходу на соответствующий лист в окне документа;</li><br> <li> First Document (Первый документ) — переход на первый по порядку открытый документ; кнопка недоступна, если активен первый документ;</li><br> <img src="image/5.gif" alt="Окно документа"><br> Рис. 1.5. Элементы управления окном документа<br> <img src="image/6.gif" alt="Окно документа"><br> Рис. 1.6. Разделение окна документа на два подокна<br> <img src="image/7.gif" alt="Окно документа"><br> Рис. 1.7. Представление списка открытых документов <br> <li> Previous Document (Предыдущий документ) — переход на предыдущий документ; кнопка недоступна, если активен первый документ;</li><br> <li> Next Document (Следующий документ) — переход на следующий документ; кнопка недоступна, если активен последний документ;</li><br> <li> Last Document (Последний документ) — переход на последний по порядку открытый документ; кнопка недоступна, если активен последний документ.</li><br> <td><br> </tr> </table><br><br> <h1>Окно ресурсов</h1> <table border=1><br> <tr> <td>Окно ресурсов<br> Окно ресурсов (Resource Window) позволяет весьма существенно повысить эффективность работы с HomeSite, поскольку обеспечивает быстрый доступ к различным информационным ресурсам. Каждому виду информационных ресурсов соответствует свой «лист» окна. Переход между «листами» производится с помощью этикеток ресурсов. Всего таких «листов» семь (см. рис. 1.4):<br> <li> File 1, File 2 — обеспечивают работу с деревом каталогов, имеющихся на компьютере пользователя либо на сетевом диске, доступном с данного компьютера (рис. 1.8); файл из открытой папки может быть загружен в окно документа посредством двойного щелчка левой кнопкой мыши; наличие двух однотипных листов объясняется тем, что это позволяет существенно повысить эффективность одновременной работы с несколькими источниками данных (например, с локальным жестким диском и с каким-либо сетевым ресурсом);</li><br> <li> Projects (Проекты) — обеспечивает просмотр и редактирование данных об информационных ресурсах сайта (рис. 1.9); перечень файлов, имеющихся в выбранной папке, отображается в нижней панели окна; чтобы поместить ссылку на любой из этих файлов в открытый документ, достаточно перетащить мышью значок файла в окно документа в требуемую позицию; помимо данных о ресурсах, на этом листе отображается список удаленных серверов, на которые предполагается производить выгрузку сайта, а также перечень сценариев развертывания сайта;</li><br> <li> Site view (Вид сайта) — визуальное представление навигационной схемы узла (рис. 1.10); состав отображаемой информации зависит от активного в данный момент документа (то есть видимого в окне документа); если открыта индексная (главная) страница сайта, то можно получить информацию о ссылках, имеющихся на страницах нижних уровней;</li><br> <img src="image/8.gif" alt="Окно ресурсов"><br> Рис. 1.8. Представление в окне ресурсов дерева каталогов пользователя <br> <img src="image/9.gif" alt="Окно ресурсов"> <br> Рис. 1.9. Представление на листе Projects информационных ресурсов сайта<br> <li> Tag Inspector (Инспектор тегов) — данный лист обеспечивает доступ к специальной утилите, входящей в состав HomeSite — так называемому инспектору тегов; он обеспечивает представление структуры документа в виде дерева тегов и быстрое редактирование атрибутов выбранного тега (рис. 1.11);</li><br> <li> Snippets (Фрагменты кода) — обеспечивает быструю вставку фрагментов HTML-кода страницы (или других текстовых фрагментов), предназначенных для многократного повторного использования (рис. 1.12); чтобы вставить фрагмент в документ, достаточно дважды щелкнуть левой кнопкой мыши на значке этого фрагмента в окне ресурсов.</li><br> <img src="image/10.gif" alt="Окно ресурсов"><br> Рис. 1.10. Представление на листе Site view навигационной схемы узла Inspector<br> <img src="image/11.gif" alt="Окно ресурсов"><br> Рис. 1.11. Интерфейс утилиты Tag<br> И, наконец, еще один вид отображаемой информации — содержание справочной системы HomeSite (рис. 1.13); каждый раздел справочника также может быть открыт двойным щелчком кнопкой мыши. Информация из выбранного раздела по умолчанию выводится в окне документа на вкладке Help. Однако существует возможность просмотра справочной информации в отдельной панели окна ресурсов.<br> Особенности работы с различными листами окна ресурсов будет рассмотрена более подробно при описании соответствующих этапов разработки узла.<br> Пользователь может скрыть или, наоборот, сделать видимым любой лист окна ресурсов. Для управления составом листов окна используется каскадное меню Resource Window, которое входит в состав меню View (рис. 1.14).<br> <img src="image/12.gif" alt="Окно ресурсов"><br> Рис. 1.12. Пример списка повторно используемых фрагментов кода <br> <img src="image/13.gif" alt="Окно ресурсов"><br> Рис. 1.13. Представление в окне ресурсов справочной информации<br> <img src="image/14.gif" alt="Окно ресурсов"><br> Рис. 1.14. Каскадное меню Resource Window<br> <td> </tr> </table><br><br> <h1>Окно результатов</h1> </h2><br> В отличие от рассмотренного выше окна ресурсов, окно результатов (Results Window) по умолчанию не отображается на экране. Оно может быть открыто в двух случаях:<br> <li> когда пользователь выбирает в меню View (Вид) команду Results (Результаты) или щелкает кнопку с тем же именем на панели инструментов;</li><br> <li>когда выполняется одна из операций, связанных с тестированием страницы (активного документа), чем, собственно, и объясняется название окна. </li><br> Окно результатов располагается в нижней части основного окна HomeSite (рис. 1.15).<br> <img src="image/15.gif" alt="Окно результатов"><br> Рис. 1.15. Окно результатов<br> С точки зрения пользовательского интерфейса окно реализовано в виде так называемой рабочей книги (Work book), состоящей из пяти «листов». Подобно окну ресурсов, окно результатов является многофункциональным, поскольку каждый из листов связан с определенной операцией:<br> <li> Search (Поиск) — на этом листе отображаются результаты поиска и/или замены заданного фрагмента текста; поиск производится по всем файлам проекта;</li><br> <li> Validation (Проверка корректности) — лист результатов проверки синтаксиса кода страницы;</li><br> <li> Links (Ссылки) — лист результатов тестирования гиперссылок, имеющихся на странице;</li><br> <li> Thumbnails (Миниатюры) — на этом листе отображаются миниатюры изображений, хранящихся в текущей папке;</li><br> <li> Deployment (Развертывание) — лист результатов загрузки проекта на удаленный Web-ссрвер.</li><br> Примеры представления соответствующих данных на различных листах окна результатов показаны на рис. 1.16.<br> <img src="image/16.gif" alt="Окно результатов"><br> Рис. 1.16. Примеры представления данных на различных листах окна результатов<br> Переключение между листами окна результатов производится с помощью этикеток листов.<br> Каждый лист окна результатов связан с текущим редактируемым документом. Это означает, что в нем отображается информация, относящаяся к тому документу, который был открыт в окне редактирования в момент запуска команды тестирования. При выполнении той же команды для другого документа содержимое соответствующего листа окна результатов обновляется (то есть предыдущая информация с этого листа будет потеряна). Разные листы окна результатов могут быть связаны с разными документами. При переключении между листами представленная на них информация сохраняется. Она сохраняется также и в том случае, если окно результатов будет закрыто (то есть открыв его снова, вы увидите тс же результаты).<br> Команды инициализации различных видов тестирования страницы собраны в меню Tools (Инструменты), а также представлены на панели инструментов главного окна HomeSite. </td> </tr> </table><br><br> <h1>Организация пользовательского интерфейса</h1> </h2><br> Необходимо подчеркнуть, что хотя HomeSite 5 вышел под торговой маркой компании Macromedia, его интерфейс не претерпел существенных изменений по сравнению с предыдущей версией.<br> Главное окно HomeSite предоставляет пользователю, по сути, стандартный Windows-интерфейс, что значительно упрощает знакомство с инструментом. На первый взгляд может показаться, что окно несколько перегружено элементами управления, но это действительно только на первый взгляд. Кроме того, у пользователя имеется возможность на каждом этапе создания узла оставлять на экране только необходимые в данный момент элементы управления (подробнее об этом будет сказано при их описании).<br> Итак, в начале первого сеанса работы с HomeSite вы можете видеть следующие основные элементы интерфейса (рис. 1.4):<br> <img src="image/4.gif" alt="Организация пользовательского интерфейса"><br> Рис. 1.4. Основные элементы пользовательского интерфейса HomeSite<br> <li> панели инструментов (Toolbars); на них вынесены наиболее часто применяемые команды из всех разделов меню; каждая кнопка имеет всплывающую подсказку, поясняющую ее назначение; любая из панелей инструментов может быть закрыта либо открыта с помощью соответствующей команды из меню View (Вид);</li><br> <li> окно ресурсов (Resource Window); название окна является достаточно условным, поскольку в нем может быть представлена самая разнообразная информация, например, файловая структура проекта, перечень разделов справочной системы, результаты поиска и т. д.; при этом каждый вид данных отображается на отдельном «листе», переключение между которыми производится с помощью этикеток ресурсов (Resource Tabs), расположенных в нижней части окна; окно может быть закрыто с помощью небольшой кнопочки с крестиком в правом верхнем углу;</li><br> <li> окно документа (Document Window); в этой позиции экрана может быть представлено либо окно редактора кода (Code Editor), либо окно броузера страниц (Page Browser), либо окно справочника (Help); переключение между окнами выполняется с помощью соответствующих этикеток, расположенных сверху; в режиме текстового редактирования окно содержит текст документа; для редактора кода предусмотрена собственная панель инструментов, которая находится слева от окна; для просмотра документа в виде Web-страницы (в режиме Browse) используется броузер, указанный в параметрах настройки HomeSite; при работе в этом режиме также используется собственная панель инструментов (на рисунке не показана); третий режим — Help — предоставляет возможность просмотра содержимого выбранного раздела справочника;</li><br> <li> этикетка документа (Document Tab); на ней выводится имя файла открытого документа; когда в окне документа открыто несколько документов (число одновременно редактируемых документов не ограничено), с помощью этикеток можно быстро переключаться между ними;</li><br> <li> панель быстрой вставки (Quick Bar); она содержит кнопки, соответствующие основным тегам языка HTML и элементам некоторых других языков, поддерживаемых HomeSite; в зависимости от типа связанного с кнопкой тега щелчок на ней приводит либо к вставке тега в текст документа, либо к открытию соответствующего диалогового окна редактора тегов (Tag Editor), с помощью которого производятся установки требуемых параметров; для удобства работы кнопки панели сгруппированы по предназначению, переключение между группами выполняется с помощью этикеток групп; при желании панель быстрой вставки можно закрыть, щелкнув на кнопке QuickBar основной панели инструментов;</li><br> <li>строка состояния (Stains Bar), в которой выводится дополнительная информация о выполняемых операциях. </li><br> Как и в других Windows-приложениях, перечень доступных элементов управления (в частности, кнопок панелей инструментов) определяется текущим состоянием редактора и свойствами того объекта, который в настоящий момент активен. Например, вкладка Help появляется на экране только после первого обращения к справочнику.<br> <td><br> </tr> </table><br><br> <h1>К основным функциональным возможностям HomeSite </h1> </h2><br><br> К основным функциональным возможностям HomeSite 5 можно отнести следующие:<br><br> <li> непосредственное редактирование HTML-кода Web-страницы;</li><br><br> <li> поддержка синтаксиса нескольких языков разметки, а также языков сценариев;</li><br><br> <li> быстрый просмотр страниц во всех броузерах, установленных на компьютере пользователя;</li><br><br> <li> централизованное хранение и автоматическое обновление информации о проекте;</li><br><br> <li> навигация по страницам сайта, а также просмотр и навигация по иерархии тегов внутри страницы;</li><br><br> <li>автоматическая проверка корректности ссылок в пределах создаваемого сайта;</li><br><br> <li> поиск требуемых фрагментов текста по всем страницам узла;</li><br><br> <li> проверка корректности кода страницы, а также контроль правописания текстового содержимого страниц;</li><br><br> <li> быстрый предварительный просмотр изображений, подлежащих включению в страницу, с указанием их основных характеристик;</li><br><br> <li> выгрузка файлов проекта на удаленный сервер;</li><br><br> <li> поддержка технологий создания динамических и интерактивных страниц;</li><br><br> <li> поддержка технологии стилевого оформления страниц узла на основе каскадных таблиц стилей (CSS);</li><br><br> <li> автоматический контроль целостности проекта, размещенного как на локальном компьютере, так и на удаленном сервере;</li><br><br> <li> оценка длительности загрузки страниц;</li><br><br> <li>оперативная поддержка действий пользователя, наличие развитой справочной системы;</li><br><br> <li> предоставление пользователю широких полномочий по настройке параметров рабочей среды;</li><br><br> <li> создание макросов и новых элементов пользовательского интерфейса средствами встроенного языка программирования;</li><br><br> <li> интеграция с визуальным редактором Web-страниц Macromedia Dreamweaver либо с пакетом UltraDev (инструмент визуального проектирования баз данных для Web).</li><br><br> Наиболее важные из перечисленных возможностей рассмотрены ниже несколько подробнее. По замыслу автора, это должно помочь читателю выбрать для себя ту отправную точку, с которой он хотел бы начать более близкое знакомство с HomeSite 5. </td> </tr> </table><br> <h1>В целом процесс установки HomeSite </h1> </h2><br><br> В целом процесс установки HomeSite 5 на компьютер пользователя выполняется таким же образом, как и установка большинства других Windows-приложений. В частности, для установки HomeSite 5 используется весьма распространенный мастер установки InstallShield производства компании InstallShield Software Coqioration. При установке следует иметь в виду:<br><br> <li> предусмотрены минимальные системные требования, необходимые для нормального функционирования продукта;</li><br><br> <li> если на компьютере установлена одна из предыдущих версий HomeSite (4.5 или 4.52), то возможно ее частичное автоматическое обновление (upgrade);</li><br><br> <li> в случае установки оценочной (Evaluation или Trial) версии продукта период его использования ограничен 30 днями; любое изменение показаний системного таймера в течение этого периода приводит к досрочному завершению периода пользования;</li><br><br> <li> в процессе инсталляции в папке Windows создается файл HomeSite5.log, в который заносятся сведения о ходе инсталляции; в случае возникновения проблем при инсталляции вы можете отослать этот файл в центр технической поддержки компании Macromedia (адрес электронной почты customerscrvice@macroincdia.com, URL HTTP://WWW.MACROMEDIA.COM/SUPPORT/EMAIL/CSCONTACT).</li><br><br> К аппаратному и программному обеспечению компьютера, на который производится установка HomeSite 5, предъявляются следующие требования:<br><br> <li> Pentium-совместимый процессор (рекомендуется Pentium II или выше); </li><br><br> <li> 64, но лучше 128 Мб оперативной памяти (RAM);</li><br><br> <li> видеосистема должна поддерживать не менее 256 цветов и разрешение 800x600;</li><br><br> <li> 35 Мб свободного пространства на жестком диске; </li><br><br> <li> операционная система Windows 98, ME, NT 4, 2000, ХР; </li><br><br> <li> броузер Internet Explorer 4.5 или выше.</li><br><br> Предыдущая версия HomeSite и HomeSite 5 вполне уживаются на одном компьютере. Тем не менее при желании вы можете выполнить обновление предыдущей версии. Поэтому не следует перед установкой HomeSite 5 удалять имеющуюся более раннюю версию. После того как инсталляция HomeSite 5 будет успешно завершена, при первом его запуске активизируется так называемый Мастер обновления конфигурации — Initial Configuration Wizard (ICW). На первом шаге пользователю предлагается выбрать, хочет ли он выполнить обновление предыдущей версии (рис. 1.2, вверху). Если такое желание есть, то с помощью последующих диалоговых окон пользователь может выбрать те настройки предыдущей версии, которые он хотел бы сохранить (рис. 1.2, внизу).<br><br> <img src="image/2.gif" alt="В целом процесс установки HomeSite "><br><br> Рис. 1.2. Диалоговые окна Мастера обновления конфигурации<br><br> Если вы используете оценочную версию HomtSite 5, то при каждом запуске программы на экране появляется окно, в котором отображается информация об оставшемся количестве дней ее легального использования (рис. 1.3). Чтобы перейти в режим работы с приложением, следует щелкнуть по кнопке Try (Испытать).<br><br> <img src="image/3.gif" alt="В целом процесс установки HomeSite "><br><br> Рис. 1.3. Диалоговое окно, используемое при запуске оценочной версии HomeSite 5<br><br> </td> </tr> </table><br> <h1>Поддержка пользователя</h1> </h2><br> Диапазон средств поддержки пользователя, предоставляемых HomeSite, чрезвычайно широк. К ним относятся как достаточно привычные для всех Windows-приложений (стандартные элементы интерфейса, всплывающие подсказки, возможности по настройке визуальных параметров рабочей среды), так и специфические, характерные именно для HomeSite. В первую очередь следует отметить наличие развитой справочной системы, которая содержит не только сведения по самому редактору, но также полную спецификацию языка HTML 4.01, руководство по применению каскадных таблиц стилей, введение в технологию ColdFusion, а также рекомендации по проектированию и разработке Web-сайтов.<br> Многие средства оперативной помощи пользователю включены непосредственно в состав редактора. К ним относятся, в частности, уже упоминавшиеся выше инструменты по работе с тегами и средства настройки параметров работы редактора.<br> Кроме того, в состав HomeSite входит собственный встроенный язык программирования VTML (Visual Tools Markup Language — язык разметки для создания инструментов визуального проектирования), который по своим возможностям близок к языку программирования VBA (Visual Basic Applications). С помощью VTML пользователь может создавать собственные дополнительные инструменты для работы с кодом Web-страниц, в том числе собственные Мастера, другие индивидуальные элементы интерфейса.<br> <td><br> </tr> </table><br><br> <h1>Поддержка технологии каскадных таблиц стилей (CSS)</h1> </h2><br> Одним из важнейших достоинств HomeSite является то, что в нем реализован весьма удобный и эффективный механизм работы с каскадными таблицами стилей. Этот механизм базируется на использовании самостоятельного приложения, которое называется TopStyle Lite (производитель — фирма Bradbure Software, LLC). Оно инсталлируется вместе с HomeSite при согласии пользователя. Вызов этого приложения выполняется непосредственно из текстового редактора и благодаря этому стилевое оформление страниц сайта может рассматриваться как составная часть единого процесса редактирования кода страниц.<br> Поскольку в TopStyle Lite предусмотрена поддержка всех существующих на сегодняшний день спецификаций языка CSS и наиболее распространенных броузеров, созданное в HomeSite стилевое оформление узла с высокой вероятностью будет корректно воспроизведено броузерами потенциальных посетителей вашего сайта.<br> <td><br> </tr> </table><br><br> <h1>Поддержка технологий создания динамических и интерактивных страниц</h1> </h2><br> HomeSite обеспечивает поддержку языков и технологий, позволяющих создавать динамические и интерактивные страницы, которые могут генерироваться как на стороне клиента, так и с помощью сценариев, выполняемых на сервере.<br> Поскольку предыдущие версии HomeSite были созданы компанией Allaire, то значительная часть входящих в его состав инструментов ориентирована на технологию ColdFusion. Эта технология предназначена для создания Web-приложений, выполняемых на стороне сервера, и базируется на применении одноименного языка разметки — ColdFusion Markup Language (CFML).<br> Тем не менее в HomeSite реализована возможность применения и других современных технологий, начиная от включения в страницу форм, и заканчивая созданием Java-сервлетов.<br> <td><br> </tr> </table><br><br> <h1>Просмотр страниц с помощью броузера</h1> </h2><br> HomeSite обеспечивает возможность просмотра редактируемой страницы во всех броузерах, установленных на компьютере пользователя. Один из них может быть назначен основным (точнее, внутренним — Internal). Для такого броузера переход в режим просмотра выполняется одним щелчком мыши. При необходимости для просмотра страниц может быть использован встроенный (собственный) броузер HomeSite. Кроме того, в HomeSite предусмотрена возможность совмещения текстового и визуального режимов (то есть когда окно документа разделяется на два подокна, в одном из которых отображается код страницы, а в другом — ее визуальное представление). Это позволяет непосредственно наблюдать результат вносимых в документ изменений.<br> В некоторых случаях редактируемую страницу можно открыть и в окне редактора Dreamweaver. Это позволит не только получить представление о внешнем виде страницы, но и оперативно внести в нее необходимые изменения. </td> </tr> </table><br><br> <h1>Работа с файлами</h1> </h2><br> В зависимости от типа файла и типа выполняемой операции HomeSite предоставляет пользователю различные средства для работы с ним: на основе команд и/или на основе прямого манипулирования (drag-and-drop -- «перетащи и оставь»). Например, чтобы сохранить на диске редактируемый текстовый файл, следует выбрать в меню File команду Save, а чтобы создать ссылку на графический файл, можно перетащить мышью его значок из окна ресурсов в окно документа. Большая часть операций прямого манипулирования файлами выполняется с помощью листов File1 и File2 окна ресурсов.<br> <td><br> </tr> </table><br><br> <h1>Работа с редактором кода</h1> </h2><br> Непосредственное редактирование кода Web-страницы позволяет получать результат, оптимальный в смысле размера и качества публикации. Встроенный редактор кода HomeSite поддерживает все «стандартные» операции по работе с текстом (он позволяет вырезать, вставить, поместить в буфер обмена фрагменты кода страницы, сохранить их для повторного использования и т. д.); кроме того, предусмотрена возможность цветового выделения различных синтаксических конструкций языка и автоматическое форматирование кода страницы, что существенно повышает его читабельность. Пользователю предоставлены большие права по настройке параметров работы редактора кода. В частности, он может:<br> <li> выбрать язык разметки, на котором будет выполняться разработка страницы;</li><br> <li> выбрать собственную цветовую схему подсветки синтаксических конструкций;</li><br> <li> разрешить или запретить автоматический ввод парных закрывающих тегов;</li><br> <li> разрешить или запретить автоматический ввод атрибутов тегов.</li><br> Редактор кода поддерживает работу практически со всеми основными языками Web-программирования. Такая возможность обусловлена тем, что в HomeSite хранятся определения тегов для каждого из этих языков.<br> Замечание<br><br> Напомним, что подмножество тегов, разрешенных к использованию в конкретном документе, определяется специальной нотацией, которая называется описанием типа документа — Document Type Definition (DTD) и указывается в идентификаторе документа. DTD содержит, в частности, перечень названий (имен) всех тегов, отношения подчиненности между ними, тип содержания, для которых они применимы, а также перечень допустимых атрибутов.<br> Итак, редактор кода HomeSite 5 обеспечивает поддержку на уровне DTD для следующих языков:<br> <li> HTML (Hypertext Markup Language);</li><br> <li> XHTML (Extensible Hypertext Markup Language);</li><br> <li> CFML (ColdFusion Markup Language);</li><br> <li> VTML (Visual Tools Markup Language);</li><br> <li> Java;</li><br> <li> JSP (JavaServer Pages);</li><br> <li> Jrun;</li><br> <li> WML (Wireless Markup Language);</li><br> <li> HDML (Handheld Device Markup Language);</li><br> <li> SMIL (Synchronized Multimedia Integration Language);</li><br> <li> IMFL (Interactive Fiction or Framework Markup Language);</li><br> <li> RTML (Real-time Markup Language).</li><br> На уровне инструментальных средств программирования, выбора схем цветной маркировки и проверки корректности кода 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 типах файлов см. раздел «Работа с файлами» этой главы).<br> <td><br> </tr> </table><br><br> <h1>Средства автоматизации работы с тегами</h1> </h2><br> В процессе редактирования кода страницы пользователь имеет возможность использовать совместно с редактором кода также дополнительные инструменты, учитывающие структуру документа на уровне тегов. Таких инструментов пять:<br> <li>Tag Editor (Редактор тегов) — это набор диалоговых окон, каждое из которых предназначено для установки значений атрибутов конкретного тега;</li><br> <li> Tag Tree (Дерево тегов) — панель, в которой иерархическая структура документа отображается в виде дерева тегов; основное предназначение дерева тегов — быстрая навигация по коду документа;</li><br> <li> Tag Inspector (Инспектор тегов) — панель, в которой содержится полный список тегов и их атрибутов, соответствующий указанному в документе типу DTD; Tag Inspector позволяет быстро отредактировать значение конкретного атрибута выбранного тега;</li><br> <li> CodeSweeper (Чистильщик кода) — специальная утилита, предназначенная для синтаксически зависимого форматирования кода документа; в составе HomeSite имеется шесть вариантов чистильщика, настроенных на работу с конкретным языком, и кроме того, «пользовательский» вариант, который соответствует варианту, используемому по умолчанию; параметры всех вариантов чистильщика могут настраиваться пользователем;</li><br> <li> Tag Insight (Предсказатель тегов) — специальная утилита, реализованная в виде всплывающего списка, с помощью которого реализуется опережающий ввод наименований тегов и их атрибутов при ручном редактировании кода страницы.</li><br> Все пять перечисленных инструментов являются синтаксически зависимыми в том смысле, что состав отображаемых в них тегов и атрибутов зависит от используемого в данный момент языка разметки.<br> <td><br> </tr> </table><br><br> <h1>Типы файлов, поддерживаемые HomeSite</h1> </h2><br> В предыдущем разделе было отмечено, что возможности HomeSite выходят за рамки «обычного» текстового редактора. Поскольку современную Web-пуб-ликацию сложно представить себе без графики (а также других мультимедийных элементов), без поддержки интерактивности и других современных Web-технологий, то в HomeSite предусмотрена возможность работы с данными, представленными в различных форматах. Перечень форматов файлов, которые способен узнавать HomeSite, приведен в табл. 1.1.<br> Табл. 1.1. Форматы файлов, поддерживаемые HomeSite<br> <table border=1><br> <tr> <td>Форматы файлов<td> <td>Допустимые операции<td> </tr> <tr> <td>Текстовые файлы<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>Графические файлы<td> </tr> <tr> <td>Форматы изображений, используемые и Web- документах (.gif .jpg, jpeg, .png. .bmp)<td> <td>Просмотр с помощью утилиты быстрою просмотра, а также в окне результатов и в окне редактора тегов; генерация тега <IМС> в редактируемом документе<td> </tr> <tr> <td>Форматы изображений, не используемые в Web-документах<td> <td>Открытие с помощью утилиты быстрого просмотра или ассоциированною приложения<td> </tr> </table>< <br> Помимо перечисленных в таблице 1. 1 форматов, HomeSite способен открыть в окне редактора двоичный файл (например, .exe, .dll), предварительно предупредив пользователя о том, что данный формат не входит в число поддерживаемых HomeSite. При этом пользователю предлагается три варианта действий, каждому из которых соответствует своя кнопка в окне сообщения (рис. 1.25):<br><br> <img src="image/25.gif" alt="Типы файлов, поддерживаемые HomeSite"><br><br> Рис. 1.25. Окно с сообщением о том, что данный формат не поддерживается HomeSite<br><br> <li> Open in Associated Program (Открыть с помощью связанного приложения) -- файл будет открыт с помощью приложения, связанного (ассоциированного) с данным типом файлов" (если таковое имеется);</li><br><br> <li> Open it (Открыть) -- HomeSite попытается открыть файл своими силами;</li><br><br> <li> Skip it (Пропустить) -- операция открытия выполняться не будет.</li><br><br> Если пользователь выберет второй вариант (Open it), то HomeSite попытается определить используемый способ кодирования и открыть файл. Если при этом возможны различные варианты обработки кода, то HomeSite может вывести на экран дополнительное окно, чтобы получить от пользователя необходимую информацию (рис. 1.26).<br><br> <img src="image/26.gif" alt="Типы файлов, поддерживаемые HomeSite"><br><br> Рис. 1.26. Возможный результат анализа HomeSite содержимого двоичного файла<br><br> После этого двоичный файл будет успешно (скорее всего) открыт в окне документа в режиме Edit.<br><br> Таким образом, в тех случаях, когда у вас возникнет необходимость заглянуть внутрь двоичного файла, вы вполне можете использовать для этого HomeSite, не прибегая к услугам других приложений (например, Norton Commander).<br><br> </td> </tr> </table><br> <h1>Управление кодировкой текстовых файлов</h1> </h2><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><br> <li> Windows-1251 - - содержит символы кириллицы и применяется в вычислительных системах, работающих под управлением операционных систем семейства Windows.</li><br> Коды 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><br> <li> тег <МЕТА> с атрибутом HTTP-EQUIV, содержащийся в заголовке документа;</li><br> <li> использование атрибута CHARSET в теге <А> для элементов документа, ссылающегося на внешний ресурс.</li><br> Замечание<br><br> Если ни один из этих механизмов не используется, то броузер по умолчанию пытается интерпретировать кодировку документа как ISO-8859-1.<br> Кроме этих трех средств, большинство современных броузеров предоставляют пользователю возможность вручную выбрать метод декодирования документа. Ну а самые продвинутые из них пытаются определить кодировку документа с помощью различных эвристических алгоритмов. После столь продолжительного отступления вернемся к HomeSite.<br> Как было сказано в предыдущем подразделе, по умолчанию HomeSite использует для кодирования создаваемых с его помощью документов кодировку ANSI, а именно код ISO-8859-1. Этот же код он использует и для декодирования открываемых документов. Тем не менее, в окне Settings на вкладке File Settings пользователь может разрешить использование не-ANSI кодов, установив соответствующий флажок (см. рис. 1.39). В этом случае при открытии любого документа HomeSite будет пытаться определить используемую в нем кодировку. Для больших документов или при открытии нескольких файлов это может привести к замедлению работы, о чем и предупреждает HomeSite (рис. 1.43).<br> Дополнительно пользователь может указать, что используемый код должен отображаться на этикетке открытого документа (рис. 1.44).<br> <img src="image/43.gif" alt="Управление кодировкой текстовых файлов"><br> Рис. 1.43. Предупреждение о возможном замедлении работы HomeSite при разрешении использования не-ANSI кодов<br> Разрешение использовать не-ANSI коды приводит также к ряду других последствий.<br> В частности, пользователь может изменить текущую кодировку документа при его сохранении на диске. Поэтому в диалоговом окне Save as становится доступен раскрывающийся список Encoding (Кодировка), который содержит четыре варианта (рис. 1.45):<br> <li> ANSI;</li><br> <li> Unicode;</li><br> <li> Unicode Big Endian;</li><br> <li> UTF-8.</li><br> <img src="image/44.gif" alt="Управление кодировкой текстовых файлов"><br> Рис. 1.44. Представление используемой кодировки на этикетке документа<br> <img src="image/45.gif" alt="Управление кодировкой текстовых файлов"><br> Рис. 1.45. Формат диалогового окна Save as при использовании не-ANSI кодов<br> Расположенный справа от списка флажок Check the document character set Проверять набор символов документа) позволяет указать, должен ли HomeSite при сохранении файла с не-ANSI кодировкой выполнять проверку соответствия гго истинной кодировки (указанной в теге <МЕТА> документа) той, которая выбрана в списке. Если такая проверка выполняется, и было выявлено несоответствие, на экран выводится предупреждающее сообщение (рис. 1.46). В этом случае возможны два корректных выхода из ситуации:<br> <li> отказаться от сохранения с данной кодировкой;</li><br> <li> после завершения операции сохранения скорректировать значение атрибута HTTP-EQUIV тега <МЕТА>.</li><br> Замечание<br><br> Аналогичная проверка выполняется также для XML-документов Некоторые параметры работы HomeSite, связанные с кодировкой документов, присутствуют еще на одной вкладке окна Settings, которая относится непосредственно к редактору кода и называется Editor (Редактор). Таких параметров два: используемый шрифт и применяемый набор символов. Установка обоих параметров выполняется с помощью соответствующих раскрывающихся списков — Font (Шрифт) и Charset (Набор символов), рис. 1.47.<br> <img src="image/46.gif" alt="Управление кодировкой текстовых файлов"><br> Рис. 1.46. Сообщение, предупреждающее о несоответствии кодировки документа его атрибутам<br> <img src="image/47.gif" alt="Управление кодировкой текстовых файлов"><br> Рис. 1.47. Изменение набора символов документа<br> В некоторых случаях (прежде всего - - при конвертировании «обычных» текстовых файлов в HTML-документы) могут возникнуть проблемы с преобразованием кириллических символов. Объясняется это тем, что при выполнении конвертирования HomeSite всегда использует кодовую таблицу ISO-8S59-1. В результате такого преобразования отдельные буквы («д», «ц», «ь») представляются в документе своими именами, причем с западно европейским «акцентом». Например букве «д» соответствует немецкая буква «а умлаут» (то есть «а» с двумя точками наверху). Имена символов начинаются знаком амперсанда и заканчиваются точкой с запятой. В частности, имя символа «а умлаут» выглядит так: ä. Пример конвертированной страницы с именами символов вместо их изображений показан на рис. 1.48.<br> При переключении в окно просмотра имена символов заменяются изображениями символов, однако если используется «не та» кодовая таблица, то текст все равно окажетад трудно читаем.<br> Указанные проблемы позволяет преодолеть специальная функция, которая имеется в составе HomeSite. Она называется Replace Extended Characters (Замена развернутых символов).<br> <img src="image/48.gif" alt="Управление кодировкой текстовых файлов"><br> Рис. 1.48. Пример страницы с именами символов<br> Замечание<br><br> Не следует путать функцию Replace Extended Characters с функцией Extended Replace, которая входит также в меню Search, но предназначена для выполнения операции замены текстовых фрагментов (она будет описана в разделе Поиск и замена в файлах проекта главы Разработка структуры сайта.</a><br> Функция Replace Extended Characters обеспечивает замену имен символов визуальным представлением этих символов, причем на основе системной кодовой таблицы.<br> Чтобы выполнить требуемое преобразование, необходимо:<br> <li> В меню Search (Поиск) выбрать команду Replace Extended Characters...</li><br> <li> В открывшемся диалоговом окне (рис. 1.49) установить второй переключатель -- Replace character entities with extended characters (Заменить символы развернутыми символами) и щелкнуть на кнопке ОК.</li><br> <img src="image/49.gif" alt="Управление кодировкой текстовых файлов"><br> Рис. 1.49. Диалоговое окно функции Replace Extended Characters</td> </tr> </table><br><br> <h1>Установка параметров внутреннего броузера</h1> </h2><br> Прежде всего необходимо уточнить, что в качестве внутреннего броузера может быть использован далеко не любой из броузеров, имеющихся на вашем компьютере. Эта почетная роль предусмотрена для MS Internet Explorer (в дальнейшем просто IE) версии 3.01 или выше, либо для Netscape Communicator (в дальнейшем просто NC) версии 6 или выше (но только при условии, что дополнительно установлена компонента NGLayout/Gecko).<br> Чтобы назначить внутренний броузер, необходимо:<br> <li> 1. В меню Options (Параметры) главного окна HomeSite выбрать команду Settings... (Параметры настройки).</li><br> <li> 2. В открывшемся диалоговом окне в списке категорий параметров, расположенном слева, выбрать категорию Browse (Просмотр).</li><br> <li> 3. В группе элементов Internal Browser (рис. 1.17) установить один из трех переключателей: <br> <li> Use Microsoft Internet Explorer (Использовать IE);</li><br> <li> Use Netscape (Использовать NC)</li><br> <li> Use built-in browser (Использовать встроенный броузер). </li><br> <li>4. Если необходимо, чтобы параметры внутреннего броузера совпадали с параметрами внешнего броузера того же типа, то следует установить флажок Use external browser configuration for internal browser. </li><br> <li> 5. Если требуется разрешить обработку страниц на стороне сервера, установить флажок Enable server mappings (подробнее о работе с удаленным сервером рассказано в шестой главе).</li><br> <li>6. Щелкнуть на кнопке Apply (Применить), чтобы передать HomeSite установленные параметры; при этом окно установки параметров закроется.</li><br> При выборе внутреннего броузера следует иметь в виду, что он используется также и для отображения справочной информации в окне документа на вкладке Help.<br> <img src="image/17.gif" alt="Установка параметров внутреннего броузера"><br> Рис. 1.17. Установка параметров внутреннего броузера<br> В любой момент времени пользователь может заменить внутренний броузер.<br><br> Дополнительные параметры использования внутреннего броузера могут быть установлены непосредственно в окне документа. Для этого служат кнопки панели инструментов, отображаемой в верхней части окна документа, на вкладках Browse и Help (рис. 1.18).<br> <img src="image/18.gif" alt="Установка параметров внутреннего броузера"><br> Рис. 1.18. Панель инструментов внутреннего броузера<br> Назначение кнопок следующее (они перечислены слева направо):<br> <li> Previous (Предыдущая) — переход на предыдущую страницу; кнопка становится доступна, если текущая страница была загружена в броузер в результате перехода по ссылке с предыдущей страницы;</li><br> <li> Next (Следующая) — переход на следующую страницу; кнопка становится доступна, если переход на текущую страницу был выполнен с помощью кнопки Previous,</li><br> <li> Stop (Прервать) — прерывание загрузки страницы; как правило, эта кнопка дает эффект при загрузке страницы не с локального диска, а с удаленного сервера (о загрузке файлов с удаленного сервера в окно документа см. раздел «Работа с файлами»);</li><br> <li> Refresh (Обновить) — перезагрузка страницы;</li><br> <li> Browser Size (Размер броузера) — щелчок на кнопке открывает меню, с помощью которого может быть выбран один из трех вариантов масштабирования открытой страницы: <br> <li> Fit to window (Согласовать с окном) — страница масштабируется в соотвестьвии с текущими размерами окна документа;</li><br> <li> 640x480 — для страницы устанавливается фиксированный размер 640 на 480 пикселов (этот размер соответствует стандартному разрешению монитора, использующего видеоадаптер VGA);</li><br> <li> 800x600 — для страницы устанавливается фиксированный размер 800 на 600 пикселов (этот размер соответствует стандартному разрешению монитора, использующего видеоадаптер SVGA);</li><br> <li> Edit (Правка) — переключение в режим редактирования кода (то есть переход на вкладку Edit);</li><br> <li> Open URL (Открыть URL) — загрузка страницы по заданному URL; щелчок на кнопке приводит к открытию дополнительного диалогового окна, в котором следует ввести URL;</li><br> <li> Toggle rulers (Переключение линеек) -- включение по периметру окна документа линеек с разметкой, облегчающих пространственную компоновку элементов страницы (рис. 1.19); на горизонтальной и на вертикальной линейках красным цветом отмечены деления, соответствующие двум предопределенным размерам окна (640x480 и 800x600);</li><br> <li> Open in external browser (Открыть во внешнем броузере) — загрузка текущей страницы во внешний броузер, указанный в списке первым.</li><br> <img src="image/19.gif" alt="Установка параметров внутреннего броузера"><br> Рис. 1.19. Использование линеек в режиме просмотра<br> В качестве еще одного параметра настройки внутреннего броузера следует отмстить возможность совмещения окна броузера с окном редактирования на одной вкладке окна документа (рис. 1.20).<br> <img src="image/20.gif" alt="Установка параметров внутреннего броузера"><br> Рис. 1.20. Режим совмещения окна броузера с окном редактирования<br> Чтобы получить такое совмещенное представление документа, необходимо:<br> <li> 1. Перейти на вкладку Edit окна документа.</li><br> <li> 2. Щелкнуть на панели инструментов окна документа на кнопке Show Browser below Editor (Показать окно броузера ниже окна редактора).</li><br> После разделения окна вы можете изменять размеры подокон, перемещая с помощью мыши линию разделения.<br> При переходе в режим совмещенного просмотра сохраняется возможность редактирования кода страницы. Внесенные изменения обрабатываются броузером и отображаются в его окне. Благодаря этому вы можете почти сразу оценить последствия правки.<br> Чтобы отменить режим совмещенного просмотра, достаточно повторно щелкнуть на кнопке Show Browser below Editor. </td> </tr> </table><br><br> <h1>Выгрузка файлов проекта на удаленный сервер</h1> </h2><br> Выше уже было отмечено, что организация ресурсов сайта в виде проекта позволяет существенно упростить процесс его выгрузки на удаленный сервер. Вместе с тем, HomeSite поддерживает возможность частичного обновления удаленной копии — на уровне отдельных папок или даже отдельных файлов, сохраняя при этом неизменной структуру сайта.<br> Пользователю предоставляются достаточно широкие возможности по настройке параметров выгрузки. В частности, он может указать сразу несколько удаленных серверов, на которые следует произвести выгрузку, установить уровень защищенности сайта, создать и использовать собственный сценарий выгрузки.<br> <td><br> </tr> </table><br><br> <h1>Знакомство с HomeSite</h1> </h2><br> Одним из замечательных свойств HomeSite является то, что для начала работы с ним не требуется знакомство со всеми его возможностями. Чтобы создать с помощью HomeSite простейшую Web-страницу, достаточно иметь навыки по работе с каким-либо текстовым редактором типа Write (Блокнот). Однако, в отличие от Блокнота, HomeSite берет на себя почти 90% работ по вводу основных синтаксических конструкций HTML (или другого используемого языка разметки). Кроме того, чтобы увидеть, как созданная страница выглядит в окне броузера, достаточно одним щелчком мыши переключиться в режим просмотра. В процессе работы с HomeSite вы сможете постепенно наращивать уровень знаний, осваивая его возможности.<br> Второе важное достоинство — это наличие прекрасно организованной системы поддержки пользователя, которая наряду с развернутым справочником включает также средства оперативной помощи, вплоть до опережающего ввода HTML-кода.<br> Благодаря этим особенностям HomeSite можно рассматривать не только как мощный инструмент разработки Web-публикаций профессионального качества, но и как средство обучения технологии Web-дизайна.<br> <td><br> </tr> </table><br><br> <h1> Иллюстрированный самоучитель по Macromedia HOMESITE </h1> <h1>Формирование файловой структуры проекта</h1> </h2><br> Итак, в качестве основы файловой структуры будущего сайта целесообразно использовать файловую структуру проекта, точнее, дерево каталогов (папок), в которые затем будут помещены HTML-файлы и другие компоненты публикации.<br> В состав проекта могут входить папки двух типов: физические (Physical Pokier) и виртуальные (Virtual Folder).<br> Каждая физическая папка привязана к конкретному каталогу на вашем компьютере. Файлы, которые существуют в этом каталоге, могут быть полностью или частично включены в физическую папку проекта. Каталог, с которым связана физическая папка, может быть расположен на локальном или на сетевом диске.<br> Виртуальные папки используются в качестве виртуальных контейнеров для файлов, которые физически располагаются в разных каталогах (или даже на разных дисках). Другими словами, в виртуальную папку вы можете помещать любые файлы. Благодаря этому виртуальные папки обеспечивают эффективный способ группирования файлов, которые физически разнесены, но связаны логически как компоненты единой публикации.<br> На работу с виртуальными папками налагаются два ограничения:<br> <li> виртуальную папку нельзя включить как вложенную в состав физической папки (при этом физические папки могут входить в состав виртуальной);</li><br> <li> для виртуальной папки неприменимы средства автоматического контроля версий.</li><br> <img src="image/formirovanie-fajlovoj-struktury-proekta_1.gif" alt="Формирование файловой структуры проекта"><br> Рис. 2.9. Вкладка General панели свойств папки проекта<br> Чтобы добавить в исходный (пустой) проект новую папку, необходимо:<br> <li> 1. Щелкнуть на значке корневой папки проекта правой кнопкой мыши и выбрать в открывшемся контекстном меню команду Add Folder... (Добавить папку).</li><br> Замечание<br><br> В оценочной версии HomeSite 5, в отличие от предыдущих версий пакета, перед выполнением первого шага требуется создать средствами Windows в корневой папке проекта реальную вложенную папку (в противном случае команда Add Folder... будет недоступна). </li><br> <li> 2. В открывшемся диалоговом окне (рис. 2.9) на вкладке General (Общие свойства) установить параметры создаваемой папки.</li><br> <li> имя папки; оно вводится в поле Folder Name (Имя папки);</li><br> <li> тип папки (Virtual или Physical); выбор производится с помощью пары соответствующих переключателей; если выбран тип Virtual, то остальные элементы вкладки (кроме поля Folder Name) становятся недоступны;</li><br> <li> для физической папки указать физический каталог, который будет ей сопоставлен; его адрес можно либо ввести вручную в поле Directory Patch (Адрес каталога), либо внести с помощью расположенной справа кнопки;</li><br> <li> способ заполнения папки файлами; возможны два варианта: <br> <li> занесение файлов вручную; папка, для которых используется такой способ, называется manual-inclusive folder (папка, заполняемая вручную); по умолчанию применяется этот вариант, поскольку он доступен для папок обоих типов (и виртуальных, и физических);</li><br> <li> автоматическое занесение файлов, имеющихся в связанном с папкой физическом каталоге; такой вариант может применяться только для физических папок; для его реализации необходимо установить флажок Auto Include Files Using Filter (Автоматически добавлять файлы, используя фильтры); если флажок установлен, то в раскрывающемся списке можно выбрать фильтр, используемый для отбора включаемых файлов:</li><br> <li> All Files (Все файлы);</li><br> <li> Web-документы (с указанием конкретных типов текстовых файлов);</li><br> <li> Web-изображения (с указанием конкретных типов графических файлов).</li><br> <li>3. На второй вкладке панели свойств папки - - Deployment (Развертывание) указать параметры выгрузки папки на Web-сервер (рис. 2.10):</li><br> <li>Relative to the Parent Folder Deployment Location (Сохранить расположение относительно родительской папки); размещение папки останется таким же, как в локальном варианте проекта;</li><br> <li>Dynamic Deployment Location (Динамический адрес развертывания); расположение папки на сервере указывается в текстовом поле Deployment Path (Адрес загрузки); при выполнении операции выгрузки к этому адресу автоматически добавляется префикс, отражающий адрес сервера, на который выполняется выгрузка; данный вариант рекомендуется использовать при выгрузке сайта на несколько серверов;</li><br> <li> Absolute Deployment Path (Абсолютный адрес развертывания); адрес развертывания указывается как абсолютный маршрут, содержащий в том числе и адрес сервера; данный вариант рекомендуется использовать при выгрузке сайта на единственный сервер;</li><br> <li> Do Not Upload (He загружать); при выгрузке проекта на сервер данная папка будет пропущена).</li><br> <li>4. Щелкнуть на кнопке ОК.</li><br> <img src="image/formirovanie-fajlovoj-struktury-proekta_2.gif" alt="Формирование файловой структуры проекта"><br> Рис. 2.10. Вкладка Deployment панели свойств папки проекта<br> Выполнив необходимые установки на панели свойств создаваемой папки, вы увидите изменения в структуре проекта. Новая папка будет представлена в дереве проекта значком, вид которого зависит от параметров папки (рис. 2.11).<br> Вложенная папка произвольного уровня вложенности может быть создана аналогичным способом. Для этого необходимо щелкнуть правой кнопкоймыши на значке родительской папки, в контекстном меню выбрать команду Add Folder... и затем установить параметры новой папки.<br> <img src="image/formirovanie-fajlovoj-struktury-proekta_3.gif" alt="Формирование файловой структуры проекта"> <br> Рис. 2.11. Варианты значков для представления папок проекта<br><br> Замечания<br><br> 1. Еще раз отметим, что не разрешается создавать виртуальные папки внутри физических. Тем не менее, если вы попытаетесь нарушить это правило и создать виртуальную папку внутри физической, HomeSite на это никак не отреагирует.<br><br> 2. Для корректной работы с физическими папками должны существовать связанные с ними каталоги на диске компьютера. При этом иерархия создаваемых физических папок должна соответствовать иерархии реально существующих на диске каталогов (в предыдущих версиях HomeSite такое ограничение отсутствовало).<br> В том случае, если при создании физической папки будет указано, что файлы в нее будут помещаться вручную (то есть флажок Auto Include Files Using Filter снят), после щелчка на кнопке ОК на экране отображается дополнительное диалоговос окно Populate New Folder (Заполнение новой папки). Имеющиеся в этом окне два флажка позволяют установить дополнительные условия, которые должны учитываться при первоначальном заполнении папки (рис. 2.12):<br> <li> All files in the selected directoiy path (Все файлы в выбранном каталоге) -в новую папку будут автоматически включены вес файлы, имеющиеся в соответствующей реальной папке на момент создания физической папки проекта;</li><br> <li> All subfolders under the selected directory path (Все вложенные папки в выбранном каталоге) --в новую папку будут автоматически включены все вложенные папки, имеющиеся в соответствующей реальной папке.</li><br> <img src="image/formirovanie-fajlovoj-struktury-proekta_4.gif" alt="Формирование файловой структуры проекта"><br> Рис. 2.12. Диалоговое окно для установки свойств папки с «ручным» заполнением<br> Все последующие изменения содержимого реальной папки потребуется, тем не менее, отслеживать без участия HomeSite.<br> Поясним процедуру формирования файловой структуры проекта на небольшом примере.<br> Предположим, что в созданный ранее проект New_Pro (см. рис. 2.4) требуется добавить одну физическую папку для хранения HTML-файлов (назовем ее HTML), которая должна заполняться автоматически, и одну виртуальную для хранения файлов с Flash-фильмами (назовем ее Flash). В свою очередь, папка HTML будет содержать две вложенные папки НТМ_1 (физическую) и НТМ_2 (виртуальную).<br> Чтобы HomeSite корректно выполнил все необходимые действия, предварительно следует создать на диске в корневой иапке проекта папку HTML, a в ней - - вложенную папку НТМ_1.<br> После добавления в проект указанных выше папок его структура будет выглядеть так, как показано на рис. 2.13.<br> <img src="image/formirovanie-fajlovoj-struktury-proekta_5.gif" alt="Формирование файловой структуры проекта"><br> Рис. 2.13. Структура проекта после добавления новых папок<br> После создания папки ее свойства могут быть изменены. Например, вы можете изменить имя папки, условия ее заполнения и выгрузки на Web-сeрвeр. Кроме того, физическая папка может быть преобразована в виртуальную. Однако эту операцию следует выполнять, только хорошенько взвесив все «за» и «против», поскольку обратное преобразование невозможно. Для изменения свойств папки необходимо выбрать в ее контекстном меню команду Properties... и выполнить соответствующие установки в панели свойств.<br> Чтобы удалить любую папку из проекта (в том числе корневую), достаточно выбрать в ее контекстном меню команду Remove Folder (Удалить папку). При этом следует иметь в виду, что удаление физической папки из проекта не приводит к удалению связанной с ней реальной папки на диске.<br> Более подробно соответствующие аспекты работы с папками и файлами проекта рассмотрены в следующем подразделе.<br><td><br> </tr> </table><br><br> <h1>Функция Extended Find</h1> </h2><br> Итак, чтобы выполнить расширенный поиск некоторого фрагмента публикации, необходимо:<br> <li> 1. В открытом документе выбрать фрагмент, который требуется найти в других файлах.</li><br> <li> 2. В меню Search (Поиск) главного окна HomeSite выбрать команду Extended Find...</li><br> <li> 3. В открывшемся диалоговом окне (рис. 2.19) установить параметры и диапазон поиска и щелкнуть на кнопке Find (Искать).</li><br> <img src="image/funkcija-extended-find_1.gif" alt="Функция Extended Find"><br> Рис. 2.19. Диалоговое окно для установки параметров расширенного поиска<br> Искомый фрагмент текста, выбранный в открытом документе, при вызове функции Extended Find отображается в поле Find what (Что искать).<br> Чтобы HomeSite запомнил фрагмент для повторного поиска, необходимо:<br> <li>1. Щелкнуть кнопку со стрелкой, расположенную над полем Find what.</li><br> <li> 2. В открывшемся меню (рис. 2.20) выбрать команду Save find text... (Сохранить искомый текст).</li><br> <li> 3. В дополнительном диалоговом окне (рис. 2.21) подтвердить или скорректировать имя, под которым будет сохранен фрагмент; обратите внимание, что имя фрагмента должно начинаться и завершаться символами подчеркивания.</li><br> <img src="image/funkcija-extended-find_2.gif" alt="Функция Extended Find"> <br> Рис. 2.20. Команды для сохранения и вызова фрагмента текста<br> <img src="image/funkcija-extended-find_3.gif" alt="Функция Extended Find"><br> Рис. 2.21. В этом диалоговом окне можно изменить имя, под которым будет сохранен фрагмент<br> Чтобы выполнить поиск по одному из сохраненных ранее фрагментов, необходимо:<br> <li>1. Щелкнуть кнопку со стрелкой, расположенную над полем Find what.</li><br> <li>2. В открывшемся меню (см. рис. 2.20) выбрать команду Open find text... (Сохранить искомый текст).</li><br> <li> 3. В списке фрагментов (рис. 2.22) выбрать тот, по которому должен выполняться поиск. .</li><br> Выбор диапазона поиска выполняется посредством установки соответствующего переключателя в группе Find where (Где искать), а также с помощью связанных с переключателями полей:<br> <img src="image/funkcija-extended-find_4.gif" alt="Функция Extended Find"><br> Рис. 2.22. Список фрагментов, по которым выполнен поиск<br> <li> Current document (Текущий документ) - - поиск выполняется в документе, который был активен на момент вызова функции поиска; этот документ не обязательно должен быть сохранен на диске;</li><br> <li> All open documents (Все открытые документы) — поиск выполняется во всех файлах, открытых в окне документа на момент вызова функции поиска; среди них могут быть также безымянные и не сохраненные документы;</li><br> <li> In folder (В папке) — поиск выполняется в папке, указанной в связанном с переключателем поле; дополнительно с помощью флажка Include subfolders (Включая вложенные папки) можно указать, следует ли выполнять поиск в подкаталогах;</li><br> <li>In project (В проекте) -- поиск выполняется в пределах проекта, указанного в связанном с переключателем поле (точнее, в раскрывающемся списке); список проектов содержит перечень всех последних (по умолчанию --не более 10) проектов, с которыми вы работали.</li><br> Перечень типов файлов, в которых должен выполняться поиск, может быть конкретизирован двумя способами:<br> <li> с помощью фильтра File Types (Типы файлов);</li><br> <li> посредством установки флажка Exclude Binary Files (За исключением двоичных файлов), входящего в группу флажков, расположенную в правой части окна.</li><br> Остальные флажки позволяют указать некоторые дополнительные параметры поиска:<br> <li> Match case (Соответствие регистра) — поиск выполняется с учетом регистра символов;</li><br> <li> Regular expression (Регулярные выражения) — при поиске разрешен синтаксический анализ регулярных выражений;<br><br> Замечание<br><br> Регулярные выражения — это специальные конструкции, которые обеспечивают представление последовательностей символов в формальном виде. Например, регулярное выражение А-В означает «любая строка, соответствующая А, но не соответствующая В».<br><br> <li> Skip tags while searching (Пропускать теги при поиске) — при поиске анализируется только собственно текстовое содержание публикации, без учета названий тегов и их атрибутов (то есть при поиске пропускаются последовательности символов, заключенные в угловые скобки); данный флажок недоступен, если разрешено использование регулярных выражений;</li><br> <li> Display Line info (Выводить информацию о строках) — при выводе результатов поиска указываются номера строк, в которых обнаружен искомый текст, а также номер позиции внутри строки; кроме того, в окне результатов в этом случае полностью выводится строка, содержащая искомый фрагмент; поскольку подсчет номеров строк замедляет поиск, то при попытке пользователя установить этот флажок HomeSite выводит на экран соответствующее предупреждение.</li><br> Результаты поиска выводятся в окне результатов (Results Window). Если при инициализации поиска окно закрыто, то по окончании поиска оно будет отрыто автоматически. По умолчанию окно результатов содержит следующую информацию (рис. 2.23):<br> <li> File (Файл) — путь доступа к файлу, в котором найден искомый фрагмент; в этом же столбце (ниже последнего найденного файла) отображается общее число совпадений (Total Matches);</li><br> <li> Title (Заголовок) — заголовок документа, в котором найден фрагмент;</li><br> <li> Match (Соответствие) — найденный фрагмент;</li><br> <li> Position (Позиция) — номер символа от начала документа, с которого начинается найденный фрагмент; если в параметрах поиска установлен флажок Display Line info, то информация в этом столбце выводится в формате <номер строки>:<номер символа>;</li><br> <li> Length (Длина) - - число символов в искомом фрагменте;</li><br> <li> Line Information (Информация в строке) - - содержимое всей строки, включающей искомый фрагмент; этот столбец выводится только в том случае, если в параметрах поиска установлен флажок Display Line info. </li><br> <img src="image/funkcija-extended-find_5.gif" alt="Функция Extended Find"><br> Рис. 2.23. Вывод результатов поиска в окне результатов<br> <td><br> </tr> </table><br><br> <h1>Функция Extended Replace</h1> </h2><br> Применение функции расширенной замены - - Extended Replace - - во многом аналогично применению рассмотренной выше функции поиска. В частности, вы можете задавать диапазон, в котором требуется выполнить замену, вести список замененных фрагментов и т. д. (рис. 2.24).<br> <img src="image/funkcija-extended-replace_1.gif" alt="Функция Extended Replace"><br> Рис. 2.24. Диалоговое окно для установки параметров расширенной замены<br> Отличие состоит в том, что замена может привести к нежелательному результату, который потребуется отменить. Поэтому при использовании функции замены предусмотрена возможность резервного копирования редактируемых документов. Чтобы его разрешить, следует установить флажок Make backups (Выполнить резервное копирование). Если флажок установлен, то можно дополнительно указать каталог, в котором будут храниться резервные копии:<br> <li> Backup Director (Каталог для резервных копии) — резервные копии создаются в папке, указанной в параметрах настройки HomeSite (см. раздел Настройка параметров работы с файлами главе «Знакомство с HomeSite»</a>).</li><br> <li> Original Director (Исходный каталог) — резервные копии создаются в тех же папках, в которых расположены редактируемые документы.</li><br> Замечание<br><br> Если замена производится только в текущем документе, то его резервная копия всегда создается в папке, указанной в параметрах настройки HomeSite. Поэтому при выборе диапазона Current Document флажок Make backups становится недоступен.<br> Итак, чтобы выполнить расширенную замену, необходимо:<br> <li>1. В открытом документе выбрать фрагмент, который требуется найти в других файлах.</li><br> <li> 2. В меню Search главного окна HomeSite выбрать команду Extended Replace...</li><br> <li> 3. В открывшемся диалоговом окне (см. рис. 2.24) установить параметры и диапазон замены и щелкнуть на кнопке Replace (Заменить).</li><br> Результаты выполнения команды Extended Replace выводятся в окне результатов. Состав отображаемой в нем информации аналогичен формату результатов расширенного поиска (см. рис. 2.23).<br><td><br> </tr> </table><br><br> <h1>Интерфейс вкладки Projects окна ресурсов</h1> </h2><br> Все основные действия по созданию проекта и последующей работе с ним выполняются с помощью элементов управления, имеющихся на вкладке Projects окна ресурсов. Кроме того, некоторые команды для работы с проектом содержатся в меню Project главного окна HomeSite.<br> Некоторые из элементов управления, имеющихся на листе Projects окна ресурсов, показаны на рис. 2.1.<br><br> К ним, в частности, относятся:<br> <li> раскрывающийся список Recent Projects (Последние проекты), который содержит перечень проектов, с которыми пользователь работал в последнее время (по умолчанию список ограничен 10 пунктами, однако этот параметр может быть изменен);</li><br> <li> кнопка Open Project (Открыть проект), которая обеспечивает вызов окна просмотра дерева каталогов и файлов;</li><br> <li> кнопка New Project (Создать проект), кото'рая обеспечивает вызов мастера создания нового проекта;</li><br> <li> кнопка Deployment Wizard (Мастер развертывания), которая обеспечивает вызов мастера развертывания проекта на Web-сервере;</li><br> <li> дерево проекта, которое отображает состав и иерархию элементов проекта;</li><br> <li> окно файлов, которое содержит список файлов, либо имеющихся в текущей папке проекта, либо относящихся к выбранной категории ресурсов.</li><br> <img src="image/interfejs-vkladki-projects-okna-resursov_1.gif" alt="Интерфейс вкладки Projects окна ресурсов"><br> Рис. 2.1. Элементы управления вкладки Projects окна ресурсов<br> Помимо перечисленных элементов, в распоряжении пользователя при работе с проектом имеется система контекстных меню. Состав команд каждого из них зависит от типа элемента проекта, к которому относится меню, а также от текущего состояния этого элемента. Ниже приведен перечень команд контекстных меню существующего проекта и краткие пояснения к ним.<br> Чтобы открыть контекстное меню проекта, необходимо щелкнуть правой кнопкой мыши на значке проекта. Меню содержит следующие команды (рис. 2.2):<br> <img src="image/interfejs-vkladki-projects-okna-resursov_2.gif" alt="Интерфейс вкладки Projects окна ресурсов"><br> Рис. 2.2. Контекстное меню проекта<br> <li> Open All Documents in Project (Открыть вес документы проекта) -открытие всех файлов проекта в окне документа (для каждого документа создастся отдельный лист); при выполнении этой команды HomeSite пытается открыть все файлы, а не только текстовые, поэтому как только доходит очередь до нетекстового файла (например, графического), на экране появляется окно с просьбой уточнить дальнейшие действия;</li><br> <li> Add Folder... (Добавить папку) — вызов диалогового окна, с помощью которого выполняется добавление папки в состав проекта; подробнее процедура создания папок проекта рассмотрена в разделе «Разработка файловой структуры сайта»;</li><br> <li> Source Control (Управление версиями) — каскадное меню, которое обеспечивает подключение и использование системы управления версиями; чтобы интегрировать HomeSite с одной из таких систем, следует выбрать команду Choose Source Control Provider (Выбрать средство управления версиями);</li><br> <li> Verify Links... (Проверить ссылки) — вызов диалогового окна, с помощью которого выполняется настройка параметров и инициализация процедуры проверки ссылок, имеющихся в составе проекта; подробнее этот вопрос рассмотрен в разделе Тестирование страниц главe «Тестирование сайта и выгрузка на удаленный сервер»;</li><br> <li> Rename Project (Переименовать проект) — вызов диалогового окна, с помощью которого может быть изменено имя проекта;</li><br> <li> Save Project (Сохранить проект) — сохранение информации о проекте в виде файла <имя проекта>.арf; данный файл создастся в корневой папке проекта;</li><br> <li> Close Project (Закрыть проект) — закрытие проекта; если в проект были внесены изменения, котопыс нс сохранены на лиске, на экран выводится окно с вопросом, следует ли их сохранить перед закрытием проекта;</li><br> <li> Delete Project (Удаление проекта) — удаление проекта (после подтверждения пользователем своих намерений); удаление проекта заключается в удалении файла .apf;</li><br> <li> Properties... (Свойства) — вызов диалогового окна, с помощью которого выполняется настройка параметров и инициализация процедуры развертывания сайта на Wеb-сервер; подробнее этот вопрос рассмотрен в разделе Выгрузка сайта на удаленный сервер в главе «Тестирование сайта и выгрузка на удаленный сервер».</li><br> Контекстные меню папок и списка ресурсов проекта, отображаемых в дереве проекта, будут рассмотрены в разделе «Разработка файловой структуры сайта» данной главы. Назначение команд контекстных меню списка серверов и списка сценариев будут описаны в главе Создание интерактивных страниц.<br><td><br> </tr> </table><br><br> <h1>Изменение параметров проекта</h1> </h2><br> При создании нового проекта HomeSite использует параметры, установленные по умолчанию. При необходимости пользователь может скорректировать значения этих параметров (либо до создания проекта, либо уже после того, как проект будет создан).<br> Элементы управления параметрами проекта размещены на двух вкладках диалогового окна Settings (рис. 2.18):<br> <li> Projects (Общие параметры проекта); </li><br> <li> Deployments (Параметры развертывания).</li><br> На вкладке Projects могут быть установлены следующие параметры HomeSite по работе с проектами:<br> <li> максимальный размер списка проектов; устанавливается с помощью дискретного счетчика Maximum recent projects (Максимальное число свежих проектов);</li><br> <li> используемый по умолчанию способ заполнения физических папок; выбирается с помощью пары переключателей Default project folder type (Тип папок, используемый по умолчанию): <br> <li> Manual include - - папки с «ручным» заполнением;</li><br> <li> Auto include - - папки с автозаполнснием;</li><br> <li> дополнительно можно указать, следует ли при добавлении в проект новой панки с автозаполнснием включать в проект также вложенные в нее панки; если да, то необходимо установить флажок New auto-include folders include sub folders;</li><br> <li> автоматическое ведение списка ресурсов проекта; если флажок Include project resources (Включать в ресурсы проекта) снят, то в дереве проекта отображается только корневой элемент списка ресурсов (значок Resources), без подразделов; если флажок установлен, то с помощью расположенного ниже списка можно описать состав разделов списка ресурсов, которые должны быть представлены в дереве при создании нового проекта.</li><br> <img src="image/izmenenie-parametrov-proekta_1.gif" alt="Изменение параметров проекта"><br> Рис. 2.18. Диалоговое окно Settings, категория Projects<br> Параметры развертывания проекта, которые входят в категорию Deployments, будут рассмотрены в разделе Выгрузка сайта на удаленный сервер главы «Тестирование сайта и выгрузка на удаленный сервер».<br> <td><br> </tr> </table><br><br> <h1>Общая схема разработки узла с помощью HomeSite</h1> </h2><br> Последовательность этапов разработки Web-сайта с помощью HomeSite может быть достаточно произвольной, однако лучше все-таки придерживаться технологии, которой стараются следовать профессиональные Web-дизайнеры и которая в большинстве случаев гарантирует успешное завершение проекта. Основными шагами на пути воплощения творческого замысла в реальный продукт являются следующие:<br> <li>1. Определение общей концепции и предназначения публикации. Выбор общей концепции и предназначения публикации (будет ли это информационный, развлекательный сайт или, например, электронный магазин) влияет на архитектуру, информационное наполнение и стилевое оформление сайта. Поэтому процесс разработки должен начинаться с попытки классифицировать будущий проект, то есть определить ту роль, которую он должен будет играть в информационном наполнении Интернета.</li><br> <li> 2. Определение категорий потенциальных посетителей сайта. Для посещаемости сайта важны как его информационное наполнение, так и выбранная автором форма подачи материала. Учитывая многообразие посетителей Интернета, трудно рассчитывать на то, что удастся подобрать выразительные средства, которые удовлетворили бы всех посетителей. Именно поэтому вторым шагом в проектировании публикации является определение особенностей той аудитории, на которую рассчитана публикация.</li><br> <li> 3. Выбор общего стиля публикации. Стиль публикации определяется не только визуальным оформлением страниц сайта, но также стилем изложения его содержания (как пишут некоторые авторы — «контента», заменяя хорошее русское слово транслитерацией английского слова content) и средствами взаимодействия посетителя с этим содержанием. Все вместе это формирует пользовательский интерфейс сайта, который должен обладать такими свойствами, как естественность, дружественность, согласованность и т. д.</li><br> <li> 4. Разработка структуры публикации (с учетом внешних и внутренних ссылок, а также возможной последующей модификации сайта). При разработке структуры публикации целесообразно использовать подход, давно известный и хорошо зарекомендовавший себя в среде разработчиков программных систем. Называется он «проектирование сверху вниз». Применительно к Web-публикации его суть заключается в том, что сначала определяется состав публикации на уровне крупных разделов, содержание которых постепенно детализируется и уточняется. В такой же последовательности устанавливаются связи между разделами и между отдельными страницами публикации.</li><br> <li> 5. Разработка главной страницы. Главная страница — это в некотором смысле «лицо» сайта. И хотя народная мудрость и утверждает, что «с лица не воду пить», но все-таки при встрече с незнакомым человеком мы примерно 90% информации о нем «считываем» с его лица. В связи с этим при проектировании главной страницы в наибольшей степени должны учитываться все те требования, которые предъявляются к сайту в целом. Это относится и к структурной организации информации, и к выбору визуальных атрибутов, и к стилю изложения выносимых на эту страницу материалов.</li><br> <li>6. Разработка остальных страниц публикации. Проектирование структуры Web-страниц существенно отличается от проектирования печатных документов. Разрабатывая формат страниц узла, помните, что вы не можете в полной мере управлять их визуальными атрибутами, поскольку читатель сам устанавливает размер видимой части окна броузера, параметры шрифтов и т. д.</li><br> <li> 7. Размещение публикации в Сети и регистрация в поисковых системах.</li><br> <li> 8. Анализ рейтинга и принятие решения о внесении изменений в проект. Многие современные HTML-редакторы (в том числе HomeSite) располагают средствами тестирования сайта на предмет длительности загрузки отдельных страниц и на наличие некорректных ссылок. Однако возможность оценить реальное качество вашего произведения появляется только после размещения сайта на Web-сервере. Причем для накопления достаточной статистики может понадобиться (в зависимости от темы публикации, успешности регистрации в поисковых системах и других, иногда совершенно случайных, факторов) от пары недель до нескольких месяцев.</li><br> <li> 9. Пересмотр ранее принятых решений, относящихся к одному (или ко всем) из пунктов с первого по седьмой. Регулярное обновление представленной информации является важнейшим условием сохранения интереса посетителей к вашей публикации. Еще одна причина: в процессе разработки и реализации любого нового проекта Web-дизайнер вольно или невольно повышает свой профессиональный уровень, а вместе с этим могут изменяться и его художественные пристрастия. Ну и, наконец, если работа носила заказной характер, то взгляды заказчика на проект также могли претерпеть существенные изменения.</li><br> По итогам выполнения трех первых этапов может быть определена структура узла, которая имеет два представления:<br> <li> в виде файловой структуры;</li><br> <li> в виде навигационной схемы.</li><br> Следует заметить, что обе формы представления структуры узла удобнее разрабатывать параллельно, поочередно уточняя и корректируя их. Но начинать все-таки лучше с определения файловой структуры проекта. Еще одно важное правило касается того, насколько большим должен быть каждый раздел (страница) сайта. Ведь каждая страница -- это отдельный HTML-файл, и от се размера зависит размер соответствующего файла. Определяющим здесь является условие, чтобы каждая страница была завершенной с логической точки зрения. Так, не стоит делить изложение некоторой идеи на несколько страниц только для того, чтобы сократить размер каждой из них. С другой стороны, нецелесообразно объединять на одной странице не связанные между собой темы только для того, чтобы увеличить размер документа и уменьшить число файлов проекта.<br> В общем случае при выборе размера документа следует учитывать следующие факторы:<br> <li> длинный документ требует больше времени для пересылки и отображения броузером;</li><br> <li> читателю сложнее работать с большим по объему документом: он не может быстро переходить к нужной его части и возвращаться назад, используя полосу прокрутки, в то время как переход по ссылкам может оказаться значительно эффективнее;</li><br> <li> чем длиннее документ, тем менее заметны в нем слова, заданные в запросе, и, следовательно, ваша страница будет ниже в результатах поиска при прочих равных условиях; более того, роботы некоторых поисковых систем просто отказываются обрабатывать слишком длинные документы, например максимальный размер документа для роботов Rambler составляет 200 Кбайт (и вообще считается дурным тоном делать документы такого объема без особой на то необходимости). </li><br> Приведенное выше описание общей технологии разработки Web-публикаций должно напомнить читателю о том, что качество публикации не зависит непосредственно от времени, проведенного за компьютером. Совсем наоборот: непосредственной реализации проекта должна предшествовать достаточно длительная и кропотливая «ручная» работа, связанная с выбором направления и стиля публикации, подбором материала, изучением особенностей той категории посетителей, кому она предназначена. К этим вопросам придется неоднократно возвращаться и в процессе выполнения последующих этапов, и даже после того, как созданный сайт будет размещен на Web-сервере. Как бы ни был хорош инструмент, с помощью которого вы реализовывали проект, сам по себе он на эти вопросы ответить не в состоянии.<br> Основное предназначение такого инструмента — снизить долю рутинных операции, выполняемых вручную, и предоставить разработчику публикации удобный доступ к наиболее эффективным технологиям создания Web-публикаций. С этой точки зрения общая схема разработки узла с помощью HomeSite выглядит следующим образом:<br> <li> 1. Создание проекта и установка его параметров.</li><br> <li>2. Разработка файловой структуры проекта.</li><br> <li> 3. Разработка главной страницы публикации.</li><br> <li> 4. Создание шаблонов для публикации в целом и/или для разделов публикации.</li><br> <li>5. Разработка остальных страниц публикации; разработка каждой страницы должна завершаться тестированием страницы, в том числе по времени загрузки.</li><br> <li> 6. Проверка соответствия полученной навигационной схемы узла ее «бумажному» прототипу.</li><br> <li>7. Выгрузка сайта на Web-сервер.</li><br> <td><br> </tr> </table><br><br> <h1>Поиск и замена в файлах проекта</h1> </h2><br> В первой главе, посвященной знакомству с основными возможностями HomeSite, было отмечено, что это не только текстовый редактор. Это инструмент подготовки Web-публикаций. Именно поэтому в его составе имеются функции, обеспечивающие работу с несколькими документами (страницами публикации) одновременно. К таким функциям относятся, в частности, Extended Find (Расширенный поиск) и Extended Replace (Расширенная замена). В отличие от стандартных функций поиска и замены, присутствующих практически во всех текстовых редакторах, функции Extended Find и Extended Replace позволяют обработать за одно обращение любое подмножество файлов вашего компьютера, а также файлы, доступные через сетевое соединение. Обе эти функции имеют достаточно большое количество настраиваемых параметров, что позволяет гибко изменять критерии и диапазон поиска.<br> Замечание<br><br> Не следует путать функцию Extended Replace с функцией Replace Extended Characters, которая входит также в меню Search, но предназначена для работы с кодами символов (она была описана в разделе Управление кодировкой текстовых файлов главе «Знакомство с HomeSite»</a>).<br> При разработке и сопровождении сайта возможность поиска и замены фрагментов текста во всех (или указанных пользователем) файлах проекта обеспечивает сокращение времени на:<br> <li> устранение однотипных ошибок;</li><br> <li> поиск и редактирование произвольных текстовых фрагментов;</li><br> <li> поиск требуемых фрагментов кода страниц;</li><br> <li> редактирование общих элементов страниц публикации (например, кнопок или меню).</li><br> Следует отметить, что обе рассматриваемые функции предоставляют весьма удобные средства по вводу искомого фрагмента:<br> <li> фрагмент может быть введен с клавиатуры или встаачен в соответствующее поле через буфер обмена;</li><br> <li> если в одном из открытых документов имеется интересующий фрагмент, то его достаточно выделить (выбрать) в документе, после чего он будет автоматически помещен в окно поиска;</li><br> <li> искомый фрагмент может быть сохранен для последующего повторного использования и затем выбран из списка фрагментов.</li><br> Практика показывает, что наиболее часто используется второй из указанных вариантов, поэтому при описании последовательности действий за основу взят именно он.<br> <td><br> </tr> </table><br><br> <h1>Работа с файлами проекта</h1> </h2><br> В состав проекта (и, соответственно, в состав сайта) могут входить не только файлы, разложенные по папкам, но и «беспризорные» файлы, которые, например, лежат непосредственно в корневой папке сайта. Такими файлами являются, как правило, файл главной (начальной) страницы публикации и файлы с описанием таблиц стилей (.ess).<br> После того, как будет сформирована структура проекта на уровне папок, вы можете добавить (или удалить) в любую из них требуемые файлы. В этом отношении работа с папками различных типов отличается незначительно, тем не менее следует иметь в виду:<br> <li> вы не можете включить самостоятельно новый файл в состав физической папки с автозаполнснисм: если новый файл будет создан или добавлен в связанную с ней реальную папку, HomeSite тут же автоматически включит его в состав папки проекта; ни один файл из такой папки нс может быть также удален, пока он имеется в реальной папке;</li><br> <li> перемещение файла из одной виртуальной папки в другую не требует его физического перемещения на диске;</li><br> <li> перемещение файла между физическими папками или включение нового файла в физическую папку требует его реального перемещения или копирования в новую папку.</li><br> Чтобы добавить новый файл в виртуальную папку или в физическую папку ручным заполнением, необходимо:<br> <li> 1. Щелкнуть на значке папки правой кнопкой мыши и в открывшемся<br><br> контекстном меню выбрать команду Add Files to Folder... (Добавить в папку файлы).</li><br> <li> 2. В открывшемся диалоговом окне выбрать один или несколько файлов,<br><br> подлежащих включению в папку (чтобы выбрать в списке несколько файлов, следует пользоваться клавишами <Ctrl> или <Shift>), и щелкнуть на кнопке Add (рис. 2.14).</li><br> <img src="image/rabota-s-fajlami-proekta_1.gif" alt="Работа с файлами проекта"><br> Рис. 2.14. Диалоговое окно для включения файлов в папку проекта<br> Замечание<br><br> Тип включаемых в папку файлов не обязательно должен совпадать с параметрами фильтра, установленными при создании папки. Если файлы требуемого типа не отображаются в окне Add Files to Folder, выберите нужный тип в списке Files of Type, либо установите вариант All Files.<br> Если вы хотите добавить в физическую папку с «ручным» заполнением файл, который реально находится на диске в другой папке, HomeSite выведет на экран соответствующее предупреждение и предложит выбрать одно из двух решений проблемы (рис. 2.15):<br> <li> копировать файл в реальную папку, связанную с физической папкой (для этого требуется щелкнуть на кнопке Сору);</li><br> <li> переместить файл в реальную папку, связанную с физической папкой (для этого требуется щелкнуть на кнопке Move).</li><br> <img src="image/rabota-s-fajlami-proekta_2.gif" alt="Работа с файлами проекта"><br> Рис. 2.15. Сообщение о том, что добавляемый файл не принадлежит физической папке<br> После включения файлов в папку они сразу отображаются в нижней части окна ресурсов (в списке файлов), как показано на рис. 2.16, слева.<br> <img src="image/rabota-s-fajlami-proekta_3.gif" alt="Работа с файлами проекта"><br> Рис. 2.16. Представление файлов проекта на вкладке Projects<br> Кроме того, добавленные в проект файлы автоматически становятся частью его ресурсов и помещаются HomeSite в тот раздел списка ресурсов, который соответствует типу включенных файлов (разумеется, если таковой был создан заранее). Чтобы убедиться в этом, требуется развернуть список Resources и щелкнуть на значке соответствующего раздела. В примере, приведенном на рис. 2.16, справа, таким разделом является Flash.<br> Обратите внимание, что состав информации, отображаемой в списке файлов, в обоих случаях разный. Тем не менее информация о ресурсах формируется на основе информации о содержимом папок проекта. То есть любое изменение в папках (добавление или удаление файлов) приводит к автоматическому изменению списка ресурсов. Именно поэтому в контекстном меню файла в списке ресурсов недоступна команда Remove from this folder (Удалить из этой папки), которая позволяет удалить файл из папки проекта.<br> Вместе с тем, работа с файлами проекта (как на уровне папок проекта, так и на уровне ресурсов) существенно отличается от работы с файлами, отображаемыми на вкладках Files 1 и Files 2 (они были рассмотрены в разделе Работа с файлами главе Знакомство с HomeSite).<br> Дело в том, что на этих вкладках представлены сведения о реальных файлах, а в дереве проекта - - сведения о файлах как элементах этого проекта. Благодаря такому механизму один и тот же реальный файл может использоваться одновременно в нескольких проектах. По этой причине в контекстных меню файлов проекта отсутствуют команды, изменяющие состояние и положение существующих реальных файлов (такие как «переместить», «переименовать», «удалить»). В остальном состав команд контекстного меню файлов проекта и контекстного меню файлов на вкладках Files 1 и Files 2 идентичен.<br> Для наглядности сравнения контекстные меню файла, используемые на вкладке Files и на вкладке Projects, показаны на рис. 2.17.<br> а)<br> <img src="image/17-a.gif" alt="Работа с файлами проекта"><br> б)<br> <img src="image/17-b.gif" alt="Работа с файлами проекта"><br> Рис. 2.17. Контекстные меню файла:<br><br> а) для вкладки Files, б) для вкладки Projects<br> Если на доступных с вашего компьютера дисках отсутствует файл, который требуется включить в состав проекта, то он (файл) должен быть создан.<br> Чтобы после создания нового Web-документа он был автоматически включен в состав проекта, необходимо:<br> <li>1. Щелкнуть правой кнопкой мыши на значке той папки, в которую следует поместить создаваемый файл, и в контекстном меню выбрать команду Create a New Document... (Создать новый документ).</li><br> <li> 2. В открывшемся диалоговом окне в зависимости от типа папки выполнить следующие действия: <br> <li> для виртуальной папки — выбрать реальный каталог на диске и затем в поле File Name ввести имя файла (с расширением);</li><br> <li> для физической папки (с автозаполнением или нет) - - ввести в поле File Name имя файла с расширением (возможность выбора каталога для физической папки отсутствует);</li><br> <li> щелкнуть на кнопке Save.</li><br> В результате описанной процедуры HomeSite выполнит следующие действия:<br> <li> 1. создаст на диске текстовый файл (на основе используемого по умолча нию шаблона);</li><br> <li> 2. добавит созданный файл в папку проекта и в соответствующий раздел списка ресурсов;</li><br> <li> 3. откроет файл в окне документа в режиме редактирования.</li><br> Следует отметить, что такой способ создания новых документов обладает це лым рядом преимуществ по сравнению с тем, когда документ сначала создается, и лишь потом вручную добавляется в одну из папок проекта. Вот основные из них:<br> <li> вы можете выбрать наиболее подходящую стратегию наполнения папок проекта, и затем следовать ей, имея постоянно перед глазами картину текущего состояния проекта;</li><br> <li> вы гарантированно не забудете включить созданный документ в состав проекта;</li><br> <li> количество манипуляций, которые потребуется выполнить для включения документа в проект, будет минимальным.</li><br> Любой файл, включенный в состав проекта, может быть выгружен на сервер в индивидуальном порядке. Подробнее процедура выгрузки описана в разделе Выгрузка сайта на удаленный сервер главы «Тестирование сайта и выгрузка на удаленный сервер»</a>.<br> <td><br> </tr> </table><br><br> <h1>Разработка файловой структуры сайта</h1> </h2><br> Хорошо продуманная с самого начала файловая структура проекта поможет вам существенно сэкономить время и силы позже, на этапе размещения сайта на Wcb-серверс, и в еще большей степени -- на этапе его сопровождения.<br> Разумеется, невозможно предложить некую универсальную структуру, которая подошла бы для любого узла, но существуют проверенные практикой правила, придерживаясь которых можно получить неплохие результаты:<br> <li>размещайте взаимосвязанные страницы в одной папке; например, в одну папку могут входить каталог предлагаемых товаров и сведения о производителях;</li><br> <li> для упорядочения информации внутри больших разделов используйте вложенные папки;</li><br> <li> размещайте файлы разных типов в отдельных папках; например, графические файлы — в папке Images или Pictures, звуковые файлы — в папке Sound и т. п.; если таких файлов много, распределите их по вложенным папкам, имена которых должны соответствовать наименованиям страниц, где эти файлы используются;</li><br> <li> используйте одну и ту же структуру для проекта, размещенного локально, и для его копии, развернутой на удаленном сервере.</li><br> На рис. 2.8 показан наиболее распространенный вариант файловой структуры небольшого узла.<br> <img src="image/razrabotka-fajlovoj-struktury-sajta_1.gif" alt="Разработка файловой структуры сайта"><br> Рис. 2.8. Пример файловой структуры узла<br><td><br> </tr> </table><br><br> <h1>Разработка структуры сайта</h1> </h2><br> Любую Web-публикацию можно рассматривать с двух точек зрения.<br> С одной стороны, она представляет собой некий «информационный ресурс», то есть предоставляет некоторый набор сведений или услуг, которые были бы полезны или интересны для определенной категории посетителей WWW.<br> С другой стороны, Web-сайт — это результат применения тех или иных технологий, поддерживаемых на сегодняшний день аппаратными и программными средствами Интернета. Причем количество этих самых технологий увеличивается буквально с каждым днем. Каждая из них, как говорится, хороша по-своему. Зачастую это порождает у некоторых (особенно у начинающих) Web-дизайнеров желание насытить свои публикации всем, до чего «руки дотянутся»: здесь и звуковое сопровождение, и Flash-фильмы и т. д.<br> Однако практика показывает, что любая технология хороша ровно настолько, насколько она подходит для решения конкретной задачи. Некоторые страницы нисколько не теряют от того, что на них представлен «голый» текст, иногда даже без графических иллюстраций.<br> Поэтому Wеb-дизайнеру, который действительно хочет создать нечто стоящее, приходится решать две весьма сложные взаимосвязанные проблемы: какой именно материал следует включить в публикацию, и какие технологии в наибольшей степени подходят для его подачи посетителям сайта.<br> Заметим, что отправной точкой должно быть именно содержание публикуемых материалов.<br> <td><br> </tr> </table><br><br> <h1>Создание и установка параметров проекта</h1> </h2><br> Под проектом (Project) в HomeSite понимается набор файлов, которые используются при создании сайта. Эти файлы могут быть физически расположены в различных папках (и даже на разных дисках) и иметь различный тип и формат. Так, в состав проекта могут входить HTML-страницы, графические файлы, файлы каскадных таблиц стилей, файлы сценариев и т. д. Вся информация о проекте хранится в специальном файле, который имеет расширение .apf и помещается в корневую папку проекта.<br> Разработка сайта с помощью HomeSite не требует обязательного создания проекта, однако применение этого механизма обеспечивает существенное повышение эффективности работы. В частности, использование проекта обеспечивает:<br> <li> централизованное хранение информации о файлах сайта, что, в свою очередь, дает два важных преимущества: автоматический контроль<br><br> целостности проекта и удобный доступ к файлам проекта, независимо от их физического размещения;</li><br> <li> возможность корректного развертывания проекта на Web-сeрвeре, гарантирующего, что ни один из файлов проекта не будет пропущен;</li><br> <li> эффективную процедуру сопровождения проекта после выгрузки на сервер: вы сможете с минимальными затратами обновлять отдельные файлы или целые папки проекта, не опасаясь нарушить исходную структуру сайта;</li><br> <li> возможность выполнения операций, связанных с сопровождением сайта (типа поиска и замены, проверки ссылок) на всем проекте, устраняя необходимость их повторения для каждого файла в отдельности.</li><br> Дополнительное преимущество в использовании проекта состоит в том, что в HomeSite предусмотрена возможность интеграции с системами управления версиями (Source System Control - - SSC), установленными на компьютере пользователя. После установления связи с одной из таких систем (например, с Microsoft Visual SourceSafe), HomeSite обеспечивает выполнение всех необходимых операций по контролю без непосредственного запуска SSC.<br><td><br> </tr> </table><br><br> <h1>Создание нового проекта</h1> </h2><br> Хотя создание проекта в HomeSite не требует физического объединения файлов в одной папке, тем не менее с целью облегчения публикации сайта и повышения эффективности его последующего сопровождения рекомендуется хранить все файлы проекта в одной корневой папке. Поэтому формирование проекта следует начинать с создания корневой папки на жестком диске вашего компьютера (для удобства дальнейшего изложения назовем ее New_Pro и будем считать, что она находится на диске С:/).<br> Вес последующие действия по созданию проекта выполняются с помощью элементов управления, имеющихся на вкладке Project окна ресурсов (в исходном состоянии она пуста).<br> Итак, для создания нового проекта необходимо:<br> <li> 1. В правом верхнем углу окна ресурсов щелкнуть на кнопке New Project<br><br> (альтернативный вариант — выбрать в меню Project главного окна команду New Project).</li><br> <li> 2. В открывшемся диалоговом окне New Project (рис. 2.3) ввести следующие данные: </li><br> <li>Project Name — имя проекта; будем считать, что оно совпадает с названием корневой папки проекта — New_Pro', </li><br> <li>Location of project file — расположение файла проекта (в эту папку будет помещен и файл проекта, для рассматриваемого примера — это файл New_Pro.apj)\ адрес можно ввести либо вручную, либо воспользовавшись находящейся справа кнопкой; разместим наш проект в корневой папке проекта; если установлен флажок Add all subfolders, and include files of the following types (Добавить все вложенные папки и включить файлы следующих типов), то в состав проекта будут автоматически включены все вложенные папки, а также файлы, имеющие тип из приведенного ниже раскрывающегося списка File Types (Типы файлов); папка New_Pro пока пуста, поэтому флажок сработает «вхолостую»;</li><br> <li> File Types — список типов файлов, которые могут быть автоматически включены в состав проекта при его создании; список содержит два пункта: <br> <li> All Files (Все файлы);</li><br> <li> перечень типов файлов, выбранных пользователем; этот перечень устанавливает все типы файлов, которые могут быть использованы в качестве ресурсов узла;</li><br> <li> при выборе второго пункта он становится доступен для редактирования, и вы сможете удалить из него лишние типы или добавить необходимые; типы файлов в перечне должны быть разделены точкой с запятой.</li><br> <li> 3. Щелкнуть на кнопке ОК.</li><br> <img src="image/sozdanie-novogo-proekta_1.gif" alt="Создание нового проекта"> <br> Рис. 2.З. Окно мастера создания проекта<br> После завершения описанной процедуры в окне ресурсов будет представлена начальная структура проекта (рис. 2.4).<br> Список ресурсов (Resources) представляет собой список файлов проекта, упорядоченный по типам (без учета распределения файлов по папкам); в исходном состоянии список содержит два раздела: HTML-документы (HTML Documents) и графические файлы (image files), как показано на рис. 2.5.<br> <img src="image/sozdanie-novogo-proekta_2.gif" alt="Создание нового проекта"><br> Рис. 2.4. Начальная структура проекта<br> <img src="image/sozdanie-novogo-proekta_3.gif" alt="Создание нового проекта"><br> Рис. 2.5. Исходный состав списка ресурсов<br> Еще до того, как вы сформируете файловую структуру проекта и начнете наполнять папки проекта файлами различных типов, целесообразно скорректировать список ресурсов таким образом, чтобы он в наибольшей степени соответствовал замыслам разработчика. Например, если вы не предполагаете использовать в публикации рисунки в формате PNG, то следует удалить этот тип файлов из числа графических ресурсов; если вы планируете включать в страницы Flash-фильмы, то их можно описать как отдельный вид ресурсов.<br> Чтобы добавить в список ресурсов новый раздел, необходимо:<br> <li>1. Щелкнуть правой кнопкой мыши на корневом элементе списка (на значке Resources) и в контекстном меню выбрать единственную имеющуюся там команду Add Resource... (Добавить ресурс).</li><br> <li> 2. В открывшемся диалоговом окне (рис. 2.6) ввести параметры раздела ресурсов:</li><br> <li> в поле Resource Name (Имя ресурса) ввести подходящее наименование раздела (например, раздел с Flash-фильмами может называться Flash);</li><br> <li> в поле Resource Filter (Фильтр ресурса) ввести список расширений файлов, соответствующих данному типу ресурсов (разделив их точкой с запятой).</li><br> <li>3. Щелкнуть на кнопке ОК.</li><br> Новый раздел будет добавлен в список ресурсов, как показано на рис. 2.7 (список автоматически упорядочивается по алфавиту).<br> <img src="image/sozdanie-novogo-proekta_4.gif" alt="Создание нового проекта"><br> Рис. 2.6. Диалоговое окно для установки параметров раздела списка ресурсов<br> <img src="image/sozdanie-novogo-proekta_5.gif" alt="Создание нового проекта"><br> Рис. 2.7. Список ресурсов после добавления нового раздела<br> Если требуется скорректировать название или параметры фильтра одного из имеющихся разделов списка ресурсов, необходимо:<br> <li>1. Щелкнуть правой кнопкой мыши на значке раздела и в контекстном меню выбрать команду Properties... (Свойства).</li><br> <li> 2. В открывшемся диалоговом окне (см. рис. 2.6) внести необходимые изменения и щелкнуть на кнопке ОК.</li><br> Чтобы удалить раздел ресурсов, следует в его контекстном меню выбрать команду Remove Resource (Удалить ресурс).<br> Новый проект не обязательно создавать с нуля. Если вы имеете в своем распоряжении проект, структуру которого вы хотели бы использовать в качестве основы для построения нового сайта, можно поступить следующим образом:<br> <li> 1. Создать на диске корневую папку для нового проекта. </li><br> <li>2. На вкладке Projects окна ресурсов щелкнуть на кнопке New Project и в открывшемся диалоговом окне New Project (см. рис. 2.3) ввести имя и размещение нового проекта.</li><br> <li> 3. Закрыть новый проект в окне ресурсов.</li><br> <li> 4. Вручную (точнее, средствами Windows) заменить apf-файл нового проекта АРЕ-файлом проекта-прототипа.</li><br> <li>5. Переименовать АРЕ-файл в соответствии с названием нового проекта.</li><br> <li> 6. Открыть новый проект в окне ресурсов и внести в него необходимые изменения.</li><br> Если вы хотите использовать в новом проекте не только структуру, но и HTML-файлы проекта-прототипа, то их также следует скопировать (сохраняя размещение по папкам) в корневую папку нового проекта.<br><td><br> </tr> </table><br><br> <h1> Иллюстрированный самоучитель по Macromedia HOMESITE </h1> <h1>Дерево тегов</h1> </h2><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> <img src="image/derevo-tegov_1.gif" alt="Дерево тегов"><br> Рис. 3.48. Формат окна 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> <img src="image/derevo-tegov_2.gif" alt="Дерево тегов"><br> Рис. 3.49. Пример свертывания фрагментов документа с помощью Tag Tree<br> Чтобы развернуть свернутый фрагмент в окне документа, следует развернуть соответствующий тег в дереве и еще раз щелкнуть на кнопке Collapse document...<br> Кроме этой кнопки, на панели инструментов окна Tag Tree имеется еще одна — Refresh (Обновить). Она позволяет обновить (построить заново) дерево тегов после редактирования документа.<br> Если дерево тегов не умещается в окне Tag Tree, нижнюю границу окна можно переместить с помощью мыши, как показано на рис. 3.48. При этом, разумеется, изменится размер окна Tag Inspector.<br> <td><br> </tr> </table><br><br> <h1>Функция Auto Completion</h1> </h2><br> Эта сервисная функция автоматически добавляет в код документа закрывающий элемент для тех конструкций, синтаксис которых этого требует. Например, такой конструкцией является комментарий в HTML-документе: он начинается с символов <!- и завершается символами ->.<br> Функция работает следующим образом: как только вы введете последний символ открывающей последовательности, она добавит завершающую последовательность.<br> Параметры функции устанавливаются на вкладке Auto Completion диалогового окна Sellings. На ней имеются следующие элементы управления (рис. 3.23):<br> <li> флажок Enable auto completion (Разрешить автоматическое завершение); если флажок установлен, то пользователь может скорректировать список конструкций, для которых будут вставляться символы завершения;</li><br> <li> список парных символов, для которых разрешено автоматическое завершение; список реализован в виде таблицы, состоящей из двух столбцов: <br> <li>Trigger Siring (Строка переключения) — столбец содержит список символов (или комбинаций символов), играющих роль открывающей скобки;</li><br> <li>Completion String (Строка завершения) — столбец содержит список символов (или комбинаций символов), играющих роль закрывающей скобки;</li><br> <li> кнопка Add (Добавить); щелчок на ней открывает диалоговое окно, в котором можно ввести новую комбинацию символов (рис. 3.24); дополнительно в этом окне с помощью трех переключателей можно задать положение курсора после автоматической вставки закрывающей скобки: <br> <li> Place cursor after the completion string (Поместить курсор после завершающей строки);</li><br> <li> Place cursor before the completion string (Поместить курсор перед завершающей строкой);</li><br> <li> Select the text as shown (Выбрать текст как показано) — после автоматической вставки «закрывающей скобки» текст будет выделен в соответствии с образцом, заданным в поле Trigger String или Completion String',</li><br> <li> кнопка Edit (Правка), с помощью которой можно вызвать то же диалоговое, окно и внести изменения в выбранную в списке комбинацию символов;</li><br> <li> кнопка Delete (Удалить) обеспечивает удаление из списка выбранного элемента.</li><br> <img src="image/funkcija-auto-completion_1.gif" alt="Функция Auto Completion"><br> Рис. 3.23. Окно установки параметров функции Auto Completion<br> <img src="image/funkcija-auto-completion_2.gif" alt="Функция Auto Completion"><br> Рис. 3.24. Диалоговое окно для изменения списка комбинаций символов<br> <td><br> </tr> </table><br><br> <h1>Функция Code Template</h1> </h2><br> Данная функция обеспечивает автоматическую подстановку фрагментов HTML-кода вместо некоторого статического текста, используемого в качестве заменителя, или псевдонима реального кода. Разработчики HomeSite используют для обозначения таких псевдонимов термин Template (шаблон). Например, если вы используете в своей публикации встроенные таблицы стилей, то вместо тега <style type-«text/css»> можете ввести шаблон st.<br> Механизм подстановок позволяет существенно сократить время на ручной ввод часто встречающихся конструкций и, кроме того, свести к минимуму число возможных ошибок.<br> <img src="image/funkcija-code-template_1.gif" alt="Функция Code Template"><br> Рис. 3.25. Вкладка Code Template диалогового окна Settings<br> Чтобы использовать шаблон при вводе кода, необходимо:<br> <li> 1. С помощью элементов управления, имеющихся на вкладке Code Template диалогового окна Settings (рис. 3.25), создать требуемый шаблон.</li><br> <li>2. В документе ввести шаблон и нажать комбинацию клавиш <Ctrl>+J (при этом курсор должен находиться непосредственно за последним символом шаблона).</li><br> Вкладка Code Template содержит:<br> <li> список шаблонов, реализованный в виде таблицы, которая состоит из двух столбцов: <br> <li>Keyword (Ключевое слово) — перечень существующих шаблонов, то есть тех самых «псевдонимов», которые могут быть использованы в документе;</li><br> <li>Description (Описание) — краткое пояснение к шаблону;</li><br> <li> окно просмотра, в котором отображается реальный код, соответствующий выбранному в списке шаблону;</li><br> <li> кнопка Add (Добавить); щелчок на ней открывает диалоговое окно, в котором можно ввести информацию о новом шаблоне (рис. 3.26);</li><br> <li> кнопка Edit (Правка), с помощью которой можно вызвать то же диалоговое окно и внести изменения в описание шаблона;</li><br> <li> кнопка Delete (Удалить) обеспечивает удаление из списка выбранного элемента .</li><br> <img src="image/funkcija-code-template_2.gif" alt="Функция Code Template"><br> Рис. 3.26. Диалоговое окно для описания шаблона<br> Если вы используете большое количество шаблонов и забыли какой-либо из них, то можете оперативно воспользоваться списком имеющихся шаблонов. Для этого достаточно установить курсор в любой свободной позиции редактируемого документа и нажать комбинацию клавиш <Ctrl>+J. В результате на экране появится список (рис. 3.27), в котором вы можете выбрать необходимый шаблон и вставить его в документ, нажав клавишу <Enter> (в документ будет помещен реальный код).<br> <img src="image/funkcija-code-template_3.gif" alt="Функция Code Template"><br> Рис. 3.27. Интерактивный список шаблонов<br><td><br> </tr> </table><br><br> <h1>Функция Tag Completion</h1> </h2><br> Данная функция автоматически вставляет закрывающий тег для последнего введенного незакрытого парного тега. Закрывающий тег вставляется в код страницы после ввода правой угловой скобки для открывающего тега.<br> Параметры функции устанавливаются на вкладке Tag Completion диалогового окна Settings. На ней имеются следующие элементы управления (рис. 3.21):<br> <li> флажок Enable tag completion (Разрешить вставку закрывающих тегов); если флажок установлен, то пользователь может скорректировать список тегов, для которых будут вставляться закрывающие теги;</li><br> <li> список тегов, для которых разрешена вставка парного тега;</li><br> <li> кнопка Add (Добавить); нажав се, вы откроете диалоговое окно, в котором можно ввести наименование добавляемого тега (рис. 3.22); при добавлении нового элемента требуется определенная аккуратность, поскольку HomeSite не контролирует синтаксис вводимого тега; правда, в отличие от окна параметров функции Tag Insight, здесь предусмотрена кнопка Edit (Правка), с помощью которой можно вызвать то же диалоговое окно и исправить допущенную ошибку;</li><br> <li> кнопка Delete (Удалить) обеспечивает удаление из списка выделенного элемента.</li><br> Использование функции можно временно запретить, щелкнув на соответствующей кнопке на панели инструментов редактора кода (см. рис. 3.1).<br> <img src="image/funkcija-tag-completion_1.gif" alt="Функция Tag Completion"><br> Рис. 3.21. Окно установки параметров функции Tag Completion<br> <img src="image/funkcija-tag-completion_2.gif" alt="Функция Tag Completion"><br> Рис. 3.22. Диалоговое окно для изменения списка закрываемых тегов<br> <td><br> </tr> </table><br><br> <h1>Функция Tag Insight</h1> </h2><br> Функция Tag Insight (Предсказатель тегов) — это одна из сервисных функций, входящих в состав редактора кода. Она реализована в виде нескольких всплывающих списков, с помощью которых выполняется опережающий ввод наименований тегов и их атрибутов при «ручном» редактировании кода страницы.<br> Эффект применения функции Tag Insight состоит в следующем.<br> Когда вы начинаете вводить с клавиатуры очередной тег, и вставляете в код страницы открывающую угловую скобку, в позиции ввода появляется (возможно, с некоторой задержкой) список тегов. По мере ввода очередного символа имени тега список автоматически прокручивается, избавляя вас от необходимости искать в нем нужный пункт (рис. 3.17).<br> <img src="image/funkcija-tag-insight_1.gif" alt="Функция Tag Insight"> <br> Рис. 3.17. Эффект применения функции Tag Insight<br> После того, как в списке будет выбран требуемый тег, остается только нажать клавишу <Enter>, и тег будет вставлен в код страницы. Обратите внимание, что в этом списке некоторые теги представлены по несколько раз — в сочетании с наиболее часто применяемыми атрибутами. Но и на этом возможности функции Tag Insight не исчерпываются. Если после вставки тега вы начинаете вводить его атрибут, то в окне редактирования появится новый список - - список атрибутов, разрешенных для данного тега (рис. 3.18, слева). В том случае, когда для атрибута может быть установлено одно из стандартных значений, то на экране появляется третий список — список возможных значений атрибута (рис. 3.18, справа).<br> <img src="image/funkcija-tag-insight_2.gif" alt="Функция Tag Insight"><br> Рис. 3. 18. Ввод атрибутов тега с помощью функции Tag Insight<br> Пользователю предоставлено право изменять некоторые параметры функции Tug Insight. Они размещены на вкладке Tag Insight диалогового окна Settings (рис. 3.19).<br> <img src="image/funkcija-tag-insight_3.gif" alt="Функция Tag Insight"><br> Рис. 3.19. Вкладка Tag Insight диалогового окна Settings<br> К ним относятся:<br> <li> флажок Enable Tag Insight... (Разрешить автоматическую вставку тега); если он установлен, то данная функция может использоваться при редактировании страницы;</li><br> <li> ползунковый регулятор Delay before displaying tag insight (Задержка перед включением автоматической вставки); регулятор позволяет установить задержку (в секундах) перед появлением списка тегов на экране;</li><br> <li> флажок Enable Tag Insight Tag List (Разрешить использование списка тегов); если флажок снят, то список тегов на экран не выводится, используется только список атрибутов; если же флажок установлен, то пользователь может скорректировать список тегов, который будет появляться на экране;</li><br> <li> список тегов, который должен отображаться на экране при автоматической вставке;</li><br> <li> кнопка Add (Добавить); нажав ее, вы откроете диалоговое окно, в котором можно ввести наименование добавляемого тега (при необходимости -- вместе с каким-либо атрибутом, рис. 3.20);</li><br> <li> кнопка Delete (Удалить) обеспечивает удаление из списка выделенного элемента.</li><br> Замечание<br><br> При добавлении нового элемента в список тегов следует быть достаточно внимательным, поскольку HomeSite не контролирует синтаксис вводимого тега и его атрибута.<br> <img src="image/funkcija-tag-insight_4.gif" alt="Функция Tag Insight"><br> Рис. 3.20. Диалоговое окно для изменения списка тегов<br> Чтобы использовать функцию Tag Insight для введенного рапсе тега или атрибута, необходимо ввести после имени тега (или атрибута) пробел.<br> Вы можете временно отказаться от услуг функции Tag Insight, щелкнув соответствующую кнопку на панели инструментов редактора кода (см. рис. 3.1).<br><td><br> </tr> </table><br><br> <h1>Функция Tag Validation</h1> </h2><br> Данная функция позволяет проверять корректность фрагментов HTML-кода страницы, не дожидаясь окончания разработки страницы. Применение функции эффективно в том случае, если имя тега вводится вручную. Проверка выполняется после того, как будет введена закрывающая угловая скобка. Если имя тега введено правильно, то в строке состояния главного окна HomeSite появляется сообщение Tag Validated (Тег корректен). В противном случае в строке состояния выводится на красном фоне сообщение о том, что тег с таким именем в описании текущей версии языка не обнаружен (рис. 3.28).<br> <img src="image/funkcija-tag-validation_1.gif" alt="Функция Tag Validation"><br> Рис. 3.28. Результат применения функции Tag Validation<br> Следует отмстить, что в HomeSite помимо функции Tag Validation предусмотрено использование еще двух инструментов синтаксического контроля документов: встроенной утилиты Validator (Синтаксический анализатор) и внешнего приложения - - CSE HTML Validator производства фирмы AI Internet Solutions, которое может быть интегрировано с HomeSite (если оно установлено на компьютере). Оба эти инструмента значительно мощнее функции Tag Validation. Описание работы и настройки параметров встроенной утилиты Validator приведено в разделе Тестирование страниц главе Тестирование сайта и выгрузка на удаленный сервер.</a><br> Доступ к настраиваемым параметрам всех трех инструментов осуществляется посредством элементов управления вкладки Validation диалогового окна Settings. На ней имеются следующие элементы (рис. 3.29):<br> <img src="image/funkcija-tag-validation_2.gif" alt="Функция Tag Validation"><br> Рис. 3.29. Окно установки параметров функции Tag Validation<br> <li> список версий языков создания Web-докумeнтов, для которых поддерживается синтаксический контроль с помощью утилиты Validator; список представляет собой таблицу из двух столбцов: <br> <li> Version (Версия) - - наименование дочерней версии (конкретного подмножества тегов);</li><br> <li> Parent Version (Родительская версия) -- наименование стандартизованной версии языка, на основе которой получена дочерняя версия;</li><br> <li> кнопка Validator Settings... (Параметры синтаксического анализатора); щелчок на кнопке приводит к открытию панели свойств синтаксического анализатора;</li><br> <li> гипертекстовая ссылка CSE HTML Validator, которая обеспечивает переход на Web-сайт фирмы-производителя указанного продукта (http:// \www.htmlvalidator.com): этой ссылкой имеет смысл воспользоваться в том случае, если на вашем компьютере не установлен CSE HTML Validator;</li><br> <li> флажок Use CSE HTML Validator when validating the entire document (Использовать CSE HTML Validator после завершения разработки документа); если флажок поставлен, то диагностика документа будет выполняться только перед тем, как вы решите сохранить его на диске; кроме того, установка данного флажка делает доступными две кнопки, расположенные под ним: Configure CSE (Конфигурация CSE) и CSE Options (Параметры CSE);</li><br> <li> флажок Tag validation validates the... (Проверка корректности тега...); он управляет автоматическим включением функции Tag Validation: если флажок установлен, то проверка каждого введенного тега будет выполняться автоматически, как только вы напечатаете в документе правую угловую скобку; этот флажок связан с кнопкой Tag Validation на панели инструментов редактора кода -- чтобы изменить его состояние, достаточно щелкнуть эту кнопку (и наоборот).</li><br> <td><br> </tr> </table><br><br> <h1>Функциональные возможности редактора кода</h1> </h2><br> Вес действия по вводу и редактированию кода Web-документа выполняются на вкладке Edit окна документа.<br> Для ввода и правки кода Web-документа вы можете использовать:<br> <li> непосредственный набор текста на клавиатуре;</li><br> <li> вставку текста через буфер обмена;</li><br> <li> включение содержимого файла, выбранного в окне ресурсов;</li><br> <li> вставку повторно используемых фрагментов (Snippets);</li><br> <li> сервисные функции: <br> <li> завершения строки - - Auto Completion,</li><br> <li> вставки имен тегов и атрибутов — Tag Insight;</li><br> <li> завершения парных тегов — Tag Completion;</li><br> <li> вставки атрибутов функции — Function Insight;</li><br> <li> подстановки фрагментов — Code Templates.</li><br> Для упрощения работы с отдельными фрагментами и блоками текста редактор кода поддерживает операции прямого манипулирования (перетаскивание фрагмента в другую позицию), а также «многоместный» буфер обмена.<br> Кроме того, как уже было сказано, в процессе работы с кодом вы всегда можете обратиться к одному из дополнительных инструментов, имеющихся в составе HomeSite.<br> Эффективность работы с большими документами существенно зависит от читабельности текста. Поэтому в составе редактора кода имеются средства управления визуальным представлением кода:<br> <li> цветовая подсветка синтаксических конструкций используемого языка;</li><br> <li> автоматическое форматирование текста с учетом синтаксиса;</li><br> <li> функция свертывания/развертывания текстовых фрагментов;</li><br> <li> управление параметрами шрифта; </li><br> <li> управление отображением скрытых символов;</li><br> <li> управление выводом номеров строк.</li><br> Для ускорения выбора требуемой функции или изменения режима работы редактора кода предназначены два основных механизма:<br> <li> собственная панель инструментов; </li><br> <li> контекстные меню.</li><br> Некоторые кнопки, имеющиеся на панели инструментов редактора кода, были описаны в первой главе (раздел «Организация пользовательского интерфейса», рис. 1.5).<br> Ниже приведены пояснения к остальным кнопкам панели инструментов (рис. 3.1):<br> <li> Close Active Document (Закрыть активный документ) — закрывает текущий (активный) документ;</li><br> <li> Indent (Отступ) — сдвигает активную строку (в которой находится курсор) или выбранный фрагмент текста на одну позицию табуляции вправо;</li><br> <li> Unindent (До сдвига) -- отменяет результат однократного сдвига;</li><br> <li> Tag Insight -- кнопка-переключатель, которая разрешает или запрещает использование функции Tag Insight,</li><br> <li> Tag Completion -- кнопка-переключатель, которая разрешает или запрещает использование функции Tag Completion;</li><br> <img src="image/funkcionalnye-vozmozhnosti-redaktora-koda_1.gif" alt="Функциональные возможности редактора кода"><br> Рис. 3.1. Панель инструментов редактора кода<br> <li> Tag Validation — кнопка-переключатель, которая разрешает или запрещает использование функции Tag Validation;</li><br> <li> Open in Macromedia Dreamweaver/Ultradev (Открыть в Dreamweaver/ Ultradev) -- обеспечивает загрузку текущего документа в визуальный редактор Dreamweaver (если вместо него на компьютере установлено приложение Macromedia Ultradev, то документ будет загружен в него). </li><br> Команды, имеющиеся в контекстном меню редактора кода, разделены на несколько групп. Некоторые из них являются контекстно-зависимыми, другие — нет. В общем случае в меню присутствуют следующие команды (рис. 3.2):<br> <img src="image/funkcionalnye-vozmozhnosti-redaktora-koda_2.gif" alt="Функциональные возможности редактора кода"><br> Рис. З.2. Основной формат контекстного меню редактора кода<br> <li> Edit Current Tag (Редактировать текущий тег) — открытие диалогового окна редактора тегов, соответствующего выбранному в документе тегу;</li><br> <li> Insert Tag (Вставить тег) -- вызов утилиты Tag Chooser,</li><br> <li> Insert Expression (Вставить выражение) — вызов редактора выражений;</li><br> <li> Edit Include File (Редактировать включенный файл) — вызов приложения, ассоциированного с файлом, ссылка на который выбрана в документе;</li><br> <li> Close (Закрыть) — закрывает текущий документ;</li><br> <li> File (Файл) - - каскадное меню, содержащее некоторые команды из меню File главного окна HomeSite;</li><br> <li> Cut (Вырезать), Сору (Копировать), Paste (Вставить) — стандартные команды редактирования, выполняемые с использованием буфера обмена;</li><br> <li> Insert Dale/Time (Вставить дату/время) — каскадное меню, которое обеспечивает выбор формата и вставку в активную позицию документа текущего значения даты и времени;</li><br> <li> Select Full Tag (Выбрать тег) - - выбор (выделение) тега, в пределах которого находится курсор, включая открывающую и закрывающую угловые скобки (рис. 3.3, вверху); для парных тегов данная команда обеспечивает выбор фрагмента документа от левой угловой скобки открывающего тега до правой угловой скобки закрывающего тега (рис. 3.3, внизу);</li><br> <li> Selection (Выбранное) - - каскадное меню, которое содержит команды редактирования выбранного фрагмента; подробнее их применение будет рассмотрено в следующем подразделе;</li><br> <li> группа команд, предназначенных для свертывания и развертывания фрагментов текста (Collapse Current Selection и др.); работа с ними описана в подразделе «Управление визуальным представлением документа».</li><br> Контекстное меню тега <IMG>, описывающего параметры сенсорной карты, дополнительно к перечисленным выше содержит команду Edit Image Map (Редактировать сенсорную карту), которая обеспечивает вызов утилиты Image Map Editor.<br> <img src="image/funkcionalnye-vozmozhnosti-redaktora-koda_3.gif" alt="Функциональные возможности редактора кода"><br> Рис. 3.3. Результат применения команды Select Full Tag<br><td><br> </tr> </table><br><br> <h1>Инспектор тегов</h1> </h2><br> Чтобы перейти в режим работы с Tag Inspector, необходимо:<br> <li> 1. В окне ресурсов открыть вкладку Tag Inspector.</li><br> <li> 2. В окне документа щелкнуть мышью на том теге, атрибуты которого вы хотели бы изменить (если тег парный, то щелкать следует на открывающем теге).</li><br> После этого в нижней части окна ресурсов, отведенной для Tag Inspector, появится имя редактируемого (активного) тега и список его допустимых атрибутов (рис. 3.43).<br> <img src="image/inspektor-tegov_1.gif" alt="Инспектор тегов"><br> Рис. 3.43. Формат HomeSite при вызове Tag Inspector<br> Рассмотрим подробнее интерфейс инспектора тегов (рис. 3.44). В верхней части окна отображается, кроме имени активного тега, собственная панель инструментов Tag Inspector, которая содержит пять кнопок:<br> <li> Edit Tag Definitions (Редактировать определение тега) — вызов утилиты редактирования определений тегов; </li><br> <li> Version Specific (Специфическая версия) — вывод информации по специфической версии данного тега (если таковая имеется); </li><br> <li> Categorized (По категориям) - - список атрибутов упорядочивается по категориям; подробнее об этом режиме будет сказано немного позже; </li><br> <li> Alphabetically Z-to-A (В алфавитном порядке от Z к А) — список атрибутов упорядочивается по алфавиту, но в обратном порядке; </li><br> <li> Alphabetically A-to-Z (В алфавитном порядке от А к Z) — список атрибутов упорядочивается по алфавиту в обычном порядке.</li><br> Собственно окно инспектора тегов представляет собой список, состоящий из двух столбцов:<br> <li> в левом приведен перечень атрибутов, разрешенных для данного тега, а также список событий, поддерживаемых для соответствующего элемента страницы в Dynamic HTML;</li><br> <li> в ячейках правого столбца отображаются значения атрибутов либо (если ячейка сопоставлена событию) - - вид обработчика события.</li><br> <img src="image/inspektor-tegov_2.gif" alt="Инспектор тегов"><br> Рис. 3.44. Интерфейс окна Tag Inspector<br> Способ ввода значения атрибута зависит от типа атрибута: если для него существуют предопределенные значения, то они могут быть выбраны из раскрывающегося списка, связанного с ячейкой. Чтобы активизировать список, требуется щелкнуть либо в ячейке с именем атрибута, либо в ячейке значения.<br> Чтобы вставить значение атрибута в код документа, следует нажать клавишу <Entеr>.<br> Выбор обработчика события несколько сложнее и состоит из двух этапов:<br> <li> 1. Сначала в раскрывающемся списке, связанном с ячейкой правого столбца, требуется выбрать язык сценария (VBScript или JavaScript), как показано на рис. 3.45.</li><br> <li> 2. Затем в открывшемся дополнительном окне выбрать или ввести имя функции-обработчика (рис. 3.46) и щелкнуть на кнопке ОК.</li><br> <img src="image/inspektor-tegov_3.gif" alt="Инспектор тегов"> <br> Рис. 3.45. Выбор языка сценария<br> <img src="image/inspektor-tegov_4.gif" alt="Инспектор тегов"><br> Рис. 3.46. Выбор обработчика события<br> После выполнения описанной процедуры Tag Inspector сгенерирует соответствующий код заголовка сценария и вызов функции-обработчика и поместит их в текст редактируемого документа. <br> Подробнее о создании интерактивных страниц с помощью HomeSite рассказано в главе Создание интерактивных страниц.<br> В некоторых случаях удобнее работать со списком атрибутов, упорядоченном по категориям. Чтобы перейти в такой формат, достаточно щелкнуть на кнопке Categorized на панели инструментов инспектора тегов.<br> В данном случае под категорией атрибута разработчики HomeSite понимают один из следующих признаков (рис. 3.47):<br> <li> является атрибут обязательным или нет; если тег может использоваться без атрибутов, то вес его допустимые атрибуты входят в категорию необязательных (Optional); обязательные атрибуты относятся к категории Required; если атрибут является обязательным только для языка HTML, то он входит в категорию Required HTML;</li><br> <li> определен ли атрибут в версии HTML 4.0; если да, то он входит в категорию «HTML 4.0»;</li><br> <li> тип и версия броузера, который поддерживает данный атрибут.</li><br> Поскольку приведенные выше признаки не являются взаимоисключающими, то один и тот же атрибут может входить одновременно в несколько категорий (как, например, атрибут WIDTH тега <TABLE>, см. рис. 3.47).<br> Если редактируемый тег имеет большое количество атрибутов, то для улучшения зрительного восприятия списка атрибутов вы можете свернуть те категории, которые вас не интересуют. Для этого достаточно щелкнуть мышью на кнопочке с символом «-», расположенной возле названия категории.<br> <img src="image/inspektor-tegov_5.gif" alt="Инспектор тегов"> <br> Рис. 3.47. Упорядочивание атрибутов тега по категориям<br> <td><br> </tr> </table><br><br> <h1>Настройка параметров редактора кода</h1> </h2><br> Общие параметры работы редактора кода могут быть скорректированы с помощью элементов управления, размещенных на вкладке Editor диалогового окна Settings (рис. 3.30).<br> <img src="image/nastrojka-parametrov-redaktora-koda_1.gif" alt="Настройка параметров редактора кода"><br> Рис. 3.30. Вкладка Editor диалогового окна Settings<br> Всего таких параметров более двух десятков, поэтому обратим внимание читателя лишь на те, которые представляются наиболее важными:<br> <li> набор символов (кодовая таблица), используемый при создании документа; этот параметр задастся посредством двух раскрывающихся списков: Font (Шрифт) и Charset (Набор символов): подробнее об управлении кодировкой документа см. раздел Управление кодировкой текстовых файлов главы Знакомство с HomeSite</a>;</li><br> <li> цвет символов текста (содержания) документа и цвет фона окна документа; эти параметры устанавливаются с помощью раскрывающихся списков Foreground color и Background color соответственно; на эти два параметра мы указали только для того, чтобы подчеркнуть: они влияют лишь на визуальное представление документа в окне редактора кода и совершенно не связаны с цветовой схемой документа и фоном окна броузера при просмотре документа (то есть с атрибутом BGCOLOR тега <BODY>);</li><br> <li> автоматическая установка отступа для следующей строки; выше уже отмечалось, что правильное форматирование документа значительно повышает его читабельность; чтобы разрешить автоотступ, следует установить флажок Auto indent в списке параметров Options;</li><br> <li> возможность перетаскивания фрагментов текста с помощью мыши определяется состоянием флажка Allow text drag-and-drop;</li><br> <li> возможность «отката» (отмены операции) после сохранения файла на диске; определяется состоянием флажка Allow undo after save;</li><br> <li> использование двойных и одиночных кавычек в качестве разделителей между словами; использование кавычек в языках разметки не стандартизовано, поэтому в разных версиях броузеров их присутствие или, наоборот, отсутствие, может интерпретироваться по-разному; вы можете разрешить или запретить использование двойных и одиночных кавычек в качестве разделителей, изменив состояние флажков Double quote as word delimiter и Single quote as word delimiter,</li><br> <li> возможность импорта HTML-кода из документов, созданных другими приложениями, в виде обычного текста; применение такой возможности даст ощутимый эффект при импорте из тех приложений, которые используют собственные дополнительные параметры разметки (к таким приложениям относится, например, MS Word); в качестве иллюстрации к сказанному на рис. 3.31 приведены результаты двух вариантов импорта содержимого HTML-файла, созданного с помощью MS Word: слева вверху -- без очистки, справа внизу -- тот же фрагмент, импортированный как гладкий текст; чтобы воспользоваться функцией очистки, следует установить флажок Treat HTML dropped from external applications as plain text;</li><br> <li> возможность автоматического преобразования имен символов, имеющих в кодовой таблице ASCII код больше 127, в их представление; эта возможность реализуется при установке флажка Automatically convert extended characters (characters above ASCII 127...);</li><br> <li> длина строки (в символах); этот параметр устанавливается с помощью дискретного счетчика Right Margin Position,</li><br> <li> число мест в буфере обмена; значение параметра устанавливается с помощью дискретного счетчика Maximum clipboard entries, no умолчанию значение равно 36; если емкость буфера исчерпана, самое старое значение будет замещено новым; максимально допустимое число мест равно 200.</li><br> <img src="image/nastrojka-parametrov-redaktora-koda_2.gif" alt="Настройка параметров редактора кода"><br> Рис. 3.31. Пример использования функции очистки HTML-кода<br> <td><br> </tr> </table><br><br> <h1>Основные инструменты</h1> <table border=1><br> <tr> <td>Основные инструменты<br> Все операции по разработке страниц выполняются в окне документа (его интерфейс был подробно описан вразделе Организация пользовательского интерфейса в главе «Знакомство с HomeSite»</a>).<br> Это окно является как бы общей строительной площадкой, на которой размещается редактируемая страница, и на которой вы можете поочередно (или совместно) использовать различные инструменты, предоставляемые HomeSite. Такими инструментами являются:<br> <li> Code Editor (Редактор кода) -- текстовый редактор, обеспечивающий правку документа в текстовом режиме с поддержкой синтаксиса используемого языка; в состав редактора кода входит несколько сервисных функций, которые повышают эффективность работы пользователя (например, Tag Insight, которая обеспечивает автоматический ввод имен тегов и атрибутов); подробно сервисные функции редактора кода будут рассмотрены в следующем разделе;</li><br> <li> Tag Editor (Редактор тегов) -- это набор диалоговых окон, каждое из которых предназначено для установки значений атрибутов конкретного тега;</li><br> <li> Quick Bar (Панель быстрой вставки) — набор панелей с кнопками, обеспечивающих совместное использование функций редактора кода и редактора тегов;</li><br> <li> Tag Chooser (Выборщик тегов) — утилита, которая обеспечивает просмотр и вставку в текст документа тегов из любого поддерживаемого HomeSite языка разметки; при необходимости из этой утилиты автоматически вызывается Tag Inspector;</li><br> <li> Tag Inspector (Инспектор тегов) -- панель, в которой содержится полный список тегов и их атрибутов, соответствующий указанному в документе типа DTD; Tag Inspector позволяет быстро отредактировать значение конкретного атрибута выбранного тега;</li><br> <li>Tag Tree (Дерево тегов) —- панель, в которой иерархическая структура документа отображается в виде дерева тегов; основное предназначение дерева тегов - - быстрая навигация по коду документа;</li><br> <li> Code Sweeper (Чистильщик кода) -- специальная утилита, предназначенная для синтаксически-зависимого форматирования кода документа; в составе HomeSite имеется шесть вариантов чистильщика, настроенных на работу с конкретным языком, и кроме того, пользовательский вариант, который соответствует варианту, используемому по умолчанию; параметры всех вариантов чистильщика могут настраиваться пользователем;</li><br> <li> Code Validator (Синтаксический анализатор кода) — утилита, которая обеспечивает диагностирование синтаксических ошибок в коде документа;</li><br> <li> Link Checker (Контролер ссылок) — утилита, способная проверять корректность внешних ссылок, ссылок на локальные HTML-файлы, а также ссылок на связанные с ними графические и мультимедийные файлы;</li><br> <li> Checker Spelling (Контролер правописания) -- утилита, которая обеспечивает выявление орфографических ошибок в документе;</li><br> <li> TopStyle Lite -- внешнее приложение, интегрированное с HomeSite и предназначенное для работы с каскадными таблицами стилей (CSS);</li><br> <li> Image Map Editor (Редактор сенсорных карт) — утилита, предназначенная для создания и редактирования сенсорных карт (карт-изображений).</li><br> В данной главе описаны инструменты, непосредственно относящиеся к редактированию страницы (Tag Editor, Tag Tree, Tag Inspector и частично — Quick Bar). Средства диагностирования и контроля рассмотрены в главе Тестирование сайта и выгрузка на удаленный сервер, a TopStyle Lite в главe Разработка страниц публикации. Редактору сенсорных карт посвящен отдельный раздел главы Разработка навигационной схемы сайта.<br> <td> </tr> </table><br><br> <h1>Панель быстрой вставки</h1> </h2><br> На самом деле панель быстрой вставки (Quick Bar) не является самостоятельным инструментом редактирования документа. Это всего лишь посредник, обеспечивающий быстрый и удобный доступ к таким инструментам. Тем не менее в процессе работы над документом невольно начинаешь воспринимать панель быстрой вставки как своеобразный швейцарский десантный нож с несколькими десятками лезвий: тут тебе и отвертка, и штопор, и пилочка для ногтей...<br> Панель быстрой вставки состоит из нескольких вкладок, каждая из которых предназначена для работы с определенной категорией элементов страницы (рис. 3.38). Набор вкладок, отображаемых на экране, а также состав кнопок на вкладке может настраиваться пользователем (подробнее о процедуре настройки будет сказано ниже).<br> <img src="image/panel-bystroj-vstavki_1.gif" alt="Панель быстрой вставки"> <br> Рис. 3.38. Панель Quick Bar<br> В общем случае Quick Bar обеспечивает выполнение следующих операций:<br> <li> автоматическую вставку в текст документа тега с установленными по умолчанию значениями атрибутов, а также тегов, не требующих обязательных атрибутов;</li><br> <li> вызов диалогового окна редактора тегов, соответствующего вставляемому тегу;</li><br> <li> вызов мастеров, обеспечивающих автоматическую генерацию фрагментов кода;</li><br> <li> активизацию утилиты JavaScript Tree, предназначенной для вставки в документ фрагментов кода на JavaScript.</li><br> Как уже было сказано, вы можете изменять состав вкладок панели Quick Bar, набор и расположение кнопок на вкладке, а также расположение панели и отдельных вкладок на экране. Существуют два механизма настройки панели Quick Bar:<br> <li> на основе прямого манипулирования (то есть с помощью мыши);</li><br> <li> с помощью элементов управления диалогового окна Customize (Настройка), вызываемого одноименной командой из меню Options главного окна HomeSite.</li><br> Чтобы с помощью мыши удалить ненужную вкладку или переместить ее в другую позицию на экране, необходимо:<br> <li> 1. Установить указатель на элемент перемещения вкладки; при этом на экране появится всплывающая подсказка с названием вкладки (рис. 3.39, вверху).</li><br> <li> 2. Нажать левую кнопку мыши, переместить контур вкладки в новую позицию и отпустить кнопку; вкладка будет представлена в отдельном окне (рис. 3.39, внизу).</li><br> <li> 3. Если необходимо изменить положение вкладки, перетащить се с помощью мыши, зацепив за полосу заголовка.</li><br> <li> 4. Если требуется закрыть вкладку, щелкните на кнопке с крестиком.</li><br> <img src="image/panel-bystroj-vstavki_2.gif" alt="Панель быстрой вставки"><br> Рис. 3.39. Изменение конфигурации панели быстрой вставки<br> Альтернативный способ удалить вкладку щелкнуть правой кнопкой мыши в любой позиции панели Quick Bar и в открывшемся контекстном меню щелкнуть на имени вкладки. Аналогичным образом можно и восстановить вкладку на экране. Однако при этом она отображается как отстыкованная. Чтобы вернуть се в состав панели, достаточно перетащить ее мышью на свободное место в правой части панели.<br> Чтобы изменить взаимное расположение вкладок, необходимо:<br> <li>1. Щелкнуть правой кнопкой мыши в любой позиции панели Quick Bar и в открывшемся контекстном меню выбрать, команду Organize Quick Bar...</li><br> <li> 2. В открывшемся диалоговом окне (рис. 3.40) выбрать вкладку и с помощью кнопок со стрелками переместить се в нужную позицию. . Для изменения состава кнопок на любой вкладке панели Quick Bar следует воспользоваться диалоговым окном Customize (рис. 3.41).</li><br> <img src="image/panel-bystroj-vstavki_3.gif" alt="Панель быстрой вставки"><br> Рис. 3.40. Диалоговое окно для изменения взаимного расположения вкладок<br> <img src="image/panel-bystroj-vstavki_4.gif" alt="Панель быстрой вставки"><br> Рис. 3.41. Диалоговое окно Customize<br> Чтобы добавить на вкладку новую кнопку, необходимо:<br> <li> 1. Выбрать вкладку в списке Visible Toolbar (Видимые панели инструментов); образец вкладки появится в поле Toolbar, расположенном в верхней части окна;</li><br> <li> 2. В списке имеющихся кнопок установить указатель мыши на значок добавляемой кнопки и перетащить его (значок) в поле Toolbar.</li><br> <li> 3. Если требуется добавить кнопку, отсутствующую в списке, щелкните на кнопке Add Custom Button (Добавить пользовательскую кнопку), в открывшемся диалоговом окне укажите параметры новой кнопки и затем выполните п. 2.</li><br> Чтобы удалить кнопку с вкладки, достаточно перетащить значок кнопки за пределы поля Toolbar.<br><br> Если требуется восстановить прежние параметры панели Quick Bar, щелкните на кнопке Reset to Defaults (Восстановить параметры по умолчанию).<br> Подробнее технология использования панели быстрой вставки описана в других главах, применительно к созданию конкретных элементов страницы.<br> <td><br> </tr> </table><br><br> <h1>Работа с фрагментами текста и блоками</h1> </h2><br> Редактор кода поддерживает большое число операций, выполняемых над выбранным фрагментом кода страницы. С целью ускорения работы пользователя для многих из этих операций предусмотрены горячие клавиши и вызов через контекстное меню.<br> В таблице 3.1 приведены способы быстрого выбора (выделения) требуемого фрагмента.<br> Таблица. 3.1. Способы быстрого выбора (выделения) фрагмента текста<br> <table border=1><br> <tr VALIGN="TOP"> <td VALIGN="TOP" "34"> Выбираемый фрагмент<br> <td><br> <td VALIGN="TOP" "34"> Способ выбора<br> <td><br> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "50"> Слово (неразрывная последовательность символов)<br> <td><br> <td VALIGN="TOP" "50"> Дважды щелкнуть на слове левой кнопкой мыши<br> <td><br> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "50"> Строка<br> <td><br> <td VALIGN="TOP" "50"> Щелкнуть мышью слева от первого символа строки<br> <td><br> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "90"> Последовательность строк<br> <td><br> <td VALIGN="TOP" "90"> Установить указатель мыши слева от первого символа первой строки выделяемого фрагмента и, не отпуская кнопку мыши, протащить указатель до конца последней строки<br> <td><br> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "69"> Произвольным фрагмент, начиная от текущей позиции курсора<br> <td><br> <td VALIGN="TOP" "69"> Нажать клавишу <Shift> и, удерживая се, щелкнуть на последнем символе выделяемого фрагмента<br> <td><br> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "90"> Непарный тег (вместе с атрибутами)<br> <td><br> <td VALIGN="TOP" "90"> Нажать клавишу <Ctrl> и, удерживая се, дважды щелкнуть в любой позиции между открывающей и закрывающей угловыми скобками<br> <td><br> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "69"> Парный тег (вместе с содержимым)<br> <td><br> <td VALIGN="TOP" "69"> Нажать клавиши <Shift> и <Ctrl> и, удерживая их, дважды щелкнуть либо внутри открывающего, либо внутри закрывающего тега<br> <td><br> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" "72"> Открывающий или закрывающий тег мирного тега<br> <td><br> <td VALIGN="TOP" "72"> Нажать клавишу <Ctrl> и, удерживая ее, дважды щелкнуть на открывающем или закрывающем теге<br> <td><br> </tr> </table><br> Над выбранным фрагментом текста могут быть выполнены как стандартные операции редактирования (Вырезать, Копировать и т. д.), так и специфические, учитывающие синтаксис языка разметки.<br> Специфические команды редактирования выбранного фрагмента входят в состав каскадного меню Selection, которое, в свою очередь, является одним из пунктов контекстного меню редактора кода (рис. 3.4). Ниже рассмотрены некоторые из команд этого меню:<br> <img src="image/rabota-s-fragmentami-teksta-i-blokami_1.gif" alt="Работа с фрагментами текста и блоками"><br> Рис. З.4. Состав команд меню Selection<br> <img src="image/rabota-s-fragmentami-teksta-i-blokami_2.gif" alt="Работа с фрагментами текста и блоками"><br> Рис. З.5. Пример использования команды Convert Lines to Ordered List<br> <li> Convert Lines to Ordered List (Преобразовать в упорядоченный список) — преобразование произвольной последовательности строк документа в нумерованный список посредством автоматической вставки соответствующих тегов форматирования; пример использования команды показан на рис. 3.5; </li><br> <li> Convert Lines fa Unordered List (Преобразовать в неупорядоченный список) — преобразование произвольной последовательности строк документа в маркированный список посредством автоматической вставки соответствующих тегов форматирования;</li><br> <li> Convert Lines to Table (Преобразовать в таблицу) -- преобразование произвольной последовательности строк документа в таблицу; при этом содержимое каждой строки помещается в отдельную строку таблицы, в один столбец, как показано на рис. 3.6; рамки для ячеек таблицы по умолчанию не используются;</li><br> <li> Add Line Breaks <br> (Добавить разрыв строки <br>) — в позицию, определяемую текущим положением курсора, вставляется тег перехода на новую строку;</li><br> <li> Strip Tags (Убрать теги) - - удаление тегов в выбранном фрагменте; при удалении тегов содержание, заключенное между открывающим и закрывающим тегами парного тега, сохраняется; если в выбранном фрагменте имеется несколько тегов, они будут удалены все; пример использования команды показан на рис. 3.7;</li><br> <li>Strip Outermost Tags (Убрать охватывающие теги) — удаление тегов в выбранном фрагменте; данная команда отличается от предыдущей тем, что если в выбранном фрагменте имеется несколько тегов, то будет удален самый внешний (относительно содержания) парный тег; результат применения этой команды к фрагменту, приведенному на рис. 3.7, слева, показан на рис. 3.8;</li><br> <li> Convert to Uppercase (Преобразовать к верхнему регистру) - - все строчные символы в выбранном фрагменте преобразуются в прописные (включая наименования тегов и их атрибутов);</li><br> <li> Convert to Lowercase (Преобразовать к нижнему регистру) — вес прописные символы в выбранном фрагменте преобразуются в строчные (включая наименования тегов и их атрибутов).</li><br> <img src="image/rabota-s-fragmentami-teksta-i-blokami_3.gif" alt="Работа с фрагментами текста и блоками"><br> Рис. З.6. Пример использования команды Convert Lines to Table<br> <img src="image/rabota-s-fragmentami-teksta-i-blokami_4.gif" alt="Работа с фрагментами текста и блоками"><br> Рис. З.7. Пример использования команды Strip Tags<br> Любой фрагмент текста документа может быть сохранен в качестве повторно используемого блока (Snippet, в дальнейшем — просто «блок») и затем помещен в тот же или в другой документ.<br> <img src="image/rabota-s-fragmentami-teksta-i-blokami_5.gif" alt="Работа с фрагментами текста и блоками"><br> Рис. 3.8. Результат применения команды Strip Outermost Tags<br> Чтобы создать блок, необходимо:<br> <li> 1. Выбрать в документе требуемый фрагмент и поместить его в буфер обмена.</li><br> <li>2. В окне ресурсов перейти на вкладку Snippets, щелкнуть в пустой позиции правой кнопкой мыши и в контекстном меню выбрать команду Create Folder (Создать папку); по умолчанию новая папка для хранения «отрывков» создается в каталоге Ноmе Site 5\User Data\Snippets.</li><br> <li> 3. Щелкнуть правой кнопкой мыши на значке папки и в контекстном меню выбрать команду Add Snippet (Добавить фрагмент).</li><br> <li>4. В открывшемся диалоговом окне (рис. 3.9) вставить в поле Start Text из буфера фрагмент документа (при необходимости его можно ввести и с клавиатуры), в поле Description указать имя отрывка (в качестве имени можно использовать любую последовательность символов, допустимую в качестве имени файла).</li><br> <li> 5. Щелкнуть на кнопке ОК.</li><br> <img src="image/rabota-s-fragmentami-teksta-i-blokami_6.gif" alt="Работа с фрагментами текста и блоками"><br> Рис. З.9. Диалоговое окно Snippet <br> Замечание<br><br> Поле End Text, присутствующее в диалоговом окне Snippet, используется в том случае, когда блок представляет собой парный тег, состоящий из двух частей. Первая из них (открывающий тег) помещается в поле Start Text, а вторая (закрывающий тег) — в поле End Text.<br> После создания нового блока на вкладке Snippets окна ресурсов появляется его значок (рис. 3.10).<br> Чтобы вставить содержимое блока в текущий документ, достаточно переместить курсор в позицию вставки и дважды щелкнуть мышью на значке блока в окне ресурсов.<br> Если необходимо вставить блок, состоящий из двух частей (Start Text и End Text), то в документе требуется выделить фрагмент, который должен быть окружен ими, и затем дважды щелкнуть мышью на значке блока.<br> Выбранный в документе фрагмент текста может быть свернут с целью повышения компактности экранного представления документа. Подробнее об этой функции рассказано в следующем подразделе.<br><td><br> </tr> </table><br><br> <h1>Работа с Tag Inspector и Tag Tree</h1> </h2><br> Инспектор тегов Tag Inspector обладает примерно теми же функциональными возможностями, что и редактор тегов, однако в некоторых случаях его применение оказывается более удобным по трем причинам:<br> <li> Tag Inspector не мешает просмотру текста документа, поскольку для работы с ним используется окно ресурсов;</li><br> <li> интерфейс Tag Inspector обеспечивает более гибкий переход от редактирования одного тега к редактированию другого, а также более удобный выбор конкретного редактируемого атрибута;</li><br> <li> в Tаg Inspector реализована более полная поддержка синтаксиса языков сценариев.</li><br> Еще большая функциональность Tag Inspector достигается при его совместном использовании с другой утилитой -- деревом тегов (Tag Tree), интерфейс которой также реализован на основе окна ресурсов. Основное предназначение Tag Tree - - быстрая навигация по документу, представленному в виде дерева тегов.<br> <td><br> </tr> </table><br><br> <h1>Редактор кода</h1> </h2><br> Хотя редактор кода является текстовым редактором, тем не менее объем операций, которые пользователь вынужден выполнять в нем вручную, сведен к минимуму. Обеспечивается это большим количеством сервисных функций, входящих в состав редактора, а также его тесной интеграцией с другими инструментами для работы с кодом (они были перечислены выше).<br><td><br> </tr> </table><br><br> <h1>Редактор тегов Tag Editor</h1> </h2><br> Редактор тегов фактически представляет собой своеобразную форму реализации мастера (или конструктора), который на основе полученной от пользователя информации генерирует различные элементы страницы. Соответственно, работа с редактором тегов заключается в установке различных параметров в отображаемых на экране диалоговых окнах.<br> Состав конкретных элементов управления, имеющихся в окне, зависит от создаваемого элемента страницы. Тем не менее, формат диалогового окна редактора тегов можно считать достаточно стандартным. Основные его элементы приведены на рис. 3.32.<br> <img src="image/redaktor-tegov-tag-editor_1.gif" alt="Редактор тегов Tag Editor"><br> Рис. 3.32. Пример диалогового окна редактора тегов<br> Как правило, окно редактора тегов содержит следующие вкладки:<br> <li> вкладку стандартизованных атрибутов тега; наименование этой вкладки включает название соответствующего тега (в приведенном на рис. 3.32 примере -- это вкладка HR Tag);</li><br> <li> вкладку Browser-specific (Специфические для броузера), на которой могут быть установлены атрибуты, введенные разработчиками конкретных броузеров; на этой вкладке возле поля каждого атрибута присутствует значок соответствующего броузера (рис. 3.33); все возможные значки броузеров и пояснения к ним приведены на рис. 3.34.</li><br> Замечание<br><br> В некоторых диалоговых окнах вкладка Browser-specific может отсутствовать; при наличии специфических атрибутов они просто помечаются соответствующим значком.<br> <img src="image/redaktor-tegov-tag-editor_2.gif" alt="Редактор тегов Tag Editor"><br> Рис. 3.33. Графическое обозначение специфических атрибутов<br> <img src="image/redaktor-tegov-tag-editor_3.gif" alt="Редактор тегов Tag Editor"><br> Рис. 3.34. Значки броузеров, используемые в диалоговых окнах редактора тегов<br> <li> вкладку Style Sheets/Accessibility (HTML 4.0) (Таблицы стилей/доступность - - для HTML 4.0), которая позволяет устанавливать значения дополнительных атрибутов тега, поддерживаемых только в HTML 4.0; эти атрибуты разделены на вкладке на две группы (рис. 3.35):</li><br> <li> связанные с описанием стиля элемента с помощью CSS;</li><br> <li> атрибуты, обеспечивающие наличие у страниц публикации свойства доступности (Accessibility);</li><br> Замечание<br><br> В свое время организация W3C выступила с инициативой, которая получила название Web Accessibility Initiative (Доступность Web). Ее суть состоит в том, что Web-публикации должны учитывать в первую очередь интересы и возможности потенциальных посетителей (например, отсутствие продвинутых аппаратно-программных средств, проблемы со зрением и т. д.). Компания Macromedia (как, впрочем, и автор предыдущих версий HomeSite — компания Allaire) поддержала эту инициативу. Правда, пока весьма простым способом — введя в диалоговые окна редактора тегов возможность установки атрибутов, обеспечивающих текстовую замену графических и мультимедийных элементов страниц.<br> <img src="image/redaktor-tegov-tag-editor_4.gif" alt="Редактор тегов Tag Editor"><br> Рис. 3.35. Формат вкладки Style Sheets/Accessibility (HTML 4.0)<br> <li> вкладку Events (HTML 4.0) (События), которая используется при создании интерактивных страниц на основе Dynamic HTML; эта вкладка позволяет задавать для элемента список событий и реакцию на них (рис. 3.36); подробнее о создании интерактивных страниц с помощью HomeSite рассказано в главе Разработка навигационной схемы сайта.</li><br> <img src="image/redaktor-tegov-tag-editor_5.gif" alt="Редактор тегов Tag Editor"><br> Рис. 3.36. Формат вкладки Events (HTML 4.0)<br> Помимо перечисленных выше вкладок, во всех диалоговых окнах редактора тегов имеются следующие элементы управления (см. рис. 3.32):<br> <li> флажки, управляющие использованием в документе кавычек:</li><br> <li> Quote all attributes (Использовать кавычки для всех атрибутов) - если флажок установлен, значения всех атрибутов тега будут заключены в кавычки;</li><br> <li> Single quotes on attributes (Одиночные кавычки для атрибутов) - флажок позволяет уточнить вид кавычек: если он установлен, то используются одиночные кавычки (апострофы);</li><br> <li> флажок Output attributes on single line (Выводить атрибуты в одной строке), который позволяет указать, следует ли каждый атрибут тега выводить на новой строке: если он установлен, то значения всех атрибутов выводятся на одной строке;</li><br> Замечание<br><br> Состояние указанных флажков, как и других элементов управления диалогового окна, влияет только на текущий (создаваемый или редактируемый) тег.<br> <li> две кнопки, управляющие выводом на экран справочной информации по тегу данного типа; кнопка Help обеспечивает вывод справки (точнее, соответствующего фрагмента спецификации) в подокне того же диалогового окна (рис. 3.37), а расположенная рядом с ней безымянная кнопочка — в отдельном окне.</li><br> <img src="image/redaktor-tegov-tag-editor_6.gif" alt="Редактор тегов Tag Editor"><br> Рис. 3.37. Вывод справки по тегу<br> Вызов редактора тегов выполняется одним из следующих способов:<br> <li> щелкнуть в окне документа правой кнопкой мыши на теге, атрибуты которого требуется изменить, и в контекстном меню выбрать команду Edit Current Tag (Редактировать текущий тег);</li><br> <li> установить курсор в позицию, куда требуется поместить новый тег, и щелкнуть соответствующую кнопку на панели быстрой вставки.</li><br> Второй способ является менее предсказуемым, поскольку при вставке некоторых тегов для них используются значения атрибутов, заданные по умолчанию. В этом случае диалоговое окно редактора'тегов на экран не выводится. Подробнее особенности работы с панелью быстрой вставки описаны в следующем подразделе, а также в других разделах этой главы (применительно к созданию конкретных элементов страницы).<br> <td><br> </tr> </table><br><br> <h1>Создание и сохранение документа</h1> </h2><br> <li> с помощью команды Open... меню File главного окна HomeSite либо с помощью одноименной кнопки панели инструментов этого окна; </li><br> <li> посредством выбора нужного документа в каскадном меню Recently Files из меню File главного окна HomeSite; </li><br> <li> с помощью команды Open from Web меню File главного окна HomeSite;</li><br> <li> с помощью команды Insert File... меню File главного окна HomeSite; в этом случае содержимое файла будет вставлено в указанную позицию активного документа;</li><br> <li> посредством двойного щелчка мышью на значке файла, представленного в одном из следующих списков: <br> <li> в списке файлов текущего каталога на вкладке Files 1 или Files 2 окна ресурсов; </li><br> <li> в списке файлов папки проекта на вкладе Projects окна ресурсов; </li><br> <li> в списке файлов ресурсов проекта на вкладке Projects;</li><br> <li> в дереве ссылок открытого документа на вкладке Site View окна ресурсов.</li><br> Редактируемый документ может быть сохранен на диске одним из следующих способов:<br> <li> с помощью команды Save из меню File главного окна HomeSite либо с помощью одноименной кнопки панели инструментов этого окна; документ будет сохранен под тем же именем и в том же каталоге, что и исходный файл;</li><br> <li> с помощью команды Save as... из меню File главного окна HomeSite; имя файла и каталог, в котором следует сохранить документ, выбирает пользователь; файлу присваивается расширение, заданное на вкладке File Settings диалогового окна Settings;</li><br> <li> с помощью команды Save as Template... из меню File главного окна HomeSite; имя шаблона выбирает пользователь; файл сохраняется в папке HomeSite 5\Wizards\Custom с расширением, заданным на вкладке File Settings диалогового окна Settings.</li><br> <td><br> </tr> </table><br><br> <h1>Управление визуальным представлением документа</h1> </h2><br> Цветовая подсветка синтаксических конструкций является наиболее эффективным средством повышения читабельности документа. Помимо повышения наглядности, этот механизм способствует также и усвоению синтаксиса языка.<br> HomeSite позволяет установить индивидуальную схему цветовой подсветки для каждого из поддерживаемых языков.<br> Параметры используемых цветовых схем размещены на вкладке Color Coding (Цветовая маркировка) диалогового окна Settings (рис. 3.11).<br> <img src="image/upravlenie-vizualnym-predstavleniem-dokumenta_1.gif" alt="Управление визуальным представлением документа"><br> Рис. 3.11. Вкладка Color Coding диалогового окна Settings<br> На этой вкладке имеются следующие элементы управления:<br> <li> список существующих схем; он реализован в виде таблицы, состоящей из трех столбцов: <br> <li> Scheme (Схема) - перечень наименований схем; по сути, этот столбец отражает перечень языков и их подмножеств, синтаксис которых способен распознавать HomeSite;</li><br> <li> Extensions (Расширения) - - каждая строка этого столбца содержит список расширении файлов, которые соответствуют данной схеме; на самом деле при открытии документа имеет место обратная зависимость: HomeSite выбирает схему подсветки на основе расширения открытого файла; если расширение отсутствует в списке, то используется схема, установленная по умолчанию;</li><br> <li> Default? (Использовать по умолчанию?) - - столбец содержит признак схемы, используемой по умолчанию; этот признак (Yes) может быть установлен только для одной из существующих схем;</li><br> <li> кнопка Edit Scheme (Редактировать схему); она обеспечивает открытие диалогового окна, предоставляющего возможность просмотра и изменения схемы, выбранной в списке; подробнее его формат будет рассмотрен ниже;</li><br> <li> кнопка Edit Extensions (Изменить расширения); она обеспечивает открытие диалогового окна, с помощью которого можно изменить список расширений файлов, связанных с данной схемой;</li><br> <li> кнопка Set as Default (Назначить используемой по умолчанию); она позволяет назначить выбранную в списке схему используемой по умолчанию.</li><br> Диалоговое окно для редактирования схемы имеет следующий формат (рис. 3.12):<br> <img src="image/upravlenie-vizualnym-predstavleniem-dokumenta_2.gif" alt="Управление визуальным представлением документа"><br> Рис. 3.12. Диалоговое окно для редактирования цветовой схемы<br> <li> список Elements (Элементы) содержит перечень элементов и синтаксических конструкций соответствующего языка; данный список связан с расположенными справа от него кнопками и находящимся ниже окном просмотра;</li><br> <li> окно просмотра содержит своеобразный фрагмент документа, в котором представлены образцы всех элементов, имеющихся в списке Elements; окно является интерактивным: выбор некоторого элемента в нем приводит к выбору соответствующей категории в списке Elements, а также к изменению состояния упомянутых выше кнопок; благодаря этому вы имеете возможность не только изменить цвет выбранного элемента, но и получить информацию относительно его предназначения с точки зрения синтаксиса языка;</li><br> <li> кнопки Foreground (Передний план) и Background (Фон), входящие в группу элементов управления Current Element (Текущий элемент) обеспечивают доступ к палитрам, которые позволяют выбрать цвет шрифта и фона для элемента языка, выбранного в списке Elements; другие элементы управления из этой группы имеют следующее предназначение: <br> <li> флажки Use default (Использовать по умолчанию), связанные с кнопками Foreground и Background, позволяю! закрепить выбранные цвета как используемые пв умолчанию;</li><br> <li> флажки Bold (Полужирный), Italic (Курсив) и Underline (Подчеркнутый) позволяют установить соответствующие дополнительные атрибуты символов шрифта для синтаксических конструкций;</li><br> <li> кнопка Reset to Defaults (Вернуть параметры, используемые по умолчанию), расположенная в нижней части окна, обеспечивает отмену внесенных в схему изменений.</li><br> Следующая важная функция управления визуальным представлением документа -- это функция свертывания/развертывания текстовых фрагментов. Особенно эффективно ее применение при работе с большими документами, занимающими несколько экранов.<br> Каждый свернутый фрагмент представляется в окне документа специальным значком; подведя к такому значку указатель мыши, можно увидеть во всплывающем окне развернутый вариант фрагмента (рис. 3.13).<br> <img src="image/upravlenie-vizualnym-predstavleniem-dokumenta_3.gif" alt="Управление визуальным представлением документа"><br> Рис. 3. 13. Представление в окне документа свернутых фрагментов<br> В HomeSite предусмотрены два способа свертывания фрагментов:<br> <li> ручной, при котором пользователь может свернуть любой фрагмент без учета его синтаксиса; </li><br> <li> автоматический, при котором достаточно указать HomeSite тип тега, для которого следует выполнить операцию.</li><br> Кроме того, пользователь имеет возможность изменять некоторые параметры визуального представления свернутых фрагментов.<br> Чтобы быстро свернуть произвольный фрагмент, необходимо выполнить следующие действия:<br> <li> Убедитесь, что в окне документа отображается служебное поле (Gutter); если нет -- щелкните на кнопке Show Gutter панели инструментов редактора кода.</li><br> <li> Любым наиболее удобным для вас способом выделите сворачиваемый фрагмент; при этом в служебном поле появится линия, отмечающая размер выделенного фрагмента, а на ее концах -- две небольшие кнопки с символами «-» (рис. 3.14).</li><br> <li> Щелкните левой кнопкой мыши на любой из двух кнопок; в результате выделенный фрагмент окажется свернут и заменен соответствующим значком (рис. 3.15).</li><br> <img src="image/upravlenie-vizualnym-predstavleniem-dokumenta_4.gif" alt="Управление визуальным представлением документа"><br> Рис. 3.14. Свертывание произвольного фрагмента <br> <img src="image/upravlenie-vizualnym-predstavleniem-dokumenta_5.gif" alt="Управление визуальным представлением документа"><br> Рис. 3.15. Представление свернутого фрагмента<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> <img src="image/upravlenie-vizualnym-predstavleniem-dokumenta_6.gif" alt="Управление визуальным представлением документа"><br> Рис. 3.16. Вкладка Collapsed Text диалогового окна Settings<br> К ним относятся:<br> <li>параметры шрифта надписи, выводимой на значке свернутого фрагмента; собственно тип шрифта выбирается с помощью раскрывающегося списка Font, размер символов устанавливается с помощью дискретного счетчика Size, а для выбора цвета символов служит раскрывающийся список Foreground color,</li><br> <li> цвет значка; он выбирается из раскрывающегося списка Background color,</li><br> <li> количество первых символов фрагмента, выводимых на значке; устанавливается с помощью дискретного счетчика Length (characters);</li><br> <li> возможность просмотра текста свернутого фрагмента; если флажок Show full text in him снят, то при установке указателя на значке фрагмента всплывающее окно не выводится; если флажок поставлен, то дополнительно с помощью дискретного счетчика Max no. of hint lines можно задать максимально допустимое число строк, отображаемых во всплывающем окне;</li><br> <li> сохранение выделения фрагмента после его развертывания; если флажок Show full text in hint поставлен, то после развертывания фрагмента он отображается в окне документа как выбранный (выделенный); такой режим удобен при краткосрочном развертывании, поскольку позволяет быстро вновь свернуть фрагмент (либо выполнить над ним какую-либо другую операцию, например удалить или копировать);</li><br> <li> возможность сохранения фрагментов в свернутом состоянии при записи документа на диск и при последующем открытии; такая возможность реализуется, если поставлен флажок Preserve collapsed text on file open/save; в этом случае с помощью дискретного счетчика Number of days to retain... можно задать количество дней, в течение которых в файле будет сохраняться информация о свернутых фрагментах.</li><br> Установленные значения параметров визуального представления значка свернутого фрагмента можно оценить с помощью окна предварительного просмотра Sample.<br> Замечания<br><br> 1. Свернутый фрагмент может быть перемещен в другую позицию с помощью мыши, как любой другой фрагмент документа.<br><br> 2. Разрешается создавать вложенные свернутые фрагменты, то есть внутри сворачиваемого фрагмента могут присутствовать другие свернутые фрагменты.<br> <td><br> </tr> </table><br><br> <h1>Установка глобальных параметров</h1> </h2><br> Под глобальными понимаются параметры, влияющие на работу всех рассмотрснных выше инструментов. Они относятся к двум аспектам работы с кодом:<br> <li> визуальному представлению кода в окне документа;</li><br> <li> выбору одного из возможных альтернативных вариантов кода.</li><br> Глобальные параметры устанавливаются с помощью элементов управления, размещенных на двух вкладках диалогового окна Settings:<br> Markup Languages (Языки разметки) -- параметры, применимые для всех языков, поддерживаемых HomeSite;<br><br> HTML/XHTML -- параметры, являющиеся специфическими для языков разметки HTML и XHTML.<br> На вкладке Markup Languages могут быть установлены следующие параметры (рис. 3.50):<br> <li> Lowercase all inserted lags — для имен тегов используются строчные буквы (то есть символы нижнего регистра);</li><br> <li> Always insert colors as hexadecimal values — значения цвета представляются шестнадцатеричным кодом;</li><br> <li> Force filenames to lowercase when inserting links — символы имен файлов в ссылках и URL приводятся к нижнему регистру;</li><br> <img src="image/50.gif" alt="Установка глобальных параметров"> <br> Рис. 3.50. Вкладка Markup Languages диалогового окна Settings<br> <li> When editing tags, return the output on a single line — после редактирования атрибутов тега с помощью Tag Editor все его атрибуты выводятся на одной строке, независимо от того, как текст документа был отформатирован ранее;</li><br> <li> Include closing <br> when inserting paragraph tag — при вставке тега параграфа <Р> после него автоматически вставляется закрывающий тег </Р>;</li><br> <li> Inserting numeric values surrounded by quotes (Tag Inspector) -- числовые значения атрибутов, установленные с помощью Tag Inspector, заключаются в кавычки;</li><br> <li> Minimize empty tags — если текущий документ является XHTML-доку-мснтом, то кнопки на панели QuickBar обеспечивают вставку свернутых вариантов тегов форматирования (например, вместо парного тега <BR> </BR> вставляется <BR />);</li><br> <li> Enforce required attribute validation (Tag Editor) - - редактор тега не вставляет тег в код страницы, если для всех обязательных атрибутов не заданы значения;</li><br> <li> Use <EM> tag in place of <l> —для установки стиля «курсив» вместо тега <1> используется тег <ЕМ>;</li><br> <li> Use <STRONG> tag in place of<B> — для установки стиля «полужирный» вместо тега <В> используется тег <STRONG>;</li><br> <li> Insert special characters as... — с помощью соответствующего списка выбирается формат представления в коде документа специальных символов; возможны три варианта: <br> <li> символ представлен его именем (например, для знака амперсанда -&атр);</li><br> <li> символ представлен его десятичным кодом в используемой кодовой таблице;</li><br> <li> символ представлен его шсстнадцатеричным кодом.</li><br> На вкладке HTML/XHTML могут быть установлены следующие параметры (рис. 3.51):<br> <img src="image/51.gif" alt="Установка глобальных параметров"><br> Рис. 3.51. Вкладка HTML/XHTML диалогового окна Settings<br> <li> Use <tille> of dragged documents as the link description — при создании ссылки на перетаскиваемый документ (файл) в качестве текста ссылки автоматически вставляется заголовок этого документа (подробнее о способах создания ссылок см. раздел «Текстовые ссылки» пятой главы);</li><br> <li> Display DTD selection dialog when the XHTML namespace is specified - при преобразовании HTML-документа в XHTML-докумснт на экран выводится диалоговое окно, позволяющее выбрать формат тега <!DOCTYPE>;</li><br> <li> Compatibility mode for older browsers — при работе с XHTML-доку-мснтом для некоторых тегов используются их альтернативные варианты, «понятные» ранним версиям броузеров;</li><br> <li> Use these tags when the "Align Center" toolbutton is pressed — данный параметр определяет результат использования кнопки Align Center, расположенной на вкладке Common панели быстрой вставки; по умолчанию щелчок на ней обеспечивает вставку в код документа тега <DIV> с атрибутом ALIGN="center"; вы можете изменить установку, введя требуемые значения в поля Start и End;</li><br> <li> Use these lags when the "Align Right" toolbutton is pressed — данный параметр определяет результат использования кнопки Align Right, расположенной на вкладке Common панели быстрой вставки; по умолчанию щелчок на ней обеспечивает вставку в код документа тега <DIV> с атрибутом align="right"; вы можете изменить установку, введя требуемые значения в поля Start и End;</li><br> <li> Use the VTML Tag Dialog for:... -- данный параметр обеспечивает выбор формата диалогового окна редактора тегов; альтернативные варианты существуют для трех тегов: <А>, <BODY> и <IMG>; если соответствующий флажок поставлен, то используется расширенный формат, в противном случае -- сокращенный; например, на рис. 3.52 показаны расширенный и сокращенный (стандартный) форматы для тега <А>.</li><br> <img src="image/52.gif" alt="Установка глобальных параметров"><br> Рис. 3.52. Расширенный и сокращенный (стандартный) форматы окон редактора тегов для тега <А><br> Завершая описание основных инструментов, предоставляемых HomeSite, отметим, что многие типовые операции по строительству сайта могут быть выполнены с помощью так называемых мастеров (Wizards). Каждый мастер является специализированным инструментом, то есть обеспечивает решение одной, достаточно узкой задачи. Поэтому наиболее полезные из них будут представлены при рассмотрении соответствующих этапов строительства.<br> <td><br> </tr> </table><br><br> <h1>Вставка тегов с помощью Tag Chooser</h1> </h2><br> Утилита Tag Chooser позволяет вставлять в текст документа теги или другие элементы кода из любого языка, поддерживаемого HomeSite.<br> Технология работы Tag Chooser во многом аналогична применению панели быстрой вставки: теги без атрибутов вставляются в документ автоматически, а в том случае, когда требуется установка значений атрибутов, Tag Chooser обращается за помощью к редактору тегов и открывает соответствующее диалоговое окно.<br> Чтобы активизировать Tag Chooser, необходимо щелкнуть правой кнопкой мыши в свободной позиции документа и в контекстном меню выбрать команду Insert Tag...(Вставить тег).<br> Окно Tag Chooser имеет следующий формат (рис. 3.42).<br> Оно разделено на два подокна:<br> <li> левое содержит список поддерживаемых языков, а также дерево категорий тегов для каждого языка;</li><br> <li> в правом отображается список тегов, относящихся к выбранной категории; для парных тегов отображаются открывающий и закрывающий теги.</li><br> <img src="image/vstavka-tegov-s-pomoshhju-tag-chooser_1.gif" alt="Вставка тегов с помощью Tag Chooser"><br> Рис. 3.42. Окно утилиты Tag Chooser<br> Чтобы добавить тег в код документа, достаточно дважды щелкнуть на его имени в правом подокне (если для тега требуется установить атрибуты, это приведет к открытию соответствующего диалогового окна редактора тега).<br> В нижней части окна, справа имеются две кнопки для вызова справки по выбранному тегу. Они работают так же, как и подобные кнопки редактора тегов: кнопка Help выводит справку непосредственно в окне утилиты Tag Chooser, а вторая кнопка открывает отдельное окно.<br> В общем случае вес теги языка подразделяются (создателями HomeSite) на четыре категории:<br> <li> General (Общие) - - стандартизованные теги;</li><br> <li> Browser-specific (Специфические для броузера) -- введенные разработчиками соответствующего броузера и, как правило, не поддерживаемые «конкурирующей фирмой»;</li><br> <li> Deprecated (Неодобряемые) - - теги, применение которых не рекомендуется консорциумом W3C;</li><br> <li> Obsolete (Устаревшие) -- устаревшие теги, которые не поддерживаются старшими версиями броузеров.</li><br> Важным достоинством утилиты Tag Chooser является то, что она реализована на основе так называемого нсмодального окна, то есть после вставки тега можно продолжать работать с документом, не закрывая окно утилиты. При необходимости размеры окна можно изменить с помощью мыши.<br> <td><br> </tr> </table><br><br> <h1> Иллюстрированный самоучитель по Macromedia HOMESITE </h1> <h1>Форматирование текста</h1> </h2><br> Кнопки для форматирования текста собраны в основном на вкладке Common. К ним, в частности, относятся следующие (рис. 4.8):<br> <img src="image/formatirovanie-teksta_1.gif" alt="Форматирование текста"><br> Рис. 4.8. Теги форматирования текста, представленные на вкладке Common<br> <li> Paragraph (Параграф) — обеспечивает вставку тега <Р>; тег помещается в код страницы без атрибутов, но (по умолчанию) с парным закрывающим тегом;</li><br> <li> Break (Разрыв) — обеспечивает вставку тега <BR>; тег помещается в код страницы без атрибутов;</li><br> <li> Non-breaking space (Неразрывный пробел) — обеспечивает вставку специального символа «неразрывный пробел»; по умолчанию символ добавляется в код страницы в виде последовательности ' ';</li><br> <li> Horizontal rule (Горизонтальный разделитель) — обеспечивает вставку тега <HR>; щелчок на кнопке приводит к открытию диалогового окна редактора тегов, позволяющего установить атрибуты тега; формат этого окна будет описан ниже;</li><br> <li> Align Center (Выравнивание по центру) — обеспечивает вставку в код страницы тега <DIV> с атрибутом ALIGN=«centcr»> и с парным закрывающим тегом; вставляемый тег и его атрибуты могут быть изменены пользователем (см. раздел «Установка глобальных параметров» третьей главы);</li><br> <li> Align right (Выравнивание по правому краю) — обеспечивает вставку в код страницы тега <DIV> с атрибутом ALIGN=«right»> и с парным закрывающим тегом; вставляемый тег и его атрибуты могут быть изменены пользователем (см. раздел «Установка глобальных атрибутов» третьей главы);</li><br> <li> DIV — обеспечивает вставку тега <DIV>; чтобы тег был помещен в код страницы, требуется установить его атрибуты в соответствующем диалоговом окне редактора тегов.</li><br> Многие теги форматирования текста являются парными. HomcSilc поддерживает два способа вставки парных тегов.<br> При первом вы сначала вставляете открывающий и закрывающий теги (щелкнув на соответствующей кнопке панели быстрой вставки), а затем помещаете между ними подлежащий форматированию фрагмент текста.<br><br> Второй способ применяется, когда форматируемый текст уже присутствует в документе. Например, если требуется вынести некоторый фрагмент текста в отдельный параграф, необходимо:<br> <li>1. Выделить фрагмент текста, подлежащий форматированию.</li><br> <li> 2. Щелкнуть на кнопке Paragraph.</li><br> В результате открывающий тег будет помещен перед фрагментом, а закрывающий -- после него (рис. 4.9).<br> <img src="image/formatirovanie-teksta_2.gif" alt="Форматирование текста"><br> Рис. 4.9. Автоматическое форматирование фрагмента текста<br> Тег <HR> обеспечивает удобный и эффективный способ форматирования больших текстовых фрагментов, а также позволяет в какой-то степени оживить страницу, если она не содержит других графических элементов.<br><br> В последних версиях броузеров для этого тега поддерживаются дополнительные атрибуты, позволяющие указывать цвет, ширину, расположение и некоторые /другие параметры разделителей. На рис. 4.10 показано окно редактора тегов, с помощью которого могут быть установлены следующие атрибуты тега <HR>:<br> <li> способ выравнивания разделителя по ширине страницы (атрибут ALIGN); значение выбирается из раскрывающегося списка Align;</li><br> <li> ширина разделителя (точнее, его длина) (атрибут WIDTH); значение вводится в текстовом поле Width;</li><br> <li> высота («толщина») разделителя (атрибут SIZE); значение вводится в текстовом поле Size; </li><br> <li> отсутствие «тени» (атрибут ); наличие атрибута определяется флажком No Shading (Без затенения): если он снят, то разделитель отображается с «тенью».</li><br> На вкладке Browser-specific можно дополнительно установить цвет разделителя (атрибут COLOR в настоящее время поддерживается только броузером MSIE).<br> <img src="image/formatirovanie-teksta_3.gif" alt="Форматирование текста"><br> Рис. 4.10. Окно редактора тегов для установки атрибутов тега <HR><br><td><br> </tr> </table><br><br> <h1>Инструмент Table Sizer</h1> <table border=1><br> <tr> <td>Инструмент Table Sizer<br> Данный инструмент (его название можно перевести как «разметчик таблиц») активизируется щелчком на кнопке Table Sizer вкладки Tables панели быстрой вставки. Хотя эта кнопка реализована как кнопка меню, она открывает окно, которое представляет собой, по сути своеобразного «мини-мастера»: с его помощью может быть быстро создана заготовка небольшой таблицы.<br> Окно содержит схематичное изображение структуры таблицы. Нажав кнопку мыши, следует выбрать в этой табличке ячейки, которые определяют число строк и столбцов создаваемой таблицы (рис. 4.31, слева). После того, как кнопка мыши будет отпущена, схематичное изображение таблицы закроется, а в код страницы будет помещен тег <TABLE>, содержащий требуемое число тегов <TR> и <TD> (рис. 4.31, справа).<br> <img src="image/index17_17.gif" alt="Инструмент Table Sizer"><br> Рис. 4.31. Создание таблицы с помощью инструмента Table Sizer<br> Обратите внимание, что в результате применения инструмента Table Sizer в код документа вставляются «голые» табличные теги, без единого атрибута. Поэтому применение Table Sizer можно рекомендовать лишь в тех случаях, когда создастся «набросок» таблицы. </td> </tr> </table><br><br> <h1>Общий подход к подготовке текстовых материалов</h1> </h2><br> Разумеется, стиль определяется в первую очередь характером освещаемой предметной области и спецификой вашей аудитории. Но при всем при том любому посетителю значительно проще будет воспринимать написанное, если вы станете придерживаться трех правил:<br> <li> не пишите длинно; всегда есть возможность разбить одно длинное предложение на два коротких;</li><br> <li> не используйте снисходительных интонаций; даже если вы считаете себя корифеем в данной области, вы должны быть благодарны читателю, посетившему ваши страницы;</li><br> <li> не используйте для выражения своих мыслей слова, в точном значении которых вы не до конца уверены.</li><br> Если текстовая часть документа занимает более двух экранов, позаботьтесь о разделении ее на фрагменты, каждый из которых будет иметь свой заголовок. Если же объем текста настолько велик, что фрагменты требуют дальнейшего разбиения, не стесняйтесь использовать подзаголовки более низких уровней (благо в HTML их предусмотрено шесть). При этом уровни заголовков должны изменяться последовательно: после заголовка первого уровня не следует применять заголовок третьего или четвертого уровней.<br> Надо сказать, что существующие HTML-редакторы не очень-то приспособлены для работы именно с текстовым содержимым документа. При всех достоинствах HomeSite это замечание относится и к нему. И хотя он позволяет применять различные варианты форматирования текста (подробнее о них рассказано ниже), но не обеспечивает наглядного представление структуры текстовой части Web-страницы. Разумеется, выполнив очередную операцию по форматированию текста, вы можете перейти в режим просмотра страницы с помощью броузера, однако это не совсем то, что требуется.<br> Вообще, большие фрагменты текста значительно удобнее набирать с помощью «офисных» текстовых редакторов, и затем конвертировать их в формат HTML. Правда, полученный таким образом документ во многих случаях содержит не совсем чистый HTML-код, сохраняя информацию об особенностях того инструмента, с помощью которого был создан. В частности, документ, созданный в MS Word, практически всегда содержит встроенные таблицы стилей, а так же фрагменты XML-кода. Во многих случаях эти элементы разметки оказы-<br><br> отся избыточными. В составе HomeSite имеются специальные средства, позволяющие выполнять чистку кода. Это набор утилит CodeSweeper, предназначенных для выполнения некоторых операций по преобразованию кода документа с учетом используемого языка разметки. Однако при борьбе с изыточностью CodeSweeper не очень эффективен. Значительно больший выигрыш можно получить от использования средств чистки кода, имеющихся в визуальном редакторе Dreamweaver.<br> Дополнительным преимуществом использования «офисных» текстовых докторов является возможность автоматической проверки орфографии и рас-ановки знаков препинания в русскоязычных текстах. Это тем более важно, го многие популярные HTML-редакторы (в том числе HomeSite) пока не русифицированы и не позволяют проверять правописание в русскоязычных публикациях.<br> Кстати говоря, грамматические ошибки, опечатки и неправильная расстановка знаков препинания вовсе не такая уж мелочь, как кажется некоторым вторам. Во-первых, обилие ошибок отвлекает от вдумчивого чтения и тем амым затрудняет восприятие смысла прочитанного. Во-вторых, ошибка может вообще исказить этот самый смысл (помните классику: «Казнить нельзя помиловать»?). В-третьих, большое количество опечаток и ошибок говорит о невысоких деловых качествах автора (несобранность, невнимательность и т. д.). И, наконец, в-четвертых, малограмотная речь способна вызвать недоверие к содержанию излагаемого материала. Вам это надо?<br> Итак, при создании больших страниц, насыщенных текстовым материалом, целесообразно придерживаться такой последовательности действий:<br> <li> 1. Создать документ в одном из «офисных» текстовых редакторов, обращая при этом внимание на его структурную организацию.</li><br> <li> 2. Выполнить проверку правописания.</li><br> <li>3. Конвертировать документ в HTML-формат и открыть его в HomeSite.</li><br> <li> 4. Оценить разбиение документа на разделы и подразделы, просмотрев в подключенных к HomeSite броузерах.</li><br> <li>5. Открыть документ в Dreamweaver и выполнить чистку кода.</li><br> После этого можно продолжить доводку дизайна страницы средствами HomeSite.<br> Замечание<br><br> Если разрабатываемая страница содержит текст на английском языке, то для проверки правописания можно воспользоваться имеющейся в составе HomeSite утилитой, которая называется Spell Checker. Для ее активизации достаточно щелкнуть одноименную кнопку на панели инструментов главного окна HomeSite.<br><td><br> </tr> </table><br><br> <h1>Основы технологии CSS</h1> <table border=1><br> <tr> <td height="20" class="Text"><br> Основы технологии CSS<br> Решение указанных проблем было найдено в 1996 году, когда Консорциумом 3W (WWW Consortium — W3C) была стандартизована технология каскадных (или иерархических) таблиц стилей (Cascading Style Sheets — CSS). Суть технологии CSS заключается в том, что она позволяет добавлять в HTML-код описание стиля страницы, содержащее такие атрибуты, как тип шрифта, цвет, отступы, способ выравнивания элементов текста и т. д. Другими словами, таблицы стилей по своему предназначению аналогичны шаблонам текстовых документов, используемым, например, в редакторе MS Word.<br> Используя CSS, Web-дизайнер может создать один файл с таблицей стиля и затем применить его ко всем страницам узла. Соответственно, любое изменение в таком файле приведет к автоматической корректировке всех использующих его страниц.<br> Иерархия таблиц стилей имеет два аспекта.<br> Во-первых, речь идет о том, что для одного Web-документа может существовать одновременно несколько таблиц стилей, образующих иерархию; например, может существовать таблица стилей, общая для всех страниц узла, но при этом для некоторых страниц может быть определен индивидуальный стиль. В таких случаях реализуется стиль самого нижнего уровня.<br> Во-вторых, иерархию образуют таблицы стилей, созданные автором узла (страницы) и посетителем: если созданные ими стили конфликтуют, то приоритет отдается авторскому стилю (хотя, следуя золотому правилу «клиент всегда прав», броузеры позволяют изменить иерархию на противоположную).<br> В настоящее время технологию CSS поддерживают броузеры Internet Explorer, Netscape Communicator и Opera версий 4.0 и выше. Однако на сегодняшний день существует несколько версий языка CSS, в силу чего одно и то же стилевое оформление страницы может отображаться разными броузерами по-разному. Считается, что стандартизованная версия CSS — CSS 1 — наиболее полно и корректно поддерживается броузерами Opera (версии 4.0 и выше) и MSIE (также версии 4.0 и выше). Тем не менее даже этими броузерами одна и та же страница, использующая стили, обрабатывается по-разному (рис. 4.36).<br> <img src="image/index21_1.gif" alt="Основы технологии CSS"><br> Рис. 4.36. Пример отображения одной и той же «стилизованной» страницы разными броузерами<br> Описание стилей, применяемых к документу в целом или к отдельным ег< элементам, может быть выполнено четырьмя способами: <br> <li> с помощью тега <LINK>, указывающего на внешнюю таблицу стилей</li><br> <li> с помощью тега <STYLE>, входящего в состав раздела заголовка документа; </li><br> <li> используя механизм импорта (включения в текст документа) внешней таблицы стилей; </li><br> <li> используя атрибут STYLE для конкретного элемента (элемент должен<br><br> находиться внутри тела документа).</li><br> Последний вариант является наименее предпочтительным, поскольку ot смешивает определение стиля с содержанием документа и тем самым своди! на нет все преимущества технологии CSS.<br> Как было отмечено выше, описание используемых стилей в отдельном файле имеет смысл в том случае, если вы планируете применять эти стили к нескольким страницам. Такой файл имеет расширение .ess и представляет собой обычный текстовый файл, содержащий описание на языке CSS необходимых стилей, Такой файл должен быть включен в ту же папку, что и остальные файлы сайта (к которым следует применить данный стиль), и размещен на Web-сервере.<br> Кроме того, в коде Web-страниц, которые будут использовать стили из этого файла, должна содержаться ссылка на него. Она создается с помощью тега <LINK>, располагающегося в заголовке страницы (то есть внутри тега <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/>):<br> <LINK REL =stylesheet TYPE="text/css" HREF="My_Style.css"><br> Первые два атрибута этого тега сообщают броузеру, что на этой странице используется CSS. Третий атрибут — HREF — указывает на файл, который содержит описание стилей. В качестве значения этого атрибута указывается либо относительный путь к файлу (в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются), либо полный URL (если файл стилей находится на другом сервере).<br><br> Если описание стилей располагается непосредственно в Web-странице, то на это указывает атрибут TYPE тега <STYLE>:<br> <STYLE TYPE ="tcxt/css">...</STYLE>.<br> CSS предоставляет возможность присваивать один и тот же стиль не всем однотипным элементам страницы подряд, а избирательно. Для этого используются атрибуты CLASS или ID.<br> Последние версии HTML (начиная с 3.2) позволяют устанавливать указанные атрибуты для любого элемента страницы.<br> Атрибут CLASS применяется в том случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (в том числе разнотипных, например, для H1 и Н2).<br> В частности, описание стиля для класса bold_text (имя класса разработчик выбирает сам) может выглядеть следующим образом:<br> .bold_text {font-weiqht: bold; text-aliqn: center}.<br> Оно означает, что все элементы класса bold_text будут отображаться жирным шрифтом с выравниванием по центру страницы.<br> Чтобы применить данный стиль к конкретному элементу страницы, необходимо указать для него соответствующее значение атрибута CLASS.<br> Например, конструкция <Р CLASS="bold_tcxi">Teкcт параграфа</Р> позволяет присвоить конкретному параграфу стиль класса bold_text, а конструкция <Н2 CLASS="bold_Text">Teкcт заголовка</Н2> обеспечивает применение того же стиля к некоторому заголовку второго уровня.<br> Следует иметь в виду, что при написании названия класса в атрибуте CLASS должен учитываться регистр символов, использовавшийся при описании стиля.<br> Назначение стилей с помощью атрибута ID выполняется в тех случаях, когда данный стиль предполагается применить к единственному элементу страницы, имеющему уникальный идентификатор ID. Существует и чисто формальный признак, обеспечивающий различие в описании стиля класса и стиля элемента: первый начинается с точки (.), второй — с символа #.<br> Например, можно описать стиль #redtext {color : red} и затем использовать его для установки красного цвета для текста параграфа с идентификатором redtext:<br> <Р /D=«redtext»>Teкст параграфа</Р>.<br> Кроме того, CSS позволяет переопределять стиль для стандартных тегов HTML. Например, если создать стиль li {background-color: #FFFFFO; font-size: 14px;}, то элементы любого списка будут выводиться на красном фоне с использованием 14 кегля.<br> Следует отметить, что при всей универсальности языка CSS наиболее интересные эффекты от применения CSS относятся непосредственно к дизайну создаваемых Web-страниц. Речь идет о том, что при описании стиля разрешается указывать значения отступов вокруг объектов как отрицательные величины. Это позволяет накладывать один «слой» текста на другой и получать весьма привлекательные (а иногда и достаточно неожиданные) результаты. Например, на приведенном выше рис. 4.36 показан относительно простой пример использования CSS для создания визуальных эффектов на странице только с помощью шрифтов — в нем не используется вообще никакой графики.<br> <td> </tr> </table><br><br> <h1>Поддержка CSS в HomeSite</h1> <table border=1><br> <tr> <td>Поддержка CSS в HomeSite<br> В HomeSite реализована поддержка CSS на двух уровнях: <br> <li> на уровне работы с CSS-файлами; по умолчанию файлы с расширением .ess относятся к Web-документам (Web Documents) и отображаются в списке файлов на вкладках Files и Projects окна ресурсов; для работы с ними в контекстном меню предусмотрены специальные команды (подробнее о них будет рассказано ниже);</li><br> <li> на уровне редактирования содержимого CSS-файла с учетом синтаксиса языка CSS; для этого предусмотрен целый ряд как собственных (встроенных) инструментов HomeSite, так и специальное внешнее приложение — TopStyle Lite, интегрированное с HomeSite.</li><br> В данном подразделе рассмотрены встроенные средства HomeSite для рабоп с CSS, а следующий подраздел полностью посвящен описанию TopStyle Lite.<br> Как было отмечено выше, CSS-файлы по умолчанию относятся к Web-док ментам и отображаются в списке файлов окна ресурсов. Контекстное меню CSS файла содержит три команды, специфические именно для файлов такого типа: <br> <li> Edit (Редактировать) — открытие файла в окне документа; при это производится настройка редактора кода на синтаксис языка CSS; визуально это отражается в использовании соответствующей схемы цветовой подсветки синтаксических конструкций CSS;</li><br> <li> Edit StyleSheet (Редактировать таблицу стилей) — вызов приложения TopStyle Lite в расширенном формате;</li><br> <li> Insert as Link (Вставить как ссылку) — вставка в код документа тег. <LINK> с атрибутами, необходимыми для использования внешней таблицы стилей (REL, TYPE и HREF); аналогичный результат можно получить, просто перетащив значок CSS-файла в код документа.</li><br> Замечания<br><br> 1. Несколько забегая вперед, отметим, что приложение TopStyle Lite может использоваться в составе HomeSite в двух форматах: расширенном, который обеспечивает редактирование CSS-файлов, и в сокращенном, предназначенном для редактирования атрибута STYLE отдельного элемента HTML-страницы.<br><br> 2. Если вы попытаетесь поместить значок CSS-файла не в заголовок, а в тело документа, на экране появится окно с предупреждением о том, что вы совершаете ошибку (не смертельную, но все же...).<br> HomeSite предоставляет возможность настройки цветовой схемы, используемой для CSS-файлов. Чтобы открыть окно для настройки схемы, необходимо в диалоговом окне Settings перейти на вкладку Color Coding, в списке схем выбрать пункт ess и щелкнуть на кнопке Edit Scheme. Это окно полезно тем, что позволяет познакомиться с основными конструкциями языка CSS (рис. 4.37). О назначении элементов управления окна редактирования цветовой схемы см. подраздел «Управление визуальным представлением документа» третьей главы. К встроенным средствам HomeSite для работы с CSS также относятся: <br> <li> диалоговые окна редактора тегов для установки атрибутов тегов <STYLE>, <LINK>, <DIV> и <SPAN>; </li><br> <li>специальные элементы управления в диалоговых окнах других тегов, а также наличие во всех окнах специальной вкладки StyleSheet/ Accessibility. </li><br> <img src="image/index22_1.gif" alt="Поддержка CSS в HomeSite"><br> Рис. 4.37. Окно установки параметров цветовой схемы CSS-файлов<br> Чтобы вставить в текст страницы тег <STYLE> с требуемыми атрибутам необходимо: <br> <li> 1. В позиции вставки (в заголовке документа) щелкнуть правой кнопки мыши и в контекстном меню выбрать команду Insert Tag... .</li><br> <li> 2. В открывшемся окне утилиты Tag Chooser выбрать категорию Formatting and Layout (Форматирование и компоновка), а в ней -раздел General.</li><br> <li> 3. В правом подокне в списке тегов дважды щелкнуть на теге <STYLE>.</li><br> <li>4. В открывшемся диалоговом окне редактора тегов установить необх димые параметры и щелкнуть на кнопке ОК.</li><br> С помощью окна редактора тегов для тега <STYLE> могут быть задан следующие параметры (рис. 4.38): <br> <li>на вкладке STYLE Tag — признак включения в код страницы символе HTML-комментария (определяется состоянием флажка Add HTM comment tags — добавить теги HTML-комментария); смысл этого признака состоит вот в чем: если тег <STYLE> оформить как комментарий, то броузеры, не поддерживающие CSS, этот фрагмент кода проигнорируют, а поддерживающие — «заглянут» внутрь комментария и обработают тег <STYLE>;</li><br> <li> на вкладке Content — собственно содержание тега, то есть описание стилей элементов страницы; вы можете внести правку непосредственно в многострочном текстовом поле, в котором отображается описание стилей; кроме того, на этой вкладке имеется кнопка вызова приложения TopStyle Lite в расширенном формате;</li><br> <img src="image/index22_2.gif" alt="Поддержка CSS в HomeSite"><br> Рис. 4.38. Окно установки атрибутов тега <STYLE><br> Замечание<br><br> Указанная кнопка имеет по сравнению с другими аналогичными кнопками редактора тегов две особенности: во-первых, в окнах других тегов такие кнопки размещены на вкладке Stylesheets/Accessibility, во-вторых, они обеспечивают вызов TopStyle Lite в сокращенном формате. <br> <li> на вкладке HTML 4.0 — два параметра, соответствующие атрибутам тега <STYLE>, предусмотренным спецификацией HTML 4.0: <br> <li> TYPE — указывает броузеру, что в тексте HTML-документа содержится описание стилей, либо сценарий на JavaScript; в первом случае атрибут принимает значение text/сss, во втором — text/ javascript; требуемое значение выбирается из раскрывающегося списка Туре;</li><br> <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/index22_3.gif" alt="Поддержка CSS в HomeSite"><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/index22_4.gif" alt="Поддержка CSS в HomeSite"><br> Рис. 4.40. Контекстное меню тега <LINK>, ссылающегося на CSS-файл<br> Для вставки в код страницы тегов <DIV> и <SPAN>, с помощью которых выполняется обращение к встроенной (то есть заданной в том же документе) таблице стилей, необходимо: <br> <li> 1. В позиции вставки (в теле документа) щелкнуть правой кнопкой мыши и в контекстном меню выбрать команду Insert Tag...</li><br> <li> 2. В открывшемся окне утилиты Tag Chooser выбрать категорию Formatting and Layout (Форматирование и компоновка), а в ней — раздел General.</li><br> <li>3. В правом подокне в списке тегов дважды щелкнуть на имени вставляемого тега (<DIV> или <SPAN>).</li><br> <li>4. В открывшемся диалоговом окне редактора тегов (рис. 4.41) перейти на вкладку StyleSbeet/Accessibility (для тега <SPAN> она открыта по умолчанию).</li><br> <li>5. В зависимости от уровня стиля (стиль класса или отдельного элемента) ввести его имя в поле Class или ID и щелкнуть на кнопке ОК.</li><br> Чтобы установить значение атрибута STYLE для любого элемента страницы, необходимо: <br> <li> 1. Щелкнуть правой кнопкой мыши на имени тега и в контекстном меню выбрать команду Edit Current Tag.</li><br> <li>2. В открывшемся диалоговом окне редактора тегов перейти на вкладку StyleSheet/Accessibility.</li><br> <li>3. Щелкнуть на кнопке Style Editor (Редактор стилей) и с помощью приложения TopStyle Lite описать параметры стиля; на панели инструментов TopStyle Lite щелкнуть на кнопке Done (Готово); приложение будет закрыто, а параметры стиля появятся в поле Style (рис. 4.42).</li><br> <li> 4. В окне редактора тегов щелкнуть на кнопке ОК.</li><br> В результате выполнения описанной процедуры в код тега будет добавлен атрибут STYLE с заданными параметрами.<br> <img src="image/index22_5.gif" alt="Поддержка CSS в HomeSite"><br> Рис. 4.41. Окна редактора тегов для тегов <D/V> и <SPAN><br> <img src="image/index22_6.gif" alt="Поддержка CSS в HomeSite"><br> Рис. 4.42. Вкладка StyleSheet/Accessibility диалогового окна редактора тегов </td> </tr> </table><br><br> <h1>Работа с графическими элементами</h1> </h2><br> HomeSite ориентирован на работу с наиболее распространенными графическими форматами Web — GIF, JPEG и PNG. Кроме того, поскольку многие броузеры, работающие под управлением Windows, понимают формат BMP, HomeSite поддерживает аналогичные операции и для этого формата. Чтобы включить BMP-файлы в число «избранных», следует добавить соответствующее расширение в список Web Images на вкладке File Settings диалогового окна Settings (рис. 4.20).<br> Замечание<br><br> В первой главе (см. раздел «Работа с файлами») было отмечено, что в список Web Images могут быть включены любые графические файлы, однако для всех них (кроме указанных выше четырех форматов) HomeSite поддерживает лишь две операции: просмотр в списке файлов в окне ресурсов и создание ссылки как на внешний ресурс (то есть как на любой не графический файл).<br> <img src="image/rabota-s-graficheskimi-jelementami_1.gif" alt="Работа с графическими элементами"><br> Рис. 4.20. Перечень графических форматов, распознаваемых HomeSite<br> С учетом приведенного выше замечания все последующее изложение относится к файлам указанных четырех типов.<br> Поскольку графика является достаточно своеобразным, и в то же время очень популярным средством формирования Web-страниц, то в HomeSite предусмотрены многочисленные и весьма эффективные механизмы добавления в страницы графических элементов. Мы рассмотрим три из них:<br> <li> вставка с помощью панели быстрой вставки;</li><br> <li> вставка из окна ресурсов;</li><br> <li> копирование из окна результатов.</li><br> Еще один важный аспект работы с графикой — создание сенсорных карт — вынесен в отдельный раздел пятой главы.<br><td><br> </tr> </table><br><br> <h1>Работа с таблицами стилей</h1> <table border=1><br> <tr> <td>Работа с таблицами стилей<br> Весьма сложно выбрать такой стиль оформления Web-узла, который отвечал бы как вкусам разработчика, так и интересам посетителей. Но, пожалуй, еще труднее многократно воспроизвести найденное удачное решение на всех страницах публикации, не забыв при этом тот или иной нюанс. И чем крупнее узел, тем острее встает проблема сохранения стиля на всех его страницах. А как быть в том случае, если первоначальный проект удалось улучшить уже после того, как узел, насчитывающий десятки страниц, был сдан в эксплуатацию? </td> </tr> </table><br><br> <h1>Разработка страниц публикации</h1> </h2><br> Несмотря на все достоинства описанных выше инструментов, ни один из них нельзя считать основным средством разработки HTML-страниц. Практика показывает, что наибольший эффект дает именно совместное их применение.<br> Итак, при создании новой страницы целесообразно придерживаться такой последовательности действий (предполагается, что эскиз страницы, выполненный на бумаге, находится перед вами):<br> <li> 1. На вкладке Location диалогового окна Settings выбрать шаблон, на основе которого будет создана «заготовка» будущей страницы.</li><br> <li> 2. В дереве проекта (на вкладке Projects окна ресурсов) выбрать папку, в которую следует поместить новый документ, и в ее контекстном меню выбрать команду Create New Document...; в открывшемся диалоговом окне указать имя файла.</li><br> <li>3. После того, как «заготовка» будет открыта в окне документа, установить общие параметры страницы.</li><br> <li> 4. С помощью кнопок панели быстрой вставки либо (если требуемый тег на ней не представлен) с помощью утилиты Tag Chooser добавить тег в код документа.</li><br> <li> 5. Если вставляемый тег требует задания обязательных атрибутов, ввести их в открывшемся диалоговом окне редактора тегов.</li><br> <li>6. Оценить полученный результат, переключившись в режим просмотра (сначала во внутреннем броузере, а затем и во внешних).</li><br> <li> 7. Если результат оказался не тем, который вы ожидали, повторно вызвать редактор тегов (выбрав в контекстном меню тега команду Edit Tag), либо изменить значение конкретного атрибута с помощью Tag Inspector.</li><br> <li>8. Если тег был вставлен с атрибутами, принятыми по умолчанию, но они вас не удовлетворяют, также необходимо выполнить действия, указанные в предыдущем пункте.</li><br> <li>9. Повторно выполнять п.п. 6 и 7 до тех пор, пока у вас не появится чувство «глубокого удовлетворения», после чего вернуться к п. 4.</li><br> Замечание<br><br> В приведенном выше (достаточно общем) алгоритме отсутствуют шаги, связанные с созданием элементов навигации и тестированием страницы. Дело в том, что этим важнейшим вопросам посвящены отдельные главы.<br> <td><br> </tr> </table><br><br> <h1>Редактирование таблиц с помощью Tag Tree и Tag Inspector</h1> <table border=1><br> <tr> <td>Редактирование таблиц с помощью Tag Tree и Tag Inspector<br> В отличие от инструментов, рассмотренных выше, Tag Tree и Tag Inspector не позволяют создавать новые таблицы, однако предоставляют удобный интерфейс для редактирования имеющихся.<br> Tag Tree обеспечивает просмотр структуры таблицы с различной степенью детализации и быстрый переход от одного ее элемента к другому (рис. 4.35).<br> <img src="image/index19_1.gif" alt="Редактирование таблиц с помощью Tag Tree и Tag Inspector"><br> Рис. 4.35. Представление таблицы на вкладке Tag Inspector окна ресурсов<br> Эффективность применения Tag Tree для работы с таблицей тем выше, чем сложнее ее структура.<br> Выбор элемента таблицы в дереве тегов приводит к тому, что в окне инспектора тегов отображается список атрибутов этого элемента и их значения. В зависимости от типа значений атрибутов некоторые из них вводятся непосредственно с клавиатуры, другие выбираются из раскрывающихся списков. Например, на рис. 4.35 показан перечень значений атрибута FRAME, имеющихся в раскрывающемся списке.<br> Замечание<br><br> Другие теги, предназначенные для работы с таблицами, но не вынесенные на панель быстрой вставки (например, <CAPTION>), доступны через утилиту Tag Chooser. Все табличные теги входят в категорию Tables (Таблицы). Для каждого из них существует собственное диалоговое окно редактора тегов. </td> </tr> </table><br><br> <h1>Редактирование таблиц стилей в TopStyle</h1> <table border=1><br> <tr> <td>Редактирование таблиц стилей в TopStyle Lite В предыдущем подразделе было сказано, что в зависимости от контекста выполняемой операции приложение TopStyle Lite может быть открыто в одном из двух форматов: <br> <li> расширенном — для редактирования CSS-файла;</li><br> <li> сокращенном — для создания или редактирования параметров атрибута STYLE конкретного элемента страницы.</li><br> Кроме того, TopStyle Lite может быть открыт из окна HomeSite для создания нового CSS-файла (в этом случае также используется расширенный формат). Для этого достаточно щелкнуть на кнопке Style Editor, расположенную на панели инструментов главного окна HomeSite (рис. 4.43). <img src="image/index23_1.gif" alt="Редактирование таблиц стилей в TopStyle"> Рис. 4.43. Кнопка Style Editor позволяет открыть TopStyle Lite для создания нового CSS-файла При вызове TopStyle Lite для редактирования CSS-файла окно приложения выглядит, как показано на рис, 4.44. <img src="image/index23_2.gif" alt="Редактирование таблиц стилей в TopStyle"> Рис. 4.44. Расширенный формат окна TopStyle Lite В расширенном формате окно содержит следующие основные элементь: управления: <br> <li> строку меню; разделы меню являются достаточно стандартными для всех Windows-приложений; основные команды из всех разделов мснк вынесены на панель инструментов в виде соответствующих кнопок;</li><br> <li> панель инструментов; вынесенные на нее кнопки имеют следующее предназначение: <br> <li>New File (Создать файл) — создание нового CSS-файла; поскольку TopStyle Lite не использует многодокументный интерфейс, то перел созданием нового файла следует сохранить редактируемый (правда. TopStyle Lite об этом напомнит);</li><br> <li> Open File (Открыть файл) — загрузка существующего CSS-файла;</li><br> <li> Save File (Сохранить файл) — запись CSS-файла на диск в указанный каталог;</li><br> <li> New Selector (Создать селектор) — создание нового стиля; в данном случае разработчики TopStyle Lite под селектором понимают имя стиля; подробнее процедура создания стиля будет описана ниже;</li><br> <li> Word wrap (Перенос строки) — включение режима форматирования строк по ширине окна;</li><br> <li> Style Inspector (Инспектор стилей) — открытие подокна Style Inspector, которое содержит инструменты редактирования и просмотра параметров стилей; подокно расположено в правой части окна TopStyle Lite;</li><br> <li> Preview (Предварительный просмотр) — открытие подокна Preview, которое обеспечивает просмотр результата применения стилей к элементам страницы; в качестве интерпретатора стилей используется броузер, который на вашем компьютере имеет статус используемого по умолчанию;</li><br> <li> Order TopStyle Pro (Порядок получения TopStyle Pro) — открытие в онлайновом режиме Web-страницы с информацией о том, как получить профессиональную версию TopStyle;</li><br> <li> Help Content (Содержание справки) — вызов справочной системы.</li><br> Теперь рассмотрим подробнее интерфейс основного и дополнительных окон приложения.<br> Содержимое CSS-файла отображается в основном окне — окне редактирования. При этом для повышения наглядности используется цветовая подсветка элементов таблицы стиля. Технология редактирования файла такая же, как и в любом текстовом редакторе: вы можете вводить информацию с клавиатуры, удалять фрагменты текста, использовать буфер обмена и т. д. Кроме того, в TopStyle Lite имеется возможность отмены внесенных изменений (функция Undo).<br> В окне просмотра отображается текст, оформленный в соответствии с имеющимися в файле стилями. При этом используется следующее правило:<br> <li> для представления стиля класса выводится строка Class <имя стиля>; </li><br> <li> для представления стиля конкретного элемента страницы выводится строка ID <имя стиля>; </li><br> <li> для представления стиля переопределенного тега выводится строка Element <имя тега>.</li><br> Например, в окне просмотра, приведенном на рис. 4.44, показаны три стиля (два стиля класса и один стиль элемента), с помощью которых была сформирована страница, приводившаяся на рис. 4.36.<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><br> <li> Classes — стили классов;</li><br> <li> IDs — индивидуальные стили.</li><br> <img src="image/index23_3.gif" alt="Редактирование таблиц стилей в TopStyle"><br> Рис. 4.45. Представление стилей на вкладке Selectors<br> Чтобы добавить в CSS-файл новый стиль, необходимо:<br> <li>1. Щелкнуть на кнопке New Selector на панели инструментов окна редактирования;</li><br> <li>2. В открывшемся диалоговом окне (рис. 4.46) выполнить следующие действия: <br> <li> 2.1. Указать категорию стиля, установив соответствующий переключа тель (Class или ID), либо выбрав переопределяемый тег в списке HTML Element.</li><br> <li>2.2. Если создается стиль Class или ID, ввести его имя в поле списка, расположенного под переключателями; при вводе имени со ответствующий префикс (. или #) будет вставлен автоматичес ки; имя стиля отображается также в поле Current Selector (Текущий селектор).</li><br> <li> 2.3. Если требуется создать несколько стилей с одинаковыми параметрами, то необходимо внести текущий стиль (селектор) в список Selectors, щелкнув на кнопке «>» (рис. 4.47) и затем повторить п.п. 2.1, </li><br> <li>3. Щелкнуть на кнопке ОК.</li><br> <img src="image/index23_4.gif" alt="Редактирование таблиц стилей в TopStyle"><br> Рис. 4.46. Диалоговое окно для создания нового стиля<br> В результате выполненных действий в окне редактирования появится имя стиля с парой фигурных скобок. Чтобы ввести значения параметров нового стиля, возможны два способа действий:<br> <li> установить курсор после открывающей фигурной скобки и нажать клавишу <Spacebar> (пробел); после небольшой задержки на экране появится список параметров, которые могут установлены для данного стиля (рис. 4.48, вверху); выбрать нужный параметр и нажать <Enter>; затем аналогичным образом вставить значение параметра (рис. 4.48, внизу); </li><br> <li> установить курсор после открывающей .фигурной скобки, и в окне Style Inspector в списке параметров щелкнуть на требуемой ячейке; затем либо ввести с клавиатуры, либо выбрать из раскрывающегося списка нужное значение.</li><br> <img src="image/index23_5.gif" alt="Редактирование таблиц стилей в TopStyle"> <br> Рис. 4.48. Ввод параметров стиля с помощью всплывающих списков<br> Сокращенный формат окна TopStyle Lite используется в том случае, ecj; приложение открывается из окна редактора тегов (с помощью кнопки Style, Editor)].<br> Этот формат отличается от расширенного следующими параметрами:<br> <li> отсутствует строка меню, так как в данном случае отсутствует нсобхс димость работы с CSS-файлами;</li><br> <li> в панели инструментов отсутствует кнопка New Selector, так как для одного элемента не может быть задано более одного стиля; по этой же причине отсутствуют кнопки для работы с файлом и окно просмотра Preview: чтобы оценить созданный стиль, вполне достаточно области просмотра, входящей в состав окна Style Inspector,</li><br> <li>на панели инструментов присутствуют две новые кнопки: <br> <li> Done (Готово), которая позволяет вставить описание стиля в окно редактора тегов и закрыть TopStyle Lite;</li><br> <li> Cancel (Отменить), которая закрывает TopStyle Lite без сохранения результатов работы;</li><br> <li> в окне Style Inspector отсутствует вкладка Selectors (причина все та же — для одного стиля нет смысла строить дерево).</li><br> Остальные элементы окна имеют то же предназначение, что и при использовании расширенного формата TopStyle Lite. Соответственно, для установки параметров стиля элемента необходимо:<br> <li> 1. Внутри фигурных скобок ввести параметры и их значения (либо с помощью всплывающих списков, либо с помощью Style Inspector).</li><br> <li> 2. Оценить полученный результат, воспользовавшись областью просмотра.</li><br> <li> 3. Если стиль соответствует замыслу, щелкнуть на кнопке Done. <br> <td> </tr> </table><br><br> <h1>Создание списков</h1> </h2><br> Кнопки, обеспечивающие создание различных типов списков, представлены на вкладке Lists (рис. 4.11). При щелчке на любой из этих кнопок открывается диалоговое окно, с помощью которого могут быть установлены требуемые атрибуты создаваемого списка.<br> С помощью кнопок вкладки Lists можно сформировать список двумя способами: <br> <li> быстро создать список с параметрами по умолчанию, введя заодно и названия пунктов списка;</li><br> <li> строить список поэлементно, устанавливая для каждого пункта свои значения атрибутов.</li><br> <img src="image/sozdanie-spiskov_1.gif" alt="Создание списков"><br> Рис. 4.11. Вкладка Lists<br> Для быстрого создания списка необходимо:<br> <li> 1. Установить курсор в требуемую позицию.</li><br> <li> 2. На вкладке Lists щелкнуть на кнопке Quick List (Быстрое создание списка).</li><br> <li> 3. В открывшемся диалоговом окне (рис. 4.12) выполнить следующие действия: <br> <li> 3.1. С помощью пары переключателей List Style выбрать тип списка (Ordered — нумерованный или Unordered — маркированный);</li><br> <li>3.2. С помощью дискретного счетчика Rows (Строки) указать число элементов списка;</li><br> <li> 3.3. В раскрывающемся списке Туре (Тип) выбрать способ нумерации (или маркировки) пунктов списка;</li><br> <li> 3.4. Щелкнуть в первой строке текстового поля и ввести наименование первого пункта списка; нажать клавишу <Enter>;</li><br> <li> 3.5. Ввести аналогичным образом наименования остальных пунктов списка;</li><br> <li>3.6. Если требуется создать в коде документа закрывающие теги для каждого элемента списка <LI>, установить флажок Generate </LI> tags;</li><br> <li> 3.7. Щелкнуть на кнопке ОК.</li><br> <img src="image/sozdanie-spiskov_2.gif" alt="Создание списков"><br> Рис. 4.12. Диалоговое окно для создания списка<br> В результате выполнения описанной процедуры в код документа будет помещен тег-контейнер, соответствующий типу выбранного списка ( или ), и теги элементов списка с наименованиями пунктов.<br> Кнопки Unordered List (Неупорядоченный список), Ordered List (Упорядоченный список) и List Item (Пункт списка) полезно применять в тех случаях, когда требуется сформировать список с нестандартной структурой (в частности, с использованием вложенных списков другого типа).<br> <img src="image/sozdanie-spiskov_3.gif" alt="Создание списков"><br> Рис. 4.13. Пример создания вложенных списков<br> Например, для создания списка, приведенного на рис. 4.13, требуется выполнить такую последовательность действий:<br> <li> 1. На панели быстрой вставки щелкнуть на кнопке Unordered List и в открывшемся окне редактора тегов (рис. 4.14) выбрать в списке Туре (Тип маркера) форму маркера; в результате в код документа будет добавлена пара тегов и , причем курсор будет установлен между ними.</li><br> <li> 2. Щелкнуть на кнопке List Item; в открывшемся окне редактора тегов: <br> <li> 2.1. Перейти на вкладку Content (Содержимое) и ввести в текстовом поле наименование первого элемента списка («Цвет»), как показано на рис. 4.15.</li><br> <li> 2.2. Вернуться на вкладку LI Tag, в ней перейти на мини-вкладку Unordered List; оставив все параметры без изменения, щелкнуть на кнопке ОК; в результате в код документа будет добавлена пара тегов <LI> и </LI>, а также наименование элемента списка.</li><br> <li> 3. Повторить п. 2 для создания второго элемента списка («Размер»).</li><br> <li> 4. Установив курсор между закрывающим тегом </LI> первого элемента и открывающим тегом второго, щелкнуть на кнопке Ordered List и в открывшемся окне редактора тегов (рис. 4.16) выбрать в списке Туре (Способ нумерации) вид порядкового номера элементов, а в поле Start (Начальный номер) указать значение номера первого элемента; щелкнуть на кнопке ОК; в результате в код документа будет добавлена пара тегов и с соответствующими атрибутами.</li><br> <li> 5. С помощью кнопки List Item ввести теги для пунктов нумерованного списка (в данном случае атрибуты должны устанавливаться на вкладке Ordered List диалогового окна).</li><br> <li> 6. Ввести с клавиатуры наименования пунктов нумерованного списка.</li><br> <li> 7. Установить курсор после закрывающего тега </LI> элемента «Размер» и выполнить действия, аналогичные описанным в п.п. 5...7, для второго нумерованного списка (с той лишь разницей, что в качестве способа нумерации можно использовать не цифры, а буквы английского алфавита).</li><br> <img src="image/sozdanie-spiskov_4.gif" alt="Создание списков"><br> Рис. 4.14. Окно редактора тегов для маркированного списка<br> <img src="image/sozdanie-spiskov_5.gif" alt="Создание списков"><br> Рис. 4.15. Вкладка Content окна редактора тегов для элемента списка<br> Замечание<br><br> Во всех приведенных выше диалоговых окнах имеется флажок Compact, если он установлен, то соответствующий тег используется с атрибутом COMPACT.<br> Для создания так называемого списка определений (Definition List) на вкладке Lists имеется три кнопки: Definition List, Definition Term (Определяемый термин) и Definition (определение).<br> Первая из них обеспечивает вставку в код страницы «заготовки» списка, которая содержит теги <DL>, <DT> и <DD>, как показано на рис. 4.17.<br> <img src="image/sozdanie-spiskov_6.gif" alt="Создание списков"><br> Рис. 4.17. «Заготовка» списка определений, созданная с помощью кнопки Definition List<br> Эта конструкция помещается в страницу без вызова окна редактора тегов. По умолчанию закрывающие теги для термина и пояснения не создаются. Чтобы добавить в список новые элементы, следует воспользоваться кнопками Definition Term и Definition.<br><td><br> </tr> </table><br><br> <h1>Создание таблицы с помощью мастера</h1> </h2><br> Это наиболее простой и удобный способ для тех, кто не очень силен в языке HTML вообще и в применении таблиц в частности.<br> Щелчок на кнопке Table Wizard приводит к появлению на экране первого окна мастера — Table Design (Проектирование таблицы). Оно содержит интерактивное окно просмотра и кнопки для изменения структуры таблицы (рис. 4.27).<br> <img src="image/sozdanie-tablicy-s-pomoshhju-mastera_1.gif" alt="Создание таблицы с помощью мастера"><br> Рис. 4.27. Первое окно мастера создания таблицы<br> В исходном состоянии таблица в окне просмотра содержит две строки и два столбца, то есть четыре ячейки равного размера. Вы можете произвольным образом изменять количество строк и столбцов, изменять размер ячеек, а также объединять ячейки:<br> <li> чтобы добавить или удалить строку, необходимо щелкнуть на соответствующей кнопке Rows (Строки), либо со знаком «+», либо со знаком «-»;</li><br> <li> чтобы добавить или удалить столбец, необходимо щелкнуть на соответствующей кнопке Columns (Столбцы), либо со знаком «+», либо со знаком «-»;</li><br> <li> чтобы изменить размер ячейки, следует установить указатель на се границе, нажать левую кнопку мыши (при этом указатель примет форму двойной стрелки, см. рис. 4.27) и переместить границу в нужном направлении;</li><br> <li> чтобы объединить две ячейки одной строки, необходимо: <br> <li> 1. щелкнуть мышью внутри левой ячейки (она будет выделена синим цветом);</li><br> <li> 2. щелкнуть на кнопке Column Span + (Объединить столбцы);</li><br> <li> чтобы объединить две ячейки одного столбца, необходимо: <br> <li> 1. щелкнуть мышью внутри левой ячейки (она будет выделена синим цветом);</li><br> <li> 2. щелкнуть на кнопке Row Span (Объединить строки).</li><br> Замечание<br><br> С помощью кнопок Row Span и Column Span со знаками «-» можно разделить только такие ячейки, которые ранее были получены путем объединения соседних ячеек.<br> Читатели, хорошо знакомые с языком HTML, догадались, что кнопки, имеющиеся в первом окне мастера, позволяют изменять количество и значения соответствующих атрибутов «табличных» тегов: <br> <li> кнопки Rows изменяют количество тегов <TR>, вложенных в тег <TABLE>;</li><br> <li> кнопки Columns изменяют количество тегов <TD>, вложенных в каждый тег <TR>;</li><br> <li> кнопки Column Span изменяют значение атрибута COLSPAN тегов <TD>;</li><br> <li> кнопки Row Span изменяют значение атрибута ROWSPAN тегов <TD>.</li><br> <img src="image/sozdanie-tablicy-s-pomoshhju-mastera_2.gif" alt="Создание таблицы с помощью мастера"><br> Рис. 4.28. Пример создания таблицы<br> Например, чтобы получить таблицу, приведенную на рис. 4.28, требуется выполнить такую последовательность действий: <br> <li> 1. Переместить границу между строками вниз.</li><br> <li>2. Щелкнуть на кнопке Columns (будет добавлен третий столбец).</li><br> <li> 3. Выделить верхнюю левую ячейку и щелкнуть на кнопке Column Span + (выбранная ячейка будет объединена с соседней ячейкой той же строки).</li><br> После формирования подходящей структуры таблицы вы можете завершить работу мастера, щелкнув на кнопке Finish (Готово). При этом в редактируемый документ будет помещен соответствующий фрагмент HTML-кода.<br><br> Если же вы хотите продолжить установку атрибутов таблицы, щелкните на кнопке Next (Далее).<br> Второе окно мастера — Table Properties (Параметры таблицы) — содержит элементы управления, которые позволяют установить следующие атрибуты тега <TABLE> (рис. 4.29): <br> <li> ALIGN — действие этого атрибута аналогично действию одноименного атрибута, используемому для создания «плавающих» изображений: он позволяет выравнивать таблицу относительно левого или правого края страницы, обеспечивая эффект «обтекания» текста вокруг таблицы; значение атрибута выбирается из раскрывающегося списка Alignment (Выравнивание);</li><br> <li> CELLSPACING задает расстояние (в пикселах) между ячейками; значение устанавливается с помощью дискретного счетчика Cell Spacing (Промежуток между ячейками);</li><br> <li> CELLPADING задает расстояние (в пикселах) между рамкой ячеек и их содержимым; значение устанавливается с помощью дискретного счетчика Cell Padding (Заполнение ячейки);</li><br> <li> WIDTH, HEIGTH определяют соответственно ширину и высоту таблицы или в пикселах, или как долю (в процентах) от размера окна браузера, отображаемого на экране монитора читателя; чтобы указать значение в процентах, требуется ввести после числа символ %;</li><br> <li> BGCOLOR устанавливает цвет фона для всех ячеек таблицы (при отсутствии индивидуальных установок для отдельных ячеек); значение цвета выбирается из раскрывающейся палитры, связанной с флажком Use Color (Использовать цвет);</li><br> <li> BORDER управляет внешним видом рамки,- отображаемой вокруг таблицы; если значение атрибута не задано, то рамка не отображается, но таблица выводится в той же самой позиции, как если бы рамка имелась (то есть сохраняется соответствующее свободное пространство вокруг ячеек); толщина рамки может быть установлена равной 0, в этом случае броузер не оставляет свободного пространства под рамку; значение атрибута устанавливается с помощью дискретного счетчика Size (Размер); если задать значение больше 0, то становятся доступны связанные со счетчиком списки Frames и Rules: первый из них обеспечивает расположение внешней рамки, а второй определяет наличие рамок между строками и столбцами внутри таблицы.</li><br> <img src="image/sozdanie-tablicy-s-pomoshhju-mastera_3.gif" alt="Создание таблицы с помощью мастера"><br> Рис. 4.29. Второе окно мастера, позволяющее установить атрибуты тега <TABLE><br> После установки атрибутов таблицы мастер «заставляет» перейти к следующему шагу — установке параметров отдельных ячеек, которая выполняется в третьем окне — Cell Properties (Параметры ячейки). Однако, если это не входит в ваши планы, можете в этом окне просто щелкнуть на кнопке Finish.<br> Чтобы элементы окна стали доступны, необходимо выделить какую-либо ячейку таблицы, щелкнув на ней мышью (рис. 4.30). Именно к этой ячейке будут относится те значения, которые вы установите в окне. Чтобы установить атрибуты для других ячеек, требуется просто поочередно выбирать их и редактировать либо оставлять прежними значения атрибутов.<br> <img src="image/sozdanie-tablicy-s-pomoshhju-mastera_4.gif" alt="Создание таблицы с помощью мастера"><br> Рис. 4.30. Третье окно мастера, позволяющее установить атрибуты ячеек<br> С помощью окна Cell Properties могут быть заданы следующие атрибуты ячейки: <br> <li>ALIGN— способ горизонтального выравнивания содержимого ячейки; устанавливается с помощью раскрывающегося списка Horizontal',</li><br> <li> VALIGN— способ вертикального выравнивания содержимого ячейки; устанавливается с помощью- раскрывающегося списка Vertical;</li><br> <li> WIDTH — ширина ячейки в пикселах или как доля (в процентах) от ширины таблицы, отображаемой в окне броузера; данный параметр достаточно указать для одной ячейки столбца, поскольку для остальных автоматически будет установлено то же значение; значение атрибута вводится в одноименном поле;</li><br> <li> NOWRAP — запрещает перенос строк внутри ячейки; обычно текст, не умещающийся в одну строку ячейки, переходит на следующую строку; однако при использовании атрибута NOWRAP ширина ячейки увеличивается на столько, чтобы заключенный в ней текст поместился в одну строку. Это требует определенной осторожности при использовании данного атрибута; наличие атрибута определяется состоянием флажка No Wrappin (He переносить).</li><br> Кроме того, с помощью флажка Header (Заголовок) может быть установлен признак того, что содержимое данной ячейки должно отображаться как заголовок (другим шрифтом). Этому признаку в коде страницы соответствует тег <ТН>.<br> Собственно содержимое ячейки вводится в поле Content (Содержание).<br> HTML-код, сгенерированный мастером, вставляется в текст страницы с учетом синтаксического форматирования, то есть вложенные теги смещаются относительно позиции тега верхнего уровня. Это значительно улучшает визуальное восприятие кода документа. </td> </tr> </table><br><br> <h1>Таблицы</h1> </h2><br> Таблицы, используемые на Web-страницах, практически ничем не отличаются от таблиц, создаваемых с помощью текстовых процессоров: те же строки, столбцы и ячейки. Однако большой набор регулируемых параметров и все усиливающиеся возможности броузеров по визуальному представлению таблиц делают их одним из средств формирования структуры Web-страниц. Рассказывая о способах форматирования текста, мы уже упоминали об таком варианте их применения. Но ведь это вовсе не отменяет возможности их применения по прямому назначению — для представления табулированных данных. Причем ячейки таблицы могут содержать как текстовую информацию, так и графику. Разрешается также создание вложенных таблиц, то есть когда ячейка таблицы более высокого уровня представляет собой контейнер для таблицы следующего уровня. Таким образом, диапазон применения таблиц весьма широк. Вот далеко не полный перечень задач, которые могут успешно решаться с их помощью:<br> <li> представление табулированных данных;</li><br> <li> форматирование текстового содержимого страницы (например, вывод его в несколько колонок — в «журнальном» формате); </li><br> <li>группирование взаимосвязанных элементов страницы; </li><br> <li> выравнивание различных фрагментов страницы относительно друг друга.</li><br> Благодаря перечисленным особенностям практически ни одна современная Web-страница не обходится без использования таблиц.<br> Для работы с таблицами в HomeSite имеется целый набор инструментов, большинство из которых позволяют забыть, что вы имеете дело не с визуальным, а с текстовым редактором.<br> Итак, для создания и редактирования атрибутов таблицы вы можете использовать:<br> <li> мастер для создания таблиц — Table Wizard;</li><br> <li> инструмент быстрой разметки таблицы — Table Sizеr;</li><br> <li> диалоговые окна редактора тегов;</li><br> <li> кнопки быстрой вставки «табличных» тегов.</li><br> Доступ ко всем перечисленным инструментам выполняется с помощью вкладки Tables (Таблицы) панели быстрой вставки (рис. 4.26).<br> <img src="image/tablicy_1.gif" alt="Таблицы"><br> Рис. 4.26. Вкладка Tables (Таблицы) панели быстрой вставки<br><td><br> </tr> </table><br><br> <h1>Установка атрибутов тега <BODY></h1> </h2><br> В заготовке кода страницы этот тег присутствует, хотя при необходимости может быть помещен в документ и с помощью панели быстрой вставки (вторая левая кнопка на вкладке Common, см. рис. 4.4).<br> Щелкнув на указанной кнопке или выбрав в контекстном меню тега команду Edit Tag, вы увидите на экране соответствующее диалоговое окно редактора тегов (рис. 4.6).<br> <img src="image/ustanovka-atributov-tega-body_1.gif" alt="Установка атрибутов тега <BODY>"><br> Рис. 4.6. Диалоговое окно редактора тегов для тега <BODY><br> Большая часть атрибутов тега, влияющих на визуальные параметры страницы, устанавливаются на вкладке BODY Tag:<br> <li> раскрывающийся список Background Color (Цвет фона) обеспсчивает выбор цвета фона страницы (атрибут BGCOLOR); выбранный цвет вставляется в текст страницы по умолчанию в виде шестнадцатеричного кода;</li><br> <li> в поле Background Image (Фоновое изображение) указывается адрес изображения, используемого для формирования фона страницы (атрибут BACKGROUND); </li><br> <li> раскрывающийся список Text Color (Цвет текста) обеспечивает выбор цвета текста страницы (атрибут TEXT); </li><br> <li> следующие три раскрывающихся списка предназначены для выбор, цвета гиперссылок в различных состояниях: <br> <li>Link Color (Цвет ссылки) — цвет ссылки в исходном состоянии (атрибут LINK);</li><br> <li>Visited Link Color (Цвет посещенных ссылок) — цвет посещении; ссылок (атрибут VLINK);</li><br> <li>Active Link Color (Цвет активных ссылок) — цвет активных ссылог (атрибут ALINK).</li><br> Выбранную цветовую схему ссылок можно оценить с помощью окна предварительного просмотра; в этом же окне отображается цвет фона и выбранное фоновое изображение.<br> Элементы управления, расположенные на вкладке Browser-specific, позволяют установить размеры полей страницы (рис. 4.7). Поскольку различные версии броузеров используют различные варианты соответствующих атрибутов, то для обеспечения большей совместимости страницы рекомендуется ввести значения во все поля этой вкладки.<br> Любой из установленных атрибутов может быть впоследствии быстро скорректирован с помощью Tag Inspector либо посредством повторного вызова редактора тегов.<br> Если редактируемая страница является первой (начальной) страницей публикации либо открывает какой-либо ее раздел, то после завершения установки общих параметров страницы полезно сохранить ее в качестве шаблона. Это позволит в дальнейшем с минимальными затратами времени и сил выполнить одно из важнейших требований к дизайну публикации — единство стиля (по крайней мере, в пределах некоторого логически завершенного раздела). Чтобы использовать страницу в качестве шаблона при создании последующих страниц, необходимо:<br> <img src="image/ustanovka-atributov-tega-body_2.gif" alt="Установка атрибутов тега <BODY>"><br> Рис. 4.7. На вкладке Browser-specific устанавливаются размеры полей страницы<br> <li> 1. В меню File главного окна HomeSite выбрать команду Save as Template... и затем в открывшемся диалоговом окне ввести имя шаблона (подробнее о создании шаблонов см. раздел Работа с файлами главы Знакомство с HomeSite</a>.</li><br> <li> 2. В меню Options главного окна HomeSite выбрать команду Settings, перейти на вкладку Locations и в поле Default template указать адрес шаблона.</li><br> <td><br> </tr> </table><br><br> <h1>Установка общих параметров страницы</h1> </h2><br> Под общими параметрами страницы в данном случае понимаются:<br> <li> заголовок страницы (содержимое тега <TITLE>);</li><br> <li> краткая характеристика содержания страницы, ключевые слова, другие сведения для роботов поисковых систем (то есть информация, содержащаяся в тегах <МЕТА>);</li><br> <li> общие визуальные параметры страницы (размеры полей, фон, цветовая схема ссылок); напомним, что эти параметры устанавливаются с помощью атрибутов тега <BODY>.</li><br> Во всех шаблонах, имеющихся в HomeSite, присутствует тег <TITLE>. Поэтому для создания заголовка страницы достаточно изменить его содержимое (в стандартных шаблонах это Untitled).<br> С тегами <МЕТА> дело обстоит несколько сложнее. Разумеется, редактор кода позволяет ввести теги и атрибуты вручную, однако в составе HomeSite, как вы знаете, имеются и другие средства. Об их применении — в следующем подразделе.<br> <td><br> </tr> </table><br><br> <h1>Установка параметров шрифта</h1> </h2><br> Шрифт является вспомогательным, хотя и очень мощным средством обеспечения комфортности пребывания пользователей Интернета на ваших страницах. С его помощью могут быть решены три задачи:<br> <li> оформление логической структуры текстового содержания страницы; </li><br> <li> обеспечение единства и согласованности стилевого оформления публикации в целом;</li><br> <li> повышение эстетической привлекательности страниц.</li><br> Почему повышение эстетической привлекательности занимает последнее (хотя и призовое) место? Вы можете найти (или изготовить самостоятельно) восхитительный по красоте шрифт, подобрать к нему замечательную цветовую схему, прекрасно гармонирующую с фоном публикации, но если аппаратные и программные средства пользователя будут не в состоянии воспроизвести все это на его компьютере, то затраченные вами усилия окажутся напрасными.<br> Итак, какие же возможности по управлению параметрами шрифта предоставляет HomeSite?<br> Основным инструментом при работе с шрифтом является вкладка Fonts панели быстрой вставки. Набор кнопок, представленных на этой вкладке, обеспечивает установку большей части физических и логических стилей шрифта, предусмотренных в языке HTML (рис. 4.18).<br> <img src="image/ustanovka-parametrov-shrifta_1.gif" alt="Установка параметров шрифта"><br> Рис. 4.18. Вкладка Fonts панели быстрой вставки<br> Щелчок на любой из этих кнопок приводит к непосредственной вставке соответствующего тега в код страницы. Исключение составляет лишь кнопка Font, которая открывает диалоговое окно редактора тегов.<br> Диалоговое окно Font содержит следующие элементы (рис. 4.19):<br> <li> раскрывающийся список Color (Цвет), позволяющий выбрать цвет символов шрифта;</li><br> <li>три взаимосвязанных списка Size (Размер), которые позволяют, с одной стороны, указать способ измерения размера (в абсолютных или в относительных единицах), а с другой — выбрать значение атрибута SIZE: <br> <li> Relalive+ — размер шрифта устанавливается больше стандартного в заданное число раз;</li><br> <li> Absolute — размер шрифта устанавливается в абсолютных единицах;</li><br> <li> Relative - —размер шрифта устанавливается меньше стандартного<br><br> в заданное число раз.</li><br> <img src="image/ustanovka-parametrov-shrifta_2.gif" alt="Установка параметров шрифта"><br> Рис. 4.19. Диалоговое окно Font редактора тегов<br> Относительно применения этих списков требуется сделать следующее пояснение. Приоритет каждого из этих списков соответствует его расположению в окне: чем выше список, тем выше его приоритет. При этом список, в котором значение отсутствует, в «рейтинге» не участвует. Другими словами, вы можете установить требуемые значения во всех трех списках, но в код страницы будет помещен только один тег <FONT> со значением атрибута SIZE, соответствующем значению в верхнем из списков. Например, если в списке Absolute выбрать значение 4, а в списке Relative- установить -2, то в страницу будет вставлен тег <FONT SIZE?="4">.<br> На вкладке Browser-specific может быть установлено значение единственною специфического атрибута, поддерживаемого броузером Netscape — Point-size. Этот атрибут позволяет указать «физический» размер шрифта — в пунктах (или в точках), размер которых зависит от разрешения монитора.<br> Еще раз отметим, что HomeSite способен вставлять парные теги «вокруг» выделенного участка кода страницы. Поэтому, если требуется изменить параметры шрифта для некоторого фрагмента текста, введенного ранее, достаточно выделить этот фрагмент в окне документа, и после этого щелкнуть на соответствующей кнопке.<br><td><br> </tr> </table><br><br> <h1>Установка параметров таблицы с помощью редактора тегов</h1> <table border=1><br> <tr> <td>Установка параметров таблицы с помощью редактора тегов Редактор тегов может быть вызван щелчком на одной из четырех кнопок вкладки Tables: <br> <li> Table Dialog (Диалог таблицы) — вызов диалогового окна для установки атрибутов тега <TABLE>;</li><br> <li>Table Row Dialog (Диалог строки таблицы) — вызов диалогового окна для установки атрибутов тега <TR>;</li><br> <li>Table Data Dialog (Диалог ячейки таблицы) — вызов диалогового окна для установки атрибутов тега <TD>;</li><br> <li>Table Header Dialog (Диалог заголовка таблицы) — вызов диалогового окна для установки атрибутов тега <ТН>.</li><br> Необходимо отметить, что перечисленные диалоговые окна вовсе не дублируют соответствующие окна мастера создания таблиц (см. подраздел «Создание таблицы с помощью мастера»). Хотя, разумеется, они содержат многие идентичные элементы. Основным достоинством применения окон редактора тегов заключается в наличии дополнительных вкладок, которые обеспечивают доступ к более современным средствам разметки страниц (в частности, к средствам работы с CSS). Ниже приведена краткая характеристика перечисленных окон для работы с табличными тегами. Возможно, это поможет вам быстрее выбирать наиболее подходящий инструмент в каждой конкретной ситуации. Замечание<br><br> Для любого из табличных тегов, уже вставленных в код страницы, соответствующее окно редактора тегов может быть вызвано с помощью команды контекстного меню Edit Current Tag. Итак, с помощью окна редактора тегов могут быть установлены следующие атрибуты тега <TABLE> (рис. 4.32). <img src="image/index18_1.gif" alt="Установка параметров таблицы с помощью редактора тегов"> Рис. 4.32. Окно для установки атрибутов тега <TABLE> <br> <li> на вкладке TABLE Tag — атрибуты WIDTH, BORDER, ALIGN, CELLSPACING , и CELLPADING; их значения вводятся в соответствующих текстовых полях (за исключением атрибута ALIGN, значение которого может быть выбрано в раскрывающемся списке); такой набор атрибутов объясняется тем, что все они являются стандартизованными и должны поддерживаться всеми броузерами;</li><br> <li> на вкладке Browser-specific (1) — атрибуты, поддерживаемые на сегодняшний день только броузером MSIE: BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK и DATAPAGESIZE;</li><br> Замечание<br><br> Атрибуты BORDERCOLOR, BORDERCOLORLIGHT и BORDERCOLORDARK предназначены для управления цветом рамок таблицы. Если задано значение атрибута BORDERCOLOR, все рамки таблицы считаются «плоскими» и потому отображаются одним цветом, без «теней». Если указываются значения атрибутов BORDERCOLORLIGHT и BORDERCOLORDARK, то рамка отображается как «выпуклая», то есть с тенью. При этом считается, что источник света находится в левом верхнем углу экрана. Соответственно, атрибут BORDERCOLORLIGHT задает цвет «освещенных» частей рамок, то есть расположенных слева и сверху, в то время как атрибут BORDERCOLORDARK — цвет «затененных» частей, расположенных справа и снизу. <br> <li> на вкладке Browser-specific (2) — атрибуты, поддерживаемые на сегодняшний день только ведущими броузерами (MSIE, Netscape и Opera): BACKGROUND и HEIGTH; атрибут BACKGROUND позволяет задать фоновое изображение для ячеек таблицы; значение этого атрибута (URL источника изображения) указывается в поле Background image (Фоновый рисунок); если атрибут задан, то в поле Columns (Столбцы) дополнительно можно указать способ укладывания рисунка в площади таблицы.</li><br> Окно редактора тегов, предназначенное для работы с тегом <TR>, позволяет установить значения следующих атрибутов (рис. 4.33). <br> <li>на вкладке TR Tag — атрибуты ALIGN и VALIGN; их значения выбираются в раскрывающихся списках Align и Vert. Align соответственно; оба атрибута не являются обязательными, но поддерживаются всеми броузерами;</li><br> <li> на вкладке Browser-specific — атрибуты BORDERCOLOR, BORDERCOLORLIGHT и BORDERCOLORDARK (в данном случае они управляют цветом рамки ячеек строки), а также атрибут NOWRAP.</li><br> <img src="image/index18_2.gif" alt="Установка параметров таблицы с помощью редактора тегов"> Рис. 4.33. Окно для установки атрибутов тега <TR> Окно редактора тегов, предназначенное для работы с тегом <TD>, позволяет установить значения следующих атрибутов (рис. 4.34).<br> <li> на вкладке TD Tag — атрибуты WIDTH, HEIGTH, COLSPAN, ROWSPAN (их значения вводятся в соответствующих текстовых полях), атрибуты ALIGN, VALIGN, SCOPE (их значения выбираются в раскрывающихся списках Align, Vert.Align и Scope соответственно), а также атрибут NOWRAP (необходимость вставки атрибута в код страницы определяется состоянием флажка No Wrap); атрибуты, представленные на этой вкладке, не являются обязательными, но поддерживаются всеми броузерами;</li><br> Замечание<br><br> Атрибут SCOPE имеет смысл только для тех ячеек таблицы, для которых установлен стиль «заголовок» (то есть если для ячейки дополнительно применен тег <ТН>). Возможные значения этого атрибута определяют то подмножество ячеек таблицы, для которых данная ячейка играет роль заголовка.<br> <img src="image/index18_3.gif" alt="Установка параметров таблицы с помощью редактора тегов"><br> Рис. 4.34. Окно для установки атрибутов тега <TD> <br> <li> на вкладке Browser-specific — атрибуты BORDERCOLOR, BORDER-COLORLIGHT и BORDERCOLORDARK (в данном случае они управляют цветом рамки конкретной ячейки), а также атрибут BACKGROUND, который задаст фоновое изображение для этой ячейки.</li><br> Помимо этих двух вкладок, окно тега <TD> содержит еще одну специфическую (для данного тега) вкладку — Content. Основным элементом на этой вкладке является многострочноe текстовое поле, предназначенное для ввода содержимого ячейки.<br> Формат окна редактора тегов, которое используется для работы с тегом <ТН>, абсолютно идентичен формату окна тега <TD>, рассмотренному выше. Объясняется это тем, что для ячеек, используемых в качестве «заголовков», тег <ТН> применяется самостоятельно, без участия тега <TD>. Такой синтаксис позволяет упростить код и сократить размер тех страниц, которые содержат таблицы с большим числом ячеек.<br> Остальные кнопки вкладки Tables, которые обеспечивают быструю вставку «табличных» тегов без атрибутов, можно считать вспомогательными инструментами. Их целесообразно применять в том случае, если вы хотите внести небольшие изменения в таблицу, созданную ранее другими средствами. </td> </tr> </table><br><br> <h1>Установка визуальных атрибутов текста</h1> </h2><br> Теперь обратимся к третьей составляющей стиля текстового содержимого документа — его визуальным атрибутам. Наиболее важными из них являются два:<br> <li> способ форматирования текста;</li><br> <li> набор и параметры используемых шрифтов.</li><br> <li> Напомним, что для форматирования текста HTML-документа могут использоваться следующие методы:</li><br> <li> центрирование и абзацные отступы (табуляция);</li><br> <li> введение заголовков различных уровней (теги <Н1>...<Н6>);</li><br> <li> применение списков (нумерованного, маркированного, списка определений); </li><br> <li> введение разделителей (горизонтальных линий, создаваемых тегом</li><br> <li> применение различных параметров шрифта для разных фрагментов текста.</li><br> Работая с редактором кода, вы можете ввести с клавиатуры любой тег, реализующий перечисленные выше методы форматирования. Однако значительно удобнее применять те готовые инструменты форматирования, которые имеются в HomeSite. Доступ практически ко всем этим инструментам реализован посредством панели быстрой вставки. Соответствующие кнопки размещены на трех вкладках: Common (Элементы общего назначения), Fonts (Шрифты) и Lists (Списки).<br> Далее приведено краткое описание основных из них.<br><td><br> </tr> </table><br><br> <h1>Включение изображений с помощью панели быстрой вставки</h1> </h2><br> Чтобы вставить изображение (точнее, тег <IMG>) в код страницы, достаточно щелкнуть соответствующую кнопку на вкладке Common панели быстрой вставки. В результате будет открыто окно редактора тега, которое содержит, как и большинство окон других тегов, несколько вкладок.<br><br> Мы пока рассмотрим только две из них:<br> <li> IMG Tag, предназначенную для установки значений основных атрибутов изображения;</li><br> <li> Browser-specific, с помощью элементов которой можно установить значения некоторых специфических атрибутов, поддерживаемых конкретными броузерами.</li><br> <img src="image/vkljuchenie-izobrazhenij-s-pomoshhju-paneli_1.gif" alt="Включение изображений с помощью панели быстрой вставки"><br> Рис. 4.21. Вкладка IMG Tag окна редактора тегов<br> На вкладке IMG Tag имеются следующие элементы (рис. 4.21):<br> <li> поле Source (Источник), предназначенное для ввода значения атрибута SRC; значение может быть введено либо с клавиатуры, либо с помощью расположенной справа кнопки, открывающей стандартное диалоговое окно Windows; выбранное изображение отображается в находящемся ниже окне просмотра; звездочка возле имени атрибута означает, что он является обязательным;</li><br> <li> поле Alt. Text (Альтернативный текст) для ввода альтернативного текста для данного изображения (атрибут ALT); флажок Include when blank (Включать, когда пусто), связанный с этим полем, указывает, будет ли вставляться в код документа атрибут ALT, когда его значение не задано; если в поле Alt. Text введен какой-либо текст, то флажок будет установлен автоматически (независимо от вашего желания);</li><br> <li> поле Name (Имя) предназначено для ввода значения одноименного атрибута; если установлен флажок Include identical NAME and ID (Включать идентичные значения NAME и ID), то в код страницы будет помещен атрибут ID с тем же значением; </li><br> <li> поля Width (Ширина) и Height (Высота) позволяют указать абсолютные значения (в пикселах) соответствующих атрибутов тега <IMG>1 при загрузке выбранного изображения в окно просмотра значения этих атрибутов определяются (и устанавливаются) автоматически;</li><br> <li> кнопка Recalc Image Size (Пересчитать размер изображения); се целесообразно применять в тех случаях, когда атрибуты WIDTH и HEIGHT были установлены вручную и отличаются от действительных размеров изображения; щелчок на кнопке обеспечивает восстановление истинных размеров изображения;</li><br> <li> поля HSpace и VSpace предназначены для установки размеров горизонтального и вертикального полей вокруг изображения;</li><br> <li> поле Border (Рамка) позволяет указать толщину рамки (в пикселах) вокруг изображения;</li><br> <li> раскрывающийся список Align (Выравнивание) обеспечивает выбор способа выравнивания плавающего изображения;</li><br> <li> группа Image Map (Сенсорная карта), в которую входят два элемента, предназначена для установки атрибутов изображения, используемого в качестве сенсорной карты: <br> <li> поле Use Map (Использовать карту) обеспечивает установку значения атрибута USEMAP; он необходим в том случае, когда сенсорная карта обрабатывается на стороне клиента; если описание карты находится в том же документе, то значение атрибута USEMAP должно начинаться с символа "#";</li><br> <li> флажок ISMAP; его установка означает включение в код атрибута ISMAP; напомним, что если атрибут USEMAP используется вместе с атрибутом ISMAP, это говорит о том, что изображение-карта может быть обработано и на стороне клиента, и на стороне сервера.</li><br> <img src="image/vkljuchenie-izobrazhenij-s-pomoshhju-paneli_2.gif" alt="Включение изображений с помощью панели быстрой вставки"><br> Рис. 4.22. Вкладка Browser-specific<br> На вкладке Browser-specific могут быть установлены значения следующих атрибутов (рис. 4.22):<br> <li> DYNSCR, который задаст URL файла видеоклипа; значение атрибута устанавливается в поле Dyn Source (Динамический источник);</li><br> <li> LOOP, определяющего число повторов видеоклипа; его значение вводится или выбирается в списке Loop (Цикл); если значение атрибута не задано, или в списке выбран пункт Infinity, то цикл считается бесконечным (при кэшировании данных этот режим может привести к переполнению буфера на жестком диске);</li><br> <li> START, который определяет условие запуска видеоклипа; значение атрибута выбирается из списка Start (Пуск): <br> <li> fileopen -- воспроизведение видеоклипа начинается при открытии файла-источника;</li><br> <li>mouseover — воспроизведение начинается, когда пользователь перемещает указатель мыши на изображение;</li><br> <li> CONTROLS, который обеспечивает вывод броузером на странице панели управления видеоклипом; атрибут добавляется в код, если установлен флажок Controls (Элементы управления);</li><br> <li> LOWSCR, который позволяет задать адрес альтернативного изображения ухудшенного качества (обычно такое изображение используется для ускорения загрузки страницы и служит в качестве ссылки на полноценное изображение); атрибут устанавливается в поле LowScr;</li><br> <li> ALIGN, который обеспечивает выбор способа выравнивания «плавающего» изображения; в данном случае список Align содержит расширенный перечень вариантов, соответствующий возможностям младших версий броузеров MSIE и Netscape. <br> <li>START, который определяет условие запуска видеоклипа; значение атрибута выбирается из списка Start (Пуск):</li><br> <li>fileopen - - воспроизведение видеоклипа начинается при открытии файла-источника;</li><br> <li>mouseover — воспроизведение начинается, когда пользователь перемещает указатель мыши на изображение;</li><br> <li> CONTROLS, который обеспечивает вывод броузером на странице панели управления видеоклипом; атрибут добавляется в код, если установлен флажок Controls (Элементы управления);</li><br> <li> LOWSCR, который позволяет задать адрес альтернативного изображения ухудшенного качества (обычно такое изображение используется для ускорения загрузки страницы и служит в качестве ссылки на полноценное изображение); атрибут устанавливается в поле LowScr; ALIGN, который обеспечивает выбор способа выравнивания «плавающего» изображения; в данном случае список Align содержит расширенный перечень вариантов, соответствующий возможностям младших версий броузеров MSIE и Netscape.</li><br> Замечания<br><br> 1. При вставке видеоклипа следует обязательно предусмотреть использование альтернативного статического изображения, которое будет отображаться на странице в том случае, если броузер читателя не обладает средствами воспроизведения видео. Создание альтернативного изображения выполняется с помощью элементов вкладки IMG Tag, рассмотренной выше.<br><br> 2. Напомним, что для тега <IMG> может быть использован альтернативный (сокращенный) вариант окна редактора тегов. Для работы с ним следует предварительно установить соответствующий флажок на вкладке HTML/XHTML диалогового окна Settings.<br><td><br> </tr> </table><br><br> <h1>Вставка изображений из окна ресурсов</h1> </h2><br> С графическими файлами можно работать на вкладках Files (обеих) и Projects.<br><br> Перечень возможных действий на всех вкладках идентичен. Вы можете:<br> <li> вставить в код документа тег <IMG> с соответствующим значением атрибута SRC и установленными по умолчанию значениями других атрибутов; </li><br> <li> вызвать окно IMG редактора тегов с загруженным в него изображением.</li><br> Для быстрой вставки тега <IMG> необходимо:<br> <li> 1. В окне ресурсов установить указатель мыши на значке требуемого файла.</li><br> <li> 2. Нажать левую кнопку мыши и, не отпуская ее, перетащить контуры значка в окно документа на позицию вставки; отпустить кнопку мыши.</li><br> Формат создаваемого таким образом тега <IMG> показан на рис. 4.23.<br><br> Альтернативный способ — щелкнуть правой кнопкой мыши на значке файла в окне ресурсов и в открывшемся контекстном меню выбрать команду Insert as Link (Вставить как ссылку).<br> Чтобы вызвать для конкретного графического файла окно редактора тегов, необходимо выполнить одно из двух действий:<br> <li> дважды щелкнуть на значке файла;</li><br> <li> щелкнуть правой кнопкой мыши на значке файла и в открывшемся контекстном меню выбрать команду Insert as <img> (для вкладки Files) или команду Edit (для вкладки Projects).</li><br> <img src="image/vstavka-izobrazhenij-iz-okna-resursov_1.gif" alt="Вставка изображений из окна ресурсов"><br> Рис. 4.23. Тег <IMG>, созданный перетаскиванием файла<br><td><br> </tr> </table><br><br> <h1>Вставка изображений из окна результатов</h1> </h2><br> При создании страниц, насыщенных графикой, приходится одновременно работать с несколькими графическими файлами. В такой ситуации полезно иметь возможность визуального представления содержимого этих файлов. В HomeSite имеется механизм, позволяющий просматривать миниатюры всех изображений, содержащихся в текущей папке. Доступ к этому механизму реализуется с помощью кнопки Thumbnails (Миниатюры), расположенной на основной панели инструментов HomeSite.<br> Щелчок на этой кнопке приводит к тому, что в нижней части главного окна HomeSite открывается окно результатов — Results window, в котором представлены уменьшенные копии изображений (рис. 4.24).<br> При наведении указателя мыши на миниатюру появляется всплывающая подсказка с основными параметрами изображения (имя и формат файла, размеры изображения в пикселах).<br> Чтобы вставить любое изображение на страницу, достаточно просто установить на нем указатель мыши, нажать левую кнопку и перетащить контуры изображения в окно документа. После того, как кнопка будет отпущена, в код страницы будет добавлен тег <IMG> с соответствующими атрибутами.<br> Дополнительные возможности по работе с миниатюрами обеспечиваются через контекстное меню, которое открывается щелчком правой кнопки мыши на миниатюре. Меню содержит следующие команды (рис. 4.25):<br> <img src="image/vstavka-izobrazhenij-iz-okna-rezultatov_1.gif" alt="Вставка изображений из окна результатов"><br> Рис. 4.24. Представление миниатюр изображений в окне результатов<br> <img src="image/vstavka-izobrazhenij-iz-okna-rezultatov_2.gif" alt="Вставка изображений из окна результатов"><br> Рис. 4.25. Контекстное меню миниатюры<br> <li> Reset to current folder (Обновить с помощью текущей папки) — при выборе команды содержимое окна обновляется; команду целесообразно применять после того, как изменялось содержимое текущей папки, либо был изменен текущий каталог;</li><br> <li> Open (Открыть) — выбор команды приводит к открытию изображения с помощью ассоциированного с ним приложения (например, графического редактора Paint Shop Pro или программы просмотра ACDSee);</li><br> <li>Properties (Параметры) — команда обеспечивает вывод на экран окна, в котором представлено полноформатное изображение и его параметры (см. рис. 1.30); </li><br> <li>Insert into current document (Вставить в текущий документ) — в код страницы будет добавлен тег <IMG> с соответствующими атрибутами;</li><br> <li>Close results (Закрыть результаты) — команда закрывает окно результатов.</li><br> Завершая раздел, посвященный работе с графическими файлами, хотелось бы еще раз обратить внимание читателя на основную проблему, которую приходится решать всем Web-дизайнерам, независимо от их опыта и уровня подготовки. Заключается она в отыскании компромисса между изысканностью художественного (читай — графического) оформления страниц и приемлемым временем загрузки этих страниц броузером читателя.<br> В связи с этим уместно привести еще раз известные рекомендации по использованию графики на Web-страницах:<br> <li> 1. Общий объем графики, используемой на одной странице, не должен превышать 50 кб.</li><br> <li> 2. Для сокращения объема графических файлов выбирайте формат изображения с учетом его вида и цветовой гаммы.</li><br> <li> 3. Указывайте в теге <IMG> действительные размеры изображения, чтобы броузер не тратил время на их определение и последующее масштабирование изображения;</li><br> <li> 4. При создании изображений используйте минимально необходимую цветовую палитру; не пренебрегайте средствами оптимизации изображений, имеющимися в графических редакторах.</li><br> <li> 5. Не помещайте на страницы крупные изображения (размер которых превосходит 500x300 пикселов); если без этого не обойтись, замените рисунок на основной странице миниатюрой; помните: указание уменьшенных размеров рисунка в теге <IMG> сокращения времени загрузки не дает.</li><br> <li>6. Как можно более эффективно реализуйте возможности броузеров по кэшированию содержимого страниц; если один и тот же рисунок помещен на нескольких страницах, включите в состав сайта единственный его экземпляр.</li><br> <li>7. Где это возможно, используйте вместо графики стилевое оформление шрифта.</li><br> <li> 8. Аналогичная рекомендация в отношении фона: если можете обойтись без графического фона — обходитесь.</li><br> <li> 9. При создании фона на основе графических изображений используйте элемент заполнения размером не более. 100x100 пикселов.</li><br> <li>10. Не злоупотребляйте анимацией.</li><br> И, наконец, обязательно тестируйте страницы, содержащие графику, по времени загрузки.<br><td><br> </tr> </table><br><br> <h1>Вставка тегов <МЕТА></h1> </h2><br> Тег <МЕТА> -- один из немногих популярных тегов, которые почему-то не были удостоены чести включения в состав панели быстрой вставки. Правда, вы можете создать собственную кнопку либо включить необходимые теги непосредственно в шаблон. Тем не менее, для вставки тегов <МЕТА> можно использовать имеющиеся в составе HomeSite готовые средства:<br> <li> список шаблонов кода (Code Template);</li><br> <li> утилиту Tag Chooser совместно с редактором тегов;</li><br> <li> мастер быстрого создания страниц (Quick Start Wizard).</li><br> Список шаблонов кода содержит шаблоны для тега <МЕТА> со всеми возможными атрибутами. Чтобы воспользоваться списком шаблонов кода, необходимо:<br> <li> 1. Установить курсор в позицию вставки тега и нажать комбинацию клавиш <Ctrl>+J.</li><br> <li> 2. В появившемся списке (рис. 4.1) выбрать тег <МЕТА> с нужным атрибутом и нажать клавишу <Enter>.</li><br> После этого останется только ввести значения атрибутов.<br> <img src="image/vstavka-tegov-meta_1.gif" alt="Вставка тегов <МЕТА>"><br> Рис. 4.1. Вставка тегов <МЕТА> с помощью шаблонов кода<br> Для вставки тегов <МЕТА> с помощью Tag Chooser необходимо:<br> <li> 1. Щелкнуть правой кнопкой мыши в позиции вставки тега и в контекстном меню выбрать команду Insert Tag...</li><br> <li>2. В открывшемся окне утилиты Tag Chooser выбрать группу HTML-тегов Page Composition (Композиция страницы), а в ней — категорию General (рис. 4.2).</li><br> <li> 3. В правом подокне дважды щелкнуть на пункте МЕТА (HTML).</li><br> <li> 4. В открывшемся окне редактора тегов (рис. 4.3) выполнить следующие действия: <br> <li> 4.1. С помощью двух «мини-вкладок» Name и HTTP-Equiv выбрать атрибут тега, а в раскрывающемся списке - - параметр атрибута.</li><br> <li>4.2. В текстовом поле Content ввести значение атрибута и щелкнуть на кнопке ОК.</li><br> <img src="image/vstavka-tegov-meta_2.gif" alt="Вставка тегов <МЕТА>"><br> Рис. 4.2. Вставка тега <МЕТА> с помощью Tag Chooser<br> <img src="image/vstavka-tegov-meta_3.gif" alt="Вставка тегов <МЕТА>"><br> Рис. 4.3. Окно редактора тегов для установки атрибутов тега <МЕТА><br> Третий способ вставки тега <МЕТА> - - с помощью мастера Quick Start Wizard -- отличается от двух предыдущих тем, что мастер создает новую страницу, которая не включена в состав проекта. Вместе с тем, мастер за однo обращение создаст сразу два тега, а не один, как альтернативные инструменты. Итак, для создания тегов <МЕТА> с помощью мастера необходимо:<br> <li> На вкладке Common (Теги общего назначения) панели быстрой встан ки щелкнуть на кнопке Quick Start Wizard (рис. 4.4).</li><br> <li> В первом окне мастера щелкнуть на кнопке Next (Далее), оставив пол не заполненными.</li><br> <li> Во втором окне мастера (рис. 4.5) ввести в полях Keywords (Ключевы слова) и Description (Описание) значения соответствующих парамел ров тега <МЕТА> и щелкнуть на кнопке Finish (Готово).</li><br> <li> Скопировать созданные теги в окно документа проекта.</li><br> <img src="image/vstavka-tegov-meta_4.gif" alt="Вставка тегов <МЕТА>"><br> Рис. 4.4. Вкладка Common панели быстрой вставки<br> <img src="image/vstavka-tegov-meta_5.gif" alt="Вставка тегов <МЕТА>"><br> Рис. 4.5. Окно мастера Quick Start Wizard<br> Замечание<br><br> В оценочной версии HomeSite 5 после щелчка на кнопке Finish на экране появляется диалоговое окно редактора тегов для тега <BODY>, причем в сокращенном (стандартном) формате, который использовался в предыдущих версиях HomeSite. Тем не менее, если вы используете мастер Quick Start Wizard для создания новой страницы, то можете продолжить работу в этом окне: тег <BODY> будет создан с заданными атрибутами. Впоследствии их можно скорректировать с помощью окна расширенного формата, используемого по умолчанию (см. рис. 4.6).<br><td><br> </tr> </table><br><br> <h1>Ввод и форматирование текста</h1> </h2><br> Несмотря на все более широкое использование при создании Web-страниц графики и мультимедийных элементов, текст по-прежнему является основным средством информационного наполнения сайта. При этом легкость и удобство восприятия текстовой информации определяется в основном тремя факторами:<br> <li> стилем изложения;</li><br> <li> соблюдением правил орфографии и пунктуации;</li><br> <li> формой визуального представления текстовой части документа.</li><br> <td><br> </tr> </table><br><br> <h1> Иллюстрированный самоучитель по Macromedia HOMESITE </h1> <h1>Общие правила проектирования навигационной схемы сайта</h1> </h2><br> Для выполнения приведенного выше требования достаточно соблюдать не-сколько не очень сложных правил:<br> <li> на главной странице сайта обязательно должна быть представлена карта сайта, причем не только в графической, но и в текстовой форме (подробнее о структуре главной страницы мы поговорим немного позже);</li><br> <li> на всех последующих страницах должны присутствовать ссылки на главную страницу и/или на первую страницу данного раздела (на которой, в свою очередь, должно быть представлено содержание раздела);</li><br> <li> при использовании рисунков в качестве ссылок они должны быть однотипными на всех страницах и располагаться в одной и той же позиции;</li><br> <li> рисунки, используемые в качестве ссылок (в том числе «кнопки»), должны быть интуитивно различимы для читателей относительно других элементов страницы.</li><br> На достаточно крупных сайтах дополнительно целесообразно предусмотреть возможность оперативной связи с автором (Web-мастером), к которому можно было бы обратиться в затруднительных ситуациях.<br> Для реализации навигационной схемы обычно используются следующие типы ссылок (текстовых или графических):<br> <li> внутренние ссылки, связывающие страницы в пределах одного сайта;</li><br> <li> внешние ссылки, обеспечивающие связь с документами, расположенными вне данного сайта;</li><br> <li> ссылки на адреса электронной почты, которые открывают форму для отправки электронной почты;</li><br> <li> локальные ссылки (иногда именуемые якорями), которые позволяют посетителю переходить на конкретный фрагмент той же страницы или одной из других страниц узла.</li><br> Поскольку даже относительно небольшая публикация, состоящая из нескольких страниц, может содержать весьма сложную систему перекрестных ссылок, полезно для любого проекта предварительно представить навигационную схему сайта в графической форме. Причем совсем необязательно использовать для этих целей графический редактор — вполне достаточно карандаша, ластика и листа бумаги.<br> Будет ли это линейная схема или схема в виде дерева, либо полносвязная структура, ее ядром, источником всех связей должна стать главная страница, поскольку читатель должен иметь возможность вернуться на нее из любой точки узла.<br> На рис. 5.1 показан вариант навигационной схемы для небольшого узла.<br><br> Хорошо спланированная структура является фундаментом для дальнейшего развития узла.<br> Возможность наращивания информационного наполнения сайта без кардинального изменения его структуры называется масштабируемостью сайта.<br> <img src="image/obshhie-pravila-proektirovanija-navigacionnoj_1.gif" alt="Общие правила проектирования навигационной схемы сайта"><br> Рис. 5.1. Вариант навигационной схемы небольшого узла<br> Масштабируемость — это важное свойство любого сайта: каким бы высоким ни был первоначальный рейтинг, узел обязательно должен развиваться. Застывшие формы чужды самой природе Интернета. Необходимость развития узла может быть обусловлена и «внутренними» причинами: ростом профессионального мастерства его создателя, увеличением объема предоставляемых услуг организацией — владельцем узла, стремлением к повышению конкурентоспособности и т. д.<br> Кроме того, масштабируемость узла является одним из условий согласованности его интерфейса: после того, как посетители уже изучили структуру и схему навигации узла, они будут опираться на это знание во время последующих посещений. Если в своих поисках информации они станут терять ориентацию и попадать совсем не туда, куда привыкли, следующего посещения может и не быть.<br> Изложенные выше принципы специалисты в области Web-дизайна уместили в двух «законах разработчика»:<br> <li> закон ссылок: чем большее число ссылок на странице конкурирует за внимание пользователя, тем меньше вероятность, что он воспользуется хотя бы одной из них;</li><br> <li> закон щелчков: чем больше щелчков (мышью) нужно сделать, чтобы добраться до страницы, тем меньше на ней окажется посетителей.</li><br> <td><br> </tr> </table><br><br> <h1>Представление навигационной схемы в окне ресурсов</h1> </h2><br> Несмотря на то, что разработчики HomeSite постарались свести к минимуму долю ручного кодирования, при создании ссылок понимание способов адресации ресурсов публикации просто необходимо. Поэтому прежде, чем перейти к описанию технологии построения ссылок с помощью HomeSite, напомним особенности различных способов адресации документов, входящих в состав публикации. </td> </tr> </table><br><br> <h1>Представление ссылок на вкладке Site View</h1> </h2><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> Команда Refresh позволяет также обновить содержимое вкладки Site View после внесения правки в документ. Однако предварительно документ следует сохранить на диске.<br> HomeSite обеспечивает включение в навигационную схему ссылок, создаваемых с помощью следующих типов тегов:<br> <li><А>;</li><br> <br> <li><IMG>;</li><br><br> <li><FRAME> (если он содержит атрибут SRC);</li><br><br> <li><APPLET> ( если он содержит атрибуты CODE или CODEBASE).</li><br><br> Возможны два варианта представления навигационной схемы документа:<br><br> <li> в виде дерева (рис. 5.3, слева);</li><br><br> <li> в виде диаграммы (рис. 5.3, справа).</li><br><br> Какой вариант считать более наглядным и информативным — зависит от ваших пристрастий, состава и количества ссылок.<br><br> В обоих случаях представление ссылки состоит из двух частей:<br><br> <li> значка, отражающего тип ресурса, на который указывает ссылка;</li><br><br> <li> собственно адреса ресурса.</li><br><br> Со значками все достаточно просто. В таблице 5.1 приведен перечень значков и соответствующих им типов ссылок.<br><br> Табл. 5.1. Перечень условных обозначений типов ссылок<br><br> <table border=1> <tr> <td> Значок<br><br> </td> <td> Тип ссылки<br><br> </td> </tr> <tr> <td> <img src="image/icon-1.gif" alt="Представление ссылок на вкладке Site View"><br><br> </td> <td> Ссылка на HTML-файл (имеются в виду файлы, обрабатываемые на стороне клиента броузером читателя:<br><br> .html, .shtml, .xml и т. д.)<br><br> </td> </tr> <tr> <td> <img src="image/icon-2.gif" alt="Представление ссылок на вкладке Site View"><br><br> </td> <td> Ссылка на графический файл (jpeg, gif, png, blip)<br><br> </td> </tr> <tr> <td> <img src="image/icon-3.gif" alt="Представление ссылок на вкладке Site View"><br><br> </td> <td> Локальная ссылка (якорь)<br><br> </td> </tr> <tr> <td> <img src="image/icon-4.gif" alt="Представление ссылок на вкладке Site View"><br><br> </td> <td> Почтовая ссылка<br><br> </td> </tr> <tr> <td> <img src="image/icon-5.gif" alt="Представление ссылок на вкладке Site View"><br><br> </td> <td> Ссылка на файл, обрабатываемый на стороне сервера (elm, .asp, jsp и т. д.)<br><br> </td> </tr> </table> <img src="image/predstavlenie-ssylok-na-vkladke-site-view_1.gif" alt="Представление ссылок на вкладке Site View"><br><br> Рис. 5.3. Варианты представления навигационной схемы<br><br> Теперь вернемся к способам адресации ресурсов, рассмотренным в предыдущем подразделе.<br><br> В HomeSite реализованы два вида адресации: абсолютная и относительная. Адресация относительно корневой папки проекта не предусмотрена, хотя, как было отмечено выше, в некоторых случаях такой способ весьма удобен.<br><br> В остальном разработчики HomeSite полностью соблюдают описанные выше правила и стараются приучить к ним пользователя. В частности, создание ссылки с относительным адресом невозможно до тех пор, пока не будет сохранен на диске новый документ (файл), в который вы хотите добавить такую ссылку.<br><br> Визуальное представление ссылок с различными способами адресации также соответствует приведенным правилам. Например, на рис. 5.4 показан фрагмент документа с тремя видами ссылок:<br><br> <li> абсолютной (ссылка на файл Index.html)',</li><br><br> <li> относительной ссылкой на файл, расположенный в той же папке (ссылка на файл Slart_1.html);</li><br><br> <li> относительной ссылкой на файл, расположенный в другой папке (ссылк на файл File_01.gif).</li><br><br> <img src="image/predstavlenie-ssylok-na-vkladke-site-view_2.gif" alt="Представление ссылок на вкладке Site View"><br><br> Рис. 5.4. Пример представления адресов в HomeSite<br><br> На этом же рисунке показан формат представления различных видов адре сов на вкладке Site View.<br><br> Практически все операции на вкладке Site View могут быть выполнены с помо щью контекстного меню. Его можно открыть, щелкнув правой кнопкой мыши в любой позиции вкладки. Контекстное меню содержит следующие команды:<br><br> <li> Edit (Правка); команда позволяет открыть в окне редактирования доку мент, на который указывает выбранная ссылка; команда применима только к файлам, относящимся к категории Web-документов;</li><br><br> <li> Expand Links (Развернуть ссылку); с помощью этой команды можно «заглянуть» внутрь документа, вызываемого по данной ссылке, и по-лучить его навигационную схему; тот же результат можно получить дважды щелкнув на ссылке мышью;</li><br><br> <li> Set as Root (Установить как корневую); команда позволяет изменить уровень представления навигационной схемы, оставив в окне только ссылки более низкого уровня по сравнению с выбранной ссылкой (при этом сама ссылка отображается как корневая); чтобы вернуться к исходному варианту представления, требуется переключиться на лю бой другой документ и затем — вновь на редактируемый;</li><br><br> <li> Refresh (Обновить); команда обеспечивает обновление содержимого окна ресурсов (например, после внесения изменений в редактируемый документ и сохранения их на диске);</li><br><br> <li> Options (Дополнительно); это каскадное меню, в которое входят две команды: <br><br> <li> Show <Title> (Показать заголовок); выбор команды приводит к тому, что адреса файлов в навигационной схеме заменяются заголовками хранящихся в них HTML-документов (то есть значениями тегов <TITLE>);</li><br><br> <li> Gradient (Градиент); команда обеспечивает создание для навигационной схемы фона, насыщенность которого увеличивается от верхних ссылок к нижним;</li><br><br> <li> View Style (Способ представления); это также каскадное меню, содержащее два варианта представления навигационной схемы: в виде дерева (Tree) или в виде диаграммы (Chart).</li><br><br> Все команды контекстного меню (за исключением Options и View Style, которые доступны всегда) становятся доступны только в том случае, если выбрана соответствующая ссылка.<br><br> Замечание<br><br> В отличие от стандартного механизма выбора, используемого в Windows-приложениях (да и в других окнах HomeSite), щелчок правой кнопкой на ссылке не означает ее выбор. Чтобы выбрать ссылку, требуется щелкнуть на ней левой кнопкой (при этом она будет выделена инверсным цветом), и только потом открыть контекстное меню с помощью правой кнопки.<br><br> Чтобы получить на вкладке Site View коррективе представление навигационной структуры сайта, требуется выполнить два условия:<br><br> <li> строить ссылки «сверху вниз», используя в качестве «корня» файл главной страницы (Index.html), расположенный в корневой папке проекта; при этом дерево ссылок должно соответствовать дереву папок проекта;</li><br><br> <li> открыть файл главной страницы в окне документа и перейти на вкладку Site View (если вкладка окажется пустой, выберите в контекстном меню команду Refresh).</li><br><br> Дополнительное преимущество указанного подхода состоит в том, что для всех ресурсов (файлов) проекта будет использована относительная адресация.<br><br> Например, на рис. 5.5 показано дерево ссылок, построенное относительно файла Index.html, который находится в корневой папке проекта (New).<br><br> Если требуется получить дерево ссылок какого-либо файла нижнего уровня, достаточно дважды щелкнуть мышью на значке соответствующей ссылки. При этом в тексте документа выбранная ссылка также будет выделена (рис. 5.6).<br><br> Чтобы на вкладке Site View были представлены только ссылки, являющиеся подчиненными (или дочерними) по отношению к выбранной, следует в контекстном меню этой ссылки выбрать либо команду Set as Root, либо команду Edit. Во втором случае соответствующий файл будет также открыт в окне документа.<br><br> <img src="image/predstavlenie-ssylok-na-vkladke-site-view_3.gif" alt="Представление ссылок на вкладке Site View"><br><br> Рис. 5.5. Дерево ссылок, построенное относительно файла главной страницы (lndex.html)<br><br> <img src="image/predstavlenie-ssylok-na-vkladke-site-view_4.gif" alt="Представление ссылок на вкладке Site View"><br><br> Рис. 5.6. «Раскрытие» ссылки следующего уровня</td> </tr> </table><br> <h1>Разработка навигационной схемы сайта</h1> <table border=1><br> <tr> <td> <br> <li>Разработка навигационной схемы сайта</li><br> Та легкость, с которой современные HTML-редакторы позволяют созда вать гиперссылки на основе произвольного фрагмента текста документа или графического изображения, вызывают соблазн расставить их везде, где только можно. Однако практика показывает, что чрезмерное увлечение создание ссылок может выйти боком как создателю сайта, так и посетителям.<br> Продуманная навигационная схема сайта должна предоставлять посетителям важную возможность — оценить, какая информация находится на узле, насколько быстро можно до нее добраться. Находясь на любой странице узла, посетители должны представлять свое местоположение, знать, что они могут сделать на этой странице, и куда могут пойти дальше.<br> <td> </tr> </table><br><br> <h1>Редактирование фреймов с помощью Tag Tree и Tag Inspector</h1> </h2><br> В отличие от инструментов, рассмотренных выше, Tag Tree и Tag Inspectoi не позволяют создавать новые фреймы, однако предоставляют удобный интерфейс для редактирования имеющихся.<br> Tag Tree обеспечивает просмотр структуры набора фреймов с различной степенью детализации и быстрый переход от одного фрейма к другому (рис. 5.25). Эффективность применения Tag Tree тем выше, чем сложнее структура набора фреймов.<br> <img src="image/redaktirovanie-frejmov-s-pomoshhju-tag-tree-i-tag_1.gif" alt="Редактирование фреймов с помощью Tag Tree и Tag Inspector"><br> Рис. 5.25. Представление параметров набора фреймов на вкладке Tag Inspector окна ресурсов<br> Обратите внимание, что фреймы, для которых задан атрибут NAME, представлены в дереве тегов своим именем, для остальных же указывается значение атрибута SRC.<br> Выбор фрейма в дереве тегов приводит к тому, что в окне инспектора тегов отображается список атрибутов этого фрейма и их значения. В зависимости от типа значений атрибутов некоторые из них вводятся непосредственно с клавиатуры, другие выбираются из раскрывающихся списков.<br> Замечание<br><br> Основные теги, предназначенные для работы с фреймами (<FRAMESET>, <FRAME> и <NOFRAMES>) доступны через утилиту Tag Chooser. Они входят в категорию Page Composition.<br> Завершая описание инструментов для разработки элементов навигации, еще раз повторим, что разработка схемы навигации обязательно должна сопровождаться ее тестированием. Средства тестирования ссылок описаны в седьмой главе.<br> <td><br> </tr> </table><br><br> <h1>Создание фреймов с помощью мастера</h1> </h2><br> Мастер Frame Wizard обеспечивает существенное повышение эффективности работы независимо от того, насколько богатым опытом вы обладаете в использовании фреймов. Пожалуй, его достоинства в полной мере смогут оценить именно те из читателей, кто в свое время помучался, описывая структуру набора фреймов вручную.<br> Щелчок на кнопке Frame Wizard приводит к появлению на экране первого окна мастера — Frame Design (Проектирование фрейма). Оно содержит интерактивное окно просмотра и кнопки для изменения структуры набора фреймов.<br> В исходном состоянии набор фреймов в окне просмотра содержит четыре фрейма равного размера (рис. 5.19, вверху), причем все фреймы отображаются как выбранные (синим цветом). Это означает, что активным является набор фреймов в целом.<br> Вы можете произвольным образом изменять как количество фреймов в активном наборе, так и создавать вложенные наборы произвольной конфигурации:<br> <li> чтобы добавить или удалить горизонтальный фрейм, необходимо щелкнуть на соответствующей кнопке Row (Строка) либо со знаком «+», либо со знаком «-»;</li><br> <li> чтобы добавить или удалить вертикальный фрейм, необходимо щелкнуть на соответствующей кнопке Col (от Columns —- «столбцы») либо со знаком «+», либо со знаком «-»;</li><br> <li> чтобы изменить размер любого фрейма, следует установить указатель на его границе, нажать левую кнопку мыши (при этом указатель примет форму двойной стрелки) и переместить границу в нужном направлении;</li><br> <li> чтобы создать вложенный набор фреймов, необходимо: <br> <li> 1. Щелкнуть на том фрейме, внутри которого он будет создан (при этом с других фреймов выделение будет снято).</li><br> <li> 2. С помощью кнопок Row и/или Col сформировать требуемую структуру.</li><br> Пример создания вложенного набора фреймов показан на рис. 5.19, внизу.<br> <img src="image/sozdanie-frejmov-s-pomoshhju-mastera_1.gif" alt="Создание фреймов с помощью мастера"><br> Рис. 5.19. Первое окна мастера создания фреймов<br> Замечание<br><br> Если требуется активизировать некоторый набор фреймов в целом (то есть все фреймы набора), следует щелкнуть на любом фрейме при нажатой клавише <Shift>.<br> Напомним, что структура набора фреймов определяется атрибутами ROWS и COLS тега <FRAMESET>. При этом значения указанных атрибутов (размеры фреймов) могут быть заданы как в абсолютных единицах (пикселах), так и в процентах от размера окна броузера. Мастер Frame Wizard обеспечивает установку значений в процентах, поскольку такой вариант является более «безопасным» (результат не зависит от разрешения монитора читателя). При необходимости вы можете впоследствии заменить установленные значения абсолютными величинами, отредактировав код документа.<br> После того как структура набора фреймов будет определена, щелкните на кнопке Next (Далее), чтобы перейти на второй шаг работы с мастером.<br> На втором шаге вы можете установить индивидуальные атрибуты каждого фрейма (то есть атрибуты тегов <FRAME>).<br> В исходном состоянии элементы управления, имеющиеся во втором окне мастера (оно называется Frame Attributes — «атрибуты фрейма»), недоступны. Чтобы установить атрибуты фрейма, требуется щелкнуть на его изображении.<br> <img src="image/sozdanie-frejmov-s-pomoshhju-mastera_2.gif" alt="Создание фреймов с помощью мастера"><br> Рис. 5.20. Окно Frame Attributes<br> Окно Frame Attributes содержит следующие элементы (рис. 5.20):<br> <li> поле Name (Имя), предназначенное для ввода значения атрибута NAME; этот атрибут задаст имя фрейма; он не является обязательным и нужен только для тех фреймов, содержимое которых будет обновляться при просмотре страницы читателем; в качестве имени фрейма может использоваться любая последовательность латинских букв, цифр и символов подчеркивания (цифра не должна стоять первой); имя фрейма должно использоваться в качестве значения атрибута TARGET тега <А>, который содержит ссылку на вызываемый документ;</li><br> Замечание<br><br> Чтобы управлять выводом информации в различные окна набора фреймов, не обязательно именовать фреймы. В качестве значения атрибута TARGET вместо конкретного имени могут быть введены предопределенные значения:<br><br> _blank — вызываемый документ всегда загружается в новое, неименованное окно;<br><br> _self -— вызываемый документ всегда загружается в то же окно, в котором была инициирована ссылка;<br><br> _parent — вызываемый документ загружается в родительский фрейм (то есть фрейм более высокого уровня иерархии). Если данный фрейм не имеет «родителя», или сам является таковым, то результат аналогичен применению значения _self;<br><br> _top — вызываемый документ загружается в окно самого верхнего уровня (если данный фрейм сам является таковым, то результат аналогичен применению значения _self). <br> <li>поле Source URL (URL источника), в котором следует указать (или выбрать с помощью расположенной рядом кнопки) адрес документа, помещаемого в фрейм; с точки зрения HTML атрибут SRC является обязательным, хотя мастер разрешает оставить и это поле пустым;</li><br> <li>поля Height (Высота) и Width (Ширина), входящие в группу Margins (Поля), которые обеспечивают установку атрибутов MARGINHEIGHT и MARGINWIDTH, управляющих размерами вертикального и горизонтального полей вокруг содержимого фрейма; минимальное значение для каждого из атрибутов равно 1 (0 указывать нельзя); если значения не заданы, броузер установит собственное значение; </li><br> <li>группу элементов Frame Appearance (Визуальное представление фрейма), в которую входят: <br> <li> раскрывающийся список Scrolling (Прокрутка), с помощью которого устанавливается значение одноименного атрибута (он управляет отображением полос прокрутки в окне фрейма); значение Аutо позволяет броузеру добавлять полосу прокрутки только в том случае, если содержимое документа не умещается в окно фрейма; </li><br> <li>флажок Border (Рамка), управляющий значением атрибута FRAMEBORDER: если флажок снят, атрибут равен 0 (рамка не выводится), если поставлен, то его значение равно 1 (рамка выводится);</li><br> Замечание<br><br> Атрибут FRAMEBORDER может принимать еще два предопределенных значения: «Yes» — рамка выводится; ее толщина определяется в соответствии с атрибутом BORDER тега <FRAMESET>; «No» — рамка для данного фрейма не выводится; поскольку эти значения являются специфическими для броузера Netscape, то они могут быть введены либо вручную, либо с помощью окна редактора тегов (о котором будет рассказано ниже).<br> <li> флажок No Resize (Не изменяемый), управляющий значением атрибута NORESIZE: если флажок снят, атрибут отсутствует (посетитель может изменять размеры окна фрейма), если поставлен, то атрибут присутствует и не позволяет изменять размеры фрейма.</li><br> После того, как установка атрибутов фреймов будет завершена, щелкните на кнопке Finish (Готово). Мастер сгенерирует соответствующий код и вставит его в редактируемый документ.<br> Обратите внимание, что кнопка Finish доступна во втором окне мастера еще до того, как будут установлены параметры хотя бы одного фрейма. Это означает, что вы можете прекратить работу с мастером. В этом случае для всех фреймов набора будут заданы значения атрибутов по умолчанию.<br> Важное замечание<br><br> Напомним, что HTML-страница, в которой содержится тег <FRAMESET>, должна быть без тега <BODY>. Поэтому, если вы создавали набор фреймов на основе стандартного шаблона, необходимо после завершения работы мастера вручную удалить теги <BOOY> и </BOOY> из кода страницы. Из этого следует вывод: для страницы с описанием набора фреймов должен использоваться отдельный файл, «без тела».<br><td><br> </tr> </table><br><br> <h1>Создание фреймов с помощью редактора тегов</h1> </h2><br> Редактор тегов может быть вызван щелчком на одной из четырех кнопок вкладки Frames:<br> <li> Frameset Dialog (Диалог набора фреймов) — вызов диалогового окна для установки атрибутов тега <FRAMESET>;</li><br> <li> Frame Dialog (Диалог фрейма) — вызов диалогового окна для установки атрибутов тега <FRAME>;</li><br> <li> Floating Frame Dialog (Диалог плавающего фрейма) — вызов диалогового окна для установки атрибутов тега <IFRAME>;</li><br> <li> Noframes Dialog — вызов диалогового окна для установки атрибутов тега <NOFRAMES>.</li><br> Перечисленные диалоговые окна содержат многие элементы, идентичные тем, которые используются при работе с мастером создания фреймов. Тем не менее при работе с редактором тегов появляется возможность установить или изменить значения атрибутов, которые мастер устанавливает «по умолчанию». Поэтому ниже приведена краткая характеристика перечисленных окон для работы с «фреймовыми» тегами.<br> Замечание<br><br> Для любого из «фреймовых» тегов, уже вставленных в код страницы, соответствующее окно редактора тегов может быть вызвано с помощью команды контекстного меню Edit Current Tag.<br> Итак, с помощью окна редактора тегов могут быть установлены следующие атрибуты тега <FRAMESET> (рис. 5.21).<br> <img src="image/sozdanie-frejmov-s-pomoshhju-redaktora-tegov_1.gif" alt="Создание фреймов с помощью редактора тегов"><br> Рис. 5.21. Окно для установки атрибутов тега <FRAMESET><br> <li> на вкладке FRAMESET Tag — атрибуты ROWS и COLS (их значения вводятся в одноименных полях);</li><br> <li> на вкладке Browser-specific — атрибуты FRAMEBORDER (он управляет выводом рамок фреймов в наборе), FRAMESPACING (позволяет устанавливать ширину рамки) и BORDERCOLOR (цвет рамки).</li><br> Для тега <FRAME> с помощью окна редактора тегов могут быть установлены следующие атрибуты (рис. 5.22).<br> <li> на вкладке FRAME Tag — атрибуты SRC (его значение устанавливается в поле Source), NAME, MARGINHEIGHT, MARGINWIDTH, SCROLLING, NORESIZE и FRAMEBORDER (в данном случае его значения могут быть выбраны из одноименного раскрывающегося списка, в котором присутствуют упоминавшиеся выше варианты "Yes" и "No"); </li><br> <li> на вкладке Browser-specific — единственный атрибут — BORDERCOLOR.</li><br> <img src="image/sozdanie-frejmov-s-pomoshhju-redaktora-tegov_2.gif" alt="Создание фреймов с помощью редактора тегов"><br> Рис. 5.22. Окно для установки атрибутов тега <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><br> <li> на вкладке Alternative Content вводится текст, который будет помещен между открывающим и закрывающим тегами <IFRAfyffi> и </IFRAME>; он предназначен для тех читателей, броузеры которых не поддерживают работу с «плавающими» фреймами;</li><br> <li> на вкладке Browser-specific — атрибуты HSPACE и VSPACE, значения которых определяют размеры вертикального и горизонтального смещения окна фрейма относительно предыдущего элемента страницы и/ или края окна броузера.</li><br> Тег <BASE> прямого отношения к фреймам не имеет. Он позволяет указать полный URL документа, с тем чтобы использовать его в качестве базового адреса для определения частичных URL связанных с ним документов.<br> Размещение кнопки Base Target на вкладке Frames объясняется тем, что применение тега <BASE> особенно эффективно именно при работе с фреймами. Указав базовый адрес страницы, содержащей тег <FRAMSET>, вы можете использовать частичные URL для адресации, документов, образующих фреймы. Это не только делает более компактным код базовой страницы, но и способствует повышению надежности ссылок: при изменении базового адреса частичные URL останутся корректными.<br> Щелчок на кнопке Base Target приводит к открытию окна редактора тегов, с помощью которого может быть установлен единственный обязательный атрибут тега <BASE> — HREF. Его значением является абсолютный адрес текущего документа.<br> Замечание<br><br> Тег <BASE> должен находиться внутри заголовка документа (то есть внутри тега <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/>).<br> Кнопки вкладки Frames, которые обеспечивают быструю вставку «фреймовых» тегов без атрибутов, можно считать вспомогательными инструментами. Их целесообразно применять в том случае, если вы хотите внести небольшие изменения в набор фреймов, созданный ранее другими средствами.<br> <td><br> </tr> </table><br><br> <h1>Создание фреймов</h1> </h2><br> На первый взгляд, механизм фреймов не связан непосредственно с навигационной схемой сайта. Но это не совсем верно. Достаточно тесная связь между этими аспектами создания сайта обуславливается двумя факторами. Во-первых, для правильной работы фреймов требуется тщательно продумать и корректно реализовать систему ссылок между ними. Во-вторых, зачастую фреймы обеспечивают удобные средства навигации по сайту. Например, поместив сенсорную карту (в виде линейки кнопок) в фрейм, расположенный в верхней части окна броузера, вы обеспечите ее постоянную доступность для посетителя, какой бы длинной ни была страница.<br> В HomeSite для создания фреймов и редактирования их атрибутов предназначены следующие инструменты:<br> <li> мастер для создания фреймов -- Frame Wizard;</li><br> <li> диалоговые окна редактора тегов;</li><br> <li> кнопки быстрой вставки тегов создания фреймов.</li><br> Доступ ко всем перечисленным инструментам выполняется с помощью вкладки Frames (Фреймы) панели быстрой вставки (рис. 5.18).<br> <img src="image/sozdanie-frejmov_1.gif" alt="Создание фреймов"><br> Рис. 5.18. Вкладка Frames панели быстрой вставки<br><td><br> </tr> </table><br><br> <h1>Создание гипертекстовых ссылок</h1> </h2><br> В данном случае в категорию гипертекстовых ссылок включены все виды ссылок, создаваемых с помощью тегов <А> и <IMG>. Однако сразу оговоримся: создание сенсорных карт будет рассмотрено в следующем разделе.<br><br> Итак, для создания ссылок на основе тегов <А> и <IMG> могут использоваться следующие средства:<br> <li> перетаскивание мышью значка файла из окна ресурсов в окно документа;</li><br> <li> команда Insert as Link (Вставить как ссылку) контекстного меню файла;</li><br> <li> вставка ссылки с помощью окна редактора тегов.</li><br> При использовании первого способа курсор в окне документа перемещается вслед за контуром файла. Поэтому тег ссылки будет помещен в ту позицию документа, где будет находиться курсор в тот момент, когда вы отпустите кнопку мыши. Это требует определенной аккуратности при выполнении операции.<br> При использовании команды Insert as Link и редактора тегов ссылка будет вставлена в ту позицию, где находился курсор перед выбором команды или перед вызовом редактора тегов.<br> Если ссылка создастся перетаскиванием или с помощью команды Insert as Link, для тегов <А> и <IMG> генерируется предопределенный набор атрибутов.<br> Для тега <А> таким атрибутом является HREF с адресом соответствующего файла. При этом возможны следующие варианты:<br> <li> если ссылка создастся в сохраненном ранее документе, то HomeSite автоматически генерирует относительный адрес вставляемого файла;</li><br> <li> если вы перетаскиваете значок файла в документ, который ни разу не был сохранен на диске, то на экран выводится сообщение, что относительный адрес не может быть вычислен, пока документ не будет сохранен (рис. 5.7); в окне сообщения имеются две кнопки: <br> <li> кнопка Yes позволяет сохранить документ, после чего в него будет вставлена ссылка с относительным адресом;</li><br> <li> щелчок на кнопке No приводит к отмене операции создания ссылки.</li><br> <img src="image/sozdanie-gipertekstovyh-ssylok_1.gif" alt="Создание гипертекстовых ссылок"><br> Рис. 5.7. Напоминание о том, что для создания относительной ссылки требуется сохранить документ на диске<br> При создании ссылки на основе тега <А> HomeSite автоматически, генерирует текст ссылки, в качестве которого используется заголовок документа.<br> Замечание<br><br> Напомним, что от этой услуги можно отказаться, сняв флажок Use <title> of dragged documents... на вкладке HTML/XHTML диалогового окна Settings.<br> При создании ссылки на основе тега <IMG> в код документа вставляются атрибуты SRC, WIDTH, HEIGHT, ALT и BORDER. При этом значение атрибута SRC генерируется по тем же правилам, что и для атрибута HREF тега <А>: относительный адрес будет вычислен только после сохранения документа на диске. Значения атрибутов WIDTH, HEIGHT устанавливаются на основе фактичес-ких параметров изображения, атрибут ALT вставляется с пустым значением, а атрибут BORDER равен 0. Чтобы создать ссылку с помощью редактора тегов, следует на вкладке Common панели быстрой вставки щелкнуть на кнопке Anchor (Якорь). Обязательные атрибуты тега устанавливаются на вкладке A Tag, которая содержит следующие элементы управления (рис. 5.8): <br> <li> текстовое поле HREF, которое предназначено для ввода значения одноименного атрибута; адрес-ссылку можно либо ввести вручную, либо выбрать с помощью одной из трех расположенных справа кнопок: первая из них открывает список файлов текущей папки, вторая — список файлов в папке Favorites броузера MSIE, а третья — список закладок (Bookmarks), созданных с помощью броузера Netscape; если маршрут ссылки был выбран с помощью кнопок, то при работе с несохраненным документом на экране появится сообщение, что в ссылке будет использован абсолютный адрес (рис. 5.9); для подтверждения следует щелкнуть на кнопке ОК (правда, если просто закрыть окно, все равно в поле будет помещен абсолютный адрес); если вы работаете с сохраненным документом, то HomeSite вычислит относительный адрес;</li><br> <img src="image/sozdanie-gipertekstovyh-ssylok_2.gif" alt="Создание гипертекстовых ссылок"> Рис. 5.8. Вкладка A Tag окна редактора тегов Замечание<br><br> Если при работе с не сохраненным документом ввести в поле HREF вручную относительный адрес, то HomeSite его «проглотит» и вставит в код документа. Однако созданная ссылка останется неработоспособной до тех пор, пока вы не сохраните документ на диске.<br><br> Ручной ввод адреса целесообразно использовать при создании ссылок на внешние ресурсы. При этом URL внешнего ресурса следует ввести полностью, например: http://www.wsoort.ru. <br> <li>раскрывающийся список Protocol (Протокол), позволяющий выбрать протокол, который должен использоваться при закачке документа; </li><br> <li> поле Name, предназначенное для ввода значения атрибута NAME; этот атрибут необходим для создания локальных ссылок (якорей); пример создания локальной ссылки будет рассмотрен ниже; </li><br> <li> поле Title, предназначенное для ввода значения одноименного атрибута (позволяющего использовать для ссылки всплывающую подсказку); атрибут поддерживается только броузером MSIE; </li><br> <li> многострочное поле Description, в котором может быть введен текст ссылки; этот текст HomeSite поместит между тегами <А> и </А>.</li><br> На вкладке HTML 4.0 окна редактора тегов дополнительно может быть задан атрибут TARGET. Он позволяет указать окно, в которое требуется вывести содержимое документа, вызванного по ссылке. Выбор значения атрибута выполняется с помощью одноименного раскрывающегося списка, который содержит следующие варианты: _self — вызванный документ будет загружен в то же окно броузера, в котором содержится ссылка; <img src="image/sozdanie-gipertekstovyh-ssylok_3.gif" alt="Создание гипертекстовых ссылок"><br> Рис. 5.9. Предупреждение о том, что при работе с несохраненным документом в поле HREF создается абсолютный адрес<br> _parent — вызванный документ будет загружен в окно, которое является родительским по отношению к окну, содержащему ссылку;<br><br> _top — вызванный документ будет загружен в окно, которое будет открыто поверх всех существующих на данный момент окон;<br><br> _blank — вызванный документ будет загружен в новое пустое окно.<br> Кроме того, в поле списка может быть вручную введено имя любого окна, либо созданного с помощью тега <FRAME>, либо открываемого с помощью метода (функции сценария) window_ореn.<br> По умолчанию вызванный документ открывается в том же окне, в котором содержится ссылка на него.<br> Подробнее об управлении окнами броузера при работе с фреймами будет рассказано в разделе «Создание фреймов».<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 — название раздела (или его первую фразу, если раздел не имеет отдельного заголовка), как показано на рис. 5.1 вверху; щелкнуть на кнопке ОК.</li><br> <li>3. В окне документа выделить фрагмент текста, который будет ис-пользоваться в качестве текста ссылки (например, «см. Маркированный список»), и на панели быстрой вставки щелкнуть на кнопке Anchor.</li><br> <li> 4. В окне редактора тегов ввести в поле HREF имя метки с префиксом (рис. 5.10, внизу) и щелкнуть на кнопке ОК.</li><br> С помощью редактора тегов может быть создана ссылка еще одного специ ального типа — почтовая. Правда, кнопка вызова соответствующего диалогово го окна отсутствует на панели быстрой вставки, поэтому необходимо использо вать утилиту Tag Chooser. Окно, предназначенное для создания почтовой ссыл ки, называется MAILTO. В списке тегов утилиты Tag Chooser оно входит категорию Page Elements, раздел General.<br> Окно содержит следующие поля (рис. 5.11):<br> <li> Email address (Адрес электронной почты); оно предназначено для вво да адреса, который будет помещен в поле «Куда» почтового клиента установленного на компьютере;</li><br> <img src="image/sozdanie-gipertekstovyh-ssylok_4.gif" alt="Создание гипертекстовых ссылок"> <br> Рис. 5.10. Пример создания локальной ссылки<br> <img src="image/sozdanie-gipertekstovyh-ssylok_5.gif" alt="Создание гипертекстовых ссылок"><br> Рис. 5.11. Окно редактора тегов для создания почтовой ссылки<br> <li> Subject (Тема); оно предназначено для ввода произвольного текста, поясняющего содержание письма; введенный текст будет вставлен поле «Тема» почтового клиента; </li><br> <li> Link image (Значок ссылки); в нем может быть указан адрес графического файла, который будет использоваться в качестве значка, отобр жаемого на странице возле текста ссылки;</li><br> <li> Addressee/ link text (Адресат/текст ссылки); в нем следует ввести текст ссылки (в качестве такого текста может быть непосредственно указан имя адресата или наименование организации-адресата).</li><br> HTML-код, который будет сгенерирован редактором тегов и помещен в дoкумент, показан на рис. 5.12 (применительно к параметрам примера, приведи ного на рис. 5.11).<br> <img src="image/sozdanie-gipertekstovyh-ssylok_6.gif" alt="Создание гипертекстовых ссылок"><br> Рис. 5.12. HTML-код, сгенерированный редактором тегов<br> Замечание<br><br> После того как почтовая ссылка будет помещена в код документа, для ее редактирования с помощью команды Edit Current Tag будет вызываться окно тега <А>.<br> <td><br> </tr> </table><br><br> <h1>Создание сенсорной карты</h1> </h2><br> Сенсорная карта (или карта-изображение, Image Map) — это изображение, содержащее специальные области, так называемые активные (или горячие зоны (hotspots), которые позволяют пользователю перемещаться на связанный (ассоциированный) с картой URL или на другую страницу в пределах того же узла посредством щелчка ЛКМ на выбранной зоне. Сенсорная карта может иметь несколько активных зон, с каждой из которых связан собственный URL. Хотя в большинстве случаев сенсорные карты используются для перехода на другую страницу или на другой URL, с их помощью можно также вызывать файлы произвольного типа (например, Flash-фильмы).<br> Web-дизайнер обладает достаточно большой свободой в выборе расположения и конфигурации активных зон. Они могут создаваться на любой части изображения и иметь форму прямоугольника, круга, многоугольника или точки. При этом границы между зонами визуально не отображаются. В связи с этим целесообразно предусмотреть для каждой активной зоны всплывающую подсказку, появляющуюся на экране при наведении на соответствующую зону указателя мыши. Кроме того, в качестве основы для разработки сенсорной карты лучше использовать такие изображения, на которых границы между зонами логически и визуально различимы.<br> Современные броузеры поддерживают сенсорные карты двух типов:<br> <li> обрабатываемые на стороне сервера (server-side image map); </li><br> <li>обрабатываемые на стороне клиента (client-side image map).</li><br> Особенность карт первого типа состоит в том, что реакция активной зоны на действия пользователя (то есть на щелчок кнопкой мыши) формируется программой-сценарием, выполняемой на сервере. Результатом является 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> <img src="image/sozdanie-sensornoj-karty_1.gif" alt="Создание сенсорной карты"><br> Рис. 5.13. Кнопка вызова утилиты Image Map Editor<br> На экране появится диалоговое окно, в котором отображается список графических файлов, используемых в редактируемой странице (рис. 5.14). В этом списке следует выбрать изображение, на основе которого будет создана сенсорная карта. Имя этого файла появится в поле Image Name (Имя изображения). После этого остается только указать имя карты (произвольный идентификатор) в поле Map Name (Имя карты) и нажать кнопку ОК.<br> Замечание<br><br> Если в редактируемом документе уже имеются сенсорные карты, то они в список не включаются.<br> В открывшемся окне редактора представлено выбранное изображение, а также набор инструментов для создания сенсорной карты (рис. 5.15).<br> <img src="image/sozdanie-sensornoj-karty_2.gif" alt="Создание сенсорной карты"><br> Рис. 5.14. Окно выбора изображения для создания сенсорной карты<br> <img src="image/sozdanie-sensornoj-karty_3.gif" alt="Создание сенсорной карты"><br> Рис. 5.15. Окно редактора Image Map Editor<br> Кроме того, в правой части окна имеется панель активных зон (Regions Window), в которой отображается информация об активных зонах изображения (если они есть).<br> Работа с редактором Image Map Editor состоит в выполнении следующих действий:<br> <li>1. Выбрать форму очередной горячей зоны, щелкнув на соответствующей кнопке панели инструментов.</li><br> <li> 2. Установить указатель мыши в начальной точке будущей горячей зоны, и, нажав левую кнопку мыши, переместить его до конечной точки (если горячая зона должна иметь форму многоугольника, то очередная его вершина создается щелчком кнопки мыши), после чего отпустить кнопку мыши. </li><br> <li>3. В открывшемся окне редактора тегов (рис. 5.16) установить необходимые атрибуты тега <AREA> (адрес перехода — HREF и альтернативный текст) и нажать кнопку ОК; после того, как окно редактора тегов закроется, в панели активных зон появится уменьшенное изображение зоны и адрес связанного с ней документа (рис. 5.17); /двойной щелчок левой кнопкой мыши на изображении зоны позволяет повторно открыть окно установки атрибутов тега <AREA>. </li><br> <li> 4. Если определены все активные зоны сенсорной карты, выбрать в меню File (Файл) команду Save and exit (Сохранить и выйти); окно Image Map Editor закроется, а в код редактируемой страницы будет вставлен тег <МАР> со всеми необходимыми атрибутами.</li><br> <img src="image/sozdanie-sensornoj-karty_4.gif" alt="Создание сенсорной карты"><br> Рис. 5.16. Окно установки атрибутов тега <AREA><br> К сожалению, утилита Image Map Editor не может быть открыта повторно для редактирования параметров существующей сенсорной карты. Вместе с тем, могут быть скорректированы атрибуты тегов, с помощью которых формируется карта (<МАР> и <AREA>). Для этого можно воспользоваться редактором тегов, вызвав его командой Edit Current Tag из контекстного меню тега.<br> <img src="image/sozdanie-sensornoj-karty_5.gif" alt="Создание сенсорной карты"><br> Рис. 5.17. Представление активной зоны в информационном окне<br><td><br> </tr> </table><br><br> <h1>Способы адресации ресурсов публикации</h1> </h2><br> Каждому типу ссылок соответствует, как правило, свой способ адресации связанного документа:<br> <li> абсолютный (например: http://www.service.com/support/software/prog1l.html); </li><br> <li> документо-относительный (например: software/prog1. html); </li><br> <li> относительно корневой папки узла (например: /support/software/ prog1.html).</li><br> Абсолютный адрес предполагает использование полного URL связанного документа, включая соответствующий протокол доступа. Такой способ адресации обязателен для осуществления связи с документом, расположенном на другом сервере. При желании можно, конечно, использовать абсолютный адрес для связи со страницами внутри сайта, размещенного на вашем локальном компьютере. Однако большая часть адресной информации в этом случае будет избыточной. Кроме того, если вы переместите связанный файл на новое место, или измените файловую структуру вашего сайта, то абсолютный адрес станет некорректным.<br> Документо-отиосительные адреса (в дальнейшем для краткости будем называть их просто относительными) являются, как правило, наиболее удобными для организации внутренних ссылок сайта. Они особенно удобны в тех случаях, когда документ, содержащий ссылку («источник связи») и связанный с ним документ находятся в одной папке и, по вероятности, останутся вместе в течение всей жизни сайта.<br> Вы можете также использовать относительный адрес при создании ссылки на документ, находящийся в другой папке, указав путь через иерархию папок от текущего документа до связанного с ним документа. При описании относительного адреса вы можете опустить ту часть полного URL, которая является общей и для текущего, и для связанного документа.<br> Чтобы создать ссылку на файл, находящийся в той же папке, что и источник связи, достаточно указать только имя этого файла. Если связываемый файл находится в папке следующего уровня иерархии по отношению к источнику связи, то требуется указать имя вложенной папки, затем слэш (косую черту), а после него — имя связываемого файла. При создании ссылки на файл, расположенный в родительской папке по отношению к папке, содержащей источник связи, имени связываемого файла должны предшествовать символы ../ (где ../ означает «на один уровень выше текущей папки»).<br> Сказанное поясним на примере. Предположим, что сайт имеет структуру, приведенную на рис. 5.2.<br> <img src="image/sposoby-adresacii-resursov-publikacii_1.gif" alt="Способы адресации ресурсов публикации"> <br> Рис. 5.2. Пример структуры сайта<br> Для изображенной на рисунке структуры относительные адреса будут выглядеть следующим образом:<br> <li> ссылка от файла prog1.html к prog2.html (оба файла находятся ъ одной папке)— просто имя связываемого файла: prog2.html;</li><br> <li> ссылка от файла content.html (расположенного в папке support) к файлу prog1.html (находящемуся в папке следующего уровня software) содержит имя вложенной папки и имя файла: software/prog1.html',</li><br> <li> ссылка от файла content.html к index.html (находящемуся в корневой папке, на один уровень выше contents.html), содержит относительный путь ../index.html;</li><br> <li> ссылка от файла prog1.html к devicel.html (находящемуся в другой вложенной папке по отношению к папке support), использует относительный путь ../hardware/deviceI.html, в данном случае символ ../ означает переход на один уровень вверх, к папке support, а hardware/ обеспечивает переход внутрь папки hardware.</li><br> Замечание<br><br> Перед созданием относительного адреса необходимо сначала сохранить на диске файл-источник связи (если он является новым файлом), поскольку относительный адрес некорректен без привязки к конкретной точке отсчета.<br> И еще одни достаточно важный момент.<br> Если вы перемещаете группу файлов как единое целое (например, при перемещении всей папки целиком), то, чтобы прежние относительные ссылки между файлами остались корректными, не следует модифицировать эти ссылки. Однако если вы перемещаете отдельный файл, который содержит относительные ссылки, или файл, на который имеется относительная ссылка, вы должны скорректировать эти ссылки.<br> Адресация относительно корневой папки узла предполагает описание маршрута доступа к связываемому документу относительно папки самого высокого уровня в иерархии узла.<br> Обычно описание адреса относительно корневой папки требует большей аккуратности, чем относительная адресация, но в некоторых случаях оно может оказаться более эффективным. В частности, такой способ адресации является наиболее подходящим для такого узла, в котором приходится часто перемещать HTML-файлы из одной папки в другую.<br> Адрес, построенный относительно корневой папки, всегда начинается с косой черты, которая обозначает корневую папку узла. Например, /support/ content.html является адресом файла content.hlml, находящегося в папке support, вложенной в корневую папку узла.<br> При перемещении файла, содержащего адреса относительно корневой папки, их коррекция не требуется. Например, если ваши HTML-файлы используют относительные ссылки на зависимые файлы (типа изображений), то если вы переместите HTML-файл, его связи с зависимым файлом останутся корректными. Однако когда вы перемещаете или переименовываете документы, связанные между собой относительными ссылками, вы должны модифицировать эти ссылки, даже если взаимное положение документов не изменилось. Например, если вы перемещаете папку, то все относительные ссылки на файлы внутри этой папки должны модифицироваться.<br><td><br> </tr> </table><br><br> <h1> Иллюстрированный самоучитель по Macromedia HOMESITE </h1> <h1>Общая характеристика ColdFusion</h1> </h2><br> ColdFusion основана на применении специального сервера Web-приложений, который при поступлении соответствующего запроса обрабатывает программы, написанные на языке CFML (ColdFusion Markup Language), и отсылает результат клиенту.<br> Язык CFML можно рассматривать как расширение HTML, поскольку он представляет собой набор тегов, которые могут непосредственно вставляться в текст HTML-документа. Например, CFML-тег <CFOUTPUT> обеспечивает вывод на экран заключенного внутри него текста:<br> <CFOUTPUT> <br><br> <В>Текущая дата: </В><br><br> #Now( )# <br><br> </CFOUTPUT>.<br> Файл с программой на языке CFML — это обычный текстовый файл, подобный HTML-файлу. Единственное отличие состоит в том, что для CFML-файлов используется расширение .сfm.<br> Для эффективного использования CFML необходимо знать (или по крайней мере представлять себе) перечень CFML-тегов и реализуемые ими функции. Задача не очень простая, поскольку существует около сотни CFML-тегов, каждый из которых может иметь несколько атрибутов, управляющих работой тега. Кроме того, имеются сотни тегов, созданных сторонними разработчиками. Поскольку CFML является расширяемым языком, то после знакомства с ним вы также сможете создавать собственные теги.<br> Многие теги языка CFML ориентированы на работу с данными, поскольку при всей универсальности ColdFusion основное ее предназначение — создание Web-приложений для работы с базами данных.<br><br> ColdFusion работает следующим образом:<br> <li> 1. Когда броузер пользователя запрашивает с Web-сервера CFM-файл (страницу с CFML-тегами), Web-сервер распознает его по расширению и передаст на обработку серверу ColdFusion.</li><br> <li> 2. Сервер ColdFusion обрабатывает имеющиеся в странице CFML-теги и на их основе генерирует динамическое содержание страницы.</li><br> <li>3. После этого серверColdFusion возвращает результат Web-ссрверу в виде HTML-страницы, который в свою очередь передаст ее назад броузеру пользователя.</li><br> Важно отмeтить, что сервер ColdFusion обрабатывает только собственные теги, сохраняя остальную часть кода в исходном состоянии. ColdFusion поддерживает Java, ActiveX, JavaScript, DHTML, VRML, HDML и многие другие Web-технологии.<br> <td><br> </tr> </table><br><br> <h1>Поддержка CFML в HomeSite</h1> </h2><br> Вообще для разработки публикаций, ориентированных на ColdFusion, существует специальное приложение — ColdFusion Studio, интерфейс которого во многом аналогичен интерфейсу HomeSite. Тем не менее, для создания отдельных страниц с использованием тегов CFML вполне пригоден HomeSite.<br><br> Для работы с CFML в HomeSite имеются следующие возможности:<br> <img src="image/podderzhka-cfml-v-homesite_1.gif" alt="Поддержка CFML в HomeSite"><br> Рис. 6.23. Список версий ColdFusion, для которых возможен анализ корректности кода<br> <li> цветовая подсветка CFML-тегов в коде страницы; </li><br> <li> анализ корректности кода с помощью утилиты Validator, поддерживающей вес существующие версии ColdFusion (рис. 6.23); подробнее об использовании и настройке утилиты Validator см. раздел «Тестирование страниц» седьмой главы; </li><br> <li> вставка любого CFML-тега в код страницы с помощью утилиты Tag Chooser; </li><br> <li> установка значений атрибутов CFML-тегов с помощью диалоговых окна редактора тегов;</li><br> <li> вставка в код страницы наиболее популярных CFML-тегов с помощью вкладки CFML панели быстрой вставки (рис. 6.24); </li><br> <li> просмотр и редактирование атрибутов CFML-тегов с помощью Tag Inspector (рис. 6.25); </li><br> <li> визуальное представление структуры CFML-страницы в окне Tag Tree;</li><br> <li> оперативное использование справки по всем CFML-тегам.</li><br> <img src="image/podderzhka-cfml-v-homesite_2.gif" alt="Поддержка CFML в HomeSite"><br> Рис. 6.24. Вкладка CFML панели быстрой вставки<br> <img src="image/podderzhka-cfml-v-homesite_3.gif" alt="Поддержка CFML в HomeSite"><br> Рис. 6.25. Установка атрибутов CFML-тега с помощью Tag Inspector<br> Ниже приведен список тегов, вынесенных на панель быстрой вставки, с кратким пояснением:<br> <CFQUERY> — передает инструкции (запросы), записанные на языке SQL (Structured Query Language — язык структурных запросов), к источникам данных, поддерживающих ODBC (Open Database Connectivity — открытый доступ к базам данных), и возвращает результирующий набор данных для обработки (как правило, для вывода на экран с помощью тега CFOUTPUT);<br><br> <CFOUTPUT> — указывает, какие данные должны быть отображены на страниде, и в какой форме;<br><br> <CFLOOP> — определяет условия для итерационного выполнения команд или вывода данных; другими словами, представляет собой аналог оператора цикла в алгоритмических языках программирования;<br><br> <CFBREAK> —: позволяет досрочно завершить итерационный процесс, реализованный с помощью тега CFLOOP;<br><br> <CFIF> — управляет процессом обработки данных на основе некоторого логического условия (аналог условного оператора if в в алгоритмических языках программирования);<br><br> <CFABORT> — прерывает обработку страницы и дополнительно генерирует сообщение об ошибке;<br><br> <CFSET> — позволяет объявить переменные и их значения;<br><br> <CFCOOKIE> — определяет переменные, используемые и cookie;<br><br> <CFINCLUDE> — обеспечивает возможность модульного программирования за счет включения содержимого внешней страницы в текущую страницу;<br><br> <CFLOCATION> — переназначает пользователей на другой URL;<br><br> <CFFILE> — обрабатывает все взаимодействия с файлами;<br><br> <CFDIRECTORY> — управляет структурой каталогов сервера;<br><br> <CFMAIL> — генерирует и пересылает сообщения электронной почты;<br><br> <CFTABLE> и <CFCOL> — определяют параметры HTML-таблиц для вывода данных.<br> После вставки CFML-тега в код страницы для изменения его атрибутов может быть стандартным образом вызван редактор тегов — для этого следует в контекстном меню тега выбрать команду Edit Current Tag. <br><td><br> </tr> </table><br><br> <h1>Поддержка Dynamic HTML</h1> </h2><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> <img src="image/podderzhka-dynamic-html_1.gif" alt="Поддержка Dynamic HTML"><br> Рис. 6.8. Списки допустимых событий для различных элементов страницы<br> <img src="image/podderzhka-dynamic-html_2.gif" alt="Поддержка Dynamic HTML"><br> Рис. 6.9. Флажок Include identical NAME and ID позволяет устанавливать значение атрибута ID<br> В HomeSite поддержка Dynamic HTML реализована следующими средствами: <br> <li>наличием в окнах редактора тегов специальной вкладки Events, позволяющей быстро сформировать список событий, на которые должен реагировать соответствующий элемент страницы, и связать с ними вид реакции; при этом список событий, представленных на вкладке, зависит от типа элемента; например, на рис. 6.8 приведены фрагменты вкладок Events для тегов <FORM> (вверху) и <BODY> (внизу); </li><br> <li> наличием в окнах редактора тегов флажка Include identical NAME and ID (Вставлять идентичные NAME и ID), рис. 6.9; если он установлен, то для создаваемого элемента в код документа будут вставлены идентичные значения атрибутов NAME и ID; имеется в виду следующее: в ранних версиях броузеров поддерживается атрибут NAME, на смену которому в языке HTML 4.0 (и в новых версиях броузеров) пришел<br><br> Tag Editor-BODY (HTML) атрибут ID; при установленном флажке HomeSite вставит в код документа оба атрибута, что призвано обеспечить доступность документа всем версиям броузеров;</li><br> <li> возможностью оперативного редактирования атрибута STYLE и таблиц стилей с помощью утилиты TopStyle Lite (подробнее о редактировании стилей см. раздел «Работа с таблицами стилей» четвертой главы);</li><br> <li> возможностью редактировать список событий и связанных с ними обработчиков с помощью Tag Inspector,</li><br> <li> наличием в составе редактора тегов окон для редактирования атрибутов тегов, предназначенных для описания параметров слоев: <LAYER>, <ILAYER>, <DIV> <SPAN>;</li><br> <li> наличием в составе HomeSite мастеров, обеспечивающих генерацию кода динамических страниц; в частности, на вкладке DHTML диалогового окна New Document представлены два таких мастера: Outline Wizard (он предназначен для создания раскрывающихся меню) и Slide Show Wizard (обеспечивает генерацию страниц презентации).</li><br> Наиболее удобным способом описания поведения элементов страницы является применение вкладки Events окна редактора тегов.<br> Например, предположим, что требуется заставить изменяться цвет надписи на кнопке Submit при наведении на нес указателя мыши.<br> Чтобы описать поведение такой кнопки, необходимо:<br> <li> 1. В окне документа щелкнуть правой кнопкой на соответствующем теге <INPUT> и в контекстном меню выбрать команду Edit Current Tag.</li><br> <li>2. В окне редактора тегов перейти на вкладку Events и затем щелкнуть на «мини-вкладке», соответствующей событию onMouseOver.</li><br> <li> 3. В текстовом поле ввести описание реакции на данное событие (то есть на перемещение указателя в позицию кнопки); реакция состоит в изменении цвета надписи (например, на красный): stylе.color='red' (рис. 6.10, вверху).</li><br> <li> 4. Щелкнуть на «мини-вкладке», соответствующей событию onMouseOut (перемещение указателя за пределы кнопки).</li><br> <li> 5. В текстовом поле ввести описание реакции на данное событие, которая состоит в восстановлении исходного цвета надписи (черного): style.color='black' (рис. 6.10, внизу).</li><br> <li>6. Щелкнуть на кнопке ОК.</li><br> <img src="image/podderzhka-dynamic-html_3.gif" alt="Поддержка Dynamic HTML"><br> Рис. 6.10. Пример описания поведения кнопки<br> После закрытия окна редактора тегов в код документа будут внесены требуемые изменения.<br> <img src="image/podderzhka-dynamic-html_4.gif" alt="Поддержка Dynamic HTML"><br> Рис. 6.11. Выбор способа позиционирования слоя<br> <img src="image/podderzhka-dynamic-html_5.gif" alt="Поддержка Dynamic HTML"><br> Рис. 6.12. Установка значения параметра position <br> Теперь в качестве примера рассмотрим процедуру создания «прыгающего» слоя на основе тега <DIV>. Пусть слой перемещается на новую позицию при двойном щелчке на нем мышью. Чтобы выполнить поставленную задачу, необходимо:<br> <li> 1. В окне документа щелкнуть правой кнопкой в пустой позиции и в контекстном меню выбрать команду Insert Tag.</li><br> <li>2. В окне утилиты Tag Chooser щелкнуть на категории Formatting and Layout и в правой панели дважды щелкнуть на имени тега <DIV>.</li><br> <li>3. В открывшемся окне редактора тегов описать положение слоя до и после щелчка мышью; для этого: <br> <li> 3.1. Перейти на вкладку StyleSheet/Accessibility и на ней щелкнуть на кнопке Style Editor.</li><br> <li> 3.2.В окне утилиты TopStyle Lite в списке параметров стиля (панель Slylе Inspector) щелкнуть в ячейке position и в соседней ячейке с помощью раскрывающегося списка выбрать значение absolute (рис. 6.11).</li><br> <li> 3.3. В окне редактирования параметров установить курсор после вставленного параметра position и нажать клавишу <Spacebar>; ввести с клавиатуры пару первых символов параметра left (он задаст позицию слоя относительно левого края окна броузера); в появившемся списке (рис. 6.12) выбрать пункт left и нажать клавишу <Entеr>.</li><br> <li> 3.4. В дополнительном списке (рис. 6.13, вверху) выбрать пункт length (это значит, что положение будет задано в пикселах) и еще раз нажать клавишу <Entеr>.</li><br> <li> 3.5. В открывшемся диалоговом окне (рис. 6.13, внизу) указать величину отступа (например, 80 пикселов) и щелкнуть на кнопке ОК.</li><br> <li> 3.6. На панели инструментов утилиты TopStylc Lite щелкнуть на кнопке Done; после того, как окно закроется, в поле Style окна редактора тегов будут выведены параметры слоя (его исходное положение).</li><br> <li> 3.7. В окне редактора тегов перейти на вкладку Events, щелкнуть на ярлычке события onDblClick и в текстовом поле ввести реакцию на это событие: style.left='280px' (предполагается, что по двойному щелчку слой должен переместиться на 200 пикселов вправо).</li><br> <li> 3.8. Щелкнуть на кнопке ОК.</li><br> <img src="image/podderzhka-dynamic-html_6.gif" alt="Поддержка Dynamic HTML"><br> Рис. 6.13. Установка значения параметра left<br><td><br> </tr> </table><br><br> <h1>Применение технологии ColdFusion</h1> </h2><br> Технология ColdFusion была разработана компанией Allaire, но теперь, как и HomeSite, является собственностью Macromedia.<br><td><br> </tr> </table><br><br> <h1>Работа с формами</h1> </h2><br> Форма — это аналог диалоговой панели, встроенный в Web-страницу. Одно из основных отличий состоит в том, что само поле формы на Web-странице не отображается, читателю доступны лишь ее элементы — флажки, переключатели, текстовые области и т. п.<br> До появления языка DynamicHTML формы оставались единственным средством интерактивного взаимодействия пользователя с содержимым страницы (не считая, разумеется, гиперссылок).<br> Формы позволяют получить ту или иную информацию от пользователей. Чаще всего они используются для регистрации пользователей, оформления заказов на коммерческих сайтах, а также при вводе поисковых запросов.<br> Реализация любой формы требует наличия двух программных компонентов: HTML-кода, описывающего форму, и сценария обработки вводимых пользователем данных. Сценарий может выполняться как на стороне сервера, так и на стороне клиента (то есть броузером).<br> Сценарий, исполняемый на стороне сервера, может быть написан на любом языке программирования: Си, Java, Perl, либо с применением других интернет-технологий (например, ColdFusion). Сценарий, выполняемый броузером, должен быть написан на языке сценариев (JavaScript или VBScript).<br> В качестве элементов формы могут использоваться практически те же элементы графического интерфейса, что и на диалоговых панелях «настольных» приложений:<br> <li> кнопки (Billions);</li><br> <li> переключатели (Radio Billions),</li><br> <li> флажки (Checkboxes);</li><br> <li> текстовые области (Text area);</li><br> <li> списки (Lists);</li><br> <li> изображения (Images).</li><br> Кроме того, форма может содержать два специфических элемента: поле выбора файла (File Field) и скрытое поле (Hidden Field).<br> Каждый элемент, используемый в форме, должен иметь имя, позволяющее идентифицировать его как источник соответствующих данных, подлежащих обработке с помощью сценария.<br> Форма создается с помощью тега <FORM>, который служит контейнером для элементов формы. Наряду с этим он выполняет еще одну важную задачу. Поскольку на одной странице может находиться несколько форм, то каждый из тегов <FORM> позволяет связать с соответствующей формой свой сценарий обработки вводимых данных, а также метод пересылки данных на сервер.<br> В HomeSite наиболее удобным инструментом создания элементов формы на Web-странице является редактор тегов. Для создания сценариев обработки данных формы могут использоваться другие средства, которые будут рассмотрены в разделе «Создание сценариев на JavaScript» этой главы.<br> Вызов редактора тегов выполняется с помощью кнопок панели быстрой вставки, размещенных на вкладке Forms (Формы). Они разделены на четыре подгруппы (рис. 6.1):<br> <img src="image/rabota-s-formami_1.gif" alt="Работа с формами"><br> Рис. 6.1. Вкладка Forms панели быстрой вставки<br> <li> кнопка Form обеспечивает вызов окна редактора тегов для установки атрибутов тега <FORM>, главное назначение которых — описание используемого механизма пересылки данных на сервер; </li><br> <li> кнопки второй группы предназначены для создания двух стандартных кнопок формы — Submit и Reset; </li><br> <li> кнопки третьей группы обеспечивают добавление в форму текстовых областей (то есть элементов формы, с помощью которых пользователь вводит символьную информацию); </li><br> <li> кнопки четвертой группы используются для создания таких элементов формы, с помощью которых пользователь вводит булевы величины («истина» — если элемент выбран и «ложь» — в противном случае); это переключатели, флажки и списки.</li><br> Несмотря на достаточно большое число кнопок, создание форм с помощью панели быстрой вставки строится на работе с панелями трех типов, показанных на рисунках 6.2, 6.3 и 6.6.<br> Первая из них открывается с помощью кнопки Form, вторая — при выборе любой другой кнопки, соответствующей элементу, создаваемому тегом <INPUT>, а третья — при выборе кнопки Select.<br> Для тега <FORM> с помощью окна редактора тегов могут быть заданы значения следующих атрибутов (см. рис. 6.2):<br> <img src="image/rabota-s-formami_2.gif" alt="Работа с формами"><br> Рис. 6.2. Окно редактора тегов для установки атрибутов тега <FORM><br> <li> ACTION — указывает адрес сервера, на котором должен выполняться сценарий (или приложение CGI), обеспечивающий обработку перeсылаемых данных формы; если атрибут ACTION отсутствует, используется URL самого документа, содержащего форму; способ пересылки данных на сервер определяется протоколом доступа, указанным в URL, а также значениями атрибутов METHOD и ENCTYPE; значение атрибута вводится в поле Action; </li><br> <li> METHOD — определяет метод доступа к серверу, определенному в атрибуте ACTION, и может иметь одно из двух значений: "get" или "post"; при значении "get" данные из формы добавляются непосредственно к URL сервера, поэтому метод обычно используется для таких форм, данные которых не требуют внешней обработки; при использовании метода "post" отсутствуют ограничения на объем пересылаемых данных; значение атрибута выбирается из раскрывающегося списка Method;</li><br> <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.<br> <li>NAME — задает имя формы; по этому имени к ней можно обратиться из клиентского сценария обработки формы; значение атрибута вводился в поле Name.</li><br> На вкладке HTML 4.0 дополнительно может быть указано значение атрибута TARGET (подобным одноименному атрибуту тега <А>), который позволяет указать, какое окно должно использоваться для отображения результатов обработки формы (то есть для обратной связи с читателем). Значение атрибута выбирается из раскрывающегося списка Target.<br> Как было отмечено выше, окно редактора тегов для установки атрибутов тега <INPUT> является универсальным, в том смысле, что оно пригодно для изменения параметров любого элемента формы, создаваемого на основе тега <INPUT>. Каждому такому элементу соответствует отдельная вкладка (рис. 6.3).<br> <img src="image/rabota-s-formami_3.gif" alt="Работа с формами"><br> Рис. 6.З. Окно редактора тегов для установки атрибутов тега <INPUT><br> Так что, решив создать один из элементов формы, вы можете определить значения атрибутов для какого-либо другого элемента. Тем не менее, за одно обращение к редактору тегов могут быть заданы атрибуты только для одного элемента формы (соответственно, и в код документа будет добавлен только один экземпляр тега <INPUT>).<br> Мы не будем подробно рассматривать атрибуты, представленные на всех вкладках этого окна редактора тегов. Остановимся лишь на некоторых особенностях создания элементов формы с помощью HomeSite.<br> Вначале о двух предопределенных кнопках формы — Submit и Reset.<br> Чтобы добавить в форму любую из них, достаточно сначала щелкнуть на соответствующей кнопке панели быстрой вставки, а затем в открывшемся окне редактора тегов (не внося никаких изменений) — на кнопке ОК. В результате в код страницы будет помещен тег <INPUT TYPE="submit"> (или <INPUT TYPE="reset">). При всей простоте такой процедуры она имеет один недостаток. Дело в том, что большинство современных броузеров интерпретируют стандартные названия этих кнопок по-своему. Например, на рис. 6.4 показана одна и та же форма, сгенерированная тремя разными броузерами (MSIE, Opera и Netscape).<br> <img src="image/rabota-s-formami_4.gif" alt="Работа с формами"> <br> Рис. 6.4. Представление одной и той же формы разными броузерами<br> Поэтому, если ваш сайт ориентирован на русскоязычную аудиторию, подберите для этих кнопок подходящее название (например, «Отправить» и «Отменить») и добавьте для тега <INPUT> атрибут VALUE, указав в качестве его значения название кнопки.<br> Еще одна особенность состоит в том, что броузер Netscape не обрабатывает элементы, если" они не вложены в тег <FORM>.<br> Как правило, наибольшие затруднения у начинающих Web-дизайнеров вы-зьнрст использование в форме флажков, переключателей и списков. Поэтому ниже описана процедура их создания с помощью редактора тегов.<br> Между флажками и переключателями имеется два существенных различия:<br> <li> переключатели отражают взаимоисключающие варианты выбора, а флажки — совместимые; поэтому в группе переключателей может быть выбран только один элемент, а в группе флажков — произвольное число (хоть все);</li><br> <li> отсюда следствие: нельзя использовать в форме «одиночный» переключатель, их должно быть не менее двух, поскольку изменить состояние переключателя можно только выбрав другой переключатель в группе.</li><br> Общие правила использования флажков и переключателей состоят в следующем:<br> <li> если имеется группа из нескольких элементов (флажков или переключателей), то всем им должно быть присвоено одно и то же имя;</li><br> <li> каждый выбранный в группе элемент генерирует собственную пару имя/значение в пересылаемых данных; поэтому обязательными атрибутами для флажков и переключателей являются NAME и VALUE.</li><br> Например, чтобы поместить в форму группу переключателей, обеспечивающих выбор одного из нескольких цветов, необходимо:<br> <li> 1. Щелкнуть на кнопке Radio Button на панели быстрой вкладки.</li><br> <li> 2. В окне редактора тегов в поле Name ввести имя группы флажков (например, Color, как показано на рис. 6.5)</li><br> <li> 3. В поле Value указать значение, соответствующее первому переключателю в группе (например, 1).</li><br> <li>4. В поле Caption ввести пояснение к переключателю (например, наименование цвета); это поле не связано ни с одним атрибутом элемента, оно лишь обеспечивает добавление надписи рядом с переключателем.</li><br> <li> 5. Если данный переключатель должен быть выбран по умолчанию, следует установить флажок Checked, который управляет наличием одноименного атрибута.</li><br> <li> 6. Щелкнуть на кнопке ОК.</li><br> <li> 7. В окне документа скопировать в буфер обмена сгенерированный тег <INPUT> и затем поместить в код документа требуемое число копий.</li><br> <li> 8. Скорректировать значения атрибутов VALUE у вставленных экземпляров, а также текст подписи; следует также помнить, что атрибут CHECKED может быть установлен только для одного переключателя в группе.</li><br> <img src="image/rabota-s-formami_5.gif" alt="Работа с формами"><br> Рис. 6.5. Пример установки атрибутов при создании группы переключателей<br> Флажки и переключатели рекомендуется использовать в тех случаях, когда число альтернативных вариантов относительно невелико (не более 5—6). Если же их значительно больше, лучше использовать списки. При этом список единичного выбора работает так же, как группа переключателей, а список множественного выбора -- как группа флажков.<br> Данные, которые пользователь вводит в форму с помощью списка, также обрабатываются по правилам, аналогичным для флажков и переключателей — выбранному в списке пункту соответствует пара «имя/значение», где в качестве имени используется имя списка.<br> Чтобы создать список с помощью редактора тегов, необходимо:<br> <li>1. Щелкнуть на кнопке Select на панели быстрой вкладки.</li><br> <li> 2. В окне редактора тегов (рис. 6.6) в поле Name ввести имя списка.</li><br> <li>3. В поле Size (Размер) указать размер окна списка (его значение равно числу элементов списка, которые должны уместиться в этом окне); если значение меньше числа пунктов списка, то он будет представлен в окне броузера либо как раскрывающийся список (в случае списка единичного выбора), либо как прокручиваемый список (в случае списка множественного выбора).</li><br> <li> 4. Если требуется создать список множественного выбора, установите флажок Allow Multiple Selections (Разрешить множественный выбор).</li><br> <li> 5. С помощью элементов, имеющихся в группе Generate OPTION Tag (Создание тегов <OPTION>), описать структуру списка: <br> <li> поле Number of Tags (Количество тегов) определяет число элементов списка; при генерации HTML-кода страницы внутри тега <SELECT> будет создано соответствующее количество тегов <OPTION>;</li><br> <li> поле SELECT Indent level (Размер отступа от тега <SELECT>) позволяет указать, На сколько позиций табуляции будут смещены в коде документа теги <OPTION> относительно тега <SELECT>.</li><br> <li>6. Щелкнуть на кнопке ОК, чтобы закончить работу с редактором тегов. </li><br> <img src="image/rabota-s-formami_6.gif" alt="Работа с формами"><br> Рис. 6.6. Окно редактора тегов для формирования списка<br> По поводу результатов работы редактора тегов следует, сделать несколько достаточно важных замечаний:<br> <li> хотя в окне установки атрибутов тега <SELECT> атрибут VALUE отсутствует, его значение для всех элементов списка генерируется автоматически;</li><br> <li> для первого элемента списка также автоматически устанавливается атрибут SELECTED (то есть он считается выбранным по умолчанию);</li><br> <li> параметр SELECT Indent level дееспособен только при создании списка, если впоследствии открыть окно редактора тегов с помощью команды Edit Current Tag, то новое значение этого параметра игнорируется;</li><br> <li> если открыть окно редактора тегов для тега <SELECT> с помощью команды Edit Current Tag, и ввести в поле Number of Tags какое-либо значение, то в список будет добавлено соответствующее число новых элементов.</li><br> Относительно тегов <OPTION> следует иметь в виду следующее. На панели быстрой вставки отсугствует кнопка, непосредственно связанная с этим тегом. Тем не менее, после того, как будет создан список (то есть после того, как в код страницы будет вставлен тег <SELECT> с тегами <OPTION> внутри), с помощью команды Edit Current Tag контекстного меню может быть открыто окно редактора тегов для установки атрибутов тега <OPTION>. В этом окне представлены (и могут быть изменены) текущие значения всех основных атрибутов тега (рис. 6.7):<br> <img src="image/rabota-s-formami_7.gif" alt="Работа с формами"><br> Рис. 6.7. Окно редактора тегов для установки атрибутов тега <OPTION><br> <li>значение, пересылаемое на сервер (Value),</li><br> <li> состояние — выбран или нет (Selected), </li><br> <li> наименование пункта (Text).</li><br> Динамизм любого элемента формы, как, собственно, и формы в целом, может быть значительно повышен за счет применения современных технологий, описанных в следующих разделах.<br><td><br> </tr> </table><br><br> <h1>Создание интерактивных страниц</h1> </h2><br> Так или иначе, в основе практически любой технологии создания интерактивных страниц лежит тот или иной язык программирования и механизм взаимодействия броузера с программой, написанной на этом языке.<br> Арсенал инструментов, предоставляемых HomeSite 5 разработчику, для разных технологий различен. Для одних он ограничен возможностью проверки корректности кода, для других имеются средства автоматической генерации фрагментов страниц.<br> Итак, говоря о поддержке HomeSite той или иной технологии, мы имеем в виду поддержку соответствующего языка разработки.<br> Разумеется, HomeSite в полном объеме поддерживает «чистый» HTML, который позволяет включать в Web-страницы формы или отдельные их элементы. Если вы решили поместить на страницу любую форму — в вашем распоряжении все тс основные инструменты HomeSite, которые были рассмотрены в третьей главе. <br> Особенности применения этих инструментов при работе с формами описаны в следующем разделе.<br> Кроме того, при разработке интерактивных страниц с помощью HomeSite вы можете:<br> <li> создавать список событий и обработчиков для элементов страницы;</li><br> <li> устанашшвать и редактировать значения атрибутов тегов <SCRIPT>, <APPLET>, <PARAM>, <EMBED>;</li><br> <li> использовать цветовую подсветку синтаксических конструкций при анализе файлов сценариев;</li><br> <li> использовать автоматически сгенерированные шаблоны сценариев на JavaScript;</li><br> <li> получать автоматически сгенерированный код сценария для некоторых типовых операций;</li><br> <li> применять средства быстрой вставки основных синтаксических конструкций следующих языков: JavaScript, Active Server Page (ASP), Java Server Page (JSP), ColdFusion Markup Language (CFML);</li><br> <li> вставлять в код страницы элементы ActiveX и редактировать атрибуты тега <OBJECT>.</li><br> <td><br> </tr> </table><br><br> <h1>Создание сценариев на JavaScript и VBScript</h1> </h2><br> Оба языка предназначены для создания «клиентских» сценариев, то есть сценариев, выполняемых броузером читателя.<br> Основной частью сценария (программы на языке JavaScript или на VBScript) является описание событий и обработчиков этих событий. События инициируются, главным образом, теми или иными действиями пользователя. Например, щелчку мышью на некотором элементе страницы соответствует событие onClick. Если указатель мыши оказывается над какой-либо областью страницы, имеет место событие onMoitseOver. Таким образом, суть выполнения сценария заключается в воспроизведении реакции на события, происходящие при работе с HTML-документом. Так, в результате щелчка на кнопке может открываться новое окно броузера.<br> По сравнению с обработкой событий средствами Dynamic HTML (на основе изменения стиля элемента) сценарии обладают более мощными возможностями. Это объясняется тем, что в языках JavaScript и VBScript поддерживается механизм функций. Наряду со стандартными функциями и процедурами (например, вывода на экран диалогового окна) разработчик может создавать собственные функции и использовать их с различными параметрами.<br> В состав HTML-документа могут быть включены сценарии на обоих языках — как на JavaScript, так и на VBScript. Однако для их эффективного совместного использования надо быть уверенным в том, что броузеры читателей ваших страниц обладают соответствующими возможностями.<br> В HomeSite поддерживается работа с обоими языками, однако большее внимание уделено все-таки JavaScript.<br> Объясняется это тем, что VBScript понятен только броузерам MSIE, в то время как JavaScript является фактически стандартным языком сценариев, который обязаны понимать все броузеры.<br><br> В HomeSite имеются следующие средства повышения эффективности разработки сценариев:<br> <li> вкладка Script панели быстрой вставки, обеспечивающая удобный доступ к основным инструментам создания и редактирования сценариев (рис. 6.14);</li><br> <li> специальное окно редактора тегов для установки атрибутов тега <SCRIPT>, позволяющее быстро установить значения его атрибутов;</li><br> <li>цветовая подсветка синтаксических конструкций сценария, причем для каждого из двух языков — своя, учитывающая особенности языка (рис. 6.15);</li><br> <li> средства автоматической генерации шаблонов сценариев, входящие в состав Tag Inspector,</li><br> <li> возможность настройки утилиты Tag Tree для работы с файлом сценария;</li><br> <li> утилита JavaScript Tree, предназначенная для работы с объектами и функциями языка JavaScript;</li><br> <li> набор мастеров, обеспечивающих генерацию кода сценариев для некоторых типовых операций.</li><br> <img src="image/sozdanie-scenariev-na-javascript-i-vbscript_1.gif" alt="Создание сценариев на JavaScript и VBScript"><br> Рис. 6.14. Вкладка Script панели быстрой вставки<br> <img src="image/sozdanie-scenariev-na-javascript-i-vbscript_2.gif" alt="Создание сценариев на JavaScript и VBScript"><br> Рис. 6.15. Для каждого языка сценариев используется своя схема цветовой подсветки<br> Чтобы создать с помощью Tag Inspector шаблон сценария для «оживления» некоторого элемента страницы, необходимо:<br> <li>В окне ресурсов перейти на вкладку Tag Inspector.</li><br> <li> В окне документов щелкнуть на теге элемента, с которым должен быть связан сценарий; при этом на панели Tag Inspector будут представлены разрешенные для элемента атрибуты и события.</li><br> <li> Щелкнуть на событии, инициирующем выполнение сценария, и в соседней ячейке в раскрывающемся списке выбрать язык сценария (рис. 6.16); независимо от выбранного языка на экране появится диалоговое окно, в котором следует ввести имя функции-обработчика события (по умолчанию имя функции совпадает с типом события), формальные параметры (если требуется) и щелкнуть на кнопке ОК. </li><br> В результате выполнения описанной процедуры в код документа будет вставлен шаблон для создания сценария и вызов функции-обработчика (рис. 6.17).<br> Кроме того, имя функции-обработчика будет помещено в список сценариев (рис. 6.18). Это позволяет отслеживать использованные имена функций и при необходимости связать сценарий с каким-либо другим Событием или элементом. При наличии в списке хотя бы одной функции-обработчика в нем появляется пункт Clear Cashed Values... (Очистить буфер), выбор которого приводит к удалению из списка (после подтверждения) всех функций. Это удаление не влияет на код страницы.<br> <img src="image/sozdanie-scenariev-na-javascript-i-vbscript_3.gif" alt="Создание сценариев на JavaScript и VBScript"> <br> Рис. 6.16. Выбор языка сценария<br> <img src="image/sozdanie-scenariev-na-javascript-i-vbscript_4.gif" alt="Создание сценариев на JavaScript и VBScript"><br> Рис. 6.17. Шаблон сценария, сгенерированный HomeSite<br> <img src="image/sozdanie-scenariev-na-javascript-i-vbscript_5.gif" alt="Создание сценариев на JavaScript и VBScript"><br> Рис. 6.18. Просмотр списка сценариев<br> Вы можете получить визуальное представление структуры страницы с точки зрения используемых в ней сценариев. Для этого необходимо:<br> <li> 1. В окне ресурсов перейти на вкладку Tag Inspector.</li><br> <li> 2. В панели утилиты Tag Tree открыть список профилей тегов и в нем выбрать пункт Client and Server-side Scripts (Клиентские и серверные сценарии).</li><br> Если на странице имеются описания функций-обработчиков, то они будут представлены в дереве тегов специальными значками (рис. 6.19).<br> <img src="image/sozdanie-scenariev-na-javascript-i-vbscript_6.gif" alt="Создание сценариев на JavaScript и VBScript"><br> Рис. 6.19. Представление дерева сценариев<br> Для редактирования или создания нового сценария на JavaScript в «полуавтоматическом» режиме, можно воспользоваться утилитой JavaScript Tree. Ее вызов выполняется посредством одноименной кнопки, расположенной на вкладке Script панели быстрой вставки (см. рис. 6.14).<br><br> Окно JavaScript Tree содержит дерево объектов и методов языка JavaScript, а также упорядоченный список библиотечных функций.<br> В исходном состоянии дерево объектов содержит следующие категории (рис. 6.20):<br> <li> Window — свойства, методы и подчиненные объекты объекта window (поддерживаемые как MSIE, так и Netscape);</li><br> <li> Navigator — свойства, методы и подчиненные объекты объекта navigator;</li><br> <li>Date — свойства и методы объекта Date;</li><br> <li> Math — свойства и методы объекта Math;</li><br> <li> Siring — параметры и функции для работы со строками; </li><br> <li> Reserved Words — зарезервированные (ключевые) слова языка JavaScript.</li><br> <img src="image/sozdanie-scenariev-na-javascript-i-vbscript_7.gif" alt="Создание сценариев на JavaScript и VBScript"><br> Рис. 6.20. Представление классов объектов в окне JavaScript Tree<br> Утилита JavaScript Tree обеспечивает доступ практически ко всем объектам, используемым в языке JavaScript, а также к их свойствам и методам. Чтобы «добраться» до требуемого свойства или метода, достаточно просто последовательно раскрывать ветви дерева. Например, на рис. 6.21 приведен формат окна утилиты при работе с объектами формы.<br> <img src="image/sozdanie-scenariev-na-javascript-i-vbscript_8.gif" alt="Создание сценариев на JavaScript и VBScript"><br> Рис. 6.21. Утилита JavaScript Tree обеспечивает доступ практически ко всем объектам, используемым в языке JavaScript<br> Чтобы вставить в код страницы обращение к некоторому свойству или вызов метода объекта, достаточно дважды щелкнуть на имени этою свойства или метода. Причем имя соответствующего объекта будет добавлено автоматически. Например, если требуется вставить в страницу вызов метода confirm для объекта window, следует дважды щелкнуть мышью в дереве на ветви confirm, и в страницу будет добавлена конструкция window.confirm(«»).<br> Некоторые типовые сценарии на JavaScript и на VBScript могут быть сгенерированы полностью автоматически с помощью соответствующих мастеров. Например, кнопка JavaScript Wizard, вынесенная на вкладку Script панели быстрой вставки, обеспечивает доступ сразу к шести мастерам. Каждому из них отведена отдельная вкладка в окне редактора тегов (рис. 6.22).<br> <img src="image/sozdanie-scenariev-na-javascript-i-vbscript_9.gif" alt="Создание сценариев на JavaScript и VBScript"> <br> Рис. 6.22. Мастера для создания сценариев на JavaScript<br> Они предназначены для создания следующих сценариев:<br> <li> URL Selection (Выбор URL) — создает раскрывающийся список адресов (URL), выбор любого из которых обеспечивает переход по указанному адресу; чтобы сценарий выполнялся корректно, значения цветов в коде страницы должны быть представлены шестнадцатеричными значениями;</li><br> <li> Background Fade (Изменяющийся фон) — создаст сценарий, с помощью которого начальный цвет фона страницы изменяется на заданный;</li><br> <li> Frame Busier (Разрушитель фреймов) — создает сценарий, который запрещает открывать страницу внутри фрейма (она будет насильно развернута на все окно);</li><br> <li> Last Modified Date (Дата последнего изменения) — обеспечивает вывод на странице даты и (дополнительно) времени се последнего редактирования;</li><br> <li>Вrowser Type (Тип броузера) — обеспечивает распознавание и вывод на странице типа и версии используемого броузера;</li><br> <li> Current URL (Текущий URL) — обеспечивает вывод на странице адреса файла-источника.</li><br> <td><br> </tr> </table><br><br> <h1> Иллюстрированный самоучитель по Macromedia HOMESITE </h1> <h1>Оценка длительности загрузки</h1> </h2><br> Длительность загрузки страниц публикации — это один из важнейших показателей качества не только дизайна отдельных страниц, но и узла в целом.<br> Чтобы оценить длительность загрузки текущего документа, необходимо выбрать в меню Tools команду Document Weight (Вес Документа). На экране появится диалоговое окно, в котором отображается список ресурсов, загружаемых вместе с тестируемым документом (например, графические файлы), и размеры соответствующих файлов. Ниже в этом окне приводятся оценки времени загрузки самого документа, используемых им ресурсов и суммарное время загрузки. Все эти значения рассчитываются для трех модификаций модема, различающихся быстродействием (рис. 7.14).<br> <img src="image/ocenka-dlitelnosti-zagruzki_1.gif" alt="Оценка длительности загрузки"><br> Рис. 7.14. Диалоговое окно с результатами оценки длительности загрузки страницы<br> Если длительность загрузки страницы превышает требуемую, следует отредактировать страницу, и повторить тестирование.<br><td><br> </tr> </table><br><br> <h1>Проверка корректности кода</h1> </h2><br> Для проверки синтаксиса кода страницы требуется щелкнуть на кнопке Validate Current Document или выбрать в меню Tools (Инструменты) команду Validate Document (Проверить документ). В обоих случаях будет запущена утилита Validator. По умолчанию она настроена на анализ HTML-кода, но параметры утилиты могут быть скорректированы (подробнее о настройке параметров будет рассказано ниже).<br> Информация о найденных ошибках отображается в окне результатов на листе Validation в виде таблицы, содержащей два столбца (рис. 7.2):<br> <img src="image/proverka-korrektnosti-koda_1.gif" alt="Проверка корректности кода"><br> Рис. 7.2. Представление информации об ошибках в окне результатов<br> <li> Line (Строка) — номера строк, в которых обнаружены ошибки; в этом же столбце выводится значок, поясняющий уровень ошибки; возможные варианты приведены в табл. 7.1;</li><br> <li> Message (Сообщение) — комментарий к обнаруженной ошибке.</li><br> Табл. 7.1. Виды сообщений об ошибках, выдаваемых утилитой Validator<br> <table border=1><br> <tr> <td> Вид сообщения </td> <td> Значок </td> <td> Пояснение<br> <td> </tr> <tr> <td> Error </td> <td> <img src="image/proverka-korrektnosti-koda_2.gif" alt="Проверка корректности кода"></td> <td> Критическая ошибка; обусловлена отклонением от спецификации языка (например, использование незнакомого тега); несмотря на грозность предупреждения, ко многим из таких ошибок броузеры относятся лояльно<br> <td> </tr> <tr> <td> Warning </td> <td> <img src="image/proverka-korrektnosti-koda_3.gif" alt="Проверка корректности кода"></td> <td> Подозрительный код; ошибка, которая не связана с отклонением от спецификации языка, но может привести к некорректному отображению страницы (например, наличие в странице символов из другой кодовой таблицы)<br> <td> </tr> <tr> <td> Message </td> <td> <img src="image/proverka-korrektnosti-koda_4.gif" alt="Проверка корректности кода"></td> <td> Предупреждение: ситуация, аналогичная предыдущей, но в еще более мягкой форме (например, использование устаревшего тега)<br> <td> </tr> <tr> <td> Nesting Error </td> <td> <img src="image/proverka-korrektnosti-koda_5.gif" alt="Проверка корректности кода"></td> <td> Ошибка вложенности тегов; имеется в виду ситуация, когда закрывающий тег вложенного элемента идет после закрывающего тега охватывающего элемента (например: <strong><em>Ошибка</strong></em>)<br> <td> </tr> <tr> <td> CFML Compiler Error </td> <td> <img src="image/proverka-korrektnosti-koda_6.gif" alt="Проверка корректности кода"></td> <td> Ошибка компиляции CFML-тегов<br> <td> </tr> </table><br> Если документ не содержит синтаксических ошибок, то в окне результатов выводится сообщение No errors or warnings (Ошибки и предупреждения отсутствуют), рис. 7.3.<br> <img src="image/proverka-korrektnosti-koda_7.gif" alt="Проверка корректности кода"><br> Рис. 7.З. Сообщение об отсутствии ошибок<br> Разработчику Web-страниц предоставлены широкие возможности по настройке параметров работы валидатора. Основной из них — выбор спецификации языка, на основе которой должен выполняться анализ кода. Для установки требуемого режима работы необходимо:<br> <img src="image/proverka-korrektnosti-koda_8.gif" alt="Проверка корректности кода"> <br> Рис. 7.4. Выбор контролируемых версий на вкладке Validation<br> <li> 1. В меню Options выбрать команду Settings... и в открывшемся окне настроек перейти на вкладку Validation.</li><br> <li> 2. В списке используемых версий (рис. 7.4) снять или установить метку в соответствующей строке.</li><br> <li> 3. Щелкнуть на кнопке Apply.</li><br> Установка других параметров работы утилиты выполняется в дополнительном диалоговом окне, которое вызывается щелчком на кнопке Validator Settings. Это окно содержит четыре вкладки:<br> <li> Options (Параметры) — общие параметры работы утилиты; </li><br> <li> Tags (Теги) — параметры контроля синтаксиса тегов;</li><br> <li> Versions (Версии) — параметры используемых версий языков;</li><br> <li> Values (Значения) — параметры контроля синтаксиса строковых значений, используемых в коде страницы.</li><br> <img src="image/proverka-korrektnosti-koda_9.gif" alt="Проверка корректности кода"><br> Рис. 7.5. Вкладка Options панели свойств утилиты Validator<br> На вкладке Options могут быть установлены следующие параметры (рис. 7.5):<br> <li> виды ошибок, подлежащие включению в отчет (то есть выводу в окне результатов); выбор производится путем изменения состояния флажков в группе Report (Отчет);</li><br> <li> максимальное число ошибок, после которого следует прекратить проверку; вводится в поле Maximum Number (Максимальное количество); ввод нуля аналогичен установке значения Аll(то есть должны быть найдены все ошибки);</li><br> <li> дополнительные параметры, управляемые флажками в группе Other (Другое): <br> <li> Check for High ASCII characters — выдавать сообщение о наличии в документе не ASCII символов (коды которых превышают 127);</li><br> <li> Check for Quotes in text — выдавать сообщение об использовании кавычек в тексте;</li><br> <li> Check for Line Spanning Quotes — проверять строки, заключенные в кавычки;</li><br> <li> Ignore ASP <%...%> delimited text — пропускать текст внутри ASP-тегов; </li><br> <li> Ignore PHP <?...?> delimited text — пропускать текст внутри PHP-тегов;</li><br> <li> Report Special Characters — выдавать сообщение об использовании специальных символов.</li><br> Вкладка Tags позволяет указать синтаксические правила использования каждого тега индивидуально. Чтобы получить такую возможность, необходимо выбрать тег в списке (щелкнуть на его имени). При этом в правой части окна появится группа элементов Tag Options (Параметры тега), рис. 7.6.<br><br> В нее входят:<br> <li> переключатели Closing Tag (Закрывающий тег), которые позволяют указать правило использования закрывающего тега:</li><br> <li> Requred — используется обязательно;</li><br> <li> Optional — может использоваться;</li><br> <li> Not Permitted — не разрешен;</li><br> <li> None Specified — не определено;</li><br> <li> флажок Case Sensitive (Чувствительный к регистру), который определяет, требуется ли использовать при написании имени тега символы определенного регистра;</li><br> <li> Required In Document (Требуется в документе), который определяет статус тега — является ли тот обязательным для документа данного типа.</li><br> Чтобы установленные параметры вступили в силу, необходимо щелкнуть на кнопке Apply Options (Применить параметры).<br> Помимо перечисленных параметров, при анализе корректности кода для каждого тега проверяются:<br> <li> список используемых атрибутов; </li><br> <li> наличие обязательных атрибутов;</li><br> <li> контекст, в котором используется тег (то есть возможность его совместного использования с тегами других типов).</li><br> Информация о разрешенном контексте отображается на вкладке Tags непосредственно в дереве тегов (см. рис. 7.6). Вы можете изменить контекст, используя кнопки Add (Добавить) и Remote (Удалить). Чтобы кнопка Add стала доступна, необходимо щелкнуть на значке папки Context.<br> <img src="image/proverka-korrektnosti-koda_10.gif" alt="Проверка корректности кода"><br> Рис. 7.6. Вкладка Tags панели свойств утилиты Validator<br> Информация об атрибутах тега на вкладке Tags не отображается, поскольку разработчик не вправе изменять их стандаргный набор. Вместе с тем, разрешается дополнить список атрибутов, включив их в папку Attributes. <br> Те атрибуты, которые вы считаете обязательными, следует включить в папку Required. Изменение содержимого обеих папок также выполняется с помощью кнопок Add и Remote.<br> Вкладка Versions (рис. 7.7) позволяет внести изменения в дерево версий языков, для которых Validator может выполнять синтаксический анализ. Информация на этой вкладке связана с информацией, отображаемой на вкладке Validation диалогового окна Settings (см. рис. 7.4). Вкладка содержит собственно дерево версий, кнопки для его редактирования, а также тскспшос поле, в котором отображается полное наименование версии (в том виде, как она представлена в списке версий в окне Settings).<br> <img src="image/proverka-korrektnosti-koda_11.gif" alt="Проверка корректности кода"> <br> Рис. 7.7. Вкладка Versions позволяет внести изменения в дерево версий<br> Дерево версий отражает их преемственность. Тe из версий, для которых разрешен синтаксический контроль, отмечены в дереве зелеными кружками, остальные — красными.<br> Кроме того, статус версии выводится справа от поля с ее наименованием (Inactive — неактивна или Active — активна).<br> Вкладка Values позволяет указать, каким образом должны быть представлены в коде документа символьные (строковые) величины, не являющиеся названиями тегов, их атрибутов либо текстовым содержимым страницы (например, ключевые слова-языков сценариев, численные значения атрибутов и т. д.).<br> Проблема использования различных символьных кодировок в текстовых документах была рассмотрена в разделе Управление кодировкой текстовых файлов главы Знакомство с HomeSite. В данном случае учитывается еще один аспект представления символьных данных. Любой символ может быть представлен в коде документа либо явно (на основе используемого репертуара), либо посредством регулярного выражения (то есть выбран из некоторого набора символов на основе заданной формулы).<br> Имеющиеся на вкладке Values элементы управления позволяют указать для каждого символьного элемента страницы либо форму явного представления, либо соответствующее регулярное выражение. Такими элементами являются (рис. 7.8):<br> <img src="image/proverka-korrektnosti-koda_12.gif" alt="Проверка корректности кода"><br> Рис. 7.8. Вкладка Values позволяет выбрать форму представления символьных величин<br> <li> поле Allowed Value (Разрешенное значение); в нем можно просмотреть и при необходимости изменить способ представления символьной величины, выбранной в расположенном ниже списке; если величина представлена в виде регулярного выражения, то при ее выборе автоматически устанавливается флажок Regular Expression (Регулярное выражение); например, на рис. 7.8 показано, как выглядит регулярное выражение для представления символов (цифр) целых отрицательных чисел (negative integer)',</li><br> <li>поле Value Display Siring (Строковое представление значения); оно позволяет изменить наименование элемента в списке (например, вместо negative integer можно ввести «целые отрицательные числа»); если в списке выбрано некоторое ключевое слово или предопределенное значение, то данное поле недоступно; </li><br> <li>раскрывающийся список Quotation (Использование кавычек); позволяет указать, должны ли (или могут ли) использоваться кавычки для этого типа данных; </li><br> <li>кнопка Add (Добавить) открывает дополнительное окно, с помощью которого можно пополнить список разрешенных символьных значений; </li><br> <li>флажки Show Regular Expression Values (Показать значения, представленные регулярным выражением) и Show Plain Values (Показать значения, представленные явно) играют роль фильтров: если флажок снят, то соответствующие значения в списке не отображаются.</li><br> Замечание<br><br> Совсем не обязательно использовать все рассмотренные выше средства для изменения параметров работы утилиты Validator. Часто их полезно применять в качестве источника дополнительной информации.<td> </tr> </table><br><br> <h1>Проверка правописания</h1> </h2><br> Проверку орфографии с помощью HomeSite следует начинать с установки соответствующих параметров его работы. Для этого необходимо открыть с помощью команды Settings одноименное диалоговое окно и выбрать в списке пункт Spelling (Проверка правописания). Окно настройки параметров содержит следующие элементы (рис. 7.12):<br> <li> список Main Dictionaries (Основные словари), который содержит перечень используемых словарей;</li><br> <li> поле User Dictionary (Словарь пользователя), в котором можно ввести (или выбрать с помощью имеющейся кнопки) имя текстового файла, используемого в качестве дополнительного словаря;</li><br> <li> список флажков, с помощью которых можно установить параметры работы утилиты Spell Checker,</li><br> <li> дискретный счетчик Maximum number of suggestions (Максимальное число предлагаемых исправлений), который определяет, после какого количества обнаруженных ошибок следует прекратить проверку.</li><br> После того, как соответствующие установки выполнены, можно переходить непосредственно к проверке правописания. Процесс инициируется либо с помощью команды Spell Check... из меню Tools, либо щелчком на одноименной кнопке панели инструментов.<br> При обнаружении ошибки на экране появляется диалоговое окно, в котором отображается найденная ошибка, список возможных вариантов исправления ошибки, а также кнопки, с помощью которых можно «заставить» Spell Checker игнорировать ошибку (рис. 7.13).<br> <img src="image/proverka-pravopisanija_19.gif" alt="Проверка правописания"> <br> Рис. 7.12. Окно настройки параметров утилиты Spell Checker<br> <img src="image/proverka-pravopisanija_20.gif" alt="Проверка правописания"><br> Рис. 7.13. Диалоговое окно для управления работой Spell Checker<br> Кроме того, в этом диалоговом окне имеется кнопка Add (Добавить), которая позволяет добавить слово, отсутствующее в основных словарях, в словарь пользователя. Последующие вхождения этого слова уже не будут восприниматься утилитой как ошибка.<br> Утилита Spell Checker может также работать в облегченном режиме, при использовании которого утилита только выделяет в тексте документа (подчеркивает) слова с ошибками, не предлагая вариантов замены. Для запуска Checker в таком режиме достаточно щелкнуть на кнопке Mark Spelling Errors (см. рис. 7.1).<br><td><br> </tr> </table><br><br> <h1>Тестирование сайта и выгрузка на удаленный сервер</h1> </h2><br> Мы уже неоднократно говорили о том, что тестирование страниц является обязательным этапом разработки сайта, независимо от его размера и предназначения. И если HomeSite не способен полностью заменить вас на этапе разработки и редактирования страниц, то на этапе их тестирования он практически всю работу берет на себя. <br> То же самое можно сказать и о процедуре развертывания сайта на удаленном сервере.<br> Как тестирование, так и выгрузка страниц публикации на сервер выполняются не только при первоначальной разработке сайта, но и в процессе его сопровождения. Причем (отметим это еще раз) регулярное обновление содержания публикации является обязательным условием обеспечения ее популярности среди посетителей Интернета.<br> Именно на этапе сопровождения сайта проявляются в полной мере преимущества разработки его как единого целого, то есть как проекта.<br> <td><br> </tr> </table><br><br> <h1>Тестирование ссылок</h1> </h2><br> При тестировании ссылок, присутствующих на странице, целесообразно использовать как окно результатов, так и окно ресурсов. Сначала следует сравнить полученную навигационную схему страницы с ее проектом, созданным вами на бумаге. Для такого визуального сравнения как раз и применяется окно ресурсов (точнее, его вкладка Site View). Особенности представления ссылок в окне ресурсов были рассмотрены в разделе Представление ссылок на вкладке 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><br> <li> Link (Ссылка) — URL, используемый в документе в качестве адреса связанного ресурса;</li><br> <li> Full URL (Полный URL) — полный URL связанного ресурса;</li><br> <li> Status (Статус) — состояние ссылки; может принимать одно из следующих значений: <br> <li> Untested — ссылка не проверена;</li><br> <li> Testing... — ссылка проверяется;</li><br> <li> Cancelled — тестирование ссылки было прервано пользователем;</li><br> <li> ОК — ссылка проверена и работоспособна; дополнительно выводится время, затраченное на проверку (в миллисекундах).</li><br> <img src="image/testirovanie-ssylok_1.gif" alt="Тестирование ссылок"> <br> Рис. 7.9. Представление списка ссылок документа в окне результатов<br> Если ссылка оказалась неработоспособна, то выводится соответствующее пояснение (например. Object Not Found — объект не найден) и длительность проверки.<br> Для работы с представленными в списке ссылками могут использоваться либо расположенная в левой части окна панель инструментов, либо контекстное меню окна.<br> Кнопки панели инструментов имеют следующее назначение:<br> <li> Start Link Verification (Начать проверку ссылок) — активизация процесса тестирования (он всегда начинается с начала документа);</li><br> <li> Stop Link Verification (Закончить проверку ссылок) — прерывание процесса тестирования;</li><br> <li> Set Root URL (Установить корневой URL) — вызывает диалоговое окно, с помощью которого можно указать корневой (абсолютный) URL, который должен использоваться для вычисления относительных ссылок;</li><br> <li> Set Timeout (Установить интервал) — вызывает диалоговое окно, с помощью которого можно указать максимальную длительность проверки одной ссылки; </li><br> <li> Set Proxy (Установить прокси-сервер) — вызывает диалоговое окно, с помощью которого можно указать имя и номер порта используемого прокси-сервера;</li><br> <li> Print Failed Links (Печать плохих ссылок) — формирование отчета о неработоспособных ссылках (отчет создается в виде HTML-страницы и открывается в используемом по умолчанию броузере), рис. 7.10.</li><br> <img src="image/testirovanie-ssylok_2.gif" alt="Тестирование ссылок"><br> Рис. 7.10. Форма отчета о неработоспособных ссылках<br> Контекстное меню окна содержит следующие команды:<br> <li> Edit this Link (Редактировать ссылку) — соответствующая ссылка выделяется в тексте документа;</li><br> <li> Browse this Link (Просмотреть ссылку) — связанный документ открывается с помощью ассоциированного приложения;</li><br> <li> Verify this Link (Проверить ссылку) — инициализация процесса тестирования ссылки;</li><br> <li> Save as... (Сохранить как...) — содержимое окна результатов записывается в текстовый файл (по умолчанию — links.txt);</li><br> <li> Clear (Очистить) — команда очищает содержимое окна результатов, но не закрывает его;</li><br> <li> Open in Browser (Открыть в броузере) — содержимое окна результатов открывается в используемом по умолчанию броузере в виде Web-страницы (рис. 7.11);</li><br> <li> Close Results (Закрыть результаты) — закрывает окно результатов.</li><br> <img src="image/testirovanie-ssylok_3.gif" alt="Тестирование ссылок"><br> Рис. 7.11. Форма отчета о результатах тестирования ссылок<br> Еще раз напомним: если возможности утилиты Link Checker покажутся вам недостаточными, вы можете воспользоваться приложением Linkbot. После его установки на компьютере процесс тестирования может быть начат с помощью одной из двух команд меню Tools главного окна HomeSite:<br> <li> Verify Links with Linkbot (Проверить ссылки с помощью Linkbot) - проверка ссылок текущего документа; </li><br> <li> Verify Project with Linkbot (Проверить проект с помощью Linkbot) - проверка ссылок во всем текущем проекте.</li><br> <td><br> </tr> </table><br><br> <h1>Тестирование страниц</h1> </h2><br> Тестирование (оценка качества) любой страницы публикации должно включать:<br> <li> проверку корректности кода;</li><br> <li> проверку работоспособности имеющихся на странице ссылок;</li><br> <li> контроле текстового содержимого страницы на отсутствие грамматических и синтаксических ошибок;</li><br> <li> оценку длительности загрузки страницы броузером потенциального посетителя.</li><br> Замечание<br><br> Разумеется, наряду с перечисленными аспектами, нельзя забывать о качестве пользовательского интерфейса страниц, но, хотя этот фактор является, пожалуй, важнейшим, оценить его формально с помощью HomeSite не представляется возможным.<br> Для активизации основных средств тестирования страниц удобнее всего использовать группу кнопок, расположенных на панели инструментов главного окна HomeSite (рис. 7.1).<br> <img src="image/testirovanie-stranic_1.gif" alt="Тестирование страниц"> <br> Рис. 7.1. Кнопки для вызова средств тестирования<br> Эти кнопки имеют следующее предназначение:<br> <li> Verify Links (Проверить ссылки) — вызов утилиты Link Checker, </li><br> <li>Validate Current Document (Проверить текущий документ) — вызов утилиты Validator,</li><br> <li> Spell Check (Проверка правописания) — вызов утилиты Spell Checker, </li><br> <li> Mark Spelling Errors (Пометить грамматические ошибки) — включение режима быстрой проверки правописания (без исправления ошибок).</li><br> <td><br> </tr> </table><br><br> <h1>Установка параметров развертывания</h1> </h2><br> Первое, что необходимо сделать для развертывания проекта — установить параметры этой процедуры.<br> <img src="image/ustanovka-parametrov-razvertyvanija_1.gif" alt="Установка параметров развертывания"><br> Рис. 7.15. Вкладка Deployment диалогового окна Settings<br> Установка параметров развертывания выполняется с помощью элементов управления, размещенных на вкладке Deployment (Развертывание) диалогового окна Settings (рис. 7.15):<br> <li> Create Missing Folders/Directories (Создавать отсутствующие папки/каталоги) — перед загрузкой проекта на сервер на нем будет воссоздана структура папок, использовавшаяся для проекта на локальном компьютере; отсутствие такого соответствие вызовет ошибку при выполнении развертывания;</li><br> <li> Upload Only Newer (Загружать только обновленные) — перед выгрузкой каждого файла проекта выполняется сравнение с его копией, размещенной на сервере; если файл не изменялся, его выгрузка не производится; </li><br> <li> Encrypt CFML (Зашифровать CFML) - - выполняется кодирование CFM-файлов таким образом, чтобы запретить их просмотр конечными пользователями;</li><br> <li> Force to Lower Case (Привести к нижнему регистру) - - имена всех файлов проекта преобразуются к нижнему регистру; для UNIX-систем это может привести к неработоспособности ссылок, в которых имена файлов записаны с использованием символов верхнего регистра; </li><br> <li> Show Deployment Warning Dialog (Показывать окно предупреждения при развертывании) -- перед развертыванием проекта на экран выводится окно с просьбой подтвердить необходимость выполнения процедуры. </li><br> Кроме того, с помощью флажка Disable Logging (Запретить ведение протокола) вы можете указать, требуется ли регистрировать шаги развертывания. Если да, то в поле Log File следует указать файл, в который будет записываться информация о развертывании.<br> Далее необходимо внести URL сервера (или серверов), на который вы собираетесь выгрузить сайт, в свойства проекта. Эта процедура выполняется следующим образом:<br> <li> Щелкнуть правой кнопкой мыши на имени проекта в окне ресурсов и выбрать в контекстном меню команду Properties...(Параметры).</li><br> <li> В открывшемся диалоговом окне (рис. 7.16) в поле Deployment Path (Маршрут развертывания) ввести URL, по которому будет размещен созданный вами сайт (маршрут вводится либо вручную, либо с помощью расположенной рядом кнопки).</li><br> <img src="image/ustanovka-parametrov-razvertyvanija_2.gif" alt="Установка параметров развертывания"><br> Рис. 7.16. Диалоговое окно для указания адреса развертывания проекта<br> После этого необходимо в меню Project основного окна HomeSite выбрать команду Deployment Wizard (Мастер развертывания). При этом откроется окно,<br> <img src="image/ustanovka-parametrov-razvertyvanija_3.gif" alt="Установка параметров развертывания"><br> Рис. 7.17. Первый шаг работы мастера развертывания <br> с помощью которого выполняется первый шаг процедуры загрузки: выбирается способ размещения проекта.<br> Возможны два варианта (рис. 7.17):<br> <li> прямая загрузка (Direct Deployment);</li><br> <li> загрузка на основе сценария (Schptable Deployment).</li><br> Выберите первый вариант и щелкните на кнопке Next (Далее). Второе окно мастера позволяет еще раз проверить (или изменить) параметры развертывания, установленные ранее на вкладке Deployment диалогового окна Settings (рис. 7.18).<br> На третьем, последнем шаге, остается только щелкнуть кнопку Finish (Готово), и ваш сайт будет загружен на Web-сервер, а в окне результатов (на листе Deployment) будут отражены результаты выполнения загрузки (рис. 7.19).<br> Если на первом шаге мастера развертывания выбрать вариант Scriptable Deployment, то мастер автоматически сгенерирует сценарий на указанном вами языке: JavaScript или VBScript и сохранит его в файле на диске для последующего использования.<br> <img src="image/ustanovka-parametrov-razvertyvanija_4.gif" alt="Установка параметров развертывания"> <br> Рис. 7.18. Второй шаг работы мастера<br> <img src="image/ustanovka-parametrov-razvertyvanija_5.gif" alt="Установка параметров развертывания"><br> Рис. 7. 19. Представление результатов выгрузки на листе Deployment<br><td><br> </tr> </table><br><br> <h1>Выгрузка cайта на удаленный сервер</h1> </h2><br> В составе HomeSite имеется утилита, которая позволяет работать с файлами, размещенными на удаленном сервере так же, как если бы они находились на локальном диске. Эта утилита называется Macromedia FTP/RDS (в предыдущих версиях HomeSite она называлась Allaire FTR/RDS). ипа как оы выполняет функции виртуальной папки, содержащей доступные FTP-каталоги одного или нескольких удаленных серверов. Эта папка доступна не только из среды HomeSite, но и непосредственно из диалоговых окон Windows Explorer (рис. 7.21).<br> <img src="image/vygruzka-cajta-na-udalennyj-server_1.gif" alt="Выгрузка cайта на удаленный сервер"><br> Рис. 7.21. Представление 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> <img src="image/vygruzka-cajta-na-udalennyj-server_2.gif" alt="Выгрузка cайта на удаленный сервер"> <br> Рис. 7.22. Средства доступа к списку удаленных серверов в окне ресурсов HomeSite<br> Замечание<br><br> Список серверов, добавленных в папку Macromedia FTP/RDS, хранится в реестре Windows, а список серверов развертывания проекта записывается в файл проекта .apt. Если вы хотите, чтобы одни и те же серверы были представлены и в папке Macromedia FTP/RDS, и в списке Deployment Servers, необходимо ввести данные о них и там, и там.<br> Для выполнения операций с удаленным сервером требуется наличие двух условий:<br> <li> в параметрах HomeSite должна быть разрешена работа с удаленными серверами;</li><br> <li> должна быть установлена связь с удаленным сервером. </li><br> Параметры HomeSite, связанные с использованием удаленных серверов, размещены на вкладке File Settings — FTP диалогового окна Settings (рис. 7.23). К ним относятся:<br> <li> Enable Explorer shell integration (Разрешить интеграцию с Explorer) — если флажок установлен, разрешена работа с папкой Macromedia FTP/ RDS в окне Windows Explorer;</li><br> <li> Enable Byte Count Checking (Разрешить контроль числа байтов) — если флажок установлен, то после завершения пересылки файла на сервер будет выполняться сравнение числа отправленных и принятых байтов; в случае несоответствия на экран выводится соответствующее сообщение;</li><br> <li> Always use binary for FTP transfer (Всегда использовать двоичный формат при передаче по FTP) — при пересылке содержимого файлов по FTP оно представляется в двоичном формате.<br> <img src="image/vygruzka-cajta-na-udalennyj-server_3.gif" alt="Выгрузка cайта на удаленный сервер"><br> Рис. 7.23. Вкладка File Settings — FTP диалогового окна Settings<br> Параметры соединения с конкретным FTP-ссрвером устанавливаются с помощью диалогового окна, которое вызывается на экран либо с помощью команды Add FTP Server (если создастся соединение с новым сервером), либо с помощью команды Properties (если редактируются параметры соединения с существующим сервером).<br> <img src="image/vygruzka-cajta-na-udalennyj-server_4.gif" alt="Выгрузка cайта на удаленный сервер"> <br> Рис. 7.24. Диалоговое окно для установки параметров соединения с удаленным сервером<br> Диалоговое окно для установки параметров соединения с удаленным сервером содержит следующие поля (рис. 7.24):<br> <li>Description (Описание) — условное обозначение FTP-сервсра, используемое для его представления в списке Deployment Servers и в папке Macromedia FTP/RDS;</li><br> <li>Host Name (Имя хост-компьютера) — сетевое имя FTP-сервера; может быть указано либо в виде IP-адреса, либо в виде доменного имени; если тип протокола ftp используется как часть доменного имени, необходимо ввести полное имя, например ftp.macromedia.com;</li><br> <li> Initial Directory (Начальный каталог) — имя каталога верхнего уровня, в котором размещаются папки проекта; если при создании учетной записи соединения (аккаунте) имя этого каталога установлено по умолчанию, то данный параметр является необязательным; параметр необходим, если для учетной записи имя каталога должно быть задано явным образом;</li><br> <li> Relative from server-assigned directory (Относительно каталога, назначенного сервером) — если задан параметр Initial Directory, то данный параметр определяет «точку отсчета» при размещении папок проекта; если в качестве начального каталога (Initial Directory) указан корневой каталог сервера, то флажок должен быть снят;</li><br> <li> Username (Имя пользователя) — зарегистрированное имя, используемое для подключения к FTP-ссрверу (или anonymous для FTP-сервера с анонимным подключением, если поле оставлено пустым, то им пользователя потребуется ввести по запросу от сервера непосредственно при подключений;</li><br> <li> Password (Пароль) — пароль для подключения к серверу; </li><br> <li> Root URL (Корневой URL) — полный URL сервера; данный параметр позволяет открывать, редактировать и сохранять файлы на удаленно сервере;</li><br> <li> Remote Port (Удаленный порт) — номер порта, используемого для noдключения к FTP-сервсру; по умолчанию используется 21 (если интернет-провайдер не определит другое значение); </li><br> <li> Request Timeout (Длительность отработки запроса) — максимальны интервал времени (в секундах), в течение которого следует ожидать соединения с сервером; </li><br> <li> Disable passive mode (Запретить пассивный режим) — соответствующий флажок должен быть установлен, если FTP-сервср не поддерживает пассивный режим подключения;</li><br> <li> File time offset (Смещение времени файла) — разница во времени (часах) между текущим временем на вашем компьютере и на сервере; заданная величина учитывается при установке атрибутов файла при его сохранении на диске; если значение параметра больше нуля, то флажок Assume UTC file times недоступен; </li><br> <li> Assume UTC file times (Время приема файла по UTC) — если этот флажок установлен, то время записи файла указывается в формате UTC (Universal Coordinated Time — единые временные координаты)</li><br> Дополнительно могут быть заданы параметры безопасной передачи файле на основе протокола SSL (Secure Sockets Layer).<br> Замечание<br><br> Протокол SSL не может применяться для пересылки файлов, для которых используется кодировка UNICODE.<br> После установки параметров соединения с FTP-сервером развертывание проекта на нем выполняется с помощью мастера развертывания (Deployment Wizard), описанным в предыдущем подразделе.<br> <td><br> </tr> </table><br><br> <h1>Выгрузка отдельных папок и файлов</h1> </h2><br> При выгрузке на сервер некоторой папки, входящей в состав проекта, возможны три случая:<br> <li> папка выгружается на тот же сервер, на который был выгружен весь проект, причем сохраняется ее место в структуре проекта;</li><br> <li> папка выгружается на тот же сервер, но по иному адресу внутри корневой папки проекта;</li><br> <li> папка выгружается на другой сервер.</li><br> Чтобы выгрузить папку (точнее, содержащиеся в ней файлы) по прежнему адресу, необходимо:<br> <li> 1. В дереве проекта (на вкладке Projects окна ресурсов) щелкнуть правой кнопкой на значке папки и в контекстном меню выбрать команду Deploy Files in Folder (Выгрузить файлы в папке); это приведет к двум последствиям: <br> <li> будет открыто окно результатов и в нем появится сообщение Project opened (Проект открыт);</li><br> <li> на экране появится диалоговое окно (рис. 7.20). содержащее список файлов, имеющихся в папке, и кнопку Deploy (Выгрузить).</li><br> <li> 2. В диалоговом окне щелкнуть на кнопке Deploy.</li><br> <li></li><br> <img src="image/vygruzka-otdelnyh-papok-i-fajlov_1.gif" alt="Выгрузка отдельных папок и файлов"><br> Рис. 7.20. Список файлов выгружаемой папки<br> Протокол выгрузки будет представлен в окне результатов. Если папку следует загрузить по новому адресу, то требуется выполнить следующие действия:<br> <li>1. В дереве проекта щелкнуть правой кнопкой на значке папки и в контекстном меню выбрать команду Properties (Свойства).</li><br> <li> 2. В открывшемся окне перейти на вкладку Deployment. </li><br> <li>3. С помощью элементов управления, имеющихся на вкладке, указать адрес выгрузки и щелкнуть на кнопке ОК.</li><br> <li> 4. В контекстном меню папки выбрать команду Deploy Files in Folder и далее выполнить описанную выше процедуру.</li><br> Выгрузка одного отдельного файла выполняется аналогичным образом:<br> <li> 1. В дереве проекта открыть папку, в которой находится выгружаемый файл (альтернативный вариант — открыть соответствующий раздел дерева ресурсов).</li><br> <li> 2. В списке файлов щелкнуть правой кнопкой на значке файла и в контекстном меню выбрать команду Deploy File...</li><br> <li> 3. В открывшемся диалоговом окне щелкнуть на кнопке Deploy.</li><br> <td><br> </tr> </table><br><br> <h1>Выгрузка сайта на удаленный сервер</h1> </h2><br> Развертывание, или выгрузка сайта (английский термин Deployment) — это процесс копирования файлов проекта на один или более Web-серверов. Вы можете указать путь развертывания либо для всего проекта, либо для отдельных папок и файлов.<br> Основную роль в подготовке и выполнении этапа загрузки сайта на Web-сервер играет проект, созданный нами заблаговременно (см. раздел Создание и установка параметров проекта главы Разработка структуры сайта</a>). Однако при формировании проекта мы определили лишь некоторые параметры загрузки, указав способ размещения на Web-сервере отдельных папок. Вернемся еще раз к описанию проекта и внесем в него необходимые дополнения.<br><td><br> </tr> </table><br><br>  <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> </div></div> </body></html>