Setting up a Domino database to serve web pages
The first thing I usually do when I create a site with Domino is setting up the launch page. My preferred choice is using a dummy navigator, usually named nLaunch with a corresponding $$NavigatorTemplate.
The $$NavigatorTemplate form
Uncheck "Include in menu" to avoid this form showing in the Create menu of the Notes Client.
In the "advanced" tab, select the correct Content type and Character set. Setting Content type to HTML prevents Domino from rendering its own HTML. Setting the Character set to UTF-8 is the preferred option to make sure non-ANSI characters are rendered correctly.
Next thing to do is to copy/paste the HTML skeleton I prepared in my HTML editor:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>FantaScene</title>
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="fscene.css" />
</head><body><div id="canvas">
<div id="signature"><b>FantaScene </b>Making scenery for fantasy games</div>
<div id="content">
<h1>Lorem ipsum dolor sit amet</h1>
<p>[content]</p>
</div>
<div id="related">[related]</div>
<ul id="nav">
<li class="on"><a href="">Blog</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Elsewhere</a></li>
<li><a href="">About</a></li>
</ul>
<div id="legal">Copyright © 2007 - Michel Van der Meiren - <a href="">Disclaimer</a></div>
</div></body></html>
This homepage will later contain an embedded view with the latest blog entries and the secondary navigation. For now, it is just a test page. I will put the CSS in first.
I got style
This morning I also decided on the presentation. Since the site will be about my 'dark' hobby, making scenery for fantasy wargames and fantasy adventure games, a dark style it will be. The colors are based on the picture I use as background for the header: a wizards desk, lit by candles.
When building a standalone website, you can put the stylesheet in a page element. Make sure it is rendered with content-type text/css or Firefox will not recognise it. One of the nice things of using a page element to hold an external stylesheet: any image needed can be put in as an image resouce and referenced with its filename only.
/* fantascene */
body,#nav,h1,p{margin:0;padding:0}
body{background:#504634}
body{font-family:verdana,sans-serif;font-size:12px;color:#231F14}
#canvas{margin:auto;width:800px;background:#ECBF7A;position:relative}
#signature{height:100px;padding:0 10px;background:#231F14 url(wizardsroom.jpg) top right no-repeat;color:#ECBF7A;letter-spacing:0.1ex}
#signature b{display:block;font-size:42px;font-family:serif;font-style:italic;color:#ff9;letter-spacing:0}
#nav{list-style:none;position:absolute;left:0;top:82px}
#nav li{float:left}
#nav a{display:block;margin-left:10px;padding:2px 10px;text-decoration:none;background:#504634;color:#ff9}
#nav .on a{background:#ECBF7A;color:#231F14}
#content{padding:10px;border-right:solid 200px #6B5B41;min-height:400px}
#related{position:absolute;left:600px;top:100px;width:180px;
padding:10px;color:#ECBF7A}
h1{font-family:serif;font-style:italic;font-size:32px;line-height:32px;color:#504634;margin-bottom:10px}
p{margin-bottom:10px}
#legal{background:#231F14;color:#ECBF7A;text-align:center;font-size:10px;padding:2px}
#legal a{color:#ff9;text-decoration:none}
#legal a:hover{text-decoration:underline}
/* IE6 min-height hack */
* html #content{height:400px}
To have the darker background of the related column run across the entire page, I used a trick: this color is actually a 200px wide border of the content span. The related div and the top navigation: their HTML sits beneath the main content but rendered higher in the page by absolute positioning them. One hack was inevitable: min-height is not supported in IE6, so you have to set the heigth, but only for IE6.
So far, so good
Here is the link to the website in its current state. Next step: making all pages render with the same template and making a navigation system.
Comments
To add a comment, log in or register as new user. It's free and safe.