Presentation is loading. Please wait.

Presentation is loading. Please wait.

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

Similar presentations


Presentation on theme: "Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank."— Presentation transcript:

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


Download ppt "Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank."

Similar presentations


Ads by Google