Seeing Results

Now look at how all this comes together to produce the site's pages. Figure 17.10 shows the completed home page with both the background header image and block content in place.

Figure 17.10. Home page with content.

Figure 17.11 displays the similar layout used for Pagesetter articles.

Figure 17.11. Subpage with content.

Notice how the title of the article includes a navigation link back to the site's home page. This was accomplished through the template system included with Pagesetter. The additional code was placed to the left of the title variable call, so it automatically appears with every article without the need for additional changes to the global templates. The template code looks like this:

 <br /> <div ><a href="/">Home</a> <b>»</b> <!--[$Title]--></div> <!--[$Content[$core.page]]--><br /> <!--[$core.printThis]--> | <!--[$core.sendThis]--> | Hits: $hitCount$ 

It's also possible to take this design much further with more complex block layouts. The div areas coded for this example all utilized absolute positioning, but floating the content can create an even more fluid design.

Another design idea that can help a site like this is to add additional images purely for accent. Create transparent images that can sit on or by content. Set a higher z-index for the images and they will overlap the regular site content. Take a look at this additional code for the home page:

 <div style="position:absolute; left:200px; top:300px; z-index:15;"><img src="/books/1/160/1/html/2/{image- path}accent1.gif" style="width:57px; height:54px;" /></div> <div style="position:absolute; left:440px; top:420px; z-index:15;"><img src="/books/1/160/1/html/2/{image- path}accent2.gif" style="width:50px; height:56px;" /></div> 

These two divs define the display of little starfish accent images on the home page. When this code is added to the site, the home page is changed to look like Figure 17.12.

Figure 17.12. Accenting your site with images.

The images can help fill whitespace areas as well as break up text-heavy areas on a page. Whatever your site, just remember the greatest limitation you'll encounter is your own imagination. Decide what design you want to use, and then find the best way to code it into shape. Odds are you'll have many ways to code the single design, no matter how complex it might be.