2. CONTENT
• This week, we’ve done the 5th part of the
tutorial, which is adding a spry menu
3. STEP 1 – INSERT AND POSITION THE
SPRY MENU BAR WIDGET
• First we inserted a spry
menu
4. • We selected the #container rule and created a
new CSS rule and positioned it
5.
6. • Then we created a new CSS rule to re-position the
menu bar because it wasn’t in place at first.
7.
8. STEP 2 – CHANGE THE WIDTH OF THE
MENU WIDGET BAR
• We detached the spry menu
css, and attached a new style
sheet
9. • 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
10. STEP 3 – EDIT THE MENU BAR WIDGET’S
TEXT AND LINKS
• We changed the 4 item names
11.
12. 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
13.
14. • We added a new CSS rule and changed the
positioning
