Friday, October 21, 2011

Web site redesign

In my quest to get my Applet talking to a commercially hosted MySQL database, I was forced to update my knowledge of a number of related areas, including HTML. Coincidentally, I get a lot of spam telling me how dreary and old fashioned my MS Front page designed website is.

A school has asked for a private portal to the Applet, and I want the page to remain outside the main website navigation structure. I could just give them a form on a plain page. Or I could use the opportunity to play with HTML layouts and CSS.

My favorite tutorial site, W3schools, has a nice sample layout, similar to their own. I have adapted this with my own colors and text. I have also changed the behavior of links, so that they look more like surrounding test, except when they are hovered over. My HTML was as follows:

<html>
<head>
<title>Active Math Java Private Portal</title>
<style type="text/css">
a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:none;} /* selected link */
</style>
</head>
<body>
<div id="container" style="width:100%">
<div id="header" style="background-color:#151B8D">
<h1 style="margin-bottom:0;color=#FFFF00;">Rasch-ItemBank</h1>
<h3 style="margin-bottom:0;margin-top:0;color=#FFFF00;">A
<a href="http://www.interactived.com/softway.htm" style="color=#FFFF00;">
Softway</a> Open Source Project</h3>
<h3 style="margin-bottom:0;margin-top:0;color=#FFFF00;">Hosted by
<a href="http://java.net/projects" style="color=#FFFF00;">Java.net</a></h3>
</div>
<div id="menu" style="background-color:#82CAFA;height:400px;width:15%;float:left;">
<b>Menu</b><br />
<a href="http://www.interactived.com/softway.htm" style="color=#000000;">Home</a><br />
<a href="http://www.interactived.com/research.htm" style="color=#000000;">Research</a><br />
<a href="http://www.interactived.com/software.htm" style="color=#000000;">Software</a></div>
<div id="content" style="height:400px;width:85%;">
<h1 style="margin-bottom:0;text-align:center">Active Math Java</h1>
<h3 style="margin-bottom:0;margin-top:0;text-align:center">Private Portal</h3>
<h3 style="margin-bottom:0;margin-top:0;text-align:center">
The Blueridge School of Apalit, Inc.
</h3>
</div>
<div id="footer" style="background-color:#56A5EC;clear:both;text-align:center;">
Helping Children to Achieve their Potential</div>
</div>
</body>
</html>

And it came up as shown below:

The tutorial recommended using an external CSS style sheet, so as to facilitate site wide design changes. That's fine for colors and fonts, but a question running through my mind is how they achieve site wide menu changes. Their own source code betrays few secrets these days because it might have been generated with a script, although it certainly represents a thorough example of using the <div> tag.

I found the CSS tutorial a bit confusing when it came to classes, but part of the confusion arose because of my inability to type. Anyway, after some fiddling around, my CSS page looked like this:

a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:none;} /* selected link */

h1.top {margin-bottom:0;color=#FFFF00;}
h3.top {margin-bottom:0;margin-top:0;color=#FFFF00;}
a.top {color=#FFFF00;}

h1.main {margin-bottom:0;text-align:center;}
h3.main {margin-bottom:0;margin-top:0;text-align:center;}

a.menu {color=#000000;}

#header {background-color:#151B8D;}
#left {background-color:#82CAFA;height:400px;width:15%;float:left;}
#content {height:400px;width:85%;}
#footer {background-color:#56A5EC;clear:both;text-align:center;}

And the HTML became:

<html>
<head>
<title>Active Math Java Private Portal</title>
<link rel="stylesheet" type="text/css" href="pportal.css" />
</head>
<body>
<div id="container" style="width:100%">
<div id="header">
<h1 class="top">Rasch-ItemBank</h1>
<h3 class="top">A
<a class="top" href="http://www.interactived.com/softway.htm">
Softway</a> Open Source Project <br/>
Hosted by <a class="top" href="http://java.net/projects">Java.net</a>
</h3>
</div>
<div id="left">
<b>Menu</b><br />
<a class="menu" href="http://www.interactived.com/softway.htm">Home</a><br />
<a class="menu" href="http://www.interactived.com/research.htm">Research</a><br />
<a class="menu" href="http://www.interactived.com/software.htm">Software</a>
</div>
<div id="content" style="height:400px;width:85%;">
<h1 class="main">Active Math Java</h1>
<h3 class="main">Private Portal<br/>
The Blueridge School of Apalit, Inc.</h3>
</div>
<div id="footer">
Helping Children to Achieve their Potential</div>
</div>
</body>
</html>

And to my enormous surprise it ended up looking exactly the same as that produced by the single page as shown above.

No comments: