Campus Web Development Help

Two Column Template Code Retrieval

This template contains the official UW-RF web page header and footer. Your web site will be compliant with UW-River Falls standards when using this code as a foundation for your web pages.

Part 1 will cover creating the content
part 2 will cover creating the Server Side Include Page (SSI) for naviagation

Instructions (Print these page for ease of use)

Part 1: Creating the Content Template With Server Side Include Navigation Bar

Using Dreamweaver, Front Page or a text editor, save a blank document to the web server with the page name of your choice (e.g. File>Save, name doucment template.html).
Dreamweaver and Front Page users, go to HTML "code view" mode and remove any code from this page and then save the document again.
Return to this web page. With your cursor, select all of the HTML code in the table below.
From the menu bar at the top of this browser select Edit>Copy
Return to your web page editor.
IMPORTANT: Dreamweaver and Front Page users make sure you remain in HTML "code view" mode
From the menu bar select Edit>Paste or press Ctrl+V. The code from the window below will appear on the page. (Mac users depress the Apple key and the letter V at the same time to paste the code.)
Dreamweaver and Front Page users return to design mode.
Dreamweaver and Front page users will not see the header, footer or scripting until the page until the page is viewed with a Web browserwith actual URL
(e.g. http://www.uwrf.edu/mywebsite/template.html).

Get the code

Copy and paste the code below into your Web page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>UW-River Falls</title>

<link href="2style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" align="center" class="tableLayout">
<tr>
<td align="left" id="cell00">

</td>
<td id="cell000" align="right">

</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" class="tableLayout">
<tr>
<td align="left" id="cell01" width="150">
<a href="http://www.uwrf.edu/">
<img src="/images/00UWRFLogo3.gif" alt="UWRF Home" hspace="0" vspace="2" border="0">
</a>
</td>
<td id="cell02" align="right">
<div class="header-margin">

<a href="#">Department Name</a>
</div>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" class="tableLayout">
<tr>
<td id="cell03" valign="top" Width=20%>
<div class="master-margin">



</div>
</td>
<td id="cell04" valign="top" width=80%>
<div class="master-margin">

<div class="feature-box">
<h3>Feature</h3>
<p>Add feature content here</p>
</div>
<h2>Welcome </h2>
<p>Get the Code for this <a href="/webhelp/templates-2column-code.php">Template</a></p>

</div>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" class="tableLayout">
<tr>
<td id="cell05" align="left">
<div class="master-margin">

</div>
<td id="cell06" align="right">
<div class="master-margin">

</div>
</td>
</tr>
</table>
</body>

</html>

Part 2: Creating the Server Side Includes

More about Server Side Include Page (SSI)

Dreamweaver or Frontpage users:

Choose a new page HTML page.
Swith to "Code View"
Remove all of the existing code.
Switch to the Design view and type the name of the of office or deparment.
Save this document on the Web server as "nav.htm" in the same directory as template.html page.
The contents of this document will now appear on all pages that were generated with the template.

Contact the Web master for more information at 425-0661.

Part 3: Creating the Style Sheet

Using Dreamweaver, Front Page or a text editor, save a blank document to the web server or local drive with the page name of style.css
Dreamweaver and Front Page users, go to HTML "code view" mode and remove any code from this page and then save the document again.
Return to this web page. With your cursor, select all of the HTML code in the table below.
From the menu bar at the top of this browser select Edit>Copy
Return to your web page editor.
IMPORTANT: Dreamweaver and Front Page users make sure remain in HTML "code view" mode
From the menu bar select Edit>Paste or press Ctrl+V. The code from the window below will appear on the page. (Mac users depress the Apple key and the letter V at the same time to paste the code.)
In the root of the Web directory, SAVE DOCUMENT AS 2style.css

/* CSS Document */
body{
background-color:#cc0000;
background-image: url(/images/stripe-red.jpg);
background-repeat:repeat-x;
background-position:top;
margin-top:20px;
}

.tableLayout {
width:760px;
}

.master-margin {
margin-right:5px;
margin-left:10px;
}

.header-margin {
margin-right:20px;
margin-left:10px;
}

.highlight {
background-color:#FFFF00;
}

/*Begin Cell 00 Attributes and its Content Attributes*/
#cell00
{

}

/*Begin Cell 000 Attributes and its Content Attributes*/
#cell000
{

}

#cell000 A
{
color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size: 70%;
}

#cell000 A:hover
{
color: #cccccc;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
}

#cell000 A:visited
{
color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
}

/*Begin Cell 01 Attributes and its Content Attributes*/
#cell01
{
border:1px solid black;
border-left: 0px solid #000000;
border-top: 1px solid #000000;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
background-color:#000000;

}
/*Begin Cell 02 Attributes and its Content Attributes*/
#cell02
{
border:1px solid black;
border-left: 0px solid #000000;
border-top: 1px solid #000000;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
background-color:#000000;

}

#cell02 A
{
color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size: 250%;
font-weight:900;

}

#cell02 A:hover
{
color: #cccccc;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
}

#cell02 A:visited
{
color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
}

#cell03
{
border:1px solid black;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-right: 0px solid #000000;
border-bottom: 1px solid #000000;
background-color: #D2D2D2;
background-image: url(/images/00stripe-grey2.jpg);
background-repeat: repeat-x;
background-position:top;

}

#cell03 a{
color:#0000ff;
text-decoration: none;
}

#cell03 a:hover{
color:#cc0000;
text-decoration: none;
}

#cell03 A:visited{
color: #993366;
}

#cell03 h1{
font-size:130%;
font-family: Arial, Helvetica, sans-serif;
}

#cell03 h2{
font-size:110%;
font-family: Arial, Helvetica, sans-serif;
}

#cell03 h3{
font-size:90%;
font-family: Arial, Helvetica, sans-serif;
}

#cell03 p{
font-family: Arial, Helvetica, sans-serif;
font-size:70%;
margin-bottom:-5px;
}

#cell03 li{
padding: 0px;
margin-left: -10px;
font-size:70%;
line-height:110%;
font-family: Arial, Helvetica, sans-serif;
}

/*Begin Cell 04 Attributes and its Content Attributes*/

#cell04
{
border:1px solid black;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #ffffff;
margin-right:5px;
margin-left:10px;
}

#cell04 a{
text-decoration:none;
}

#cell04 a:hover{
color:#cc0000;
text-decoration: none;
}

#cell04 A:visited{
color: #993366;
}

#cell04 h1{
font-size:170%;
font-family: Arial, Helvetica, sans-serif;
}

#cell04 h2{
font-size:130%;
font-family: Arial, Helvetica, sans-serif;
}

#cell04 h3{
font-size:100%;
font-family: Arial, Helvetica, sans-serif;
}

#cell04 p{
font-size:80%;
line-height:110%;
font-family: Arial, Helvetica, sans-serif;
}

#cell04 li{
padding: 0px;
margin-left: -10px;
font-size:80%;
line-height:100%;
font-family: Arial, Helvetica, sans-serif;
}

/*Begin Cell 05 Attributes and its Content Attributes*/

#cell05
{
border:1px solid black;
border-left: 1px solid #000000;
border-top: 0px solid #cccccc;
border-right: 0px solid #000000;
border-bottom: 1px solid #000000;
background-color:#FFFFFF;
margin-right:10px;
margin-left:10px;

}

#cell05 a{
text-decoration:none;
}

#cell05 a:hover{
color:#cc0000;
text-decoration: none;
}

#cell05 A:visited{
color: #993366;
}

#cell05 h1{
font-size:170%;
font-family: Arial, Helvetica, sans-serif;
}

#cell05 h2{
font-size:130%;
font-family: Arial, Helvetica, sans-serif;
}

#cell05 h3{
font-size:100%;
font-family: Arial, Helvetica, sans-serif;
}

#cell05 p{
font-size:70%;
line-height:110%;
font-family: Arial, Helvetica, sans-serif;
}

#cell05 li{
padding: 0px;
margin-left: -10px;
font-size:70%;
line-height:100%;
font-family: Arial, Helvetica, sans-serif;
}

/*Begin Cell 06 Attributes and its Content Attributes*/

#cell06
{
border:1px solid black;
border-left: 0px solid #000000;
border-top: 0px solid #cccccc;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#FFFFFF;
margin-right:10px;
margin-left:10px;
}

#cell06 a{
text-decoration:none;
}

#cell06 a:hover{
color:#cc0000;
text-decoration: none;
}

#cell06 A:visited{
color: #993366;
}

#cell06 h1{
font-size:170%;
font-family: Arial, Helvetica, sans-serif;
}

#cell06 h2{
font-size:130%;
font-family: Arial, Helvetica, sans-serif;
}

#cell06 h3{
font-size:100%;
font-family: Arial, Helvetica, sans-serif;
}

#cell06 p{
font-size:70%;
line-height:110%;
font-family: Arial, Helvetica, sans-serif;
}

#cell06 li{
padding: 0px;
margin-left: -10px;
font-size:70%;
line-height:100%;
font-family: Arial, Helvetica, sans-serif;
}

/*Feature box for highlighting content. Justified right with text wrap*/
.feature-box {
width:35%;
float:right;
clear:right;
border:1px solid #cccccc;
background-color:#FFFFCC;
margin:10px;
padding:5px;

}

.feature-box p{
font-size:80%;
}

.feature-box h3{
font-size:80%;
}

You may now proceed.

Your template is in place. You may now add pages and content as you wish. Before adding photos please review this information: About Web Photos

You may make adjustments to the style sheet to change font faces and color, page layout formatting and more. Review your software features for more details.

Essentials

Resources