Инструменты Form Box

Создание форм с помощью QuarkXPress является достаточно простой задачей. Однако обеспечить корректную работу этих форм при обращении к Web-серверу гораздо более сложно, поскольку при этом приходится создавать непростые сценарии, используя специальные языки программирования.
Несмотря на то, что большинство форм содержит комбинацию кнопок, полей со списками и полей для ввода, сама форма располагается в прямоугольном блоке, называемом блоком формы. Она создается с помощью инструментов Form Box (Блок формы), расположенных прямо под инструментами Image Map (Карта изображения) на палитре Web Tools (Web-инструменты). Первым из этих инструментов является Form Box (Блок формы). Другой инструмент из раскрывающегося списка Form Box (Блок формы) называется File Selection (Выбор файла).

QuarkXPress 6 позволяет изменять содержимое существующего блока — задайте для него тип Fоrm (Форма). Благодаря этому создание форм значительно упрощается.

Инструмент Form Box

Создание формы подобно созданию любого другого блока в QuarkXPress. Для этого достаточно выполнить следующие действия.
1. На палитре Web Tools (Web-инструменты) выберите инструмент Form Box (Блок формы).
2. Поместите указатель мыши в ту область, в которую следует разместить форму.
3. Щелкните кнопкой мыши. Затем перемешайте указатель до тех пор, пока не выделите соответствующую область формы.
Блок формы подобен только что созданному текстовому блоку. Исключение составляет визуальный индикатор в правом верхнем углу в виде узнаваемого значка (рис. 18.9).

Рис. 18.9. Блок формы, добавленный в Web-макет

4. Выберите команду Item^Modify (ЭлементФИзменить) или нажмите комбинацию клавиш <Ctrl+M> (<
5. Перейдите на вкладку Form (Форма) и в поле Name (Имя) задайте название блока формы.
6. Теперь в раскрывающемся списке Method (Метод) выберите способ передачи данных формы. Вам будут предложены такие варианты (Web-мастер подскажет наиболее удачный в каждом случае).

• Get. Это значение сообщает Web-броузеру, что данные из пользовательской формы следует присоединить в конец URL-адреса конечного сценария или приложения.
• Post. Это значение сообщает Web-броузеру, что данные из пользовательской формы необходимо отправлять в сценарий или приложение отдельной транзакцией. Если из меню Method (Метод) выбрать Post, то из раскрывающегося списка Encoding (Кодировка) для данных формы потребуется задать тип MIME. Подходящим вариантом может оказаться значение urlencoded, form-data и plain. Посоветуйтесь с Web-мастером вашей компании при выборе типа данных. (Получателя определите на вкладке StreetPost диалогового окна Preferences (Установки), которое открывается с помощью команды Edit<=>Preference (GuarkXPress^Preferences) или комбинации клавиш <Ctrl+Alt+Shift+Y> (<Option+Shift+
• Action. В поле указывается сценарий с информацией о реакции (действии) страницы на получение информации, подтвержденной пользователем. Сценарий обычно пишется на таком языке, как Java, Perl или С, и соответствует протоколу Common Gateway Interface (CGI).

Дополнительные параметры инструмента Form Box

Вам также необходимо задать другие параметры в диалоговом окне Modify (Изменить), в том числе и параметры, которые отвечают за выполнение определенных действий после введения тех или иных сведений пользователем. Также следует определить сценарий, который будет использоваться для обработки введенных сведений.
За исключением, вероятно, первых нескольких полей, остальные параметры на вкладке Form, без сомнений, вызывают трудности. Не волнуйтесь. Этот набор параметров не пугает только опытного Web-дизайнера. QuarkXPress самостоятельно создает все составляющие формы. Программа поможет вам в создании формы, постоянно предлагая подсказки, с помощью которых можно быстро добиться намеченного результата. Единственное, что вы должны определить сами — это информацию, вводимую в поля. Если между формой и пользователем возникает интерактивная связь, то без отправки команд на сервер, на котором хранится Web-страница, не обойтись. Команды зависят от вводимых в поля значений, т.е. от требований конечных пользователей. Сервер обрабатывает информацию с помощью CGI-протокола.
Итак, значит ли это, что придется изучить Java только для того, чтобы заставить эту простую небольшую форму работать? Вовсе нет. С другой стороны, если попутешествовать по Web, то можно найти достойные учебники по написанию сценариев CGI. В таких учебных пособиях вы найдете сценарии, которые можно скопировать и вставить или загрузить в компьютер, а затем использовать в QuarkXPress.
Блок формы также можно создать автоматически, нарисовав элемент управления формы (кнопку, меню и т.п.) в пустой области Web-документа. QuarkXPress автоматически создает блоки формы вокруг выбранного элемента управления формы в соответствии с заданными настройками инструмента Form Box в диалоговом окне Preferences (Установки) (команда Edit^ Preferences (QuarkXPress1^ Preferences) или комбинация клавиш <Ctrl+Alt+Shift+Y> (<Option+Shift+

Инструмент File Selection

С помощью инструмента File Selection (Выбор файла) вы создадите поле формы, которое позволяет загружать файлы с локального компьютера на удаленный сервер. Когда пользователь щелкает на кнопке Browse (Обзор), в Web-броузере появляется диалоговое окно Open File (Открытие файла), в котором можно выбрать файл для загрузки. Указав файл, щелкните на кнопке Submit (Отправить). В результате он будет отправлен на удаленный сервер.
Чтобы создать элемент управления отправки файла, выполните следующие действия.

1. На палитре Web Tools (Web-инструменты) выберите инструмент File Selection (Выбор файла).
2. Поместите указатель внутри блока формы. Щелкните и нарисуйте элемент управления для отправки, как в обычном текстовом блоке.
3. Выберите команду ltem<=>Modify (Элемент^Изменить) или нажмите комбинацию клавиш <Ctrl+M> (<
На экране вы увидите диалоговое окно Modify (Изменить).
4. В поле Name (Имя) на вкладке Form (Форма) укажите название элемента управления отправки файла.
5. Чтобы усовершенствовать элемент управления значением MIME, укажите приемлемые типы MIME в текстовом поле Accept (Принять).
Если вы не уверены в своих действиях, обратитесь к администратору Web-сервера.
6. Установите флажок Required (Обязательный).
При этом присоединенный файл загрузится с данными формы.
7. Щелкните на кнопке ОК.

Инструмент Text Field

С помощью инструмента Text Field (Текстовое поле) создаются поля, в которые пользователь может вводить текст. В Web текстовые поля часто называются Name (Имя), Address (Адрес), City (Город) и т.п. Пароли тоже вводятся в текстовые поля; для этой цели QuarkXPress предоставляет пользователям возможность вводить текст, который отображается на экране набором звездочек или маркеров в зависимости от броузера. Скрытые поля обрабатывают текст, но не отображают результат пользователю; он предназначен только для разработчика.
Чтобы в форму добавить текстовое поле, выполните следующие действия.

1. На палитре Web Tools (Web-инструменты) выберите инструмент Text Field.
2. Поместите указатель внутри блока формы, затем щелкните кнопкой мыши и, не отпуская, перетащите указатель по форме, пока текстовое поле не достигнет необходимого размера.
В блоке формы текстовое поле должно помещаться полностью.
3. Выберите команду item^Modify (Элемент=>Измепить) или нажмите комбинацию клавиш <Ctrl+M> (<
На экране появится диалоговое окно Modify (Изменить).
4. Перейдите на вкладку Form (Форма).
5. В поле Name (Имя) задайте имя, описывающее назначение поля. Например, если это поле адреса, введите, скажем, Address или addr.
6. В раскрывающемся списке Туре (Тип) выберите один из следующих элементов.

• Text — Single Line (Текст — одна строка). Эта команда позволяет пользователю ввести только одну строку текста (например, имя или адрес).
• Text— Mufti Line (Текст— несколько строк). При использовании этой команды пользователь может ввести несколько строк текста. Такие типы полей обычно предназначены для дополнительных комментариев в поздравительных открытках.
• Password (Пароль). Этот элемент отображает текст в виде звездочек или маркеров, о чем рассказывалось выше.
• Hidden Field (Скрытое поле). С помощью этого элемента данные сохраняются в форме, но они не отображаются в Web-броузере. Такие поля используются для подсчета посетителей, отправивших информацию (например, о типе броузера, с которым они работают). При этом пользовательское окно не отображается.

7. На вкладке Form (Форма) вы найдете следующие параметры.

• Max Charts (Максимальное количество символов). Задайте число в поле Мах Chars (Максимальное количество символов), чтобы определить максимальное количество символов для элемента управления.
• Обратите внимание, что число не обязательно должно соответствовать длине поля — в поле из 25 символов можно ввести 40 символов. Однако помните, что пользователи могут допустить ошибку, и текст начнет выходить за диапазон символов, допустимый для поля.
• Wrap Text (Разбиение текста). Установите этот флажок, чтобы разбивать строки при вводе текста в текстовый блок на несколько строк. В противном случае набираемый текст будет выходить за пределы поля и при большом объеме текста окажется за областью видимости.
• Read Only (Только чтение). Чтобы не разрешить пользователям редактировать содержимое поля, установите флажок Read Only (Только чтение). Этот элемент можно использовать для автоматического заполнения поля (например, URL или информацией, генерируемой сценарием в ответ на то или иное действие пользователя).
• Requered (Обязательное). Чтобы пользователь обязательно заполнил это поле, установите флажок Requered (Обязательное). Если пользователь не вводит информацию в обязательное поле, броузер отображает сообщение об ошибке, заданное для текстового блока на вкладке Form диалогового окна Modify (Изменить).

8. Щелкните на кнопке ОК.

Помните, что созданные поля не должны накладываться ни при каких обстоятельствах. На поля могут накладываться только скрытые поля, но они используются достаточно редко.

Инструмент Button

Инструмент Button (Кнопка) позволяет создавать два типа кнопок.

• Submit. Кнопка Submit (Отправить) используется для отправки на удаленный сервер информации, введенной пользователем на Web-странице.
• Reset. Кнопка Reset (Сброс) просто отменяет выполненное действие: щелчок на этой кнопке приводит к удалению всей информации.
  создать кнопку Submit или Reset, выполните следующие действия.
• 1. На палитре Web Tools (Web-инструменты) выберите инструмент Button.
• 2. Поместите указатель внутри блока формы, затем щелкните и потащите его, чтобы нарисовать кнопку.
• 3. Выберите команду Item>Modify (Элемент1^Изменить) или нажмите комбинацию клавиш <Ctrl+M> (<
• 4. На вкладке Form (Форма) в текстовом поле Name (Имя) введите название кнопки.
  Если необходимо добавить к кнопке текст, выберите инструмент Content (Содержимое), после чего введите текст, который должен отображаться на кнопке.
  5. Из раскрывающегося списка Туре (Тип) выберите значение Submit (Отправить) или Reset (Сброс).
  6. Щелкните на кнопке ОК.

Рис. 18.10. Мы добавили к Web-макету текстовое поле и кнопку Submit

Инструмент Image Button

В QuarkXPress 6 на кнопках можно размещать не только текст, но и изображения.

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

1. На палитре Web Tools (Web-инструменты) выберите инструмент Image Button (Кнопка с изображением).
2. Поместите указатель в той части блока формы, в которой следует разместить кнопку с изображением. Затем щелкните и перемещайте указатель до тех пор, пока изображение не достигнет желаемого размера.
3. Откройте диалоговое окно Get Picture (Получить рисунок) (команда File^Get Picture (Файл^Получить рисунок) или комбинация клавиш <Ctrl+E> (<3€+Е>)).
На экране появится диалоговое окно Get Picture (Получить рисунок).
4. Выберите файл изображения, который будет использован в качестве кнопки, после чего щелкните на кнопке ОК.
5. Выберите команду Item^Modify (ЭлементОИзменить) или нажмите комбинацию клавиш <Ctrl+M> (<3§+M>).
На экране вы увидите диалоговое окно Modify (Изменить).
6. В поле Name (Имя) на вкладке Form (Форма) задайте название кнопки.
7. Перейдите на вкладку Export (Экспорт) диалогового окна Modify (Изменить).
8. На вкладке Export (Экспорт) из раскрывающегося списка Export As (Экспортировать в формате) выберите графический формат.

В результате на вкладке будут отображены те или иные параметры, в зависимости от выбранного графического формата. Вы можете остановиться на одном из трех вариантов.

• JPEG. При выборе формата JPEG предлагается ввести описание изображения в поле Alternate Text (Альтернативный текст). Если рисунок по каким-либо причинам не отображается в броузере пользователя (обычно недостаточно памяти), то вместо, рисунка появится введенный в поле текст. Затем из раскрывающегося списка Image Quality (Качество изображения) выберите параметр-— от Lowest (Самое низкое) (низкое разрешение, но быстрая загрузка) до Highest (Самое высокое) (высокое разрешение, но медленная загрузка). И наконец, установите флажок Progressive, чтобы страница отображалась как последовательно загружаемое JPEG-изображение. Этот параметр следует активизировать только при работе с очень большими файлами. Последовательно отображаемый JPEG-файл будет представлен на экране построчно, а не сразу. Если этот параметр не активизирован, то большие изображения могут ввести в заблуждение пользователя, поскольку на загрузку подобного рисунка может понадобиться несколько секунд, а иногда даже минут.
• GIF. Выбрав формат GIF, в поле Alternate Text (Альтернативный текст) снова предлагается ввести описание изображения. Установите флажок Use Dithering (Использовать сглаживание), чтобы представить изображение несколько размытым. Также установите флажок Use Interlacing (Чересстрочное отображение), чтобы задать чересстрочное отображение рисунка. В последнюю очередь выберите палитру цветов из раскрывающегося списка Color Palette (Палитра цветов). Лучше всего выбрать цвета, безопасные в Web. Тогда цвета рисунка одинаково будут отображаться в различных платформах. Но можно задать палитру Windows, Adaptive (рисунок отображается в соответствии с цветами, доступными на данном мониторе) или Mac OS. GIF является наилучшим форматом для большинства кнопок, поскольку предназначен для небольших рисунков, которые быстро загружаются на экране.
• PNG. Формат Portable Network Graphics (PNG) — это новый формат, который поддерживается только новыми версиями броузеров. Параметры для формата PNG будут такими же, как и для GIF, кроме одного дополнительного. На вкладке для экспортирования PNG-графики выбрать значение True Color (Истинный цвет) или Indexed Color (Индексированный цвет). При выборе значения True Color (Истинный цвет) отобразится максимальное количество цветов, поддерживаемое данным монитором. Индексированные цвета позволяют применять размытие изображения или определять чересстрочную загрузку. Для этого установите флажок Use Interlacing (Чересстрочное отображение) или Use Dithering (Использовать сглаживание).

9. Щелкните на кнопке ОК.

Если сценарии CGI привязаны к блоку формы, то изображение можно использовать в качестве кнопки для отправки информации, как любую другую кнопку.

Инструменты Pop-Up Menu и List Box

В QuarkXPress 6 зачастую создают два типа списков, из которых можно выбрать один или несколько возможных вариантов.
Раскрывающийся список позволяет выбирать только один элемент из списка.
В поле со списком (который выглядит как текстовая область с многострочным текстом) можно выбрать несколько элементов.
Чтобы в форму добавить раскрывающееся меню или список, выполните следующие действия.

1. На палитре Web Tools (Web-инструменты) выберите инструмент Pop-up Menu (Раскрывающийся список) или List Box (Поле со списком).
2. Поместите указатель в той области (внутри блока формы), в которой должно располагаться раскрывающееся меню. Затем щелкните и переместите указатель, чтобы нарисовать раскрывающийся список или поле со списком.
Убедитесь в том, что нарисованная область не выходит за пределы блока
3. Выберите команду Item^Modify (Элемент^Изменить) или нажмите комбинацию клавиш <Ctrl+M> (<3€+М>); в открывшемся диалоговом окне Modify (Изменить) перейдите на вкладку Form (Форма).
4. В поле Name (Имя) укажите название раскрывающегося списка.
Если раскрывающееся меню требуется преобразовать в поле со списком или наоборот, это можно сделать из раскрывающегося списка Туре (Тип).
5. Выберите элемент раскрывающегося меню или щелкните на кнопке New (Создать), чтобы создать новый.

О создании меню с помощью диалогового окна Edit Menu (Изменение меню) мы расскажем далее в настоящей главе.

6. Выберите необходимые параметры.

• • Allow Multiple Selections (Разрешить несколько выделений). При работе с полем со списком установите флажок Allow Multiple Selections (Разрешить несколько выделений), чтобы пользователи имели возможность выбирать несколько элементов в списке.
• Выбор нескольких вариантов возможен только из полей со списком.
  Required (Обязательное). Чтобы быть уверенным в том, что пользователь
  выберет хотя бы один элемент в списке, установите флажок Required
  (Обязательное).

7. Щелкните на кнопке ОК.

Элементы раскрывающихся списков и полей со списками также можно создать или отредактировать в диалоговом окне Menus (Меню). Активизируйте его, выполнив команду Edit^Menus (ПравкаОменю). Примеры раскрывающегося списка и поля со списком представлены на рис. 18.11.

Рис. 18.11. К блоку формы мы добавили раскрывающийся список и поле со списком

Инструмент Radio Button

Группа переключателей позволяет пользователю выбрать из списка значений
только одно. Например, группу переключателей можно использовать для указания типа подписки (рис. 18.12).

1. На палитре Web Tools (Web-инструменты) выберите инструмент Radio Button (Переключатель).
2. Поместите указатель в той области формы, в которой необходимо разместить переключатель. Затем щелкните и перетащите указатель, чтобы создать выделение для каждой кнопки.
3. Выделите один из переключателей.
4. Выберите команду Item^Modify (Элемент^Изменить) или нажмите комбинацию клавиш <Ctrl+M> (<
На экране вы увидите вкладку Form (Форма) диалогового окна Modify (Изменить).
5. Из раскрывающегося списка Туре (Тип) выберите значение Radio Button (Переключатель) (если оно еще не выбрано).
6. Переключатели с одинаковым названием попадают в одну группу.
Поэтому выберите название для группы переключателей и укажите его в поле
Group (Группа).

Рис. 18.12. Переключатели, которые позволяют собрать определенные сведения о посетителе

7. Введите текстовое значение для выделенного переключателя в соответствующем поле. Это значение будет передано в сценарий CGI.
8. Повторите пп. 1-7, чтобы создать необходимое количество переключателей в. группе.
9. Вы сможете задать переключатель по умолчанию, если выделите его и выберите команду ltem>=>Modify (Элемент^Изменить). В открывшемся диалоговом окне Modify (Изменить) перейдите на вкладку Form (Форма) и установите флажок Use as Default (Использовать по умолчанию).
10. Если при посещении формы обязательно должен быть выбран один из переключателей, установите флажок Required (Обязательный) в диалоговом окне Modify (Изменить). Конечно, флажок Required (Обязательный) не используется, если применен параметр Use as Default (Использовать по умолчанию), поскольку один из переключателей (заданный по умолчанию) всегда будет выбран, даже если другие остаются неактивными.
11. Щелкните на кнопке ОК.

Инструмент Check Box

Флажки можно использовать для всех видов работ. Они могут применяться для
ВЫ ответа на вопрос, для создания списка или даже для активизации функции обработки формы. Кнопки с флажками создаются таким же образом, как и переключатели, но с небольшим различием.

1. На палитре Web Tools (Web-инструменты) выберите инструмент Check Box (Флажок).
2. Поместите указатель мыши в той области формы, в которой необходимо разместить кнопку с флажком. Затем щелкните и, перетащив указатель, отметьте область для каждой кнопки с флажком.
3. Выделите один из флажков.
4. Выберите команду Item^Modify (Элемент^Изменить) или нажмите комбинацию клавиш <Ctrl+M> (<
5. Из раскрывающегося списка Туре (Тип) выберите значение Check box (Флажок) (если оно еще не выбрано).
6. Введите имя флажка в поле Name (Имя).
7. В поле Value (Значение) укажите значение флажка.
8. Выберите необходимые параметры.

• Initially Checked (Установлен по умолчанию). Чтобы указать, что элемент с флажком должен быть выбран при первом отображении Web-страницы, установите флажок Initially Checked (Установлен по умолчанию).
• Required (Обязательный). Чтобы указать, что один из параметров с флажком должен быть выбран перед отображением формы, в диалоговом окне Modify (Изменить) установите флажок Required (Обязательный).

9. Щелкните на кнопке ОК.

Содержание раздела

---

---