Web Site Design With Adobe Dreamweaver

So you have purchased or aquired a copy of Macromedia Dreamweaver or Adobe Dreamweaver what ever you would like to call it. Now you want to create great web design with your newly installed program. That is were this Dreamweaver Tutorial comes into play and I will take you through Dreamweaver Step by Step and create your first page.

1. Lets start the Adobe Dreamweaver and create a new web page. There will be three columns (Open Recent, Create New, Create from Sample) under the "create New" column we will select HTML. Dreamweaver will then take you to a new blank page that is in Design view. Dreamweaver has three different views, Code view, Split view, and Design view. Code view will show you the HTML code that either you have created or the HTML that Dreamweaver created. Split view is just that, half of the screen is Code view and the other have is Design view. The Split view allows you to do things in design view and see the effects on the code at the same time. Dreamweaver's Design view is probably my favorite of all because it is as easy to use as a Word Processor. For not lets leave Dreamweaver on Design view.

2. Lets add a title and a background color to our page. To the right of the Design view tab you will see the word "Title:" with a text box to the right of it. This is where we will create the title for our web page, we can write anything we want here. Now that we have added a title to our Dreamweaver page lets change the background color. Simply right click anywhere inside of the page and click "Page Properties" and this will open a window that has a lot of options in it to customize your page. I am going to go ahead and change my background color to black and my text color to white. I will leave everything else at its default settings, but you can see that Adobe Dreamweaver gives us a lot of options to cusomize our web page.

3. Add text to the web page. On the lower part of Dreamweaver you will see three buttons that will look like the alignment buttons in your favorite word processor. Lets go ahead and select the center button and I am going to go to the drop down menu to the left that says "Size" and change that to 36 so that I have large text. Now you can write just about anything you want and it will be centered at the top of your page with 36 size.

4. Creating Links. Adobe Dreamweaver makes creating links very easy. To create a link you will simply highlight text you want and then add the address to a web page in the text box to the right of the work "Link". So I am going to highlight my large 36 point text and in the text box I am going to type "http://www.mikenetpc.com" and then press enter. You will notice that the text has now become blue which is the default color for a link on a web page.

5. Adding images. Well the only thing we have left to do is add an image to our web page and Dreamweaver makes this very easy. Assuming that you are using CS3 there are some tabs at the top of the screen (Common, layout, forms, data, etc...) and click the little picture of a tree which is the image button. It will drop down and you will select image. Now you get a Windows open box that will allow you to select the image you want to insert. So select your image and click ok, the next window you will receive is asking your for the Alternate Text and Long Description. The Alternate text is what will show up if the image doesn't load or if the user puts their mouse over top of the image. So give a little description of the image. Then click ok and you image has been inserted.

For some more articles and video lessons on Dreamweaver check out my website. http://www.mikenetpc.com