980px

See Also: Building an HTML Protosite Using PHP | WEB200 | Premium Design Works

View: http://faculty.washington.edu/sinkum/multiple-pages-for-your-website/

Code: https://github.com/msinkula/HCDE598/tree/master/multiple-pages-for-your-website

We will need to rip out the embedded style sheet from your web page and put it into it’s own file via File > New > CSS.

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

Create an External Style Sheet

Create an External Style Sheet

You will then need to link to this external style sheet from your index file using the following code:

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

Place this code right below the <title> tag:

Link to the External Style Sheet

Link to the External Style Sheet

Step Two: Create the Template File

The object of this step is to use our index.html file as a template file that we will start breaking apart into our include files. Organization and keeping track of files will be very important in this step.

To keep ourselves organized and to make sure that we are not going to overwrite any files, let’s rename our index.html file as template.html:

Rename as template.html

Rename as template.html

This template file will now be the representative build of the structure of our website pages.

Step Three: Create The Header & Footer Include Files

Let’s now make sure that we have the template.html file open. Then we can start breking it apart.

We are first going to make the header.php and footer.php includes and then our page specific file called index.php.

Let’s select and cut everything form the doctype thru the opening content <div> tag:

Select your header code...

Select your header code…

… and place it into a new file that we will save as header.php in a folder called includes:

... place into the header include

… place into the header include

Let’s do the same with our footer code.

Select and cut from the closing content <div> tag thru the closing <html> tag:

… and place it into a new file that we will save as footer.php in our folder called includes:

Next, let’s go back to our template.html file and save it as our index.php file at the root of our site:

We can now make the calls to our include files from our new index.php file.

Let’s make a call to the header.php file:

Select Code
1
<?php include('includes/header.php'); ?>

It should be placed at the top of your file:

Call to Header Include

Call to Header Include

Let’s make a call to the footer.php file:

Select Code
1
<?php include('includes/footer.php'); ?>

It should be placed at the bottom of our index.php file:

Call to Footer Include

Call to Footer Include

Let’s now delete our old index.html file that may be lurking around both locally and remotely:

Delete the old index.html file!

Delete the old index.html file!

Note: Make sure that your template.html file is in tact before you do this!

Now, if we preview our site, it will look as if nothing has changed:

Nothing has Changed!

Nothing has Changed!

Step Four: Create The Rest of Our Pages

Now that we have created the header and footer include files, we can start to create the rest of our pages and then modify the main and sub navigation structures.

We are going to base the rest of our pages off of our index.php file. So, go ahead and open the index.php file again.

Once you have it open, change your <h2> tags in your text and sidebar regions to something more appropriate for the home page and re-save the file:

Rename your level 2 headlines

Rename your level 2 headlines

If we preview, we will see the new headlines in play:

New Headlines

New Headlines

Now let’s create our other pages and headlines!

I am going to save the new pages according to what I chose for my navigation structure.

I can save my index.php file as about.php:

Save as about.php

Save as about.php

… and then edit the headlines:

Edit the headlines

Edit the headlines

I am going to repeat these steps for the other pages in my site:

Create the rest of your pages.

Create the rest of your pages.

You should now have all of the page specific files for your pages!

Step Five: Link to All of Your Pages

Let’s now create the proper links to our page files. To do so, we need to open up our header.php file again.

Here, we are going to create the links to our pages for our logo and navigation:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- Begin Header -->
<div id="header">
<h1><a href="index.php">Mike Sinkula</a></h1>
</div>
<!-- End Header -->

<!-- Begin Navigation -->
<div id="navigation">
<ul id="navigation-items">
<li><a href="about.php">About</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
<!-- End Navigation -->

We should now be able to click thru our website pages:

We can now click thru our website pages!

We can now click thru our website pages!

Step Six: Create the “You Are Here States”

If you have gotten this far without feeling challenged, I’ve got an extra step you can choose to complete.

See Also: Using PHP Conditional Statements

When clicking thru pages on a website, it is a good idea to create the “You Are Here” markers in our navigation scheme. To do so, we will need to use a php conditional structure and a bit more CSS.

See Also: Keeping Navigation Current With PHP | A List Apart

First, I am going to make my main navigation into it’s own navigation.php include file:

Create a Navigation Include

Create a Navigation Include

… and make a call to it from the header.php file:

Select Code
1
<?php include('includes/navigation.php'); ?>

I can place this call where the navigation needs to go:

Call the navigation include.

Call the navigation include.

I will then edit my navigation include:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
<?php $page = basename($_SERVER['SCRIPT_NAME']); ?>

<!-- Begin Navigation -->
<div id="navigation">
<ul id="navigation-items">
<li <?php if ($page == 'about.php') { echo 'class="current"'; } ?>><a href="about.php">About</a></li>
<li <?php if ($page == 'services.php') { echo 'class="current"'; } ?>><a href="services.php">Services</a></li>
<li <?php if ($page == 'portfolio.php') { echo 'class="current"'; } ?>><a href="portfolio.php">Portfolio</a></li>
<li <?php if ($page == 'contact.php') { echo 'class="current"'; } ?>><a href="contact.php">Contact</a></li>
</ul>
</div>
<!-- End Navigation -->

This will write a class of “current” into our navigation’s list item:

Write a class of "current" into our list items.

Write a class of “current” into our list items.

We can then create a style for current that is based off of our hover state:

Select Code
1
2
3
#navigation ul li.current a {
color: #EBB700; /* and use bright gold */
}

We should now see our “You Are Here” menu:

You Are Here!

You Are Here!

Whether you finished the extra credit step or not, you should be proud of yourself for having a multi-page website now!

Now we can go ahead and create a form for our contact page!

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.

css.php