Rounded to a higher level
Horizontal Glider Magic with Curved corners
Learn how to beautify your Horizontal Glider Magic widget with curved image-based triggers and curved content corners.
- Horizontal Glider Magic version 1.2.3 or higher
- Adobe Fireworks for image editing
Note: Fireworks is Adobe's default web image editor and is the most efficient tool for the job. Photoshop users can complete this tutorial but will need to recreate the images in that application.
Before you begin
Download the working files for this tutorial in zip format. Unzip the files and folders inside a defined Dreamweaver web site. The zip file contains the following files and folders:
Open the workpage
Open workpage.htm in Dreamweaver. The page looks like this:
We've provided a basic layout for you, with a masthead, a container for your widget, and a footer. The layout wrapper is set to 800 pixels wide and is centered. 2 background images create the curved content box. The first one will be assigned by you, as part of the tutorial, in your HGM style sheet. The second image, bottom curve, is carried as a background on the supplied footer in the p7HGM_rounded.css file that is linked to the workpage in this rule:
background-position: left bottom;
We don't want the image to tile, so we set it to no-repeat. The image is positioned left bottom because the bottom is where the curve is. The image is 19px tall so we set padding-bottom to 19px to ensure that the image renders completely no matter how much or little content is in the footer.
Note: To ensure that you do not lose your work Save your page after completing each step.
The Trigger Images
We've made a placeholder, above the footer, which is where you'll create your widget. Before you do, let's discuss the HGM triggers that you will be using. In order to most efficiently achieve curved triggers, we'll be using actual images—not background images. HGM has full native support for multi-state images making the task very easy.
Note: Using images is 100% search engine friendly and accessible, as long as you assign an ALT attribute.
We've made the images for you so that you can create your widget quickly. Afterwards, we will show you how the images were made and how you can edit them.
Create the HGM widget
Switch to Code View (or Split View) and locate the placeholder text HGM INSERTION POINT.
HGM INSERTION POINT
Select the placeholder text and press your delete (del) key, leaving your cursor on the now-blank line between the wrapper DIV and the footer DIV:
cursor stays on this blank line
Click the HGM icon on the common section of your Insert Bar (or Insert Panel) or choose Insert > Studio VII > Horizontal Glider Magic by PVII. The HGM interface will open.
In the Control Position Options section, uncheck Show for Prev/Next. Then set Trigger Links to Above Panel.
Select Trigger Text in the Panels area and then click the Browse button (highlighted in blue below).
Browse the img folder inside the assets folder and select intro.gif
Click OK. The default Trigger Text is relaced by the image name and the trigger image is listed in the Trigger Image box, along with its path.
Don't forget to add Alt Text for accessibility.
Click the Add button to create a second trigger and browse to, and select, what.gif as the image. Repeat to create 2 additional triggers and assign to them the why.gif and contact.gif images.
Important: Make sure to set Trigger Links to Above Panel.
Leave the general Options set to their default values.
For Image Swap Options, select Normal, Over and Open Images. Deselect (uncheck) Rollover Open State and Rollover Mark State.
For Style Theme select 05-Image Based.
Editing the HGM CSS
Let's add some horizontal white space between the buttons. Open your CSS Styles panel in Dreamweaver (Window > CSS Styles). Set your panel to show All:
Locate and expand the p7hgm05.css style sheet.
Select the .p7HGM05 .p7HGMtrig li rule and set its margin-right value to 6px.
Preview the page in a browser:
Looking good. We'll need to remove the border from the HGM viewport, add a background color, and then assign the background images that complete the curve.
In your CSS styles panel, locate the .p7HGM05 .p7HGM_viewport_wrapper rule and set its border value to 0
Now click the Add Property link and select background-image as a new property.
Click the browse folder icon to the right of the value box.
Browse to and select topper.gif:
Click the Add Property link to add another new property.
Select background-repeat and set its value to no-repeat.
Click the Add Property link to add another new property.
Select background-color and set its value to #FFD940.
Preview in a browser:
Link Focus Outlines
Browers possess an accessibility feature called focus outlines that give visual feedback when a link has focus. This is important to those who must use a keyboard to navigate web pages. Preview in a modern browser, click the "What" link and look closely at it:
Now reload the page and use your Tab key, instead of your mouse, to access the trigger links. Note how the browser draws the same foucs rectangle to provide visual feedback and let you know which link you are on. Also note that the the link is now blue as the HGM system has taken charge to provide its own visual feedback—swapping the What button to its _over state.
Because HGM has automated this feature when using image-based triggers, you can use CSS to disable the browser's default focus rectangles if you want. To do so you'll need to make a quick edit to the HGM style sheet.
In your CSS styles panel, locate the .p7HGM05 .p7HGMtrig a rule
Click the Add Property link to add a new property
Type the word outline in the property box
Note: The outline property is not available in Dreamweaver's drop-down list of properties so you'll need to type it in. This is a Dreamweaver oversight as the outline property is a valid CSS2.1 property.
Set its value to 0
Good job! Now don't forget to save your work.
Adding Headings inside content panels
Now if you want, you can add a heading in each panel. To do so, place your cursor at the beginning of the boilerplate content in a panel, press Enter to create a new line, and type your heading on the new line. Use the Property Inspector format box to format your text as a Heading 3.
Select Heading 3.
Repeat to add headings at the top of the other panels.
Next: Editing the Images