P I L A R C H O W

5/1/2012 – PART 5

CONTENT

• This week, we’ve done the 5th part of the tutorial, which is adding a spry menu

STEP 1 – INSERT AND POSITION THE SPRY MENU BAR WIDGET

• First we inserted a spry menu

• We selected the #container rule and created a new CSS rule and positioned it

• Then we created a new CSS rule to re-position the menu bar because it wasn’t in place at first.

STEP 2 – CHANGE THE WIDTH OF THE MENU WIDGET BAR

• We detached the spry menu css, and attached a new style sheet

• On the ul.MenuBarHorizontal rule, we added a new rule. We changed the text to uppercase. We also changed the width from 8em to 7em

STEP 3 – EDIT THE MENU BAR WIDGET’S TEXT AND LINKS

• We changed the 4 item names

STEP 4 – ADD A TOP-LEVEL HEADING TO THE PAGE

• First we clicked inside the banner, and selected <div#banner> in the Tag selector, which is at the bottom of the page. Then we pressed the left arrow once, which was the point to were we put the <h1> tags. In the property inspector, we chose Heading 1 from the Format pop-up menu, and the pair of <h1> tag was inserted in between the two <div> tags

• We added a new CSS rule and changed the positioning

WHAT WE PRODUCED IN THE END