Web templates

Templates

Building

Building a web site

Customize templates

Once you've downloaded the template source code, you'll need to customize it. All-caps comments in the source code will guide you in adapting the code. Here's more information about sections of the code that need to be customized.

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

You should have moved the style sheet "isu.css" to your web space. Change the URL to point to the style sheet.

<!--

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 the source 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 just for your site, change it accordingly. To avoid confusion with the all-university search, label your own 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 need headings on links, delete the "linkhead" line.

Below the left navigation links

<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

<!--

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>

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

</div>

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

</h2>

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.