Web дизайн с Macromedia HOMESITE




Основные инструменты


Глава 3 Основные инструменты
Глава 3. Основные инструментыОсновные инструментыРедактор кода Функциональные возможности редактора кода Создание и сохранение документа Работа с фрагментами текста и блоками Управление визуальным...
Основные инструменты
Основные инструменты Все операции по разработке страниц выполняются в окне документа (его интерфейс был подробно описан вразделе Организация пользовательского интерфейса в главе «Знакомство с Home...
Функция Code Template
Функция Code Template Данная функция обеспечивает автоматическую подстановку фрагментов HTML-кода вместо некоторого статического текста, используемого в качестве заменителя, или псевдонима реально...
Вкладка Code Template диалогового окна Settings
Рисунок 3.25. Вкладка Code Template диалогового окна Settings Чтобы использовать шаблон при вводе кода, необходимо: 1. С помощью элементов управления, имеющихся на вкладке Code Template диалоговог...
Диалоговое окно для описания шаблона
Рисунок 3.26. Диалоговое окно для описания шаблонаЕсли вы используете большое количество шаблонов и забыли какой-либо из них, то можете оперативно воспользоваться списком имеющихся шаблонов. Для э...
Функция Tag Validation
Функция Tag Validation Данная функция позволяет проверять корректность фрагментов HTML-кода страницы, не дожидаясь окончания разработки страницы. Применение функции эффективно в том случае, если и...
Результат применения функции Tag Validation
Рисунок 3.28. Результат применения функции Tag Validation Следует отмстить, что в HomeSite помимо функции Tag Validation предусмотрено использование еще двух инструментов синтаксического контроля...
Окно установки параметров функции Tag Validation
Рисунок 3.29. Окно установки параметров функции Tag Validation список версий языков создания Web-докумeнтов, для которых поддерживается синтаксический контроль с помощью утилиты Validator; список...
Настройка параметров редактора кода
Настройка параметров редактора кода Общие параметры работы редактора кода могут быть скорректированы с помощью элементов управления, размещенных на вкладке Editor диалогового окна Settings (Рисуно...
Вкладка Editor диалогового окна Settings
Рисунок 3.30. Вкладка Editor диалогового окна Settings Всего таких параметров более двух десятков, поэтому обратим внимание читателя лишь на те, которые представляются наиболее важными: набор симв...
Редактор тегов Tag Editor
Редактор тегов Tag Editor Редактор тегов фактически представляет собой своеобразную форму реализации мастера (или конструктора), который на основе полученной от пользователя информации генерирует...
Пример диалогового окна редактора тегов
Рисунок 3.32. Пример диалогового окна редактора тегов Как правило, окно редактора тегов содержит следующие вкладки: вкладку стандартизованных атрибутов тега; наименование этой вкладки включает наз...
Графическое обозначение специфических атрибутов
Рисунок 3.33. Графическое обозначение специфических атрибутов...
Значки броузеров используемые в диалоговых окнах редактора тегов
Рисунок 3.34. Значки броузеров, используемые в диалоговых окнах редактора тегов вкладку Style Sheets/Accessibility (HTML 4.0) (Таблицы стилей/доступность - - для HTML 4.0), которая позволяет устан...
Формат вкладки Style Sheets/Accessibility (HTML 4 0)
Рисунок 3.35. Формат вкладки Style Sheets/Accessibility (HTML 4.0) вкладку Events (HTML 4.0) (События), которая используется при создании интерактивных страниц на основе Dynamic HTML; эта вкладка...
Формат вкладки Events (HTML 4 0)
Рисунок 3.36. Формат вкладки Events (HTML 4.0) Помимо перечисленных выше вкладок, во всех диалоговых окнах редактора тегов имеются следующие элементы управления (см. Рисунок 3.32): флажки, управля...
Вывод справки по тегу
Рисунок 3.37. Вывод справки по тегу Вызов редактора тегов выполняется одним из следующих способов: щелкнуть в окне документа правой кнопкой мыши на теге, атрибуты которого требуется изменить, и в...
Панель быстрой вставки
Панель быстрой вставки На самом деле панель быстрой вставки (Quick Bar) не является самостоятельным инструментом редактирования документа. Это всего лишь посредник, обеспечивающий быстрый и удобны...
Панель Quick Bar
Рисунок 3.38. Панель Quick Bar В общем случае Quick Bar обеспечивает выполнение следующих операций: автоматическую вставку в текст документа тега с установленными по умолчанию значениями атрибутов...
Изменение конфигурации панели быстрой вставки
Рисунок 3.39. Изменение конфигурации панели быстрой вставки Альтернативный способ удалить вкладку щелкнуть правой кнопкой мыши в любой позиции панели Quick Bar и в открывшемся контекстном меню щел...
Диалоговое окно для изменения взаимного расположения вкладок
Рисунок 3.40. Диалоговое окно для изменения взаимного расположения вкладок...
Диалоговое окно Customize
Рисунок 3.41. Диалоговое окно Customize Чтобы добавить на вкладку новую кнопку, необходимо: 1. Выбрать вкладку в списке Visible Toolbar (Видимые панели инструментов); образец вкладки появится в по...
Вставка тегов с помощью Tag Chooser
Вставка тегов с помощью Tag Chooser Утилита Tag Chooser позволяет вставлять в текст документа теги или другие элементы кода из любого языка, поддерживаемого HomeSite. Технология работы Tag Chooser...
Окно утилиты Tag Chooser
Рисунок 3.42. Окно утилиты Tag Chooser Чтобы добавить тег в код документа, достаточно дважды щелкнуть на его имени в правом подокне (если для тега требуется установить атрибуты, это приведет к отк...
Работа с Tag Inspector и Tag Tree
Работа с Tag Inspector и Tag Tree Инспектор тегов Tag Inspector обладает примерно теми же функциональными возможностями, что и редактор тегов, однако в некоторых случаях его применение оказывается...
Инспектор тегов
Инспектор тегов Чтобы перейти в режим работы с Tag Inspector, необходимо: 1. В окне ресурсов открыть вкладку Tag Inspector. 2. В окне документа щелкнуть мышью на том теге, атрибуты которого вы хо...
Формат HomeSite при вызове Tag Inspector
Рисунок 3.43. Формат HomeSite при вызове Tag Inspector Рассмотрим подробнее интерфейс инспектора тегов (Рисунок 3.44). В верхней части окна отображается, кроме имени активного тега, собственная па...
Интерфейс окна Tag Inspector
Рисунок 3.44. Интерфейс окна Tag Inspector Способ ввода значения атрибута зависит от типа атрибута: если для него существуют предопределенные значения, то они могут быть выбраны из раскрывающегося...
Выбор языка сценария
Рисунок 3.45. Выбор языка сценария...
Выбор обработчика события
Рисунок 3.46. Выбор обработчика события После выполнения описанной процедуры Tag Inspector сгенерирует соответствующий код заголовка сценария и вызов функции-обработчика и поместит их в текст реда...
Дерево тегов
Дерево тегов Как было сказано выше, Tag Inspector тесно связан с другой утилитой -Tag Tree. Она представляет собой интерактивное дерево тегов редактируемого документа, а также дополнительные элеме...
Формат окна Tag Tree в исходном состоянии
Рисунок 3.48. Формат окна Tag Tree в исходном состоянии В терминологии разработчиков HomeSite профиль (или профиль иерархии -- Outline Profile) -- это подмножество тегов, учитываемых при анализе с...
Пример свертывания фрагментов документа с помощью Tag Tree
Рисунок 3.49. Пример свертывания фрагментов документа с помощью Tag Tree Чтобы развернуть свернутый фрагмент в окне документа, следует развернуть соответствующий тег в дереве и еще раз щелкнуть на...
Установка глобальных параметров
Установка глобальных параметров Под глобальными понимаются параметры, влияющие на работу всех рассмотрснных выше инструментов. Они относятся к двум аспектам работы с кодом: визуальному представле...
Вкладка Markup Languages диалогового окна Settings
Рисунок 3.50. Вкладка Markup Languages диалогового окна Settings When editing tags, return the output on a single line — после редактирования атрибутов тега с помощью Tag Editor все его атрибуты в...
Вкладка HTML/XHTML диалогового окна Settings
Рисунок 3.51. Вкладка HTML/XHTML диалогового окна Settings Use <tille> of dragged documents as the link description — при создании ссылки на перетаскиваемый документ (файл) в качестве текста...
Расширенный и сокращенный (стандартный) форматы окон редактора тегов для тега <А>
Рисунок 3.52. Расширенный и сокращенный (стандартный) форматы окон редактора тегов для тега <А> Завершая описание основных инструментов, предоставляемых HomeSite, отметим, что многие типовые...
Редактор кода
Редактор кода Хотя редактор кода является текстовым редактором, тем не менее объем операций, которые пользователь вынужден выполнять в нем вручную, сведен к минимуму. Обеспечивается это большим к...
Функциональные возможности редактора кода
Функциональные возможности редактора кода Вес действия по вводу и редактированию кода Web-документа выполняются на вкладке Edit окна документа. Для ввода и правки кода Web-документа вы можете испо...
Панель инструментов редактора кода
Рисунок 3.1. Панель инструментов редактора кода Tag Validation — кнопка-переключатель, которая разрешает или запрещает использование функции Tag Validation; Open in Macromedia Dreamweaver/Ultradev...
Рисунок З 2 Основной формат контекстного меню редактора кода
Рисунок З.2. Основной формат контекстного меню редактора кода Edit Current Tag (Редактировать текущий тег) — открытие диалогового окна редактора тегов, соответствующего выбранному в документе тегу...
Создание и сохранение документа
Создание и сохранение документа Команды и элементы интерфейса, связанные с созданием и сохранением редактируемого документа, не относятся непосредственно к редактору кода. Тем не менее при редакти...
Работа с фрагментами текста и блоками
Работа с фрагментами текста и блоками Редактор кода поддерживает большое число операций, выполняемых над выбранным фрагментом кода страницы. С целью ускорения работы пользователя для многих из эти...
Таблица 3 1 Способы быстрого выбора (выделения) фрагмента текста
Таблица 3.1. Способы быстрого выбора (выделения) фрагмента текста Выбираемый фрагмент Способ выбора Слово (неразрывная последовательность символов) Дважды щелкнуть на слове левой кнопкой...
Рисунок З 4 Состав команд меню Selection
Рисунок З.4. Состав команд меню Selection...
Рисунок З 5 Пример использования команды Convert Lines to Ordered List
Рисунок З.5. Пример использования команды Convert Lines to Ordered List Convert Lines to Ordered List (Преобразовать в упорядоченный список) — преобразование произвольной последовательности строк...
Рисунок З 6 Пример использования команды Convert Lines to Table
Рисунок З.6. Пример использования команды Convert Lines to Table...
Рисунок З 7 Пример использования команды Strip Tags
Рисунок З.7. Пример использования команды Strip Tags Любой фрагмент текста документа может быть сохранен в качестве повторно используемого блока (Snippet, в дальнейшем — просто «блок») и затем пом...
Результат применения команды Strip Outermost Tags
Рисунок 3.8. Результат применения команды Strip Outermost Tags Чтобы создать блок, необходимо: 1. Выбрать в документе требуемый фрагмент и поместить его в буфер обмена.2. В окне ресурсов перейти н...
Рисунок З 9 Диалоговое окно Snippet
Рисунок З.9. Диалоговое окно SnippetЗамечаниеЗамечаниеПоле End Text, присутствующее в диалоговом окне Snippet, используется в том случае, когда блок представляет собой парный тег, состоящий из дву...
Управление визуальным представлением документа
Управление визуальным представлением документа Цветовая подсветка синтаксических конструкций является наиболее эффективным средством повышения читабельности документа. Помимо повышения наглядности...
Вкладка Color Coding диалогового окна Settings
Рисунок 3.11. Вкладка Color Coding диалогового окна Settings На этой вкладке имеются следующие элементы управления: список существующих схем; он реализован в виде таблицы, состоящей из трех столбц...
Диалоговое окно для редактирования цветовой схемы
Рисунок 3.12. Диалоговое окно для редактирования цветовой схемы список Elements (Элементы) содержит перечень элементов и синтаксических конструкций соответствующего языка; данный список связан с р...
Рисунок 3 13 Представление в окне документа свернутых фрагментов
Рисунок 3. 13. Представление в окне документа свернутых фрагментов В HomeSite предусмотрены два способа свертывания фрагментов: ручной, при котором пользователь может свернуть любой фрагмент без у...
Свертывание произвольного фрагмента
Рисунок 3.14. Свертывание произвольного фрагмента...
Представление свернутого фрагмента
Рисунок 3.15. Представление свернутого фрагмента Чтобы развернуть свернутый фрагмент, достаточно дважды щелкнуть на его значке левой кнопкой мыши. Если требуется свернуть конкретный тег, необходим...
Вкладка Collapsed Text диалогового окна Settings
Рисунок 3.16. Вкладка Collapsed Text диалогового окна Settings К ним относятся:параметры шрифта надписи, выводимой на значке свернутого фрагмента; собственно тип шрифта выбирается с помощью раскры...
Замечания
Замечания1. Свернутый фрагмент может быть перемещен в другую позицию с помощью мыши, как любой другой фрагмент документа.2. Разрешается создавать вложенные свернутые фрагменты, то есть внутри свор...
Функция Tag Insight
Функция Tag Insight Функция Tag Insight (Предсказатель тегов) — это одна из сервисных функций, входящих в состав редактора кода. Она реализована в виде нескольких всплывающих списков, с помощью ко...
Эффект применения функции Tag Insight
Рисунок 3.17. Эффект применения функции Tag Insight После того, как в списке будет выбран требуемый тег, остается только нажать клавишу <Enter>, и тег будет вставлен в код страницы. Обратите...
Рисунок 3 18 Ввод атрибутов тега с помощью функции Tag Insight
Рисунок 3. 18. Ввод атрибутов тега с помощью функции Tag Insight Пользователю предоставлено право изменять некоторые параметры функции Tug Insight. Они размещены на вкладке Tag Insight диалогового...
Вкладка Tag Insight диалогового окна Settings
Рисунок 3.19. Вкладка Tag Insight диалогового окна Settings К ним относятся: флажок Enable Tag Insight... (Разрешить автоматическую вставку тега); если он установлен, то данная функция может испол...
Диалоговое окно для изменения списка тегов
Рисунок 3.20. Диалоговое окно для изменения списка тегов Чтобы использовать функцию Tag Insight для введенного рапсе тега или атрибута, необходимо ввести после имени тега (или атрибута) пробел. Вы...
Функция Tag Completion
Функция Tag Completion Данная функция автоматически вставляет закрывающий тег для последнего введенного незакрытого парного тега. Закрывающий тег вставляется в код страницы после ввода правой угло...
Окно установки параметров функции Tag Completion
Рисунок 3.21. Окно установки параметров функции Tag Completion Рисунок 3.22. Диалоговое окно для изменения списка закрываемых тегов...
Функция Auto Completion
Функция Auto Completion Эта сервисная функция автоматически добавляет в код документа закрывающий элемент для тех конструкций, синтаксис которых этого требует. Например, такой конструкцией являетс...
Окно установки параметров функции Auto Completion
Рисунок 3.23. Окно установки параметров функции Auto CompletionРисунок 3.24. Диалоговое окно для изменения списка комбинаций символов...








Начало