Lab 6

Be plodding—IT people take it one step at a time because IT is harder than you think it is.

In this lab exercise, you'll build a simple, multiple-page, hyperlinked homepage for yourself using Macromedia Dreamweaver. We won't publish it to the World-Wide Web until Lab 7, but we will be able to see how it's going to look. If there is time, you can also start working on the bare bones of your final project website, which you'll turn in as Project 6.

Types of Websites

There are many different types of websites (not comprehensive):

In this lab, you'll be building your own home page at Calvin. In Project 6, you'll be making an informational website.

Getting Started

Create a new folder on the H: drive for this lab.

That's really important, and non-negotiable, so I'll repeat it:

Create a new folder on the H: drive for this lab.

This is not something that can be easily fixed later on, so make and use the folder now.

You can put this new folder in an existing "FIT" or "IDIS 110" folder. In fact, that would be a really good idea. But you must make a new, empty folder for this lab.

Everything you do for this lab must be done in this folder. If you want to use an image on your site, copy (or move) the image to this folder.

This folder will be used for this lab, Project 6, Lab 7, and Project 7 (your final project).

A Simple Homepage

You'll now build a simple home website that looks like this sample homesite (from Prof Vander Linden). Surf around this site and note the following things:

Note how the pages are hyperlinked together. Visitors typically arrive at the Main page and then are allowed to visit the schedule page if they really want to.

Getting Started with Dreamweaver

Macromedia Dreamweaver is a very common web development tool that allows you to create web pages and manage a website. It is installed in the FIT lab computers as well as in the ITC. When we work with Dreamweaver in this lab, it will look something like this:

Start by creating a new Dreamweaver site. This is as important as creating a new, empty folder. Here's how:

Use the site-creation wizard to fill in some information.

For the latest version of Dreamweaver, you may only need to change values on the first screen. When done, you should get the "Manage Sites" dialog back. (If not, select "Site"-"Manage Sites".) To make your life easier, export this definition:

When you want to work on this site again, use the "Import" feature to import the site definition on another computer. (See Project 6 for instructions on how to import a site definition.)

Building Pages in Dreamweaver

In the last section you created a new website, and the files in the website should appear on the right side of Dreamweaver. Currently, you shouldn't have any files, so let's create one.

Right click on your site on the right of Dreamweaver, and create a new HTML file named index.html. Dreamweaver and the Web are very picky about the names you use: index.html and nothing else for this file! Build a main page similar to the one in the sample shown above, with the following features:

When you're done with this page, follow a similar process to create a second page modeled on the sample schedule page. Call it schedule.html or something similar (although you should avoid spaces, punctuation, and capital letters). You can create the schedule table by choosing "Insert"-"Table", setting the number of rows and columns (for Vander Linden's schedule, it was 10 rows and 6 columns), and then typing the appropriate text into each of the cells. Format it as appropriate, but, again, leave out the hyperlinks. Do not just simply copy and paste the schedule that KnightVision gives you.

When you are finished, save this page as schedule.html, and view it in a standard web browser (see below).

Viewing your pages in a Web Browser

Dreamweaver gives you a pretty good idea of how your pages will look, but you should always double-check the formatting in a real web browser. Web browsers are actually happy to read files off your computer (not just from websites on the Internet). Start Firefox or Internet Explorer, choosing "File"-"Open", pressing "Browse" and loading either of your files (i.e., index.html or schedule.html) from your H: drive.

Adding Relative Hyperlinks in Dreamweaver

Now that you've built two web pages, you can link the main page to the schedule page to create an integrated website. Do this by going back to Dreamweaver and opening index.html again.

Edit the return hyperlink on the Schedule page in a similar manner.

Save both of your web pages, and then reload them in the browser (by choosing "View"-"Refresh"). You should now be able to follow the hyperlinks from the title page to the navigation page and back again.

Adding External Hyperlinks in Dreamweaver

The hyperlinks you've added so far are all "relative" links. That is, they simply link files that are stored in the same folder on the web server. The sample schedule shows a number of hyperlinks that reference "external" sites (i.e., the websites of the classes that Vander Linden teaches, which are stored on other websites).

Specify an external link in the same way as you do a relative link, except that you type the full URL (e.g.,, not or in the "Link" field.

Use a Site Definition File

If you were foolish to not create a site definition file earlier, do it now. If you did create one before, you do not need to do anything. As long as the right files appear in the site listing on the right side of the Dreamweaver application, you're doing well.

Submitting your Work

You have at least three files for this lab: index.html, schedule.html, and at least one image file. Submit all of these files as attachments to your Lab 6 Moodle submission. Note: You do not need to submit your site definition file.