CorelDRAW X5 The Official Guide part 94 ppsx

Select all the objects CTRL+A, and then click the Create Rollover button on the toolbar to let CorelDRAW know this is going to be a rollover button once you’ve finished, as shown here..

Creating Rollover Buttons

Almost any object you draw can be made into a rollover that reacts to cursor actions, so you

can liven up your published document with simple animated effects and hyperlinks Cursor actions are events such as when a user holds or passes a cursor over the object, or clicks the

object by using a mouse

When you’re creating rollovers, three basic states can be defined: Normal, Over, and

Down The Normal state sets how an object appears in its “static” state—when the cursor is not over or clicked on the object on the web page The Over state sets the appearance of the object whenever a cursor is over it The Down state reveals the object in the rollover group

when the user’s cursor is above the object and has clicked their mouse button By varying what the graphic looks like in these states, you can create interesting visual effects and give your users meaningful feedback related to their cursor movement

This is fun stuff and deserves a tutorial The following steps show how to make a region interactive when an object (or group of objects) is displayed on a web page Although the button will react to cursor actions when you’ve completed the tutorial, the actions will not

link to anything; linking a button is covered later in this chapter—let’s concentrate on the art

for the button first Let’s suppose you want a button that tells the visitor that something is for

sale: a button with a $ symbol plays in several countries, or use a currency symbol of your

preference in this example To continue the concept here, the action a visitor would take would be to click to buy the item; therefore, when visitors hover their cursor over and/or click the button, the button should change to a different look In this example the button will

change its text from a $ symbol to an official-looking “SOLD” message Yep, as ambitious

as this might sound, all you need to do is to follow these steps…

Creating Different Looks for Rollover States

1. Create a button object, make it as fancy as you like (Effects | Emboss works well), but keep the size of the button to approximately the size you’d want it on your web

page—under an inch is fine for this example Then with the Text tool, type $ and

give the symbol a fill color that contrasts with the button color

2. Select all the objects (CTRL+A), and then click the Create Rollover button on the toolbar to let CorelDRAW know this is going to be a rollover button once you’ve finished, as shown here

Ill 28-2

Several objects selected Less than 1"

3. With the object now defined as a rollover object, all the states on the Active Rollover State selector display the same group of objects you selected…and it’s time to create

a change now Click the Edit Rollover button to enter the editing state, as shown here, and then choose Over from the selector list

Ill 28-3

4. Edit your button; in the next illustration the embossed circle has actually been

replaced with a polygon object You can replace objects, change the fill, do just

about anything you like because this editing state is not a “normal” page view in CorelDRAW’s drawing window Some tricky stuff is going on behind the scenes, and if you choose to delete a shape and replace it now, you haven’t really deleted it

You remove an object from a state’s view, in this case from the Over state, but in the Normal state all your original objects are still there Similarly, delete the $ and then

with the Text tool, type SOLD in an interesting font.

Ill 28-4

5. For the sake of testing all these features, let’s suppose that the Over state, the SOLD button, is also good for the Down state, the state that occurs when the visitor clicks the button By default, the Normal state was assigned to all three available states when you first made the collection of objects a rollover button First, click the Active Rollover State selector and choose Down; a view of the Normal state objects appears

6. Trash the contents of the Down state by clicking the Deletes Rollover State trashcan button

7. Choose Over from the selector, and then click the Duplicates State button The Over state now duplicates the following unassigned state (Down)

28

Choose state

Replacement objects

8. Mission accomplished! Click the Finish Editing Rollover button (shown here), and save this file to CDR file format

Ill 28-5

9. Oh, yeah, you want to see your creation in action! CorelDRAW will preview your

interactive button right on the drawing page Click the Live Preview Of Rollovers button; before you move your cursor over the button, it should look like it did when you set it to Normal—your original group of objects Move your cursor over the button, and it should show the Over state, as it will in the Down state (when you click the button) because you duplicated Over to Down in the tutorial After previewing the effect, click the Live Preview Of Rollovers icon again to deactivate the live preview, because live drawings can get a little disconcerting

Look at rollover.cdr and take it apart to better see the wealth of creative possibilities

in your own work This setup has three different states, and when you click the button, it changes shape and sort of squishes away from you Just about any edit you can perform

on objects, including totally replacing them, can be used in a Rollover button

The Internet toolbar also has other rollover-related commands to objects, as follows:

● Edit Rollover This was covered earlier, but you should know that even after you think you’re finished, rollovers can be edited a week or a year from now

● Extract All Objects From Rollover This is a destructive edit! Think about this

command twice before you undo all your rollover work Depending on the replacement objects you’ve built into a rollover, use this button to view and edit everything CorelDRAW has hidden while the document was a rollover The objects will be stacked on top of each other, so you will have to change the stack order or drag them apart to see them

Rollover buttons can't be edited while the Live Preview Of Rollovers option is on.

To edit any button, first disable this option by clicking the button You can turn on Live Preview again when you finish editing the button.

● Duplicates State Covered briefly in the tutorial, this button is used to copy the Normal state to Over and Down states if you have deleted them using the command button, discussed next

● Deletes Rollover State This deserves a little more quality time: while editing any

rollover state, you can delete the object(s) representing it by clicking this button

After a state has been deleted, there will be no object to represent it, so the rollover state will appear blank If needed, use the Duplicates State button to create an exact copy of the Normal state back into a blank state to avoid the need to re-create the object(s) used for this state If you’ve deleted a state, be sure to set the Active Rollover State list back to Normal, or your button will be blank during an action when it’s put up on a web page

You’ve just created a three-step rollover button! It is an interesting graphic effect, and

sometimes you might want to use it just the way it is—a sort of graphic hide-and-seek game

Most of the time, however, you’ll want something additional to happen; you want the action

of clicking the link to activate a hyperlink, and the user to be taken to the link’s destination

The destination can be a bookmark location on the current page, like the top or bottom of

the page, or the destination might be another web page or URL location altogether How to

make the rollover or any other element do something is presented in the following section

Setting Internet Object Behavior

While any individual object or rollover state is selected, you can set its behavior as a web

object to either a URL or an Internet bookmark using options in the Behavior selector on the

Internet toolbar, shown here

Ill 28-6

Adding URL Behavior

You can apply hyperlinks to any object using this option For example, Corel’s URL is http://

www.corel.com Internet addresses must be preceded with the correct Internet protocol

prefix (such as http://, https://, or ftp://) For example, if you’re linking to www.corel.com,

the format must be http://www.corel.com You can also use a “mailto” protocol to link to an

email address, such as by entering mailto:someone@somewhere.com This is a great way

to get, for example, a potential client to write to you By default, the http:// protocol is

automatically added to precede your URL, but you can edit it as needed

To set a URL as the behavior for your web object, click to select the object, and use the

Behavior selector on the Internet toolbar to specify the URL With this option selected, type

the actual URL in the Internet Address box, pressingENTERto apply the address link Once a

28

URL has been applied, the Internet toolbar displays other options Here are the URL-specific things you can define:

● Target Frame Use this option to specify an optional browser window location for the new page to open into Unless you specify differently using this drop-down, the page that is called by the assigned URL address will open in the current browser window, replacing the page that contained the link This produces the same results as the Default [None] setting in the Target Frame list Choosing the _blank option from the list causes a new web browser window to open to display the linked page

If your web page uses frames for its display, you can specify where in the frameset the new content will open Choosing _self opens the new URL to the same frame where the web object is located The _top option opens the new URL in the full body of the window, and all frames are replaced with a single frame containing the new document The _parent option opens the new document in the current frame’s Parent frameset You can also enter custom frame names by typing them in the Target Frame combo box

Frame-based web pages cannot be searched by most search engines such as Google, and onscreen readers for the visually impaired cannot read the contents of frames Think very carefully if you choose a frame-based web document, and consider the audience you might lose and annoy.

● ALT Comments This option is covered in more detail later in this chapter Briefly,

use the comments If you don’t, your visitors who have graphics turned off in their

browser won’t know what your message is

● Hotspots A hotspot in a graphic can be a great way to create one graphic and yet tag several different areas to different links Once you’ve entered a link for an object, click this icon to choose whether an object’s shape or its bounding box will define the clickable area Choose either Object Shape or Bounding Box Of Object in the selector, as shown You can choose the Cross-hatch and Background colors if the currently set colors are difficult to distinguish from other colors in your document These don’t show on your published web page; they’re only a visual convenience while you work in CorelDRAW

Ill 28-7

● Show Hotspot This option in the middle of the toolbar can be toggled on or off,

and it can activate or deactivate the display of the crosshatch pattern, which indicates hotspots applied to web objects, shown here

Ill 28-8

Adding Bookmark Behavior

Assigning a bookmark to a graphic object is a method you can use to provide a convenient

way for users to navigate between web pages on your site For example, you could use a

bookmark if you wanted your audience to be able to click a button or other link and return to

the first page of your site from another page in your site This is a two-step process In the

first part of the process, you define a fixed location to which one or more URL links can

point The fixed location is an anchor or bookmarked object The second step in the process

would be to create a button or text link elsewhere that points to the object’s bookmark Let’s

walk through the process

Creating Bookmark Links

1. Select an object that you want to serve as the anchor or bookmark, for example, a

graphic at the top of the page The object that is bookmarked must be a graphic, not text.

2. From the Behavior drop-down list in the Internet toolbar choose Bookmark

3. In the Internet Bookmark box enter a descriptive name for the bookmark, such as

“home_page” or “page_4_bottom” and pressENTER,as shown in Figure 28-1

4. Select another object or button or piece of paragraph text on the same page or on another page in your document This is the object that when clicked will take your user to the object you previously bookmarked

5. From the Behavior drop-down list in the Internet toolbar, choose Link

6. From the Internet Address drop-down list, choose the Bookmark name you gave to the object in step 3 For example, if “Home page” was the bookmark name you used, you would see an entry like this: _PAGE1#Home page, as shown in Figure 28-2

28

FIGURE 28-1 A bookmark object can be on any page of a multi-page document you want to

publish as a website

FIGURE 28-2 Use the target for the Bookmark you find on the Internet Address drop-down

selector

You can also enter a fully qualified URL in the Internet Address field to link to the

bookmark The URL would take the form of the web page’s address, followed by a pound

(#) sign and then the bookmark name For example, a website’s home page is usually named

index.html So a bookmark named “picture” on the index.html page would be typed in as

http://www.mysite/index.html#picture

If you are not familiar with how to write valid HTML hyperlinks and link anchor

names or IDs (called bookmarks in CorelDRAW), consult your favorite HTML

manual or the World Wide Web Consortium (W3C) page on Links and Anchors at

http://www.w3.org/TR/html4/struct/links.html#h-12.2.1.

Web Properties and the Object Properties Docker

You can use the Object Properties docker, shown in Figure 28-3, as an alternative to using

the Internet toolbar While you can apply many of the same settings from here, rollovers

cannot be created from this docker To open the Object Properties docker to display web

object properties for a selected object, choose Window | Dockers | Properties, or more

simply pressALT+ENTER With the Object Properties docker open, click the Internet (globe

icon) tab

28

FIGURE 28-3 The Object Properties docker provides an alternative way of applying common

Internet properties to objects

Behavior Internet Address (URL)

Target Frame ALT Comments Hotspot Shape Hotspot Options

Using the Links and Bookmarks Docker

Use the Links and Bookmarks docker to view, name, and apply preexisting bookmarks to objects To open the docker, shown in Figure 28-4, choose Window | Dockers | Links and Bookmarks

Purely for convenience, this docker automatically lists the currently applied bookmarks and includes commands for linking, selecting, and deleting existing bookmark links The bookmarks can be created only by using the Bookmarks option from the Behavior selector

in the Internet toolbar You will find this docker most useful if you are trying to find a particular bookmarked graphic in a multi-page document that contains a lot of bookmarked items

To find a bookmark in your document, open the Links and Bookmarks docker, and then double-click an entry in the Name column You’re automatically taken to the page, and the bookmarked object is selected

To create a link to a bookmark, first select the object to which you want to link a bookmark, click the New Link button, and then type the name in the open field on the Name list

FIGURE 28-4 The Links and Bookmarks docker provides a convenient way for you to manage

bookmarks applied to objects

Refresh List

New Link New Bookmark New Linked Image

Delete

Update Linked Image

Open Link

Break Link

Applying a Page Background

If the background of your web page design calls for something other than white, you’ll need

to apply a unique background color or tiling background pattern Page background is applied

using the Page Setup pane of the Options dialog (CTRL+J), shown in Figure 28-5 To access

this dialog quickly, click to expand the listing under Document, and then click Background

in the tree directory to view the available options

Although it might seem logical to create a separate background object for your page and

to apply your background properties to it, this can cause problems when it comes time to

export your page The Background should be chosen in this dialog as No Background (the

default), a Solid color, or a saved Bitmap

Choose Solid to access the color selector for choosing a uniform color Choose Bitmap

and click the Browse button to select a bitmap image as the tiling background

While Bitmap is selected and a bitmap file has been specified, the Source and Bitmap

Size options in the dialog become available The Source option lets you link to and embed

the bitmap with your document, but it has no bearing on how exported web pages are

created The Bitmap Size options let you use either Default Size (the inherent size of the

original bitmap) or a Custom Size as the size By default, the Print And Export Background

option is selected, which should remain so to be included as one of your web page elements

28

FIGURE 28-5 Use these options to apply color or tiling bitmap backgrounds to your web

document pages