Download presentation
Presentation is loading. Please wait.
Published byDominick Tate Modified over 9 years ago
1
Creating A Simple Web Page
2
Step 1- Open Dreamweaver & Create A New Page (File New) and blank
3
Step 2- Create a Wrapper or Container For Your Site (Insert, Layout Objects, Div Tag) THEN CLICK NEW CSS RULE
4
Step 3- Link The Div Tag & Create A New CSS File (Save too)
5
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
6
Step 5- Now Save Your Page as “Index.html”
7
Step 6a- Go into the CSS Style Sheet And Add These Styles HEADER (BANNER) NAV
8
Step 6b- Go into the CSS Style Sheet And Add These Styles FOOTER TEXT SECTION
9
Step 7- Make sure index.html has the attached CSS Style Sheet to it (right click on page, CSSStyles, Attach)
10
Step 8- Do You Have This?
11
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
12
Step 10- Have You Got This?
13
Step 11- View In IE
14
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
15
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
16
Step 13- Notice In Dreamweaver You Have The Image Resources Available
17
Step 14- Drag In Images & Resize If Necessary
18
Step 15- Preview In IE
19
Step 16- Add Some Fonts In CSS for “Nav”
20
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.
21
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
22
Step 18- Check Your Page Works In IE
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.