Formatting TEXT AND Using CSS

Adobe Dreamweaver CS3 - Illustrated

 Open The Striped Umbrella Web site  Open dwd_1.html from your student data files for Unit D.  Save it as spa.html in the striped_umbrella root folder in your H Drive.  You will then be asked to link the logo to your assets file on the H Drive. Just like you did for the banners. Adobe Dreamweaver CS3 - Illustrated

 Click to the right of The Spa logo on the page, press [Enter]  Click File on the menu bar, point to Import, click Word Document, navigate to your student data files for Unit D, then double-click spa.doc  REMEMBER TO SAVE!!!!! Adobe Dreamweaver CS3 - Illustrated

Change the bullets from round to square. List Items button located in the Property Inspector.

Clues to Use  Ordered lists  Also called numbered list  Contain numbered or lettered items  Dreamweaver uses several options for number styles  Roman  Arabic Adobe Dreamweaver CS3 - Illustrated

 Click Edit on the menu bar, then click Preferences  Click the General category if necessary, click the check box Use CSS instead of HTML tags to select it, then click OK Adobe Dreamweaver CS3 - Illustrated

Clues to Use  Using Cascading Style Sheets  CSS is a panel on the right side of the Dreamweaver window  Great timesavers  Can be exported to other Web sites  CSS can be classified by function 1. Class style is used to format any page element 2. HTML style is used to redefine HTML tags 3. Advanced style is used to format combinations of page elements Adobe Dreamweaver CS3 - Illustrated

For example: Styles are specific to certain elements. For example: Heading Contact Info Body Text

Adobe Dreamweaver CS3 - Illustrated Create a CSS Delete a CSS Edit a CSS Attach style sheet to a page CSS Specific Styles

 You will be creating the word “HOME” and making it change colors as you roll the mouse over the word.  It also allows you to return to the home page from the spa page. will not  You will not be able to see this effect unless you are in a browser viewing your web site. Adobe Dreamweaver CS3 - Illustrated

1. Complete Unit D and The Striped Umbrella website. 2. Do the Skills Review (blooms & bulbs) 3. Do Independent Challenge 1 (Rapids Transit) 4. Do Independent Challenge 2 (TripSmart)  ONLY IF YOU ARE FINISHED WITH 1-4 WILL YOU WORK ON YOUR OWN WEBSITE! Adobe Dreamweaver CS3 - Illustrated

 Unit E: 3/31 – 4/7 (3 days – 4.5 hrs)  Unit F: 4/9 – 4/15 (3 days)  Unit G: 4/17 – 4/23 (3 days)  Unit H: 4/27 - 5/1 (3 days)  Unit I: 5/5 – 5/11 (3 days)  Complete your own web site: 5/13-5/26 (5 days – 7.5 hrs.) Adobe Dreamweaver CS3 - Illustrated