Language:	DE	EN	NL
	\| Print \| Sitemap \|

Porting an existing HTML Template

You are here: Advanced Docu > Designer Guide > Porting an existing HTML Template

- | Designer Guide | >> Adding Template Functions

Everybody who is able to create a HTML website will be able to create or modify a template for Website Baker. The required steps are explained on basis of an traditional 3-column HTML/CSS template.

HTML template from Maxdesign
HTML structure (index.html)
External style sheet (screen.css)
External web resources

HTML template from Maxdesign

The basic HTML template is based on the float tutorial provided by Maxdesign. The template consists of a header, 2 menues, one content and one news column and a footer. The file index.html defines the template structure and contains the dummy text and dummy links. The file screen.css contains the styles used for the HTML tags, as well as the alignment of the <div> elements. Both files are text files and can be edited with any texteditor like Notepad, nedit or vi.

The step by step guide below shows the steps to convert a conventional 3-column CSS based layout into a Website Baker template. Some basic knowledge of HTML and CSS is required. Check out the numerous resources in the web to refresh your HTML and CSS knowledge if required.

HTML structure

The structure of the 3-column template is contained in the index.html file and consists of HTML tags, dummy text and some links embedded in lists.
HTML MARKUP (index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <!-- 
     ** BASIS LAYOUT FROM http://css.maxdesign.com.au/floatutorial
     ** TEMPLATE TUTORIAL (c) 2007 C. Sommer for http://websitebaker.org
    -->
    <title>3-col CSS Template based on a template provided by Maxdesign</title>

    <!-- meta tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="short description of the pages content" />
    <meta name="keywords" content="keywords for searche engines" />

    <!-- link external stylesheet -->
    <link rel="stylesheet" type="text/css" href="screen.css" />
</head>

<body>
<div id="container">
    <!-- header -->
    <div id="banner">
        <h1>Website Title</h1>
    </div>

    <!-- top navigation (important links) -->
    <div id="navigation1">
        <ul>
            <li><a href="#">Disclaimer</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
    </div>

    <!-- main navigation -->
    <div id="navigation2">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Section A</a></li>
            <li><a href="#">Section B</a></li>
         </ul>
    </div>

    <!-- column for news -->
    <div id="news">
        <h3>Latest news:</h3>
        <p>Place holder for the latest news...</p>
    </div>

    <!-- column for main content -->
    <div id="content">
        <h2>Home</h2>
        <p>Place holder for the main content...</p>
    </div>

    <!-- footer with copyright infos -->
    <div id="footer">
        <p>(c) 2007 C. Sommer, for the websitebaker.org help project</p>
    </div>
</div>
</body>
</html>

Viewing the index.html file without the external styles defined in screen.css looks not very professional at all. All elements contained in the index.html file are displayed according it´s hierachy in the index.html from top to bottom. The result is shown below.

index.html without external stylesheets

Look of the template without the external Cascading Style Sheet file screen.css

External style sheet

The image above will be shown, when the screen.css file is missing, or the visitor has disabled CSS in it´s browser. The layout and positioning of the elements contained in index.html file are defined by the external style sheet screen.css.

EXTERNAL CSS STYLE SHEET (screen.css)

/**
* DESIGN AND LAYOUT TAKEN OVER FROM http://css.maxdesign.com.au/floatutorial
* THANKS FOR THAT GREAT TUTORIAL
* TEMPLATE TUTORIAL (c) 2007 by C. Sommer (doc) for http://websitebaker.org
*/

/* SET DEFAULT VALUES FOR ALL HTML ELEMENTS */
* { 
 margin: 0; 
 padding: 0;
}

/* LIGHTBLUE BACKGROUND COLOR */
html, body { background-color: #CDE; }

/****************************************************************
* FOLLOWING DIV TAGS DEFINE POSITION, SIZE AND LAYOUT
* BANNER, TOP AND MAIN MENUE, CONTENT, NEWS, FOOTER
****************************************************************/
#container {
 width: 90%;
 margin: 10px auto;
 background-color: #fff;
 color: #333;
 border: 1px solid gray;
 line-height: 130%;
}

#banner {
 padding: .5em;
 background-color: #ddd;
 border-bottom: 1px solid gray;
}

#navigation1 {
 background-color: #000;
 height: 20px;
 padding: 5px 0.5em;
}

#navigation2 {
 float: left;
 width: 160px;
 padding: 1em;
}

#news {
 float: right;
 width: 160px;
 padding: 1em;
}

#content {
 margin-left: 200px;
 border-left: 1px solid gray;
 margin-right: 200px;
 border-right: 1px solid gray;
 padding: 1em;
 max-width: 36em;
}

#footer {
 clear: both;
 padding: .5em;
 color: #333;
 background-color: #ddd;
 border-top: 1px solid gray;
}

/**************************************************************************
* FOLLOWING CSS STYLES DEFINE LAYOUT OF THE TOP MENUE (DISCLAIMER, CONTACT)
* POSITION, NO LIST SYMBOLS, COLOR
***************************************************************************/
#navigation1 ul li {
display: block;
}

#navigation1 ul li a {
color: #adf;
float: right;
font-size: 85%;
font-weight: 700;
text-decoration: none;
padding: 0 1em;
}

#navigation1 ul li a.aktiv,#navigation1 ul li a:hover,
#navigation1 ul li a:active {
color: #fff;
padding: 0 1em;
}

/**************************************************************************
* FOLLOWING CSS STYLES DEFINE LAYOUT OF THE MAIN MENUE
* POSITION, NO LIST SYMBOLS, COLOR, PADDING
**************************************************************************/
#navigation2 p, #news p { margin: 0 0 1em 0; }

#navigation2 ul li {
display: block;
}

#navigation2 ul li a {
color: red;
text-decoration: none;
padding: 0 1em;
}

#navigation2 ul li a.active,#navigation2 ul li a:hover,
#navigation2 ul li a:active {
text-decoration: underline;
}

#content h2 { margin: 0 0 .5em 0; }

Viewing the index.html file together with the external style sheet definiton of screen.css results in the output shown below.

index.html with external style sheet

Look of the template with the external Cascading Style Sheet file screen.css

The styles contained in screen.css control the apearance of the index.html file. CSS can be used to position div elements, style format links... As this tutorial focuses on the creation of a Website Baker template, the layout is kept as simple as possible. By the combination of CSS and images, one could achieve almost every design one can think of. How does the following design looks to you?

Template Andreas01 from the Add-ons Repository

The template Andreas01 available on the Add-ons Repository

The layout shown above is also based on CSS. The dummy text and menu entries were replaced by the Website Baker tags which extract the contents from the database. How this works is shown in the next chapter. The template shown above can be found on the Add-Ons Repository.

External web resources

It is not the aim of this tutorial to provide information about CSS and HTML. If you want to learn more about CSS and HTML, search the web for resources. A lot of books are available which cover the aspects of website layout in detail. The following links provide addtional resources for the self-study.

Copyright (c) 2007 Website Baker Help team
Text and images of this page are licensed under a Creative Commons Attribution-NonCommercial-No Derivative 3.0 Licence. You are free to copy and distribute this work for noncommercial purposes as long as no changes are applied and this copyright notice and a backlink to http://help.websitebaker.org are provided.