All Technology Education: Dreamweaver CS3 with CSS, Ajax, and PHP {Part-5}

Inspecting the cascade in Current mode
Halfway down the right side of the CSS Styles panel in Current mode are two insignificantlooking
icons (shown alongside). By default, the left one is selected, but the right one
holds the key to the cascade of rules affecting the currently selected tag. I recommend
that you select the icon on the right and use this as your default setting (Dreamweaver
always remembers your most recent choice).
Study Figure 6-5 on the next page carefully. The title bar of the Properties pane is identical

in both screenshots, but the Summary for Selection is different, and all the properties are
struck through in the left screenshot. No, it’s not a bug; Dreamweaver isn’t broken. The
left screenshot was taken with the insertion point inside the text of one of the paragraphs
in the mainContent <-div-> . The properties are struck through because they don’t affect
the paragraph directly. What Dreamweaver is telling you is that you can edit these values,
but they won’t change the look of the current selection in Design view. The screenshot on
the right was taken with the whole of mainContent <-div-> selected. As a result, the properties
are no longer struck through; they apply directly to the current selection. They’re
also listed in the Summary for Selection.
Cascading style sheets are so called because of the way rules inherit properties from
each other, rather like the increased flow of water cascading down a waterfall. Not
only do rules inherit from one another, a more powerful influence further down
the cascade can override everything that has gone before. Understanding how the
cascade works is the key to successful implementation of CSS.
CREATING A CSS SITE STRAIGHT OUT OF THE BOX
173
6
Figure 6-5. In Current mode, the CSS Styles panel shows the different
impact of the cascade on text inside the mainContent <-div-> (left) and
on the <-div-> itself.
The Rules pane in the middle shows the full cascade of all style rules that affect the current
selection. As you hover your mouse pointer over each one, Dreamweaver displays the
rule’s specificity as three comma-separated numbers. Specificity determines which rule
“wins” when there’s a conflict—the higher the numbers, the greater the precedence that’s
given to a particular rule. ID selectors are the most powerful, followed by classes, with type
selectors coming at the bottom of the hierarchy. For more details, see CSS Mastery by
Andy Budd with Simon Collison, and Cameron Moll (friends of ED, ISBN-13: 978-1-59059-
614-2) or visit www.w3.org/TR/REC-CSS2/cascade.html#specificity.
The real power of Current mode comes in the ability to
select any of the properties listed in the Summary for
Selection or any of the selectors in the Rules pane. Doing
so immediately displays the relevant style rule in the
Properties pane. For example, selecting font in the top
pane displays the body style rules ready for editing in the
bottom pane (see Figure 6-6).
It takes a while to get used to working with the CSS Styles
panel in Current mode, but once you do, you’ll wonder
how you ever did without it.
Figure 6-6.
The 100 percent font size in the body selector needs to be
overridden further down the cascade.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
174
Finishing the layout
Let’s get back to stroll.html and stroll.css and smarten it up a little more by adding
some images, changing the font size, and adding a pull quote.
Continue working with stroll.html and stroll.css. Alternatively, copy stroll_bg.html
from examples/ch06 to your workfiles/ch06 folder, and rename it stroll.html. Also
copy stroll_bg.css from examples/styles to workfiles/styles, and rename it
stroll.css. If Dreamweaver asks you if you want to update links, click Update.
1. Position your cursor near the top of the first paragraph in mainContent <-div-> , say
at the beginning of the third sentence, and insert images/living_statues.jpg.
You can either use the Insert Image button on the Common category of the Insert
bar or drag the file directly from the Files panel into the Document window. Give
the image some alternate text, such as Living statues on the South Bank.
2. The old-school way of wrapping the text around an image is to set the values of
Align and H Space in the Property inspector. However, that uses the deprecated
align and hspace attributes and doesn’t offer the same flexibility of setting different
margins around the image as CSS.
Select the image in Design view, and click the arrow to the right of the Class dropdown
menu in the Property inspector. This lists all classes defined in the style sheet.
Adobe has anticipated the need to wrap text around images and provided two
classes, .fltlft and .fltrt, which float elements left and right, respectively.
Choose fltlft from the Class drop-down menu to float the image to the left.
3. Insert images/graffiti.jpg into the text beneath the second heading, give it
some alternate text, and select fltrt from the Class menu to float the image to the
right.
4. The size of the text is a bit too large for my liking, so let’s adjust it. Position your
cursor anywhere inside the text in the mainContent <-div-> , and open the CSS
Styles panel in Current mode. It should look like the left screenshot in Figure 6-5.
Select font in the Summary for Selection pane. This reveals that all the font properties
for the page are defined in the body tag, as shown in Figure 6-6. Although you
could edit the font size here, it would affect fonts throughout the rest of the page,
and using a percentage other than 100 percent on the body selector makes it difficult
to calculate font sizes further down the cascade. So let’s create a new rule.
5. Click the New CSS Rule icon (see alongside) at the bottom of the CSS Styles panel.
Dreamweaver makes an intelligent guess and suggests .twoColFixLtHdr #container
#mainContent p as the name of the new selector. This isn’t what I want, but accept
it just the same, and click OK.
6. This opens the CSS Rule Definition dialog box. As I explained in Chapter 5, I find this
a rather clumsy way of defining a new rule because you need to wade through the
different categories to find what you want. But if you’re new to CSS, it may help fix
the available properties in your mind. Moreover, it’s the only way to create a new
selector without going into Code view and editing the style sheet directly.
Inserting images and adjusting fonts
CREATING A CSS SITE STRAIGHT OUT OF THE BOX
175
6
Make sure the Type category is selected, enter 85% into the Size field, and click OK.
(You can also type 85 into the Size field, and select % from the drop-down menu
alongside. Choose whichever method suits you.)
7. The text in the mainContent <-div-> is now the right size, but the sidebar is still too
big. If you’re thinking “new rule” or “class,” stop it. Redefining the

tag is all
that’s needed. You could have done that in the first case, but I wanted to show you
how to change the name of a selector in the CSS Styles panel.
Switch to All mode, highlight .twoColFixLtHdr #container #mainContent p, and gently
click the name once. You should now be able to edit the selector name. If you have
difficulty, right-click and choose Edit Selector from the context menu. Change the
selector to p (just the letter on its own). Press Enter/Return. The rule now applies
to all paragraphs in the page.
8. The footer text is obscured by the background image, so let’s adjust that too. Click
anywhere inside the footer <-div-> , and switch to Current mode in the CSS Styles
panel. The Dreamweaver CSS layout has already defined a selector called
.twoColFixLtHdr #footer p with values for margin and padding.
Click Add Property, and use the following settings:
color: #8A5B31
text-align: right
Moving the text across to the right and giving it a dark brown color makes it stand
out against the lighter part of the background image. Save stroll.html (and
stroll.css if necessary), but keep them open for the next exercise.
Since it’s a page about London, there’s just one final touch that I’d like to add: Samuel
Johnson’s famous assertion that when a man is tired of London, he’s tired of life.
In the bad old days, the <-blockquote-> tag was misused by all and sundry to indent text.
Well, let’s be honest, it still is, but you know better, don’t you? You’re going to use
<-blockquote-> for its real purpose—to highlight a quotation—and then style it with CSS to
turn it into a distinctive pull quote.
1. Place your cursor at the end of the first paragraph in the sidebar, and press
Enter/Return to create a new paragraph. Type: No, Sir, when a man is tired of London,
he is tired of life; for there is in London all that life can afford. Press Enter/Return again,
and type the attribution: Samuel Johnson, 1777.
2. Select both paragraphs in Design view, and click the Text Indent button in the
Property inspector as shown here:
This wraps the paragraphs in a pair of <-blockquote-> tags.
Adding a pull quote
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
176
3. Click the New CSS Rule icon at the bottom of the CSS Styles panel. In the New CSS
Rule dialog box, choose Tag as the Selector Type, select blockquote from the Tag
drop-down menu, and click OK.
4. In the CSS Rule Definition dialog box, select the Type
category, and set Font to Georgia, Times New Roman,
Times, serif and Color to #FFFFFF. Next, select the
Background category, and set Background color to
#999999. You need to add a few more properties,
but it’s much easier to do the rest in the CSS Styles
panel, because you can see exactly how they affect
the look of the pull quote in Design view.
Click OK to save the current rules. The pull quote
should now look like the one shown alongside.
5. The default margin around the <-blockquote-> is too
wide, so position your cursor anywhere inside the
quote, and select <-blockquote-> in the Tag selector. With the CSS Styles panel in
Current mode, click Add Property to add the following settings:
margin: 10px
padding: 0
6. The text in the pull quote, now needs to be pulled in from the edges. Click the New
CSS Rule icon, and use the following settings in the New CSS Rule dialog box:
Selector Type: Advanced (IDs, pseudo-class selectors)
Selector: blockquote p
Define in: stroll.css
The descendant selector blockquote p restricts the rule to paragraphs inside a
<-blockquote->. Click OK, select the Box category in the CSS Rule Definition dialog
box, and use the following settings for Padding and Margin:
The names of the Text Indent button and the one to its left (Text Outdent) still reflect
the old presentational type of markup that you should avoid in a standards-compliant
site. When applied to ordinary text, think of them as “blockquote” and “remove
blockquote” buttons. When used inside an ordered or unordered list, they create or
remove a nested list.
CREATING A CSS SITE STRAIGHT OUT OF THE BOX
177
6
7. When you click OK to save the settings for the blockquote p rule, you’ll see that
the bottom line is flush with the gray background. Everything comes right in a
moment.
Select <-blockquote-> in the Tag selector again, and click Add Property in the
Properties pane of the CSS Styles panel. Select background-image, and navigate to
images/top_quote.gif. The image tiles horrendously, so add two further properties
as follows:
background-repeat: no-repeat
background-position: left top
8. Just a couple more tweaks and you’re there. The beginning of the pull quote overlaps
the quotation marks of the background image, so click inside the first paragraph
of the quote, and add the following property to the blockquote p style rule:
text-indent: 20px
9. CSS doesn’t let you apply two background images in the same rule (you’ll have to
wait for CSS 3 to do that), so you need to create a new rule for the quote attribution
within the <-blockquote->. Position your cursor inside the paragraph that reads
Samuel Johnson, 1777, and select the

tag in the Tag selector. Right-click and
select Quick Tag Editor from the context menu to assign the paragraph an id attribute
of quote_attrib (see “Using the Quick Tag Editor to set an id attribute” in
Chapter 2).

10. Use the ID selector #quote_attrib to create a new CSS rule (choose Advanced as
the Selector Type and #quote_attrib as Selector). In the CSS Rule Definition dialog box,
select the Background category, and set Background image to images/btm_quote.gif,
Repeat to no-repeat, Horizontal position to right, and Vertical position to bottom.
Then use either the CSS Rule Definition dialog box or the CSS Styles panel to set the
remaining properties:
font-size: 70%
margin-top: 0
padding-bottom: 30px
text-align: right
text-indent: 0
11. Save stroll.html (and stroll.css if necessary), and press F12/Opt+F12 to preview
the page in a browser. It should look similar to Figure 6-7 (I’ve changed the
headings to give the page a more authentic look). The ugly duckling in Figure 6-2 is
now an elegant swan. You can compare your files with stroll_final.html and
stroll_final.css in examples/ch06.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
178
Figure 6-7. With a little imagination and work, the basic CSS layouts can be transformed into
attractive pages.
Removing the CSS comments
The comments in the Dreamweaver CSS layouts are deliberately verbose—they’re there to
help you understand what each rule is for. Although commenting style sheets is a good
idea, you’ll probably want to get rid of the Dreamweaver comments once you’re familiar
with the layouts. It’s very easy to do with Edit ä Find and Replace and a regular expression.
Regular expressions describe patterns of text and other characters. They are like wildcard
characters but much more powerful. The regular expression (regex) to describe a CSS
comment looks like this:
/\*.+(?=\*/)\*/
CREATING A CSS SITE STRAIGHT OUT OF THE BOX
179
6
Because this regex is so useful—and easy to mistype—I have created a stored query to
automate the process. The following instructions show you how to remove the CSS comments
from a style sheet:
1. Open the style sheet in the Document window. If the styles are embedded in the
of the document, switch to Code view.
2. Launch Find and Replace from the Edit menu (or press Ctrl+F/Cmd+F).
3. Click the Load Query icon at the top right of the Find and Replace dialog box (see
Figure 6-8).
4. In the Load Query dialog box, browse to the tools folder, select css_comments_
remove.dwr, and click Open. This loads the query into the Find and Replace dialog
box and sets all the necessary options, as shown in Figure 6-8.
Figure 6-8. Regular expressions make complex find and replace operations possible.
5. To remove all the CSS comments in a single operation, click Replace All. You should
be aware that this removes all comments, including any CSS hacks that look like
comments. If you’re in any way uncertain, use the following, more selective
approach.
To remove comments selectively, click Find Next to highlight the first one. Click
Replace to remove it or Find Next to move to the next one.
6. Click Close to return to the Document window. After find and replace operations,
Dreamweaver always opens the Results panel at the bottom of the workspace. To
collapse it, press F7 or right-click the Options menu icon at the top right of the
Results panel title bar and select Close Panel Group from the context menu.
Using a stored query in Find and Replace
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
180
Dreamweaver always remembers your last find and replace operation, so these settings
will be displayed the next time you open the Find and Replace panel. Delete the regular
expression from the Find field, and deselect the Use regular expression checkbox (unless
you plan to use another regex). This final point is very important. When a find operation
fails for no obvious reason, it’s usually because you have selected the Use regular expression
checkbox by accident.
How was it for you?
Depending on your knowledge of CSS, this chapter is likely to have been relatively easy or
something of a nightmare. If you fall into the latter category, I encourage you to persevere.
It can take a long time for CSS to sink in. If you find it difficult to understand how to build
your own style sheets, download a page from a site that you admire, complete with images
and style sheets. Then use the CSS Styles panel to change or delete individual properties.
Watch the effect of each change. Also select different parts of the page to analyze the
cascade of styles.
Mastering the CSS Styles panel takes time and patience, but in combination with the
greatly improved CSS rendering in Dreamweaver CS3, it will reward you in the end.
Remember that Current mode shows the cascade as it affects the current insertion point or
selection. Use the Tag selector at the bottom of the Document window to highlight specific
elements, and then use the Summary for Selection and Rules panes to drill down to the
CSS rules you want to inspect or edit.
You’ll get some more practice with the CSS Styles panel in the next chapter when you use
Spry widgets to spice up page layout. The widgets come with their own predefined style
sheets, so you need to know how to adapt them to blend in with your own design.
You can save your own queries for reuse in the same way. Just click the Save
Query icon to the left of the Load Query icon, create a suitable folder, and give
the query a name.
CREATING A CSS SITE STRAIGHT OUT OF THE BOX
181
6

7 BUILDING SITE NAVIGATION WITH
THE SPRY MENU BAR
Efficient and attractive navigation is an important element in every website. The Spry
menu bar is one of eight Spry widgets new to Dreamweaver CS3 (the others are described
in the next two chapters). Its aim is create a flexible menu with flyout submenus that
remains accessible even if JavaScript is turned off. In essence, it’s an unordered list with
optional nested lists for submenus. Styling is done with CSS, and the submenu flyouts are
controlled by a combination of CSS and JavaScript. It comes in two versions: horizontal
and vertical. Figure 7-1 shows what the horizontal version of the Spry menu bar looks like
when integrated into the page built in the last chapter.
Figure 7-1. The Spry menu bar can be easily integrated into a page by making a few adjustments to
the CSS.
Although you can insert a Spry menu bar in seconds, the downside is that styling it
requires a good understanding of CSS. Knowing which style rules to change—and which to
leave alone—presents more of a challenge. To help you, this chapter
Describes the structure of the Spry menu bar
Shows you how to insert and remove a Spry menu bar
Explains the style rules that control a Spry menu bar
Shows you how to customize a Spry menu bar
By the end of the chapter, you’ll be able to transform the rather bland default design of a
menu bar into something much more elegant like the menu in Figure 7-1. Because the
Spry menu bar is styled with CSS, this chapter assumes you’re familiar with the CSS Styles
panel, which was described in detail in Chapter 5.
The Spry menu bar should finally put to rest the horrendous problems caused by the old
JavaScript pop-up menus created in Fireworks MX 2004 and earlier. If you don’t know
about the old menus, ignorance is bliss. All you need to know about them is that they rendered
your site totally inaccessible if JavaScript was disabled. Not only that, they prevented
search engines from indexing anything beyond the first page. If you’re interested in the
sad, inside story of how they were developed, see www.losingfight.com/blog/2006/08/
11/the-sordid-tale-of-mm_menufw_menujs.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
184
Examining the structure of a Spry menu bar
Like all Spry widgets, the Spry menu bar relies on external files to control the way it looks
and works, so you must always save your page in a Dreamweaver site (see Chapter 4 for
site definition) before attempting to insert a menu bar. If you forget, Dreamweaver tells
you to save your page, and opens the Save As dialog box.
The best way to understand how a Spry menu bar works is to launch Dreamweaver and
start experimenting. Let’s begin with a horizontal menu bar.
1. Create a blank HTML page in Dreamweaver by selecting File ä New. In the New
Document dialog box, select Blank Page, HTML as the Page Type, and for
Layout. Make sure that no style sheets are listed under Attach CSS file before clicking
Create. Alternatively, just select New ä HTML from the welcome screen. Save
the file as horiz.html in workfiles/ch07.
2. Select the Spry tab on the Insert bar, and click the Spry Menu Bar button (it’s the
fourth from the right) as shown in the following screenshot:
3. This opens the Spry Menu Bar dialog box. There are just two options: Horizontal and
Vertical. Select Horizontal, and click OK.
4. Dreamweaver inserts a horizontal Spry menu bar at the top of the page, as shown
in Figure 7-2. Like all Spry widgets, the menu bar is surrounded in Design view by a
turquoise border and a tab at the top-left corner. The tab tells you what type of
widget it is, followed by the widget’s id attribute. Dreamweaver calls the first menu
bar on a page MenuBar1. The next one is MenuBar2, and so on. This means you can
have as many menu bars on a page as you want (don’t go mad—think of usability).
Figure 7-2. The Spry menu bar is given basic styling ready for you to customize.
Inserting a horizontal menu bar
BUILDING SITE NAVIGATION WITH THE SPRY MENU BAR
185
7
5. Save horiz.html. If this is the first time you have inserted a Spry menu bar in the
current site, Dreamweaver prompts you to save the dependent files. It locates the
files in the Spry assets folder. By default, this is called SpryAssets, but you can
specify a different location in your site definition (see “Setting up for Spry” in
Chapter 4).
The dependent files are the external JavaScript file, SpryMenuBar.js, the external
style sheet, SpryMenuBarHorizontal.css, and four arrow images that indicate the
presence of submenus. Once the files have been copied to the Spry assets folder,
they are shared with further instances of the menu bar in the same site.
6. Click OK to save the dependent files, and press F12/Opt+F12 to preview
horiz.html in a browser. As you can see in Figure 7-3, you already have a fully
working menu bar ready for you to customize. You can freely add or remove items
and submenus and change the default colors. I’ll show you how to do that shortly,
but first let’s take a look at the vertical menu bar.
Figure 7-3. The structure and styling of the default menu bar are fully
customizable.
1. Create another blank page, and save it as vertical.html in workfiles/ch07.
2. Select the Spry Menu Bar button on the Spry tab of the Insert bar. Alternatively,
choose Insert ä Spry ä Spry Menu Bar.
3. Select the Vertical radio button in the Spry Menu Bar dialog box, and click OK.
4. Dreamweaver inserts a vertical menu bar, as shown in the following screenshot:
Inserting a vertical menu bar
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
186
5. Save vertical.html. This time, Dreamweaver prompts you to save only one
dependent file: the style sheet, SpryMenuBarVertical.css. All other dependent
files are identical to those used by the horizontal menu bar.
6. Press F12/Opt+F12 to preview the page in a browser. It looks identical to the horizontal
menu bar shown in Figure 7-3. The only differences are that the menu items
are stacked vertically and the first-level submenus fly out to the right rather than
beneath the main menu.
Looking at the XHTML structure
The Spry menu bar is a series of nested unordered lists (<-ul->) styled with CSS to look like
a series of buttons. The submenu flyouts are controlled by JavaScript. You can see the
underlying structure of the menu either by switching to Code view or by toggling the Turn
Styles Off/On button in the Property inspector. (If you can’t see the button, click the Spry
Menu Bar tab at the top left of the menu bar.) Figure 7-4 shows the horizontal menu bar in
horiz.html, but the structure is identical in vertical.html. The different look and functionality
are controlled entirely by JavaScript and CSS.
Figure 7-4. When styles are turned off, you can see the underlying list structure of the menu bar.
If you switch to Code view, you’ll see that Dreamweaver has added links to the external
JavaScript file and style sheet (see lines 6 and 7 in Figure 7-5, on the next page). To save
space, I have used Code collapse (see “Using the Coding toolbar” in Chapter 1) to hide the
XHTML code for the nested lists on lines 11–33.
Immediately below the nested lists (on lines 34–38), Dreamweaver has inserted a block of
JavaScript. This initializes the widget object. All Spry widgets are JavaScript objects, which
need to be initialized when the page first loads. Dreamweaver locates the initialization
script just before the closing tag. If a widget stops working, you should always
BUILDING SITE NAVIGATION WITH THE SPRY MENU BAR
187
7
check that you haven’t deleted this script by mistake. If you have, you need to go back and
reinsert the widget from scratch.
Figure 7-5. Dreamweaver adds three sections of code in addition to the list structure (hidden using
Code collapse).
Removing a menu bar
Removing a menu bar is quite simple: click the Spry Menu Bar tab at the top left of the
menu (see Figure 7-4), and press Delete. That’s it—not only is the XHTML removed but so
too are the links to the external JavaScript file and style sheet, as well as the initialization
script at the bottom of the page.
Try it now with horiz.html. Switch to Code view, and you’ll see just the default code for a
blank page. However, if you look in the Files panel, you’ll see that the six dependent files
in the Spry assets folder have not been removed. This ensures that they remain accessible
to other pages that may rely on them.
The links to the external JavaScript file and style sheet are not removed if another instance
of the same widget exists on the page.
Editing a menu bar
Since the menu bar is just a series of nested unordered lists, you can turn off the styles, as
shown in Figure 7-4, and edit the menu directly in Design view. However, it’s much more
convenient to do it in the Property inspector. Place your cursor anywhere inside the menu
bar, and click the Spry Menu Bar tab at the top left to display the menu bar details in the
Property inspector. The following screenshot shows how you might build a menu bar for
stroll.html from the previous chapter:
It’s important to remove menu bars and other widgets cleanly by selecting the Spry
Menu Bar tab and pressing Delete. Otherwise, the widget initialization script remains in
the underlying code and might trigger errors when the page is loaded into a browser.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
188
The three columns in the center of the Property inspector show the menu hierarchy, with
the top level on the left. When you select an item in this column, the middle one displays
the contents of the related submenu. The right column displays the next level down from
whatever is selected in the middle one.
To edit a menu item, highlight it, and fill in the fields on the right of the Property inspector
as follows:
Text: This is the label that you want to appear on the menu button.
Link: This is the page you want to link to. Either type the file name directly into the
field or click the folder icon to the right of the field to browse to the target page.
Title: This adds a title attribute to the link. Most browsers display this as a tooltip.
It can also improve accessibility for visually impaired people using a screen reader
by describing the link’s destination more fully.
Target: This adds a target attribute to the link. This should normally be used only
with frames. A value of _blank opens the linked page in a new browser window.
Although there are sometimes legitimate reasons for wanting to do so, the practice
is widely frowned upon, so use with care.
To add an item, click the plus (+) button at the top of the relevant column. To delete an
item, select it and click the minus (–) button. You can also change the order of items by
highlighting them and using the up and down arrows at the top of each column.

As the preceding screenshot shows, the Property inspector lets you work on two levels of
submenus. To create a submenu at a deeper level, insert another nested list either by turning
off styles as shown in Figure 7-4 or editing directly in Code view. Two levels of submenus
should be sufficient for most purposes. If your menus require more levels, it’s
probably time to rethink the structure of your site.
After editing a menu bar in an existing page, select one of the items in the left column
before moving to another part of the page. If you forget to do this, the submenus remain
exposed in Design view, preventing you from working on the underlying part of the page.
If this happens, position your cursor inside any part of the menu bar, and select the Spry
Menu Bar tab at the top left. This populates the Property inspector with the menu bar
details again. You can then select an item in the left column to hide the submenus.
Maintaining accessibility with the Spry menu bar
The Spry menu bar is much more accessible than the old JavaScript pop-up menus,
because the underlying structure and links are written in XHTML, rather than being
obscured in JavaScript that search engines can’t follow. However, it’s important to realize
BUILDING SITE NAVIGATION WITH THE SPRY MENU BAR
189
7
that JavaScript still controls the submenu flyouts. If someone visits your site with JavaScript
disabled or an ancient browser that can’t understand the Spry code, the only parts of the
menu that remain accessible are the top-level items.
This means that you should always link the top-level items to a real page and not just use
dummy links to act as triggers for the submenus. So, for instance, if anyone clicks
Attractions in the menu shown in Figure 7-1, it should link to an introductory page leading
to that section. Unless you do so, some visitors may never be able to get to the pages
about London Eye and so on.
Customizing the styles
Although the color scheme of the default style sheets isn’t exactly inspiring, the structural
layout has been carefully thought out, so you don’t need to change many properties to
achieve a rapid transformation of the menu bar. Open SpryMenuBarHorizontal.css and
SpryMenuBarVertical.css in the Document window. Both are divided into the following
sections:
Layout information: This controls the structure, such as font size and menu widths.
Design information: This styles the color scheme and borders.
Submenu indication: The rules in this section control the display of the arrows that
indicate the existence of a submenu. Change these only if you need to make
adjustments to the submenu arrows.
Browser hacks: These rules deal with bugs in Internet Explorer. You should leave
them alone.
The first thing to note is that both style sheets contain almost identical rules, although the
names of the CSS selectors reflect the orientation of the menu. The horizontal bar uses
the class MenuBarHorizontal, and the vertical one uses MenuBarVertical. There are a few
other things to note:
All the measurements use relative units (ems and percentages).
The width of the horizontal menu is set to auto, but the vertical menu has a fixed
width of 8em.
The width of the menu items in both versions is fixed at 8em; submenus are 8.2em.
Changing the menu width
The use of ems for the width of the menu and submenu items makes the menu bar very
fluid. For a fixed layout, such as that used in stroll.html in the previous chapter, you
need to change all instances of 8em and 8.2em in the Layout Information section to a fixed
width in pixels.
Changing colors
All colors are defined in the Design Information section of the style sheet. Changing them
is simply a matter of substituting the existing hexadecimal numbers for background-color
and color in the relevant style rules. The default colors are light gray (#EEE) for the
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
190
background and dark gray (#333) for the text of menu items in their normal state, and
navy blue (#33C) for the background and white (#FFF) for the text of items in a rollover
state.
The menu bar uses JavaScript to assign a class dynamically to the links when the mouse
pointer moves over them. For some reason, Adobe has put the selectors for this dynamic
class in a separate style rule, which duplicates the a:hover and a:focus rules like this:
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
This makes it difficult to edit the rules in the CSS Styles panel. Since both rules contain the
same properties and values, it’s simpler to combine the selectors like this:
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus,
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
Don’t forget to add a comma after a:focus in the first line of the selector. Otherwise, it
won’t work. The rules for the vertical menu bar are identical, except for the class name
MenuBarVertical.
Adding borders
By default, a light gray border is added to the outer edge of the submenu containers in
both the horizontal and vertical menu bars. In addition, the vertical menu bar has the
same border around the entire menu. Change the following rules to alter the menu and
submenu borders:
The Spry menu bar style sheets use hexadecimal shorthand, which uses just three digits
instead of six to denote colors. Hexadecimal colors can be shortened when the sixdigit
version consists of three pairs in which both numbers are the same. So #FFFFFF
becomes #FFF and #3333CC becomes #33C, but numbers like #3333C0 cannot be
shortened. Using shorthand is a matter of personal preference. It makes no difference
to the way the styles are rendered.
BUILDING SITE NAVIGATION WITH THE SPRY MENU BAR
191
7
ul.MenuBarHorizontal ul
ul.MenuBarVertical
ul.MenuBarVertical ul
Individual menu items don’t have any borders, so the menu looks seamless. If you want to
give your menu a more button-like feel, apply a border to the following rules:
ul.MenuBarHorizontal a
ul.MenuBarVertical a
The links in the menu bar are styled to display as a block and have no fixed width.
Consequently, applying a border to the link style has the advantage of surrounding the
individual menu items without affecting either height or width. You’ll see how this is done
when inserting a menu bar into stroll.html.
Changing the font
The font-size property is set to 100% in two separate rules: ul.MenuBarHorizontal and
ul.MenuBarHorizontal li (ul.MenuBarVertical and ul.MenuBarVertical li). Change
the wrong one and you get the mysterious shrinking text shown in Figure 7-6.
Figure 7-6. The text gets progressively smaller if you change
font-size in the li selector.
The style rules that affect the size of the text in the horizontal menu bar are
ul.MenuBarHorizontal and ul.MenuBarHorizontal li. Both of them set font-size to 100%.
The shrinking text in Figure 7-6 was caused by changing font-size in ul.MenuBarHorizontal
li to 85%.
Although this reduces the text in the main menu items to 85 percent of its original size,
the nesting of the submenus results in the first-level submenu being displayed at 85 percent
5 85 percent—in other words, 72.25 percent. The second-level submenu is further
reduced by another 85 percent—resulting in 61.4 percent.
To prevent this happening, leave the ul.MenuBar Horizontal li selector at 100%, and
change only the first one. The following rules produce a consistent text size:
ul.MenuBarHorizontal
{
font-size: 85%;
}
ul.MenuBarHorizontal li
{
font-size: 100%;
}
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
192
The rules for the vertical menu bar are identical, except for the class name
MenuBarVertical.
If you decide to use pixels instead of percentages, it doesn’t matter which rule you change.
You should be aware, however, that using pixels for fonts can cause accessibility problems
for people with poor eyesight. Many designers mistakenly believe that using pixels for font
sizes “locks” their design. It doesn’t, because all browsers—apart from Internet Explorer
for Windows—permit users to adjust font sizes by default, and Internet Explorer’s accessibility
features have an option to ignore font sizes. If a change in font size causes your page
to fall apart, you need to rethink your design criteria—fast.
Styling a Spry menu bar
If you’re completely at home editing style sheets in Code view, the preceding sections tell
you all that you need to know about customizing the CSS for a Spry menu bar. The disadvantage
of working in Code view is that you can’t see how your changes affect the design
and fit in with the rest of your page until you save the style sheet and switch back to the
web page in Design view. So, I’m going to devote the rest of the chapter to showing you
how to customize a Spry menu bar using the CSS Styles panel. Although it involves more
steps than editing the style sheet directly in Code view, working through the next few
pages should give you a much better understanding of how the CSS Styles panel works.
I’m going to show you how to add a horizontal menu bar to stroll.html, the CSS layout
that you styled in the last chapter. You can see the finished menu in Figure 7-1 at the
beginning of this chapter.
To wrap or not to wrap, that is the question . . .
Two common diseases are prevalent in the CSS community: “classitis” and “divitis.” The
first usually afflicts beginners, who style everything with a class, creating a new form of tag
soup little better than <-span-> tags. Then they learn that ID selectors are more powerful, so
they start wrapping everything in a <-div-> , cluttering up the page with lots of meaningless
and unnecessary wrapper elements.
I’ve suffered from both diseases in my time, so my first instinct was to use the horizontal
Spry menu bar without a <-div-> . After all, it’s an unordered list, which is a block element,
and it has its own ID, so it should be possible to drop one into a page without the need for
a wrapper. After much experimentation, though, I discovered that the only reliable way to
insert a horizontal menu bar in a fixed-width design like stroll.html is to wrap it in a
<-div-> and give the <-div-> both a width and a height. The height is needed because all the
menu items are floated. Without the fixed size <-div-> , the design behaves unpredictably in
some browsers. Figure 7-8 later in the chapter shows the sort of problem avoided.
Continue working with your files from the last chapter. Alternatively, copy stroll_horiz_
start.html from examples/ch07 to workfiles/ch07 and stroll_horiz_start.css from
Inserting a <-div-> for the horizontal menu bar
BUILDING SITE NAVIGATION WITH THE SPRY MENU BAR
193
7
examples/styles to your styles folder. Rename the files stroll_horiz.html and
stroll_horiz.css, and update any links when prompted.
1. With stroll_horiz.html open in the Document window, select the Layout tab of
the Insert bar, and click the Insert Div Tag button, as shown here:
2. The Insert Div Tag dialog box lets you specify where the <-div-> is to be located. It
offers the following options:
At the current insertion point
Before a specific tag
After the start of a tag—in other words, nested inside
Before the end of a tag—again, nested inside just before the closing tag
After a specific tag
Wrapped around the current selection (available only when a section of code is
selected in the Document window)
You need to insert the menu after the header <-div-> , so select After tag from the
Insert drop-down menu. Dreamweaver automatically populates the drop-down
menu alongside with all elements that have an ID. Select

Tab 1

Tab 2

All Technology Education

Monday, September 29, 2008

Dreamweaver CS3 with CSS, Ajax, and PHP {Part-5}

No comments:

Post a Comment

About Me