Adapted from Todd Onderdonk's Dreamweaver MX for Smarties (Word document)

Dreamweaver MX is the latest version of a "wysiwyg" (what-you-see-is-what-you-get) web-authoring program that allows you to construct advanced web pages without having to know or write the underlying HTML code. Dreamweaver does the code for you and lets you see the changes immediately, just as if you were working with Word. The pictures below are from the PC version of Dreamweaver, but the instructions are applicable for Mac OSX as well.

Dreamweaver MX is also available in a 30-day trial version from Macromedia. Just go to: http://www.macromedia.com/software/dreamweaver/trial/

1. Opening Dreamweaver
In the Start Menu, select Programs->Macromedia->Macromedia Dreamweaver MX. You will see the following configuration of windows:

We will not be using any of the stacked windows on the right for this tutorial. Click the arrow tab in the middle of the border between the Design view and these windows. Your desktop should now consist only of the Design view, Insert window, and Properties window. Note: any window panel you make disappear can be made to reappear by re-selecting it from the Window menu.

Although you will be using the Design view exclusively in this tutorial, you will probably still want to see the underlying HTML code for learning purposes. Select View->Code and Design. Your desktop should now look like the following:

2. Saving Your Page

The last task to do before you begin designing your page is to save the page. It is very important to save your document before you add page elements such as images or links to other pages so that these will be assigned relative links, aka "document-relative" paths. Otherwise Dreamweaver will assign them file locations such as your zip disc (for example, file:///D|/main.gif) or your desktop (for example, file:///C|/user_files/main.gif ) which won't be very helpful once your site is online!

Simply put, you must do three things in order to avoid the fate of lost images and broken links:

1. Save your pages before beginning to work on them.
2. Save all your pages and images in the same folder (or a subfolder).
3. Make sure all images or pages in your site are named only with a name and a file extension, such as "main.gif" or "boy_waving.jpg"

Note that these file names use underscores rather than spaces to separate words, and that it is best to only use lower case letters.

Even though there is nothing on it, save your page now by selecting Save As from the File menu in the upper left hand corner. A Save As dialog box will appear. Make sure that it is set to save your file to the folder with the title of your project (e.g. "fall03"). Now name the file. If it is to be the front or “splash” page of your site, you should name it “index,” as web browsers always look for this “index page” in any directory. This version of the tutorial assumes that you already have made a course index page, however, so name your file "syllabus.html" and hit Save.

3. Titling Your Page

Now that you have saved your page as a file, you also want to give it a name for when it is displayed in a browser. This name is the public name of your page, and will be displayed above it in a web browser. Take a second to look at any webpage right now and you will see that each one has a title bar at the very top of the browser where the name is displayed. Title your page by typing "RHE 306 Syllabus" (modifying the course name if necessary) in the Title Box directly above the Code and Design view. Since it is not a file name, spaces and capitalization are fine.

4. Setting Page Properties

To begin, you will want to set up the basic look of the page. Don’t worry, anything you choose can be easily changed at a later time by returning to “Page Properties.”

• From the Modify menu, select Page Properties. On a PC, you may also select this by right-clicking anywhere on the page.
• This window, depicted below, allows you to specify the background color for your page, or select an image that you have saved on your computer to for the background ; it also lets you decide what color text and links should be. Play around with some text and background colors until you find a readable, attractive combination. Don’t worry about anything displayed below the link colors.

• If you want to use an image as a background, save your image to the same folder the page is in, return to the page properties window, hit browse, and find your image. This practice is not recommended unless your image will allow text to be easily seen. More about images later.

5. Layers, Tables, and Stylesheets

Until recently, web designers often used tables to position text or images, usually with invisible borders. Yet tables take time to load and limit where you can position your page’s elements—right-justified, left justified, or centered. To combat this limitation, Dreamweaver allows you to design your page by putting objects into layers which can be dragged anywhere you want on the page. On your command, Dreamweaver will convert your layers into a complex structure of tables for display online. This practice is in some ways a corruption of HTML markup, however, as well as the spirit of a table. The CWRL is now advocating the use of stylesheets for positioning page objects. To learn more about stylesheets, see http://www.meyerweb.com/eric/css.

Tables should be used for data organization, not for layout purposes. To that end, you will now create a table for a course syllabus.

6. Creating Tables

Before creating anything on your page, you want to make sure that the objects you insert and the information they convey will be accessible to everyone who might encounter your site, even people with disabilities. Therefore, you should activate Dreamweaver's accessibility dialog boxes. Select Edit->Preferences->Accessibility and check the first five boxes (see illustration below). Hit okay.

Create a table by slowly rolling your mouse over the icons on the insert window until you find the Insert Table icon (you can also select Table from the Insert menu). Dreamweaver will ask you to choose how many columns and rows you want, columns being the boxes or “cells” arranged side by side, and rows being the ones arranged vertically. Make a simple table of three rows and three columns. (See the illustration below.) Don’t worry about any of the other properties just yet—we will change them from the Properties Panel.

Dreamweaver will now pop open the Accessibility Options for Tables Dialog Box. These attributes help user's understand the structure of your table, especially those users who are visually impaired and using screenreaders. Follow the example below as closely as possible, although you may need to alter the caption to correspond to your particular course.

Now fill in the 9 cells of your table according to the summary attribute you wrote. You should look at your syllabus if you have a copy.The top row of the table has three cells. Fill them in with the column headers: date, classwork, and homework. Then fill in therow headers and data. You can modify the style of the text in the Properties panel. When you are finished filling in the table,select it. To select your table, move the cursor over the bottom border until it becomes a 4-pointed arrow and click, or click on theright border. When you select your table, the Properties Panel will change to display table properties. Your desktop should now look like the following:

Now let's use this panel to format your table, though you sometimes may have to select and format individual cells as wellto get the result you want. To position the table on the page, you can push it around using the cursor (using the Enter, Space, and Backspace keys), or choose Left, Center or Right from the Align Menu. To make the borders of your table invisible, change the number in the Border box to "0." To make them thicker, choose a higher number. To color the background of your table, click on Bg Color and choose from the palette of colors that pops up. To change border colors, select from the Brdr Color palette. When you finish, click on some other part of the page to deselect your table. If you want to add additional rows and columns, without selecting the table again you should click in one of its cells and choose Modify->Table->Insert Rows or Columns.

7. Linking to Another Page

It is easy to link to another page. Click to the right of your syllabus table and press enter. Click the chain link icon in the Insert panel. A Hyperlink dialog box will pop up. Type "Homepage" in the Text field and "index.html" in the Link field, as in the example below. Hit OK. You now have a hyperlink to your course homepage.

8. Inserting an Image

Inserting an image is easy; too easy in fact. All you have to do is download an image from the web into your project folder, click the image icon (a picture of a tree) in the Insert panel, and select the image from the "Select Image Source" dialog box. However, this tutorial asks you to be a bit harder on yourself. You will now create a banner for your course in Macromedia Fireworks by following the "Using Fireworks MX to create kick-ass graphics!" tutorial in your orientation packet. When you have completed this tutorial and exported the banner image to your project folder, you can insert the image at the top of your pages. Whenever you insert an image, the following dialog box will pop up:

Try to describe your image concisely and accurately in the Alternate Text field. If your description must become longer than 30-50 words or so, you should consider using a Long Description, which means you will have to create another file for this purpose.

9. Uploading your Files

Save all of your files and close Dreamweaver. Open Start->Programs->SSH Secure Shell->Secure File Transfer Client. Select Quick Connect. Enter the Host Name and your own User Name, as in the example below. Hit Connect.

You will see a window divided in half vertically, with a local file structure on the left and a remote file structure on the right.Double click the public_html directory on the remote side and drag your project folder into it.