A Web Page Template

A web page template can be created that includes all of the common features of the pages we are going to create. The template can then be used to create all of the pages that will appear on our site. We are going to create a web page template based on the series of storyboards below, which outline the pages for a personal web site (mine, as it happens!). There are six pages to start with, all of which have a header at the top of the page, a footer at the bottom of the page, a navigation menu on the left-hand side of the page, and a "features" menu on the right-hand side of the page. I have to be honest and say that at the moment I don’t really know what the "features" menu will contain. It seems like a good thing to have, though, so I’ll leave it in for now and worry about what is going to go in it later. The main question at the moment is how I will implement the structure.


My website storyboards

Home page

Home page

Curriculum Vitae

Curriculum Vitae

Pets’ page

Pets’ page

House and garden

House and garden

Places of interest

Places of interest

Links to other sites

Links to other sites

Essentially, each page is made up of six boxes. The top and bottom boxes occupy the full width of the available screen area, and extend approximately fifteen percent of the height of the screen from the top and bottom of the screen respectively. The navigation menu occupies approximately fifteen percent of the remaining centre section on the left-hand side of the screen, while the "features" menu occupies approximately the same proportion of the centre section, but is located on the right-hand side of the screen. The box in the middle of the centre section (we could probably call this the "content" area) therefore occupies approximately seventy percent of the screen height, and seventy percent of its width. We have already mentioned that Cascading Style Sheets are the preferred method for creating page layouts, so we will use CSS together with the <div> . . . </div> tag to create our screen layout. The basic XHTML template is shown below.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Chris Wells - Personal Pages</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  </head>

  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>


Enter the code above into a text editor and save it into your "Web" directory as "template.html". Note that we have included <div> . . . </div> tags for each of the main layout areas, but have not actually told the browser how to display them. Consequently, if you load the template.html file into a web browser, it will load without error but will not actually display any content (because we have not specified any), and will not reflect the intended document layout (because we have not defined it yet). We will need to define some styles and apply them to our <div> . . . </div> tags in order to see any tangible results. For the moment, we will define the styles within the template.html document itself using the inline method of implementation (we will look at other methods of implementing CSS in due course). Amend the file template.html to read as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Chris Wells - Personal Pages</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  </head>

  <body>
    <div style="position:absolute; top: 0px; left: 0px; height: 15%;
      width: 100%; background-color: #a8cece">
      <h1>Chris Wells - Personal Pages</h1>
    </div>
    <div style="position:absolute; top: 15%; left: 0px; height: 70%;
       width: 15%; background-color: #d8e8e8">
      <h2>Nav Menu</h2>
    </div>
    <div style="position:absolute; top: 15%; left: 15%; height: 70%;
      width: 70%; background-color: #ffffff">
      <h2>Main Content Window</h2>
    </div>
    <div style="position:absolute; top: 15%; right: 0px; height: 70%;
      width: 15%; background-color: #d8e8e8">
      <h2>Features</h2>
      </div>
    <div style="position:absolute; bottom: 0px; left: 0px; height: 15%;
      width: 100%; background-color: #a8cece">
      <h4>Document Footer</h4>
    </div>
  </body>
</html>


Open the template file with a browser to see the result.


The basic page layout (at 800 x 600 pixels), defined using cascading style sheets

The basic page layout (at 800 x 600 pixels), defined using cascading style sheets


Note that the styles we have defined so far are purely concerned with the size, position and background colour of each of the main areas on the page, which are defined using <div> . . . </div> tags. The style of each tag is defined inside the tag itself (inline). Although this method works perfectly well, it is not ideal, because if we want to change the styling for a number of the tags (or indeed all of them), we need to edit each of the affected tags wherever they appear in the code. It would be much more efficient to have all of the style definitions grouped together in one place. To this end, we could re-write our template using the embedded method of adding styles to a document, in which the style definitions are defined in the head section of the document. Amend the file template.html to read as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Chris Wells - Personal Pages</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <style type="text/css">
      div.header { position:absolute; top: 0px; left: 0px; height: 15%;
        width: 100%; background-color: #a8cece }
      div.footer { position:absolute; bottom: 0px; left: 0px; height: 15%;
        width: 100%; background-color: #a8cece }
      div.nav { position:absolute; top: 15%; left: 0px; height: 70%;
        width: 15%; background-color: #d8e8e8 }
      div.features { position:absolute; top: 15%; right: 0px; height: 70%;
        width: 15%; background-color: #d8e8e8 }
      div.content { position:absolute; top: 15%; left: 15%; height: 70%;
        width: 70%; background-color: #ffffff }
    </style>
  </head>

  <body>
    <div class="header">
      <h1>Chris Wells - Personal Pages</h1>
    </div>
      <div class="nav">
      <h2>Nav Menu</h2>
    </div>
    <div class="content">
      <h2>Main Content Window</h2>
    </div>
    <div class="features">
      <h2>Features</h2>
    </div>
    <div class="footer">
      <h4>Document Footer</h4>
    </div>
  </body>
</html>


The revised coding produces exactly the same page as the previous version, but the style information has been defined using the <style> . . . </style> tag in the document’s header section. This makes life somewhat easier when it comes to maintaining web pages because the style definitions are all in the same place within each HTML file. It still involves a considerable amount of work each time we want to add a new style definition or modify an existing one, however, because the additions and changes have to be applied to each HTML document individually. This is not too much of a problem if you only have a few pages on your site, but can be very time consuming if you have hundreds of pages. It would be much better if we could define all our styles in a separate file (an external style sheet file) and simply link to that file from each page we create. The link to the external style sheet could be incorporated into the template.html document, so we would not even have to remember to include it each time we created a new web page, providing we used the template when doing so. The code below is our existing style information, but reformatted as an external style sheet file (note how indentation and white space is used to make the code more readable).


/* style definitions for page layout */

div.header
{
  position:absolute;
  top: 0px;
  left: 0px;
  height: 15%;
  width: 100%;
  background-color: #a8cece
}

div.footer
{
  position:absolute;
  bottom: 0px; left: 0px;
  height: 15%;
  width: 100%;
  background-color: #a8cece
}

div.nav
{
  position:absolute;
  top: 15%;
  left: 0px;
  height: 70%;
  width: 20%;
  background-color: #d8e8e8
}

div.features
{
  position:absolute;
  top: 15%;
  right: 0px;
  height: 70%;
  width: 20%;
  background-color: #d8e8e8
}

div.content
{
  position:absolute;
  top: 15%;
  left: 20%;
  height: 70%;
  width: 60%;
  background-color: #ffffff
}


Create a subdirectory under your "web" directory called "css", then add the above code to a text document exactly as shown, and save as "style.css" in the "css" directory. We can now revise the template.html file to remove the embedded style sheet and add the link for our newly created external style sheet file. The revised HTML code is shown below. Make the changes as shown, then open the page in a browser. You should get exactly the same result as on the two previous occasions.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Chris Wells - Personal Pages</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
  </head>

  <body>
    <div class="header">
      <h1>Chris Wells - Personal Pages</h1>
    </div>
    <div class="nav">
      <h2>Nav Menu</h2>
    </div>
    <div class="content">
      <h2>Main Content Window</h2>
    </div>
    <div class="features">
      <h2>Features</h2>
    </div>
    <div class="footer">
      <h4>Document Footer</h4>
    </div>
  </body>
</html>


Since we know what pages we will be creating for this personal web site, we can add in the links in the navigation area. We can also add some information in the document footer area (this will just be an email link to the page’s author), and add styles for the body text, page headings and hypertext links. Add the following code to your style sheet file:


/* general style definitions */

body
{
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
}

h1 { text-align: center }
h2 { text-align: center }
h3 { text-align: center }
h4 { text-align: center }

a
{
  text-decoration: none;
  color: #0000ff;
  font-weight: bold;
  margin-left: 1em;
}

a:hover
{
  text-decoration: underline;
  color: #ff0000;
  font-weight: bold
}

a.dead { color: #808080; }
a.dead:hover { text-decoration: none }


Now amend your template.html file to read as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Chris Wells - Personal Pages</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
  </head>

  <body>

    <div class="header">
      <h1>Chris Wells - Personal Pages</h1>
    </div>

    <div class="nav">
      <h2>Nav Menu</h2>
      <a href="index.html">Home</a><br/><br/>
      <a href="cv.html">Curriculum Vitae</a><br/><br/>
      <a href="pets.html">Pets</a><br/><br/>
      <a href="house_and_garden.html">House and Garden</a><br/><br/>
      <a href="places_of_interest.html">Places of Interest</a><br/><br/>
      <a href="links.html">Links</a><br/><br/>
    </div>

    <div class="content">
      <h2>Main Content Window</h2>
    </div>
    <div class="features">
      <h2>Features</h2>
    </div>

    <div class="footer">
      <h4>
        E-mail me: <a href="mailto:cwells@technologyuk.net">
          cwells@technologyuk.net</a>
      </h4>
    </div>
  </body>
</html>


Once you have made the necessary changes, open (or re-load) the template.html file in a browser. The result of the changes to the style sheet file and to your template.html file should produce a display similar to that shown below (note that the first illustration below was the result of opening the page using a screen resolution of 800 x 600 pixels). The result is not particularly spectacular as yet, but (as the second illustration below proves) we now have a scalable screen layout that works for a range of screen resolutions.


The revised template.html file, displayed at 800 x 600 pixels

The revised template.html file, displayed at 800 x 600 pixels



The revised template.html file again, this time displayed at 1280 x 1024 pixels

The revised template.html file again, this time displayed at 1280 x 1024 pixels


The page header is somewhat bland. I will use an image here instead of actual text, to make the header look a bit more personalised and stylish (note that, generally speaking, you should not use images that contain text, as they cannot be read by a screen reader. The idea here, though, is purely to improve the aesthetic quality of the page). Here is the image I am going to use (the dimensions are 420 x 40 pixels):


The header text image (screen_header.gif)

The header text image (screen_header.gif)


Amend the template.html file to read:


<div class="header">

</div>


Instead of:


<div class="header">
  <h1>Chris Wells - Personal Pages</h1>
</div>


Now change the div.header style definition in the style.css file to read as follows:


div.header
{
  position:absolute;
  top: 0px;
  left: 0px;
  height: 15%;
  width: 100%;
  background-color: #a8cece;
  background-image: url(/images/screen_header.gif);
  background-repeat: no-repeat;
  background-position: center;
}


The image file screen_header.gif has been specified as the background image for the div.header element. Note that by default, background images are tiled to fill the available area. We have explicitly turned off this default behaviour (background-repeat: no-repeat;), and have positioned the image in the centre of the header both vertically and horizontally (background-position: center;). Opening the template.html file in a browser should produce a browser window that looks something like the illustration below.


The revised template.html file at 1280 x 1024 pixels, complete with graphic header

The revised template.html file at 1280 x 1024 pixels, complete with graphic header


To create the actual Home page for the site, you can now use the template.html file. Save it as "index.html", and in the newly created file amend the code to read as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Chris Wells - Personal Pages</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
  </head>

  <body>

    <div class="header">

    </div>

    <div class="nav">
      <h2>Nav Menu</h2>
      <a class="dead">Home</a><br/><br/>
      <a href="cv.html">Curriculum Vitae</a><br/><br/>
      <a href="pets.html">Pets</a><br/><br/>
      <a href="house_and_garden.html">House and Garden</a><br/><br/>
      <a href="places_of_interest.html">Places of Interest</a><br/><br/>
      <a href="links.html">Links</a><br/><br/>
    </div>

    <div class="content">
      <h2>My Home Page</h2>

      <p>
These are the home pages of me, Chris Wells. As you can see, there are links on the left of this page that take you to my other pages, which I hope you will find of interest. The purpose of these pages is to demonstrate some (very basic) web design principles. I am not a graphic designer (as you can probably tell), so it's more about the technical aspects of designing a page using <em>eXtensible HyperText Markup Language</em> (XHTML) and <em>Cascading Style Sheets</em>. There is a picture of me below this text for those of you who like pictures (and are not too fussy about what they show!).
      </p>
      <br />
      <br />

      <div class="center">
        <img src="images/mypic.jpg" />
      </div>

    </div>
    <div class="features">
      <h2>Features</h2>
    </div>

    <div class="footer">
      <h4>
        E-mail me: <a href="mailto:cwells@technologyuk.net">
          cwells@technologyuk.net</a>
      </h4>
    </div>
  </body>
</html>


The style.css file should also be amended to read as shown below (note that the changes include styling for the paragraph tag (<p>), and the addition of the "overflow: auto" directive to the div.nav, div.features, and div.content classes. This directive ensures that if the available display area cannot accommodate the contents of any of these three boxes in their entirety, scroll bars will automatically appear to allow the user to scroll to the hidden parts of each box.


/* style definitions for page layout */

div.header
{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 15%;
  width: 100%;
  background-color: #a8cece;
  background-image: url(/images/screen_header.gif);
  background-repeat: no-repeat;
  background-position: center;
}

div.footer
{
  position:absolute;
  bottom: 0px; left: 0px;
  height: 15%;
  width: 100%;
  background-color: #a8cece;
}

div.nav
{
  position:absolute;
  top: 15%;
  left: 0px;
  height: 70%;
  width: 20%;
  background-color: #d8e8e8;
  overflow: auto;
}

div.features
{
  position:absolute;
  top: 15%;
  right: 0px;
  height: 70%;
  width: 20%;
  background-color: #d8e8e8;
  overflow: auto;
}

div.content
{
  position:absolute;
  top: 15%;
  left: 20%;
  height: 70%;
  width: 60%;
  background-color: #ffffff;
  overflow: auto;
}

div.center
{
  text-align: center;
}


/* general style definitions */

body
{
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
}

h1 { text-align: center }
h2 { text-align: center }
h3 { text-align: center }
h4 { text-align: center }

a
{
  text-decoration: none;
  color: #0000ff;
  font-weight: bold;
  margin-left: 1em;
}

a:hover { text-decoration: underline; color: #ff0000; font-weight: bold }
a.dead { color: #808080; }
a.dead:hover { text-decoration: none }

p
{
  margin-top: 2em;
  margin-top: 2em;
  margin-left: 4em;
  margin-right: 4em;
  text-align: justify;
}

div.center { text-align: center; margin: auto}


The result of our efforts so far is shown below. The first view is at a relatively high resolution (1280 x 1024 pixels), while the second view is at a lower resolution (1024 x 768 pixels). It is probably fair to say that the appearance of the page at both resolutions is acceptable. The third view is a screenshot taken at a screen resolution of 800 x 600 pixels, which is probably the lowest resolution still available to most users. At this low resolution, part of the picture in the content area is obscured, although the scroll bar is activated, allowing the user to scroll down if required.


The new Home page (index.html) at 1280 x 1024 pixels, complete with content

The new Home page (index.html) at 1280 x 1024 pixels, complete with content



The Home page again, this time at 1024 x 768 pixels

The Home page again, this time at 1024 x 768 pixels



The final view of the Home page, now at 800 x 600 pixels

The final view of the Home page, now at 800 x 600 pixels