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.
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.
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).
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.
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.
IDIS 110 Website).
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.)
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
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:
index.html(a standard name for the main webpage of a website). Note how this appears in the site diagram on the right.
When you're done with this page, follow a similar process to create a
second page modeled on the
sample schedule page. Call it
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
view it in a standard web browser (see below).
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.,
schedule.html) from your H: drive.
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
schedule.htmlin one of two ways:
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.
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.,
amazon.com) in the "Link"
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.
You have at least three files for this lab:
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.