Iedereen die een HTML website kan maken zal ook een bestaande template kunnen aanpassen voor WebsiteBaker. De stappen die hiervoor nodig zijn worden uitgelegd aan de hand van een traditionele drie-koloms HTML/CSS template.

HTML template van Maxdesign

De basis HTML template is gebaseerd op de float tutorial gemaakt door Maxdesign. Het template bestaat uit een header, 2 menu's, een kolom met inhoud en een met nieuws en een footer. Het bestand index.html bepaald de sturctuur van het template en bevat voorbeeld tekst en voorbeeld links. Het bestand screen.css bevat de stijlen voor de HTML elementen en de uitlijning van de <div> elementen. Beide bestanden zijn text-bestanden en kunnen worden gewijzigd met een text-editor, zoals Notepad, nedit of vi.

De volgende beschrijving bevat de stappen die nodig zijn om een conventionele, 3-koloms, CSS gebaseerde layout om te zetten in een WebsiteBaker template. Enige basiskennis van HTML en CSS is hiervoor wel nodig. Kijk ook eens naar de talloze bronnen op het web om uw HTML en CSS kennis op te frissen, indien nodig.

HTML structuur

De structuur van de 3-koloms template staat in het bestand index.html en bevat HTML tags, voorbeeld-tekst en een aantal links in opsommingen (lists).
HTML OPMAAK (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-spaltiges CSS Template mit Kopf- und Fusszeile</title>
 
    <!-- Meta tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Kurzbeschreibung der Webseiteninhalte" />
    <meta name="keywords" content="Schlüsselwörter, Schlagwörter" />
 
    <!-- Externes Stylesheet einbinden -->
    <link rel="stylesheet" type="text/css" href="screen.css" />
</head>
 
<body>
<div id="container">
    <!-- Banner -->
    <div id="banner">
        <h1>Webseiten Titel</h1>
    </div>
 
    <!-- Navigationsmenü 1 (wichtige Links)-->
    <div id="navigation1">
        <ul>
            <li><a href="#">Impressum</a></li>
            <li><a href="#">Kontakt</a></li>
         </ul>
    </div>
 
    <!-- Navigationsmenü 2 (Hauptnavigation)-->
    <div id="navigation2">
        <ul>
            <li><a href="#">Startseite</a></li>
            <li><a href="#">Rubrik 1</a></li>
            <li><a href="#">Rubrik 2</a></li>
         </ul>
    </div>
 
    <!-- Spalte für neueste Nachrichten-->
    <div id="news">
        <h3>Letzte Meldungen:</h3>
        <p>Die neuesten Nachrichten kommen hier hin...</p>
    </div>
 
    <!-- Spalte für den Hauptinhalt -->
    <div id="inhalt">
        <h2>Startseite</h2>
        <p>Der Hauptseiteninhalt kommt hier hin...</p>
    </div>
 
    <!-- Fusszeile für Copytrighinformationen -->
    <div id="fusszeile">
        <p>(c) 2007 C. Sommer, for the WebsiteBaker.org help project</p>
    </div>
</div>
</body>
</html>

Als men het bestand index.html bekijkt zonder de externe stijlen, gedefinieerd in screen.css, ziet dit niet erg proffesioneel uit. Alle elementen in het bestand index.html worden getoond volgens hun hiërarchie in de index.html van boven naar beneden. Het resultaat ziet er als volgt uit.

index.html zonder externe stylesheets

Het template zonder het external Cascading Style Sheet bestand screen.css

Externe style sheet

Bovenstaande afbeelding wordt getoond als het bestand screen.css mist of als de bezoeker CSS uitgeschakeld heeft in zijn browser. De layout en plaatsing van de elementen in het bestand index.html worden bepaald door de externe style sheet screen.css.

EXTERNE 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
*/
 
/* DEFINIERTE STARTWERTE FÜR ALLE HTML-ELEMENTE */
* { 
 margin: 0; 
 padding: 0;
}
 
/* HELLBLAUER HINTERGRUND FÜR DIE BROWSERSEITE */
html, body { background-color: #CDE; }
 
/****************************************************************
* NACHFOLGENDE DIV TAGS LEGEN DAS AUSSEHEN DER WEBSEITE FEST
* BANNER, 2 x NAVIGATION, INHALT MITTE, NEWS RECHTS, FUSSZEILE
****************************************************************/
#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;
}
 
#inhalt {
 margin-left: 200px;
 border-left: 1px solid gray;
 margin-right: 200px;
 border-right: 1px solid gray;
 padding: 1em;
 max-width: 36em;
}
 
#fusszeile {
 clear: both;
 padding: .5em;
 color: #333;
 background-color: #ddd;
 border-top: 1px solid gray;
}
 
/**************************************************************************
* NACHFOLGENDE CSS ANWEISUNGEN DIENEN DER FORMATIERUNG DES OBEREN MENÜS
* AUSRICHTUNG, KEINE LISTENSYMBOLE, AKTIVE ELEMENTE IN WEISSER SCHRIFT
***************************************************************************/
#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;
}
 
/**************************************************************************
* NACHFOLGENDE CSS ANWEISUNGEN DIENEN DER FORMATIERUNG DES HAUPTMENÜS
* KEINE LISTENSYMBOLE, ABSTÄNDE ZU DEN RÄNDERN
**************************************************************************/
#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.aktiv,#navigation2 ul li a:hover,
#navigation2 ul li a:active {
text-decoration: underline;
}
 
#inhalt h2 { margin: 0 0 .5em 0; }

Als men het bestand index.html samen met de externe stylesheet defenitie van screen.css bekijkt, ziet het er als volgt uit.

index.html met de externe style sheet

Het template met het externe Cascading Style Sheet bestand screen.css

De stijlen in screen.css bepalen het uiterlijk van het bestand index.html. CSS kan gebruikt worden om div elementen te positioneren, stijlen op links toe te passen... Omdat deze gids met name toespitst op het aanmaken van een WebsiteBaker template, wordt de layout zo simpel mogelijk gehouden. Door een combinatie van CSS en afbeeldingen kan men elk ontwerp bereiken waar men zoal aan kan denken. Hoe ziet het volgend ontwerp er uit?

Template Andreas01 van de Add-ons Repository

De template Andreas01 beschikbaar op de Add-ons Repository

De layout hierboven is ook gebaseerd op CSS. De voorbeeld-tekst en menu-opties zijn vervangen door de WebsiteBaker tags welke de inhoud uit de database halen. Hoe dit werkt wordt uitgelegd in het volgende hoofdstuk. Het bovenstaande template kan gevonden worden in de Add-Ons Repository.

Externe bronnen op het web

Het is niet de bedoeling van deze gids om informatie te bieden over CSS en HTML. Als U meer wilt leren over CSS en HTML, kunt U op het web bronnen vinden. Er zijn ook heel wat boeken beschikbaar die de aspecten van website layout tot in detail behandelen. De volgende links bieden extra bronnen voor de zelf-studie.