Using Dreamweaver: Learning the Design View

Start Adobe Dreamweaver and create a new web page. There are three columns (Open Recent, Create New, Create from Sample) under the "create New" column we will select HTML. A new blank page that is in Design view will be shown. Dreamweaver is divided in three different views, Code view, Split view, and Design view.

The Three (3) different views defined:

The code view will display your created HTML code (or the HTML created by dreamweaver). The Split view, will allow you view the design while viewing the effects on the code at the same time. The Design view is simply just like a Word Processor that will allow you to view, create and edit your designs.

For this article we will focus on making use of the Design view.

Let’s add a title and a background color to our page. In the right side of the Design view tab you will see the word "Title:" with a text box to the right of it. This is the portion where we can be able to create the webpage title and a description of what the title is (basically anything we would wish to write). After creating the title, we can change the color of the background by simply right-clicking anywhere inside the page. Next, click on ‘page properties’ to open the window options to customize page. Finally choose the color you wish to apply then proceed to the next step.

Add text to the web page. Scroll down to the lower part of Dreamweaver, look for the three buttons that looks like ‘alignment buttons’ of a word processor. Next, click the center button, look for the left drop down menu that says "Size", customize the font size and write anything you want to add and it will shown centered at the top of your webpage.

Creating Links. Creating links is very easy with Dreamweaver CS4. Just highlight the text you want, right-click the word(s) add the web page address in the text box then press enter. Once you have created the link, the words will be underlined and the color will turn to blue (default link color).

Adding images. To add an image to our web page (Let’s assume you are using CS3) click the little tree icon (the button that looks like a little tree) from the tabs located at the top of the screen. Click to select an image, after clicking on the desired image you will be prompted for “Alternate Text”, type in your description of the image, click ok and your image will be inserted!