This document outlines a tutorial for building a basic e-commerce website using Dreamweaver CS5.5, detailing steps such as defining the website, creating divs, and setting up CSS styles. It covers adding components like headers, content, menus, and footers, alongside instructions for managing files and folders. The guide concludes with directions for adding additional pages and ensuring the links function correctly.

1. Building a basic website using
dream weaver CS5.5 for
eCommerce
By Mohamed AlShurafa

2. Table of Content
 Using Dreamweaver CS5.5 Me
 Defining your web site
 Adding DIV’s
 Creating CSS Sheet file
 Folders Needed
 Adding Contents
 Adding Tables
 Adding Logos and Text

3. Launch Dreamweaver
Select HTML

4. Dream Weaver Common Toolbar

5. Dream Weaver First Page!

6. Designing Your Web Site

7. Building Header Div Tag
header

8. Building Content Div Tag
After Creating header tag we directly create content tag

9. Building Footer Div Tags
Footer div tag
If you click on any tag it will high light the content

10. Creating CSS Style Sheet
Change to (new style sheet file)

11. Saving CSS File
Save as main.css
Locate folder then click Save

12. Creating Header rules
Width x Height
Un tick This setting will make
the webpage auto
maximized and
minimized
Change to auto
Background color
Or header picture
This rule will apply on the header upper of the webpage

13. Creating Content rules
This rule will apply on the content in middle of the website

14. Creating Footer rule
This rule will apply on the footer bottom of page

15. Body Tag for CSS
Don’t forget !!!!!
Always save your work
by pressing ctrl + s
Or from File > Save all !!
This rule will change outside the website box

16. Web Site Sample Page
header
content
Body
Body
Footer
Body Body

17. Re editing CSS style sheet
 You can edit the style you have
created any time by double clicking
the CSS id
- Width for all 960px
- We put auto left & right
margins for all
- You can change BG anytime
- Apply then ctrl + S to save

18. Folders Required
You can add folders
By right click on your project name
Then Create new folder
CSS folder to restore your CSS file
Where you will save
your website logos, products …etc
Index.html file should be on root folder

19. Lets add some more
- Create your own website logo with
width 960px and height 100px as we
put in header
- Using photoshop open a new project
then use your imagination to design
- You can google it just write “header
banner”

20. Header Samples

21. Product Samples

22. These images should be saved in
Image folder

23. Adding Header
 Lets add a header with size 100x960
px
First we will
Edit #header
By double click
Browse
For your
logo
After this step a picture should appear in the
header

24. Adding a menu for a website
Lets add some menu items:
Home | Bicycle | Doggy | Bear | Car | ContactUs
Lets add some links to the menu
Highlight the word Put hash “#” in the link field

25. Adding properties for the
menu
 We will add a new CSS rule for menu

26. Your Web Page first look

27. Adding Content
 The content of your index.html should
has some general information about
your services or products
 You may put any general information,
advertisement, thumbnails of your
products.

28. Adding a Table
 Lets divide content tab to 4 rows or more table
The icon @ right behind
the div icon allows you
to create table
You can customize your table size
by stretching the corners

29. Editing Content
Advertisement
Content 1 Content 2
Content 3 Content 4

30. Editing the table
We will merge this cell
To make a space for advertisement
When you highlight the table this property table will appear
To disable borders line
Put value 0

31. Adding a Content
Lets add advertisement image
On the merged row
Lets add some text and image
Highlight and then put a format

32. Adding a Footer
Footer normally has:
menu, copyright or contact information
 Lets add a copyright
This is a tutorial to build a website using dream weaver or
images has been copied from public websites for more
information contact us toy@toys.com

33. The web site should appear like this

34. Adding extra pages
 Usually the product’s page has more
details about the product/service
 It contains specification, pictures and
price
 Before saving make sure the home
link is working properly
 Save as the index.html to your product
name
 Edit the content table to add some
more extra information about your
product/service

35. Congratulations !!
 You have made your index page using
Dreamweaver CS5.5 ME with CSS
style sheet
 For the rest pages just save as the
index.html to another name thin link
them using the Link tool
Check this out !!
www.oud-wood.com