Adobe dreamweaver cs5 classroom in a book(bbs)

Page 201

7 In the CSS Styles panel, right-click the .content .cost rule and choose Duplicate from the context menu.

8 Change the Selector Name to .content .day and click OK. 9 Apply .content .day to the Day column in the Classes table, as in step 6. 10 Duplicate .content .day and name the new .content .length rule and click OK. Apply it to the Length column in the Classes table. By creating custom classes for each column, you have the means to modify each column individually. One more rule is needed to format the Class column. This column requires only a generic rule to apply a more appealing width. 11 Right-click the .content .w100 rule and duplicate it. Name the new rule .content .w150 and click OK. Edit the new rule and change the Width to 150px in the Box category. Apply the new rule only to the Class header cell.

Tip: When applying a width value, only one cell needs to be formatted.

12 Save all files.

Adjusting vertical alignment If you study the content of the Class table, you will notice that many of the cells contain paragraphs that wrap to multiple lines. When cells in a row have differing amounts of text in them, the shorter content is aligned vertically to the middle of the cell. Many designers find this behavior unattractive and prefer to have the text all align to the tops of the cells. As with most of the other attributes, vertical alignment can be applied by HTML attributes or CSS. To control the vertical alignment with CSS, you can add the specification to an existing rule.

ADOBE DREAMWEAVER CS5 CLASSROOM IN A BOOK

181


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.