- What You Will Learn
- Defining a Static Site
- Passing and Using Data with Ajax
- Connecting the Country Profiles Page to HTML Data
- Styling the Spry Table
- Creating Spry Regions
- Displaying with a Spry Accordion
- Adding Images and the Country Name
- Refining Page Display Using CSS Styling and Positioning
- What You Have Learned
- Additional Spry Functionality in Dreamweaver CS4
- Additional Resources
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Styling the Spry Table
The table you created is more functional than your average table, but it could certainly be more attractive. You could give it a border and maybe even a background color. What about alternating the colors of the rows to make it easier for users to see distinct records? That sounds great, but you're building the table dynamically. How can you color those rows on the fly?
Spry has some built-in attributes that will not only help you to color alternating rows dynamically, but add some additional effects as well. You can build the custom styles using Dreamweaver's tools, but you'll have to do a little hand-coding to access some of these Spry features.
- Return to profiles.html. In the CSS panel, click the button for a new CSS rule. For Selector Type, choose "Class (can apply to any HTML element)."
- Name the class .odd, as it will be used for the odd-numbered rows (see Figure 20). Click OK.
- In the next dialog, select Background in the Category list, and set a Background Color of #999999, as shown in Figure 21.
- Repeat this procedure to create three additional class selectors, as shown in the following table:
- For .rowSelect, assign a font weight of bold. Font weight is in the Type category.
- Change to either code view or split view and examine the code for the Spry table. See if you can find where it binds the variables for the countryName and region. Spry uses curly braces {} to indicate its bindings.
- Place your cursor just inside the closing bracket of the <tr> tag with the spry:repeat attribute (approximately line 42). Press the spacebar and then type the following code:
- Save your changes to both profiles.html and main.css. Select profiles.html from your file list and press F12 to view the changes in your browser. Figure 23 shows the result.
)
)
|
Name |
Background Color |
|
.even |
#CCCCCC |
|
.rowHover |
#FFFF99 |
|
.rowSelect |
#FFCC33 |
These classes will be applied dynamically to rows in the table by Spry, adjusting for the number of rows and reacting to the user's mouse movements.
Simply creating the custom styles doesn't cause them to display. They have to be tied to an element in the structure of the main document. You can tie them to the rows of the Spry table by using Spry attributes.
class="{ds_EvenOddRow}"
Spry has some built-in variables that mask the complexity of the programming logic necessary to alternate values dynamically based on the row number. The ds_EvenOddRow Spry variable changes the class name to either "odd" or "even," based on the current table sort (see Figure 22). The rows will then render using the odd and even classes that you created earlier.
){kind=small}
)
Spry has applied your odd and even classes to the rows. If you re-sort the columns, the colors will change dynamically. But what of the other classes you created? How does Spry call the .rowHover and .rowSelect to affect the display? As you look at the code, you can see a pattern with how Spry affects the HTML display. Spry code usually starts with spry: followed by a specific function or attribute. You'll use two more of these attributes that package some complex functionality in very little code.
- Return to the <tr> tag you modified in step 7 of the procedure you just completed. Place your cursor just inside the closing bracket, press the spacebar, and type the following code:
- Notice that Dreamweaver starts to present available options as you type. After you type spry:hover, Dreamweaver presents a list of class names from your stylesheet. Choose rowHover.
- Repeat the steps again, this time typing spry:select and choosing rowSelect for the value.
- Click the Live View button to the right of the Code/Split/Design view buttons. The design window will show a fully-functional preview of the changes.
- Click the Live Code button to the right of the Live View button, and mouse over the rows again. The Live Code view displays the dynamically changing HTML code as you mouse over or select a row.
- Re-sort the rows and observe the changes in classes as well as the complete reordering of the rows in the code. When you're finished observing this functionality, click Live Code and Live View again to deactivate them.
spry:hover
The finished line of code should look like Figure 24.
){kind=small}
The Spry functions that you just added will cause the value of the class for each row to change dynamically as you mouse over or select a row. Dreamweaver CS4 has added a powerful new tool for previewing the results of your changes, and viewing the changes with your code as you interact with it.
Roll your mouse up and down over the rows. Click to select a row. The classes you created are being applied—and you wrote remarkably little code.
One more subtle change is worth making to improve the user's experience. Notice that when you mouse over the table headings, your cursor remains an I-bar. If the cursor would change to a pointer, users would have a better visual cue that the headings were clickable hotspots. You can change that behavior with CSS.
- Return to profiles.html and create a class selector named .sortHead. Make sure that the Rule Definition option in the New CSS Rule dialog points to main.css. Click OK.
- In the next dialog, choose Block in the Category list and set text alignment to center.
- Choose Extensions in the Category list. For the Cursor option, type pointer in the text box (see Figure 25). Click OK.
- In design view, use the tag selector to choose the table heading (<th>) tag for the cell containing the Country Name heading. In the Properties pane, apply your newly created class sortHead to the table heading, as shown in Figure 26.
- Repeat the previous step for the Region heading. Save your file and then view the changes in Live View.
)
){kind=small}
Now, whenever the mouse pointer is positioned over the table headings, the cursor changes to a pointer, indicating to the users that active functionality is available in those spots.