Page Content
Why?
I thought it was time to upgrade my web-site to make use of more modern technologies such as CSS. Unfortunately, my old copy of Dreamweaver could not cope with CSS so I could not make use of the handy templating feature which Dreamweaver offers. So I started to hack away using a simple editor - no problem!
But what about navigation? The Dreamweaver templates were really quite useful - I could separate the navigation from the content quite easily that way. So each time I copied the navigation code from one document to the next I knew that I was piling up trouble for myself as soon as I wanted to add an item to the navigation in the future.
Well, I certainly wasn't going to fork out €450 for the newest version of Dreamweaver just for my little web-site - I had already learnt that lesson and I knew there had to be a better way. There are a lot of good and free HTML editors out there but none of them seemed to do what I wanted. I guessed that XML was going to be the way to go.
Somehow I came across the web-site from Ilkka Rinne where he describes, fortunately in English, 'How To Maintain a Website Using XML, XSLT, ANT and CVS' which gave me the start I needed. Thanks Ilkka!
Using this code, I modified and extended it to fit in more with what I needed. I already had some experience of XML, Ant and CVS so it was a good opportunity to get to grips with XSLT which was fun - ok, it wasn't really.
I will now describe how to use my version of XML and XSLT for web-site maintenance. Feel free to use it and let me know how you get on!
The ingredients
You will need the following:
- pagetree.xml
- This contains the navigation structure and defines how the web pages link together.
- ???.xml
- Lots of pages for your web-site. Using a simple XML structure you can define the content of each web page.
- site.xsl
- A transformation file to convert the XML files into HTML. The pagetree.xml is used to generate the navigation areas and the content is taken from the XML file being processed.
- build.xml
- This ANT build file contains the rules for transforming XML to HTML, for copying files and creating ZIPs.
- Java etc.
- You can download the Java runtimes from Sun and ANT and Xalan (XSLT processor) from the Apache / Jakarta project
Getting started
A sample XML file
<?xml version="1.0" encoding="ISO-8859-1" ?>
<page title="Welcome" style="master" color="blue">
<id>makingOf</id>
<description>How this Web Site was created</description>
<author>pr</author>
<homepage>http://www.ramsden.de/</homepage>
<comments>my comment</comments>
<changed>last changed</changed>
<navigation file="stdnavi.xml" />
<content>
<section tag="About">About the Web-Site</section>
<Here comes lots of <kw>interesting</kw>
information about this web-site...>
</content>
</page>
This snippet can be converted into a complete web page which will display a splash section, main menu, page menu, current location, and content. A header will also be generated which contains useful information about this page including all keywords. The result will look similar to this:
Navigation tree file
The naviagtion menus are controlled by the pagetree.xml file. Each page which should be included in the navigation must be entered here and given a unique id. There is one node tag from which all other pages are descended. This would normally be the index page.
<tree site="MyWebSite" baseurl="http://www.ramsden.de"> <node id="home"> <name>Home</name> <description>Home page</description> <source>index.xml</source> <page>index.html</page> <node id="skills"> <name>Skills</name> <description>What skills do I have to offer</description> <source>skills.xml</source> <page>skills.html</page> <node id="cv.en"> ...
- tree
- The main tag. Contains information about the whole web-site.
- site
- The web-site name
- baseurl
- The URL of the top level of the web-site
- node
- Describes one page
- id
- A unique identifier for this page
- name
- The page name. Will be displayed in the navigation
- description
- A longer description of the page. Will appear in fly-over text
- source
- The location of the XML input file
- page
- The location of the HTML output file
Page structure
Every entry in the navigation refers to an XML file. This file will contain a number of the following tags. (@ = attribute, / = child, // = descendant)
- page
- Contains a web page.
- @title
- The title text
- @style
- The main style sheet for the page. Must be in /styles
- @color
- Optional. The color style for the page. Must be in /styles
- page/id
- The unique id for the page. Corresponds to the id in the navigation
- page/description
- Added to meta tag
- page/author
- Added to meta tag
- page/homepage
- Not currently used
- page/comments
- For your information
- page/changed
- Added to meta tag
- page/navigation
-
- @file
- Load navigation structure from file
- page/navigation/splash
- The main banner area. Contains 2 pieces of text.
- @part1
- First text
- @part2
- Second text
- page/navigation/topnavi
- Contains anything to go in the main menu area
- page/navigation/leftnavi
- Generates the page menu.
- page//whereami
- Displays path to current location in the location area.
- page/content
- This is where the page content is defined
- page/content/section
- A section header. This will appear in the
page menu.
- @tag
- Alternative text to be displayed in the page menu. Shorter perhaps