Iowa State University

Iowa State University

ISU Web Guide

Adapt the source copy

Download the code

Copy the source code from web page template you've selected. (Take care not to cut off lines on the right side of the page.) Download the code into a text editor (such as Windows Notepad or TextEdit on Mac) or an HTML editor. You can use MS Word, if you save as your work as "text only with linebreaks."

Comments denote change areas

All-caps comments in the source code will guide you in adapting your code.

Title

<title>University Relations: Iowa State University</title>

This is the title that appears in the uppermost section of the browser window. A descriptive title is best. Use something like: "Agronomy Department: Iowa State University" or "Visitor Attractions: Iowa State University."

Style sheets

<style type="text/css">

<!--

h2 { font-size: 130%; }

.update { border: 1px solid black; }

-- >

</style>

It's best to leave the basic style sheet, "isu.css," alone. If you are comfortable with CSS (Cascading Style Sheets), you may want to add more styles to your pages by linking to a second style sheet of your own making. If you just have a few style additions for a specific page, there's a spot near the top of code to insert them. In the example at right, the added styles are in red.

Meta description, keywords

These meta tags are used by search engines. For meta "description," add a brief description of what's on the web page. For meta "keywords," put comma-separated key words and phrases that describe page content.

Contact, phone, search

Customize with your unit's e-mail or phone links. The search in the template currently searches the entire ISU web site. If you have a search for your site, change it accordingly. To avoid confusion with the all-university search, label your search with your unit name -- for example, "LAS search."

Page title

This title, which goes in the <h1> </h1> section, appears just below the red banner on your page. Most titles will be something like "Department of Agronomy," or "University Relations." Just above the page title is an optional subtitle. It goes between the <h3> </h3>. A common use of the subtitle might be to associate a college with a department. The college would go in the subtitle and the department in the main title. If you don't need a subtitle, delete it or comment it out.

Left navigation links

Add your basic navigation links to this section. If you don't heading on the links, delete the "linkhead" line.

Below the left navigation links

<div class="maintext">

<h3>Headline</h3>

<p>Dolor odio nostrud elit. </p>

</div>

You may wish to put other copy below the lined links in the left column. If so, enclose it in a "maintext" division. This division automatically sets fonts and margins.

Add a highlight

<td id="hilite">

<!--

<div id="hilite2">

highlight copy

</div>

-->

</td>

Most templates have a "highlight" section in the lower left corner of the far right column. (It's the one with the verticle khaki bar on the left side.) You may not want a highlight, but don't remove the "hilite" section in the code. First, it will create an HTML table error, and second, you may want to add a highlight some day. Instead of removing it, just "comment out" part of the highlight as shown in red at right.

Headline on red bar

<td>

<div class="maintext">

<p>Normal text, with margins</p>

</div>

<h2 class="bar">

<a href="">Headline on red bar</a>

</h2>

<div class="maintext">

Normal text, with margins.

</div>

If you want a white headline on a red bar, such as that used on the "News, announcements" section of the students' page, here's what the code would look like. The headline must NOT be inside a "maintext" division, or it won't extend to the ends of the column. So you close the "maintext" div before the red bar headline and you reopen the "maintext" div after the headline.

Footer: Contact info and copyright

Customize the footer information. Be sure to include a mail address, e-mail address and phone number for your unit.