Editing with Dreamweaver

For COMS 326

Dreamweaver is a powerful Web-production system loaded with heavily coded pre-defined page layouts, dozens of control panels and menu commands. BUT it is also an excellent editor for writing your own HTML and CSS code if you set aside all of the bells and whistles.

Unlike TextEdit or Notepad, Dreamweaver's "Code" view color-codes your CSS and HTML as you type, making it easier to see errors in punctuation. It also provides drop-down menus of the possible settings for each code, a "color pallette" to help in color selection, and logical groupings of font families.

On Radford's lab computers, here is how to launch Dreamweaver as a code editor:

Open Adobe Dreamweaver.
Ignore or close the big green Welcome Screen.
Ignore or close all the clustered menu panels on the right side of the screen. You may want to keep the "Properties Inspector" panel open at the bottom as a shortcut for inserting some common codes. All panels can be reopened using the "Window" menu at the top of the screen.
From the "File" menu at the top of the screen, choose "New File." (Or, if you want to resume editing a page you have already started, choose "Open File." It doesn't matter which editor you used to start the page. Since HTML is plain text, you can use any text editor to edit a page -- Dreamweaver, a Unix editor like Pico or Emacs, a Windows editor like NotePad or WordPad, or a Macintosh editor like TextEdit or TextWrangler.)
From the New Document screen, choose a "Page Type" of "HTML," a "Layout" of "none," and, in the bottom right corner, a "DocType" of "HTML5." (Even the simple-looking pre-designed layouts, such as "1 column, liquid, centered," include more CSS style coding and page structure "divs" than you need to get started. The layouts include extensive comments explaining the reasons for each setting, but you will have a better understanding of what CSS does if you start from scratch.)
Save, name and title your page as soon as you start to work.
At the top of the screen, Dreamweaver does give you a convenient place to enter the "Title" of your page, but notice that all Dreamweaver does is copy whatever you type there into the <title></title> tag in the <head></head> section of your HTML code.
From the three tabs at the top left, choose "Code" view, rather than "Split" or "Design" view. You can switch between the three to preview the results of the code you are writing. Code view provides color-coding, syntax checking and line-numbering by default. It also makes it possible to collapse blocks of code for easier reading of long documents.
Whether you started your page in Dreamweaver or in another editor, the first step in adding Cascading Style Sheets (CSS) to your basic HTML page framework is to put style tags in the head section of the document. Like most HTML tags, there are beginning and ending versions:
<style type="text/css">
and
</style>
(The "type=text/css" property is technically correct, although your page will work without it.)
For a few simple CSS examples, see my demo of centering a page with CSS. Without any CSS, your page would all line up at the left edge of the screen. It's usually more attractive to make the content of the page float to the middle of the browser window in a box of its own, like this page.
You can use CSS to restyle any of the standard HTML tags (make all of your H1 headings red or green on a yellow background, for instance), or to create new or combined styles for sections of a document -- a second column or a navigation menu. Once you create a style definition, you can use it over and over. Those new tags are called "classes" or "IDs," often added to the "DIV" HTML tag to define a block on the page, such as <div id="nav> for a navigation menu.
Remember to use the "myRU.radford.edu" portal's "My Accounts" tab to make updated pages public: Click "Update Web Permissions," then click "Click here to set file permissions."
Detailed instructions on the code-editing features of Dreamweaver (for HTML and other programming languages) are in Chapter 16 of the Dreamweaver Classroom in a Book text

Next Steps with Dreamweaver

Note: The current (2011) version of Dreamweaver is part of Adobe's Creative Suite 5, abbreviated "CS5," which looks almost identical to the abbreviation "CSS" for "Cascading Style Sheets," the open standard for coding Web page visual design, coupled with "HTML" for coding Web page structure and content. I will write out "CS-Five" when necessary.

Readings:

A 20-page article on using Dreamweaver's built-in layouts
Dreamweaver CS-Five Classroom in a Book (Available with RU-login as an e-book; start with chapters 2 & 3, HTML/CSS. Also see the "Extras" tab for downloadable files that come on a CD with the hard-copy version of the book.)
My main page of Dreamweaver links including video tutorials at Adobe's site.
John Hildreth's CITL video tutorials on using Dreamweaver at Radford
Lynda.com's Dreamweaver tutorials -- available by subscription, but the free-sample chapters can be very helpful, including this overview and this one on CSS Style Sheets.

More about the book and article later on this page.

Dreamweaver itself has evolved over more than 10 years to be part of a "creative suite" of terribly rich tools. Just look at its menus -- more than 200 commands to choose from and more than two dozen "control panels" or commands that manage them. When you go to open a new Dreamweaver document, you're offered a choice of 16 pre-coded layouts with HTML and CSS already in place; elsewhere, the program has a library of page and code samples.

If you used Dreamweaver Creative Suite 4, you may have been overwhelmed with the number of layouts it offered with confusing names like "liquid" and "elastic." That has been simplified in version 5. The comments in the code for the layouts also do a much better job of clarifying the use of DIVs, floats and more.

As it says on the "filler" text of those pages, "Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS..." My advice: Have more than "a peek."

When using Dreamweaver layouts, readthe commented code for layouts very carefully. Print it out. Compare a "liquid" layout with a "fixed" layout. If you don't understand something, bring the code to class and ASK. For example, Dreamweaver usually includes some pre-coded style classes it thinks you might want to use, including container and content divs and float-right and float-left classes that you could use with any div, paragraph or image. Read the code enough to see what you need, what you don't need, and what you can learn from.

The Dreamweaver Classroom in a Book text has been updated to CS-Five and has a much improved introduction to basic HTML and CSS in chapters 2 and 3. Registered Radford students can access the e-book version through Safari books online through the library. (So are the CS3 and CS4 versions, which could be confusing.)

Meanwhile, Adobe's Stephanie Rewls has written an intro to using Dreamweaver CS-Five layouts, about 20 pages, which you can read here: http://www.adobe.com/go/adc_css_layouts.