The Basics of Dreamweaver

This guide explains how to use Dreamweaver to create a web site at Davidson College. This process involves three steps: (1) creating folders to hold the files making up the web site, (2) building the web files themselves, and (3) uploading those files in order to make them publicly visible. This guide explains the details of these three steps, as well as additional Dreamweaver commands to make your web site more varied and appealing.

You should work carefully through this guide, completing each step. Skimming the guide will lead you to overlook important commands and explanations behind those commands, making it harder for you to create your web site.

Remember that this guide provides only a brief introduction to Dreamweaver. To understand more complicated commands and to create more complex web pages, you must spend time on your own figuring them out (with the assistance of Dreamweaver's Help documentation).

Creating Folders

To create a web site in Dreamweaver, you must first create folders (or subdirectories) to hold the files making up the web site. You will create two identical folders, each at a different location. The local folder will be located on your own computer or in your own folder on Louise. The remote folder will be located on Davidson's remote web server. This duplication of folders is a security precaution. The public only views your web site and files located on the remote server. While the public has access to this remote server, it is not directly connected to Davidson's internal computer network (you will transfer your files from the local folder to the remote one by using a temporary connection). This separation prevents the public from accessing Davidson's internal network.
To create both sets of folders, log into a computer in one of the college computer labs.
Then, open the Dreamweaver program. At the main window in Windows, click on All Programs, then Course Specific, and then Dreamweaver MX.
When the main Dreamweaver window appears, click on Site in the list of commands along the top of the window.

A drop-down menu then appears. Select Manage Sites ...
A new window appears, titled "Manage Sites".
Click on New ...
When several options appear immediately below, choose Site.
A new window appears, titled "Site Definition for Unnamed Site 1".

This new window has two tabs from which to choose, "Basic" and "Advanced". Click once on Advanced if it is not already selected.
In the left part of the new window, you will now see a series of options in a column labeled "Category". Click once on Local Info if this option is not already selected.
1. Under this option, the first field (in the right part of the window) is labeled "Site name:". You use this field to give a name to your web site.
  1. Use the mouse to highlight the text already in this field (most likely "Unnamed Site 1").
  2. Delete this text, and type in the field the name Joe Smith's Site -- only replacing "Joe Smith" with your name. This name will now be the title of the web site that you are creating.
2. The next field is labelled "Local root folder". This field tells Dreamweaver the location of the local folder that will contain the files for your web site. Click on the folder icon to the right of the field, and maneuver your way to the folder that you wish to use. When working through this guide and all assignments for the course, you will use a folder in the class subdirectory on Louise. The specific address is "P:\Political Science\Pol318\Webfiles\username" where username is the name that you use to log into the Davidson network and email from anywhere. I have created different subdirectories for each person in the class.
3. Open the subdirectory with your username as title.
4. After opening that folder, you will see a "Select" button in the lower-right corner of the window. Click on that button, and you will return to the Site Definition window, with the Local root folder correctly defined.
Next, click once on the Remote Info option in the Category column on the left. On the right, a single "Access" field appears, with "None" selected.
1. Click on the downward triangle to the right of this field. When a drop-down list appears, select FTP.
2. After making this selection, a number of new fields appears. In the field called "FTP host:", type franklin.davidson.edu which gives Dreamweaver the location of Davidson's remote server.
3. Next, you need to specify the folder on this server where you wish to put the remote set of your web files. In the field labeled "Host directory:", type POL3180_200401/public/username where username is again the name that you use to log into the Davidson network. This command specifies a folder that I have already created on the remote server.
4. The final step requires you to give Dreamweaver your userid and password for the Davidson network, so that Dreamweaver can automatically upload your web files from the local folder to the remote folder.
5. In the field labelled "Login:", type in davidson\username where username is again the name that you use to log into the Davidson network.
6. In the field labelled "Password:", type in your password; only asterisks will appear, instead of the actual password.
7. To make sure that all the details for the remote folder are correct, click on the button labelled Test. If all the entered information is correct, Dreamweaver will soon display a new window with the message "Macromedia Dreamweaver MX 2004 connected to your Web server successfully." Click the OK button. If you do not get this message, contact either Dr. Sellers (pasellers) or Kristen Eshleman (kreshleman) for help with solving the problem.
After conducting a successful test, you have completed the setup of your local and remote folders. Click on the OK button at the bottom of the "Site Definition" window, and Done at the bottom of the "Manage Sites" window. Dreamweaver then returns to the main Dreamweaver window.

Creating Web Files

The next step in creating your web site is to build the files that will make up your site. You first open a blank file, and then you add text and other information, as well as various formatting changes.
When you see the main Dreamweaver window, click once on File in the upper-left corner of the window.
1. When a drop-down menu appears, click on New.... The "New Document" window then appears.
2. Here, you can choose from a wide variety of blank file types. Listed in the left part of the window under the General tab, the categories include
  1. "Basic page": A simple blank page, with no pre-installed formatting.
  2. "Dynamic Page": A page that allows you to retrieve and display dynamic content from an external source for use in a web page.
  3. "Template Page": A special type of page that you use to design a "locked" page layout with limited editable regions.
  4. "Other": Action script pages (for web programmers).
  5. "CSS Style Sheets": Pages using a collection of formatting rules which control the appearance of content.
  6. "Framesets": Different ways to split a simple page into blocks (or frames). The only pre-installed formatting is the separation into frames. The middle column portion of the "New Document" window lists the possible "framesets" if you select "Framesets" as file type.
  7. "Page Designs": Different blank files containing extensive preformatting, frames, fonts, and other characteristics.
  8. "Page Designs (Accessible)": Same as Page Designs, but with the option to make the pages usable for people with visual, auditory, motor, and other disabilities.
3. Choose "Basic page", the simplest option. Click once on the Basic page option in the "Category:" field, and then click on Create. Dreamweaver then opens a blank file called "Untitled-1". (This file may appear as "Untitled-2" if your version of Dreamweaver automatically opened a blank new file when you opened Dreamweaver.)
Before adding any text to the blank file, we will save it.
1. In the upper portion of the main Dreamweaver window, click on File.
2. When a drop-down menu appears, choose Save As. The "Save As" window appears. This new window suggests a location for saving your file, specifically the local folder that you specified above.
3. The only thing that you need to add is the "File name". In this field, type assignment1 and click on Save. Dreamweaver then saves your file under the name "assignment1.htm".
In the blank file, type Assignment #1 and then press Enter. You can see that adding text to this file is very similar to adding text to a Microsoft Word document or any other type of word processing file.
Changing the format of the text is also similar.
1. Using the mouse, highlight the text that you just typed (i.e., "Assignment #1"). You can change that text to bold, underlined, indented, or any other formatting change that you might make in Word.
2. With the text highlighted, click on Text in the upper portion of the Dreamweaver window.
3. When a drop-down menu appears, notice the various formatting options ("Indent", "Align", "Font", etc.).
4. Choose Style, and then Bold. Press the right arrow key twice to remove the highlighting, and to move the cursor to the next line. The text that you typed is now in bold.
5. (Note that you can also change the format of text by using the "Properties" panel at the bottom of the Dreamweaver window, instead of clicking on "Text" at the top of the page.)
You can also add an image to your web file.
1. Click on Insert in the upper portion of the Dreamweaver window.
2. When a drop-down menu appears, choose Image. The "Select Image Source" window then appears.
3. In this window, you need to specify the location of the image file that you wish to add to your new file.
4. Using the "Look in" field, move to the main class folder on Louise (P:\Political Science\Pol318\Webfiles). When you select this folder, you will see a list of subfolders and files.
5. Click on the file "diamond.jpg", and then click on OK.
6. Dreamweaver then displays a new window, saying that the "diamond.jpg" file is outside the root folder of your web site, and asking if you want to copy the file to that root folder.
7. Click on Yes.
8. Dreamweaver then displays a new "Copy File As" window, with "diamond.jpg" listed in the "File name:" field. Your root folder is listed in the "Save in:" field.
9. Click on Save. Dreamweaver saves the "diamond.jpg" file in your root folder.
10. Then, you return to your "assignment1.htm" file, and the Davidson College emblem appears.
You can also add a horizontal line to your web file. Such a line can help separate different parts of a web page.
1. In the "assignment1.htm" file, place the cursor at the end of the text "Assignment #1".
2. Click on Insert in the upper portion of the Dreamweaver window.
3. When a drop-down menu appears, choose HTML and then Horizontal Rule.
4. Dreamweaver then places a horizontal line (or "rule") in your web file, between the Davidson logo and the "Assignment #1 " line. Press the right arrow key to remove the highlighting.
You can also import a table from a Word document directly into your web page.
1. Open the Microsoft program Word. From within that program, open a sample table that I created. The file name and address is P:\Political Science\Pol318\Webfiles\sample table.doc .
2. Save the table as a Word file in your folder in your Pol318 folder on Louise (the exact address is P:\Political Science\Pol318\Webfiles\username, where user name is the name that you use to log into the Davidson computer network).
3. Next, you need to save the file in Word as a web page. In Word, click on File in the upper left corner of the window.
4. When a drop-down menu appears, click on Save As...
5. When a new window appears, locate the "Save as type:" field in the bottom center of the new window. The field should contain the phrase "Word Document (*.doc)".
6. Click once on the downward-pointing triangle to the right of the field.
7. When a series of options drops down, choose Web page (*.htm; *.html).
8. Then, click on the Save button in this window, and Word saves the file as an .htm file.
9. Next, go back to Dreamweaver. Move to the bottom of the web file that you creating. (You may have to press Enter once to move the cursor from the right of the Davidson logo to the next line.)
10. Click on File in the upper-left corner of the screen.
11. When a drop-down menu appears, choose Import. When a new series of options appears, choose Word document...
12. A new window then appears, asking what file you wish to import. Move to the subdirectory on Louise that contains the file that you just saved in Word (e.g., P:\Political Science\Pol318\web files\username).
13. In the field for "Filename:", type sample table.htm, and click on Open.
14. Dreamweaver then inserts the sample table into your web page.
15. The final step is to have Dreamweaver clean up the web-writing code that Word used to create the table.
  1. In the main Dreamweaver window, click on Commands.
  2. When a drop-down menu appears, choose Clean Up Word HTML...
  3. Two new windows appear, containing options for the clean-up process. Click on Okay each time.
  4. Dreamweaver cleans up the file and then requires you to click Okay one more time.
16. The table is now in Dreamweaver format.
You can also add links on your web page, from specific text or images on your page to other web sites or files.
1. In the assignment1.htm file, move the cursor to the end of the first line (after "Assignment #1").
2. Press Enter and type Class web site for POL318.
3. Next, use the mouse to highlight the text that you just typed (i.e., highlight "Class web site for POL318").
4. Locate the Properties panel at the bottom of the screen. In the field labeled "Link", type http://www.davidson.edu/academic/political/sellers/pol318/syllabii/syl318,2004fall.html (alternatively, you can use Internet Explorer to go to the class web site, copy the address, and then paste it into the field).
5. Then move the cursor somewhere else on the page (away from the text with the link). You have just created a link from the text in your web file to the class homepage.
Finally, you need to save the web file.
1. Click on File in the upper portion of the Dreamweaver screen.
2. When the drop-down menu appears, choose Save. (Alternatively, hold down the <Ctrl>, and press "s".) This command saves your file under the existing name, "assignment1.htm".

Uploading Web Files

The final step in creating your web site involves uploading your web file(s) from your local folder on Louise to your remote folder on Davidson's remote server.
In the right portion of the overall Dreamweaver window, you will see a series of panels, labelled "Design", "Code", etc. The panel for "Files" should already be displayed; if not, click once on the word Files, and the panel will be displayed.
1. The Files panel has two drop-down menus at the top. Click on the downward pointing arrow for the right menu. In the series of options that appear, choose Local View (if it is not already displayed).
2. The Files panel will then display the name of your local folder near the top, with a list of all files in that folder immediately below. The folder now contains several files, including "assignment1.htm".
3. To upload this file to your remote folder, click once on the file name ("assignment1.htm"), to highlight it. Then, click once on the blue, upward-pointing arrow near the top of the "Files" panel. Dreamweaver may display another window, asking if you want to include dependent files. Click Yes. Dreamweaver will then upload your file(s).
4. The file(s) are now a web page available for viewing through an Internet browser.
5. You can upload multiple files and folders in the same manner. In the "Files" panel, highlight the file(s) and/or folders that you want to upload. Then, click on the blue arrow to upload all the files and folders at the same time.
To view the files in the remote folder, open Microsoft Internet Explorer.
1. In the "Address" field, type franklin.davidson.edu/POL3180_200401/public/username/assignment1.htm (where username is again the name that you use to log into the Davidson network), and press "Enter". Your web page will then appear in the browser window.

© Davidson College, 2004, Department of Political Science, Davidson College, Davidson, NC 28035
Send comments, questions, and suggestions to Patrick Sellers
Created: 4/19/2004. Last updated: 8/30/2004.

Political Science 318 - Strategy and Ethics in Election Campaigns