Александр Тайц Александра Тайц CorelDRAW GraphicsSuite ВСЕ ПРОГРАММЫ ПАКЕТА ц иди о ЖДЮШЛЪО Содержание Введение ...
-- [ Страница 10 ] --
Размер страницы Браузер никак не ограничивает размер Web-страницы: она может быть сколь угодно длинной или широкой. Тем не менее, не рекомендуется создавать страницы шире, чем окно браузера и длиннее, чем две-три его высоты. Прокрутка окна браузера, особенно горизонтальная, создает читателю существенное неудобство. Если при нять, что в среднем разрешение имеющегося парка мониторов примерно 800x600 пикселов, то полезный размер окна браузера не превысит 400*600 пикселов.
CorelDRAW позволяет легко перейти от полиграфических и метрических единиц измерения к пикселам, удобным для Web-дизайнера. Для этого следует установить в подразделе Size (Размер) диалогового окна Options (Параметры) единицу измерения pixels (пикселы) и необходимое разрешение в раскрывающемся списке Resolution (Разрешение). Если вы правильно укажете разрешение, то CorelDRAW корректно \ Глава 10. Публикация в WWW отобразит страницу на экране, а вы получите возможность использовать для задания размеров не только пикселы, но и любые другие единицы измерения.
Разрешение монитора определяется множеством факторов: размером диагонали, размером видимой области, установленными размерами экрана в пикселах, разме ром точки монитора. Впрочем, точное значение не должно особо интересовать Web-дизайнера. Достаточно знать наиболее употребительный диапазон значений: от 72 ppi до 96 ppi. На среднем мониторе с диагональю 15 дюймов разрешение 72 ppi примерно соответствует размеру 800*600 пикселов, а 96 ppi Ч 1024*768 пикселов.
На мониторах с большей диагональю обычно устанавливают и большие размеры экрана в пикселах. Например, на 19-дюймовом мониторе удобно работать при раз решении 1600x1280. В результате разрешение монитора, количество пикселов на единицу длины все равно будут лежать в приведенных пределах, поскольку они наи более удобны для глаза.
Таким образом, в списке Resolution (Разрешение) надо установить разрешение из указанного диапазона (обычно используют его крайние значения), а в счетчиках Width (Ширина) и Height (Высота) размеры страницы в пикселах. Если страница должна занимать по вертикали несколько экранов, то это тоже следует учесть, зада вая ее размер.
Текст Текст Ч основной элемент большинства Web-страниц. Как бы много ни было на странице графического материала, он все равно служит лишь для иллюстрации со держания страницы или привлечения к ней читателя. Та информация, которую соз датель страницы хочет донести до читателя, содержится в текстовом материале (конечно, если это не сайт художественной выставки или чего-нибудь подобного).
Поэтому рассмотрение возможностей CorelDRAW в части создания Web-страниц мы начнем именно с текста.
Как вы знаете, HTML предоставляет довольно ограниченные возможности редакти рования текста, по крайней мере, по сравнению с CorelDRAW. По этой причине атрибуты текста, которые вы можете назначать в CorelDRAW несовместимы с HTML. Чтобы видеть, как будет выглядеть текст на Web-странице, и редактировать только те его атрибуты, которые там имеют смысл, CorelDRAW должна знать, что вы планируете экспортировать текст в HTML. Тогда программа предоставит особые возможности форматирования, которые может воспроизвести браузер. CorelDRAW может обеспечить совместимость с HTML только для обычного текста. Фигурный текст автоматически преобразуется в точечное изображение.
Автоматическое растрирование текста CorelDRAW автоматически растрирует текст при экспорте в формат HTML в трех случаях. Во-первых, в точечное изображение преобразуется любой фигурный текст.
Такое правило очень удобно, поскольку фигурный текст вам понадобится только для создания изобразительных эффектов. Во-вторых, в точечное изображение пре образуется текстовый блок, выходящий за пределы страницы. Как правило, такое размещение текста не предусматривается дизайнером. Поэтому внимательно следи те, чтобы текстовые объекты не выходили за пределы страницы CorelDRAW.
560 Часгь /. CorelDRAW И в-третьих, в точечные изображения преобразуется текст, пересекающий графиче ские объекты. Как ни странно, это преобразование происходит, даже если при экс порте применяются каскадные стилевые листы (CSS).
Для каждого текстового блока CorelDRAW, который вы перенесете на Web-страни цу, необходимо выполнить команду Make Text Web Compatible (Сделать текст со вместимым с Web). Вы найдете ее в меню Text (Текст) или контекстном меню. Ко манда приводит имеюиееся форматирование текста в соответствие с возможностями HTML.
Команда Make Text Web Compatible (Сделать текст совместимым с Web) форматиру ет весь текст шрифтом. установленным в браузере по умолчанию. В раскрывающемся списке Font List (Шрифт) вы можете выбрать для текста произвольный шрифт, но наверняка не каждый -пггатель сможет увидеть его в своем браузере. Браузер спосо бен передать форматирование только теми шрифтами, которые установлены на компьютере. Например, использовав шрифт Verdana (кстати, он широко распро странен на сайтах многих компаний, таких как Microsoft Corp. и Corel Corp.), вы можете быть уверены только в том, что он будет виден на компьютерах, где уста новлен браузер Internet Explorer версии 4.0 и выше. На остальных компьютерах этот шрифт может быть заменен браузером на тот, который установлен пользователем по умолчанию. HTML позволяет указывать не конкретный шрифт, а семейство шриф тов. Это позволяет хоть как-то сохранить дизайн, избежав замены рубленого шрифта на антикву (название icnacca шрифтов с засечками) или антиквы на моноширинный.
К сожалению, CorelDRAW не дает вам такой возможности. По этой причине следу ет выбирать гарнитуру для HTML-текста с большой осторожностью.
Вопреки полиграфической традиции, кегль шрифта в HTML задается не в привыч ных пунктах, а в условных единицах. Например, размер 1 соответствует кеглю в 10 пунктов, размер 2 Ч 1 3 пунктам, 3 Ч 1 6 пунктам и т. д. Чтобы вам легче было представить себе соотношения размеров, на панели свойств вы можете задавать кегль шрифта и в тех и в других единицах.
Также на панели свойств вы найдете кнопки, управляющие начертанием. Вы можете установить для произвольного фрагмента текста полужирное и/или курсивное на чертание, а также подчеркивание.
Кнопка Format Text (Форматирование текста) открывает знакомое вам одноименное диалоговое окно. Для HTML-текста большинство параметров форматирования не доступны из соображений совместимости с HTML. Кроме тех атрибутов, которые можно установить на панели свойств, там находятся три варианта выключки (по левому краю, центру и правому краю), установка верхних и нижних индексов, а также редко применяемый атрибут зачеркивания. Также текст HTML можно отфор матировать в одну или несколько колонок.
Если перед экспортом страницы в формат HTML не выполнить преобразование тек ста в формат, совместимый с HTML, то CorelDRAW автоматически обнаружит эту конфликтную ситуацию и предложит ее разрешить в момент экспорта. Подробно экспорт макета в формат HTML описан ниже. Если вы проигнорируете данное пре дупреждение, то CorelDRAW экспортирует и несовместимый текст, но в браузере он будет выглядеть иначе, чем на странице документа.
При создании текстового объекта, совместимого с HTML, CorelDRAW автоматиче ски создает для него особый слой Internet Layer, расположенный выше всех осталь Глава 10. Публикация в WWW ных. В дальнейшем на него помещаются все остальные текстовые объекты и особые, в терминах CorelDRAW, Internet-объекты.
Internet-объекты Internet Ч интерактивная среда. На многих сайтах встречаются формы, заполняя которые, вы передаете серверу форматированные данные, удобные для автоматиче ской обработки. Некоторые рекламные объявления (баннеры) меняются при каждом посещении страницы. Симпатичные эффекты с изображениями и текстом создатели Web-страниц реализуют с помощью Java-апплетов. Все это примеры программиро вания для WWW, делающие эту среду такой, какая он есть сейчас.
CorelDRAW поддерживает размещение на странице некоторых объектов, действия которых обрабатываются с помощью программ на языке Java и сценариев CGI (Common Gateway Interface).
Большинство этих объектов используются при создании форм: кнопки, переключа тели с зависимой и независимой фиксацией, поля ввода строк, обычные, раскры вающиеся и комбинированные списки (рис. 10.1). Чтобы вставить любой из этих объектов, выберите его тип во вложенном меню Insert Internet Object (Вставить Internet-объект), находящемся в меню Edit (Правка). Затем щелкните мышью на том месте страницы, где вы хотите разместить объект, точнее Ч там, где должен быть его левый нижний угол. После этого на странице появится изображение выбранного объекта. К сожалению, CorelDRAW не позволяет увидеть Internet-объекты и протес тировать их работу. То, что вы видите на экране Ч всего лишь "фотография" объек та, каким он будет виден в браузере. Функции всех этих объектов определяются сценарием CG1, находящимся на сервере. Он же выполняет всю обработку данных, получаемых после заполнения формы.
-JflLsJ jLorem ipsum dolor sii amet Laem ipsum dolor it anet Locem ips doloc sit _лem ipsum dolot sit amel...
т [Choice 3 2\ hoiceZ ^ M/ Computer Рис. 10.1. Объекты, необходимые для создания форм на странице CorelDRAW (а) и в браузере (б) Часть I. CorelDRAW Свойства Internet-объектов устанавливаются в докере Object Properties (Свойства объекта). Здесь вы найдете две вкладки, определяющие их вид и поведение. Вкладка Rectangle (Прямоугольник) содержит свои элементы управления, индивидуальные для каждого типа объекта. На вкладке Internet вы можете присвоить любому из пе речисленных объектов любые дополнительные атрибуты. Их обработка полностью лежит на сценарии обработки формы.
На Macintosh вместо вкладок в палитре Properties (Свойства) сделан раскрывающийся список, в котором выбирается соответствующий раздел. Раздел, содержащий инди видуальные настройки Internet-объектов, носит название выбранного объекта, а раз дел с дополнительными атрибутами Ч Metalist.
Сценарий-обработчик В HTML-коде страницы для каждой формы необходимо указывать имя CGI-сценария, который должен осуществлять обработку формы. Чтобы это сделать, отмените выделение всех объектов и обратитесь к вкладке SideFold (Сценарий CGI) (к разделу Form на Macintosh) докера Object Properties (Свойства объекта) (рис. 10.2).
В поле URL of CGI Script (URL CGI-сценария) введите абсолютный или относи тельный адрес сценария, например /cgi-bin/form.cgi. В раскрывающемся списке Method (Метод) выберите вариант посылки формы POST или GET (обычно исполь зуется первый). В раскрывающемся списке Target (Фрейм) выберите фрейм окна браузера, в который должна быть загружена форма.
.:....;
: x ' *fc Object Properties тг-^r^r URL of CGI Script Method:
[POST !
| Target:
_ ;
i ggi Рис. 10.2. Докер Object Properties, вкладка SideFold Где разместить сценарий Как правило, обработка формы выполняется сценариями, размещаемыми на том же сер вере, где и Web-страница, в особом каталоге (обычно \cgi-bin). Права доступа к этому ка талогу часто имеет только администратор сервера. Если вы решили воспользоваться на Глава 10. Публикация в WWW писанным вами или для вас сценарием и не имеете доступа к каталогу сценариев, то об ратитесь к администратору сервера.
Кнопки Вкладка Internet для кнопок (Simple, Submit и Reset) содержит только поля Name (Имя) и Value (Значение) (рис. 10.3). В первом из них указывается имя объекта, под которым он фигурирует в CGI-сценарии. Во второе поле вводится текст, который виден на кнопке в браузере. Размер кнопки автоматически устанавливается таким, чтобы на ней помещался введенный текст.
Переключатели Переключатели с зависимой (Radio Button) и независимой (Checkbox) фиксацией кроме полей Name (Имя) и Value (Значение), имеют еще один атрибут, задаваемый флажком Checked by default (Установлен по умолчанию). Если флажок установлен, то эта позиция переключателя будет установлена в момент загрузки страницы.
Списки Обычный (Options List) и раскрывающийся (Popup Menu) списки имеют одинаковые элементы управления (рис. 10.4). Кроме поля имени, по которому сценарий распо знает элемент управления, необходимо заполнить таблицу (List elements (Элементы списка)), в которой указываются все элементы списка (Label (Метка)) и их иденти фикаторы (Value (Значение)).
1 Object Properties 10 oiec! Properties,Software Drop Down Menu Options List:
Рис. 10.4. Свойства списков Рис. 10.3. Свойства кнопок в докере Object Properties в докере Object Properties Часть I. CorelDRAW По идентификаторам сценарий на сервере сможет определить, какие элементы спи ска были выделены пользователем. Если установлен флажок Allow multiple selection (Разрешить выбор нескольких элементов), то пользователь сможет выбрать в списке сразу несколько элементов. Состояние списка по умолчанию задается флажками в левой позиции списка List elements (Элементы списка). Те элементы, у которых этот флажок установлен, будут выделенными в списке на момент загрузки страницы.
Размер списка по горизонтали определяется самым длинным его элементом, а по вертикали Ч количеством одновременно видимых элементов Visible Rows (Видимые строки). Переключатель Drop Down Menu/Options List позволяет сделать из раскры вающегося списка обыкновенный и наоборот.
Поля ввода Поле ввода (Text Edit Box) также имеет параметры Name (Имя) и Value (Значение) (рис. 10.5). Первый из них, как и у других элементов, определяет имя этого элемента управления. Параметр Value (Значение) задает текст, который будет присутствовать в строке ввода сразу посте загрузки страницы. Если поле будет использоваться для ввода паролей, то установите флажок Password field (Поле пароля), тогда введенный в него текст будет отображаться на экране звездочками. В счетчике Size of field (Размер поля) задается размер строки ввода по горизонтали, а счетчике Max. characters (Максимальное количество символов) Ч количество знаков, которые может вместить поле ввода.
Текстовые поля Для поля ввода текста (Text Edit Box) на соответствующей вкладке в докере Object Properties (Свойства объекта) вы можете задать его размер, выраженный в количе стве символов по горизонтали (Row (Рядов)) и вертикали (Column (Колонок)) и начальное значение поля (Text (Текст)). Введенный текст будет находиться в поле после загрузки страницы в браузере пользователя (рис. 10.6).
10 biect Properties I Ob ect Properties вс| щ 9 щ|н tj " Name:
Max. characters: [31" ^ Lorern ipsum dolor sit =1 amet, consetetur ize of field: [si ^ sadipscing elitr, sed "~ Password field D Рис. 10.5. Свойства поля ввода Рис. 10.6. Свойства текстового поля в диалоговом окне Object Properties в диалоговом окне Object Properties Глава 10. Публикация в WWW Java-апплеты Особыми видами Internet-объектов являются Java-апплеты. Вы легко можете ожи вить свою страницу в Internet каким-нибудь из множества свободно распространяе мых апплетов. На том месте страницы CorelDRAW, куда вы вставили Java-апплет командой подменю Insert Internet Object (Вставить Internet-объект), появляется пик тограмма с буквой "J" (рис. 10.7, а). В докере Object Properties (Свойства объекта) на вкладке Java applet (Java-апплет) введите о нем необходимые сведения (рис. 10.7, б).
В строке ввода Applet>
10 biect Properties Apple!>
I calculate.>
Рис. 10.7. Пиктограмма :';
'j domain, net Java-апплета на странице Alternate Text:
CorelDRAW (а) и его параметры Calculate Calories в докере Object Properties (б) Parametet j Value _^j bkcolor ItGrey _J textcolot Black Апплеты Java могут иметь параметры, которые определяют особенности их функ ционирования или внешний вид. Эти параметры должны быть указаны в HTML-коде страницы. Список параметров находится в нижней части вкладки Java applet (Java-апплет), и вам его необходимо заполнить.
CorelDRAW не может знать, сколько места займет апплет на Web-странице. Поэто му вам придется задать его самостоятельно. С помощью инструмента Pick (Указатель) или панели свойств придайте пиктограмме апплета тот размер, который он будет иметь. Учтите, что размер некоторых апплетов может не быть фиксирован ным, а должен задаваться параметрами. Поэтому пространство, которое вы отвели ему на странице, не должно быть меньше, чем заданное в списке параметров на вкладке Java applet (Java-апплет).
566 Часть I. CorelDRAW Внедренные объекты Довольно редко на Web-страницах используются внедренные объекты. Чтобы пока зать внедренный объект, браузер должен "знать" этот тип объектов и иметь средства его отображения, встроенные или реализованные как подключаемые модули.
CorelDRAW умеет только создавать для таких объектов необходимый HTML-код.
После того как вы выберете в меню Insert Internet Object (Вставить Internet-объект) команду Embedded File (Внедренный файл), CorelDRAW поместит на страницу пик тограмму, изображенную на рис. 10.8, а.
1 Object Properties HO I Рис. 10.8. Вид пиктограммы Embedded File:
внедренного объекта (а) jnlfo.swf P) и его свойства в докере Object Properties (б),^._**J ;
Единственное, что необходимо указать для вставки объекта, это имя файла, в кото ром он находится. Размер объекта на странице задается так же, как и для Java-апплета Ч простым масштабированием пиктограммы.
Гипертекстовые ссылки Вся технология WWW базируется на гипертекстовых ссылках. Они позволяют пере ходить от одного документа к другому, формируя пространство WWW. He обойтись без создания гипертекстовых ссылок и в CorelDRAW.
Для управления гипертекстовыми ссылками вам понадобятся специальная панель управления Internet) и/или докер Object Properties (Свойства объекта). Чтобы вывес ти на экран предопределенную панель управления Internet), выберите ее в контекст ном меню панелей управления или в разделе Customization (Настройка) диалогового окна Options (Параметры).
Создание закладок Закладка делает объект доступным для гипертекстовых ссылок с других объектов.
3. Выберите в раскрывающемся списке Behavior (Поведение) пункт Bookmark (Закладка).
4. Введите произвольное имя закладки в поле Internet Bookmark (Закладка).
Глава 10. Публикация в WWW I Object Properties Behavior:_ ц Bookmark ~I~ZZZZ {"(objectOO? ~ Apply ;
I Рис. 10.9. Определение закладки в докере Object Properties Также для ввода имени закладки можно воспользоваться панелью управления Inter net. На ней тоже имеется раскрывающийся список Behavior (Поведение) и поле для ввода идентификатора закладки (рис. 10.10).
Пред зарительный Пове ^ение r росмотр объ зкта (ссылка/зан ладка/звук) Горяч, po ловеров точке Разделить Дублировать Сделать текст ролловер состояние совместимым Целевой на объекты с web фрейм Подсказка ролловера S? с). I NORMAL т" 1 ;
//www, apple.com * : [none] т ;
^ (Щ <0 I У^ипГ ' : H U.K^ 1 I URL Создать ЗавериjHTb Удалить Показ редактир звание состояние ролловер горячих роллов ера Д ролловера точек Состояние Диалога юе окно Редактировать ролловера Публикаи ия в Web ролловер ж Define hotspot using:
По форм<) объекта Ч -^ф Objecls tape Имя закладки По габ аритному о box of object прямоугольнику i/й Bookma* ^ ^i^,hn.,v_poin Х 'V Н :|э^а 1, AS i Фон -^- Backgtoun г ' Х:
Рис. 10.10. Панель управления Internet Закладку можно определить не только для графических объектов, но и для фрагментов текста. Чтобы это сделать, выделите фрагмент текста инструментом Text (Текст) и дальше действуйте одним из описанных выше способов.
Список всех созданных в документе закладок приводится в докере Bookmark Man ager (Диспетчер закладок) (рис. 10.11). Для каждой закладки указан и номер страни цы, на которой находится соответствующий объект.
С помощью докера Bookmark Manager (Диспетчер закладок) можно быстро находить объекты, соответствующие той или иной закладке, удалять и переименовывать за кладки. Щелкните на строке любой закладки и нажмите кнопку Select (Выделить) в 568 Часть I. CorelDRAW нижней части докера. Объект, соответствующий выбранной закладке, будет немед ленно выделен. Чтобы переименовать закладку, щелкните на ее имени в докере Bookmark Manager (Диспетчер закладок), подождите, пока на месте имени появится поле ввода, и дайте закладке новое имя. Чтобы удалить закладку, выделите ее строку и нажмите кнопку Remove (Удалить) с изображением мусорного бака в нижней части докера. Удаляя закладку, вы не удаляете объект: просто он становится недоступным для гипертекстовых ссылок.
Bookmark Bookmark objected?
objectOCE Select Рис. 10.11. Докер Bookmark Manager Имена всех закладок, определенных в документе, появляются не только в докере Bookmark Manager (Диспетчер закладок), но и в раскрывающемся списке Internet Address (Адрес Internet;
на панели управления Internet) и списке URL на вклад ке Internet в докере Object Properties (Свойства объекта). Имена закладок в этих списках образуются из префикса номера страницы и имени закладки:
_PAGEXXX#Name, где XXX представляет номер страницы, a Name Ч имя закладки.
По сути именно это выражение и является "настоящим" именем закладки. Благодаря такому способу именования закладок не возникает конфликтов между одинаковыми закладками, размещенными на разных страницах.
Обратите внимание, что для каждой страницы документа CorelDRAW автоматически создает особую закладку с именем Top of Page XXX, где XXX Ч номер страницы.
При помощи этих закладок вы всегда можете организовать ссылку на любую стра ницу документа.
Создание ссылок Если объекту соответствует закладка, то к нему может вести гипертекстовая ссылка как изнутри документа, так и из других документов. Чтобы создать ссылку на такой объект, воспользуйтесь докером Bookmark Manager (Диспетчер закладок). Инстру ментом Pick (Указатель) выделите объект, с которого хотите организовать ссылку (он может и не иметь закладки). Затем в докере Bookmark Manager (Диспетчер за кладок) щелкните на имени той закладки, куда должна вести ссылка, и нажмите кнопку Link (Связать) в нижней части докера.
Глава 10. Публикация в WWW Альтернативным способом является выбор закладки в раскрывающемся списке In ternet Address (Адрес в Internet) на панели управления Internet или в списке URL на вкладке Internet докера Object Properties (Свойства объекта).
Таким образом создаются ссылки в пределах одного документа. Любые внешние ссылки требуют ввода URL объекта, на который организуется ссылка. В самом общем случае этот объект может располагаться где угодно в Internet. Тогда URL может выглядеть так: или ftp://tucows.wplus.net/files/ и т. п. Чтобы создать такую ссылку, выделите объект и введите URL в список Internet Address (Адрес в Internet) на панели управления Internet) или в список URL на вкладке Internet докера Object Properties (Свойства объекта).
Для создания ссылки на документ, находящийся на том же сайте, что и создавае мый вами, нет необходимости указывать в ссылке полный URL. Проще и эффек тивнее указать относительный путь к этому документу. Если, например, вы хотите создать ссылку на документ с именем doc01.html, находящийся в том же каталоге, просто введите его имя в те же самые списки. Чтобы организовать ссылку на объ ект, находящийся в документе doc01.html и имеющий закладку с именем objOl, вве дите имя документа и закладки, разделив их символом "#": doc01.html#obj01. Если документ doc01.html находится во вложенном каталоге \docs, то правильной ссыл кой будет docs/doc01.html#obj01. Если каталог \docs находится на том же уровне, что и каталог текущего документа, ссылка будет выглядеть следующим образом:
../docs/doc01.html#obj01.
Проверка внешних ссылок CorelDRAW 11 берет на себя проверку не только внутренних, но и внешних ссылок.
Все гипертекстовые ссылки приведены в докере Link Manager (Диспетчер ссылок), с которым вы уже знакомы по связыванию внешних файлов растровых изображений.
Около неверных ссылок будет соответствующая пиктограмма с изображением крас ного косого креста. Кроме того, программа предлагает удобный способ проверки внешних ссылок простым открыванием их в браузере. Если ссылка верна, то вы увидите в нем ожидаемый документ. В противном случае браузер выдаст ошибку 404. Чтобы открыть адресуемый документ в браузере, выберите команду Jump to Hy perlink in Browser (Открыть ссылку в браузере) из контекстного меню, открывающе гося щелчком мыши на объекте Ч источнике ссылки. К сожалению, для относи тельных ссылок этот способ срабатывает далеко не всегда.
Все URL и относительные ссылки, введенные в список Internet Address (Адрес в Internet) на панели управления Internet или в список URL на вкладке Internet докера Object Properties (Свойства объекта) будут присутствовать там до тех пор, пока они присвоены хоть одному объекту. Это позволяет организовать несколько ссылок на один и тот же объект.
Если в документе определено не слишком много закладок, то для создания ссылок удобно воспользоваться контекстным меню, открывающимся щелчком правой кноп кой мыши на любом объекте при активном инструменте Pick (Указатель). В этом кон текстном меню есть вложенное меню Internet Links (Гипертекстовые ссылки), в кото ром приведен список всех закладок. Таким образом, для создания ссылки достаточно 570 Часть I. CorelDRAW выбрать нужную закладку. Размер списка ограничен пятнадцатью закладками. Пункт More (Другие) этого списка открывает диалоговое окно More Internet Bookmarks (Другие закладки), изсбраженное на рис. 10.12. В левой его части находится список Page (Страница), позволяющий сослаться на любую страницу документа. В этом слу чае используется закладка Top of Page XXX. Справа находится список остальных за кладок, определенных в окне Internal Bookmark (Внутренние закладки). Выбрав в нем какую-либо закладку, ны создадите ссылку на соответствующий ей объект.
I M of e 1 nleinal В ookmaiks Hj -Page 1 r- Internal Bookmark Ч JT Т op Of Page Л.
10 1 1 objbmk 11 objbrnk i I Id : 16 _J 2. 1 i 20 i I oo 1 I Ч ' "Ч j A"pp|) j| Cancel Рис. 10.12. Диалоговое окно More Internet Bookmarks Как видите, CorelDRAW предлагает множество способов сделать одно и то же Ч создать ссылку. Такое многообразие вариантов позволяет вам выбрать наиболее удобный для вас способ.
Цвета гипертекста Вы, наверное, уже привыкли, что фрагменты текста, которые являются ссылками, отмечены в гипертексте подчеркиванием. Этой традиции следует и CorelDRAW.
Цвета гипертекстовых ссылок настраиваются в подразделе Links (Связи), вложенном в разделы Publish to Internet (Публикация в Internet) и Document (Документ) диало гового окна Options (Параметры), которое изображено на рис. 10.13.
По умолчанию в нем установлен флажок Underline (Подчеркивание), что заставляет CorelDRAW автоматически подчеркивать гипертекстовые ссылки в тексте. Затем следуют три раскрывающихся списка Normal Link (Обычная ссылка), Active Link (Активная ссылка) и Visited Link (Просмотренная ссылка). В них устанавливают обычный цвет текста ссылки, цвет выделенной и уже просмотренной ссылки соот ветственно.
Глава 10. Публикация в WWW - Workspace Document IЧ General Underline Ш- Page ф- Guidelines MoiwalLink i Grid I Rulers Active Link [ Styles jЧ Save Visited Link И Publish To The Web ;
ХХХХ Image !ХХ Text Й- Global Cancel Help Рис. 10.13. Подраздел Links диалогового окна Options Карты ссылок В языке HTML не определено такое множество графических примитивов, как в CorelDRAW. Программа предлагает два варианта решения этой проблемы. Первый состоит в том, чтобы вместо реального контура объекта использовать его габаритный прямоугольник. Второй способ, менее экономичный с точки зрения размера HTML-файла, для более точного описания формы контура предусматривает работу с вписанным многоугольником. Это описание применяется при создании гипертексто вых ссылок и определяет форму области, щелчок на которой задействует ссылку. Если выбран первый вариант, то щелчок на прямоугольнике, описывающем объект, заста вит браузер перейти по соответствующей ссылке. Во втором варианте пользователь должен щелкнуть именно во внутренней области объекта. Если объекты с разными ссылками не перекрываются, то имеет смысл описывать их габаритными прямоуголь никами. В противном случае такое описание введет пользователя в заблуждение, по скольку в пределы габаритного прямоугольника одного объекта может попасть фраг мент другого перекрывающегося объекта. Тогда щелчок на этом фрагменте откроет совсем не тот документ, который ожидается.
Чтобы выбрать между приведенными вариантами описания формы объекта, выдели те его инструментом Pick (Указатель) и нажмите на панели управления Internet ли бо кнопку Bounding box of object (Граница объекта), либо кнопку Object Shape (Форма объекта). Этот выбор также можно сделать переключателем Define hotspot using (Определить горячую зону используя) на вкладке Internet в докере Object Prop erties (Свойства объекта).
Часть I. CorelDRAW В сложных ситуациях вам наверняка захочется увидеть, как CorelDRAW разметила границы объектов. Программа позволяет выделить рассчитанные границы штрихов кой произвольного цвета на произвольном фоне. Впрочем, как правило, бывает дос таточно одного из этих атрибутов. Цвет штриховки выбирают в списке Cross-hatch (Штрихи), а фоновый цвет Ч в списке Background (Фон) на панели управления Internet. Чтобы штриховка стала видна, следует установить флажок около соответст вующего списка. Результат включения штриховки (фоновый цвет не выбран) пока зан на рис. 10.14.
Рис. 10.14. Демонстрация границ Internet-объектов штриховкой Когда ситуация с границами объектов прояснится, и вы исправите возможные не точности, отключите демонстрацию штриховки сбросив флажки около списков Cross-hatch (Штрихи) и Background (Фон).
Если вы уже пробовали себя в Web-дизайне, то знаете, что такой способ описания ссылок называется картой ссылок (image map). Он позволяет назначать одному изо бражению несколько гипертекстовых ссылок: отдельным фрагментам изображения назначаются различные адреса ссылок.
Без специальных подключаемых модулей браузеры могут работать только с точечной графикой. Поэтому при экспорте готовой Web-страницы CorelDRAW автоматически преобразует все объеюы в точечные изображения. Если объекты перекрываются, то все они попадают в один графический файл. Карта ссылок, создаваемая CorelDRAW автоматически, позволяет назначить каждому из "бывших объектов" отдельную ссылку.
Если объекты не перекрываются, то каждый из них конвертируется в отдельный графический файл. Вообще говоря, даже в этом случае CorelDRAW все равно трак тует каждое получившееся изображение как карту ссылок, но для пользователя это не имеет значения.
Ролловеры Ролловеры Ч это интерактивные элементы Web-страницы, которые изменяют свое состояние (внешний вид) в зависимости от нескольких возможных событий:
П отсутствие событий Ч обычное состояние (NORMAL);
О курсор мыши находится на элементе (OVER);
D курсор мыши находится на элементе и нажата левая кнопка мыши (DOWN).
Глава 10. Публикация в WWW На английском языке такие элементы называются rollovers (от англ, roll over Ч перека тываться, переворачиваться). К сожалению, в русском языке эквивалентный термин отсутствует, а Web-дизайнеры называют их между собой ролловероми. Мы так и будем называть их далее, да простит нам читатель столь прямое заимствование.
Непосредственно ролловеры поддерживаются только векторным форматом Macromedia Flash. В противном случае для обработки событий необходима програм ма, написанная на одном из языков сценариев, чаще всего JavaScript. CorelDRAW поддерживает оба варианта. Вне зависимости от целевого формата, для создания ролловеров используются одинаковые средства.
Создание ролловера Ролловер создается на основе одного или нескольких объектов CorelDRAW. Инстру ментом Pick (Указатель) выделите на странице те объекты, которые должны составить ролловер. При этом учитывайте, что ролловер может иметь только прямоугольную форму. Затем выберите в меню Effects (Эффекты) команду Rollover (Ролловер) > Cre ate Rollover (Создать ролловер) или нажмите одноименную кнопку на панели управ ления Internet. С этого момента CorelDRAW будет считать выбранные объекты еди ным объектом Ч ролловером. Чтобы изменить его содержимое и/или переопределить состояния, необходимо перейти в особый режим редактирования.
Редактирование ролловера Редактирование ролловера включается командой Effects (Эффекты) > Rollover (Ролло вер) > Edit Rollover (Редактировать ролловер) или одноименной кнопкой на панели управления Internet. Предварительно он должен быть выделен на странице документа инструментом Pick (Указатель). В режиме редактирования становятся доступными три состояния ролловера. Каждому из них отвечает ярлык, появляющийся в нижней части окна документа на месте ярлыка страницы (рис. 10.15). На панели управления Internet также находится список состояний Active Rollover State (Активное состояние роллове ра), позволяющий при редактировании выбрать нужное.
Finish editing Ро1ЬуеП1РШнМА1Ж OVER / DOWN Г [ 195,780;
127,621 ) Click an object twice for rotating/skewing;
dbl-clicking to( Рис. 10.15. Ярлыки состояний ролловера в окне документа Щелкнув на ярлыке состояния, вы переходите к его редактированию. Поначалу все состояния ролловера одинаковы. Чтобы он проявлял интерактивность, хотя бы два из них должны отличаться. Вы можете отредактировать объекты ролловера любым спосо бом: изменить цвет, размер, параметры эффектов, и наконец, просто удалить. Если вы хотите, чтобы ролловер имел только два состояния, то активизируйте "лишнее" и на жмите кнопку Delete Rollover State (Удалить состояние ролловера) на панели управле Часть I. CorelDRAW ния Internet. Изменение одного состояния ролловера никак не затрагивает остальные.
Редактирование ролловера непременно завершается командой Effects (Эффекты) > Rollover (Ролловер) > Finish Editing Rollover (Закончить редактирование ролловера) или нажатием одноименных кнопок на панели управления Internet или навигатора.
Ролловеры в Диспетчере объектов Состояния ролловерсв отображаются в Диспетчере объектов (рис. 10.16).
= X Х Layer ЁЫ. Rollover [NORMAL]..... Щ Rectangle ф-Д Rollover [OVER] ;
..... - Rectangle B~A Rollover [DOWN] '..... Щ Rectangle Master Page Рис. 10.16. Ролловер в Диспетчере объектов Для примера возьмем простейший случай: прямоугольник-ролловер, изменяющий цвет, когда на нем оказывается курсор мыши или делается щелчок. Чтобы создать такой ролловер и определить его состояния, проделайте следующие шаги:
1. Нарисуйте на странице документа прямоугольник инструментом Rectangle (Пря моугольник).
2. Придайте ему завивку красного цвета и отмените обводку.
3. Убедитесь, что прямоугольник выделен. В противном случае выделите его инст рументом Pick (Указатель).
4. Выберите команду Create Rollover (Создать ролловер) в меню Effects (Эффек ты) > Rollover (Ролловер) или нажмите одноименную кнопку на панели управле ния Internet. Ролловер создан.
5. Убедитесь, что прямоугольник выделен. В противном случае выделите его инст рументом Pick (Указатель).
6. Выберите команду Edit Rollover (Редактировать ролловер) меню Effects (Эффекты) > Rollover (Ролловер) или нажмите одноименную кнопку на панели управления Interact.
Пусть в нормальном состоянии прямоугольник будет иметь красный цвет. Когда на нем окажется курсор мыши, цвет изменится на синий, а при щелчке Ч на зе леный. Текущее состояние ролловера NORMAL. В нем прямоугольник действи тельно имеет кргсный цвет. Первое состояние определено.
Глава 10. Публикация в WWW 8. Щелкните на ярлыке OVER или выберите вариант OVER из раскрывающегося списка Active Rollover State (Активное состояние ролловера) в панели управления Internet. Придайте прямоугольнику синюю заливку. Состояние OVER определено.
9. Щелкните на ярлыке DOWN или выберите вариант DOWN из раскрывающегося списка Active Rollover State (Активное состояние ролловера) в панели управле ния Internet. Придайте прямоугольнику зеленую заливку. Состояние DOWN оп ределено.
10. Выберите команду Finish Editing Rollover (Закончить редактирование ролловера) меню Effects (Эффекты) > Rollover (Ролловер) или нажмите одноименную кнопку панели управления Internet или навигатора. Ролловер готов.
Тестирование ролловера CorelDRAW позволяет протестировать работу ролловеров прямо на странице доку мента без генерации необходимых файлов и загрузки их в браузер. Для этого необ ходимо выбрать команду-переключатель View (Вид) > Enable Rollover (Включить ролловер) или нажать кнопку Live preview of Rollovers (Предварительный просмотр ролловеров) на панели управления Internet. С этого момента все ролловеры в доку менте станут "действующими". В режиме тестирования никакие операции редакти рования ролловеров, вплоть до перемещения, невозможны. Чтобы вернуться к ре дактированию ролловеров, надо отменить режим тестирования повторным выбором указанной команды-переключателя.
Для окончательного тестирования ролловеров целесообразно экспортировать их в выбранный формат (HTML или Flash). О том, как это сделать, рассказано ниже.
Экспорт HTML Завершив работу над страницей в CorelDRAW, следует преобразовать ее в формат HTML, с которым могут работать браузеры. Разумеется, кроме собственно HTML-файлов, вы получите и полный комплект графических файлов, необходимых для адекватного отображения страницы.
Параметры HTML Чтобы экспортированный HTML-файл быстро загружался, и его было легко редак тировать, код должен иметь простую структуру. Множество даже специализирован ных визуальных редакторов HTML не могут этим похвастаться. Рациональность ко да, генерируемого CorelDRAW, зависит от содержимого трех счетчиков в подразделе Publish To The Web (Публикация в Web) раздела Document (Документ) в диалоговом окне Options (Параметры) (рис. 10.17):
О Position tolerance (Допуск размещения). В этом счетчике вводится возможное отклонение в положении объектов на Web-странице от того, которое вы задали в CorelDRAW. Этот параметр важен в случае применения таблиц для форматиро вания страницы и позволяет избежать появления строк или столбцов шириной в 1Ч2 пиксела. По умолчанию это число равно 0, но мы советуем задавать ббль шие значения: они создают более эффективный и понятный код.
Часть I. CorelDRAW Sb Workspace ф- Document Oositjon tolerance:
1 I- General ;
ф Page |UioA.j;
Image ahite space:
! Й Guidelines Position white space;
j- Grid T~^i | Ruleis j~ Styles ;
Save ХХХ Image Text Links Ш Global OK. Cancel Help Рис. 10.17. Подраздел Publish To The Web диалогового окна Options О Image white space (Пробел между изображениями). Этот параметр тоже имеет смысл только при использовании таблиц HTML. Если размещение элементов макета таково, что изображение занимает сразу две ячейки, CorelDRAW позволя ет выбрать между разрезанием изображения с размещением фрагментов в разных ячейках и слиянием ячеек. Если изображение занимает значительную часть вто рой ячейки, то предпочтительнее слияние ячеек. В противном случае более эф фективно разрезание. Параметр определяет минимальное количество пикселов изображения в ячейке, достаточное для того, чтобы CorelDRAW слил обе ячейки, не разрезав изображение.
П Position white space (Свободное размещение). Параметр задает максимально до пустимое свободное пространство вокруг изображений. Оно иногда позволяет сделать HTML-код проще и эффективнее.
Параметры текста Текст, созданный в CorelDRAW, можно экспортировать в формат HTML по разному. Можно выбрать подходящий вариант в подразделе Text (Текст) диалого вого окна Options (Параметры), изображенном на рис. 10.18.
П Export HTML compatible text as text (Экспортировать текст, совместимый с HTML как текст). Этот переключатель соответствует представлению обычного текста CorelDRAW как текста и на Web-странице. Фигурный текст все равно пе реводится в точечное изображение. Такой вариант предпочтительнее остальных, поскольку делает загрузку страницы максимально быстрой. Недостаток способа в том, что вы имеете очень ограниченные возможности шрифтового оформления.
Глава 10. Публикация в WWW Впрочем, если использовать для заголовков и элементов дизайна фигурный текст, этот вариант можно считать наилучшим.
Workspace Document Export HTML compatible text as.text. All other text is i- General exported as images.
ф- Page Export all text as.images. The page will take longer to ф Guidelines download however text will look the same on all browsers.
|-Grid Export HTML compatible text as text using TrueDoc(TM) font ;
Rulers technology. :;
Х I-- Styles Fonts used in your page will be downloaded with the page. TrueDocJTMJ (ХХХХ Save requires Netscape Communicator(TM). Other browsers may not display text И Publish To The Web correctly.
!- Image TrueDoc(TM) requires that you specify the domain tor the fonts, ie:
//www. Corel, com Links j "For copyright reasons fonts will not Global work outside the specified domains.
I OK Cancel Help Рис. 10.18. Подраздел Text диалогового окна Options О Export all text as images (Экспортировать текст как изображение). Весь текст экс портируется из CorelDRAW как точечное изображение. Этот способ приводит к созданию очень больших изображений, долго загружающихся в браузер. Позво ляет полностью сохранить форматирование.
a Export HTML compatible text as text using TrueDoc(TM) font technology (Экспор тировать текст, совместимый с HTML как текст, используя технологию True Doc).
Этот метод позволяет экспортировать текст из CorelDRAW как текст, но при этом полностью сохранить шрифтовое оформление. Для этого шрифтовая техно логия TrueDoc подразумевает загрузку необходимых шрифтов вместе с Web-страницей. Пока технология TrueDoc поддерживается только браузером Netscape Navigator. Для других браузеров требуется свободно распространяемый подключаемый модуль, который можно получить на сайте создателя технологии фирмы Bitstream (www.bitstream.com). Поскольку шрифты требуют лицензирова ния, технология TrueDoc не позволит использовать их на других сайтах. Вводите адрес своего сайта в текстовое поле в нижней части раздела.
Параметры изображений GIF, JPEG и PNG Ч точечные графические форматы, которые безусловно поддержи ваются всеми браузерами. Поэтому CorelDRAW использует их для представления всех Часть I. CorelDRAW графических объектов, размещенных в документе. Эти форматы позволяют достичь наибольшей компактности файлов, что является наиболее критичным для Internet.
Параметры экспорта изображений собраны в разделе Image (Изображения) диалого вого окна Options (Параметры), представленном на рис. 10.19.
Workspace Document Export images using:
i- General Ш Page '"Х' JPEG Cp Guidelines Х-" S)f \ 256 Color GIF Ada... _ ~ Grid I- Rulers С PNG j256 Color PNG Ad... j !-ХХХ Styles ;
-Х Save (л' Export bitmaps as Distinct files. Bitmaps greater than 256 colors will be В Publish To The Web exported as JPEG.
[^ fjiesample bitmaps to screen resolutiori Text Links f? fihti-Alias Ш Global 'ХХ НГ'Л Г ''L<>I:
ImageMap: ]V Client Г Server OK Cancel Help Рис. 10.19. Подраздел Image диалогового окна Options Переключатель Export images using (Экспортировать изображения в формате) позво ляет выбрать для экспорта изображений один из трех перечисленных форматов и установить его параметры. Параметры сжатия или индексирования выберите в спи ске для выбранного формата. Наилучший вариант состоит в сочетании разных фор матов. Обычно для рисунков (векторных объектов) предпочтительнее формат GIF, a для фотографий Ч JPEG. Чтобы использовать оба формата, установите флажок Ex port bitmaps as distinct files (Экспортировать изображения отдельно). Тогда объекты, содержащие более 2:56 цветов, будут экспортироваться как JPEG, а остальные будут преобразованы в формат GIF.
Флажок Resample bitmaps to screen resolution (Понизить разрешение изображений до экранного) позволит вам не заботиться о разрешении точечных изображений в до кументе Ч CorelDRAW автоматически приведет его к минимально необходимому для Web-страницы.
Флажок Anti-Alias (Сглаживание) включает сглаживание резких цветовых контрастов на получаемых изображениях. Особенно это актуально для векторных объектов и шрифтов. При включенном сглаживании они будут смотреться ровными, без "зазубрин" по краям.
Глава 10. Публикация в WWW В разделе Image Map (Карта ссылок) можно задать формат карт ссылок в HTML-документе. Флажок Client (Клиент) устанавливает наилучший из них (и при нятый по умолчанию). Этот формат подразумевает обработку карт ссылок браузером пользователя, а вся необходимая для этого информация помещается в тело HTML-файла. Вариант Server (Сервер) используют, если необходима какая-то осо бая обработка ввода пользователя, не ограничивающаяся простым переходом по ссылке. Карту ссылок в этом варианте обрабатывает сценарий на сервере. Для обра ботки карт ссылок сервером существуют два стандарта: NCSA и CERN (по именам учреждений, их выдвинувших). Переключатель справа от флажка Server (Сервер) позволит вам выбрать параметр, подходящий для вашего сценария.
Команда Publish To The Web Экспорт страницы в формат HTML происходит по команде File (Файл) > Publish To The Web (Публикация в Web) > HTML. Прежде чем начать экспорт, CorelDRAW предложит вам сделать некоторые настройки (рис. 10.20).
Publish To The Web General j Details ] Images ' Advanced j Summary ! (3" No Issues HTML Layout Method;
г Destination -- FTP j [оЛсЖТоЙ^Тт ТЙШ1ЫТ1Г. jH f..... FTP Upload i ( Use HTML name forimage sub-folder i Image folder: |images\ i I fieplace existing files : i D ispfay! n rowsef When D one rEsipoilRange Ч ХХ* AJi Х Pages i ^ Current Page ' ^election Presets: j default OK Cancel Browser Preview...
Рис. 10.20. Диалоговое окно Publish To The Web, вкладка General Язык HTML быстро развивается, допуская все большие возможности управления форматированием, расширяя интерактивность и мультимедийные возможности. Ка ждая новая версия браузеров Microsoft Internet Explorer и Netscape Navigator, глав ных представителей на этом рынке, расширяет возможности HTML. При этом со вместимость между расширениями языка для этих браузеров оставляет желать много лучшего. CorelDRAW позволяет учесть эти особенности браузеров при экспорте.
Часть I. CorelDRAW П HTML Table (most compatible) (Таблицы HTML (наилучшая совместимость)).
Этот вариант практически гарантирует, что экспортированный документ будет одинаково отображаться самым широким спектром браузеров. Для размещения его элементов используется стандартное языковое средство HTML Ч таблицы.
Как достигается фиксированный размер ячеек таблиц HTML Поскольку ширина колонок таблиц в браузере определяется размером его окна и объе мом текста, CorelDRAW проделывает при экспорте стандартный "трюк", позволяющий точно задать размер ячейки. Он состоит в размещении в пустых ячейках таблицы т. н.
"прозрачного пиксела". Прозрачный пиксел Ч это индексированное точечное изображе ние размером 1<1 пиксел. Причем этот единственный пиксел изображения объявлен прозрачным, и потому не виден в браузере.' HTML позволяет жестко задать произволь ный размер любого изображения, независимо от его реальных размеров. Если реальный размер изображения не совпадает с заданным в коде страницы, то браузер отмасштаби рует его (возможно даже непропорционально) до указанных размеров. CorelDRAW зада ет для прозрачного пиксела размер, который должна иметь ячейка таблицы. В результа те браузер не сможет уменьшить ее, даже при изменениях ширины окна. Так что не удивляйтесь, еспи среди изображений, полученных в результате экспорта, окажется очень маленький графический срайл, содержащий один пиксел. Ни в коем случае не уда ляйте его, иначе страница будет показана в браузере искаженной.
П Layers (Netscape 4) (Слои (Netscape 4)). Слои Ч расширение языка, предприня тое Netscape в четвертой версии браузера Netscape Navigator. Microsoft Internet Explorer, с которым, кстати, работает наибольшее количество читателей в Internet, не поддерживает это расширение. Авторы не советуют использовать этот вариант экспорта, чтобы не потерять большую часть посетителей.
П Styles (Netscape 4/MS IE 4,5) (Стили (Netscape 4/MS IE 4,5)). Каскадные стиле вые листы (Cascading Style Sheets, CSS) поддерживаются большинством совре менных браузерон и стандартизованы консорциумом W3C. Идея стилевых листов состоит в отделении содержания документа от его форматирования. Кроме того, стилевые листы позволяют очень точно задать размещение объектов на Web-странице и использовать на ней несколько слоев. Очень похоже на слои в CorelDRAW, не гравда ли? Если выбран этот вариант, то становятся доступными два флажка настроек на вкладке Advanced (Дополнительно). Флажок Use ID for CSS layout styles (Использовать ID в стилях CSS) разрешает CorelDRAW приме нять расширенные средства форматирования CSS. Флажок Use CSS file for text styles (Создавать файл CSS с текстовыми стилями) размещает стилевую инфор мацию в отдел эном файле с расширением ess, а не в начале каждого HTML-файла. Это уменьшает размер HTML-файлов и дает возможность много кратного применения одних и тех же стилей, практически не модифицируя код страниц. На сегодняшний день вы можете использовать CSS на своих Web-страницах, практически не опасаясь сократить количество посетителей.
О Single Image with Image Map (Изображение с картой ссылок). Это наименее рекомен дуемый вариант экспорта страницы. По нему CorelDRAW экспортирует всю страницу в одно большое изображение и создает для него карту ссылок. Большой размер полу чаемых изображений делает этот способ мало пригодным в Internet, где минималь ный размер графических файлов служит одним из главных ключей к успеху.
В группе Destination (Назначение) выберите папку для экспортированных файлов.
Введите ее имя в поле ввода или выберите в раскрывающемся списке, открываю щемся расположенной рядом кнопкой.
Глава 10. Публикация в WWW Во втором поле ввода (Image folder (Папка с изображениями)) задается имя катало га, в котором будут размещены изображения. Большинством принята традиция хра нить изображения отдельно от HTML-файлов во вложенном каталоге с именем images. Такая стандартизация позволяет легче ориентироваться в содержимом ката логов сервера и облегчает написание сценариев. Впрочем, вы можете ввести в эту строку любое другое имя или установить флажок Use HTML name for image sub folder (Использовать имя HTML-файла в имени папки с изображениями). В послед нем случае каталог с изображениями будет носить имя HTML-файла, заданное в раскрывающемся списке выше.
Флажок Replace existing file (Заменить существующий файл) разрешает программе записать новую версию экспортированных файлов поверх старой. Чтобы получен ные Web-страницы автоматически загрузились в браузер, установите флажок Display in Browser When Done (По окончании открыть в браузере). Вместо сохранения ло кальной копии файлы можно сразу поместить на сервер. Для этого установите фла жок FTP Upload (Загрузка по FTP), настроив при необходимости параметры встро енного FTP-клиента в диалоговом окне, открывающемся кнопкой FTP Settings (Настройки FTP).
В группе Export Range (Диапазон) задайте диапазон экспортируемых страниц. Это может быть текущая страница (Current Page), весь документ (All), произвольный набор его страниц (Pages) или только выделенные объекты (Selection).
На вкладке Details (Подробно) диалогового окна Publish To The Web (Публикация в Web) скорректируйте имена получающихся HTML-файлов и их названия в колонках File name (Имя файла) и Title (Page Name) (Название страницы) соответственно (рис. 10.21). На вкладке Images (Изображения) вы можете проделать то же самое с именами файлов изображений и их параметрами сжатия (рис. 10.22).
Дополнительные настройки HTML-кода (рис. 10.23) сосредоточены на вкладке Ad vanced (Дополнительно) диалогового окна Publish To The Web (Публикация в Web).
Если вы хотите дать пользователю возможность рассмотреть изображения на странице не только с экранным, но и с более высоким разрешением, действуйте следующим образом. Создайте изображения высокого разрешения. Затем поместите их на страни цу документа при помощи механизма связывания. Для этого установите флажок Link bitmap externally (Связать внешний файл) в диалоговом окне Import (Импорт). Если на вкладке Advanced (Дополнительно) установить флажок Maintain links to externally linked files (Сохранять связи с внешними файлами), то CorelDRAW сопоставит изо бражениям на странице ссылки копии с высоким разрешением.
Флажок Generate JavaScript for roll-overs (Генерировать JavaScript для ролловеров) включает автоматическую генерацию JavaScript-кода для имеющихся в документе ролловеров. Каждое состояние любого ролловера экспортируется в отдельный гра фический файл, а сценарий JavaScript управляет их демонстрацией в зависимости от положения курсора и кнопок мыши.
Технология TrueDoc, разработанная фирмой Bitstream, позволяет внедрять в Web-страницы любые шрифты. Точнее, шрифты размещаются в отдельном PFR файле (Portable Font Resource), на том же сервере, что и Web-страница. Для того чтобы они загрузились в браузер пользователя, необходим специальный подключае мый модуль.
Часть I. CorelDRAW Щ 1 Publish Tp The Web General Details images | Advanced j Summary 5" No Issues | Х ages aeing exported:
Ради 1 Title (Page Name) I File name 1 j Graphic2.htm : Graphic2_page2.htm.Graphic2_page3.htm OK Browssr Preview... i Cancel Help Рис. 10.21. Диалоговое окно Publish To The Web, вкладка Details 1 Publish (To The Web H Genefiil ] Details ij.m.?.9?.y Advanced | Summary | ty № Issues j 1 mage s В eing E xported:
Image Name Type I hexO HighQualityJPG hex3 256 Color G 1 F Adaptive ** hex4 ;
H ighest Q uality J PG hex^ M edium Q uality J PG Pro...:
hex : 128 Color GIF Adaptive hex? 64 Color GIF Adaptive Di...
hexS! Web-safe GIF Dithered hex!) Grayscale GIF hex" 0 : 256 Color G I F Adaptive...
hex'1 Highest Quality JPG Pro...
Options... Це1р Browser Preview... I OK | Cancel Рис. 10.22. Диалоговое окно Publish To The Web, вкладка Images Глава 10. Публикация в WWW Publish To The Web Generalj Details! Images Advanced j Summary | No Issues t !Х/" Maintain links to externally linked files [v* Generate JavaScript for roll-overs [ User ID for CSS layout styles Г Use CSS file for text styles jy mbed fonts using ТшеОос [Include tartd.jri.i chafacter set.^ OK Cancel Help Browser Preview...
Рис. 10.23. Диалоговое окно Publish To The Web, вкладка Advanced Флажок Embed fonts using TrueDoc (Встроить шрифты через TrueDoc) заставляет CorelDRAW создать PRF-файл со всеми использованными шрифтами и включить в код Web-страницы ссылку на него, и на подключаемый модуль, находящийся на сер вере Bitstream (www.truedoc.com). Если у пользователя нет этого модуля, то он загру зится с этого сайта автоматически. Ограничение на лицензированное использование шрифтов не допускает использования внедренных шрифтов с "чужих" сайтов. По этой причине в PRF-файл встраивается адрес сайта, имеющего соответствующую лицен зию, т. е. вашего сайта. Его доменное имя необходимо указать в поле ввода, располо женном ниже флажка. По умолчанию в PRF-файл помещаются только те символы шрифтов, которые встречаются на странице. Флажок Include standard character set (Включить стандартный набор символов) включает в ресурс весь стандартный (ANSI) набор символов. Если вы планируете расширять наполнение сайта, то имеет смысл установить этот флажок, чтобы не генерировать PRF-файл заново для новых симво лов. Технология TrueDoc пока еще не завоевала широкой популярности и далеко не у каждого пользователя установлен подключаемый модуль. Поэтому из соображений совместимости мы не рекомендуем использовать ее без серьезной необходимости.
Вкладка Summary (Статистика) диалогового окна Publish To The Web (Публикация в Web) поможет оптимизировать экспортированные Web-страницы. Она содержит перечень всех элементов страницы и время их загрузки в браузер пользователя в зависимости от скорости соединения (рис. 10.24). Найдите графические файлы, ко торые грузятся слишком долго и постарайтесь их оптимизировать или уменьшите их геометрические размеры. Флажок Publish statistics as frame (Показать статистику в отдельном фрейме) создает в экспортированном документе отдельный фрейм, в ко тором приводятся все те же статистические данные (рис. 10.25). В правом фрейме оказываются сами Web-страницы.
584 Часть I. CorelDRAW tamam ННИИИВКШ \ Publish | Т he Web o Genera \ Details | Images i Advanced Summary 1 [|J> 4o Issues | Filename: Graphic2.htm total size 491 50 Bytes Total files: Download Т irrte i File Sizes j 144k j 28.8k i 33.6k i 56k :
49150 By... 27s 13s 11s 7s Total file:
1 File list Os Os _l ;
Х'{* irnaes/hex0.jpg :1800Bytes 1S OS :2171 Bytes 1s Os 0s 0s л imasies/hex2.jpg 2171 Bytes 1s Os Os Os imaties/hei(12.ipg 3067 Byles 1s Os Os Os imat|es/hex3.gil 101 96 By... 5 s 2s 2s 1s : imai)es/hex4.jpg ;
1443 Byles O s Os Os Os imaijes/hexS.jpg -. '"7^ j., ^., ~-,-^ ^ ^ Д J цj k- :
Iv Publish statistics as frame "IMIDl Bfov sei Preview.,, i Cancel help Рис. 10.24. Диалоговое окно Publish To The Web, вкладка Summary 3 nevtky_prospecl.htm - Mitra | Fte Edit View Favorites Tools Help j ^Back> Ч Х о ill 4}'i QSearch ^iJFavoiites ^History ! ;
% j Address | J My Documents\Corel User Files\F_nev5kyj3raspect.htm _] ^ httf ://www.spb.ru/cityscapep/ palace square.htin^palace_squafe f revious Next il |Щ My Computer Рис. 10.25. Статистический отчет, созданный CorelDRAW Глава 10. Публикация в WWW Ссылки Previous (Назад) и Next (Дальше) позволяют перелистывать экспортирован ные страницы. На наш взгляд, для анализа эффективности страниц такой способ бо лее удобен и нагляден.
Последняя вкладка Preflight (Проверка) (рис. 10.26) диалогового окна Publish To The Web (Публикация в Web) содержит результаты автоматической проверки документа на актуальность гипертекстовых ссылок и совместимость с языком HTML. Отчет программы проверки позволит вам избежать грубых ошибок и подскажет способы их устранения.
jDefaultSettings 51 Settings... I j \Цу> There are currently no issues to report * This page will list potential problems or issues that you should be aware of regarding your document.
There are no known issues with the current document or settings. Check again just before printing, publishing or sending a document to someone else.
Tip: You can view or change which issues are checked for by clicking on 'reflight Settings, above.
Help Cancel Browser Preview...
Рис. 10.26. Диалоговое окно Publish Tq The Web, вкладка Preflight Теперь, когда сделаны все настройки, нажмите кнопку ОК в диалоговом окне Pub lish То The Web (Публикация в Web), чтобы программа начала генерацию Web-страниц. Вы найдете готовые HTML-файлы и растровые изображения в папке, указанной на вкладке General (Общие).
Редактирование готовых Web-страниц CorelDRAW располагает специализированным фильтром импорта HTML и поэтому дает возможность редактировать уже готовые Web-страницы. Импорт HTML-файлов выполняется точно так же, как и импорт других форматов, с помощью команды Import (Импорт) меню File (Файл).
Длина импортируемой страницы Если импортируемая страница оказывается длиннее страницы CorelDRAW, то часть со держания импортируемого файла выходит за пределы страницы.
20 Зак. Часть I. CorelDRAW Экспорт Flash До недавнего времени инструменты создания изображений и анимации в формате Flash (расширение swf) поставляла только сама компания Macromedia Inc. Теперь большинство популярных программ векторной графики тоже обогатились этой воз можностью. Пакет CorelDRAW не стал исключением. С созданием "статических" иллюстраций и роллоиеров в формате Flash справляется сама программа иллюстри рования CorelDRAW. Для изготовления анимации вам придется обратиться к от дельной программе Corel RAVE, также входящей в пакет (см. главу 21).
Для того чтобы экспортировать текущий документ в формат Flash, выберите коман ду File (Файл) > Publish To The Web (Публикация в Web) > Flash embedded in HTML (Flash, внедренный в HTML). Эта команда открывает стандартное диалоговое окно Export (Экспорт), в котором следует выбрать имя и папку для Flash-файла. Затем после нажатия кнопки Export (Экспорт) CorelDRAW предоставит диалоговое окно Flash Export (Экспорт Flash), содержащее настройки экспорта.
На вкладке General (Общие) находятся параметры Flash (рис. 10.27). Переключатель Bounding Box Size (Размеры иллюстрации) задает, каким будет размер иллюстрации на странице в браузере. Он может определяться либо размером страницы документа (Page (Страница)), либо изображения (Objects (Объекты)).
ХM H H MM ХХ л "л ХХ ^Щ I Flash Exioit Хx T "^ General | HTML cj3 2 1 ssues | r Optimization Ч -Biti nap setting Ч Ч.
File Protection from import '-Х Page Г Objects P/ Use sound behaviors Х Coripression: Low ^ J_!
Presets:
[ Preview... ^1 Cancel Help !' ;
_J Рис. 10.27. Диалоговое окно Flash Export, вкладка General Раскрывающиеся списки группы Bitmap setting (Параметр изображения) задают па раметры сжатия JPILG для всех растровых изображений в иллюстрации. В списке Глава 10. Публикация в WWW JPEG Compression (Сжатие JPEG) установите коэффициент сжатия, но помните, что излишне высокое значение приведет к недопустимому ухудшению качества изобра жений. Предварительное размытие может несколько увеличить эффективность JPEG-сжатия. В списке Smoothing (Размытие) подберите наилучшую силу сжатия.
В списке Resolution (dpi) (Разрешение) задайте разрешение, к которому следует при вести все растровые изображения на странице. Обычно оно принимается равным или 96 dpi.
Ролловеры в формате Flash можно снабдить звуковыми эффектами. Флажок Use sound behaviors (Использовать звук) включает их генерацию. Степень сжатия звуко вой информации, обратно пропорциональная качеству, определяется выбором в раскрывающемся списке Compression (Сжатие) среди четырех возможных градаций.
Оптимизация векторных объектов для формата Flash включается флажками в группе Optimization (Оптимизация).
Флажок File Protection from import (Защита файлов от импортирования) запрещает импортирование сгенерированного файла Flash в программы, имеющие такую функцию (CorelDRAW к ним не относится). Таким образом вы защитите созданные файлы от несанкционированного редактирования.
Изображения в формате Flash размещаются в коде Web-страницы с помощью тегов HTML
Книги, научные публикации
Pages: | 1 | ... | 8 | 9 | 10 | 11 | 12 | ... | 19 |