1. Setting up the website

Open a dreamweaver, and on the top tab menu choose Site ---> New Site.

1. Then a diagal box pops up, click on text box next to Site name: and name your site.

2. Next click on Local root folder: then choose (a)desktop, and hit (b)new folder and name it (c)website_example. (when it comes naming folders I never use space in between words, it make it easyer tracking files this way for me). Then double click the website_example file and then press select button.

3. Then click on the Default images folder, so right now we are inside that website_example folder, and we are going to create a (a)new folder and name it (b)images. Then we going to create another (c)new folder naming it (d)CSS. Then

(e)double click on images folder and click on (f)select button.

4. Now we are back to dialog box and now click on OK button on bottom. Now that takes care of our management site, and you should see on the right those two folders we created.

Now right click on the (a)site folder and hit new file, so it's going to insert an html file, and name it (b)index.html, and then double click it. Now you should see an opened index.html file to the left and it's ready to start designing.

Next give your page a proper title name in the (a)Title: text box next to Design button. Through out this tutorials we will be working only in (b)Design view. When we create something, it automatically coding HTML and CSS for us in the (c)Code view. So click on (b)Design view if not selected already.

Then try saving your files as ofter as possible incase you get an error or something.
To save files go to File menu on top left corner and select Save All. That means it saves all files at same time. For example you have five html files opened that you working on and you don't want to go on each file and save seperately. So Save All saves all files at same time.

Now first of all is you might want to change the color of background, so click on (a)proparties tab on the bottom left. Then hit (b)Page Proparties button. Now Page Proparties box pop up, click on (c)Background color box and choose the color u want then hit (d)OK botton.

You can alway preview your website anytime as how it would look on the internet by pressing F12 button on your keyboard.

Next click on the (a)CSS panel on the top right corner, and we going to create a Universal Selector because we are going to be working with external style sheets. Now in the CSS Styles panel we are going to create new CSS rule, so click on the (b)New CSS Rule button, then New CSS Rule dialog box should popup. In the Selector Type we are going to choose (c)Advanced selector type.

Then in the (d)Selector: text box type in * its a universal selector so every tag that get inserted will be forsed by this style. Next we going to (e)Define in: (New Style Sheet File), the press (f)OK.

Now (a)Save Style Sheet File As box should pop-up, its asking me where do I want to put the CSS file to. So we going to double click on the (b)CSS folder that we created earlyer, and in the File name: we going to name it (c)layout.css and hit (d)save button.

Then (a)CSS Rule Definition dialog box should pop-up. In the (b)Category box choose (c)Box, and on the (d)Margin and Padding type in (e)0 "zero" and make sure the (f)Same for all check box is cheked, then hit (g)OK.

If you ever want to go back to that dialog box just double click on the (a)* in the (b)CSS panel menu.

And thats the end of Setting up the website tutorial.

For next tutorial click here.

Building a Website Tutorials:

1. Setting up the website

2. Building layout #1

3. Building layout #2

4. Building layout #3

5. Creating Banner

6. Rollover Buttons