| <!-- This tutorial is brought to you by www.texaswebdevelopers.com It will instruct you in CSS, table layouts, horizontal row and vertical column liquid design, meta tags, SSI includes for navigation, javascripting for image preloading and the Netscape resize fix, and much more. It is the example we give our begining interns to show them page layout and design. We are happy to provide it for you to learn from. For other examples of code please see: www.texaswebdevelopers.com/examples/ -->
<!-- This is a comment tag. It is invisible to the user viewing the page with a browser but visible in the source code. As you can see. LOL. LOL means Laughing Out Loud. -->
<!-- The doctype goes on the first line of every page -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- The title should also contain a web site description for better indexing by the search engines -->
<title>Graphics Layout Tutorial - Provided by TexasWebDevelopers.com a Dallas, Texas Web Site design and development company</title>
<!-- Notice the META tags below. These should be on every page of the site but with keywords that are relevant to the page content. The keywords should also be worked into the site text. Leave off the revisit tag if the site content does not change very often. The classification tag must correspond to true index classifications. It is also suggested to apply for a Safe Surf rating tag.-->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<META NAME="MSSmartTagsPreventParsing" CONTENT="TRUE">
<META NAME=subject CONTENT=" ">
<META NAME=keywords CONTENT=" ">
<META NAME=description CONTENT="TexasWebDevelopers.com is a Dallas, Texas Web Site design and development company.">
<META NAME=language CONTENT="en-us">
<META NAME=robots CONTENT=ALL>
<META NAME=rating CONTENT="SAFE FOR KIDS">
<META NAME=distribution CONTENT=GLOBAL>
<META NAME=classification CONTENT=" ">
<META NAME=copyright CONTENT="copyright 2004 by your.com">
<META NAME=author CONTENT="your.com">
<META NAME="revisit-after" CONTENT="30 Days">
<META HTTP-EQUIV="reply-to" CONTENT="info@your.com">
<META NAME="GENERATOR" CONTENT="www.texaswebdevelopers.com">
<!-- Now this is a sweet piece of work. It is a REL tag. It is used to RELATE items in a web page like paragraphs to a chapter and chapters to a book. We are using it here to relate the web page named "graphics_layout_SourceCode.asp" in the Docs folder to the Print button in the browser. If the user presses his browsers Print button this specially formatted web page containing the source code you see here will print out. You can use any type of document here: and html file, word doc, acrobat PDF file, text file, etc. -->
<link rel=alternate media=print href="Docs/graphics_layout_SourceCode.asp">
<!-- Begin stylesheet--this should be moved into an external css file--styles are really not a big mystery. You can take any tag and create a style that tells the browser how to render it. You can even invent your own styles to apply to a variety of different situations. Here is the important part, if you do not specify the page color and the font face and font color and font size then the users browser will display the page using the settings the user has chosen and set in his browser. This can ruin an otherwise good web site. We are using styles in this example and applying them to the body to make the background white and the margins zero. Also notice we have set the default font to Arial and the size to 100 percent. All fonts should be set as percentages and NOT pixels or ems. In this way they can be proportionally resized by the user and also conform to the ADA recommendations for useability. We have applied different styles to the hyperlinks to make them change color on mouseover. We have created different style classes and applied them to the table rows (and containers) 3, 4 and 5 as an example of how to apply classes to other tags. Notice we have changed the font size and type in those rows. If the user resizes the fonts they will PROPORTIONATELY get larger or smaller while always maintaing their size relationship to each other. As a furthur note, the style class "dotstyle" simply colors the small dots used in the top horizontal navigation and the style class "tdborder" creates the thin red dotted border around the content area.-->
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #333333;
}
a {
font-size: 80%;
font-weight: bold;
color: #FFFF99;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
.dotstyle {
color: #FFFF99
}
.copyright {
font-size: 70%;
color: #336699;
font-weight: bold;
}
.tdborder {
border: thin dotted #990000
}
.footer a {
font-size: 75%;
color: #000066;
font-weight: bold;
text-decoration: none;
}
.footer a:hover {
text-decoration: none;
color: #990000;
}
.trthree {
color: #000066;
font-size: 120%;
}
.tdfour {
font-family: "Times New Roman", Times, serif;
font-size: 100%;
}
.trfive {
font-size: 80%;
}
li {
font-size: 90%;
color: #333333;
}
-->
</style>
<!-- End stylesheet -->
<!-- Begin standard Macromedia Netscape resize fix for older browsers -->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<!-- End Netscape resize fix -->
<!-- Begin simple javascript to sniff out old Netscape browsers when the PRINT PAGE hyperlink is used -->
<script>
function printWindow(){
bV = parseInt(navigator.appVersion)
if (bV >= 4) window.print()
}
</script>
<!-- End Print Page script -->
<!-- Begin image preload script. This script forces all of the images to pre-load prior to rendering the page. The effect is to make the images of the page appear to load all at once, rather than bits at a time. The numbers in parenthesis are the image width and height. They are optional. Understand that web pages load from the inside out and the top down. Those items inside the innermost nested table will render first and after the tables are rendered the site renders from the top down. You have the ability to somewhat manage the way the page first appears to the user. -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
image1 = new Image(729,125);
image1.src = "images/graphics_layout/graphics_layout_r1_c1.gif";
image2 = new Image();
image2.src = "images/graphics_layout/graphics_layout_r1_c3.gif";
image3 = new Image(94,235);
image3.src = "images/graphics_layout/graphics_layout_r2_c1.gif";
image4 = new Image();
image4.src = "images/graphics_layout/graphics_layout_r3_c1.gif";
image5 = new Image(729,57);
image5.src = "images/graphics_layout/graphics_layout_r4_c1.gif";
// End -->
</script>
<!-- End image pre-load script -->
</head>
<body>
<!-- These spacer gifs hold the table cells open horizontally in the correct lengths. Notice that the sum of the horizontal elements is 780 px. Our recommendations are to design for 800x600 monitor resolutions and a canvas of 779 px by 434 px. -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="The_Whole_Website_Table">
<tr>
<td><img src="images/graphics_layout/spacer.gif" width="94" height="1" border="0" alt=""></td>
<td><img src="images/graphics_layout/spacer.gif" width="635" height="1" border="0" alt=""></td>
<td><img src="images/graphics_layout/spacer.gif" width="23" height="1" border="0" alt=""></td>
<td><img src="images/graphics_layout/spacer.gif" width="27" height="1" border="0" alt=""></td>
<td><img src="images/graphics_layout/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td colspan="4" background="images/graphics_layout/graphics_layout_r1_c3.gif">
<!-- This layer should hold an include page named "TopNav.asp" that contains the hyperlinks for the top navigation. Notice the hyperlink that is really a javascript. It prints the page. But wait, it doesn't print the visible page...it prints the related page (or REL) we created named "graphics_layout_SourceCode.asp" which is referenced in the HEAD tag -->
<div id="horizontalNav" class="dotstyle" style="position:absolute; width:508px; height:25px; z-index:1; left: 200px; top: 20px;">• <a href="#">Link One</a> • <a href="#">Link Two</a> • <a href="#">Link Three</a> • <a href="#">Link Four</a> • <a href="#">Link Five</a> • <a href="javascript:printWindow()">Print Source Code</a> •</div>
<!-- This layer should hold an include page named "LeftNav.asp that contains the hyperlinks for the left navigation -->
<div id="VerticalNav" style="position:absolute; width:75px; height:40px; z-index:1; left: 5px; top: 175px;">
<a href="#">Link One</a><br><br>
<a href="#">Link Two</a><br><br>
<a href="#">Link Three</a><br><br>
<a href="#">Link Four</a><br><br>
<a href="#">Link Five</a><br><br>
<a href="#">Link Six</a>
</div>
<img name="graphics_layout_r1_c1" src="images/graphics_layout/graphics_layout_r1_c1.gif" width="729" height="125" border="0" alt=""></td>
<td><img src="images/graphics_layout/spacer.gif" width="1" height="125" border="0" alt=""></td>
</tr>
<tr>
<td width="94" align="left" valign="top" background="images/graphics_layout/graphics_layout_r3_c1.gif"><img name="graphics_layout_r2_c1" src="images/graphics_layout/graphics_layout_r2_c1.gif" width="94" height="235" border="0" alt=""></td>
<!-- There are a few bits of html that you need to recognize. The first is the TR tag which creates a table row. The next is the TD tag which creates a table container or cell. Notice that we have nested the table named Content_Table inside the larger table named The_Whole_Website_Table. We placed the table named Content_Table inside a cell or table container and assigned a style class called tdborder to the table container in the tag below. It is this CSS style that creates the little red dotted line you see in the Design View.-->
<td class="tdborder" colspan="3" rowspan="2" valign="top">
<!-- Begin Individual page content - set in a table named Content_Table whose width is 100 percent. -->
<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0" id="Content_table">
<tr>
<td>
<!-- We have used the block level DIV tag to align this little bit of ASP code to the right. ASP stands for Active Server Pages and is the code that make web page have their magic interactivity with Microsoft Access or Microsoft SqlServer databases. ASP code is always enclosed between the carat and percentages symbols. Browsers fetch pages from the server when the user requests it by typing in a URL or clicking on a hyperlink to a page. If the host server parses (runs) ASP code then the code is executed after the page is requested by the browser and then the page is sent to the user. ASP code is thusly always invisible to the user--only the RESULTS of the ASP code are rendered to the page. Microsoft servers parse ASP. Unix/Linux servers can parse ASP but must have other server software installed like Chilisoft. Unix/Linux have their own programming language called PHP and it interfaces with MySql databases. Viewing the source of this page you will see the date/time but not the ASP code. The ASP code used here for displaying the date and time is at the bottom of the page. Notice that we are requesting the date and time from the server and not from your PC's clock. -->
<div align="right"><%=now%></div><br>
<!-- Notice the use of the strong tag around the words "heavily commented" instead of the B or bold tag. This is used because it causes an up-lilt in the verbal readers for the sight impaired. Use this tag when an emphasis is required in the sentence as if you were reading it aloud. Visually, as you can see, it renders as bold text. -->
<B>Tutorial web page example. It is </B><strong>heavily commented </strong><B>in the source code. <br>
"View Source" to save or use your browser's print button to print the source code!</B>
<!-- Here we have another tag that is good to know, the LI tag. Use it to make a list and create the dot in front of the listed item. -->
<li> This tutorial is brought to you by www.texaswebdevelopers.com It will instruct you in CSS, table layouts, horizontal row and vertical column liquid design, meta tags, SSI includes for navigation, javascripting for image preloading, the Netscape resize fix, and much more. It is the example we give our begining interns to show them page layout and design. We are happy to provide it for you to learn from.</li>
<li>Generally we'd move the CSS to it's own file and use include pages inside the layers for the navigation. The simple code for an include page is this:
<textarea name="Include_Code" cols="40" rows="1" id="Include_Code"><!-- #include file="header.asp" --></textarea>
The included page need not contain anything other than content -- no other tags are necessary --(<html><head><title></title></head><body></body></html>) since they are already in the page to which content is being included.</li>
<li>I have forced the page length with the additional table rows in order to show how the background image "graphics_layout_r3_c1.gif" expands and contracts within the left column. Drag the lower right edge of the browser window to see the top horizontal background image "graphics_layout_r1_c3.gif" expand and contract with the browser window size. </li>
<li>Total Page Size: 31K bytes; Total Graphics: 13K bytes - 5 images; HTML (lots of comments) 18K bytes; Load time: 6.40 Seconds at 56K dial up modem</li>
<li>Below is an example of an image hyperlink that opens a new browser window. </li></td>
</tr>
<!-- Here are the usual table row and table container tags. They are explained in more detail further down. -->
<tr>
<td>
<!-- Below is an image that is also a hyperlink. Notice the target is set to _blank. This is what tells the browser to open a new window. Other targets can be _self, _top, etc. Notice that we've set the border attribute to zero to prevent the dreaded little blue line that will appear around the image if you fail to do this. Also notice the alt tag is properly describing the image to comply with the American Disability Act (ADA) requirements. -->
<a href="http://www.texaswebdevelopers.com" target="_blank"><img src="../images/texaswebdevelopers.gif" alt="TexasWebDevelopers.com Image Link to the Home page" width="200" height="68" border="0"></a>
</td>
</tr>
<tr class="trthree">
<td >Table Row 3</td>
</tr>
<tr>
<td class="tdfour">Table Row 4</td>
</tr>
<tr class="trfive">
<td >Table Row 5</td>
</tr>
<!-- Here we have an example of the use of a textarea tag to allow your users to copy code from the page without any formatting attached. Did you ever notice how code pasted into the HTML view and code pasted as TEXT look different in the HTML view? This is how the ASP code used at the top of the page looks before it is parsed at the server and displayed as the date/time by the browser. -->
<tr>
<td ><li>ASP code for the current Date and Time on the Server:</li>
<textarea name="ASP_Code" cols="20" rows="1" id="ASP_code"><%=now()%></textarea>
</td>
</tr>
<tr>
<td >
</td>
</tr>
<!-- This empty table row is visible to IE users because it is held open by a non-breaking space--the   html code. Older Netscape users won't see the table row. Older Netscape browsers want the empty table containers to be held open with something more substantial--usually with a one pixel by one pixel transparent spacer.gif -->
<tr>
<td bgcolor="#F4F4F4"> </td>
</tr>
</table>
<!-- End Individual Page Content -->
</td>
<td><img src="images/graphics_layout/spacer.gif" width="1" height="235" border="0" alt=""></td>
</tr>
<tr>
<td width="94" align="left" valign="top" background="images/graphics_layout/graphics_layout_r3_c1.gif"> </td>
<td><img src="images/graphics_layout/spacer.gif" width="1" height="17" border="0" alt=""></td>
</tr>
<tr>
<td colspan="4" align="left" valign="top"><img name="graphics_layout_r4_c1" src="images/graphics_layout/graphics_layout_r4_c1.gif" width="729" height="57" border="0" alt=""></td>
<td><img src="images/graphics_layout/spacer.gif" width="1" height="57" border="0" alt=""></td>
</tr>
<!-- This table row below should contain an include file named footer.asp that contains the hyperlinks and copyright script -->
<tr>
<td colspan="4" class="footer">
<div align="center">• <a href="#"> Home</a> • <a href="#">About</a> • <a href="#">Contact Us </a>• <a href="#">Help</a> • <a href="#">Terms of Service</a> • <a href="#">Privacy Policy</a> • <a href="#">Email Policy</a> • <a href="#">Hosting</a> • <a href="#">Links</a> • <br>
<!-- The span tag below sets the CSS style for the copyright script. Here is a bit more html for you to recognize. The DIV and the SPAN tags. The SPAN tag is an awsome tool. It can give structure and content to any bit of in-line content in a document. It inherently does NOT have specific connotations attached to it so you are free to give unique meaning to each particular SPAN element by virtue of its attribute settings and nested content. In this case, we have assigned a Style class named "copyright" to everything in between the opening and closing SPAN tag. The DIV tag serves the identical purpose as the SPAN tag except it gives structure and content to any block-level content in a document while the SPAN tag is used in-line. -->
<span class="copyright">
<!-- Begin javascript that automatically updates the copyright date on January 1 each year -->
<script language = 'JavaScript'>
<!--
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
var today = new Date();
var year = y2k(today.getYear());
document.write('© 2003-'+year+' your.com All rights reserved');
//-->
</script>
<!-- End copyright script -->
<!-- Notice the closing tags for all of the elements of the page below. We have take the liberty of creating spaces between lines of code for easier reading. In actual web publishing the white spaces need to be minimized as they add to the load time. As a final comment for novice web builders on the use of the Paragraph tag P and the line break tag BR. In most WYSIWYG (What You See Is What You Get) web editors like Macromedia's DreamWeaver and Microsoft's Front page hitting the ENTER key creates a paragraph tag which results in a double line space and hitting CTRL + ENTER will create the line break that creates a single line space. What is more important is the knowledge that the paragraph P tags carry their own style and any text accidently enclosed in P tags will NOT utilize the style settings used in the BODY tags. So refrain from using the P tags for double spacing. Use two BR tags instead. -->
</span>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- We hope you have enjoyed this detailed tour of a simple web page. Good luck in all of your web building experiences. www.TexasWebDevelopers.com --> |