1. USING DREAMWEAVER Contents: Assigning a Root Folder
Creating a blank webpage
Basic Text formatting
Creating links
Adding Images
Continuing Studies CS 22: Enhanced Web Site Design

2. Assigning the Root Folder
Open Dreamweaver.
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 “New Site”

3. 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. Also enter the web address (HTTP address – URL) of your web site. Click “Next”.

4. 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.

5. 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”. 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

6. 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.
“properties" palette

7. 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.

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

9. More text formatting
Heading 1:
Verdana font:
Red font:

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

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

12. 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 “link” field 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:

13. 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”.

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

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

16. 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.