Note: This case study was written for last semester, when students were not encouraged to create portfolio web sites, so the resulting design is not a typical "portfolio" site like the kind most of you will be creating. I started to update this case study (and the design) to reflect the portfolio emphasis, as shown in my sample prototype (http://portfolios.gmu.edu/sample_portfolio/mockups.htm) and in the sample home page (http://portfolios.gmu.edu/sample_portfolio/), but time was not on my side, so I didn't finish the redesign in time for this lesson. (Other work responsibilities interfered.) Still, I think you will find this case study useful as you design your own web site.
Let's pretend that my name is Abigail and that I'm a student in this class. (Note: this name was chosen at random some time ago, and represents a fictitious student—any resemblance to real students is coincidental!) I have just been told that I have to create a web site. Ok. Where do I begin?
I would begin by creating an HTML file based on my home page. I (Abigail) have a rough idea of what I want my page to look like. I want to have my logo in the upper left corner, a background image across the top, and menu items below that. Below all of those items, I want to have a left hand menu and the main content on the right side. On the bottom of the page, I want to have a few links and a copyright notice. Here's my rough idea:
With this basic idea in mind, I begin to create my HTML file. I'll have to create placeholders for all of the content groups in my concept diagram. I open Dreamweaver and go to File > New. This gives me a blank document. Now I begin to type things in my document.
So far, my page looks like this (in the Design view):
Now I'm going to create my site slogan, which in this case will be: "I'm not a real person, but this would be my web site if I were real". This slogan will go in a new paragraph.
After I type the slogan, I'm going to create my side menu items, each with their own lists. I'll also create headings for above each of the lists to keep them organized. Here's what my web pages looks like now (in the Design view):
Logo
"I'm not a real person, but this would be my web site if I were real"
So far so good. It doesn't look like much, I know, but that's because we haven't added any styles yet. We'll do that a little later.
Now I'm going to create a placeholder for my main content. When I do this, I'll want to also add an anchor (link destination) so that our "skip to main content" link has somewhere to arrive. So at the bottom of the side menu items I'll type a placeholder heading and a placeholder paragraph. I also think I'll want a second section in my main content, so I'll add that too. Now my file looks like this:
Logo
"I'm not a real person, but this would be my web site if I were real"
Put content here
Put content here
Last of all, I'll put my footer:
Logo
"I'm not a real person, but this would be my web site if I were real"
Put content here
Put content here
I'm done creating the placeholder text, but I still need to do a few things to the HTML to prepare it to receive the styles.
First of all, I need to group items in the code using <div> tags. For example, I need to group the items in the header, which includes the logo and the main navigation links. I'll also want to group items in the side menu and others. When I'm all done, I'll want to have <div> tags around all of these things:
When I'm done, the code will have <div> tags for all of these, and each of these <div> tags will have an id. Unfortunately, adding <div> tags is not easy to do inside the Design view. You'll probably need to go into the Code view to do this. Before looking at the detailed code view, let's look at a simplified version. This is what the code would look like if we stripped it of everything except the <div> tags (the id attributes have been highlighted):
<div id="header">
</div>
<div id="content_container">
<div id="side_menu">
<div id="side_category_1">
</div>
<div id="side_category_2">
</div>
<div id="side_category_3">
</div>
</div>
<div id="content">
<div id="intro_section">
</div>
<div id="last_section">
</div>
</div>
<div id="footer">
</div>
</div>
Notice that the id attributes have no spaces in them and are all lower case letters.
This is the structural "skeleton" of our web page.
We're almost done with the HTML part of this page, but not quite. I want two more things.
Now for the detailed version. Here's what the full code of the web page looks like, with all of the <div> tags, the id attributes on the other tags, the classes on the links, plus all the other stuff that we created earlier (I highlighted the <div> tags, the ids, and the classes to help you see the structure):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My Web Site</title>
<link href="sample_styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="skip"><a href="#main_content">Skip to main content </a></p>
<div id="header">
<p id="logo">
<a href="../sample_site/"><img src="images/logo.jpg"
alt="Abigail's website" width="175" height="100" />
</a>
</p>
<ul id="main_nav">
<li class="first"><a class="selected" href="../sample_site/">Home</a></li>
<li class="middle"><a class="unselected" href="portfolio/">My Portfolio</a></li>
<li class="middle"><a class="unselected" href="hobbies/">My Hobbies</a></li>
<li class="last"><a class="unselected" href="about/">About Me</a></li>
</ul>
</div>
<div id="content_container">
<p id="site_slogan">"I'm not a real person, but this
would be my web site if I were real"</p>
<div id="side_menu">
<div id="side_category_1">
<h2>Bands I like </h2>
<ul>
<li><a href="http://www.shupe.net/">Ryan Shupe and the Rubberband</a></li>
<li><a href="http://www.theinnocencemission.com/">The Innocence Mission </a></li>
<li><a href="http://www.theoceanblue.com/">The Ocean Blue </a></li>
<li><a href="http://www.cocteautwins.com/">Cocteau Twins </a></li>
</ul>
</div>
<div id="side_category_2">
<h2>Historical Figures I like </h2>
<ul>
<li><a href="http://www.transcendentalists.com/1emerson.html">Ralph Waldo Emerson </a></li>
<li><a href="http://www.mkgandhi.org/">Gandhi</a></li>
<li><a href="http://www.aip.org/history/curie/">Marie Curie </a></li>
</ul>
</div>
<div id="side_category_3">
<h2>Foods I like </h2>
<ul>
<li><a href="http://www.sonzyskitchen.com/chickentikka.htm">Chicken Tikka Masala </a></li>
<li><a href="http://i-cias.com/cgi-bin/eo-direct.pl?couscous.htm">Couscous</a></li>
<li><a href="http://www.raspberries.us/">Raspberries</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="intro_section">
<h1><a name="main_content" id="main_content"></a>Heading 1 </h1>
<p>Put content here</p>
</div>
<div id="last_section">
<h2>Heading 2 </h2>
<p>Put content here</p>
</div>
</div>
<div id="footer">
<ul id="footer_list">
<li class="first"><a href="../copyright.htm">Copyright</a> 2006 (put your name here)</li>
<li class="middle"><a href="../terms.htm">Terms of use</a></li>
<li class="last"><a href="../contact.htm">Contact us</a></li></ul>
</div>
</div>
</body>
</html>
So why did I add classes to the menu items, instead of ids?
Remember that an id can be used only once on a page. It reperesents a unique item. On the other hand, classes can be used multiple times. All of the instances in which I used an id are instances of unique objects. But since I have lists in two places—the main menu and the footer—I want to be able to re-use this attribute. The "first," "middle," and "last" attributes will apply to the main navigation links and the footer links.
We're done with the HTML file. Now we need to create some images and add some styles. That's in part 2 of this case study.