project
- summary
- tutorial (2) (3)
(4) (5) (6) (7) (8) (9)
- usage (2)
technical
- reasoning
- two passes
- still tiny
- sitemaps
- variables
- accessibility
WAI SubSects
examples
- horizontal
- vertical
- tabbed (2)
- multi section
- printer style
links
- some hints
- faq&issues
- all features #
- about me
- our sitemap
- download
(C) 2004-04-22
Guido Draheim
Vertical Navigation Bar
<html><head><title>common title prefix <!--$title?--></title>
<style>
a:link { text-decoration : none ; color : #000080 ; }
a:visited { text-decoration : none ; color : #200060 ; }
.navlist { background-color : #E0F0FF ; width : 9em ; }
H3 { text-align : right ; }
</style>
</head><body>
<table cellspacing="0" cellpadding="4" width="100%">
<tr valign="top"><td class="navlist" >
<center><em><!--$selected--></em></center>
<hr><a href="index.html">Overview</a>
<br>-<a href="intro.html">Introduction</a>
<br>-<a href="where.html">Related Work</a>
<hr><a href="examples.html">Examples</a>
<br>-<a href="loremipsum.html">Lorem Ipsum</a>
<br>-<a href="nietzsche.html">Nietzsche</a>
<hr><a href="impressum.html">Impressum</a>
<br><a href="site.html">sitemap</a>
</td><td>
</td></tr></table></body></html>
The vertical navigation bar consists of a
<table width=100%> definition
with a left <td width="140"> column
containing the navigation items. The background color
of that column is set to light-blue by means of a css
class=navlist.
The title is set in the first line after which DC.meta information will be implanted. There is an explicit href to the sitemap that is generated from the meta information from other files - so the "site.htm" file is the sitefile containing the ~head~ source while ~body~ is generated which gets written to the output "site.html". This is different from other htm->html transformations.
As a technical note: the mksite.sh script will generate a ~head~ sed that cuts away the line containing "</body>". Then ~head~ and ~body~ are executed and a final third execution is run that will only append one line to the output html being simply the one line containing "</body>" in the sitefile. Therefore it is possible to write a fairly complex outer decoration for the body page in the middle.
| - | common title prefix - lorem ipsum | - |
|
Overview -Introduction -Related Work Examples -Lorem Ipsum -Nietzsche Impressum sitemap |
Lorem Ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. |