Creating your first website – Part 5: Adding the Spry menu

Welcome to Part 5 of this tutorial series on creating your first website. This tutorial shows you how to add a Spry Menu Bar widget to the index page for Check Magazine, a fictional publication. A Spry Menu Bar widget is a set of navigational menu buttons that link to other pages of your website. In many cases, the menu displays submenus when a site visitor hovers over one of the buttons (though you won't be using submenus in this tutorial). You may have heard of a navigation bar for a website—that's essentially what I'm talking about here. Adobe calls its navigation bar a Spry Menu Bar widget, because the widget is a built-in part of the Adobe Spry framework for Ajax and comes installed with Dreamweaver CS3 and later.

The tutorial also shows you how to customize the widget by editing its CSS rules.

Note: For more information about the Spry Menu Bar widget in general, see Working with the Menu Bar widget in Dreamweaver Help. For more information about the Spry framework for Ajax, see About the Spry framework in Dreamweaver Help.

In this tutorial, you'll begin with the index page you added text to in Part 4, Adding the main image text. If you did not complete that tutorial, you must complete it before proceeding, or download first_website_pt4_completed.zip and begin with those files. If you haven't completed Part 1: Setting up your site and project files, you will need to complete that tutorial as well.

Your task in this tutorial is to add a Spry Menu Bar widget to the banner area of the Check Magazine home page. You'll also learn how to customize the menu bar by editing its CSS rules. Figure 1 shows what the banner area will look like in a browser after you've added the menu bar.

Basically what you'll do to accomplish this task is very similar to what you did in Part 4, Adding the main image text, of this tutorial series. You'll add another content element to an already specified div (in this case, the new content element is a Spry Menu Bar widget, and the already specified div is the banner div), and use a combination of relative and absolute positioning to move the new element into place.

Dreamweaver lets you insert two kinds of Menu Bar widgets: vertical and horizontal. In this tutorial, you'll insert a horizontal Menu Bar widget, as pictured in the previous section.

1. In Dreamweaver, open the index.html file that you created in Part 4: Adding the main image text.
2. Click in the banner div to select the banner image. Then press your right arrow key once to place the Insertion point to the right of the image, but still inside the div. You should see a large blinking Insertion point in the banner div (the top div.
3. Click the Split view button to make sure the Insertion point is in the banner div between the <img> tag and the closing </div> tag. (This is very important; see Figure 2).

4. Select Insert > Spry > Spry Menu Bar.

   Tip: You can also insert a Spry Menu Bar widget from the Spry category of the Insert panel. The Spry category of the Insert panel shows you all of the Spry widgets available in Dreamweaver.

5. In the Spry Menu Bar dialog box, leave Horizontal selected and click OK.

   The Menu Bar widget, with its default color scheme of black text and gray background, is inserted in the page, but pushes the main image to the right (see Figure 3).

6. You'll fix the layout in a moment, but take a look at the code for the Menu Bar widget in Code view. The Menu Bar widget is actually a set of unordered lists nested inside a container <ul> (unordered list) tag. Each menu item is in <li> (list item) tags, and everything is styled with CSS. The container <ul> tag is assigned the CSS class attribute MenuBarHorizontal , the main attribute referenced in the many CSS rules responsible for the widget's formatting.

   Note: I have not talked about CSS class rules in this series, and I'm not going to go into an in-depth explanation of them here; but essentially a class rule is a type of CSS rule that lets you format any HTML element on the page. Class rules do not restrict you to formatting specific tags or elements with IDs. For more information on class rules, see Understanding Class Rules in Dreamweaver

7. The first thing you should do after inserting a Spry widget is to save the page.

   The Copy Dependent Files dialog box appears, stating that Dreamweaver is copying a number of supporting files to your local site. These files are all related to the display and functionality of the Spry Menu Bar widget. In particular, the SpryMenuBar.js file contains all of the information that drives the widget's functionality, whereas the SpryMenuBarHorizontal.css file contains all of the CSS rules that dictate the widget's formatting.

8. Click OK to close the Copy Dependent Files dialog box and install the dependent files.

   Dreamweaver adds a SpryAssets folder to the root folder of your site. (You might need to click the Refresh button in the Files panel to see the new SpryAssets folder.) This folder contains all of the files necessary for the Spry Menu Bar widget to function. Later, you'll need to make sure you upload these files to the web server when you publish your page on the Web.

   You'll also notice that the Related Files toolbar now lists the Spry files associated with the index page. That's because when you saved the page after creating the widget, Dreamweaver automatically attached the required files to the page for you.

9. Now, let's fix the layout.

   To position the Spry Menu Bar correctly, you need to create a rule for the banner div. It's generally a good idea to keep your style sheet in logical order, so the new rule should come after the body rule. Dreamweaver always inserts a new CSS rule immediately after the rule that's currently selected in the CSS Styles panel.

   Open the CSS Styles panel, and make sure it's in All mode. Select the #container rule, and click the New CSS Rule button (see Figure 4).

10. Use the following settings in the New CSS Rule dialog box:
    • Set the Selector Type pop-up menu to ID.
    • Type #banner in the Selector Name text box.
    • Make sure the Rule Definition pop-up menu is set to check_cs5.css.
11. Click OK to open the CSS Rule Definition dialog box, and select Positioning from the Category list on the left.
12. Select relative from the Position pop-up menu, and click OK to close the dialog box.
13. The main image snaps back into position, with the menu bar occupying a block of its own between the banner and main images (see Figure 5).

14. Move your cursor pointer over the menu bar. This triggers the display of a turquoise tab at the top left. Click this tab to select the menu bar (see Figure 6).

15. In the Property inspector, change the menu's ID (in the text box just below Menu Bar) from the default MenuBar1 to check_menu, and press Tab to make the change. The new ID is displayed in the Property inspector and in the Tag selector at the bottom of the Document window (see Figure 7).

16. You can now create a new CSS rule to position the menu bar.

    With the menu bar still selected in Design view, open the CSS Styles panel, select #banner , and click the New CSS Rule button.

17. In the New CSS Rule dialog box, the Selector Name text box should be automatically populated with #container #banner #check_menu .

    Click the Less Specific button twice to leave just #check_menu .

    Make sure that Rule Definition is set to check_cs5.css, and click OK.

    Note: If the correct values weren't automatically selected in the New CSS Rule dialog box, just set them manually. When setting the values manually, select ID from the Selector Type pop-up menu.

18. In the CSS Rule Definition dialog box, select Positioning from the Category list on the left.
19. In the Positioning category, use the following settings:
    • Position: absolute
    • Top: 50 px
    • Right: 0 px
    • Bottom: 0px

    Click OK to close the dialog box.

20. Check the position of the menu bar in Design view. It's not quite right. It's aligned with the right edge of the banner image, but isn't aligned correctly at the bottom (see Figure 8).

The reason for this is because there are conflicting top and bottom offsets for the #check_menu style rule. The ultimate aim is to align the bottom and right of the menu bar with the bottom and right edges of the banner image, in the same way as you aligned the main_text div against the guides in part 4 of this tutorial series.

Unfortunately, the menu's own style rules prevent Design view from displaying the menu in the correct position. So, the top offset of 50 pixels has been added as a temporary measure to make life easier while working in Design view.

21. Select #check_menu in the CSS Styles panel, and move your cursor pointer to the left of the top property in the Properties pane until the Disable CSS Property icon appears (see Figure 9).

Click once to disable the top property temporarily. If you're lucky, the menu should snap into its correct position, but it's more likely to jump to the top of the banner div and remain inaccessible in Design view.

Note: If you're using an older version of Dreamweaver, you'll need to comment out the top property manually in the style sheet.

22. Click the Live View button. The menu is displayed where you want it—aligned with the right and bottom edges of the banner image (see Figure 10).

23. Click the Live View button to exit Live View, and re-enable the top property by clicking the disabled symbol to the left of its name in the CSS Styles panel.
24. Select File > Save All Related Files to save all your changes.

The appearance of the Spry Menu Bar widget is controlled by the CSS in the SpryMenuBarHorizontal.css file that Dreamweaver just added to your site. The SpryMenuBarHorizontal.css file resides in the SpryAssets folder (see Figure 11).

You can (and now do) have multiple CSS files attached to a single page. For example, if you add more Spry widgets to the page, Dreamweaver creates and attaches a new style sheet for each of the new widgets you add.

1. Double-click SpryMenuBarHorizontal.css in the Files panel to open it in the Document window. You'll see that the CSS rules that format the Menu Bar widget are long and—if you're not familiar with CSS—confusing. Unfortunately, of all the Spry widgets that come with Dreamweaver, the Menu Bar widget is the most complicated animal, and in order to avoid confusing you any more than you need to be, I'm going to avoid talking in depth about these rules.

   Note: There's an in-depth tutorial about customizing a Spry menu bar on my website at http://foundationphp.com/tutorials/sprymenu/customize1.php.

   Luckily, Dreamweaver makes it somewhat easier to customize the Menu Bar widget by giving you the ability to edit the widget's CSS rules in the CSS Styles panel.

2. Any changes made to SpryMenuBarHorizontal.css automatically affect every Spry menu bar in the same site. So, before editing the style sheet, it's a good idea to make a copy, and make the changes to the copy. That way, if you make a mess of the menu, you can always revert to the original file.

   With SpryMenuBarHorizontal.css the active document, select File > Save As. In the Save As dialog box, navigate to the styles folder in the Check Magazine site, and save the file as check_menu.css. When Dreamweaver asks if you want to update the links, click Yes.

3. Close both SpryMenuBarHorizontal.css and check_menu.css.
4. You need to detach SpryMenuBarHorizontal.css from index.html and attach check_menu.css in its place.

   In the CSS Styles panel, select SpryMenuBarHorizontal.css, and click the trash can button at the bottom of the panel to unlink the style sheet (see Figure 12).

5. Click the button that looks like a chain link at the bottom of the CSS Styles panel to attach a new style sheet (see Figure 13).

6. In the Attach External Style Sheet dialog box, click the Browse button to navigate to check_menu.css in the styles folder, and click OK (Windows) or Choose (Mac OS X) to select it. Then click OK to close the Attach External Style Sheet dialog box.

   You should now have two style sheets listed in the CSS Styles panel: check_cs5.css and check_menu.css (see Figure 14).

7. Save index.html. The two style sheets should be listed in the Related Files toolbar, together with SpryMenuBar.js, the external JavaScript file that controls the menu (see Figure 15).

8. Click the Current button in the CSS Styles panel. (You've been working in All mode up until now.)
9. In the Document window, select the Menu Bar widget by clicking its turquoise tab. (Hover over any part of the widget to make the tab appear.)

   Tip: You can always tell which page element is selected by looking at the Property inspector (Window > Properties). In this case, you'll be able to tell if the Spry Menu Bar widget is selected if you see its properties displayed in the Property inspector.

   You'll notice a few things happening in the CSS Styles panel after you've selected the widget. One is that the #check_menu rule appears in the Properties pane of the CSS panel. That's because the #check_menu rule governs the <ul> container for the widget (the tag you've selected). The other thing you'll notice is the appearance of properties for the #check_menu rule in the Properties pane. Even with a large monitor, you'll probably need to resize the CSS Styles panel to see everything I'm talking about. You can resize the panel by dragging the bottom boundary of it downwards. This will reduce the height of the Files panel, but that's OK. Alternatively, double-click the Files panel tab to close it. For now, you need as much real estate in the CSS Styles panel as possible (see Figure 16).

Tip: You can also resize any of the three separate panes in the CSS Styles panel by dragging their top or bottom borders.

OK, now that you can see everything you need to see in the CSS Styles panel, you can begin editing the widget. But before you proceed, ensure that the Rules pane in the CSS Styles panel looks like Figure 16. THIS IS VERY IMPORTANT. If it doesn't, chances are you have About view showing in the Rules pane, rather than the cascade of rules. If you have About view showing in the Rules pane, click the Cascade button in the upper right corner of the Rules pane. (There are only two buttons there; it's the one on the right.)

10. Click the ul.MenuBarHorizontal rule in the Rules pane to select it. When the ul.MenuBarHorizontal rule is selected, the full name of the rule appears below in the title bar of the Properties pane.
11. Click the Add Property link in the Properties pane. This opens a pop-up menu.
12. Click the pop-up menu arrow to reveal the menu, scroll down to find the text-transform property, and select it.
13. From the value pop-up menu to the right, select uppercase.

    The text in your Menu Bar widget changes to uppercase.

14. Now click inside the text ITEM 2 in the Menu Bar widget. (Do not select the text, simply click somewhere inside of it.)

    Three more rules appear in the Rules pane of the CSS Styles panel, with the last rule selected. There are now a total of eight rules listed, five of them related to the Menu Bar. (You might need to expand the Rules pane to see them all.)

15. In the Rules pane, click the third Menu Bar rule in the list, the ul.MenuBarHorizontal li rule.
16. In the Properties pane, edit the last property listed ( width ). Click the 8 em value of the width property to make it editable, and then change the width to 7 em (see Figure 17), and then press Enter/Return.

The width of the menu items in the menu bar is reduced to 7 em. Don't worry that the menu is no longer aligned with the right edge of the banner image. You'll fix that in a moment.

Note: When you see strikethrough lines in the CSS Styles panel (for example, the width property is struck through in Figure 17) it means the property doesn't directly affect what's currently selected in Design or Code view. Your cursor is inside the text, but the width property here governs the surrounding <li> tags, not the text itself. Of course, changing the width property of the <li> element has an indirect effect on the text inside.

If you want to see what I mean, hover over the edge of the ITEM 2 menu item in Design view until you see its border outlined in red, then click to select the item. When you select the item, all strikethroughs in the CSS panel should disappear. That's because all of the rules you're now viewing directly affect that selection (the <li> tag). And if you're still not convinced, just look down at the Tag Selector at the bottom of the Document window. The <li> tag should be selected down there as well.

If you do all of this, be sure to click back inside the ITEM 2 text when you're finished. You need to have the <li> tag deselected for the rest of the following tasks.

17. In the Rules pane, click the fourth Menu Bar rule in the list, the ul.MenuBarHorizontal a rule.
18. In the Properties pane, select the padding property and click the Delete CSS Property button, the trash can icon (see Figure 18).

After you delete this rule, the Menu Bar should be much shorter in Design view. It also springs back in alignment with the right edge of the banner image.

Now that you've reduced the default size of the menu bar, you'll edit the menu bar items themselves. But before you do that, I want to show you how the default submenus of the Menu Bar widget work.

1. Click the Live View button to enter Live View.
2. Run the cursor over the menu bar and observe the interaction. Items 1 and 3 have submenus. If you hover over Item 3, you'll see that the Item 3.1 submenu has a submenu (see Figure 19).

Menu Bar widgets can have as many submenus as you want. However, the Dreamweaver Property inspector only supports two levels of submenus. To add more submenus, you need to work directly in the code.

You don't need to worry about submenus right now though. You're actually going to get rid of all of them for this website.

3. Click the Live View button again to exit Live View.
4. Select the Menu Bar widget in the Document window by clicking its turquoise tab.
5. In the Property inspector, make sure Item 1 is selected in the first column.
6. Select the submenu item, Item 1.1, in the second column, and click the minus (Remove menu item) button (see Figure 20).

7. Delete Item 1.2 and Item 1.3 as well.
8. Select Item 3 in the first column.
9. Select the submenu item, Item 3.1, in the second column, and click the minus (Remove menu item) button.

   When you try to delete this submenu, Dreamweaver alerts you that you are also deleting the submenu's submenu (referred to as its children). Click OK.

10. Delete Item 3.2 and Item 3.3 as well.

    Now that you've deleted all of the submenus, you are ready to edit the menu bar text.

11. Select Item 1 in the first column again and then do the following:
    • In the Text text box, type Features.
    • In the Link text box, type news.html (see Figure 21).

Note that the Menu Bar widget is changing before your very eyes. You don't need to type capital letters in the Property inspector because you already defined a CSS rule that makes all letters in the Menu Bar widget capital no matter what.

Additionally, as in an earlier tutorial, you're going to use the news.html page as your sample page for all links. But if you were building the website for real, you would be linking to separate pages.

12. Select Item 2 in the first column of the Property inspector and then do the following:
    • In the Text text box, type Fashion.
    • In the Link text box, type news.html.
13. Select Item 3 in the first column of the Property inspector and then do the following:
    • In the Text text box, type Lifestyle.
    • In the Link text box, type news.html.
14. Select Item 4 in the first column of the Property inspector and then do the following:
    • In the Text text box, type Calendar.
    • In the Link text box, type news.html.

    Your Menu Bar widget now looks like Figure 22.

You're almost there. You just need to add one more menu item to the widget.

15. With the Menu Bar widget still selected, click the plus button above the first column in the Property inspector (see Figure 23).

Dreamweaver adds an Untitled Item to the menu bar.

16. With the Untitled Item selected in the first column of the Property inspector, do the following:
    • In the Text text box, type News.
    • In the Link text box, type news.html.
17. Click anywhere on the page to deselect the menu bar. Don't worry if the new item in the menu bar has dropped down below the other items.
18. Select File > Save All Related Files.
19. Click the Live View button to turn on Live View. Then click it again to exit Live View. The menu items should all line up in a single row.

Only a few more edits and the menu bar will be final.

1. Click anywhere inside the Menu Bar widget. For example, click inside the word Fashion.

   The five Menu Bar–related rules appear in the Rules pane of the CSS Styles panel.

2. Click the fourth Menu Bar–related rule, the ul.MenuBarHorizontal a rule.
3. In the Properties pane, click the black box in the color value field and use the eyedropper to select white ( #FFF ), as shown in Figure 24.

You'll notice that the text of the Menu Bar widget has changed to white. The ul.MenuBarHorizontal a rule is the rule that controls the text color of the menu items in their default state (that is, when you're not hovering over them).

4. Click the gray box in the background-color value field and use the eyedropper to select black ( #000 ).

   The background color of the menu items changes to black.

5. Click the Live View button and run your cursor over the menu items.

   Yikes! You're getting blue backgrounds upon hovering. That's another default property of the Spry Menu Bar widget, so let's change it.

6. Click the Live View button again to exit Live View.
7. Click anywhere inside the Menu Bar widget. For example, click inside the word Fashion.
8. The five Menu Bar–related rules appear in the Rules pane again.

   Click the last Menu Bar–related rule, the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule.

   Note: I know that it's impossible to see the full name of this rule in the Properties pane. You just have to trust me that it's the final rule listed in the Rules pane.

9. In the Properties pane, click the blue box in the background-color value field and use the eyedropper to select black ( #000 ).
10. Click the #FFF default color in the color value field, change it to #00ADEF (that's zero, zero, A, ...) and press Enter/Return (see Figure 25).

The #00ADEF color is blue, as you can see. It's the color the menu bar's text will change to when you hover over the links in the menu bar.

Note: Don't forget the hash sign at the beginning of the hexadecimal number for the color.

11. There's one more rule you need to edit before you're finished; it's a tricky one, hidden deep within the CSS file. You'll switch to All mode in the CSS Styles panel in order to make it easier to find and edit the rule.

    In the CSS Styles panel, click the All button to view All mode.

    As you know from previous tutorials, All mode shows you all of the rules that affect the page you're working on, not just the rules that affect the current selection.

12. Click the plus sign next to check_menu.css to expand the list of rules if it isn't already expanded. (Macintosh users need to click the arrow to expand the list.)

    The check_menu.css file name is at the bottom of the All Rules pane, so you might need to scroll or resize the pane to see it.

13. Scroll down and locate the rule that begins ul.MenuBarHorizontal a.MenuBarItemHover . . . (The rule is so long I don't even want to spell the whole thing out.) It's immediately below the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule that you were just editing in Current mode (see Figure 26).

Once you've located the rule, click it to select it.

You now need to do exactly the same thing that you did for the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule. Sorry, but it's just the way the CSS for the Menu Bar widget is written, and if you don't change this rule, too, the hover states will not work as you intend them to work.

14. In the Properties pane, click the blue box in the background-color value field and use the eyedropper to select black ( #000 ).
15. Click the #FFF default color in the color value field, change it to #00ADEF (that's zero, zero, A, ...), and press Enter/Return.

    Note that nothing has happened in Design view for awhile. Why? Because you've only been editing properties that affect the hover and focus states of the menu bar. To see those states, you need to enter Live View and test the widget again.

    But first, you need to save the CSS file so that the changes can take effect.

16. Select File > Save All Related Files.
17. Click the Live View button, and hover over the items in your menu bar.
18. The menu is still in the wrong place, so select the #check_menu style rule in the CSS Styles panel (it's in check_cs5.css), and click to the left of the top property to disable it. The menu drops into place. The hover background color is now black, and the hover text color is the blue you defined (see Figure 1).
19. Hold down the Ctrl key (Windows) or the Cmd key (Mac OS X), and click one of the links. The news.html page loads into Live View.

20. The menu in news.html is only an image, so click the Home or Back button on the Browser Navigation bar to return to index.html.

    Note: Live View navigation works only in Dreamweaver CS5. If you are using an older version of Dreamweaver, you need to test the links by previewing the index page in an ordinary browser.

21. Click the Live View button to exit Live View. The menu moves back to the top of the banner image. If you want to do any further work on it, re-enable the top property for the #check_menu style rule. However, the top property should remain commented out when the page is uploaded to a remote server.

It's unfortunate that Design view can't handle the position of the menu accurately, but that's what Live View is for—to test the way the page will look in a standards-compliant browser. Design view should only ever be taken as an approximation, although most of the time, it's a very close one.

There's a potential problem with the page: it doesn't have a top-level heading ( <h1> ). The design uses the banner image instead. This looks fine in a browser, but search engines and screen readers expect pages to be organized with a proper hierarchy of headings: <h1> at the top of the page, <h2> for sideheads, and <h3> for subsections. You rarely need to use deeper levels of headings, and you should never choose a particular level just because of its default size. As you have seen throughout this tutorial series, you can use CSS to change the default look of a tag.

The problem with adding an <h1> tag to this page is that it will destroy the design. There are two ways you can get round this problem, but they both have drawbacks. The simple way is to wrap the banner image in <h1> tags and expand the alt text so that it contains the same text as the banner image like this:

<h1><img src="images/banner.gif" width="968" height="100" alt="Check Magazine: Fashion and Lifestyle" /></h1>

You also need to add the following style rule to remove the default margins that browsers add to <h1> headings:

#banner h1 {

margin: 0;

}

The problem with this approach is that HTML headings should contain text, not images. Although search engines and screen readers will read the alt text, using an image is likely to trigger suspicions that you’re trying to show visitors different content from what’s in the underlying HTML. Google’s guidelines specifically warn against using hidden text, because it "can cause your site to be perceived as untrustworthy."

The other approach is to use one of the many techniques known as image replacement. The idea is to use CSS to move the text of a heading out of view. People visiting the site in a visual browser see the banner as normal, but search engines, text browsers, and screen readers see the <h1> at the start of the page.

Image replacement also relies on hidden text, but it has been widely used for many years, and Susan Moskwa of Google is on record as saying "if your intent is purely to improve the visual user experience (e.g. by replacing some text with a fancier image of that same text), you don't need to worry." However, that advice in Google Webmaster Help dates back to 2007, so there’s a danger that you might be penalized for using image replacement if there are other dubious techniques employed on your site.  These could include making the text invisible to the eye, using text in the same color as the background, formatting using a very small font, using keyword stuffing in the header or body, or placing the hidden text all the way at the bottom of the page or far to the right.

The best option would be to get rid of the banner and use embedded web fonts with @font‑face. Using embedded fonts is beyond the scope of this first website tutorial.

So, what should you do? There's no simple answer. The name of the site is in the <title> in the <head> of the page. It’s also in the alt text of the banner image, which is right at the top of the page. Having the site name in both places will certainly help, but a page without an <h1> heading is not ideal.

The solution I’m going to adopt is image replacement, but with a strong health warning that hiding text from search engines is a risky business. If you use image replacement in your own sites, make sure the hidden text is exactly the same as in the image.

Here's how you do it.

1. You need to add the <h1> tag between the opening <div> tags of the container and banner divs. The obvious way of doing this is to switch to Code view, and add it manually. However, I'd like to show you a neat trick to get the insertion point in the right place.

   Click anywhere inside the banner at the top of the page. Then select <div#banner> in the Tag selector at the bottom of the Document window. This selects the whole div.

2. Press the left arrow key once. If you check in Split view, you'll see that the insertion point is to the left of the opening tag of the banner div.
3. In the Property inspector, make sure the HTML button is selected, and choose Heading 1 from the Format pop-up menu. This inserts a pair of <h1> tags between the two <div> tags, and opens up a large blank space above the banner image.
4. In Design view, click in the space that has just opened up, and type Check Magazine: Fashion and Lifestyle (see Figure 28).

5. Open the CSS Styles panel, which should still be in All mode, and scroll up to the #container rule in check_cs5.css. Select it, and click the New CSS Rule button at the bottom right of the CSS Styles panel.
6. If your insertion point is still inside the heading, the New CSS Rule dialog box should already have the correct settings. Check that they look like Figure 29, and amend them if necessary.

Note: The value in the Selector Name text box is #container h1 . This is a descendant selector that affects <h1> tags in the container div. Normally, a page should have only one <h1> tag, so you could use h1 on its own. However, the selection made by Dreamweaver is fine.

7. Click OK to open the CSS Rule Definition dialog box, and select the Positioning category.
8. Select absolute from the Position pop-up menu.
9. In the Top text box, type -500 (minus 500), and set the pop-up menu alongside to px.
10. Click OK to close the CSS Rule Definition dialog box, and select File > Save All Related Files.
11. Test the page in Live View, and BrowserLab. The top-level heading is tucked out of sight, 500 pixels above the container div. You can't see it, but search engines, text browsers, and screen readers can.

Congratulations! You've finished the index.html page for Check Magazine, and the client is very pleased. If you want to compare your work against the completed files for the series, download the first_website_pt5_completed ZIP file.

The last thing you need to do is publish the page and its assets to a web server so that other people can view your work. I'll show you how to do that in the next tutorial, Part 6: Publishing your website.