Building a basic website using dream weaver CS5.5 for

eCommerce

By Mohamed AlShurafa

Table of ContentUsing Dreamweaver CS5.5 MeDefining your web siteAdding DIV’sCreating CSS Sheet fileFolders NeededAdding ContentsAdding TablesAdding Logos and Text

Launch DreamweaverSelect HTML

Dream Weaver Common Toolbar

Empty Page Appears here!

Dream Weaver First Page!

Designing Your Web Site

Building Header Div Tag

header

Building Content Div Tag

After Creating header tag we directly create content tag

Building Footer Div Tags

Footer div tag

If you click on any tag it will high light the content

Creating CSS Style Sheet

Write #headerThis will apply onHeader tag only

Change to (new style sheet file)

Saving CSS FileSave as main.css

Locate folder then click Save

Creating Header rulesWidth x Height

Background color

Or header picture

Un tick

Change to auto

This setting will make the webpage auto maximized and minimized

This rule will apply on the header upper of the webpage

Creating Content rules

This rule will apply on the content in middle of the website

Creating Footer rule

This rule will apply on the footer bottom of page

Body Tag for CSS

This rule will change outside the website box

Don’t forget !!!!!

Always save your work

by pressing ctrl + s

Or from File > Save all !!

Web Site Sample Page

header

content

Footer

Body B

ody

BodyBody

Re editing CSS style sheetYou 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

Folders Required

You can add foldersBy right click on your project nameThen 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

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”

Header Samples

Product Samples

These images should be saved inImage folder

Adding HeaderLets add a header with size

100x960 px

First we willEdit #headerBy double click Browse

For your logo

After this step a picture should appear in the header

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

Adding properties for the menuWe will add a new CSS rule for

menu

Your Web Page first look

Adding ContentThe 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.

Adding a TableLets divide content tab to 4 rows or more

tableThe icon @ right behind the div icon allows you to create table

You can customize your table size by stretching the corners

Editing Content

Advertisement

Content 1 Content 2

Content 3 Content 4

Editing the table

We will merge this cellTo make a space for advertisement

When you highlight the table this property table will appear

To disable borders linePut value 0

Adding a ContentLets add advertisement imageOn the merged row

Lets add some text and image

Highlight and then put a format

Adding a FooterFooter normally has: menu, copyright or contact information

Lets add a copyrightThis 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

The web site should appear like this

Adding extra pagesUsually the product’s page has more

details about the product/serviceIt contains specification, pictures and

priceBefore saving make sure the home link

is working properly Save as the index.html to your product

nameEdit the content table to add some

more extra information about your product/service

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