I started to investigate the use of CSS and DHTML - it looked a brilliant technology. The result was the Byers Writings - a series of pages that contain either my words of wisdom - or - my ramblings !!
It seemed like a good idea that one of the pages should tell you how it was all done.
BUT
Remember, you need to know about HTMLscript and JavaScript, otherwise you will not
understand anything and simply make your head hurt.
AND
Remember, this only works with Internet Explorer Version 5 + (and maybe Netscape browser
Version 6 +).
First each page uses an HTM file - sortof template based - each new one can be created quickly from the previous one. They are fairly minimal - all of the formatting is done in a seperate file called DEFAULT.CSS. Any change to style is done by modifying the CSS file - such changes are straight away reflected in all of the pages that refer to it.
The pages also refer to three JavaScript files - HEADER.JS, FOOTER.JS and FINDDOM.JS. When any of these functions need changes, such changes are reflected in all of the pages
The boxes below symbolically show the files - if you put the mouse on any of the boxes and click they will expand to a size that makes them readable. To make them small again, double click on the box
I have just been given a link to a page that shows how various browsers deal with CSS elements here it is http://www.webreview.com/style/css1/charts/mastergrid.shtml
<html>
<head>
<link rel="stylesheet" href="default.css">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<META name="keywords" content="How did I, Rogerthorpe, Rogerthorpe Manor,
Peter Byers, Byers, Writings, Byers Writings, IBRUs">
<META name="description" content="Technical Books owned by Peter Byers">
<META name="robots" content="index,follow">
<META name="rating" content="general">
<META name="generator" content="PFE">
<META name="author" content="Peter Byers">
<META name="copyright" content="This page and all its contents are copyright
2001 by Peter Byers. All Rights Reserved.">
<SCRIPT src="FINDDOM.js"></SCRIPT>
<SCRIPT><!--
function setClass(objectID,newClass) {
var dom = findDOM(objectID,0);
dom.className = newClass;
}
// -->
</SCRIPT>
<title>THIS PAGE</title>
<script>
title = 'THIS PAGE';
subTitle= 'How it is constructed and how does it work';
teaser = 'Imaginative use of CSS and DHTML - it seems like Object Oriented internet code'
dDate = '8th'
mDate = 'November'
yDate = '2001'
CreateDate = '8th November 2001'
ModifiedDate = '8th Novemder 2001'
</script>
</head>
<body>
<div id="content">
<script src="header.js"></script>
<!-- Begin Content -->
<div id="main_text">
<p>
I started to investigate the use of CSS and DHTML - it looked a brilliant technology.
The result was the <SPAN class=question>Byers Writings</SPAN> - a series of pages that
contain either my words of wisdom - or - my ramblings !!
</p>
It seemed like a good idea that one of the pages should tell you how it was all done.
<p>
</p>
First each page uses an HTM file - sortof template based - each new one can be created
quickly from the previous one. They are fairly minimal - all of the formatting is done
in a seperate file called DEFAULT.CSS. Any change to style is done by modifying the CSS
file - such changes are straight away reflected in all of the pages that refer to it.
<p>
The pages also refer to three JavaScript files - HEADER.JS, FOOTER.JS and FINDDOM.JS.
When any of these functions need changes, such changes are reflected in all of the
pages
</p>
<p>
The boxes below symbolically show the files - if you put the mouse on any of the boxes
they will expand to a size that makes them readable.
</p>
<p>
<SPAN class=copyTiny id=mainHTM
onclick="setClass('mainHTM','copyHuge');setClass('innerHTM','huge');"
onmouseout="setClass('mainHTM','copyTiny');setClass('innerHTM','tiny');">
<table BORDER=3 COLS=1 WIDTH="100%" BGCOLOR="#FFFF99" >
<tr>
<th bgcolor=white><b><center>The Main HTM file</center></b></th>
</tr>
<tr>
<td><b>
<SPAN class=tiny id=innerHTM>
The code for this page goes here
AND
there are four other identical (or very similar) for the other four files !!
</SPAN>
</b></td>
</tr>
</table>
</SPAN>
</p>
</div>
<!-- End Content -->
<script src="footer.js"></script>
<BR><BR>
<img src="http://www.sst-counters.co.uk/counter1.asp?c_id=C233211">
<BR><BR><HR>
</div>
</body>
</html>
body {
background: white url(byers-writings.jpg) no-repeat;
word-spacing: 1px;
}
#content {
background: #ffffcc;
text-align: justify;
font-family: arial, helvetica, geneva, sans-serif;
position: relative;
top: 100px;
left: 90px;
width: 480px }
#main_text {
background: #ffffcc;
text-align: justify;
font-family: arial, helvetica, geneva, sans-serif;
font: italic bold }
.dropCap {
font: 300%/100% serif;
color: #999999;
margin-right: -3px;
}
.bigRed {
font: 250% serif;
color: #FF0000;
}
.copyright {
color: #555;
font-size: 10px;
font-family: Arial, Helvetica, Geneva, sans-serif
}
.question { color: blue;
font: italic small-caps bold "minion web Georgia", "Times New Roman", Times, serif; }
.copyTiny {
COLOR: black; FONT-SIZE: 4px; POSITION: relative; WIDTH: 150px; HEIGHT: 150PX
}
.copyHuge {
COLOR: red; FONT-SIZE: 24px; POSITION: relative; WIDTH: 480px
}
.tiny {
COLOR: red; FONT-SIZE: 4px; POSITION: relative
}
.huge {
COLOR: black; FONT-SIZE: 18px; POSITION: relative
}
.hugePre {
COLOR: black; FONT-SIZE: 10px; POSITION: relative
}
document.writeln('<br><hr><br clear="all">')
document.writeln('<span class="copyright">')
document.writeln('<BR><b>Title:</b> ' + self.document.title)
document.writeln('<BR><b>Created:</b> ' + (CreateDate))
document.writeln('<BR><b>Modified:</b> ' + (ModifiedDate))
document.writeln('<BR><b>URL:</b> <a href="' + self.location + '">' + self.location + '</a>' )
document.writeln('<BR><a href="copyright.htm">Copyright ©</a> 2001 <A HREF="mailto:pb@sst-ltd.co.uk">Peter Byers</A>. All rights reserved.' )
document.writeln('</span>')
document.writeln ('<h1>')
document.writeln (title)
document.writeln ('</h1>')
document.writeln ('<h3>')
document.writeln (subTitle)
document.writeln ('</h3>')
document.writeln ('<i>')
document.writeln (teaser)
document.writeln ('</i><br><br> <span style="font: 10pt arial">')
document.writeln (dDate + ' ' + mDate + ' ' + yDate)
document.writeln ('</span>')
document.writeln ('<BR><HR><BR>')
var isDHTML = 0;
var isID = 0;
var isAll = 0;
var isLayers = 0;
if (document.getElementById) {isID = 1; isDHTML = 1;}
else {
if (document.all) {isAll = 1; isDHTML = 1;}
else {
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}
}}
function findDOM(objectID,withStyle) {
if (withStyle == 1) {
if (isID) { return (document.getElementById(objectID).style) ; }
else {
if (isAll) { return (document.all[objectID].style); }
else {
if (isLayers) { return (document.layers[objectID]); }
};}
}
else {
if (isID) { return (document.getElementById(objectID)) ; }
else {
if (isAll) { return (document.all[objectID]); }
else {
if (isLayers) { return (document.layers[objectID]); }
};}
}
}