Dreamweaver Lab

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 next week, 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 this week's project.

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. For your project 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 one folder will be used for this lab, this week's project, next lab, and 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. At this point, you only need to change values on the first screen:

When done, you should get the "Manage Sites" dialog back. Now, export this definition:

After exporting, you will again return to the "Manage Sites" dialog. Simply click "Done". When you want to work on this site again, use the "Import" feature to import the site definition on another computer. (See the project specification 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 choose "New File". Name this new HTML file index.html. Dreamweaver and the Web are very picky about the names you use: index.html and nothing else for this file (and capitalization counts)! This will be the landing page for your website. To edit this page, double click on the file. A split screen will appear. On the left is the HTML code that the browser will actually run. On the right is a window more closely showing what will appear on the website (similar to how Microsoft Word shows something that looks like what will be printed). You will probably want to only work in the right window, but notice that if you type something on the right, it is automatically generated in the left. You can change what appears on the screen by clicking the appropriate button just under the title on the page near the top of the screen: "Code" will show only the code, "Split" is the current version, and "Design" will show the version that will appear in a browser.

Now, edit this file to 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. Start by creating a new file, 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, choose "File"-"Open", press "Browse" and load 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., http://www.amazon.com/, not www.amazon.com or amazon.com) in the "Link" field. Create an external link on at least one of your pages (maybe link one of your hobbies, or one of your classes to a relevant site).

Submitting your Work

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