Dreamweaver Setup

Dreamweaver is one of the most widely used tools for writing web pages. It was developed by Macromedia, the same company that developed the Flash system for animating web pages. Macromedia was purchased by Adobe, the developers of Acrobat and Photoshop in December, 2005.

Dreamweaver (and all the other components of Macromedia’s “Studio 8” suite of programs, including Flash) is available on all the computers in the lab. But while it’s great to use for professionals who do web design for a living, it is also big and complex. I recommend that beginners use a simpler programmer’s text editor for the projects in this course to avoid the overhead of learning to work with Dreamweaver. But if you are serious about learning web development, you should take the opportunity to become familiar with the Dreamweaver option whether you decide to stay with it in the long run or not.

There are lots of Dreamweaver books and online tutorials available, and I don’t claim to have surveyed them well enough to make any serious recommendations. But I have looked at Rachel Andrew’s Build Your Own Standards Compliant Website Using Dreamweaver 8 published by Sitepoint and can recommend it. You can get a copy from Amazon for about $27, or directly from Sitepoint, where you can download sample chapters if you want to look at (most) of the book before deciding whether to buy it.

This web page guides you through the steps to take so that Dreamweaver will generate web pages that you can submit for this course. That means changing some of the default settings so the code you write will be formatted to match the requirements I set up for course projects.

Start Dreamweaver by clicking the green Dreamweaver icon on the desktop. It’s a big program, so be patient while you wait for it to load. You should see a set of tabs down the right side of thw window called CSS, Application, Tag Inspector, and Files. The Files tab should be open. You can use the Files tab to navigate to your “My Web Pages” folder under “My Documents”.

From the Edit menu at the top, select Preferences, the bottom item. This opens up a big panel with lots of items, a few of which need to be changed. Select the fourth item, Code Formatting, and make sure the following settings are in place: Indent (checked) with 2 spaces. Tab size: 4 (or 2 if you prefer). Default tag case: <lowercase>. Default attribute case: lowercase="value". Centering: Use DIV tag.

Now go down to the New Document preferences. Change Default document from HTML to PHP (or PHP Template, but that will require more setting up). Make the default extension .xhtml. Make the default Document Type (DTD) XHTML 1.1. Make the Default encoding Unicode (UTF-8).

In the Preview in Browser section, make sure Firefox is set as the primary browser and Internet Explorer as the secondary browser.

In the Validate section, turn off the checkbox for HTML 4.0 and turn on the one for XHTML 1.0 strict.

Exit the preferences panel and be patient while it is saved.

If you want to use the course template as your Dreamweaver template, type it in using Dreamweaver, or open it from within Dreamweaver if you have already typed it elsewhere. Then use File->Save As Template and fill in the dialog box to save it. Don’t worry about the message that says the template has no editable regions.