To Temple CollegeR. Craig Collins > Media > Dreamweaver CS3 Demo

Dreamweaver CS3 Demo © R. Craig Collins, 2008

When using an HTML editor, often you must select what you will be viewing, I typically prefer to see both the code and a preview, so in Dreamweaver, under the View menu, I choose Code and Design.

Start a new document, and then fill in the page title in the title block at the top.

I suggest you now SAVE THE PAGE IMMEDIATELY. Otherwise, you will have pages full of absolute file names instead of relative addresses as needed on the 'net.

You'll notice that when Dreamweaver starts a new document, it includes what is called a doctype in the code that is invisible in the Design view; this doctype describes the document to new browsers in two areas: what version of HTML is being supported, and which character set is to be used. While not required for HTML 3, is is very helpful (read: required) for new browsers that may encounter some HTML 4 code. Just ignore this extra verbiage for the time being, it will be covered shortly in doctype and Meta head tags.

Once the page is begun, you must find menu items to duplicate what you normally do in notepad. I first choose the Page Properties near the bottom to set the text color, bgcolor, background, and link colors. You may also edit the title from here.

DreamWeaver Page Properties dialog

Then simply start typing into the Design view area. To format text, highlight it, then in the Properties area below the preview Design view, choose Format for headlines, etc; below that choose Font, Size, or select colors, as well as [B] for bold, or [I] for Italic. You may also change text to links here, or set up an unordered or ordered list.

DreamWeaver Properties tool bar

You may also use the Insert\HTML menu, to add horizontal rules, or special characters.

DreamWeaver Insert menu

Probably the best use of an HTML editor is to more easily create complex tables. Begin by using the Insert menu, and choose Table.

DreamWeaver Insert Table dialog

Once in place, select the table to see the Table properties below the Preview Design view, in order to change alignment, background etc.

DreamWeaver Table properties bar

Finally, select some of the cells (details).

Below are the equivalent to the attributes you already know.

td-props

You can then choose the Modify menu, in order to span (merge) rows or columns, etc.

DreamWeaver Modify Table menu


To better understand using Dreamweaver CS3, perhaps a short video on creating basic pages will help.

The player controls, below, are play, pause, stop play, pause and stop.
You probably should scroll down, stop the video, and restart it... (a video on an older version is below)

Please read all related materials before viewing... next, you may also wish to read along, pausing the video as needed.



The Camtasia Studio video content presented here requires JavaScript to be enabled and the latest version of the Macromedia Flash Player. If you are you using a browser with JavaScript disabled please enable it now. Otherwise, please update your version of the free Flash Player by downloading here.