USING DREAMWEAVER MX 2004 Contents: Assigning a Root Folder Creating a blank webpage Basic Text formatting Creating links Adding Images Continuing Studies CS 38: Hands-on Graphics Production for the Web http://www.stanford.edu/group/csp/cs38/

Assigning the Root Folder Open Dreamweaver MX 2004. Dreamweaver is not designed for single webpage creation; rather, it is designed for maintaining a complete website. Dreamweaver needs to know where all the local content of your particular site resides. Under the “Site” menu item, choose “Manage Sites” When the “Manage Sites” box opens, choose “New”, then “Site”.

Although we will not be using it in this class, you will be offered the option of using Server Technology (ColdFusion, asp.net, asp, jsp, php). Click Next. Enter the name of your site. This name will never appear in on your web pages -- it is only for Dreamweaver. Click “Next”.

Enter the location of the web page files on your computer Enter the location of the web page files on your computer. You will publish them (copy them to a web server) from this location. Click “Next”. In the “Sharing Files” section, if you will not be using Dreamweaver’s built-in publishing methods (FTP, SFTP, local/network, RDS, SafeSource, orWebDAV), choose “None”, then “Next”. Review the “Site Definition Summary” to ensure that all of your settings are correct, then click “Done”. The “Manage Sites” box will appear. Click “Done” to finish configuring Dreamweaver.

Creating a Blank Webpage Now that you have set up Dreamweaver, you’re ready to work on your web pages. If you wish to use a page which already exists, open it. If there isn't already one open, select New from under the File menu. Select “Basic Page” and “HTML”. Check the box to make it XHTML compliant. When the untitled web page appears, save the it in the folder you selected in the previous section. The first page on any web site is always called “index.html” but if you wish create a different page, be aware that all filenames must be one word, and must end with .html

Giving your page a title Give your page a title, and start typing text into it. Notice how it works pretty much like a word processor. If you would like to format some text, you'll need to use the "Properties" palette.

Text formatting If you don’t want any formatting, simply type your text. Press return to jump down one paragraph. Notice how it jumps down TWO lines. To jump down only one, hold down on the Shift key and press return. It jumps to the next line.

Text formatting (continued) But usually you’ll want some formatting: Bold: Italics:

More text formatting Header 1: Verdana font: Red font:

Lists Often, you’ll want to have bulleted items. To do this, press the Unordered List button on the properties palette:

Lists, continued Sometimes you’ll want numbered lists. Press the Ordered List button on the properties palette:

Creating a hyperlink To link text to a web page or other item on the internet, simply highlight the text, and type in the URL in the properties palette: If you want a new window to open when the user clicks on the link, choose “_blank” in the target pull-down menu:

Adding Images To add an image, you first need to have an image to add, and it must be in the web page directory on your computer. Once it’s there, under “Insert”, choose “Image”.

Image (continued) Select the image, and press “OK”.

Hyperlinking Images If you want to make the image “clickable”, highlight the image, and add the URL in the “Link” in the properties palette:

Other Image Properties W = width (in pixels) H = height (in pixels) Src = source of the image (where it’s located) Alt = alternative text description of the image Map = imagemap name -- used to define more than one hyperlink for the image V Space = defines the amount of space above and below the image (in pixels) H Space = defines the amount of space to the right and left of the image (in pixels) Low Src = used to display a low-resolution version of the image displays as the “real” one loads Border = the size of the border around the image (in pixels) Align = the alignment of the image in relationship to the text or other images that surround it.