Формы
Adobe GoLive обеспечивает работу с полным набором элементов форм, располагающихся на соответствующей вкладке Forms (Формы) —
Следует отметить, что Adobe GoLive 6.0 позволяет использовать события в элементах форм. Эти события являются частью объектной модели- документа DOM (Document Object Model) и поддерживаются при помощи жриптовых языков, действующих на стороне пользователя, как например, JavaScript. Однако будьте осторожны, помните, что браузеры не всегда правильно поддерживают JavaScript в формах. Adobe GoLive позволяет вам создавать формы визуально в режиме Layout (Макет) путем перетаскивания шктограмм необходимых элементов форм (элементов HTML) из вкладки Forms (Формы) палитры объектов в окно макета. Одновременно с построе-шем формы в визуальном режиме вы можете проверить исходный код НTML, переключаясь в режим Source (Исходный код) или в режим Outline Editor (Редактор эскиза).
>ормы можно размещать и в таблицах. Однако следует учитывать тот факт, то различные браузеры отображают элементы Web-страницы по-разному, и один из инструментов создания Web-страниц не гарантирует, что формы для заполнения будут выглядеть одинаково в разных браузерах. Однако Adobe GoLive вы можете получить достаточно предсказуемые результаты, уга поместите элементы форм в таблицы HTML.
Совет
Если вы используете HTML-таблицы, увеличьте высоту строк и ширину ячеек, а также просмотрите ваши формы по возможности во всех целевых браузерах.
Прежде всего, необходимо на разрабатываемую Web-страницу поместить пиктограмму Form (Форма). Содержание вашей формы должно быть помещено а рамку, которая окружает пиктограмму Form (Форма) в окне документа. Если вы используете таблицу HTML для создания вашей формы, убедитесь, что вы поместили саму таблицу внутрь формы в окне документа.
Чтобы установить элементы формы, перетащите пиктограмму Form (Форма)
Если вы используете фреймы, следует указать наименование фрейма, в котором будут выводиться результаты работы обрабатывающего CGI-сценария. Для этого служит поле Target (Цель). В добавление к именам фреймов, которые уже созданы на Web-странице, вы можете установить следующие опции: _blank (чистый), чтобы загрузить страницу в новое, не имеющее имени окно; _self (в себя), чтобы загрузить страницу в окно или фрейм, в котором располагается форма; _parent (родитель), чтобы загрузить страницу в родительский фрейм; _top (верх), чтобы загрузить страницу в окно браузера.
Во всплывающем меню Method (Метод) определите, как будет послана на сервер информация, введенная пользователем:
Post (почта), чтобы вернуть данные введенной посетителем сайта информации отдельно от URL Web-страницы; Get (Получить), чтобы присоединить данные пользователя к URL запроса; Default (По умолчанию), чтобы опустить этот атрибут. Внимание
Создатели Adobe GoLive рекомендуют, чтобы вы использовали опцию Post. Добавление информации в данные места назначения может превысить лимит длины URL и, возможно, привести к потере данных.
Элементы формы являются элементами HTML и их можно вставить в сайт. Вкладка форм в палитре объектов содержит полный, инвентарь элементов форм, включая кнопки, поля флажков, текстовые поля, поля списков, всплывающие меню, специальные элементы и элементы HTML 4.0.
Чтобы добавить элементы формы ш раэрвбаяизаемую Web-чяраницу, перетащите подходящую пиктограмму из панели Forms (Формы)
Вам доступны различные виды кнопок, зависимых и независимых переключателей в формах Web-страницы. Значок Submit (Подтвердить ) создает кнопку, при нажатии на которую данные, введенные посетителем сайта в форму, передаются сценарию CGI для обработки (рис. 3.1). Значок Reset (Очистить) создает кнопку для очистки формы от введенных пользователем данных (рис. 3.1). Значок Radio Button (Зависимый переключатель) позволяет создавать группу зависимых переключателей, позволяя пользователям выбирать один из объектов в списке. Значок Check Box (Независимый переключатель) создает элемент формы позволяющий пользователю выбирать несколько объектов из списка.
Чтобы установить кнопку Submit (Подтвердитъ) или кнопку Resel (Очистить), перетащите нужную кнопку та панели Forms (Формы) палитры объектов в окно документа или просто дважды щелкните мышью на необходимой пиктограмме в Objects Palette (Палитра объектов).
Пиктограмма
В текстовом поле Group (Группа) введите имя новой группы переключателей или выберите существующее имя группы из выпадающего списка.
В текстовом поле Value (Значение) введите значение, которое будет идентифицировать переключатель в группе. Когда пользователь нажимает на кнопку Submit (Подтвердить), это значение будет передано в сценарий CGI. В.секции Focus (Фокус) взведите флажок Selected (Выбрано), чтобы переключатель, по умолчанию, являлся выбранным.
Если необходимо, из панели Fores (Формы) Objects Palette (Палитра объектов) перетяните пиктограмму надписи-ярлыка Label (Метка) и расположите рядом с каждым из переключателей, затем введите текст, связанный с ним.
Повторите то же самое в отношении каждого переключателя в группе. Применение этих компонентов позволит посетителю Web-страницы щелкать мышью (для изменения состояния) не только в маленьком переключателе, но и на тексте, связанном с ним. Подобная возможность достаточно серьезно облегчает жизнь пользователям, поэтому использование связанных с переключателями надписей является хорошим тоном.
Рис. 3.1. Кнопки Подтвердить и Очистить
Если в форме необходим независимый переключатель, перетяните пиктограмму Check Box (Независимый переключатель) —
В текстовом поле Name (Имя) введите уникальное имя переключателя, чтобы идентифицировать его. В текстовом поле Value (Значение) — значение, передаваемое в обрабатывающий CGI-сценарий, когда посетитель сайта нажимает кнопку Submit (Подтвердить).
Вы можете установить текстовые поля, поля паролей и области текста в форме вашей Web-страницы. Пиктограммы Text Field (Текстовое поле) и Password (Пароль) вставляют однострочное текстовое поле, которое позволяет посетителю; страницы вводит* текст, например, имя, или личные данные, или скрытый пароль в указанном порядке.
Пиктограмма Text Area (Область текста) вставляет многострочное текстовое поле, которое позволяет посетителю страницы ввести несколько строк текста. Когда пользователь нажимает кнопку Submit (Подтвердить), этот текст будет передан в CGI сценарий (рис. 3.2).
Рис. 3.2. Использование текстового поля и поля ввода пароля
Для размещения поля текстового ввода или поля для ввода пароля необходимо перетащить пиктограмму TextField (Текстовое поле) или пиктограмму Password (Пароль) из панели Forms (Формы) Objects Palette (Палитра объектов) в окно документа или дважды щелкнуть мышью на необходимую пиктограмму в Objects Palette (Палитра объектов).
Теперь пора установить параметры новых полей ввода в палитре Inspector (Инспектор) В текстовом поле Name (Имя) укажите уникальное наименование поля, чтобы однозначно идентифицировать его. В текстовом поле Value (Значение) введите текст, используемый по умолчанию, который может быть переписан посетителем сайта. В текстовом поле Visible (Видимое) указывается размер поля в символах. То есть, в поле указывается количество символов, которое будет видно в поле ввода.
В текстовом поле Маx (Максимум) введите максимальное количество символов, которые будут приняты текстовым Полем. Если поле оставить пустым, то предел будет определен браузером, который используется для просмотра данной формы. ;
В том случае, если создаваемое текстовое поле предназначено для ввода конфиденциальной информации, следует установить флажок в независимом переключателе Is Password Field (Поле пароля).
Чтобы установить текстовую область в форме, перетащите пиктограмму Text Area (Текстовая область) —
Выберите подходящий элемент из выпадающего списка Wrap (Перенос), чтобы управлять переносами строк: Default (По умолчанию) использует установки текстового поля, назначение в браузере по умолчанию; Off (Выключено) приказывает браузеру игнорировать установленную ширину поля и не переносить строки; Virtual (Виртуальный) и Physical (Физический) приказывает браузеру учитывать ширину поля ввода. Введенный текст переносится, когда достигает правой границы поля и начинает прокручиваться вертикально.
Если хотите, введите в текстовом поле Content (Содержание) текст, отображающийся в поле по умолчанию, который пользователь сможет изменить.
Теперь о том, как можно установить выпадающий список. Пиктограмма Popup (Выпадающее меню) вставляет прокручивающееся поле списка с элементами, из которых пользователь может выбрать один или сразу несколько.
Чтобы установить поле списка или всплывающее меню, перетащите пиктограмму ListBox (Список) или пиктограмму Popup (Выпадающий список) из панели Forms (Формы) в Objects Palette (Палитра объектов) в окно документа или просто дважды щелкните мышью на соответствующую пиктограмму в Objects Palette (Палитра объектов). Затем выделите пиктограмму в окне документа и установите ее свойства в палитре Inspector (Инспектор).
В текстовом поле Name (Имя) введите уникальное имя, чтобы идентифицировать поле списка или выпадающее меню. В текстовом поле Rows (Строки) введите количество строк, которые будут одновременно; отображаться в списке. Для всплывающего меню эта будет количество рядов, которое видит пользователь, прокручивая меню. Взведите флажок а независимом переключателе Multiple Selection (Множественный выбор), чтобы сделать для пользователей возможным выбор одного или сразу нескольких, элементов.
Теперь необходимо создать элементы, входящие в обычный или выпадающий списки. Выберите элемент из списка Label/Value (Обозначение/Значение). Поставьте флажок напротив выбранного элемента, чтобы браузер отображал этот элемент как .выбранный по умолчанию. Естественно, разработчик также должен установить свойства и значения, для всех элементов списка в соответствующих текстовых полях (рис. 3.3).
Рис. З.3. Установка выпадающего списка
Для добавления новых элементов в список можно использовать следующие кнопки:
Duplicate (Дублировать), чтобы создать копию уже существующего элемента; New (Новый), чтобы вставить новый элемент. Введите обозначение и значение в соответствующих текстовых полях.Набор специальных HTML-элементов позволяет вам вставлять кнопки в виде изображений, скрытые поля, включая криптографические ключи, и поля для выбора файлов из локальной системы пользователя.
Пиктограмма Input Image (Вставка картинки) вставляет картинку, такую, как например, графическая кнопка подтверждения. Добавление графики может помочь пользователям ориентироваться на ваших страницах. Пиктограмма скрытого поля Hidden Icon (Скрытый значок) вставляет поле, которое не отображается браузерам, но его содержимое все равно отсылается На сервер. Этот тег используется, чтобы посылать дополнительную информацию при обменах информацией между браузером и сервером. Пиктограмма Key Generator (Генератор ключа) позволяет использовать шифровальный алгоритм для обеспечения безопасности транзакций с вашим Web-сайтом. Пиктограмма загрузки файла File Browser (Загрузка файла) вставляет диалоговое окно выбора файла. Это файл потом также может быть передам браузером на сервер.Чтобы добавить изображение, которое будет играть роль кнопки, перетяните пиктограмму Input Image (Вставка картинки) —
Чтобы установить скрытое поле, генератор ключа или загрузчик файлов на разрабатываемую Web-страницу, перетащите пиктограмму Hidden (Скрытое поле), Key Generator (Генератор ключа) или File Browser (Загрузка файла) из панели Forms (Формы) в Objects Palette (Палитра объектов) на вашу страницу или просто дважды щелкните на пиктограмму в Objects Palette (Палитра объектов). После этого, для созданных элементов формы необходимо установить наименование в поле Name (Имя) и дополнительные свойства:
для скрытого поля введите его содержимое в текстовом поле Value (Значение); для поля загрузки файла следует в текстовом поле Visible (Видимый) указать цифровое значение, чтобы определить ширину поля загрузки файла. Разработчики Web-страниц; могут предоставлять возможность пользователям перемещаться между органами ввода данных, входящих в состав форм. В Adobe GoLive эта возможность реализуется при помощи органов управления, располагающихся в секции Focus (Фокус ввода) палитры Inspector (Инспектор).
В форме HTML каждый элемент должен получить фокус ввода, чтобы активизироваться и выполнить свою задачу. В более ранних версиях HTML это выполнялось при помощи щелчка мышью на выбранный элемент. HTML 4.0 представляет альтернативный путь навигации по форме, используя клавиатуру. Последовательный переход между элементами формы осуществляется по нажатию клавиши табуляции. Но для этого элементы формы должны входить в цепочки табуляции, о которой уже упоминалось в первой главе.
Adobe GoLive, естественно, позволяет вам определять цепочку табуляции для элементов формы. Цепочка табуляции указывает порядок, в котором выбираются элементы формы, когда пользователь нажимает кнопку табуляции.
Цепочка табуляции определяется путем установки значения табуляционного индекса для каждого элемента. Как было сказано в первой главе, табуляцион-ный индекс поддерживается при помощи атрибута tabindex, который может входить в состав любого тега, объявляющего элемент формы. Навигация осуществляется от элемента с наименьшим значением индекса к элементу с наибольшим его значением. Если вы назначаете одинаковое значение индекса табуляции двум элементам, последовательность в расположении HTML определяет порядок табулирования. Ярлыки, текстовые поля, поля паролей, области текста, кнопки подтверждения, кнопки очистки (Reset), независимые переключатели, группы переключателей, выпадающие меню и поля списков поддерживают навигацию при помощи клавиши табуляции.
Чтобы установить значение индекса табуляции для элементов форм автоматически, в режиме макета, в меню выполните команду Special | Start Tabulator Indexing (Особые возможности) Начать индексацию). Или выделите первый элемент и нажмите кнопку Start/Stop Indexing (Начать/закончить индексацию) —
Щелкните мышью на каждый элемент последовательно в требуемом порядке табуляции. Номер появляется в каждом поле индекса и в текстовом поле Tab (Табуляция) палитры Inspector (Инспектор). Это порядковый номер элемента в цепочке табуляции.
Чтобы установить значение индекса табуляции для элемента формы вручную, выделите элемент формы по очереди в нужном порядке и введите его порядковый номер в цепочке в текстовом поле Tab (Табуляция) палитры Inspector (Инспектор).
В случае, если вы хотите изменить существующую цепочку табуляции, выделите элемент, с которого вы начнете перенумерацию. Затем стоит выполнить команду меню Special | Start Tabulator Indexing (Особые возможности | Начать индексацию) или нажать кнопку Start/Stop Indexing (Начать/ закончить индексацию) в Inspector Objects (Инспектор объектов). После этого придется щелчками мыши на каждом элементе установить новый порядок перехода по табуляции.
Стандарт HTML 4.0 позволяет создателям Web-страниц устанавливать некоторые элементы форм в состояние "только для чтения". В этом режиме, пользователь не сможет изменить данные, которые уже отображаются в полях ввода.
Чтобы установить этот статус, выберите элемент, который вы хотите сделать недоступным для изменения, и взведите флажок в независимом переключателе Readonly (Только для чтения) в палитре Inspector (Инспектор).
Также разработчик Web-страница может создавать органы ввода в неактивном состоянии, которые потом могут быть активированы выполняемым скриптовым сценарием. Эта возможность позволяет держать кнопку Подтвердить неактивной до тех пор, пока пользователь не введет какой-нибудь нужной информации. Надписи, ярлыки, текстовые поля, текстовые области, кнопки Подтвердить, кнопки Reset, независимые и зависимые переключатели могут быть созданы с применением неактивного статуса.
Чтобы создать какой-либо элемент с неактивным статусом, в окне документа следует выделить этот элемент, а затем в палитре Inspector (Инспектор) взвести флажок Disabled (Недоступен).
В формах, созданных для браузеров совместимых с HTML 4.0, пиктограмма Label (Метка) вставляет текст, связанный с каким-либо органом управления, расположенным на форме. Щелчок пользователя мышью на метку позволяет активировать объект, с которым эта метка связана.
Чтобы вставить метку в создаваемую форму, перетащите пиктограмму Label (Метка) —
Текстовое поле Reference (Ссылка) в палитре Inspector (Инспектор) отображает идентификатор, который создает соответствие между органом ввода данных и его меткой.
НАЧИНАЕМ СТРОИТЬ WEB-САЙТ
Формы Работа с таблицами Редактирование HTML-кода Настройки Web в Adobe GoLive
Настройки Web в Adobe GoLive
Настройки Web это базовый строительный блок Adobe GoLive, который помогает поддерживать целостность и сохранность вашего HTML-кода. Они включают в себя полный набор тегов HTML, специальные знаковые коды и специфические настройки браузера. Настройки Web также помогают Web-разработчикам в выборе правильных тегов.и атрибутов для содержимого их страниц. Теги и атрибуты могут быть вставлены путем перетаскивания их из настроек Web в панель редактора источника.
Вы можете редактировать некоторые панели настроек Web, чтобы приспособить их для решения своих задач.
Внимание
Не редактируйте настройки Web без резервного копирования, если вы не являетесь специалистом в области HTML. Иначе результатом может явиться серьезное ухудшение качества ваших страниц. После установки прикладной системы, создайте резервную копию поля настроек Web. Когда вы редактируете базу данных настроек Web, время от времени делайте ее копию.
Вставка новых тегов, атрибутов, нумерации или других объектов в установки Web не повышает автоматически функциональность Adobe GoLive и не вставляет какие-либо новые значки в Objects Palette (Палитра объектов). Чтобы вставить новые теги, вы должны ввести их вручную в режиме Source (Исходный код) или выбрать их из выпадающих меию режима ОвШне Editor (Редактор эскиза). Элементы HTML, вставлеийме лойьзоватеяем, принимаются проверкой синтаксиса как прдайльные.
Если вы допустите ошибку во время редактирования настроек Web, то всегда сможете восстановить,основные настройки.
Чтофы просмотреть настройки Web, сначала надо их открыть. Для этого следует выполнить команду меню Edit | Web Settings (Правка | Настройки Web).
Пару слов следует сказать о формате MIME. Multipurpose Internet Mail Extensions (Многоцелевые почтовые расширения интернет) выполняют задачу упрощения отправки любых данных по почте пользователем, который не обладает специальными знаниями в вопросах кодирования и декодирования информации. Проще говоря, это автоматизация кодировочных процессов, происходящих в Интернет и дающих возможность передачи любых файлов от одного пользователя к другому.
Вкладка Global (Основные) настроек Web контролирует основные синтаксические правила HTML, включая такие возможности, как автоматический перенос текста, управление отстуцами и использование верхнего и нижнего регистров. Стилевые теги охватывают полные параграфы и блоки.
Вкладка Markup (Разметка)— сердце настроек Web. Она содержит полный перечень тегов HTML, которые Adobe GoLive может читать, отображать и писать. Они рассортированы на категории по функциям, таким, как контейнеры эталонов, формы и рамки.
Настройки Web содержат йодный комплект тегов HTML, известных Adobe GoLive на момент публикации, включая оба стандарта HTML (3.2 и 4.1) и специфические теги браузеров. Все правильные атрибуты, типы поддерживаемых значений и комментарии, идентифицирующие функцию каждого тега, предусмотрены. Стандартные теги HTML включают все, которые входят в стандартные публикации HTML 2.0 и 3.2 и плюс теги форм HTML 4.0 и выше. Нестандартные теги, использующиеся для реализации специфических особенностей браузера, также учтены — такие, как например, маркировочный тег Microsoft Internet Explorer. Вы можете добавлять новые теги в настройки Web,"Toгдa они становятся действующими.
Выпадающие списки тегов и атрибутов дают вам прямой доступ к базе данных во время определения элемента тега. Кроме того, вы можете открывать настройки Web в любое время и использовать их как сноску.
Если у вас есть какие-либо сомнения по поводу правильности использования тегов и атрибутов, откройте окно настроек Web и выберите тег. Информация о теге отображается в Inspector Web (Инспекторе Web). Если Inspector (Инспектор) не отображается, то выполните команду меню Window | Inspector (Окно | Инспектор). Чтобы использовать настройки Web, выполните команду меню Edit | Web Settings (Правка) Настройки Web). Перейдите на вкладку Markup (Разметка), выберите на левой панели Web | HTML и, прокручивая поле списка, раскрывайте категории и выбирайте нужный тег. Inspector (Инспектор) отобразит структурную информацию дня этого тега.
Для просмотра атрибутов того иди иного тега в окне настроек Web разверните тег щелчком мыши на символе радом с ним (если в теге нет атрибутов, то символ не появится). Выделите атрибут, чтобы просмотреть его опции в палитре Inspector (Инспектор) атрибутов настроек Web.
Выпадающий список Attribute Is (Атрибут является) сообщает вам, является ли данный атрибут обязательным или опциональным (необязательным для употребления). "Выпадающий список Vatae Type (Тип значения) определяет формат атрибута (например, текстовый или URL). Выпадающее меню Value (Значение) позволяет вам задать значение атрибута, но для этого нужно еще предварительно взвести флажок в независимом переключателе Create This Attribute (Создать атрибут).Настройки Web предлагают удобную среду для вставки, изменения или удаления тегов, атрибутов и их свойств. Контекстное меню, активизирующееся щелчком правой кнопкой мышки (в Windows) или <Control-щелчком (в Мас OS) на панели HTML окна настроек Web, позволяет вам легко вставлять новые теги или выделенные области в настройки Web. Контекстное меню для тегов и атрибутов позволяет вам редактировать или удалять эти элементы.
Внимание
Прежде чем вставлять новые элементы в настройки Web, проконсультируйтесь с документацией консорциума W3C на его сайте www.W3C.org, чтобы избежать использования неподдерживаемых тегов на вашей странице.
Удаляется любой элемент чрезвычайно просто. Выделите его и нажмите клавишу <Delete>. To же самое можно сделать, выбрав команду Delete (Удалить) в контекстном меню.
Если вы добавили новый тег, то необходимо дать ему имя на панели Basic (Основное) палитры Inspector (Инспектор), описать его функции и установить различные опции, зависящие от его структуры и содержания.
Чтобы редактироветь тег, сначала его необходимо создать, ввести его имя без угловых скобок в текстовом поле Name (Наименование) и нажать клавишу < Enter>. Далее введите описание в текстовом поле Comment (Комментарий) и нажмите клавишу < Enter>.
Затем в выпадающем списке Stractare (Структура) следует указать структурный уровень нового тега.
Тип содержимого тега и правила обработки этого содержимого указываются при помощи выпадающего списка Content (Содержание), чтобы определить, как. Adobe GoLive трактует содержание тега.
Значение Normal (Стандартный) заставляет Adobe GoLive рассматривать содержание так, как оно было указано в списке Structure (Структура). Значение .Get All Spaces (Сохранять все пробелы) заставляет Adobe GoLive отображать текстовое содержимое тега без ликвидации двойных пробелов. Например, эта опция позволяет Adobe GoLive адекватно отображать пробелы в теге <рге>. Значение Соте Text (Чистый текст) указывает, что содержимое тега следует. отображать без добавления .или удаления каких бы то ни было элементов. Например, эта опция позволяет Adobe GoLive читать и писать информацию не входящую в обычный HTML, содержащуюся в тегеНекоторые теги нуждаются в применении закрывающих близнецов, некоторые, как например, <br>, нет. Поэтому Adobe GoLive предоставляет разра-бфийку возможность указать необходимость закрывающего тега. Для этого служит выпадающий список Bid Ifcg (Конечный тег). Элементы этого списка указывают, когда следует использовать закрывающий тег.
Required (Обязательный) указывает, что тег нуждается в своем закрывающем близнеце, и Adobe ОоШе предполагает его наличие. Optional (do not write) (Необязательный, по умолчанию не писать) отмечает, что тег не обязательно нуждается в конечном теге и что Adobe GoLive не предполагает его применение. Optimal (write) (Необязательный, по умолчанию писать) отмечает, что тег не обязательно нуждается в конечном теге, но что вы хотите, чтобы Adobe GoLive вставил его. Для любого тега в панели настроек Web вы можете указывать некоторые параметры отображения содержимого тега на вкладке Output (Вывод) в палитре Inspector (Инспектор).
Чтобы установить основное форматирование для содержимого текущего тега, выделите тег на панели HTML окна настроек Web. В палитре Inspector (Инспектор) на вкладке Output (Вывод) используйте один из выпадающих списков.
Для любого тега внутри настроек Web вкладка Version (Версия) , палитра Inspector (Инспектор) позволяет указывать целевую версию,браузера или стандарта HTML и устанавливать обычные атрибуты. Настройки Web описывают поведение браузера, использующего определенные наборы тегов, атрибутов и перечней. Если вы создаете обычный тег, вы можете указать, должна ли проверка синтаксиса отмечать его как ошибочный или верный.
Внимание
Исходные свойства установок браузера и настройки на вкладке Version (Версия) палитры Inspector (Инспектор) не влияют на то, как Adobe GoLive пишет HTML-код; также они не влияют на то, как ваши страницы отображаются браузерами.
Если вы добавляете в тег новый атрибут, вы должны дать ему имя на панели Basic (Основное) палитры Inspector (Инспектор), описать его функции И установить требуемый статус и значения атрибута.
Чтобы отредактировать атрибут, создайте его и введите наименование в текстовое поле Attr Name (Имя Атрибута). Затем введите его описание в текстовое поле Comment (Комментарий) и нажмите клавишу <Enter>.
Выберите тип атрибута, из выпадающего списка Attribute Is (Атрибут является).
При помощи выпадающего списка Value Type (Тип значения) разработчик может задать тип значения редактируемого атрибута.
Text (Текст) допускает любой буквенно-цифровой ряд знаков в кодировке Weaern. Используйте эту функцию, если вы не уверены по поводу применения кодировки. Encoded Text (Кодированный текст)допускает любой буквенно-цифровой ряд знаков в любой кодировке. Number (Число) допускает только цифровое значение. Enumeration (Перечисление) указывает, что атрибут имеет перечислимый тип. Color (Цвет) допускает только цветовой код RGB. URL допускает только универсальный локатор ресурса (Universal Resource Locator). JavaScript допускает только JavaScript-код. Взведите флажок в независимом переключателе Create this attribute (Создать этот атрибут) и введите значение нового атрибута в поле Value (Значение).
Как известно, HTML использует специфическую систему обозначения для специальных знаков, которые не входят в распространенные кодировки. Вкладка Characters (Символы) окна настроек Web включает такие специальные символы, которые описаны в ISO 8859-1 и поддерживаются стандартами HTML3.2 и выше. A4obe GoLive использует содержание вкладки Characters (Символы), чтобы управлять работой с подобными символами. Эти символы разделены на три категории.
Каждый знак имеет свое имя в HTML, визуальное изображение, коды Мае OS и ISO и текстовое описание. Если знак не может быть отображен в системном шрифте, в колонке Char (Символ) панели Characters (Символы) он не отображается.
При вставке новых символов руководствуйтесь изложенными ниже принципами.
Вкладка Browser Profiles (Профили браузеров) содержит установленные по умолчанию списки стилей для всех основных браузеров Windows и Mac OS. Они, в первую очередь, применяются для предварительного просмотра страниц. Они позволяют вам увидеть, как шрифты и другие элементы дизайна отображаются в Windows и Mac OS, но не влияют на то, как Adobe GoLive пишет HTML-код.
Внимание
Не путайте эти, установленные по умолчанию, списки стилей со списками стилей, которые вы создаете и на которые ссылаетесь, используя тег <style> в ваших HTML-файлах.
Вы можете также дублировать элемент и редактировать его, чтобы создать определяемый пользователем список.
Чтобы создать новый используемый по умолчанию список стилей, на панели CSS окна выберите список стилей, который наилучшим образом отвечает вашим требованиям.
Выберите новый список стилей и перейдите на вкладку Basic (Основное) палитры Inspector (Инспектор). Введите имя, системную информацию и комментарии для создаваемого списка стилей,
Список стилей Root (Корневой), который вы выбираете на панели CSS настроек Web, определяет значения, используемые по умолчанию в ваших страницах и сайтах. Но вы можете использовать палитру Inspector (Инспектор) и панель предварительного просмотра, чтобы контролировать внешний вид документов при использовании различных списков стилей.
Чтобы предварительно просмотреть ваши страницы с различными списками стилей, перейдите на вкладку Layout (Макет) вашего окна документа и в палитре Inspector (Инспектор) на вкладке View Controller выберите новый список стилей из списка Root CSS (Корневой CSS) и просмотрите эффекты вашего нового списка стилей.
Работа с таблицами
Таблицы в HTML-документах являются основным инструментом верстки. Они позволяют размещать в своих ячейках текст и почти любой объект, от картинки до другой таблицы или даже ролика QuickTime. Как и большинство других объектов Adobe GoLive, таблица может быть расположена прямо в окне документа или в сетке раскладки для наибольшего контроля над ее позицией на странице.
Чтобы вставить таблицу, выполните команду меню Window | Objects (Окно | Объекты). В Objects Palette (Палитра объектов), щелкните по ярлыку Basic (Основные) —
Перетащите пиктограмму Table (Таблица) из Objects Palette (Палитра объектов) в окно документа или просто дважды щелкните мышью на эту пиктограмму. Теперь таблица уже появилась на разрабатываемой странице, осталось лишь задать ее свойства.
Чтобы изменить количество строк или колонок в таблице, вы можете произвести одно из следующих действий: введите нужное число строк в поле Row (Строки) или колонок в поле Columns (Колонки) палитры Inspector (Инспектор); удерживая <Shift>, щелкните мышью на ячейку, чтобы выделить ее, потом щелкните мышью на одну из следующих кнопок на панели Cell (Ячейка) палитры Inspector (Инспектор): кнопкаAdd Row (Добавить строку)—
Чтобы изменить размер таблицы, воспользуйтесь одним из перечисленных ниже вариантов действий:
Щелкните мышью вверху или на левой границе таблицы, чтобы выделить ее. В палитре Inspector (Инспектор) выберите единицы измерения из выпадающих списков для ширины и высоты, воспользовавшись полями Width (Ширина) и Height (Высота), соответственно, и введите необходимые размеры. Выберите команду Auto (Автоматически)» чтобы автоматически подкорректировать ширину и высоту к их оптимальному размеру. Щелкните мышью, удерживая одновременно клавишу <Alt> (в Windows) или <Control> (в Mac OS), по правому или нижнему краю таблицы. Затем можно будет изменить размеры таблицы просто перетаскивая мышью границы таблицы.Для изменения размера строки или колонки в таблице, вы можете пойти одним из следующих путей.
Щелкните мышью, удерживая одновременно кнопку <Alt> (в Windows) или <Control> (в Mac OS), по правому или нижнему краю ячейки в строке или колонке, размеры которой вы хотите изменить: Потом тяните в нужном направлении. Выделите ячейку в строке или колонке, размеры которой вы хотите изменить, двойным щелчком мышки, одновременно удерживая <Shift>.На вкладке Cell (Ячейка) палитры Inspector (Инспектор) выберите единицы измерения из выпадающего списка для ширины (поле Width (Ширина)) и высоты (поле Height (Высота)) и введите необходимый размер.
Для большей наглядности описанные действия проиллюстрированы на рис. 3.4
Рис. 3.4. Установка свойств ячеек в таблице
После того как вы определились с размерами таблицы, самое время настроить параметры отображения. Щелкните мышью на верхнем или левом краю таблицы, тем самым выделив ее. Затем введите нужную ширину в поле ввода Border (Граница) в палитре Inspector (Инспектор). Если вы устанавливаете ширину границы 0, то границы затемнены в режиме макета и не видны в браузере. Чтобы скрыть затемненные границы, которые появляются в режиме Layout (Макет), выполните команду меню Edit Hide Invisible Items (Правка | Скрыть невидимые элементы).
Чтобы изменить вертикальные и горизонтальные отступы содержимого ячеек таблицы от их границ, введите величину отступа в поле Cell Pad (Отступ ячейки).
Поле Сеll Space (Расстояние между ячейками) служит для определения расстояниея между ячейками таблицы.
На рис. 3.5 показаны различные примеры границ таблицы, пространства внутри ячеек и расстояние между ячейками.
Рис. 3.5. Установка размеров границ и отступов в таблице:
А — граница шириной в 10 пикселов;
В — отступ внутри ячеек в 2 пиксела;
С — расстояние между ячейками в 5 пикселов
Чтобы задать фоновый цвет для вcей таблицы, взведите флажок в независимом переключателе Color (Цвет), затем щелкните мышью внутри цветового поля, чтобы его выделить. При этом будет активирована палитра Colors (Цвета). Обратите внимание на то, что когда вы применяете фоновый цвет к таблице и просматриваете таблицу в режиме предварительного просмотра Adobe GoLive или в Netscape Navigator, то цвет появляется только в тех ячейках таблицы, которые содержат какие-либо данные. Для решения этой проблем» необходимо в каждую пустую ячейку таблицы вставить неразрывный пробел. Воспользуйтесь следующим приемом — щелкните мышью внутри ячейки и нажмите <Shift>+<Пробел> (в Windows) или <Орtions>+<Пробел> (в Mac OS).
Заголовок — важный элемент таблицы. Взведите флажок в независимом переключателе Caption (Заголовок) и в соответствующем поле ввода выберите место расположения заголовка относительно самой таблицы.
Применив графическое изображение в качестве фона таблицы, вы можете заметно улучшить ее внешний вид. Взведите флажок в независимом переключателе Bglmage (Фоновое изображение), потом выберите файл изображения, используя кнопку Fetch URL (Пойти за URL) или кнопку Browse (Просмотр).
Чтобы выровнять по горизонтали текст во всех ячейках строки, выделите сначала строку, а затем выберите необходимый пункт из выпадающего списка Horizontal Alignment (Горизонтальное выравнивание), расположенного: на вкладке Row (Строка). Выберите пункт Default (По умолчанию), чтобы выровнять по горизонтали текст в соответствии с настройками браузера. В Adobe GoLive выбор этой опции приводит к выравниванию текста по левой границе ячейки. Выравнивание содержимого ячеек и строк по вертикали осуществляется при помощи выпадающего списка Vertical Alignment (Вертикальное выравнивание). '
Для установки высоты строк» выберите единицу измерения высоты из выпадающего списка Height (Высота). Потом в поле ввода укажите предполагаемую высоту строки в пикселах или процентах. Выберите строку Avto (Автоматически) списка Height (Высота), чтобы браузер сам рассчитывал высоту строки таблицы в зависимостщот содержимого ее ячеек.
Чтобы установить фоновый цвет для всей строки, взведите флажок в независимом переключателе Colors (Цвета),затем щелкните мышью внутри цветового поля, чтобы его выделить можно будет выбрать необходимый фоновый цвет из палитры Colors (Цвета) .
Перейдем к свойствам отдельной ячейки: щелкните дважды мышью, удерживая <Shift> на ячейке, тем самым выделив ее.
Совет
Чтобы изменить параметры нескольких ячеек одновременно, выделите нужные ячейки, а затем перейдите на вкладку Ceil (Ячейка) Inspector Objects (Инспектор объектов). Чтобы выделить дополнительные ячейки, вы можете, удерживая <Shift>, щелкнуть мышью внутри каждой дополнительной ячейки.
Чтобы ячейки могли объединять в себе несколько соседних строк по вертикали, следует ввести нужное .число строк в поле Row Span (Объединение строк), как это показано на рис. 3.6.
Аналогично полю Row Span (Объединение строк) поле Column Span (Объединение колонок) служит для объединения в одной ячейке нескольких соседних колонок.
Чтобы явно задать высоту и ширину ячейки, выберите необходимую единицу измерения из выпадающего списка Height (Высота) и Width (Ширина), соответственно, и введите размеры в связанные с этими списками поля ввода. Выберите строку Avto (Автоматически), чтобы браузер пользователя сам устанавливал высоту и ширину.
Внимание
Когда вы корректируете высоту Или ширину ячейки, Adobe GoLive автоматически корректирует высоту и ширину строки и колонки, которые содержат ячейку.
Рис. 3.6. Ячейка, объединяющая три строки
Обычно ячейки верхней строки содержат заголовки столбцов, поэтому было бы неплохо использовать для них отдельное форматирование. Чтобы отформатировать ячейку как подзаголовок взведите флажок в независимом переключателе Header Style (Стиль заголовка).
По умолчанию, в случае когда текст в ячейке не умещается в одну строку, он разбивается на несколько строк. Но иногда возникает необходимость размещать текст в ячейке в его первозданном виде. Если такая необходимость возникла, следует взвести флажок в независимом переключателе No Text Wrap (He переносить текст).
Мы уже умеем устанавливать фоновое изображение для всей таблицы, но HTML позволяет задавать фон отдельно для каждой ячейки. Чтобы использовать фоновое изображение в ячейке, взведите флажок в независимом переключателе Bglmage (Фоновое изображение) вкладки Сеll (Ячейка). Выбор графического файла производится точно так же, как и в случае с установкой фонового изображения для всей таблицы.
Adobe GoLive позволяет вставлять текст в таблицы разными способами. Вы можете вставить текст путем прямого ввода в ячейку таблицы, копированием текста из другого документа, перемещением текста между ячейками путем перетаскивания и импортированием текста из текстовых файлов в таблицу.
Внимание
Перед импортом данных в таблицу, вы должны отформатировать текст в файле в таком виде, который будет принят Adobe GoLive. Для таблиц, состоящих из одной ячейки, текст можно просто отформатировать так, как вы хотите, чтобы текст отображался в таблице. Для таблиц с большим количеством ячеек вы должны так отформатировать данные, чтобы каждая строка представляла собой содержимое одной строки, а содержимое ячеек отделялось друг от друга символами-разделителями (табуляции, запятые, пробелы или точки с запятой).
Вы можете вложить таблицу путем помещения ее внутрь ячейки другой таблицы. Потом вы можете поместить еще одну таблицу в ячейку только что вложенной и так далее.
Чтобы создать выделенную область внутри вложенной таблицы, щелкните мышью внутри ячейки в пределах самой внутренней таблицы. Нажмите <Ctrl>+<Enter>, чтобы выделить ячейку. Повторите этот шаг, чтобы выделить всю самую внутреннюю таблицу. Продолжая нажимать ту же пару кнопок одновременно, вы добьетесь последовательного выделения ячеек, а затем целых таблиц содержащих в себе уже выделенные вами до этого ячейки и таблицы.
Пока ваше выделение в таблице состоит из одной ячейки или блока смежных ячеек, Adobe GoLive позволяет вырезать, копировать и вставлять их с помощью команд меню Edit (Правка). Вырезание помогает вам удалить одну или более ячеек из таблицы. Копирование и вставка выделенных вами фрагментов позволяет вам .перемещать содержимое подобных блоков ячеек в таблице, помещать выбранный вами фрагмент внутрь ячейки как вложенную таблицу и помещать выбранный, фрагмент как новую таблицу внутрь текстового поля.
Если вы копируете и вставляете дай того, чтобы переместить содержания сходных блоков, ваш выбор цеди при выделении должен соответствовать исходному выделению. Например, если вы копируете четыре ячейки в строке в качестве исходного фрагмента выделения, то вы можете переместить их только в такие же четыре ячейки.
Внимание
Вы можете вставлять выбранный фрагмент в качестве вложенной таблицы, только если он содержит более одной ячейки. Иначе, если вы выделили только одну ячейку, Adobe GoLive просто перенесет содержимое этой ячейки в ту ячейку, по которой вы щелкнете мышью.
Используя вкладку Select (Выделить) в палитре Table (Таблица), можно отсортировать содержимое таблицы. Сортировка применима как ко всей таблице, так и к отдельным строкам или к отдельным колонкам. Например, если вы сортируете порядок строк в таблице, и верхняя строка содержит заголовки колонок, вы можете применить сортировку всех строк в таблице кроме верхней строки.
Adobe GoLive сортирует данные прежде всего в числовом порядке и только потом уже — в алфавитном. По умолчанию происходит сортировка по возрастанию. Но если вы хотите, то можно задать, чтобы сортировка была сделана в порядке убывания.
Чтобы сортировать содержимое таблицы, щелкните мышью по верхней или левой границам таблицы, тем самым выделяя ее. Выполните команду меню Window | Table (Окно | Таблица) и в палитре Table (Таблица) выберите вкладку Select (Выбор).
Пометьте область таблицы, которую хотите сортировать, создайте выделенную область в таблице в пределах окна документа или панели Select В палитре Table (Таблица) выберите из выпадающего списка Sort (Сортировка) предполагаемый порядок сортировки. Выберите Rows (Строки), если вы хотите, чтобы содержимое одной или более колонок было отсортировано. Выберите Cols (Колонки), если вы хотите, чтобы сортировалось содержимое строк.
По умолчанию, первая колонка имя строка, которую вы выбираете, сортируется в восходящем порядке, как отмечено кнопкой возрастающего порядка —
После проведения всех этих довольно однообразных, но, несомненно, необходимых операций по сортировке, нажмите кнопку Sort (Сортировать), чтобы отсортировать таблицу, исполцуя те критерии, которые вы указали.
Adobe GoLive также включает в себя набор предопределенных стилей таблиц, которые вы можете применять дл| быстрого форматирования своей таблицы. Вы можете предварительно просмотреть варианты стилей на вкладке Styles (Стили) палитры Table (Таблица). Если палитра Table (Таблица) не отображена в текущий момент на экране, следует выполнить команду меню Window | ТаЫе (Окно | Таблица).
Чтобы применить предопределенные стили к таблице выделите всю таблицу, как обьгано щелкнув мышью на ее верхнюю или левую границу, а затем перейдите на, вкладку Style (Стиль) в палитре Table (Таблица) — рис. 3.7.
Выберите предопределенный стиль из выпадающего списка в верхнем левом углу панели Style (Стиль). Предварительный просмотр выбранного стиля отображается на рабочей панели. Синие скобки показывают, какие строки и колонки содержат стили, которые будут повторены по всей таблице. Например, если синие скобки отмечают вторую и третью строки, стиль первой строки Применим только к первой строке, в то время как стили второй и третьей строк повторяются для всех других строк в таблице.
Чтобы отменить выделенный фрагмент стилей таблицы, щелкните мышью на треугольник в верхнем правом углу меню палитры Table (Таблица) и выберите команду Undo Select TabteStyle (Отменить выделенный стиль таблицы).
Внимание
В зависимости от конкретного стиля вы можете быть не в состоянии изменить строки или колонки содержащие стили, повторенные по всей таблице. Например, если стиль всех, колонок одинаков и синие скобки отмечают вторую колонку, то вы не сможете изменить размер скобок, чтобы модифицировать стиль.
После того, как необходимый стиль выбран, нажмите кнопку Apply (Применить), чтобы применить стиль к своей таблице.
Рис. 3.7. Установка стиля таблицы
Чтобы удалить существующий стиль из таблицы, выделите всю таблицу целиком и на вкладке Style (Стиль) нажмите кнопку Remove (Удалить). Впрочем, имеется возможность к коллекции предустановленных стилей добавить и свои варианты стилевого оформления. Для этого нажмите кнопку New (Новый), чтобы создать новый стиль таблицы. В текстовом поле над кнопкой New (Новый) введите имя для нового стиля таблицы. Нажмите кнопку Capture (Зафиксировать), чтобы захватить стиль выделенной таблицы в окне документа и сохранить его как новый стиль таблицы. Теперь этот стиль добавится к списку предопределенных стилей, и вы сможете применять его к другим таблицам.
Конечно, стили можно не только добавлять, но и удалять. Для этого необходимый стиль надо просто выбрать из выпадающего списка-в левом верхнем углу вкладки Style (Стиль), а затем нажать кнопку Delete (Удалить).
Редактирование HTML-кода
В режиме Source (Исходный код) вы можете просматривать HTML-код своего документа, проверять синтаксис HTML, исправлять ваш код или даже строить Web-страницы с самого начала, используя только HTML. Если вы уже закаленный программист HTML с хорошими профессиональными, навыками в области этого языка и использовали ориентированные на текст редакторы HTML, режим Source (Исходный код) будет для вас очень полезен. Работа в режиме исходного кода подобна работе в текстовом редакторе HTML. Вы можете создавать новый документ и открывать уже существующие в Adobe GoLive, HTML или текстовые документы. Вы можете печатать или вставлять текст из других документов, а также производить и сохранять изменения.
Во время работы в режиме Source (Исходный код), вы можете отбуксировывать пиктограммы HTML-элементов из Objects Palette (Палитра объектов) в текст вашего HTML-кода и использовать их как редактируемые теговые шаблоны. После того как вы вставали элемент, вы можете редактировать его атрибуты и значения атрибутов, в то время как в окне будут отображаться вводимые данные и основные ошибки.
Возможно также перетащить даже цвет из области окна предварительного просмотра палитры цветов и опустить его на выбранном теге в вашем HTML-коде. При этом искомый тег получит параметр цветового оформления с правильным указанием цвета.
Точно также можно перетягивать страницы или URL из окна сайта, чтобы создать ссылку.
В режиме Source (Исходный код) можно и нужно применять базовые команды для форматирования текста из меню Туре (Тип) к выделенному тексту на вашей странице. Чтобы отформатировать текст, в режиме Source (Исходный код) —
Есть несколько кнопок, которые отвечают за выделение синтаксиса и перенос текста. Возможно, вы уже видели их, путешествуя по рабочему окну. Давайте познакомимся с ними поближе.
КнопкаColorize Nothing (Выключение выделения синтаксиса) —
В режиме исходного кода вы можете убедиться, что ваши Web-страницы содержат верный HTML-код. Встроенная проверка синтаксиса делает грамматический разбор вашего HTML-кода сообразно стандарту HTML и высвечивает предполагаемые ошибочные элементы.
Если вы выбираете специфический HTML-код и начинаете проверку синтаксиса, вы можете отметить, какие теги и атрибуты не поддерживаются установками браузера или специфичны для Adobe GoLive. Когда вы выбираете установку браузера из меню согласования браузеров, лист несогласованности появляется в поле ошибок, выделяя потенциальные проблемы.
Нажатием кнопки Start Check Syntax (Проверка синтаксиса) —
После правки кода еще раз нажмите на кнопку Check Syntax (Проверить синтаксис), чтобы удостовериться, что ни одной ошибки на вашей странице не осталось.
Adobe GoLive позволяет вам обрабатывать HTML-код, который вы ввели сами, переформатируя его автоматически с абзацами и переносами строк, изменением положения тегов и атрибутов, и расставляя кавычки для значений атрибутов в соответствии с установками Web (о том, какую роль в Adobe GoLive играют "установки Web" будет рассказано немного позже).
Чтобы обработать HTML-код, переключитесь в режим Layout (Макет) и выполните команду меню Edit | Rewrite Source Code (Редактирование | Перепиcать исходный код). .
Режим Source (Исходный код) обладает рядом свойств, которые влияют на проведение проверки HTML-кода, методы работы с ним и его внешний вид в окне редактора.
Доступ к основным свойствам режима Source (Исходный код) можно получить из меню Edit| Preferences (Правка) Свойства), открыв вкладку Source (Исходный код).
Установки, доступные на данной вкладке, включают и выключают поддержку drag and drop (режима перетаскивания объектов мышью) и контролируют, каким образом HTML-код появляется в Окне исходного кода. Панель предварительного просмотра в диалоговом окне показывает вам, как будет выглядеть текст с установками, которые, вы выбрали. ;
Помимо вкладки основных свойств существуют еще ряд вкладок, предоставляющих доступ к свойствам режима редактирования исходного кода. Browser Sets (Установки браузера) позволяют вам комбинировать браузеры и пересмотры спецификаций HTML в комплексных установках правил синтаксиса HTML. Установки, которые вы объединяете здесь, появляются в окне совместимости браузеров в режиме Source. Основанные на описаниях тегов в установках Web Adobe GoLive, эти свойства инструктируют встроенную проверку синтаксиса, указывают, какие правила ей использовать при проверке синтаксиса вашего исходного кода. Colors (Цвета) позволяют вам включать и выключать подсвечивание синтаксиса и контролировать, как отдельные тега HTML и вложенный в них текст отображены в режиме редактирования исходного кода, когда пользователь активирует подсветку синтаксиса.
Чтобы установить правила подсветки синтаксиса, выполните команду меню Edit| Preferences (Правка | Свойства) и щелкните мышью по пиктограмме Source (Исходный код). Затем следует выбрать пункт Colors (Цвета). Если, например, вы не хотите использовать подсветку синтаксиса, активируйте пункт None (He подсвечивать) в группе переключателей Code Coloring (Подсветка кода). Если же вы хотите, чтобы синтаксис все-таки выделялся редактором, используйте любой другой переключатель из этой группы, в зависимости от того, какую именно часть кода необходимо выделять цветом.
Adobe GoLive позволяет вам работать как в режиме макета, так и в режиме редактирования исходного кода одновременно. Чтобы осуществить это, находясь в режиме макета, откройте окно исходного кода, выполнив команду меню Window | Source Code (Окно | Исходный код). Изменения, которые вы делаете в окне документа в режиме макета, немедленно отображаются в окне исходного кода и наоборот.
Выпадающее меню окна. исходного кода предоставляет самые различные возможности.
Внимание
Окно исходного кода отображает лежаиций в основе вашего документа HTML-код только тогда, когда режим макета окна документа активен.
Для редактирования HTML-кода, помимо выше изложенных способов, вы можете воспользоваться вкладкой Outline Editor (Редактор эскиза). Он отображает элементы HTML-кода в иерархическом структурированном виде. Используя этот режим, вы можете генерировать чистый, правильный HTML не набирая ни единого элемента кода. Вы выбираете теги и атрибуты из меню или панели инструментов, перетягиваете объекты из палитры и используете кнопку Fetch URL (Пойти за URL), чтобы соединять страницы и графику. Вы можете построить Web-страницы с самого начала, улучшить ваш код и даже установить новые теги и атрибуты.
На рис. 3.8 изображены элементы окна в режиме Outline Editor (Редактор эскиза).
Режим Outline Editor (Редактор эскиза) имеет свою панель инструментов. Используйте ее для вставки и редактирования HTML-элементов.
Рис. 3.8. Режим Outline Editor
Вы можете перетаскивать наиболее часто используемые элементы HTML из Objects Palette (Палитра объектов) и помещать их где-нибудь в окне Outline Editor (Редактор, эскиза), как вы бы сделали в режиме макета. После вставки элемента вы можете редактировать его атрибуты.
Совет
Эскиз, доступный в режиме Outline Editor (Редактор эскиза), содержит все составляющие элементы страницы HTML. Вы можете использовать эту структуру как шаблон и наполнять его своим содержанием.
В режиме Outline Editor (Редактор эскиза) отступы отмечают позицию объекта в пределах иерархии HTML. Элементы <head> и <body> тоже сдвинуты, чтобы показать, что они содержатся в элементе HTML. Элемент <head> в свою очередь содержит элемент <titie> с текстовым полем.
Начальные и конечные тегИ соединены вертикальными линиями, чтобы показать, что они являются дополняющими друг друга объектами.
Outline Editor (Редактор эскиза) предлагает обширные возможности по редактированию кода и навигации в его пределах.
Внимание
Adobe GoLive не проверяет ошибки в синтаксисе Palette, которые вы можете ввести во время работы в режиме Outline Editor (Редактор эскиза). Для поиска ошибок вам необходимо переключиться в режим редактирования исходного кода.
Вы можете использовать панель инструментов режима Outline Editor (Редактор эскиза) для вставки текстовых полей, для ввода содержимого или комментариев на вашей Web-странице. Текст, введенный в поле комментариев HTML, не появляется на вашей Web-странице во время просмотра в окне браузера.
Чтобы вставить текстовое поле или поле комментария, в режиме Outline Editor (Редактор эскизов) выдадите элемент HTML и потом произведите одно из следующий действий:
Комментарии появляются затемненными э режиме редактора эскиза, чтобы напомнить вам, что они не будут отображаться на вашей Web-странице, но остаются выбираемыми и редактируемыми.
Вы можете вставлять и редактировать атрибуты тегов, используя панель инструментов режима редактора эскиза. Атрибуты, как мы знаем, задают дополнительные свойства тегов. Чтобы вставить новый атрибут тега, выберите тег, куда вы хотите вставить атрибут и нажмите кнопку New Attribute (Новый атрибут) на панели инструментов. Бланк атрибута появляется под другими атрибутами тега. Осталось только ввести имя атрибута в текстовом поле и нажать клавишу <Enter>.
Внимание
Если вы не уверены, является ли атрибут правильным, вы можете проконсультироваться по этому поводу у консорциума W3C на его сайте www.W3C.org.
Чтобы переключить формат отображения тегов, выберите парный тег в окне документа в режиме эскиза. Нажмите кнопку Toggle Binary (Переключиться на парный) на панели инструментов. По умолчанию отображаются обе части парных тегов. Эта команда меняет отображение только выделенного тега.
HTML — язык, постоянно расширяющийся, и новые тега создаются часто. Чтобы гарантировать, что ваши Web-страницы всегда используют последние технологии, Adobe GoLive предоставляет вам возможность ввести имена новых тегов и отредактировать их атрибуты. Это можно сделать, в режиме макета перетянув пиктограмму Tag (Тег) —
Текстовые макросы помогут экономить время, если вы часто используете редакторы HTML, JavaScript и WebObjects, встроенные в Adobe GoLive. Четыре текстовых макроса содержатся в четырех разрешающих редактирование, файлах. Один файл содержит пользовательскую комбинацию тегов, три других являются специфическими для сред. Файл AdobeVGoLive 6.QJBNG\Setthig\Text Macros\All\Default.macro может содержать любую комбинацию тегов HTML, строк JavaScript и кодовых отрезков WebObjects. Эти объекты могут быть вставлены в любое из редактируемых окон Adobe GoLive. Файл Adobe\Golive 6.0_ENG\Setting\Text Macros\SS\Souree.macro может содержать текст так же, как теги HTML. Эти макросы могут быть вставлены в исходный код HTML, отображенный в режиме редактирования исходного кода. Файл Adobe\GoLive 6.0_ENG\Setting\Text Macros\JavaScript\Source.macro содержит заготовленные заранее строки кода JavaScript. Эти теги могут быть вставлены в исходный код JavaScript, отображаемый в редакторе JavaScript. Файл AdobeXGoLive 6.0_EN0\Setting\Text МаетовХАЩршее.тасго содержит отрезки кода WebObjects. Эти отрезки- кода могут быть вставлены в исходный код WebObjects, отображаемый редактором объявления WebObjects.
Все файлы макросов загружаются ори запуске Adobe GoLive, однако, файлы из каталогов SS, JavaScript и Аll загружаются, только если подходящие программные модули подключены в окне Modules Manager (Управление модулями), подробно описанной в разд. "Настройки" главы Adobe GoLive 6 перед вами: как на заблудиться.
Чтобы вставить автоматизированный исходный код. Введите имя макроса и нажмите <Shffi>+<Ctrl>+<M> (в Windows) или <Command>+<M> (в Мае OS). Эта комбинация клавиш вставит в то место, где находится курсор, содержимое соответствующего макроса.
Текстовые макросы нечувствительны к регистру букв, а это значит, что вы можете при вводе их имен путать буквы верхнего или нижнего регистра.
Вы можете изменять текстовые макросы. Для этого следует сначала открыть нужный исходный файл с помощью Adobe GoLive или текстового редактора, а потом редактировать его содержимое. Текстовые макроопределения должны иметь следующий базовый формат
ИмяМакроса [Разграничитель] СoдержаниеМакроса[Разграничитель]
Первый элемент в макроопределении — это имя макроса, которое вы вводите в соответственном редакторе, прежде чем нажать <Shift>+<Ctrl>+<M> (в Windows) или <Command>+<M> (в Mac OS). За исключением пробелов и позиций табуляции, вы можете использовать любую комбинацию знаков для имени макроса, но должны ограничиться использованием букв и цифр.
Отделенный знаком пробела, второй элемент определяет содержание макроса, т.е. текст, который собственно будет вставлен. Элемент содержания должен быть заключен в два идентичных разграничительных знака. Когда вы заставляете Adobe GoLive вставить текстовый макрос, интерпретатор макросов будет рассматривать первый знак после пробела как разграничитель и искать второй подобный знак, чтобы определить, где кончается содержание макроса.
Например, макрос тега изображения с основными атрибутами мог бы выглядеть так:
image §<img "зге-../GIFS/???.GIF" width="20" height-"20">§
Вы можете также использовать текстовые макросы, чтобы вставлять строки форматированного текста. Например:
Webdesign SThis Web Site was designed using <B>Adobe GoLive.<B>§
Уже было отмечено, что разграничители сообщают интерпретатору текстовых макросов Adobe GoLive, где начинается и заканчивается содержимое. Можно использовать любой знак в качестве разграничителя, руководствуясь только одним правилом: разграничитель (т. е. тот знак, который его представляет в данном макросе) не может встречаться в содержимом макроса. Возможно использовать даже пробелы и символы возврата каретки, чтобы вставить структурированный текст и многострочный код, соответственно.
Вот пример неправильного использования разграничителей:
image H<img "arc-../GIFS/???.GIF" width="2b" height«=n20">"
Как вы видите, значки (двойные кавычки), являющиеся разделителями, содержатся также в тексте макроса. Таким образом, главное и единственное правило использования разграничителей не выполнено. Это определение макроса не произведет полезного результата. Так что Adobe GoLive вставит только текст перед вторыми двойными кавычками. Результат будет таков:
image "<img
Внимание
В качестве общего правила можно вывести следующее: вам следует избегать использования знаков, которые обычно употребляется в качестве структурных элементов в пределах синтаксиса исходного кода. Например, знаки "больше чем" (>) и "меньше чем" (<) заключают теги HTML.
Обычно во время вставки текстового макроса, текстовый макроинструмент Adobe GoLive выделяет целую вставку. Однако чтобы обеспечить наибольшую гладкость процесса работы, вы можете также помещать место добавления или выделять текст для перепечатывания в любом месте вставки. Еще одно удобство работы с макросами заключается в том, что существует возможность указать Adobe GoLive .так называемые1 "места добавления" и "места перепечатывания".
Помещение "места добавления1' в макрос совершается путем вставки значка "вертикальная черта" (|). Например:
Image /<img "arc- I" width="20," height="2Q">"/ .
Вертикальная черта после атрибута БГС и знака равенства помещает место вставки так, что вы можете ввести значение атрибута без необходимости двигать курсор к нужному месту.
Выделение текста для перепечатывания совершается с применением одинарных кавычек. Например:
Image §<img ",src-. ./GIFS/ .'???'.GIF " width="20" height=*"20">"§
Три знака вопроса, заключенные в кавычки будут выделены, когда вы вставите этот макрос.
Чтобы сократить общую наборную работу и сделать ваши файлы макросов более легкими для поддержания, текстовый макро инструмент Adobe GoLive позволяет вам ссылаться на другие макросы изнутри макросов.
Чтобы вызвать другой макрос изнутри макроса, вам нужно заключить имя этого макроса в знаки доллара ($). Следующий пример показывает правильный синтаксис.
Meta-author /<META NAME-"author" CONTENT="$author$"/
Макрос№ 2.
Author "John Smith"
При вставке макроса meta-author Adobe GoLive будет автоматически искать второй макрос с именем author и вставлять его содержимое в определенное заранее место первого макроса, так что в результате получится:
МЕТА NAME="author" CONTENT-"John Smith"
Бели вызываемый макрос содержит ссылку на вызвавший его макрос, возникнет феномен так называемой "циклической ссылки". Как поведет себя Adobe GoLive, столкнувшись с такой ситуацией? Оказывается вот как. Встретив ссылку на макрос, уже встречавшийся ранее, Adobe GoLive разорвет цепочку вставки, подставив в место содержимого последнего макроса его имя. Вот простой пример:
maerosa "A to $macrosb$" macrosb "В to $macrosc$" macrosc "С to $macrosa$"
В результате вызова макроса macrosa в исходный текст будет добавлена следующая строка:
A to В to С to macrosa
Как видно из примера, Adobe GoLive игнорирует циклическую ссылку назад к макросу macrosa и вставляют вместо этого наименование макроса.
Как уже было отмечено, вы можете использовать три контрольных знака, чтобы отметить, что происходит, когда текстовый макрос вставлен:
Но может возникнуть ситуация, когда потребуется создать макрос, содержащий в себе один из этих символов. Например, синтаксис JavaScript требует, чтобы текстовые строки были заключены в одиночные кавычки. Этот конфликт решается путем замени знаков кавычек знаками процента (%) (или любыми другими подходящими знаками). Текстовый макрос инструмент Adobe GoLive имеет три встроенных ключевых слова, которые позволяют вам переименовывать контрольные знаки.
Selection (выделение) дает вам возможность переименовать маркеры выделения, если одинарные кавычки не позволены. Например:
Selection = %
Macros /Write.document.write('%what%')/
В данном примере символ (%) играет роль маркера выделения.
Сaret (знак вставки) позволяет вам переименовать маркер места вставки, если вертикальная черта не позволена, например, потому, что она используется для выражения поразрядной операции логического сложения или (OR) в JavaScript
Caret =»%
Macro (макрос) позволяет вам переименовать знаки долларов заключающие между собой имя макроса.
Macro = %
Adobe GoLive позволяет вам сохранять части вашей Web-страницы как фрагменты HTML, т. е. куски уже готового HTML-кода, которые не закреплены в структуре страницы. Фрагменты HTML могут быть использованы в построении динамических страниц с использованием WebObjects.
Вы можете также сохранять части вашей Web-страницы как отрезки кода в окне сайта или как компоненты, которые могут быть вновь использованы и динамически обновлены в соответствии с новыми данными в Adobe GoLive.
Чтобы создать фрагмент HTML, выполните команду меню File INew (Файл | Новый) для создания нового документа. Затем вставьте в него часть вашей Web-страницы, которую вы хотите сохранить как фрагмент HTML. Щелкните на пиктограмму страницы
Adobe GoLive стирает из исходного кода теги <htmi>, <head>, <titie> (если они пустые) и <body>, оставляя все другие теги и атрибуты в пределах тега <body> нетронутыми.
Теперь у вас есть готовый фрагмент чистого HTML-кода, который можно безболезненно вставлять в другие разрабатываемые Web-страницы.
