Political Science 467 - Political Manipulation of the News

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

  1. 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. The local folder, or set, will be located in your own folder on Louise. The remote set 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.
  2. To create both sets of folders, open the Dreamweaver program.
    1. When the main Dreamweaver window appears, click on "Site" in the list of commands along the top of the window.
    2. A drop-down menu then appears. Select "Manage Sites..."
    3. A new window appears, titled "Manage Sites". Click once on the "New..." button.
    4. A drop-down menu then appears below the button; choose "Site".
    5. A new window appears, titled "Site Definition for Unnamed Site 1".
  3. This new window has two tabs from which to choose, "Basic" and "Advanced". Click once on "Advanced" if it is not already selected.
  4. In the left part of the new window, you will now see a series of options in a column labelled "Category". Click once on "Local Info" if this option is not already selected.
    1. Under this option, the first field (in the right half of the window) is labeled "Site name:". You use this field to give a name to your web site.
    2. Use the mouse to highlight the text already in this field (most likely "Unnamed Site 1").
    3. 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.
    4. 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\Pol467\Web\username" where username is the name that you use to log into the Davidson network and email from anywhere. I have already created different subdirectories for each person in the class.
    5. Open the subdirectory with your username as title.
    6. 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.
  5. 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 one of Davidson's remote servers.
    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 labelled "Host directory:", type academic/political/pasellers/public/pol4670_200502/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 davidson\userid.
    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.
  6. 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. Click on the "Done" button on the "Manage Sites" window, and Dreamweaver then returns to the main Dreamweaver window.

Creating Web Files

  1. 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.
  2. 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.)
  3. 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".
  4. 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.
  5. 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". 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.)
    6. To remove the highlighting (but not the bold formatting), move themouse to the line below "Assignment #1", and click once.
  6. 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\Pol467). 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.
  7. 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, click on the "HTML" option.
    4. When another drop-down menu appears, choose "Horizontal Rule".
    5. Dreamweaver then places a horizontal line (or "rule") in your web file, between the text and the the Davidson logo. Click somewhere else on the page to remove the highlighting from the bar.
  8. You can also copy a table from a Word document directly into your web page.
    1. In Word and not Dreamweaver, open the sample table of regression coefficients that we created in class. The file name and address is "P:\Political Science\Pol467\sample table.2006.doc".
    2. Highlight the text containing the table, and simultaneously press the <Ctrl> and <c> keys (for <Ctrl>-<c>).
    3. Switch to Dreamweaver and the web page that you have been creating.
    4. Move the cursor to the point on the page where you would like to place the table.
    5. Simultaneously press the <Ctrl> and <v> keys (for <Ctrl>-<v>), to paste the table into your web page.
    6. The table will require reformatting.
    7. In the "Democratic Coverage " column, a blank line appears to separate each coefficient and associated standard error. Actually, a hard return separates the two. To eliminate the blank line in the first cell, move the cursor to the end of the first line (i.e., right after the ".04"). Press the "Delete" key once. Next, holding down the <Shift> key, press <Enter>. The coefficient in parentheses then moves to the immediate next line (without creating a blank line in between).
    8. You may also wish to add lines or borders for your table. Move the cursor to a point inside the table. After doing so, notice a series of words and letters (each inside brackets) at the bottom of the window containing your web file. Click once on "<table>". The properties panel at the bottom of the computer screen will change, revealing a set of characteristics for the overall table. On this properties panel, find the field for "Border", and type 1 in this field. Then, click somewhere else on the computer screen, which will remove the highlighting in the table and reveal that the table's lines are now solid.
  9. 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 POL467.
    3. Next, use the mouse to highlight the text that you just typed (i.e., highlight "Class web site for POL467").
    4. Then, move the cursor over the highlighted text, and right-click the mouse.
    5. When a new drop-down menu appears, select "Make Link" (which appears about in the middle of the list of options). A new "Select File" window appears.
    6. Place the cursor in the field immediately to the right of "URL:".
    7. Delete all existing text in this field.
    8. Type http://www.davidson.edu/academic/political/sellers/pol467/syllabii/syl467,2004spring.html (alternatively, you can use Internet Explorer to go to the class web site, copy the address, and then paste it into the field).
    9. Then click on the "OK" button. You have just created a link from the text in your web file to the class homepage.
  10. 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

  1. 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.
  2. In the right portion of the overall Dreamweaver window, you will see a series of panels, labeled "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. At the top of the Files panel, you will see two drop-down menus.
    2. The right one should say "Local view"; if it does not, click on this menu and change it to "Local view".
    3. Below the two drop-down menus on the Files panel, you will see the name of your local folder, with a list of all files in that folder immediately below. The folder now contains only a single file, "assignment1.htm".
    4. To upload this file to your remote folder, click once on the file ("assignment1.htm"), to highlight it. Then, click once on the blue, upward-pointing arrow near the top of the "Files" panel. Dreamweaver will then upload your file(s).
    5. Dreamweaver may display a new window asking if you want to include dependent files. Choose "Yes".
    6. The file(s) are now a web page available for viewing through an Internet browser.
    7. 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.
  3. To view the files in the remote folder, open Microsoft Internet Explorer.
    1. In the "Address" field, type franklin.davidson.edu/academic/political/pasellers/public/pol4670_200502/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. That page is now accessible to anyone anywhere in the world.

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

Political Science 467 - Political Manipulation of the News