Dec.
 2004

Editor’s note: Newspapers & Technology Production Manager Chere’ Martin is in the middle stages of making her transition from print designer to Web designer. Her column, which has appeared over the past few months, chronicles her journey in an attempt to help other designers who might be making their own migration to the “wild wild Web.”

The departure from print design to Web design is never more apparent than after a page design has been sliced and reassembled. Only after this work is complete is one able to pursue design endeavors specific to Web work - undertakings such as buttons and interactivity.

Buttons in particular are an important design aspect of Web pages. But users don’t give these buttons much thought.

Their importance, however, cannot be overstated. After all, Web surfers want to be entertained as they travel from site to site and, for a designer, making things do cool stuff is never dull. Bottom line? Make every page an interactive dance floor for your cursor.

How you create your buttons is a matter of preference. Adobe ImageReady and Macromedia Fireworks both include functions that you can use to create those little gems - be as simple or elaborate as you choose.

You can even create buttons in Photoshop if you’re confident enough to work without the ultra-friendly export processes the aforementioned programs supply.

Light up the page

Because the “up” button state is taken care of with your static page design, you really only need to create one new state - the “mouseover,” otherwise known as a rollover button.

If you’re a real dance-a-holic, you can even set up a “mouse down” or “click” state. For space considerations, we’ll discuss making buttons in ImageReady only. If you’re comfortable working in layers, creating the different button states will come naturally to you in whatever program you choose.

From Photoshop, open the image that corresponds with your button area. This should be a fairly small slice as each button will need to be in its own cell within the Dreamweaver table. Switch over to ImageReady and open your layers pallet. Create a layer for each new button state (see Figure 1). You can even work in multiple layers for each button but will need to merge those layers for final button export. 



Fig. 1: Making buttons in a layer format such as this allows you to compare the different states and how they will look when changing quickly as they would within a Web site in use.
Graphic: Vachon International

Once you are satisfied with your various buttons, go to File and Export Layers as Files (see Figure 2). If you export all layers, you will end up with as many files as layers you’ve created. If you look again at Figure 1, you can see that I left the “up” state in this file so I could compare quickly the button in its various states. 



Fig. 2: The Export Layers as Files window in ImageReady.

In order to not end up with an extra file, I can either export my click and rollover layers separately or delete the up layer before doing an export of all layers.

Another simple step is to leave the layer and delete the extra file created. Under format options of the export window, you should probably stick to the file type most of your interface is already saved as.

Now, a quick check of your interface folder will show the buttons you’ve just exported, all sporting similar names to the original file. Make sure your all your files are present and line-dancing like good little cow-buttons.

Interactivity activated

Readers of my last column (See Newspapers & Technology, October 2004) will remember that one way to assemble your interface content in Dreamweaver is to use tables.

Let’s open your assembled page and access those tables to make your buttons interactive.

Select the cell that contains the button you want to equip with rollover action. (If you’ve already placed the static page file, delete it before placing the rollover.) From the menu, select Insert > Image objects > Rollover Image and a new window will pop up allowing you to browse your computer files to the proper original and rollover images (see Figure 3).



Fig. 3: The Image name becomes a reference within the HTML code and you should name the file something meaningful in order to reference later within the code if needed.  It’s also important to have the Preload rollover image option checked. This causes all the rollover images to download when the site’s page is first accessed in order to avoid any noticeable delays in image change for the user.

To test your buttons’ functionality you can publish your files to a browser while working in Dreamweaver under File > Preview in Browser. This will open your file within a specified browser environment where you can test your button functionality.

Notice that when published, not only does the rollover action work, the arrow cursor changes to the familiar “pointy finger” icon that commonly denotes an active link. No, it isn’t coincidence that you suddenly want to strike a Saturday Night Fever pose.

Traveling dance troupe

Now that your buttons possess an alter-ego, it’s time to make them actually do something useful by creating links. Links are the fuel that move a user from page to page or to another Web site altogether.

Select the cell containing the rollover image for which you want to create a link. Look at your properties window (see Figure 4). In the center of the window you can see “Src,” which denotes source - specifying the location of the file containing the image in the selected cell. Below that is another option called “Link” where, by clicking the folder icon on the right, you are able to browse and select the new page file or even enter another Web site.



Fig. 4: The Properties window is located under Window in your menu bar. If using an external Web site as a link, you must enter the entire address as: http://www.website.com, not just www.website.com.

Note the Target option just below. Choosing _self causes the linked file to open within the same browser window while _blank opens a new window leaving the original window open and available. The difference between the two options: Do you want to leave the dance club entirely or get your hand stamped so you can return later?

Footloose

A simple method to create links within Dreamweaver is to create hot spots. It’s easier than creating rollover-type actions and easily identifies an area of your page as a link.

For hot-spot action, you’ll need to open your Properties window (see Figure 4).  In the lower left corner you will find tools to draw a rectangular, circular or a polygon shape for your hot spot.

Figure 5 shows how I chose to use the rectangular tool button over which I simply clicked and dragged to match the shape of my overall button area. 



Fig. 5: Hot spots are quick, easy ways to create links within your site. The aqua-blue area with handles in the upper-left corner displays the hot spot area as seen within Dreamweaver.

You can define your link by using the properties window to browse the link and create the target window. Now, when your page is published, the hot spot transforms your cursor to a pointy-finger without the fancy rollover function. Strike a pose.



The quick and simple hyperlink window within Dreamweaver.

The vogue

All of this dancing around with fancy multimedia authoring tools doesn’t mean to overlook the text hyperlink, the familiar neon blue line that underscores millions of linked words now promenading around the World Wide Web.

Create this kind of link by highlighting some editable text on your page, go to Insert > Hyperlink and open a window with, by now, familiar options. Browse to your link, note your target and voila: a text hyperlink. You’re a star, baby.

Chere’ Martin, production manager at Newspapers & Technology, has a bachelor of arts degree in graphic design from the Art Institute of Colorado. For more information on her transition to Web designer, please visit her Web log at www.livejournal.com/users/printgirlonline. This is an interactive blog, so feel free to post questions or comments there.