Campus Web Development Help

One 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 address aquiring the style sheet. The style sheet determines the background color of the page, the font style, text indentations, etc.
Part 3 covers adjusting the the styles in the style sheet, adding photos, and changing content.

Instructions (Print these page for ease of use)

Part 1: Creating the Content Template

Using Dreamweaver, Front Page or a text editor, save a blank document to the web server or local drive with the page name of your choice (e.g. File>Save 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 or Office </a>

</div>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="center" class="tableLayout">
<tr>
<td id="cell04" valign="top" width=100%>
<div class="master-margin">

<div class="feature-box">
<h3>Feature</h3>
<p>Feature forthcoming</p>
</div>
<h2>Welcome</h2>
<p>Get the Code for this <a href="/webhelp/templates-1column-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 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 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 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.)
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