Web-макеты и проекты
В QuarkXPress 6 печатные и Web-макеты объединяются в одном файле, который называется проектом. В печатных и Web-макетах в рамках одного проекта может использоваться один и тот же текст. Благодаря новой функции Synchronize Text (Синхронизированный текст) программа способна автоматически синхронизировать текст, автоматически обновляя один и тот же текст в разных частях проекта, в том числе в печатных и Web-макетах, что значительно упрощает работу над макетами.
Различия в подходе к процессу создания печатных и Web-макетов начинаются непосредственно с их структуры.
HTML: родной язык Web
HTML— родной язык Web. Он используется при создании любой Web-страницы; язык HTML полностью независим от конкретной компьютерной платформы. Отметим, что HTML — относительно простой компьютерный язык, разобраться с которым не составит никакого труда. Кроме того, чтобы написать код HTML для Web-страниц, вам не потребуется специальное программное обеспечение. Если вы имеете такое желание, приобретите руководство по HTML для начинающих и приступайте к созданию своей первой Web-страницы с помощью любого текстового редактора или процессора (TextEdit для Mac OS или WordPad, Microsoft Word для Windows). Пример создания Web-страницы с помощью TextEdit приведен ниже.
Рис. 18.1. HTML-страница, созданная с помощью TextEdit
Просмотр страниц с помощью броузера
После создания HTML-страницы ее можно просмотреть на любом компьютере, на котором установлен броузер и к которому подключен монитор (рис. 18.2). Поверьте, создав даже простейшую страницу своими силами, вы поймете, как это увлекательно.
Рис. 18.2. Результат отображения Web-странщы, HTML-код которой был представлен на рис. 18.1, с помощью броузера
HTML и QuarkXPress
В процессе создания Web-страниц знание HTML оказывается совершенно не обязательным — QuarkXPress замечательно справится с этой задачей.
Имейте в виду, что вам не удастся создать очень сложные Web-узлы с помощью QuarkXPress. Эта программа позволяет создавать Web-страницы в режиме WYSIWYG (What You See Is What You Get — что видишь, то и получишь), поэтому вы не будете сталкиваться с непонятными кодами, представленными на рис. 18.1. Функций QuarXPress вполне достаточно для построения простых Web-страниц. Однако при разработке функционального и привлекательного Web-узла все будет зависеть от того, насколько хорошо вы умеете работать с кодом HTML. Занимаясь профессиональной разработкой Web-узлов, обратитесь к таким инструментам, как Adobe GoLive или Macromedia Dreamweaver.
Если вас заинтересовала возможность разработки Web-страниц, обязательно испытайте силы в этой области. QuarkXPress же предоставляет возможность создания простых Web-страниц, предназначенных для размещения в Internet.
Вам необходимо запомнить следующее: Web-макет в QuarkXPress — это WYSIWYG-представление страниц, содержащих HTML-коды, которые используются при отображении страниц в окне броузера. Для создания Web-страниц с помощью QuarkXPress следует выполнить такие действия.
1. Подготовьте страницу в виде Web-макета QuarkXPress.
В настоящей главе будет рассмотрено проектирование Web-страниц с помощью QuarkXPress.
2. Экспортируйте полученный Web-макет в файлы HTML.
Об экспорте полученных результатов в формат HTML речь пойдет в главе 19.
3. Скопируйте или выгрузите полученные файлы HTML на Web-сервер. Этот вопрос также будет описан в главе 19.
После того, как вы выполните все эти действия, созданную вами Web-страницу сможет увидеть любой пользователь Internet.
За исключением некоторых специальных Web-инструментов и особого способа отображения макетов, создание Web-макетов с помощью QuarkXPress подобно созданию печатных макетов. Мы остановимся на общих сведениях об HTML только по той причине, что вам следует разобраться в основных различиях между печатными и Web-макетами QuarkXPress.
Далее укажем основные особенности и ограничения.
Единицы измерения. Совершенно очевидно, что печатные и Web-макеты преследуют совершенно различные цели. Как результат, при их создании применяются разные единицы измерения. При создании Web-макета в качестве единиц измерения чаще всего используются пиксели. Ширина. Для Web-макетов лучше всего задавать ширину от 600 до 800 пикселей; большинство компьютерных мониторов может отобразить Web-страницы подобных размеров. Высота Web-страниц на самом деле особой роли не играет, поскольку большинство броузеров позволяют использовать полосы прокрутки, поэтому Web-страницы могут быть сколь угодно длинными.QuarkXPress не позволяет создавать Web-макеты, высота которых превышает 3450 пикселей (48 дюймов); подобные ограничения характерны и в отношении печатных макетов.
Шрифты. Если вы просматриваете Web-макет на экране монитора своего компьютера, то в 99 случаях из 100 все выглядит должным образом по той причине, что просмотр осуществляется на вашем компьютере. Кроме того, также используются шрифты, установленные в вашей системе. Если созданную вами Web-страницу откроет пользователь, живущий в другой части планеты, то Web-страница будет выглядеть по-иному (так как настройки в этом компьютере отличаются от ваших). Старайтесь при разработке Web-макета использовать небольшое количество стандартных шрифтов (наиболее популярными при разработке Web-страниц являются шрифты Arial, Verdana, Times New Roman и Georgia). Благодаря этому значительно повышается вероятность того, что и на других компьютерах ваши Web-страницы будут выглядеть должным образом. Графические изображения. Наиболее часто на Web-страницах используются изображения в форматах JPEG и GIF с разрешением 72 dpi (dots per inch — точек на дюйм) (это наиболее универсальное разрешение экрана), в отличие от файлов TIFF и EPS, которые часто используются при подготовке печатных проектов. Файлы JPEG и GIF занимают намного меньше места, а значит, на их загрузку потребуется меньше времени. Не стоит особо переживать в том случае, если вы перенесли изображения TIFF и EPS из печатных в Web-макет; QuarkXPress автоматически преобразует их в файлы JPEG и GIF.
Макет. В Web-макетах таблицы используются совершенно иначе, чем в печатных макетах. Наиболее часто таблицы в Web-макетах применяются в качестве инструментов размещения графических изображений и текста (в качестве аналогии можно привести графические и текстовые блоки, которые используются в печатных макетах). После того, как вы создали Web-макет с помощью QuarkXPress и приготовились к его выгрузке в Web (подробнее об этом мы поговорим в главе 19), QuarkXPress преобразует текстовые и графические блоки в таблицы HTML, которые существенно отличаются от своих "тезок" из печатных макетов.
Нумерация страниц. Традиционная нумерация страниц в Web-макетах не используется. Конечно, ничто не мешает вам вставить номера страниц в Web-макет QuarkXPress, номера страниц не будут четко связаны друг с другом. В конце концов, каждая Web-страница является законченной и не связана с другими страницами (если не считать гиперссылок).
Знакомство с гиперссылками
Гиперссылка — это область текста или изображения, щелчок на которой приводит к открытию новой страницы или к перемещению к другой части текущей Web-страницы. Данное средство является одним из наиболее функциональных средств Web. Оно упрощает переход между страницами. Процесс создания ссылки предельно прост: выделите текст, который должен выступать в роли гиперссылки, или выделите необходимое изображение, после чего выберите команду Style^HyperlinkONew (Стиль^Гиперссылка^Создать).
В отличие от других инструментов QuarkXPress для работы с Web-документами, палитра Hyperlinks также доступна и при работе с печатными публикациями, поскольку гиперссылки могут использоваться при создании файлов в формате PDF — по крайней мере, они применяются при отображении документа на экране. Поэтому можно создавать гиперссылки для печатных документов, а затем сохранять их как файлы PostScript или PDF, чтобы впоследствии открыть в Adobe Acrobat.
На рис. 18.2 представлена первая созданная нами гиперссылка: hyperlink can take you (она ведет вас за собой). На то, что это гиперссылка, указывает подчеркивание, а также другой цвет по сравнению с цветом остальных элементов. Чтобы вы смогли понять, как же работают гиперссылки, мы создали еще одну страницу, которую назвали Just Another Web Page (Просто еще одна Web-страница) (рис. 18.3). На нее указывает ссылка, которая расположена на странице Welcome to the world of HTML (Добро пожаловать в мир HTML) (рис. 18.2). Если вы внимательно изучите код HTML, представленный на рис. 18.1, то наверняка увидите гиперссылку, указывающую на страницу anotherpage. htm. Броузер интерпретирует код HTML для отображения гиперссылки синим цветом с подчеркиванием. Если вы щелкнете на кнопке Back (Назад) на панели инструментов (рис. 18.3), то вернетесь к исходной странице.
Рис. 18.3. Если вы щелкнете на ссылке, то в результате перейдете на другую страницу
Другие термины Web
Итак, вы уже научились работать с гиперссылками. Теперь можно приступать к знакомству с восхитительным миром Web. Однако если вы намерены заняться профессиональной разработкой Web-страниц, то обязательно ознакомьтесь с несколькими специальными терминами и сокращениями, перечисленными ниже.
URL (Uniform Resource Locator— унифицированный указатель ресурса). Многие используют этот термин как синоним к словосочетанию адрес страницы. URL страницы обычно отображается в соответствующей строке верхней части окна большинства броузеров (рис. 18.4). В Internet Explorer эта строка называется Address (Адрес), а в Netscape Communicator — Web Site (Web-узел). Адреса URL, как правило, начинаются с http: / / и заканчиваются расширением, таким как . com, . net, . org и т.д. Названия отдельных страниц заканчиваются на . html или . htm. Вам наверняка повстречаются Web-узлы, адреса URL которых начинаются с https: //. Буква s указывает на то, что при подключении к узлу используются дополнительные функции обеспечения безопасности, что значительно осложняет жизнь хакеров, желающих получить несанкционированный доступ к содержимому Web-узла.
Meta-дескрипторы. Это наборы дополнительных "незаметных" сведений, которые сохраняются на Web-страницах (они, например, помогают поисковым службам Web должным образом индексировать Web-страницы). Как правило, meta-дескрипторы содержат такие сведения, как имя автора, тема страницы, язык ее содержимого (например, английский, русский или японский).
Рис. 18.4. Адрес URL Web-страницы отображается в адресной строке, расположенной в верхней части окна броузера
Наиболее важная область применения meta-дескрипторов — это идентификация слов, описывающих содержимое страницы, благодаря чему значительно упрощается ее нахождение с помощью поисковой мыши. В QuarkXPress meta-дескрипторы указываются в диалоговом окне Meta Tags (Meta-дескрипторы), которое доступно из меню Edit (Правка). Те, кто просматривает Web-страницы с помощью броузеров, не увидят meta-дескрипторы до тех пор, пока не появится исходный код страницы (подобную возможность предоставляют практически все современные Web-броузеры). Просмотр исходного кода можно сравнить с заглядыванием за кулисы (это может пригодиться с целью получить дополнительные сведения о Web-странице). Отметим, что начинающим не рекомендуется сразу связываться с запутанными кодами HTML, однако помните, что исходный код страниц — это наиболее эффективный способ знакомства с meta-дескрипторами и изучения основных принципов HTML Навигация по Web-узлу. Продуманные средства навигации по Web-узлу можно сравнить с использованием компаса в морском путешествии. В отличие от нумерованных страниц в книге, которые следуют друг за другом в строго определенном порядке, страницы в рамках одного Web-узла могут быть связаны друг с другом любым образом. Именно по этой причине вы обязательно должны предоставить посетителям своего Web-узла возможность легко перемещаться между его страницами. Несмотря на то, что все это звучит достаточно просто, правильно разместить гиперссылки на Web-страницах — довольно сложная задача, которую приходится решать Web-дизайнерам. Для того чтобы разобраться в этом вопросе, просмотрите Web-узлы, созданные другими разработчиками. Особых правил, касающихся создания системы навигации по Web-узлу не существует, за исключением того, что любая подобная система должна быть согласованной и не вызывать трудностей у посетителей. Ролловер. Одной из наиболее удивительных особенностей Web-страниц является их интерактивность, а, пожалуй, самым интересным их элементом можно назвать ролловеры. Ролловер — это рисунок (обычно текст, сохраненный в формате JPEG или GIF), который изменяется, если на него указать мышью. Когда указатель оказывается над текстом на Web-странице, то текст изменяет цвет, начинает мигать или преобразуется в совершенно другой объект. Ролловеры QuarkXPress создать несложно (см. далее в настоящей главе). Двупозиционный ролловер. Двупозиционный ролловер подобен обычному. Отличие состоит в том, что изображение, которое изменяется, — это не то же самое изображение, на которое пользователь наводит указатель мыши. Карта изображения. Как уже отмечалось раньше в разделе "Знакомство с гиперссылками", для разных частей изображения можно задавать различные гиперссылки. Карта изображения — это набор подобных ссылок. Формы. Формы — это те части Web-страниц, в которые пользователи вводят информацию (например, адрес электронной почты при подписке на рассылку или имя и адрес для доставки товаров). Каскадные меню. Вам предоставляется возможность создать меню, которые похожи на обычные меню стандартных приложений. Каскадные меню могут содержать ссылки на другие страницы, узлы или анкеры. Благодаря этому перемещение по Web-узлу значительно упрощается. Каскадные таблицы стилей CSS. Данные таблицы определяют набор шрифтов, которые оказываются предпочтительными при просмотре подготовленной вами Web-страницы. Таким образом, их внешний вид будет максимально близок к тому, который вы задумали. Слово каскадные в данном случае указывает на то, что сначала указывается наиболее предпочтительный шрифт, а затем (в порядке убывания) — другие шрифты, которые должны использоваться в том случае, если шрифты с более высоким приоритетом в системе отсутствуют. "Живой" текст. Как мы покажем вам дальше в настоящей главе, QuarkXPress способна преобразовать тщательно подготовленный печатный макет в Web-макет. При этом программа создает "живой" текст, размещение которого на Web-странице будет изменяться в соответствии с изменениями размеров страницы. QuarkXPress также может преобразовать текст исходного печатного макета в графическое изображение, благодаря чему текст всегда будет выглядеть именно так, как он выглядел в печатном макете (однако при этом изменить размещение текста на Web-странице в соответствии с изменениями размеров страницы не удастся). Одно из наиболее заметных преимуществ Web состоит в возможности представления информации в различных формах. В процессе преобразования печатных макетов в Web-страницы вам следует решить, что же именно является для вас наиболее важным: создание "живого" текста, размещение которого может изменяться, но к которому при этом нельзя применить ряд типографских параметров, или же преобразование текста в графическое изображение.Создание Web-страницы
За исключением незначительных деталей, создание Web-страниц во многом напоминает подготовку печатаного макета QuarkXPress. Вы начинаете с создания макета (используя такие элементы, как текстовые и графические блоки, а также линии), после чего экспортируете его в формат HTML. Экспорт Web-макета в формат HTML можно сравнить с выводом печатного макета на притер. За некоторым исключением, при создании Web-макетов используются практически те же инструменты, что и при создании печатного макета. Код HTML (рис. 18.1) можно просмотреть и отредактировать с помощью QuarkXPress, хотя для этого вы вправе использовать любой текстовый редактор.
Если необходимо объединить несколько Web-страниц в рамках одного узла, сначала подберите соответствующее расположение текста и графики, а затем добавьте элементы навигации и гиперссылки. Таким образом, поставленные задачи можно разделить на две части: макетирование страниц и создание интерактивных элементов Web-страниц. Подобный подход довольно легко реализовать при работе с QuarkXPress, поскольку гиперссылки можно добавлять к тексту и графическим изображениям в любое время.При создании Web-макета в QuarkXPress вам будут доступны инструменты, палитры и диалоговые окна, значительно упрощающие создание целого ряда элементов Web-страниц (например, форм, раскрывающихся меню, ролловеров и списков с прокруткой). QuarkXPress 6 позволяет создавать файлы, называемые проектами, в которых одновременно могут присутствовать как печатные, так и Web-макеты. Для создания Web-макета в QuarkXPress необходимо выполнить такие же действия, как и при создании печатного макета.
1. Выберите команду File^New^Project (Файл^Создать^Проект).
2. Выберите значение Web из раскрывающегося списка Layout Type (Тип макета), чтобы создать новый Web-макет.
На экране появится диалоговое окно New Project (Создание проекта) (рис. 18.5). При этом вы не увидите в нем никаких параметров, относящихся к печатным макетам, за исключением ширины страницы. Однако назначение всех параметров диалогового окна New Project (Создание проекта) для Web-макетов, как правило, не вызывает особых трудностей.
Рис. 18.5. Диалоговое окно New Project для Web-макетов
Раздел Colors
Первый раздел в диалоговом окне New Project (Создание проекта) для Web-макетов — это Colors (Цвета). Здесь вы можете задать стандартные цвета для нескольких элементов Web-страницы.
Background (Фон). Воспользуйтесь этим меню, чтобы выбрать цвет фона Web-документа. Цвет фона следует определить перед тем, как указывать цвет текста, поскольку цвет текста зависит от цвета фона. Обычно для фона выбирают светлый тон. Link (Ссылка). В этом раскрывающемся меню можно выбрать цвет гиперссылки. Этот цвет применяется только к текстовым гиперссылкам. •S Visited Link (Посещенная ссылка). Если выбрать отдельный цвет для выделения посещенных гиперссылок, то так вы обозначите все использованные ссылки. В этом раскрывающемся меню можно выбрать любой цвет, хотя рекомендуется применять стандартный фиолетовый или светлый оттенок цвета, выбранного в меню Link. При этом посещенная ссылка будет затемненной, что позволит легко отличить новую ссылку от непосещенной. Active Link (Активная ссылка). Воспользуйтесь этим меню, чтобы выбрать цвет для текущей ссылки.Цвета в Web
При использовании в диалоговом окне New Project (Создание проекта) раскрывающегося меню цвета I обратите внимание на то, что QuarkXPress no умолчанию задает палитру цветов на тот случай, если вы не указываете цвет. Но если вы сами определяете цвет, выберите значение Other (Другой) в верхней части меню; при этом откроется диалоговое окно Edit Color (Изменение цвета), где из раскрывающегося списка Model (Модель) расположены образцы всех системных цветов. Проигнорируйте их, так как они предназначены только для печатных документов. Мониторы не воспроизводят цвета так, как это делают принтеры, i На мониторе отображается лишь эквивалент цвета на бумаге— во многих случаях этот цвет не будет таким, каким задумывался. Выберите новую цветовую палитру Web Safe Colors (Инвариантная цветовая палтира Web) внизу ! списка. Эти цвета создавались специально для Web-страниц. Как видно из рисунка, названия немного j странные — синие тона, например, отображаются в виде значений #000066 и #0033СС. Если числа в | шестнадцатеричной системе сбивают вас с толку, воспользуйтесь палитрой цветов Web Named | Colors (Цвета Web). Эта палитра не такая большая, как палитра цветов, поддерживаемых в Web, но названия цветов имеют более знакомые названия.Раздел Layout
Раздел Layout (Макет) диалогового окна New Project (Создание проекта) позволяет задавать ширину Web-страницы. Этот параметр не имеет стандартного значения, задаваемого по умолчанию, поскольку в этом нет необходимости. Теоретически, Web-страница бесконечна — единственное, что ограничивает ее длину, — это объем памяти в компьютере пользователя и его терпение. В конце концов, кто захочет просматривать страницу длиной 15 миль? В разделе Layout (Макет) можно задать следующие параметры.
Page Width (Ширина страницы). Значения ширины в этой области весьма ограничены. И по понятным причинам. Даже если в Web-броузерах есть горизонтальная и вертикальная полосы прокрутки, как правило, редко пользуются горизонтальной прокруткой при чтении страницы, особенно если документ читают сверху вниз.Поэтому QuarkXPress ограничивает диапазон ширины до следующих величин, которые представляют собой стандартные значения для большинства мониторов: 600 пикселей; 800 пикселей; 1024 пикселя; 1268 пикселей. Рекомендуется задавать значение 600 или 800 пикселей. Остальные два значения больше подходят для мониторов с большой диагональю. И хотя страница может создаваться на большом мониторе, следует учесть, что такого монитора может не быть у тех, кто ее будет просматривать. Использование значений 600 или 800 практически гарантирует, что пользователи с мониторами небольшого размера смогут увидеть страницу во всю ширину. Variable Width Page (Страница переменной ширины). Если установить флажок Variable Width Page (Страница переменной ширины), то страница растянется или сожмется для того, чтобы поместиться в окне Web-броузера пользователя. Вы можете сделать страницу переменной ширины. Для этого активизируйте параметр Variable Width Page (Страница переменной ширины) и укажите значения в следующих полях. В поле Width (Ширина) в процентах задайте область окна броузера, занятую страницей. В поле Minimum (Минимум) укажите минимальную ширину страницы. Как только окно броузера пользователя становится уже этой ширины, элементы страницы перестанут изменять размер. Флажок Variable Width Page (Страница переменной ширины) позволяет достичь хорошего результата при отображении Web-страницы на мониторах. Однако это средство совместимо не со всеми Web-броузерами, особенно с их старыми версиями. Кроме того, если монитор пользователя намного больше указанной ширины страницы, то последняя растянется, чтобы заполнить весь экран. При этом образуются широкие интервалы в области текста, которых определяют некрасивые отступы между изображениями, расположенными слева и справа на странице. В результате страница станет непривлекательной, поэтому останется непрочитанной.
Старайтесь проверять полученные Web-страницы с помощью как можно большего числа броузеров.
Раздел Background
Указываемые в разделе Background (Фон) параметры определяются для фона документа. Формат HTML позволяет возможность использовать графический файл (в формате JPEG, GIF или PNG) в качестве фона Web-страницы. При разумном использовании такой фон добавляет документу глубину и многомерность, но довольно часто подобный эффект просто раздражает, мешая корректно отобразить другие элементы макета.
Не путайте этот раздел с раскрывающимся списком Background (Фон) раздел; Colors (Цвета).
В большинстве Web-узлов в качестве фона используется черепичный узор, т.е. повторяющееся изображение (на рис. 18.6 представлены два примера).
Рис. 18.6. Использование графического изображения на фоне Web-страницы может привести к совершенно различным результатам
К счастью, такой фон (левый пример на рис. 18.6) -— далеко не единственный доступный вариант. В раскрывающемся списке Repeat (Повторение) можно указать, как повторять изображение: по вертикали или по горизонтали.
Чтобы использовать фоновое изображение, но оставить страницу небольшого размера (она не должна занимать много времени на загрузку), мы рекомендуем выполнить следующие действия.
1. Создайте большое светлое изображение.
2. В диалоговом окне New Project (Создание проекта) установите флажок Background Image (Фоновое изображение), после чего щелкните на кнопке Select (Выбрать).
3. Найдите и выберите ранее подготовленное изображение.
4. Выберите значение None (Нет) из раскрывающегося списка Repeat (Повторение).
Полученный результат будет обладать определенными недостатками. И главный из них заключается в большом размере файла такого изображения. Большой рисунок, описанный здесь, довольно долго загружается — особенно, если используется модем со скоростью передачи данных 56 Кбит/с. Однако, немного поэкспериментировав с параметрами фона Web-страницы в диалоговом окне New Project (Создание проекта), можно получить довольно интересные эффекты. Если вы уже подготовили Web-макет и решили добавить к нему фоновое изображение, воспользуйтесь командой Layouts Layout Properties (Макет^Свойства макета). Так вы откроете диалоговое окно Layout Properties (Свойства макета) и получите доступ к тем же параметрам.
Настроив все параметры, щелкните на кнопке ОК. При этом будет создан новый документ, на основе которого вы создадите первую Web-страницу в QuarkXPress.
В QuarkXPress при открытии Web-макета команда Show Tools (Показать инструменты) в меню Window (Окно) изменяется на подменю, которое называется Tools (Инструменты). Здесь вы найдете следующие команды:
Рис. 18.7. Палитра Web Tools
Палитры Tools (Инструменты) и Web Tools (Web-инструменты) можно открыть одновременно в одном Web-документе. Рекомендуется держать их открытыми; иначе в процессе работы придется переключаться от одной палитры к другой.
Инструменты Image Map
Карта изображения — это несколько "горячих" или активных областей (гиперссылок), размещенных на изображениях. При щелчке на них открывается другая страница, отправляется почтовое сообщение, подтверждается введенная информация и т.п. Фактически, это гиперссылка, заданная для графической области. Пример карты изображения представлен на рис. 18.8.
Для создания карты изображения необходимо выполнить действия, подобные тем, которые вы выполняли при создании текстового или графического блока.
1. Выберите необходимый инструмент из меню Image Map (Карта изображения) на палитре Web Tools (Web-инструменты). При этом будут доступны следующие инструменты.
Рис. 18.8. Web-макет, содержащий импортированное изображение и карты изображений, созданные с помощью инструментов Image Map
Rectangle Image Map (Прямоугольная карта изображения). В результате использования этого инструмента вы получите обычный прямоугольник, похожий на тот, который создается с помощью инструмента Text Box (Текстовый блок) или Picture Box (Графический блок), с той лишь разницей, что он применяется в качестве гиперссылки. Чтобы, рисуя блок, получить квадрат, нажмите и удерживайте клавишу <Shift>. Oval Image Map (Овальная карта изображения). С помощью этого инструмента вы получите эллипс. Чтобы круг был правильной формы, нажмите и удерживайте клавишу <Shift>. Этот инструмент работает подобно инструментам Oval Text Box (Овальный текстовый блок) и Oval Picture Box (Овальный графический блок). Bezier Image Map (Карта изображения Безье). Используя этот инструмент, вы получите многоугольные фигуры (состоящие из многих сторон), поликривые (кривые, состоящие из наборов кривых), а также комплексные фигуры (в которых объединены многоугольники и поликривые). Чтобы создать контур Безье, щелкните в каждом углу создаваемой фигуры (известном как узел). Вы сможете замкнуть блок фигуры, щелкнув в конце на исходной точке. (Заметьте, как указатель с обычного креста изменяется на круг). Если щелкнуть на узле и потащить указатель, то появится маркер точки, с помощью которого можно изменить кривизну линии. Вы имеете возможность создавать как прямые, так и кривые отрезки, в зависимости от действий, выполняемых для каждой точки, — получить желаемый результат не так уж и сложно.2. Наведите указатель мыши на импортированное изображение, с которым должна быть связана карта изображения.
3. Щелкните и перетащите указатель мыши таким образом, чтобы выделить необходимую часть изображения.
Появится белая область, указывающая на местоположение карты изображения, благодаря чему значительно упрощается добавление гиперссылки. Конечно, на светлом фоне эту область увидеть достаточно сложно, однако при наведении на нее инструмента Move (Переместить) границы области приобретают красный цвет. (О назначении гиперссылок различным частям карты изображения мы расскажем дальше в настоящей главе.) В верхнем правом углу графического блока также будет отображаться красный квадратик. Он указывает на то, что графический блок помимо изображения также содержит и карты изображения.
Создание форм
Формы позволяют посетителям вашего Web-узла "взаимодействовать" с его страницами. При этом им предоставляется возможность вводить сведения в поля, выбирать элементы из списков и т.д.
Инструменты 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-мастер подскажет наиболее удачный в каждом случае).
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. В раскрывающемся списке Туре (Тип) выберите один из следующих элементов.
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. Выберите необходимые параметры.
9. Щелкните на кнопке ОК.
Создание меню
Говоря простым языком, меню — это список элементов. На Web-страницах, как правило, элементы отображаются в раскрывающихся меню и в полях со списком. Для создания меню можно воспользоваться диалоговым окном Menus (Меню) или командой Edit1^ Menus (ПравкаОМеню).
Меню, создаваемые при использовании диалогового окна Menus (Меню), можно применять для решения самых разных целей. Например, меню зачастую используется для того, чтобы предоставить пользователю возможность выбрать из списка тот или иной параметр. В других случаях меню применяют как средство перемещения по Web-узлу, когда с каждым его элементом связана определенная гиперссылка.
Для создания меню необходимо выполнить следующие действия.
На экране появится диалоговое окно Menus (Меню), представленное на рис. 18.13.
2. Щелкните на кнопке New (Создать).
На экране вы увидите диалоговое окно Edit Menu (Изменение меню), представленное на рис. 18.14.
3. Для создания меню, содержащего элементы навигации, установите флажок Navigation Menu (Навигационное меню).
С каждым элементом подобного меню можно сопоставить определенный адрес URL. В результате выбора того или иного элемента меню броузер автоматически открывает Web-страницу с соответствующим адресом.
Рис. 18.13. Диалоговое окно Menus
Рис. 18.14. Диалоговое окно Edit Menu
4. Щелкните на кнопке Add (Добавить), чтобы добавить элемент в новое или выделенное меню.На экране будет отображено диалоговое окно Menu Item (Элемент меню).
5. Введите название нового элемента меню и (в случае необходимости) укажите его значение. Если меню содержит элементы навигации, укажите адрес URL в текстовом поле Value (Значение). Если меню не содержит элементы навигации, то выбор элемента означает только то, что значение, указанное в текстовом поле Value (Значение), пересылается Web-серверу вместе со всеми другими данными формы. 6. Если данный элемент меню должен быть выбран по умолчанию, установите флажок Use as Default (Использовать по умолчанию).
7. Щелкните на кнопке ОК, чтобы закрыть диалоговое окно Menu Item (Элемент меню).
8. Щелкните на кнопке ОК, чтобы закрыть диалоговое окно Edit Menu (Изменение меню).
9. Щелкните на кнопке ОК, чтобы закрыть диалоговое окно Menus (Меню).
Меню сохраняются в файле проекта, поэтому при последующем создании раскрывающегося меню или поля со списком ваше новое меню будет доступно в раскрывающемся списке Menu (Меню) на вкладке Forms (Формы) диалогового окна Modify (Изменить), а также в диалоговом окне Menus (Меню).
Добавление ссылок с помощью палитры Hyperlinks
Гиперссылки можно использовать для объединения страниц в рамках одного Web-узла, а также для обеспечения доступа к сведениям разного характера — от музыкальных файлов до адресов электронной почты. В данном разделе речь пойдет о том, какие именно действия требуется выполнить для создания гиперссылок, а также о необходимом для этого инструменте: палитре Hyperlinks (Гиперссылки) (рис. 18.15).
Рис. 18.15. Палитра Hyperlinks
Гипер ссылку также можно создать следующим образом: выделите изображение или текст, а затем воспользуйтесь командой Style^Hyperlink (Стиль^Гиперссылка). В появившемся подменю представлены команды, которые позволяют выполнить те же действия, что и палитра Hyperlinks (Гиперссылки).
Для отображения палитры Hyperlinks (Гиперссылки) выберите команду Window^ShoW Hyperlinks (Окно ^Показать гиперссылки). После появления палитры на экране вы можете приступать к созданию гиперссылок. Это1 достаточно простой процесс. Для начала следует выделить текст или изображение, которые вы будете связывать с другой страницей или другим узлом. В данном случае мы свяжем карту изображения на начальной странице Westbrook Origami Society с другой страницей — Sign Up for Our Newsletter. Для этого выполните следующие действия.
1. Выберите область карты изображения и щелкните на значке New Hyperlink (Создать гиперссылку) в верхнем правом углу палитры Hyperlinks (Гиперссылки).
На экране появится диалоговое окно New Hyperlink (Создание гиперссылки).
2. В диалоговом окне New Hyperlink (Создание гиперссылки) введите адрес URL необходимой страницы.
3. Указав адрес URL, щелкните на кнопке ОК.
В нашем примере карта изображения, охватывающая бумажного журавля, связана со страницей Sign Up for Our Newsletter (рис. 18.16). Если вы щелкнете на изображении бумажного журавля, в окне Web-броузера появится другая страница. Все добавленные гиперссылки отображаются на палитре Hyperlinks (Гиперссылки).
Рис. 18.16. По щелчку на изображении бумажного журавля в окне Web-броузера отображается другая страница
Добавление анкера
Существует еще один тип гиперссылки, который можно создать в QuarkXPress; он называется анкером. Анкер — это область на странице, на которую указывает ссылка на этой же странице. Анкер используется для связывания одной области страницы с другой областью, а не с другой страницей. Для создания анкера выберите команду Style^Anchor (Стиль^Анкер), а затем выберите необходимую команду из подменю. Эти команды позволяют выполнять действия, подобные тем, которые расположены на палитре Hyperkinks (Гиперссылки).
Для создания анкера выполните следующие действия.
1. Выделите текст или изображение, на которое следует перейти.
2. Щелкните на значке анкера в верхней части палитры Hyperlinks (Гиперссылки).
3. Измените название, заданное по умолчанию в открывшемся диалоговом окне Anchor (Анкер), после чего щелкните на кнопке ОК.
Теперь с анкером можно установить связь, создав гиперссылку; в результате переход к различным частям страницы значительно упрощается.
Создание ролловеров
Практически на каждом Web-узле вы найдете строку меню, состоящую из графических элементов, щелчок на которых приводит к отображению определенных сведений (например, контактной информации). При наведении указателя мыши на подобные элементы их внешний вид может причудливым образом измениться. Элемент может "вспыхнуть", изменить свой цвет или даже превратиться в другое изображение. Подобные элементы называются ролловерами.
Подготовка ролловера
Несмотря на то, что ролловеры создавать несложно, прежде следует выполнить небольшую предварительную работу. Ролловер состоит из двух накладываемых друг на друга рисунков, как в мультфильме. Для такого небольшого мультфильма необходимо создать два изображения одинакового размера. Их можно сохранить в графическом редакторе (например, Fireworks или Photoshop). В данном случае мы использовали Photoshop. Оба изображения представлены на рис. 18.17.
Рис. 18.17. Два изображения, которые будут использованы при создании ролловера
Создание простого ролловера
После создания двух изображений можно вернуться обратно в QuarkXPress и приступить к созданию ролловера. Далее мы представим последовательность необходимых действий.
1. Сначала поместите изображение, загружаемое в Web-документе по умолчанию, т.е. рисунок, который обычно появляется на экране.
2. Выберите команду Item^Rollover^Create Rollover (Элемент^Ролловер^ Создать ролловер).
На экране будет отображено диалоговое окно Rollover (Ролловер). (Путь к файлу изображения, которое отображается по умолчанию, уже задан в поле Default Picture (Изображение по умолчанию) диалогового окна Rollover (Ролловер). Это значит, что программа выполнила часть работы самостоятельно.)
3. Щелкните на кнопке Browse (Обзор) рядом с полем Rollover Image (Изображение ролловера) и найдите второй рисунок (второе состояние роллове-ра). Выберите его и щелкните на кнопке ОК.
4. В поле Hyperlinks (Гиперссылки) укажите адрес URL, с которым следует связать ролловер.
Ролловер — это обычная гиперссылка. При щелчке на ней вы переходите в указанную область. В нашем примере ролловер связан с начальной страницей нашего Web-узла Westbrook Origami Society.
5. Щелкните на кнопке ОК.
Вот и все. Теперь можно открыть полученную страницу с помощью броузера и посмотреть на полученные результаты. Ролловеры широко используются при подготовке многих Web-узлов. Полученные нами результаты представлены на рис 18.18.
Рис. 18.18. Пример использования ролловера: при наведении указателя мыши одно изображение заменяется другим
Создание двупозиционного ролловера
Возможность создания двупозиционных ролловеров впервые представлена в QuarkXPress 6.
Двупозиционные ролловеры существенно отличаются от обычных. Обычный ролловер приводит к замене одного изображения другим, если на него наведен указатель мыши. Двупозиционный ролловер дает практически тот же результат, только изображение, которое изменяется, — это не то же самое изображение, на которое пользователь наводит указатель мыши.
Для создания двупозиционных ролловеров используется инструмент Rollover Linking (Связать ролловеры).
1. Создайте два графических блока с помощью инструмента Picture Box (Графический блок).
Первый блок будет целевым. Именно он и будет изменяться. Второй блок будет являться триггером, который и позволяет вносить изменения в первый блок.Для связывания двух графических блоков используется инструмент Rollover Linking (Связать ролловеры).
2. Выберите инструмент Item (Элемент).
3. Выделите целевой графический блок.
4. Выберите команду Edit^Get Picture (Правка'ФПолучить рисунок) или нажмите комбинацию клавиш <Ctrl+E> (<3§+Е>).
5. Выберите изображение, которое будет задано по умолчанию для целевого блока.
Это изображение будет отображаться до наведения указателя мыши на блок-триггер.
6. Щелкните на кнопке ОК.
7. Выберите команду Item<=^2-Position Rollovers^Create a 2-Position Target (Элементс>2-позиционные ролловеры^Создать 2-позиционную цель).
8. Выберите инструмент Content (Содержимое) из палитры Tools (Инструменты).
С выполнения этого шага начинается импорт второго изображения, отображаемого в целевом блоке при наведении указателя мыши на блок-триггер.
9. Щелкните на целевом графическом блоке.
10. Выберите команду EditoGet Picture (Правка^Получить рисунок) или нажмите комбинацию клавиш <Ctr!+E> (<
11. Выберите второе изображение для целевого графического блока.
12. Щелкните на кнопке ОК.
13. Выберите инструмент Rollover Linking (Связать ролловеры) из палитры Tools (Инструменты).
С выполнения этого шага начинается установление связи между двумя блоками.
14. Щелкните на втором графическом блоке (триггере), затем щелкните на первом блоке (целевом блоке, созданном при выполнении п. 7).
Изображение или текст исчезнут, а в верхнем правом углу блока появится значок цели. Добавьте изображение для блока-триггера.
15. Выберите инструмент Content (Содержимое) из палитры Tools (Инструменты).
16. Щелкните на графическом блоке-триггере.
17. Выберите команду Edit^Get Picture (Правка^Получить рисунок) или нажмите комбинацию клавиш <Ctrl+E> (<
18. Выберите изображение для блока-триггера.
Вот и все! Выберите команду Page1^ Preview НТМ1_<=>[название броузера] (Страница1^ Просмотр HTML <=> [название броузера]), чтобы протестировать полученный ролловер (рис. 18.19).
Рис. 18.19. Наведение указателя мыши на заголовок (снизу приводит к изменению внешнего вида изображения (сверху)
Каскадные меню
Каскадные меню можно сравнить с ролловерами, которые позволяют имитировать раскрывающиеся меню, широко используемые в современных приложениях и операционных системах.
Создание каскадного меню
Для создания каскадного меню необходимо выполнить следующие действия.
1. Выберите команду Edit^Cascading Menu (ПравкаОКаскадное меню), после чего определите параметры элементов меню и подменю в диалоговом окне Edit Cascading Menu (Изменение каскадного меню) (рис. 18.20).
2. Добавьте графическое изображение на страницу; это изображение будет выступать в качестве отправной точки для меню.
3. Свяжите меню с графическим изображением.
Создание элементов меню в диалоговом окне Cascading Menu
Для создания элементов меню выполните следующие действия.
1. Выберите команду Edit<=>Cascading Menus (Правка>Каскадные меню).
На экране появится диалоговое окно Cascading Menus (Каскадные меню).
2. Щелкните на кнопке New (Создать).
На экране появится диалоговое окно Edit Cascading Menu (Изменение каскадного меню).
3. Введите название в текстовом поле Menu Name (Название меню).
На вкладке Menu Properties (Свойства меню) диалогового окна Edit Cascading Menu (Изменение каскадного меню) представлены параметры, которые могут существенно изменить внешний вид меню. Мы настоятельно рекомендуем вам поэкспериментировать, чтобы задать именно те параметры, которые вам необходимы.
Рис. 18.20. Вкладка Menu Items диалогового окна Edit Cascading Menu
4. Перейдите на вкладку Menu Items (Элементы меню) диалогового окна Edit Cascading Menu (Изменение каскадного меню).
5. Для каждого элемента меню выполните следующие действия.
6. Выберите цвет для шрифта и фона меню и подменю.
7. Щелкните на кнопке ОК.
8. Щелкните на кнопке Save (Сохранить).
Создание блока, содержащего текст в графическом представлении
Предположим, вам необходимо создать блок, который будет выступать в качестве отправной точки для каскадных меню. Самый простой способ решения этой задачи — создание текстового блока, который будет содержать текст в графическом представлении.
Любой текст можно превратить в Web-графику, установив флажок Convert to Graphic on Export (Преобразовывать в изображение при экспорте). S Можно использовать любое графическое изображение.
Выполните следующие действия.
1. Выберите инструмент Rectangle Text Box (Прямоугольный текстовый блок) на палитре Tools (Инструменты).
2. Создайте на странице текстовый блок.
3. Выберите инструмент Content (Содержимое).
4. Щелкните в текстовом блоке и введите текст.
В данном случае мы ввели фразу Origami Navigation (см. рис. 18.20).
5. Выберите команду Item^Modify (Элемент'Ф Изменить) или нажмите комбинацию клавиш <Ctrl+M> (<3§+M>), чтобы отобразить диалоговое окно Modify.
6. Перейдите на вкладку Export (Экспорт).
7. Установите флажок Convert to Graphic on Export (Преобразовывать в изображение при экспорте) в нижней части вкладки.
8. Щелкните на кнопке ОК.
Вы получили блок, который будет выступать в качестве отправной точки для каскадных меню.
Добавление каскадного меню на Web-страницу
Выполнив следующие шаги, вы сможете связать текстовый блок с "графическим" текстом.
1. Свяжите блок с текстом, выполнив одно из следующих действий. Для выделения текстового блока воспользуйтесь инструментом Content (Содержимое) или Item (Элемент). Выделите графический блок, содержащий изображение. 2. Выберите команду item^Cascading Menu (Элемент^Каскадное меню), после чего выберите название меню из появившегося подменю.Полученные результаты представлены на рис. 18.21.
Рис. 18.21. Надпись Site Navigation в графической форме (слева). При наведении указателя мыши появляются каскадное меню и подменю (снизу)
Переход от печати к Web
QuarkXPress 6 предоставляет возможность преобразовывать печатные макеты в формат Web (и наоборот). Текстовые блоки, графические изображения, линии и блоки из печатного макета преобразуются практически без изменений. Конечно, процесс преобразования тяжело назвать безупречным, однако вы получаете возможность намного быстрее перенести печатные макеты в Web.
QuarkXPress 6 поддерживают такую функцию, как синхронизация текста, благодаря чему можно автоматически синхронизировать текст в нескольких блоках одного проекта QuarkXPress. Эта функция значительно упрощает согласование текста в печатных и Web-макетах, в которых текст часто располагается не одинаково (поскольку на Web-странице достаточно сложно воспроизвести такое же расположение текста и изображений, как в печатном проекте).
Преобразование печатного макета в формат Web
QuarkXPress автоматически преобразует размер, масштаб и размещение изображений в Web-версии проекта, благодаря чему вы получите файлы значительно меньшего размера. Однако если речь идет о тексте, все не так просто, поэтому мы остановимся на данном вопросе более подробно.
Выполняйте преобразование только копии печатного макета, а не оригинала, пс скольку преобразование практически никогда не осуществляется без ошибок.
Преобразование макета
Процесс преобразования довольно прост.
1. Откройте печатный макет.
2. Выполните одну из следующих операций.
3. В раскрывающемся списке Layout Type (Тип макета) укажите значение Web.
4. Щелкните на кнопке ОК.
5. Щелкните на кнопке Yes (Да) в появившемся диалоговом окне с предостережением.
Примите поздравления! Вы только что создали Web-макет. Конечно, кое-что еще придется доделать, однако основной этап уже позади.
Сохранение "живого" текста
При публикации или экспорте Web-макета QuarkXPress старается сохранить внешний вид макета как можно точнее. Программа преобразует текстовые блоки в графические изображения, сохраняя внешний вид макета, однако при этом размеры файлов Web-страницы оказываются достаточно большими, а значит, для загрузки Web-страницы потребуется больше времени. QuarkXPress добавляет к преобразованным в Web-макетах текстовым блокам значки в виде фотоаппарата.
Теперь вам необходимо принять решение о том, в каких текстовых блоках из печатного макета должен быть сохранен "живой" текст, а какие текстовые блоки можно преобразовать в изображения.
Как же определить, преобразование каких текстовых блоков можно допустить, а какие блоки нельзя преобразовывать ни в коем случае? В данном случае воспользуйтесь приведенными ниже рекомендациями.
Для сохранения текста выполните следующие действия.
1. Выделите текстовый блок, преобразование которого вы решили не допускать.
2. Выберите команду Item^Modify (Элемент^Изменить) или нажмите комбинацию клавиш <Ctrl+M> (<
3. Перейдите на вкладку Export (Экспорт) и сбросьте флажок Convert to Graphic on Export (Преобразовывать в изображение при экспорте).
4. Щелкните на кнопке ОК.
Создание синхронизированных текстовых блоков
Функция синхронизации текста позволяет автоматически обновлять текст в нескольких текстовых блоках при внесении изменений в одном из них. Данная функция обеспечивает синхронизацию текста между печатными и Web-макетами.
Предположим, что вы подготовили печатный макет брошюры, а затем создали на его основе Web-страницу. Если при этом использовать синхронизированные текстовые блоки, содержащие наиболее важные сведения (например, номера телефонов), то любые внесенные в печатный макет изменения немедленно будут отражены и в Web-макете. Благодаря этому вы сможете сэкономить немало времени, поскольку вам не придется проверять соответствие номеров телефона в печатном и Web-макете. Подробно вопрос синхронизации текста был рассмотрен в главе 3.
Каскадные таблицы стилей
Один из способов сохранения внешнего вида текста на Web-страницах состоит в использовании каскадных таблиц стилей CSS (Cascading Style Sheet). Каскадные таблицы стилей указывают Web-броузеру пользователя, в каком порядке необходимо заменять шрифты в том случае, если один или несколько шрифтов отсутствует в его системе.
Например, в качестве шрифта основного текста Web-страницы можно использовать шрифт Adobe Caslon. На многих компьютерах шрифт Adobe Caslon отсутствует. Поэтому в качестве шрифта, который будет применен вместо Adobe Caslon, можно задать шрифт Bask-erville (он распространен гораздо шире). Каскадные таблицы определяют приоритет различных шрифтов, которые будут использоваться при отображении страницы. Например, можно указать шрифты в следующем порядке.
Приоритет шрифтов задается в диалоговом окне Font Families (Семейства шрифтов), для отображения которого необходимо воспользоваться командой Edit^CSS Font Families (Правка^Семейства шрифтов CSS) (рис. 18.22).
Для добавления нового семейства шрифтов необходимо щелкнуть на кнопке New (Создать), чтобы отобразить диалоговое окно Edit Font Family (Редактирование семейства шрифтов) (рис. 18.23).
Рис. 18.22. Диалоговое окно Font Families
Рис. 18.23. Диалоговое окно Edit Font Family
Для создания семейства шрифтов CSS выполните следующие действия.
1. Выберите команду Edit<=>CSS Font Families.
2. Щелкните на кнопке New в диалоговом окне Font Families (Семейства шрифтов). В результате на экране будет отображено диалоговое окно Edit Font Family (Редактирование семейства шрифтов). Выберите один из шрифтов, который следует использовать броузеру, из списка доступных шрифтов Available Fonts (Доступные шрифты).
3. Щелкните на кнопке со стрелкой "вправо", чтобы добавить их в набор шрифтов CSS (для удаления шрифта из этого списка достаточно щелкнуть на кнопке со стрелкой "влевo").Выбрав все необходимые шрифты, задайте их приоритет, щелкнув на кнопках Move Up (Переместить вверх) или Move Down (Переместить вниз). Название набора будет совпадать с названием шрифта, указанного вами для первого уровня.
4. Выберите стандартное название шрифтов из меню Generic Font (Стандартный шрифт).
Стандартные шрифты определяют основные параметры семейства; они используются в том случае, если все указанные вами для Web-страницы шрифты остаются без изменения.
5. Щелкните на кнопке ОК.
Теперь при отображении Web-страницы в окне броузера посетителя вашего узла все будет выглядеть именно так, как вы и предполагали.
