Creating A Simple Web Page

Step 1- Open Dreamweaver & Create A New Page (File New) and blank

Step 2- Create a Wrapper or Container For Your Site (Insert, Layout Objects, Div Tag) THEN CLICK NEW CSS RULE

Step 3- Link The Div Tag & Create A New CSS File (Save too)

Step 4- Container CSS Summary (go to Box & Border) WIDTH: 960px BORDER: Black all around MARGIN: 0, auto, 0, auto If you double click on the CSSStyleSheet in the file view you get this

Step 5- Now Save Your Page as “Index.html”

Step 6a- Go into the CSS Style Sheet And Add These Styles HEADER (BANNER) NAV

Step 6b- Go into the CSS Style Sheet And Add These Styles FOOTER TEXT SECTION

Step 7- Make sure index.html has the attached CSS Style Sheet to it (right click on page, CSSStyles, Attach)

Step 8- Do You Have This?

Step 9- Create The HTML Structure Using Div Tags (make sure named exactly as CSS Styles) This structure will give you a header, left nav bar, a text area and footer

Step 10- Have You Got This?

Step 11- View In IE

Next Steps- Make A Page Template 1. Add in Navigation Link text 2. Add in Banner- 728 x 90px- 3. Add in Logo- 300 x 200px 4. Add in Animated Banner- 163x163px 5. Add in Editable Region

Step 12- In Your Website Folder Create A Folder Called “Images” and add your banner, logo and animated banner Add in Banner- 728 x 90px- 3. Add in Logo- 300 x 200px 4. Add in Animated Banner- 163x163px

Step 13- Notice In Dreamweaver You Have The Image Resources Available

Step 14- Drag In Images & Resize If Necessary

Step 15- Preview In IE

Step 16- Add Some Fonts In CSS for “Nav”

Step 17a- Create two editable regions and then create a new CSS for each of those sections for the text (Verdana, black etc)- One is a page header and one is just the page text.

Step 17b- Make sure your Section Header and section text are linked to the CSS you just created Select editable region Make sure the ID relates to the CSS here

Step 18- Check Your Page Works In IE