sccc.premiumdw.com

HCDE537 > A Multiple Page Website

Now that you have created your first page, let’s make it into a multiple page site!

View: http://students.washington.edu/sinkum/a-multiple-page-website/

Download: http://www.sccc.premiumdw.com/examples/a-multiple-page-website.zip

Step One: Create an External Style Sheet

We will need to rip out the embedded style sheet from your x and put it into it’s own file.

In DreamWeaver choose File > New > CSS.

Go ahead and then copy and paste your styles from the x into this new file:

View: http://students.washington.edu/sinkum/a-multiple-page-website/styles.css

You will then need to link to this CSS file using the following code:

<!-- Begin Styles -->
<link href="styles.css" rel="stylesheet" type="text/css" media="all" />
<!-- End Styles -->

Step Two: Create Your Page Divisions

Next, let’s break our page into the following page divisions:

1. Header

<!-- Begin Header -->
<div id="header">
<h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="Mike Sinkula's Website" /></a></h1>
</div>
<!-- End Header -->

Note: You can make your own logo image or leave this as text.

2. Navigation

<!-- Begin Navigation -->
<div id="navigation">
<ul id="navigation-items">
<li><a href="statement.html">Statement</a></li>
<li><a href="resume.html">Resumé</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- End Navigation -->

Note: Use whatever navigation items you would like to.

3. Content

<!-- Begin Content -->
<div id="content">
<img id="picture" src="images/img-myface.jpg" alt="Mike Sinkula is a Clown" height="175" width="150" />
<p><a href="http://www.mikesinkula.com/" target="_blank">Mike Sinkula</a> grew up in Southern California  went on to earn a BA in Visual  Communication/Graphic Design, from <a href="http://www.csuchico.edu/" target="_blank">California State  University at Chico</a> in 1993.</p>
</div>
<!-- End Content -->

4. Footer

<!-- Begin Footer -->
<div id="footer">
<p>©2011 Mike Sinkula. All rights reserved.</p>
</div>
<!-- End Footer -->

Step Three: Make all of Your Pages

Now we need to make the rest of our pages according to our navigation that we made earlier:

The Page Files for Your Site

Step Four: Place & Style Content

Now, go ahead and place content into your site and style it how you see fit.

This portion of the Premium Design Works website is written by Mike Sinkula and dedicated to the Web Design & Development students at Seattle Central Community College.