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.

Comments

Post a Comment

Popular posts from this blog

A few notes on JavaScript

I am one the 99% of the world who has long nursed the misconception that JavaScript has something to do with Java. And why not? The name sort of implies it. It was only after I searched without success on the Java Tutorial site for some mention of JavaScript that I stumbled across the knowledge that JavaScript was in fact developed by Netscape, under the name LiveScript. Armed with that knowledge, it is not surprising to find the best reference information on Mozilla site. According to Wikipedia , the nonsensical name choice had something to do with Netscape wanting to cash in on the popularity and cachet of Java, and Sun wanting support for Java technology in the then popular Netscape browser. For a while only the Netscape family of browsers supported JavaScript. Microsoft later produced what it calls JScript to run in its browser. JScript is similar but not identical to Javascript. According to Foldoc JavaScript runs a hundred times slower than C , and ten
Read more

Forum Comments on Java Applets

It is so long since I last posted on the once was Sun/Java now is Oracle developer forum my account seems to have been ditched. While I wait to have it resurrected I've done a little searching in the Java Database Connectivity (JDBC) forum using the search term "Applet". My first search, using the default 3 month period, yielded nothing. No one had posted anything about or even mentioned Applets in the last three months. So either they are very easy to use and work very well, so hardly anyone has any problems with them, or maybe ... not very many people use them at all. My stomach was beginning to churn a bit, when I extended the search period to the current year - and with good reason. Somebody, a little bit like me I think, had written a game in an applet, and wanted to record top scores in a database. He described his connection problem in this thread , and the first reply began: Doing JDBC calls from an Applet is such a bad idea that I am glad y
Read more

Creating a Custom Swing Component

Image
I always return to my blog when I'm stuck, and I'm stuck right now. I want to create a custom Swing component. Specifically, I want something like a JProgressBar , with the following changes: In place of a flat Foreground color, I want a rainbow spectrum, showing only the red range for low Values, and the whole spectrum for values close to the Maximum value; Instead of a rectangular box, I want the progress "bar" to take the shape of a normal, or Gaussian, distribution curve; I want progress to be displayed by the area under the curve, rather than by a simple linear scale along the x axis. It's not that there isn't stuff out there. I have five tabs open in my browser, specifically addressing the creation of custom components in Swing, as well as the source code for the JProgressBar . It is that, like everything to do with Java, it is bloody difficult to read. I shall begin from the horse's mouth as it were, with an article on the Java
Read more