creating a simple web page. step 1- open dreamweaver & create a new page (file new) and blank
TRANSCRIPT
![Page 1: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/1.jpg)
Creating A Simple Web Page
![Page 2: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/2.jpg)
Step 1- Open Dreamweaver & Create A New Page (File New) and blank
![Page 3: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/3.jpg)
Step 2- Create a Wrapper or Container For Your Site (Insert, Layout Objects, Div Tag)
THEN CLICK NEW CSS RULE
![Page 4: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/4.jpg)
Step 3- Link The Div Tag & Create A New CSS File (Save too)
![Page 5: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/5.jpg)
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
![Page 6: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/6.jpg)
Step 5- Now Save Your Page as “Index.html”
![Page 7: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/7.jpg)
Step 6a- Go into the CSS Style Sheet And Add These Styles
HEADER (BANNER)
NAV
![Page 8: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/8.jpg)
Step 6b- Go into the CSS Style Sheet And Add These Styles
FOOTER
TEXT SECTION
![Page 9: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/9.jpg)
Step 7- Make sure index.html has the attached CSS Style Sheet to it (right click on page, CSSStyles, Attach)
![Page 10: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/10.jpg)
Step 8- Do You Have This?
![Page 11: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/11.jpg)
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
![Page 12: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/12.jpg)
Step 10- Have You Got This?
![Page 13: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/13.jpg)
Step 11- View In IE
![Page 14: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/14.jpg)
Next Steps- Make A Page Template
1. Add in Navigation Link text2. Add in Banner- 728 x 90px- 3. Add in Logo- 300 x 200px4. Add in Animated Banner- 163x163px5. Add in Editable Region
![Page 15: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/15.jpg)
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 200px4. Add in Animated Banner- 163x163px
![Page 16: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/16.jpg)
Step 13- Notice In Dreamweaver You Have The Image Resources Available
![Page 17: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/17.jpg)
Step 14- Drag In Images & Resize If Necessary
![Page 18: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/18.jpg)
Step 15- Preview In IE
![Page 19: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/19.jpg)
Step 16- Add Some Fonts In CSS for “Nav”
![Page 20: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/20.jpg)
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.
![Page 21: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/21.jpg)
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
![Page 22: Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank](https://reader035.vdocument.in/reader035/viewer/2022062321/56649e0c5503460f94af4f03/html5/thumbnails/22.jpg)
Step 18- Check Your Page Works In IE