Course Web Page Tutorial: Using Dreamweaver 4

Macintosh

Objective: In this tutorial we will copy web page templates from Athena to our local workstation; work on the page in Dreamweaver 3; transfer the page back to a sample Athena course locker using Fetch.

Note: You can request this course for small groups of 10 or less by contacting Academic Computing's Faculty Liaison Office.

Working with AC Course Web page templates

Choose a course name and number to use for this exercise if you want to create a new course Web site, or you can use the demo course cwt.101, Course Web Tutorial.

Configure Dreamweaver

  1. Open Dreamweaver
  2. From the Menu bar choose Edit/Preferences
  3. Under General enter ".html" for the extension you want to use
  4. Under Code Format select the Line Breaks format that matches the system type that your files will finally be served from. E.g. if your course files are being served from Athena (web.mit.edu URL), choose LF (Unix).
  5. Under Preview in browser choose the browser you want to use to preview your pages. (Use the Finder to find the browser on a MAC; use the Find function on a PC. It's a good idea to configure Netscape and IE as primary and secondary browsers.
  6. Review other Preference settings.
  7. If it isn't already open, open the Properties dialog box from the Window menu..

Set up a site in Dreamweaver

Dreamweaver uses file folders to store "sites" which, in this case, will include all of the linked course web pages for your test course. If the folder does not already exist you can create one the way you normally create a folder on your workstation. Or you can create the folder as you create the site in Dreamweaver as follows:

  1. From the Dreamweaver menu bar choose Site/New Site
  2. For Site Name: enter your login name.
  3. For Local root folder:
    1. Click on the New button
    2. Enter the name of the new folder for your site (in this case, use your Athena login name as the folder name)
    3. With the new folder highlighted, click the Choose

(If the folder already exists, click on the briefcase icon to the right of the fill-in field and maneuver to the folder.)

Downloading the templates

  1. Open Netscape.
  2. In Netscape go to http://web.mit.edu/cwt.101/www and choose the design you want.
  3. From the Netscape menu bar choose File/Save As. Be certain that the file name is index.html, and that the file type is source, save the file to your site folder.
  4. This file has links to other pages. If you want to download the Syllabus, Schedule, Problems Sets, Faculty, or Comments Form pages:
    1. Place your cursor on the link
    2. Hold down the mouse button until a menu appears.
    3. Select Save link as: from the menu. Accept the default filename.
    4. Save the files to your local Site Folder.

Customizing a Page

  1. Open the index.html (home page) file in Dreamweaver either by using the File/Open menu or by double clicking on the filename in the Site window.
  2. Be certain that the Properties window is showing.
  3. Enter text manually or by cutting and pasting from other sources such as a text file or Word document.

Adding graphics

You can add images to your pages. They must be one of 3 formats, GIF, JPEG or PNG. (You can also add video or audio files, but that is beyond the scope of this course.) You can either create an image in an application like Adobe Photoshop, or you can use images that you find on the Web. Make sure the image you want to copy is not copyrighted!

To insert an image that you download from the web:

  1. In Netscape go to the web page that contains the image:
    http://web/cwt.101/www/Template1
  2. To save the file to your workstation hard drive:
  3. In Dreamweaver
    Place your cursor in the spot you want the image to be placed
    Select Insert/Image Highlight the image file name from the file browser
    Press the Select button.

Preview the page in a Web browser

  1. In Dreamweaver go to File/Preview in browser
  2. Check you links

Moving the files over to an Athena course locker

Moving files to Athena from a MAC

To move files to and from a MAC you need Kerberized Fetch installed on it.

  1. Open Fetch (Version 3.0.4b6sec) from the Apple menu
  2. In the New Connection box enter Host: ftp.dialup.mit.edu
  3. Enter User ID: (your Athena login)
  4. Set Security to Kclient or GSS and be sure the Encrypt session box is checked.
  5. Enter the Athena Directory (e.g. /afs/athena/course/other/cwt.101/www/your username)
  6. Click on the OK button.
  7. When prompted, enter your username and password. Click OK. You may be promped for password more than once.
  8. To move a file from your MAC to Athena choose Put File...
  9. In the dialog box that pops up, maneuver to your site directory on your MAC hard drive.
  10. Highlight your index file.
  11. Select Open
  12. In next box, keep the default filename and Format should be Text.
  13. Click OK. (You may be asked for your password again.)

To select several files at the same time hold down the Shift key while selecting with the mouse button. Don't forget to move your graphics files as well!

Subdirectories:
You can create subdirectories in your course locker using the Directories/Create New Directory menu item in Fetch.

Check your web pages

  1. Check for spelling errors by going to Text/Check Spelling.
  2. Test your web pages in as many different browsers and on as many different platforms as possible (ask friends & colleagues who use different browsers and platforms to help), for instance:
  3. Another way of ensuring correct web pages is to use the World Wide Web Consortium's (W3C) HTML Validator, and the Bobby Accessibility Checker.

Miscellaneous issues to consider before publishing your course Web pages

Where to go for more help

Comments are welcome.