COM271—Task 1

Introduction to Dreamweaver, ftp, and HTML Basics
Given 9/6 | Due 9/13

Syllabus | Table of Pages | Assignments | References and Useful Links

Overview: You will make your first web page using Dreamweaver and transfer it to the course server using ftp. You will make a home page for a course assignments website, and (in part 2) make a simple resume using only HTML.

I. FTP Setup

Purpose To establish a remote server site for course assignments.

You are assigned an individual course folder on a server used for this course. This folder and its contents will be your course web site, the "remote root folder" for all work for the course. You will be shown how to do this, and how to communicate with the server via ftp (file transfer protocol). You will have an exclusive user name and password, and you will share full rights to the folder with the instructor (i.e., you may create, modify, delete, read, or execute any file you put in this folder). It will be accessible through the WWW. You will regularly use this site to complete assignments, working on projects from the lab, home, or office. You will complete this part of the assignment during the first lab session.

II. Setting up a home page for your course work

Purpose To use basic HTML to set up a home page for the course.

In this assignment, you create a bare-bones home page, with a banner, contents that describe what is in the site, and navigation to future assignments which you will post later in the semester.

Following instructions in lab, build this initial home page inside a 2x2 html table. Using the proper table attributes (read your notes!), make the table 800 pixels wide and 500 pixels high. Using html attributes, make the first row 100 pixels high and the first column no more than 200 pixels wide. Tentatively label each cell of the table like this:

logo banner
navigation content

Now do these steps, checking off each as you go:

  1. Save the file in your root folder, following instructions in lab, as "index.html"
  2. Open a browser and enter the name of your home page as the URL (i.e., "www.com.uri.edu/com271/your folder name/index.html") to see your page on the WWW. Always view your work through the browser, using pages on the server.
    (Success? Congratulations! You are a web author.)
  3. Replace the word "banner," which you tentatively wrote (above): Enter an H1 element containing "(Your name)'s Home Page" or some such title for the entire page.
  4. Replace the word "content" (above): Enter a paragraph containing "This is the home page for my COM271 website" or something. Later, we will update this as we do other assignments.
  5. For now, leave "navigation" and "logo" as they are. We'll come back to them shortly.
  6. Save this page once again. Look at it in the browser (refresh the browser page to see the changes you've just made on the server) to be sure that your changes are permanent. Leave this page open in Dreamweaver and go to the next step.

III. Creating a page for an html resume

With index.html still in the Dreamweaver working window, do a "save as" (under the File menu) and name it "html_resume.html" Note the underscore in the name.

File names

File names are up to you, but I suggest that you get a consistent system. Never include blanks in the file name. I'd stick with lower case. I prefer to use underscores to separate words in a name. Keep the names short (say, under 20 characters, and under 10 is better so long as the name serves to remind you of what is in the file. Use file extensions consistently: htm and html are both hypertext files, but if you use only one of these you will be able to recall them later.

If you have done this correctly, you will see the new file listed under the Files>Local Files listing in Dreamweaver's site window, and the working window will now have a tab showing html_resume.html. Note that you are no longer working on index.html!

Continue with these steps, checking off each as you go:

  1. Replace the banner text with "(your name)'s Resume."
  2. Replace the text in the content cell with a table. Highlight the text in the work window, then use the Dreamweaver Insert (menu) > table and set up a 500px-wide table with two columns and at least 4 rows. If you need to read more about nesting, read here.
  3. Replace the word "navigation" (left side, lower cell) with the word "home." Double click on "home" to highlight it, then in the Dreamweaver properties window (click refresh if need be), type "index.html". Then click once back in the work window. You should now see, in the navigation cell,
    <a href="index.html">home</a>

Open the file index.html by double clicking on its icon in the Local Files list of the site window, and do this:

  1. Replace "navigation" with "HTML Resume". Double click on this new text to highlight it.
  2. In Dreamweaver's Property window, click on the file-folder icon to the right of the link text box, and navigate to the file html_resume.html. When you have done this, you should see a link, as above. This is another way that Dreamweaver expedites writing code to link files.

You now have a site with two pages. The home page, index.html, has a link to the rest of the pages on the site (only one at the moment). The site pages (one) has a link to the home page. You may call it a day, or continue with part two of this assignment.

How Will This Assignment be Graded?

This assignment is worth 5% of your final grade. Points will be awarded for:

Points will be deducted, at the instructors discretion, for careless work or extreme, unexcused lateness (note due date, above).