d. Stylesheet
Now, we need to add styles to the text to the website. We can even replace the div styles with a style we write in the stylesheet to cut back on the loading time of the website slightly.
What is CSS? CSS stands for Cascading Style Sheet The stylesheet allows you to create styles the can be called on in several parts of your website without needing to re-write commands multiple times. For example, if I want the heading of each paragraph be a certain size and be a certain color, rather than using the tag <font size=”3″ color=”#FFCCCC”> every time you have a heading, you can just create a style in the stylesheet with those properties and call on the style each time. so let’s create a stylesheet. Just make a txt file with the extension .css. I always use style.css just to make things simple. This is what my stylesheet looks like:
body {
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
p {
padding: 5px 10px 5px 10px;
color: #CCCCCC;
font-size: 12px;
}
.ptitle {
color: #76b6d1;
font-size:16px;
font-stretch:extra-expanded;
}
.bhead {
color: #76b6d1;
font-size:16px;
font-stretch:extra-expanded;
font-variant:small-caps;
}
a:hover{
color:#CCCCCC;
text-decoration: none;
}
a {
color:#FFFFFF;
text-decoration: underline;
}
Then in the head of my document I’m going to include the following code:
<link href="style.css" rel="stylesheet" type="text/css" />
that way my stylesheet is attached to the document and all of the styles in there apply to the document. I’m going to include the same html in all of my pages in my website. so in the stylesheet, the P is for the paragraphs, the A, a:hover, and a:visited are all for the link styles. and the .ptitle and .bhead are for the blockhead and page title. I’m going to assign those to the text in my document by putting class=”ptitle” in my <p> tags. So I’ll code the text and put in my flash menu and this is how my final code looks:
<table cellpadding="0" cellspacing="0" bgcolor="#333333">
<tr height="51">
<td colspan="5" background="tm.jpg"><div style="background: url(tr.jpg) no-repeat top right; width: 100%;"><img src="tl.jpg" /></div></td>
</tr>
<tr height="20">
<td rowspan="3" background="lm.jpg" width="76" height="550" valign="top"><div style="background: url(lb.jpg) no-repeat bottom left; height: 100%;"><img src="lt.jpg" /></div></td>
<td colspan="3" ><p class="ptitle"><strong>Page Name Here</strong></p></td>
<td rowspan="3" background="rm.jpg" width="77" height="550" valign="top"><div style="background: url(rb.jpg) no-repeat bottom right; height: 100%;"><img src="rt.jpg" /></div></td>
</tr>
<tr>
<td colspan="3" align="center" ><img src="linepix.jpg" height="1" width="98%" /></td>
</tr>
<tr>
<td width="100%" valign="top"><p class="bhead">Page Content goes here</p><p>This is the first paragraph of my page and this is what all of the text for it looks like.</p><p align="center"><img src="linepix.jpg" height="1" width="98%" /></p><p class="bhead">Paragraph two</p><p>The content of my secont paragraph goes here and stuff</p><p align="center"><img src="linepix.jpg" height="1" width="98%" /></p></td>
<td><img src="linepix.jpg" height="490" width="1" /></td>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="500">
<param name="movie" value="needs/menu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="salign" value="lt" />
<embed src="needs/menu.swf" salign="lt" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="500"></embed>
</object></td>
</tr>
<tr height="60" >
<td colspan="5" background="bm.jpg"><div style="background: url(br.jpg) no-repeat bottom right; width: 100%"><img src="bl.jpg" /></div></td>
</tr>
</table>
Everything in the object tag is for the flash, don’t pay any attention to that, just look at the code for the table cells and things. I’ll talk more about how to make flash and use flash tags later. here’s the preview:
Congratulations, now you have successfully created your web page. Now, put the text in there that you want and name the file index.html and we’ll be off to the next step.