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.
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.
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.
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. At this point, you only need to change values on the first screen:
IDIS 110 Website).
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.)
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
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
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, choose
"File"-"Open", press "Browse" and load 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"
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).
You have at least three files for this lab:
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.