Upload
barbra-glenn
View
233
Download
0
Tags:
Embed Size (px)
Citation preview
Formatting TEXT AND Using CSSFormatting 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
Adobe Dreamweaver CS3 - Illustrated
Adobe Dreamweaver CS3 - Illustrated
Change the bullets from round to square. List Items button located in the Property Inspector.
Clues to UseClues to Use
Ordered lists <ol> </ol> 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
Adobe Dreamweaver CS3 - Illustrated
Clues to UseClues 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.1. Class style is used to format any Class style is used to format any page elementpage element
2. HTML style is used to redefine HTML tags3. Advanced style is used to format
combinations of page elements
Adobe Dreamweaver CS3 - Illustrated
Adobe Dreamweaver CS3 - Illustrated
Adobe Dreamweaver CS3 - Illustrated
Styles are specific to certain elements. For example:For example:HeadingContact InfoBody 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.
You will not 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-ONLY IF YOU ARE FINISHED WITH 1-
4 WILL YOU WORK ON YOUR OWN 4 WILL YOU WORK ON YOUR OWN WEBSITE!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