Раздел 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 (Инструменты). Здесь вы найдете следующие команды:

• Show/Hide Tools (Показать/Скрыть инструменты);
• Show/Hide Web Tools (Показать/Скрыть Web-инструменты).
• Палитра Web Tools (Web-инструменты) является расширенным вариантом обычной панели инструментов. Она напоминает панель инструментов, но с очевидным различием: девять инструментов палитры Web Tools (Web-инструменты) существенно отличаются от инструментов палитры Tools (Инструменты). Палитра Web Tools (Web-инструменты) представлена на рис. 18.7.

Рис. 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 (Переместить) границы области приобретают красный цвет. (О назначении гиперссылок различным частям карты изображения мы расскажем дальше в настоящей главе.) В верхнем правом углу графического блока также будет отображаться красный квадратик. Он указывает на то, что графический блок помимо изображения также содержит и карты изображения.

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

---

---