skip page navigationOregon State University
Oregon State University College of Forestry

Web Development

HTML

CSS

Accessibility

Templates

Tools

Posting "Safe" Email Addresses

Building a Unit Page

Step 1: To start, copy the HTML from this window and paste it into an empty text document.

Do not simply save the window. Special tags were used to render the code correctly and are difficult to remove.

Step 2: Change the content of the title and head tags.

<title>Title, College of Forestry, Oregon State University</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Enter keywords here " />
<meta name="description" content="Enter description here." />
<meta name="author" content="Enter the author here." />
<meta name="copyright" content="Unit Info, Oregon State State University." />
  • Title: Put your unit name here. Make sure not to change or delete "College of Forestry, Oregon State University".


  • Keywords: This is a collection of words and/or phrases separated by commas. They are used by search engines to match search arguments with relevant sites. A site about famous scientists, for example, might have keywords like: "famous scientists, science history, science biographies, albert einstein, isaac newton, marie curie, richard feynman" etc.


  • Description: Whatever you type here is what would appear in a description field in a list of search results returned by a search engine (e.g. Google). You may want to write a two- or three-sentence narrative explaining the mission of your unit and the purpose of its web site.


  • Author: That's you!


  • Copyright: Use the name of whatever college, department, or organization at OSU that controls your unit's copyrights. If you're not sure, just use your unit's name.

Step 3: Customize your style sheet. A good place to start would be to download the default style sheet and go from there. If you're unfamiliar with CSS, you should probably just leave these addresses alone. If you do make your own style sheet, however, you will need to upload it to your server and provide the URL.

<!-- Stylesheet associations CHANGE THIS LINK TO YOUR UNIT'S STYLESHEET -->
<link href="http://www.cof.orst.edu/Templates/unit/unittemplate.css"
rel="stylesheet" type="text/css">

<STYLE TYPE="text/css">
<!--
@import url(http://www.cof.orst.edu/Templates/unit/unittemplate.css);
-->
</STYLE>

Step 4: Alter the title at the top of the page and its background color. In this case, bgcolor doesn't refer to the background of the entire page, but rather the background of the page title area, which defaults to olive. If you alter this color, you will probably need to redefine the .sitetitle style in your style sheet as well. Olive is one of very few colors that match peach.

<!-- Title area ALTER TITLE TEXT, BACKGROUND, AND COLOR HERE-->
<td height="55" bgcolor="#5B5B35">
<span class="sitetitle">Unit Title</span>

Again, if you're unfamiliar with style sheets, we recommend you leave this alone.

Step 5: Create a navigation bar. The unit template is written in PHP, which will allow you to create a single file with your navigation links and the template to display those links on every page of your site.

<!-- nav bar CHANGE THIS LINK TO YOUR UNIT'S NAVIGATION FILE -->
<?php include("http://www.cof.orst.edu/Templates/unit/navbar.inc");?>

Your navbar file should look something like this template and end with the .inc file extension.

Step 6: Customize your unit's search engine. In spite of what the comment CHANGE VALUES implies, the last URL in this block of code is all you need to alter. If, for example, you're making a page for the herring department, use a value of www.cof.orst.edu/herring/. If the herring department has its own virtual server, use herring.cof.orst.edu/.

<!-- osu search CHANGE VALUES TO YOUR UNIT'S INFORMATION-->
<div class="normaltext">
   <form name="gs" method="get"
   action="http://search.oregonstate.edu/web" title="search">
      <label for="query" title="Enter your search query here.">
      <input type="text" id="query" name="query" size="14"
      maxlength="256" value="Search Unit!" accesskey="s"
      onfocus="select(this);value='';" onblur="if(value=='')
      {value='Search Unit!';}" />
      </label>
      <input name="submit" type="submit" title="Search Unit!"
      value="Go" />
      <label for="site">
      <input type="hidden" id="site" name="site"
      value="www.cof.orst.edu/" checked>
      </label>
   </form>
</div>
<!-- end osu search -->

If your site is too small to warrant a search engine, you can comment out this block of code.

Tip: The unit template does not include any margin settings. If you would like to keep your text from riding up to the edges of the main content area, place the following code right before the breadcrumbs:

<div style="margin-left: 20px; margin-right: 20px;">

You'll also need to place a closing </div> tag before the end of the main content area.

Step 7: Leave a trail of breadcrumbs. Breadcrumbs help users understand where they are in the heirarchy of a site. Each page you make will therefore need its own breadcrumbs.

<!-- breadcrumbs -->
   <div class="breadcrumbs">
   <a href="http://www.cof.orst.edu/">College of Forestry</a>
   &raquo; Unit
</div>
   <br>
<!-- end breadcrumbs -->

Step 8: The unit contact information is at the bottom of the page and, correspondingly, towards the bottom of the code.

<!-- Footer Template CHANGE THIS LINK TO YOUR UNIT'S FOOTER FILE -->
<?php include("http://www.cof.orst.edu/Templates/unit/footer.inc");?>

Write your own include file based on this one.

You're done! Now just develop your content and upload the page if you're not working directly off your server.



You may direct comments to Websupport
Disclaimer