Hotel Booking
Hotel Booking

Monday, September 29, 2008

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

<-div- id="header"><-span-> as
shown here:
Frequently used features are duplicated in several places in Dreamweaver.
Although the Insert Div Tag button is on the Common tab of the Insert bar, the
reason I’m using the Layout tab this time is because it offers access to both
Insert Div Tag and Spry Menu Bar (two buttons further to the right). It’s useful to
get to know the alternative locations of features you use the most.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
194
3. Let’s call the new <-div-> nav. Type nav in the ID field, and click the New CSS Style
button at the bottom of the Insert Div Tag dialog box.
4. Dreamweaver CS3 now populates the New CSS Rule dialog box automatically with
the correct details, selecting the Advanced radio button, naming the selector #nav,
and suggesting defining the rule in the existing style sheet. Click OK to accept.
If more than one style sheet is attached, you can select another from the dropdown
menu. Alternatively, you can create a new style sheet or opt to define the
rule in the of the page.
5. In the CSS Rule Definition dialog box, select the Box category, and set Width to
780px and Height to 2.2em. Click OK to save the rule. This returns you to the Insert
Div Tag dialog box. Click OK again to close it. You should now have a <-div-> with
some placeholder text inside it just beneath the header, as shown here:
I calculated the height for the nav <-div-> by adding together the top and bottom padding
(0.5em each) for the links in the menu bar. The font-size is set to 100%, which is the same
as 1em. The extra .2em was needed to make sure everything fits. By using a fixed pixel
width, the menu bar remains snugly inside the container <-div-> , even if the user increases
the font size. Equally, using relative units for the height ensures that the nav <-div-> expands vertically to accommodate enlarged text.
Building the navigation structure
Now that you have created space for it, the next step is to insert the menu bar and create
the links.
When using a vertical menu bar, you can simply drop it into a sidebar, which provides
the necessary wrapper. Unless the sidebar is particularly wide, there is no need for a
separate <-div-> for the menu itself.
BUILDING SITE NAVIGATION WITH THE SPRY MENU BAR
195
7
1. You need to get rid of the placeholder text for the nav <-div-> . Normally, pressing
Delete when the text is highlighted is sufficient. However, it’s a good idea to open
Split view to make sure that it’s only the text between the <-div-> tags that is
selected, as shown in the following screenshot:
If necessary, go into Code view to adjust the selection and press Delete. Make sure
that your cursor is between the empty <-div-> tags.
2. Click the Spry Menu Bar button on the Layout tab of the Insert bar, and insert a horizontal
menu bar.
3. Save stroll_horiz.html. If you did the other exercises earlier in this chapter,
Dreamweaver won’t prompt you to save dependent files this time, as they have
already been copied to the Spry assets folder. Figures 7-7 and 7-8 show why it was
necessary to give a height to the nav <-div-> .
Figure 7-7. With a height, the nav <-div-> maintains the integrity of the page layout.
Inserting and editing the menu bar
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
196
Giving the nav <-div-> both a width and a height keeps the structure of the page
intact (see Figure 7-7). If you give it just a width, the nav <-div-> collapses vertically
and the sidebar attempts to move up into the empty space, as shown in Figure 7-8.
Figure 7-8. The nav <-div-> needs a height to prevent the sidebar from attempting to float into any
empty space.
4. Select the Spry Menu Bar tab, and edit the menu items as described in “Editing a
menu bar” earlier in the chapter. If you want to follow my structure, here it is:
Home
Food & Drink
Restaurants
Bars
Attractions
London Eye
Aquarium
South Bank
Royal Festival Hall
Hayward Gallery
Tate Modern
Bridges
History
St Paul's Cathedral
Tower of London
Houses of Parliament
In a live website, you need to create links to real pages, but for the purposes of the
example page, I have left the value of each link as # so the menu bar displays correctly,
even though it doesn’t link to other pages.
5. Save stroll_horiz.html, and press F12/Opt+F12 to view the page in a browser. If
you have used the same menu structure as me, you’ll see that a long item, such as
Food & Drink, wraps onto a second line. In Internet Explorer, the sidebar still displays
in its correct position, but in more standards-compliant browsers, such as Firefox
and Opera, the sidebar is pushed across to the right, as shown in Figure 7-9 on the
next page.
BUILDING SITE NAVIGATION WITH THE SPRY MENU BAR
197
7
Figure 7-9. Long menu items prevent subsequent floated elements from moving to the left of the
viewport.
6. To rectify this, you need to add a clear: left rule to the sidebar’s style block.
Open the CSS Styles panel in All mode, and expand the stroll_horiz.css tree menu if
necessary. Select .twoColFixLtHdr #sidebar1 in the All Rules pane, and click Add property
in the Properties pane. Select clear, and then select left as its value. Save the
external style sheet, if necessary, and preview the page in a browser again. This
time the sidebar should be back in its proper place.
Customizing the design
The final stage is to customize the design features of the menu bar to fit the rest of the
page.
1. All style rules exclusive to the menu bar are in SpryMenuBarHorizontal.css in the
Spry assets folder. Since this is common to all horizontal menu bars, it’s a good idea
to give it a different name. Select SpryMenuBarHorizontal.css in the Files panel,
and gently click the file name once to open its name for editing (alternatively, press
F2 or right-click and select Edit ä Rename from the context menu). Change the
style sheet’s name to SpryMenuBarHorizontal_stroll.css, and press Enter/Return.
Accept the option to update links when prompted. This updates the link to the
external style sheet in both horiz.html and stroll_horiz.html. Since horiz.html
was only a test page, it doesn’t matter on this occasion, but in a working project,
you need to check which links are being updated.
2. Open stroll_horiz.html in Code view. As explained in the last chapter,
Dreamweaver adds new style sheets immediately before the closing tag.
This puts the styles in SpryMenuBarHorizontal_stroll.css lower in the cascade
than the style rules in the conditional comments. Although nothing is likely to
clash, it’s good practice to cut and paste the link above the conditional comments.
Place it immediately after the link to stroll_horiz.css.
Editing the default selectors
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
198
3. Double-click SpryMenuBarHorizontal_stroll.css in the Files panel (it should be
in the Spry assets folder, the default name is SpryAssets) to open it in Code view,
and locate the following section:
4. Insert a comma after a:focus at the end of line 99 in the preceding screenshot,
and delete lines 100–104 (use the line numbers in the screenshot only as a guide;
it’s the code that matters). You should end up with this:
This change makes it possible to edit the rollover colors of the menu bar in the
CSS Styles panel, as explained earlier. Save SpryMenuBarHorizontal_stroll.css,
and close it. I’ll come back to customizing the colors in the next section, but first
let’s sort out the width of the menu and submenus.
The remaining changes to the styles will be made through the CSS Styles panel. With
stroll_horiz.html open in the Document window, click anywhere inside the menu bar,
and open the CSS Styles panel in Current mode. Make sure that the Show cascade of rules
for selected tag icon is selected, as recommended in “Inspecting the cascade in Current
mode” in the last chapter (see Figure 6-5). The menu bar has a lot of style rules, so you
may find it best to collapse all other panels and expand the CSS Styles panel so that you
can see everything without the need to scroll.
The default width of the menu items is 8em, but this is a fixed width design, so you need to
adjust the menu bar to fit. There are five top-level items, and the width of the container
<-div-> is 780 pixels. A quick calculation reveals that dividing 780 by 5 equals 156. So that’s
the width each item needs to be.
Customizing the menu bar: setting widths
BUILDING SITE NAVIGATION WITH THE SPRY MENU BAR
199
7
1. The menu bar is a styled unordered list, so the width of each item is controlled by
the <-li-> element. With your cursor inside the menu bar, select <-li-> in the Tag
selector at the bottom of the Document window. This highlights the current <-li->
element and displays the relevant style rule in the Properties pane of the CSS Styles
panel.
The width property for ul.MenuBarHorizontal li is set to 8em. Click inside the
value field for width. It should change into two drop-down menus like this:
Type 156px into the left drop-down, and press Enter/Return to save the new value.
The menu should now fit neatly across the page, as shown in Figure 7-10. Press F4
to hide the panel groups if you can’t see the full width of the design. To bring the
panel groups back, press F4 again.
Figure 7-10. Giving the <-li-> elements a fixed pixel width matches the width of the container <-div-> .
2. The width of the submenus is controlled independently. The default is 8.2em, just a
little wider than the top-level items. Some of my submenu items are long, so I
decided to set the submenu width to 175px. Since the submenus aren’t normally
displayed in Design view, you need to coax one of them out of hiding to work on
the style rules.
The Property inspector at the bottom of the workspace might still display the width as
8em. This is unimportant, as it’s sometimes slow to refresh values changed in an external
style sheet. The values that matter are those displayed in the CSS Styles panel. If
you toggle F4, the value in the Property inspector will be refreshed.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
200
The following diagram shows how you do it:
3. Now position your cursor inside one of the submenu items in Design view. The
details of the menu bar will disappear from the Property inspector, but that doesn’t
matter. Your interest now lies in selecting the submenu <-li-> element to edit its
style rule in the CSS Styles panel. The Tag selector at the bottom of the Document
window displays the hierarchy of tags leading to the current selection. As you can
see in Figure 7-11, with the cursor inside one of the submenu items, the hierarchy
of the menu bar runs like this:
<-li-> <-ul-> <-li->
To access the style rule for the submenu, select the second <-li-> in the Tag selector.
This reveals the width property as 8.2em, as shown in Figure 7-11. Change this
value to 175px.
Figure 7-11. Accessing the style rule for submenu items
BUILDING SITE NAVIGATION WITH THE SPRY MENU BAR
201
7
4. The default menu bar adds a light gray border to the submenus, but I’m going to
add a border to each menu item instead, so let’s get rid of the default border.
Select the <-ul-> tag immediately to the left of the currently highlighted tag in the
Tag selector. This selects the whole submenu. As you can see from Figure 7-12, the
Rules pane lists several rules beginning with ul.MenuBarHorizontal. Drag the left column
wider to make it easier to find ul.MenuBarHorizontal ul. This is a descendant
selector that affects all unordered lists nested inside the menu bar—in other
words, all submenus.
There are two rules for ul.MenuBarHorizontal ul. The second one contains the
border property. Select it, select border in the Properties pane, and press Delete or
click the trash can icon at the bottom right of the CSS Styles panel. This leaves an
empty style rule, but that doesn’t matter. You can leave it in case you want to add
different properties later. Of course, you could add a different style border to the
submenus here, if you prefer.
Figure 7-12. Current mode reveals precisely which
rules affect the current selection.
5. Now, this is where a solid understanding of CSS and of how the CSS Styles panel
works in Current mode comes in handy. Take a close look at the Summary for
Selection pane at the top of the panel. It says the width property is 8.2em (see
Figure 7-12). But surely you changed that in step 3! What’s going on?
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
202
The answer is that the width property for the submenus is set in two places: the
rule for nested list items and the rule for nested lists. The 8.2em you can see now is
the second of these two rules. You need to change it, too.
6. Select the width property highlighted in Figure 7-12. This populates the Properties
pane at the bottom of the CSS Styles panel with the rules for the first of the two
selectors for ul.MenuBarHorizontal ul, as shown here.
Why are there two selectors for ul.MenuBarHorizontal ul? Cast your mind back
to “Customizing the styles” earlier in the chapter. The style sheet for the Spry menu
bar is divided into sections. The rule that you edited in step 4 belongs to the Design
Information section. This rule belongs to the Layout Information section.
Change the width property to 175px.
Keep stroll_horiz.html open, as I’ll show you how to adjust the colors next.
The main colors of the Spry menu bar are controlled in style rules applied to the links.
These instructions assume that you have edited the menu bar style sheet as described in
“Editing the default selectors.”
1. Position your cursor anywhere inside any menu item that doesn’t lead to a submenu.
In stroll_horiz.html, this means Home, Bridges, or any ordinary link in a
submenu. The title bar of the Properties pane should read Properties for
"ul.MenuBarHorizontal a:hover... This displays the rollover colors for the menu items.
Change background-color from #33C to #7A85AD (dark mauve) and color from
#FFF to #333 (very dark gray). Don’t forget the hash or pound sign (#) at the beginning
of the number. Because these are rollover colors, you won’t see any change in
Design view.
2. In the Rules pane, highlight ul.MenuBarHorizontal a immediately above the currently
selected rule. This displays the rules that apply to all links in the menu bar. Change
background-color from #EEE to #A3AAC6 (a slightly lighter mauve) and color
from #333 to #FFF (white). This time the colors are immediately reflected in Design
view.
Customizing the menu bar: changing colors and fonts
BUILDING SITE NAVIGATION WITH THE SPRY MENU BAR
203
7
3. To make the links look like buttons, you need to put a border around them. Adding
a lighter color for the top and left borders and a darker one for the right and bottom
borders creates the effect of a raised button. A neat way of finding the right
colors is to create a rectangle in a graphics program like Fireworks, give the rectangle
the same color as your buttons, and then apply an inner bevel effect. The
following illustration shows how it’s done in Fireworks CS3.
Use an eyedropper tool to find the appropriate colors for the lighter and darker
borders, and make a note of the hexadecimal number.
4. Now add the border to each side of the links by
clicking Add Property and adding the following
properties and values:
border-left: #C4C9DB 1px solid
border-top: #C4C9DB 1px solid
border-right: #565968 1px solid
border-bottom: #565968 1px solid
The values in the CSS Styles panel should now
look like this:
In this case, it’s probably easier to use the eyedropper tool in your graphics program,
but there’s a useful trick if you want to copy the color of an object outside
Dreamweaver. Adjust the size of the Dreamweaver workspace so that you can see the
object, click the Color Picker, and hold down the mouse button. You can then drag
the eyedropper outside Dreamweaver. The Color Picker inside Dreamweaver constantly
updates to show the color currently being sampled by the eyedropper. Release
the mouse button when you find the color that you want.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
204
5. There’s just one final change: the font would look better if it were bold and slightly
smaller. As I explained in “Customizing the styles” earlier in the chapter, the place
to change font properties is in the ul.MenuBarHorizontal rule. As you can see
from the preceding screenshot, the ul.MenuBarHorizontal selector is listed in the
Rules pane. Yet if you select it, the font-size property is struck through. This can
be one of the most frustrating aspects of working with the CSS Styles panel in
Current mode, but it’s also one of its most powerful features.
To understand why font-size is struck through, hover your mouse pointer over
the property name. A tooltip should appear, as shown in Figure 7-13, explaining the
effect of the CSS cascade.
Figure 7-13. The CSS Styles panel in Current mode displays
tooltips that explain where a rule is overridden.
Dreamweaver tells you that the property is overridden elsewhere, because Current
mode always reflects the cascade as it affects the current selection in the Document
window. Since your cursor is inside a menu item, the Properties pane doesn’t simply
show you the ul.MenuBarHorizontal rules; it also explains how they are applied to
a menu item. Once you appreciate the subtle ways of how the position of your
cursor affects the display in Current mode, your ability to edit complex style rules
takes a giant leap forward.
6. As Figure 7-6 showed earlier in the chapter,
changing font-size in the wrong rule results
in mysteriously shrinking text. So, to make
sure you edit the correct rule, click
in the Tag
selector at the bottom of the Document window.
Change the value of font-size to 90%,
click Add Property to add the font-weight
property, and set it to bold, as shown here:
BUILDING SITE NAVIGATION WITH THE SPRY MENU BAR
205
7
7. Test the page in a browser. If you have been using the settings that I recommended
in “Setting your CSS preferences” in Chapter 5, there’s no need to save the style
sheet unless you had it open in the Document window. Otherwise, save it before
viewing the page. You should now have an attractive menu bar as shown in
Figure 7-1 at the beginning of this chapter.
You can check your files against stroll_horiz.html in examples/ch07 and
SpryMenuBarHorizontal_stroll.css in the SpryAssets folder.
Even if the text size is enlarged, the page structure is preserved, and the dark gray rollover
text ensures that spillover text remains reasonably legible. Enlarging the text does disrupt
the original design of the page, but certain trade-offs are inevitable in web design. The
purpose here has been to show you how to customize a Spry menu bar, rather than seek a
definitive answer to accessibility issues.
These instructions have concentrated on customizing a horizontal menu bar, but the
process is exactly the same for a vertical one. The main difference is that you don’t need
to wrap a vertical menu bar in a <-div-> of its own. However, if you do decide to use a separate
<-div-> , it shouldn’t have a fixed height. Otherwise, you may run into display problems
if the user enlarges the text in the browser.
A mixed blessing
There’s no doubt that the Spry menu bar is much more accessible and search enginefriendly
than the old Fireworks pop-up menus. However, I’m sure that many noncoders will
find customizing the CSS an uphill struggle. Instead of creating the menu buttons in a
graphic environment and letting the software take care of the coding, much more is left
up to the designer’s individual skill. It’s possible that a third-party developer will create an
extension to simplify the process of changing the colors in a more intuitive way. Alternatively,
it’s an enhancement that the Dreamweaver engineers should certainly consider.
In spite of the extra work involved, the Spry menu bar is an improvement on the old popup
menus, which deserve to be consigned to cyber oblivion. Moreover, the CSS skills
required to customize a menu bar are essential for building modern standards-compliant
sites. In my own experience, CSS is not something you can pick up overnight, but once the
various pieces begin to fall together, progress becomes much more rapid. So, if you’re
struggling, keep at it, and it will all come together in the end.
The menu bar is just one of eight Spry widgets new to Dreamweaver CS3. In the next chapter,
we’ll look at three more: tabbed panels, the accordion, and collapsible panels.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
206


8 SPRUCING UP CONTENT WITH
SPRY WIDGETS
A common dilemma with website design is too little space to display all the content that
needs to be on a particular page. Spry widgets to the rescue . . . In common with other
Ajax frameworks, Spry makes it easy to build components—such as accordions and tabbed
and collapsible panels—that slot into a web page and give it a much more dynamic feel.
The Spry Tabbed Panels (see Figure 8-1) and Spry Accordion (see Figure 8-18) are a series
of interlinked panels, in which just one panel is open at a time. Spry Collapsible Panels
work independently, so they can be opened and closed in any combination.
From the user’s point of view, all three are intuitive metaphors that shouldn’t need any
explanation. Equally important, from the developer’s point of view, they are easy to insert
and customize. Dreamweaver CS3 does all the Spry coding for you. All you have to do is
supply the content and skin the components with CSS. If you struggled with the Spry menu
bar in the last chapter, you’ll be pleased to know that the style sheets of these Spry
widgets are a lot simpler to edit.
What this chapter covers
Saving space with tabbed panels, accordions, and collapsible panels
Preserving text formatting with Paste Special
Selecting harmonious colors
Styling user interface widgets
Understanding Spry objects, methods, and properties
Opening and closing panels from hyperlinks
Removing widgets cleanly from a page
In this chapter, I’ll show you how to insert a set of tabbed panels, an accordion, and a
series of collapsible panels in stroll.html, the page that you’ve been using for the past
two chapters (there’s a copy in the download files if you haven’t built it yourself). I’ll also
show you how you can change the way the widgets work by making some simple changes
to the JavaScript inserted by Dreamweaver.
Features common to all Spry widgets
Several features are common to working with all Spry widgets. If you worked through the
last chapter, they should be familiar to you, but it’s worth repeating them here:
Always save your page in a Dreamweaver site before inserting a Spry widget.
After inserting a widget, save the page to link the external JavaScript file and style
sheet, and copy them to the site’s Spry assets folder (see “Setting up for Spry” in
Chapter 4). All instances of a widget in a site share the same files, so they are
copied only when inserting the first instance.
Dreamweaver attaches the widget’s style sheet immediately above the closing
tag. If your page has style rules embedded in conditional comments, move
the link to the style sheet above the conditional comments.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
210
Dreamweaver inserts a block of JavaScript at the bottom of the page to initialize
the widget when the page loads.
To see the widget’s details in the Property inspector, hover your mouse pointer
over the widget in Design view, and click the tab at the top left of the surrounding
border.
Although tabbed panels, accordions, and collapsible panels are great space savers, the
contents of hidden panels are loaded at the same time as the rest of the page. Don’t put
lots of heavy graphics in these widgets or overuse them on any individual page. The external
JavaScript file and style sheet for each widget add about 20KB to a page but are stored
in the browser’s cache after loading the first time.
Spry widgets all have methods and properties, which are covered in “Understanding Spry
objects” later in this chapter. The method of removing a Spry widget cleanly is covered at
the end of the chapter.
Building a tabbed interface
Tabbed panels use the common metaphor of tabs at the top of folders in a filing cabinet.
Click the tab, and the associated content is displayed in the panel beneath. It’s a clean, intuitive
way of storing a lot of content in a relatively small space. The example in Figure 8-1 has
four tabs, so the total space required to display the information is one-fourth of what it
would normally be.
Figure 8-1. Tabbed panels are a familiar website interface that users find easy to use.
SPRUCING UP CONTENT WITH SPRY WIDGETS
211
8
The Spry Tabbed Panels widget has two advantages over older methods of creating tabbed
panels: it takes only the click of a button to insert, and it degrades gracefully in browsers
that have JavaScript turned off or don’t understand the document object model recommended
by the World Wide Web Consortium (W3C DOM). If a user with an old browser,
such as Netscape 4, visits your site, the panels expand to display their contents, as illustrated
in Figure 8-2. Although the second and subsequent tabs are no longer directly
associated with the panels, everything remains visible. The accordion and collapsible
panels expand in a similar way, making all three user interface widgets accessible.
Let’s take a look at the anatomy of a tabbed panels widget.
Examining the structure of the tabbed panels widget
There are three ways to insert a Spry tabbed panels widget: from the Spry tab of the Insert
bar (as shown in the following screenshot), from the Layout tab of the Insert bar, or by
choosing Insert ä Spry ä Spry Tabbed Panels.
As soon as you choose one of these methods, Dreamweaver inserts a default two-tab
widget (see Figure 8-3) at the current insertion point in the page. Save the page again to
copy the dependent files (SpryTabbedPanels.js and SpryTabbedPanels.css) to the site’s
Spry assets folder.
Figure 8-3. The default tabbed panels widget contains two tabs styled with a neutral gray interface.
Figure 8-2.
The Spry Tabbed Panels widget expands all panels if
the browser cannot interpret the JavaScript.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
212
The underlying XHTML looks like this:
<-div- id="TabbedPanels1" class="TabbedPanels"><-span->
<-span->
<-div- class="TabbedPanelsContentGroup"><-span->
<-div- class="TabbedPanelsContent"><-span->Content 1 <-span->
<<-div- class="TabbedPanelsContent"><-span->Content 2 <-span->
<-span->
<-span->
The whole widget is wrapped in a <-div-> ; the tabs are an unordered list, and the panels are
in a nested <-div-> . Each individual panel is also a <-div-> , nested one level further down.
The only element that has an ID is the overall wrapper <-div-> . Dreamweaver automatically
calls the first tabbed panels widget on a page TabbedPanels1, and numbers subsequent
instances TabbedPanels2, and so on. Everything else is controlled by classes. Although
each element has a class assigned to it explicitly in the underlying code, other classes are
generated dynamically by the external JavaScript file. Table 8-1 explains what each class is
for. In common with all user interface widgets, the class names are long, but descriptive.
Table 8-1. The classes used to style the tabbed panels widget
Class Type Purpose
TabbedPanels Explicit Eliminates margin and padding
surrounding the widget and clears
any preceding floats. This class must
always have an explicit width. The
default value is 100% to fill all available
space.
TabbedPanelsTabGroup Explicit Removes margin and padding from
the tabs as a group.
TabbedPanelsTab Explicit Styles the individual tabs. Uses relative
positioning to shift the tabs 1 pixel
down and gives the bottom border
the same color as the top border of
TabbedPanelsContentGroup. This
creates the illusion that the tabs are
being drawn behind the content
panel. Two nonstandard properties
(-moz-user-select and -khtml-userselect)
are set to none to prevent
users from selecting the text in
Firefox, Mozilla, and Konqueror.
Continued
SPRUCING UP CONTENT WITH SPRY WIDGETS
213
8
Table 8-1. The classes used to style the tabbed panels widget (continued)
Class Type Purpose
TabbedPanelsTabHover Dynamic Controls the rollover look of the tabs.
TabbedPanelsTabSelected Dynamic Sets the background color and
bottom border of the currently
selected tab to the same as the
TabbedPanelsContentGroup to
create the illusion that the tab is
part of the panel.
TabbedPanelsContentGroup Explicit Ensures that the panels sit beneath
the tabs. Sets the background and
border colors for the panels.
TabbedPanelsContent Explicit Styles the content of an individual
panel. By default, only adds 4px
padding.
TabbedPanelsContentVisible Dynamic Empty style rule that can be used to
give a different style to the currently
visible panel.
Editing a tabbed panels widget
Unlike the Spry menu bar, there’s no option to turn off the styling in Design view. The
Property inspector has only three settings for the tabbed panels widget (see Figure 8-4):
ID, number and order of panels, and the default panel. The Customize this widget link
opens Dreamweaver help at the page listing the style settings.
Figure 8-4. The Property inspector for the tabbed panels widget is very simple.
Sharp-eyed readers will have noticed that the <-li-> tags contain the tabindex attribute,
which makes the code invalid according to the W3C specifications. Although Spry
generates classes dynamically, Internet Explorer doesn’t support setting tabindex
through JavaScript, so this was the compromise adopted to make it possible to navigate
the panels with the Tab key. If W3C validation is vital to you, remove the
tabindex attributes. However, this will make your page less accessible to assistive
technology for the disabled and keyboard users. Occasionally bending the rules like
this makes sense and has no adverse effect in any browser.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
214
Use the plus (+) and minus (–) buttons to add or remove panels, and the up and down
arrows to reorder them. The name of each panel changes when you edit the tabs in Design
view. The Default panel drop-down menu on the right determines which panel is open
when the page first loads.
There are two ways to open a tab or panel for editing, as follows:
Bring up the details of the widget in the Property inspector, and select the panel
name in the Panels list.
Position your mouse pointer over the right side of the tab until an eye symbol
appears, as shown in Figure 8-5, and click.
The panel is a <-div-> , so you can insert anything you like: text, images, etc.
Right, roll up your sleeves and insert a tabbed panels widget into stroll.html. To make it
easier to dip into individual chapters, the download files use the version of stroll.html
from Chapter 6 without the Spry menu bar, as it involves fewer dependent files.
1. Copy stroll.html from examples/ch08 to workfiles/ch08 and stroll_final.css
from examples/styles to workfiles/styles. Update links if prompted by
Dreamweaver. Save a copy of stroll.html as stroll_tabbed.html.
2. Scroll down to the end of the first block of text in the mainContent <-div-> (just
above the Artists at Work heading). Press Enter/Return to insert a new paragraph.
Type Getting There, and convert it to a heading by selecting Heading 2 from the
Format drop-down menu on the left of the Property inspector.
3. With your cursor at the end of the new heading, click the Spry Tabbed Panels
button on the Spry tab of the Insert bar (or use the Layout tab or Insert menu as
described earlier). You should now have a tabbed panels widget in the middle of
the page, as shown in Figure 8-6.
As long as your cursor is at the beginning or end of an existing element when you
insert a widget, Dreamweaver correctly places the widget outside the existing element.
If your cursor is anywhere else, Dreamweaver splits the existing element by
creating closing and opening tags and inserting the widget between them.
Inserting and editing a tabbed panels widget
Figure 8-5.
Click the eye symbol at the right side of a tab
to reveal its associated panel for editing.
SPRUCING UP CONTENT WITH SPRY WIDGETS
215
8
Figure 8-6. By default, the tabbed panels widget fills the available horizontal space.
4. Save stroll_tabbed.html, and click OK when prompted to copy the dependent
files.
5. Rename SpryTabbedPanel.css in the Spry assets folder as SpryTabbedPanel_
stroll.css, and update the links when prompted. Move the link to
SpryTabbelPanel_stroll.css above the conditional comments in the of
the page. There won’t be any conflicts of style rules, but this is a good habit to
get into.
6. Place your cursor inside the first tab, delete Tab 1, and type Tube.
7. Open getting_there.doc in examples/ch08, and copy the paragraphs labeled Tube
to your clipboard. If you can’t open a Word document, the text is in
getting_there.txt, but Dreamweaver won’t do the automatic formatting in the
next step.
8. Highlight Content 1 in the tabbed panels widget, and press Ctrl+Shift+V/
Shift+Cmd+V or go to Edit ä Paste Special. This brings up the dialog box in
Figure 8-7.
Figure 8-7. Paste Special preserves a lot of formatting when
importing text from word processor documents.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
216
This lets you preserve the original formatting of a word-processed document. It
also has an option to remove extra spacing between paragraphs in Microsoft Word.
Use the settings shown in Figure 8-7 and click OK. The imported text should
replace the placeholder text and be nicely formatted in paragraphs.
If you used the plain text in getting_there.txt, you need to format it manually
as paragraphs with the Format drop-down menu in the Property inspector.
Dreamweaver places a
tag between the paragraphs, so you need to split
them by pressing Enter/Return and then remove the extra line created by the

tag.
9. Position your cursor inside the second tab, and rename it Bus.
10. Open the second panel for editing by selecting it in the Property inspector (click
the turquoise tab at the top left of the widget, if necessary) or clicking the eye icon
as shown earlier in Figure 8-5. Copy the Bus paragraphs from getting_there.doc,
and use Paste Special to replace the placeholder text in the second panel.
11. Click the turquoise Spry Tabbed Panels tab at the top left of the widget to bring up
its details in the Property inspector, and click the plus button in the Property
inspector to add two more panels. Rename them Water bus and Oyster Card, and
repeat steps 7 and 8 to replace the placeholder text with copy from
getting_there.doc.
12. With the Oyster Card panel open, insert oystercard.jpg at or near the beginning
of the second paragraph. (You can drag and drop it from the Files panel, use the
Insert Image button on the Common tab of the Insert bar, or go to Insert ä Image.)
Enter Oyster Card as the Alternate text when prompted.
13. To make the text wrap around the image, with the image still highlighted, select fltlft
from the Class drop-down menu in the Property inspector.
14. Open the first panel (Tube) for editing, and insert underground.jpg at the beginning
of the first paragraph. Set Alternate text to Underground station sign and Class
to fltrt.
15. Save stroll_tabbed.html, and press F12/Opt+F12 to view the page in a browser.
The bottom half of the page should look like Figure 8-8. Click the various tabs to
display the other panels. You’ll see that the height of the panels expands and contracts
depending on the amount of content. All content below the tabbed panels is
repositioned according to the height of the selected panel, so you need to be careful
when incorporating this widget in a design where the layout needs to be pixel
perfect.
Check your code if necessary with stroll_tabbed.html in examples/ch08. The version
in the download files contains a link that will be added later, but is otherwise
identical.
SPRUCING UP CONTENT WITH SPRY WIDGETS
217
8
Figure 8-8. Even without customizing the styles, Spry Tabbed Panels look at home in most pages.
The neutral gray styling fits in easily with many designs, so you could leave it as it is.
However, I don’t imagine that you’ll let me get away with that, so let’s restyle the panels.
The bottom of the panels is too close to the following headline, so that needs fixing, too.
Selecting harmonious colors
A good way to find colors to fit your website is to select a dominant image and use the
eyedropper tool of a graphics program, such as Fireworks, to select colors. You can then
use a color wheel to generate color schemes. There’s a free one online at http://labs.
adobe.com/technologies/kuler/.
There’s also a useful little tool inside Dreamweaver that I used to find colors for the
tabbed panels. I decided to use as base colors the pink (#F8F1EB) from the page background
and the russet (#C99466) border down both sides of the container <-div-> . In a
blank page, I entered the base color in the Text Color field of the Property inspector and
launched the System Color Picker as described in Figure 8-9. By moving the luminosity
slider on the right of the Color panel you can select brighter or darker shades.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
218
Figure 8-9. The Dreamweaver System Color Picker can be useful in picking different shades of a
base color.
The Color panel shows color values only in terms of hue, saturation, and luminosity, or red,
green, and blue, but as soon as you click OK, you can copy the hexadecimal equivalent
from the Text Color field of the Property inspector. Table 8-2 lists the colors that I finally
decided on.
Table 8-2. Conversion chart for Dreamweaver defaults and substituted colors
Default color Replacement Applies to
Light gray (#EEE) Light pink (#FAF3ED) Panel background color and
selected tab
Medium gray (#DDD) Darker pink (#F2E1D2) Nonselected tabs
Darker gray (#CCC) Dusky pink (#ECD3BD) Tabs on rollover
Darker gray (#CCC) Light brown (#DFBD9F) Lighter borders
Dark gray (#999) Russet (#C99466) Darker borders
To simplify customization of a Spry widget, make a similar chart of the default colors and
your chosen replacements. You can then go through the style rules quite quickly to make
the substitutions. Dreamweaver uses the same shade of gray for the tabs on rollover and
the lighter borders. I wanted a darker border, so you need to take care when replacing
#CCC. Otherwise, each color is a straight swap.
SPRUCING UP CONTENT WITH SPRY WIDGETS
219
8
Let’s style the tabbed panels using the color scheme outlined in Table 8-2. Continue working
with stroll_tabbed.html from the previous exercise.
1. As Table 8-1 indicates, several important classes
are generated dynamically, so they don’t show
up in the CSS Styles panel in Current mode.
Open the panel in All mode instead, expand the
SpryTabbedPanels_stroll.css tree menu,
if necessary, and select the first selector
(.TabbedPanels), as shown in Figure 8-10.
Figure 8-10.
The easiest way to restyle a tabbed panels widget
is to go through each selector in turn.
This class controls the horizontal and vertical space around the tabbed panels, as
well as their overall width. As Figure 8-8 shows, there’s no gap between the bottom
of the panel and the following heading. So you need to adjust the margin property.
Click the margin value field, and change 0px to 0px 0px 15px 0px. This adds a 15-
pixel margin on the bottom but leaves the other sides with a 0-pixel margin.
If you want to constrain the width of the panels, this is where you should edit the
width property. Do not delete the width property, as it’s required for the widget to
display correctly in Internet Explorer.
In Chapter 6, I said that it wasn’t necessary to add the unit of measurement after 0. So,
why am I being inconsistent and using it here? During testing, I discovered what must
qualify as one of the most bizarre bugs ever. Using 0 consistently caused Dreamweaver
to crash, and Dreamweaver could not be relaunched until the style sheet was deleted.
This bug is triggered by a style sheet being exactly 8,192 bytes or a multiple thereof. It
affects only Windows, and only if you make the changes in the CSS Styles panel.
Adobe has isolated the problem, and it will be fixed in an updater, so it may have been
resolved by the time you read this. However, since 0px is valid, I suggest that you use
it here, rather than risk a crash.
Styling a tabbed panels widget
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
220
2. Move to the next selector (.TabbedPanelsTabGroup). It doesn’t affect background
colors or borders, so move to the next one without making any changes.
3. The third selector (.TabbedPanelsTab) is the most complex. The default settings
are shown in the left screenshot of Figure 8-11.
As Table 8-1 shows, this selector sets the styles for the individual tabs. There’s a
special style for the currently selected tab, so set the background-color property
to darker pink (#F2E1D2).
The color of the border-left property is lighter than the other three borders, so
use light brown (#DFBD9F), and set the others to russet (#C99466).
The default setting for font uses the shorthand version like this:
font: bold 0.7em sans-serif
Since this uses only the generic sans-serif for font-family, it’s a good idea to
change it, but editing shorthand can be tricky. So delete it, and use Add Property
to create separate properties for font-weight, font-size, and font-family.
By the time you have made all the changes, the Properties pane should look like the
right screenshot in Figure 8-11.
Figure 8-11. The default styles for the tabs (left) and styles after
editing (right)
4. Move to the fourth selector (.TabbedPanelsTabHover). This class name is self
explanatory. I want the tabs to be dusky pink on rollover, so change backgroundcolor
to #ECD3BD.
Newly added properties are initially displayed at the bottom of the Properties
pane, but when the pane is refreshed, Dreamweaver shows them in alphabetical
order for ease of editing.
SPRUCING UP CONTENT WITH SPRY WIDGETS
221
8
5. The next selector (.TabbedPanelsTabSelected) is the dynamic class that styles the
currently selected tab. Both background-color and the color of border-bottom
need to be the same as the panel—in other words, light pink (#FAF3ED).
6. The sixth selector (.TabbedPanelsTab a) doesn’t actively affect the widget in its
default state. If you put a dummy link around the text in a tab, this style rule limits
the focus lines around the text, rather than around the entire tab. You can leave it
unchanged and move on to the next selector.
7. The seventh selector (.TabbedPanelsContentGroup) is
the last one that you need to edit. It controls the
background-color property of the panel and the surrounding
border. Change the values like this:
8. Press F12/Opt+F12 to preview stroll_tabbed.html in a browser (save the style
sheet if you have been working with it open in the Document window). You now
have a nicely styled set of tabbed panels that blend in better with the design.
9. There’s one further improvement you could make by reducing the size of the text
and adding some horizontal padding to the paragraphs. Position your cursor anywhere
inside one of the paragraphs in the tabbed panels widget, and click the New
CSS Rule icon (see alongside) at the bottom right of the CSS Styles panel.
The New CSS Rule dialog box suggests this horrendous dependent selector:
.twoColFixLtHdr #container #mainContent #TabbedPanels1 å
.TabbedPanelsContentGroup .TabbedPanelsContent å
TabbedPanelsContentVisible p
Apart from the complexity of this selector, TabbedPanelsContentVisible is not
preceded by a period, presumably because it’s dynamically generated. The lack of
the period renders the selector invalid. However, all you need is the following:
.TabbedPanelsContent p
Edit the Selector field in the New CSS Rule dialog box to use this simplified version;
make sure that Define in is set to SpryTabbedPanels_stroll.css, and click OK.
10. In the Type category of the CSS Rule Definition dialog box, set Size to 75%. Then
select the Box category, deselect Same for all in the Padding section, set Right and
Left to 10 pixels, and click OK.
11. Refresh the page in a browser. The contents of the tabbed panels should now look
more compact but with more breathing space on either side. If necessary, compare
your style sheet with SpryTabbedPanels_stroll_horiz.css in the SpryAssets
folder.
As well as opening a panel by clicking its tab, you can open one remotely, as this exercise
shows. Continue working with stroll_tabbed.html from the previous exercise.
Opening a tabbed panel from a link
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
222
1. In Design view, select the tab named Bus in the Property inspector, or click its eye
icon to reveal the panel content.
2. Select the words Oyster Card in the final sentence, and type javascript:; in the Link
field of the Property inspector to create a dummy link.
3. With the words Oyster Card still highlighted, open Split view to reveal the underlying
code, and position your cursor just before the closing angle bracket of the
tag.
4. Press the spacebar. Code hints should pop up. Type onc, and press Enter/Return
when onclick is highlighted. The link surrounding Oyster Card should now look like
this (with the cursor between the quotes following onclick):
Oyster Card
5. To call one of the Spry methods (functions) on a widget, type the ID of the widget
followed by a period and the name of the method. The ID of this widget is
TabbedPanels1. As soon as you type the period after the ID, Dreamweaver pops up
code hints for the selected widget, showing the available methods (see Figure 8-12).
Figure 8-12. Code hints in Dreamweaver CS3 recognize Spry widgets and
display available functions.
Use your mouse or keyboard arrow keys to select showPanel(elementOrIndex) and
double-click or press Enter/Return. This inserts showPanel followed by an opening
parenthesis. Type 3 followed by a closing parenthesis.
Following JavaScript convention, Spry counts the panels from 0, so 3 represents the
fourth panel (Oyster Card). The Oyster Card link code should now look like this:
Oyster å
Card

6. Save stroll_tabbed.html, and reload it in a browser. Select the Bus tab, and click
the Oyster Card link within the displayed panel. The fourth panel should open.
The link to open another panel doesn’t need to be inside the widget; it can be anywhere
in the page. The use of Spry methods is explained further in “Understanding Spry objects”
later in the chapter.
Converting to vertical tabs
If you look at the CSS Styles panel in All mode with stroll_tabbed.html open, you’ll see
four descendant selectors all beginning with .VTabbedPanels at the bottom of the tree
menu for SpryTabbedPanels_stroll.css (see Figure 8-10 earlier). These are a default set
SPRUCING UP CONTENT WITH SPRY WIDGETS
223
8
of rules that let you change the orientation of a tabbed panels widget. Instead of tabs running
across the top, you can have them running down the left side of the panel. Table 8-3
describes the purpose of each selector.
Table 8-3. Style rules for vertical tabs
Selector Type Notes
.VTabbedPanels Explicit Vertical tabs are displayed in a column.
.TabbedPanelsTabGroup This selector sets the background color,
border, height, and width of the column.
The height (default 20em) needs to be
the same as in .VTabbedPanels
.TabbedPanelsTabGroup. Don’t use a
pixel height unless the panels contain
elements of fixed dimensions, such as
images.
.VTabbedPanels Explicit Works in combination with
.TabbedPanelsTab .TabbedPanelsTab. Overrides top, left,
and right borders, float, and margin. All
other rules, such as background color
and font, are preserved from the
.TabbedPanelsTab class.
.VTabbedPanels Dynamic Overrides the background and bottom
.TabbedPanelsTabSelected border colors of the selected tab. With
horizontal tabs, the bottom border is set
to the same color as the panel to create
the illusion that the tab is part of the
panel, but with vertical tabs, a solid
bottom border is needed.
.VTabbedPanels Explicit Sets the height and width of the
.TabbedPanelsTabGroup panels but inherits the background
color and borders from the
.TabbedPanelsTabGroup class.
These descendant selectors work in conjunction with the classes listed in Table 8-1.
Because basic colors are set in the main classes, this makes it slightly trickier to style vertical
tabbed panels if you haven’t already styled the default horizontal widget.
Another problem with vertical tabs is the need to set a height, which must be sufficient to
accommodate the content of the biggest panel. It should be specified in ems so that the
panels can expand if the user increases the size of text in the browser. It is possible to omit
the height to create a flexible layout, but the result doesn’t look as good, as you’ll see
shortly.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
224
Let’s convert the tabbed panels widget in stroll_tabbed.html to use vertical tabs.
Continue working with the same files as in the previous exercise.
1. Click anywhere inside the tabbed panels widget in Design view, and select
in the Tag selector at the bottom of the
Document window. This is the main <-div-> that wraps around the tabbed panels
widget. Right-click and choose Set Class ä VTabbedPanels from the context menu,
as shown in Figure 8-13.
Figure 8-13. The first step in converting to vertical tabs is to change the class of the
surrounding <-div-> .
This changes the class of the <-div-> from TabbedPanels to VTabbedPanels, and the
widget immediately inherits the default rules for vertical tabs. Because the default
widths (10em + 30em) are too great, the design falls apart completely in Design view.
2. Adjust the width by highlighting the first vertical tab selector (.VTabbedPanels
.TabbedPanelsTabGroup) in the CSS Styles panel. Change the width property from
10em to 20%.
3. Next highlight the final selector (.VTabbedPanels .TabbedPanelsContentGroup),
and change the width property from 30em to 78%. The widget springs back into
shape. Choosing figures that add up to less than 100 percent avoids rounding
errors. To display a web page, the browser needs to convert percentages to whole
pixels. If it rounds up, floated content no longer fits and is pushed down the page,
breaking your design.
Switching the orientation of tabbed panels
SPRUCING UP CONTENT WITH SPRY WIDGETS
225
8
4. The vertical tabs have inherited most of the colors from the original classes, but
you still need to make a couple of adjustments. Highlight the first vertical tab selector
(.VTabbedPanels .TabbedPanelsTabGroup), and change #EEE to light pink
(#FAF3ED). Also change the border colors: #CCC to light brown (#DFBD9F) and
#999 to russet (#C99466). This is the same color scheme as in Table 8-2.
5. Change the colors in .VTabbedPanels .TabbedPanelsTabSelected. Change #EEE
to light pink (#FAF3ED) and #999 to russet (#C99466).
6. Save stroll_tabbed.html and the style sheet, if necessary, and press F12/Opt+F12
to reload the page in your browser. You’ll probably notice two things: the fixed
height makes the first panel (Tube) look rather bare, and there’s hardly any gap
between the bottom of the panel and the following headline. Click the fourth tab
(Oyster Card) and, in a standards-compliant browser at least, you’ll see that the
contents of the panel spill out, as shown in Figure 8-14.
Figure 8-14. The danger with a fixed height is that text might spill out
of the panel.
7. Fixing the gap between the tabbed panel widget and the next headline is easy. Add
the margin-bottom property to the .VTabbedPanels .TabbedPanelsContentGroup
selector, and set its value to 15 pixels.
8. Dealing with the text overspill problem is not so easy. One solution is to change
the height property of the .VTabbedPanels .TabbedPanelsTabGroup and
.VTabbedPanels .TabbedPanelsContentGroup selectors to 23.5em. The problem
with this is that the panels with less content begin to look decidedly empty.
9. The alternative is to remove the height property from both selectors. This causes
each panel to expand or contract according to its contents. However, the background
color of the column of tabs stretches down only as far as the last tab, as
shown in Figure 8-15. You can’t give a background color to the surrounding <-div-> ,
because both the tabs and panels are floated inside, so the <-div-> itself has no
height.
To revert to horizontal tabs, repeat step 1, changing the class back to
TabbedPanels. Compare your style sheet with SpryTabbedPanels_stroll_both.
css in the SpryAssets folder, if you need to check your own code. It contains the
styles for both horizontal and vertical tabs.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
226
Figure 8-15. Removing the height makes the panels flexible but removes the background from the
tab column.
Avoiding design problems with tabbed panels
As the previous exercise demonstrates, content overspill creates problems with the
panels. You also need to take care with the tabs, because on a horizontal layout, they are
floated left. If you make the labels too long, you might end up with the effect shown in
Figure 8-16.
Figure 8-16. Too much content in the tabs breaks the design.
The result can look even more disastrous if you attempt to constrain the width of the tabs
by setting a width property in the .TabbedPanelsTab class, as Figure 8-17 shows.
Figure 8-17. Setting a fixed width on the tabs leads to even more
unpredictable results.
When using Spry Tabbed Panels, always keep the tab labels short. Don’t try to get them to
fit exactly across the top of the panels, because some visitors are likely to increase the text
size, forcing one or more tabs to drop down in the same way as too much content does in
SPRUCING UP CONTENT WITH SPRY WIDGETS
227
8
Figure 8-16. In this sense, Spry Tabbed Panels aren’t 100 percent bulletproof, but the original
short labels (Tube, Bus, Water bus, and Oyster Card) don’t cause any problem even
when the largest font size is chosen in Internet Explorer. In Firefox, you need to increase
the text size four times before the last tab slips down. Somebody who needs to make the
text so large is unlikely to be concerned by design aesthetics. Still, if you are worried about
overflow, you might consider adding the following properties to the .TabbedPanelsTab
class:
max-width: /* less than total width divided by number of tabs */
white-space: nowrap;
overflow: hidden;
This keeps all the tabs on one line, regardless of how much the text is enlarged. The disadvantage
is that the end of the label may be hidden if it’s too long. Web pages cannot be
controlled as rigidly as print, so you need to take into account the need for flexible design.
Alternatively, avoid using design elements such as tabbed panels if you need to maintain
pixel-perfect accuracy in your layout.
Understanding Spry objects
To get the most out of Spry Tabbed Panels, Spry Accordion, and Spry Collapsible Panels,
you need to dive into Code view from time to time, as you did when creating the link to
open the fourth panel. So, let’s pause briefly to consider the technology. Spry widgets are
JavaScript objects. The idea of using objects is that all the complex coding remains locked
away in the object definition, so you need concern yourself only with parts exposed
through the object’s methods and properties. Methods are functions that can be used to
get the object to perform particular actions. For example, “Opening a tabbed panel from a
link” used the showPanel() method of a TabbedPanels object to open a panel. Properties
define the state of an object, such as whether a panel is open or whether the panels have
a fixed height.
When you insert a Spry widget, Dreamweaver initializes the JavaScript object at the bottom
of the page just before the closing tag like this:


Of course, the object definitions aren’t literally locked away. You can study them by
opening the external JavaScript file. However, you should never attempt to edit the
JavaScript in the external files unless you really know what you’re doing.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
228
The line of JavaScript highlighted in bold uses the new keyword to construct a new
TabbedPanels object. The Spry.Widget.TabbedPanels() method is passed just one argument,
the ID of the widget’s wrapper <-div-> . The var TabbedPanels1 at the beginning of
the line means that the new tabbed panels object is being stored in a JavaScript variable
with the same name as the <-div-> . The ID and the JavaScript variable don’t need to be the
same, but Dreamweaver adopts this convention to make it easy to use Spry properties and
methods.
Dreamweaver normally handles all the coding for you, but if you want to get more adventurous
with Spry widgets, you need to know how to pass new properties to the JavaScript
object when it’s initialized. If you change the value of the Default panel in the Property
inspector in stroll_tabbed.html to Water bus, Dreamweaver changes the initialization
code like this:
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", å
{defaultTab:2});
The second argument enclosed in curly braces lists the name of the property you want to
define, followed by a colon and the value you want to give it. If you want to change more
than one property, separate each property/value pair with a comma like this:
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", å
{property1:value1, property2:value2, property3:value3});
Technically speaking, this type of construction is an object literal. In other words, the argument
is a JavaScript object in its own right. You can put whitespace around the colons and
insert new lines after the commas for ease of reading. Don’t worry if the terminology
sounds intimidating, you’ll see shortly how a little bit of hand coding makes the Spry
Accordion more flexible.

No comments:

Post a Comment