The process of style

List of pages

Home

Sample concept map

Concept maps -

Generic concept map

Venn Diagram

Chemical Elements Concept Map

The Process

Browser conflicts with CSS (Firefox vs. IE6)

Annotated file list

Annotated Resources

The concept maps presented here, the concept definition map and the Venn diagram, have a semi-rigid structure that dovetail nicely with the tools at hand: HTML, CSS, and (very little) ASP.

HTML can process images and text and display them in a web browser. When the ability to do this first appeared with the Mosaic browser, that was deemed extremely cool. HTML is not very fancy in its placement of these elements; it is a useful tool for disseminating graphical information to an audience far-flung across the globe. However, as the web becomes more the domain of the commercial graphic artist and less so of computer scientists, the design elements become more important. Cascading Style Sheets (CSS) help fill the gap, by separating content from style, and giving more control over stylistic elements such as borders, text properties, and positioned elements.

I wanted students to be able to dynamically create their own concept maps. Without intense programming skills such as Java or C#, I knew that the overall structure would be rigid, but at least the content of each box could be dynamic. A simple form provides the input, which is passed to an Active Server Page (ASP). On the server, ASP processes the output, and sends the output file to the browser as HTML. These are simply equivalent to a series of beginning programmer's "Hello World!" scripts, nothing fancy:

response.write("<span id=""namebox"">"& studentname & "</span><p></p>")

The CSS then processes the position, font-style, and other attributes to generate the final output.