Skip Main Navigation

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Rounded to a higher level: Part 2

Horizontal Glider Magic with Curved corners

Editing the curved background images

Your client calls and tells you to change the layout from 800 pixels wide to 630 pixels. The curved background images are already made and designed for an 800 pixels wide layout. You'll need to edit the curved images to make them narrower and edit your page CSS to make your layout narrower. Let's get it done.

Locate the Fireworks folder provided in this tutorial's download archive and open HGM-Rounded.png in Fireworks.

Activate the Subselection tool by clicking its icon (highlighted in blue below) on the main toolbar.

Select the yellow curved object at the top of the Fireworks canvas with the Subselection tool:

When selected you will notice that there are 3 clear (non-filled) selection points at each end. We're going to select all 3 points on the right end and move them 170 pixels to the left.

Click inside the first selection point on the right edge of the yellow curve. When you select the point its fill will turn from clear to blue and 2 additional round selection points will appear. Hold your Shift key down and click the remaining clear points so that all of the selection points on the right side are filled.

Hold down your Shift key and press your left arrow key 17 times to move the selection points 170 pixels to the left. When done, the W (width) box on your Property Inspector will indicate a width of 630.

Now select the green curve and repeat the process to make it 630 pixels wide.

Adjust Slice Widths

Now that your curves have been reduced to 630 pixels wide you will need to make a similar change to the widths of their slices. Turn on the Web Layer so you can see the slice overlays. In your Layers panel, click inside the first box to the left of the Web Layer heading so that an "eyeball' appears:

Now you will see the green slice overlays. Select the top curve's slice and change the value in the W box on the Property Inspector from 800 to 630:

Repeat for the bottom curve.

Exporting the revised images

Now that you've changed the width of the curves, you'll need to export the revised images to your web site.

Choose File > Export.

The export dialog will open.

Browse to your assets/img folder.

Use the following settings:

File name: Since you are exporting slices, the File name is irrelevant so you can ignore it.

Export: Images Only

HTML: None

Slices: Export Slices

Current page only selected (checked)

Click Save

An overwrite prompt will pop up

Click OK

Note: At this time you can turn off (hide) the Web Layer until it is again needed.

Save the Fireworks file.

Switch to workpage.htm in Dreamweaver.

Preview in a browser:

The curved background images are narrower than the layout. Let's change the width of the wrapper DIV so that everything matches up again.

In your CSS styles panel, look inside the p7HGM_rounded.css file and locate the #wrapper rule. Change its width value from 800px to 630px.

Preview in a browser.

Perfect!

Editing the Trigger Images

As you've probably noticed, HGM-Rounded.png also contains the trigger images.

The first row represents the default image state.

The second row contains the _over images—the images that display when you hover over a trigger.

The third row contains the _down images—the images that display when a trigger's associated content panel is showing.

These names correspond to HGM's Image Naming Convention as described in the HGM user guide.

If you look at the Web Layer in your Layers panel (without turning it on) you'll see each image listed by state. The names in the Web layers listing correspond to the image file names that are generated when you export the slices.

To edit the text labels, simply double-click inside the text. If you need to change a button's dimensions, select the button and change the W (width) or H (height) value on your Property Inspector. Then turn on the Web Layer and adjust the dimensions of the relevant slice to match. Slice dimensions must be identical for each image's 3 individual states.

Adding a new Trigger Button

To create a new Trigger button, select all 3 images in the last column. In this case, select the yellow, blue, and green Contact buttons, along with the text labels.

Choose Edit > Copy

Choose Edit > Paste

Do not move your cursor or click anywhere on the canvas. The copies were pasted on top of the originals and now you need to move them. Hold down your Shift key and press your right arrow key several times until you see that the copies have cleared the originals:

Change the label text and dimensions to suit.

Creating slices for the new images

Your new images will need slices.

Select the first new rounded rectangle

Choose Edit > Insert > Rectangular Slice

With the new slice selected, look for it in your Layers Panel. You may have to scroll the panel to find it. It will be named Slice.

Double-click the name in the panel to edit it. Change the name to a relevant one based on the text label.

Now create slices for the remaining 2 button states and name their slices with _over and _down suffixes.

there is a problem. The new slices are not as tall as the originals. The callout arrow at the bottom of the _down state images needs to fit inside the slice. Since each image (and all of its states) needs to be the same height, you need to increase the height of each of the new slices to 78 pixels.

Select each of the new slices and enter 78 in the W box on your Property Inspector.

When you're done, Export your images back to your assets/img folder. Remember to accept all overwrite prompts.

Add any new trigger buttons you've created to your widget using the HGM interface.

Tabbed HGM?

If you'd like to see how you can make a Tabbed HGM widget, please go on to Part 3.

Back to Part 1 | Optional: Part 3: HGM Tabs