| Templates erstellen | >> Templatefunktionen einfügen

HTML-Vorlage konvertieren

Wer eine HTML-Seite gestalten kann, kann auch ein WBCE-Designvorlage erstellen oder ändern. Die dazu notwendigen Schritte werden anhand eines bestehenden 3-spaltigen HTML/CSS Designvorlage erläutert.

HTML-Vorlage von Maxdesign
HTML Grundgerüst (index.html)
Externes Stylesheet (screen.css)
Weiterführende Links
Fertige HTML-Templates als Grundlage

Designvorlage von Maxdesign

Die in diesem Tutorial verwendete HTML-Vorlage basiert auf dem Float-Tutorial von Maxdesign und verfügt über eine Kopfzeile, 2 Menüleisten, eine Inhalts- und Newsspalte, sowie eine Fußzeile. Am Ende kommt in etwa so etwas dabei heraus:

Die Datei index.html enthält das Grundgerüst des Templates sowie Texte und Links; die Datei screen.css enthält die Formatanweisungen wie Farbe, Ausrichtung und Größe der verwendeten Elemente. Da es sich um reine Textdateien handelt, genügt ein einfacher Texteditor (z.B. Notepad++), um diese zu erstellen.

Die nachfolgende Beschreibung erklärt die notwendigen Schritte, um ein bestehendes 3-spaltiges Layout in eine WBCE-taugliche Designvorlage zu verwandeln. Grundlegende HTML- und CSS-Kenntnisse werden vorausgesetzt und nicht weiter erläutert.

HTML-Grundgerüst

Das Grundgerüst unseres 3-spaltigen Layouts ist in der Datei index.html gespeichert und besteht lediglich aus HTML-Tags, Text und Verweisen. Die Texte und Menüs werden im endgültigen Template natürlich aus den von WBCE verwalteten Seiten und Inhalten erzeugt, wofür WBCE-spezifische Platzhalter zu ergänzen sind. Wie das geht, wird auf der nächsten Seite gezeigt.


  <!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>

Schaut man sich die index.html ohne die zugehörigen Formatierungen in der Datei screen.css an, sieht das Ergebnis recht entäuschend aus. Alle Elemente werden einfach entsprechend Ihrer Anordung in der Datei index.html nacheinander ausgegeben. Wir brauchen also noch ein:

Externes Stylesheet (CSS-Datei)


/**
* 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; }

So "durchgestylt", entspricht das Ergebnis schon eher den Erwartungen: Beispielseite anschauen

Weiterführende Links

Da es den Rahmen dieser Anleitung sprengen würde, die Möglichkeiten von CSS und HTML nur annähernd zu erklären und es zu diesen Themen bereits zahlreiche Informationen im Internet (und auch in Buchform) gibt, seien nachfolgende Quellen zum Selbststudium erwähnt. Wer sich ernsthaft mit der Gestaltung von Webseiten beschäftigen will, kommt um diese Pflichtlektüren ohnehin nicht herum.

Fertige HTML-Vorlagen als Grundlage

Eine Möglichkeit, vergleichsweise schnell zu ansehnlichen Ergebnissen zu kommen, ist die Verwendung fertiger HTML-Templates. Grundsätzlich gilt allerdings:

Je komplexer das Template, desto mehr Kenntnisse in HTML, CSS, JavaScript und PHP sind erforderlich, um daraus ein funktionierendes WBCE-Template zu erstellen.
Templates für Wordpress, Joomla & Co. lassen sich nicht einfach in WBCE-Templates konvertieren, da diese völlig anders aufgebaut sind - nicht nur die Syntax der CMS-Boliden ist eine ganz eigene Wissenschaft für sich, auch die Templates selbst bestehen aus unzähligen einzelnen PHP-Schnipseldateien, die einen in den Wahnsinn treiben können. Da ist es wirklich einfacher, auf der Grundlage von HTML-Seiten oder komplett bei Null zu beginnen.

Beachten Sie beim Download von Templates die folgenden Hinweise:

Bei kostenlosen Templates verlangt der Ersteller des Templates meist einen Quellenverweis in der Fußzeile und/oder im Impressum der Website, der nicht entfernt werden darf, da sonst extrem teure Abmahnungen und Schadenersatzforderungen drohen.
Denkbar ist auch, Kauf-Templates zu verwenden und anzupassen. Hier muss dann aber bedacht werden, dass die erworbene Lizenz möglicherweise nur für eine Website gilt, das Template also nicht auf mehreren Domains verwendet werden darf, ohne es entsprechend mehrfach zu erwerben.
Vorsicht vor rechtlichen Fallstricken und Kleingedrucktem! Prüfen Sie ganz genau, unter welcher Lizenz die Templatedateien stehen, und ob Sie z.B. darin verwendete Bilder einfach übernehmen können, oder diese durch eigenes Bildmaterial ersetzen müssen.
Ebenso besteht bei Downloads aus dem Internet IMMER die Gefahr, sich Viren, Würmer und Trojaner einzufangen! Laden Sie Templates nur aus vertrauenswürdigen Quellen herunter. Wenn Sie erst einen "Downloader" installieren müssten, LASSEN SIE DIE FINGER DAVON!