Facebook Twitter LinkedIn RSS
Home tutorial Dreamweaver tutorial 1

Dreamweaver tutorial 1

Published on September 17, 2012, by in tutorial.

In this tutorial, we’ll have a basic understanding of Dreamweaver.

1. The “Welcome Screen”

When you first open Dreamweaver (Applications -> Adobe Dreamweaver CS6), you will see the welcome screen. The middle welcome screen give you options of opening recent files or new files. On top of the screen is your Toolbar. On the right, you have several small windows- Panels.


2. DW working interface (We’ll start use DW for Dreamweaver)

When you open a file, DW allows you to see both the Code Area and the Design Area at the same time. You can just type text or insert image in the Design Area. You can also edit code in the code area when needed.

Also Note you have a “Properties” panel at the bottom of the window. When you click on any element in the Design Area, you can change the property of that element. Say, the size of an image. Say, the URL of a hyperlink.


3. DOCTYPE – Document Type Declaration

DOCTYPE must be the first thing in your html document. It tells the browser what version of HTML this web page is written in.

For example, the new html file with just opened in DW, it has the doctype as below, specifying this web page was written in xhtml:



Let’s open a new file in DW, File -> New. When the New Document window pops up, look at bottom right, in a drop down menu, choose “HTML5.”


After creating a new HTML5 file, we see the doctype is different, as below:


5. Page Properties

We briefly mentioned the Properties Panel earlier. Click on the “Page Properties” in the Properties Panel. When the Page Properties window pops up, select “Appearance (CSS)” on the left. Set properties for Page Font, Size, Text Color, Background Color, and Margins. (it does not matter what values you pick now. just pick some.)


Click “OK” and we see “Internal CSS” showing up in the head section (that is, <head>…</head>) of our code area. As below:


Don’t worry if you don’t quite understand what this block of code mean. We have another tutorial on DW explaining how to make HTML ans CSS work together. In that tutorial, I will provide you with an HTML file and a CSS file (called External CSS).


Tags: , , ,
© Web Design & Publishing