Baumstrukturmodus | Linearer Modus

**PHeyer** · (Dieser Beitrag wurde zuletzt bearbeitet: 14.10.2008 09:41 von PHeyer.)

Dieses Tutorial beschreibt ausführlich, wie Sie eine Website mit individuellem Design für das WEBCOMpro CMS entwickeln. Die hier aufgeführten Schritte setzen Grundkenntnisse in Webtechnologien wie HTML und CSS voraus. Das Tutorial zeigt Ihnen einen Weg auf, der nicht unbedingt der bequemste ist, dafür aber einen tieferen Einblick vermitteln soll. Da WEBCOMpro sehr flexibel ist, lässt sich vieles auch leichter oder anders bewerkstelligen.

Schritt 1: Installation und Einrichtung

Nachdem ich über die Webverwaltungssoftware (Confixx) ein neues Kundenweb angelegt habe, installiere ich das WEBCOMpro CMS mit Hilfe der Setuproutine. Während die Dateien übertragen werden, lege ich schon mal eine leere MySQL-Datenbank an. Sobald die Installation vollständig ist, aktiviere ich das WEBCOMpro CMS und trage unter Datenbank / Verbindung einrichten die MySQL-Verbindungsdaten ein. Die Software ist nun fertig eingerichtet.

Schritt 2: Anlegen der Basisvorlage

Um Webseiten mit dem WEBCOMpro CMS erstellen zu können, benötige ich zunächst eine Basisvorlage, die das gewünschte Webdesign, die Navigation, usw. festlegt. Unter Vorlagen / Neu trage ich dazu "Standard" als Namen ein und aktiviere die Option Basisvorlage.

An dieser Stelle ist es auch möglich, eine HTML-Datei, die man z.B. mit einem WYSIWYG-Editor erstellt hat, von der Festplatte hochzuladen oder den Quelltext einer bestehenden Webseite über deren Webadresse auszulesen, wenn es z.B. darum geht, diese zukünftig mit dem WEBCOMpro CMS zu pflegen. Ich persönlich bevorzuge es, die Vorlagen für neue Websites manuell im Quelltext zu erstellen und beschreibe diesen Vorgang im weiteren.

Im lasse mir nun den Quelltext der Vorlage anzeigen und klicke rechts unter Tools auf Basis-Seitengerüst.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<WCP:head/>

<meta name="robots" content="index, follow">

</head>

<body><WCP:control/>

<WCP:template id="tp1"/>

</body>

</html>

Schritt 3: Umsetzung des Webdesigns

Vom Grafiker habe ich eine Grafikdatei erhalten, die das gewünschte Webdesign des Kunden festlegt:

[Bild: tutorial1.jpg]

Meine Aufgabe ist es nun, dieses möglichst originalgetreu und technisch optimal umzusetzen.

Zuerst zerlege ich die Grafik mit Hilfe einer Bildbearbeitungssoftware und speichere benötigte Grafikelemente als webfähige Grafikdateien ab:

[Bild: tutorial2.jpg]

Dann erweitere ich die Vorlage um die notwendigen Layoutelemente. Dazu verwende ich folgendes Schema:

[Bild: tutorial3.jpg]

#div_head ... Container für Kopfbereich
#div_animation ... Logo-Animation (sich drehender Globus)
#div_image ... Bildleiste (durch Anwender einsetzbar)
#div_shortcut ... Shortcut-Leiste für besondere Verweise (Impressum, AGB, Login)
#div_title ... Titel der angezeigten Seite
#div_body ... Container für Körperbereich
#div_menu ... Site-Navigation
#div_content ... Seiteninhalte
#div_foot ... Fusszeile (Top-Button)

Zusätzlich fasse ich die Struktur in einen Rahmenblock, den ich mit #div_page auszeichne und u.a. zur Zentrierung verwende.

Im Quelltext sieht das so aus:

Code:

<div id="div_page">

  <div id="div_head">

    <div id="div_animation"></div>

    <div id="div_image"></div>

    <div id="div_shortcut"></div>

    <div id="div_title"></div>

  </div>

  <div id="div_body">

    <div id="div_menu"></div>

    <div id="div_content">

      <WCP:template id="tp1"/>

      <div id="div_foot"></div>

    </div>

  </div>

</div>

Um diese Elemente nun mittels CSS zu positionieren, öffne ich Dateien in einem neuen Fenster (Icon anklicken) und lege über Datei erstellen eine neue Datei im Hauptverzeichnis an, die ich "custom.css" nenne. Diese binde ich in die Vorlage ein:

Code:

<link rel="stylesheet" type="text/css" href="custom.css">

Die neu angelegte "custom.css" nutze ich ausschließlich, um das Erscheinungsbild der Elemente innerhalb der Basisvorlage festzulegen. Alle globalen Styles, z.B. für Überschriften, Fließtext, Tabellen, Links, usw. sind bereits unter {root}/data/stylesheet.css vordefiniert, so dass ich daran i.d.R. nur noch ein paar Anpassungen vornehmen muss.

Für die Grafikdateien, die ich in der Basisvorlage verwende, erstelle ich über Dateien / Ordner erstellen einen Ordner "image". Dorthin lade ich zunächst meine Hintergrundgrafiken "head.jpg" und "menu.jpg" hoch.

Nachdem ich die verschiedenen Bereiche mit CSS positioniert, die Abstände gesetzt und die Hintergrundbilder eingebunden habe, sieht die Vorlage im Browser so aus:

[Bild: tutorial4.jpg]

Als nächstes binde ich die Animation des Globus im Logo ein. Dazu habe ich vom Grafiker eine fertige Flash-Datei "stylized_earth-rot.swf" vorliegen, die ich über Dateien in den Ordner "anim" hochlade, den ich vorher erstelle.

Die Einbindung ist schnell erledigt:

Code:

<div id="div_animation">

  <object data="anim/stylized_earth-rot.swf"

          type="application/x-shockwave-flash"

          width="48"

          height="48">

    <param name="movie" value="anim/stylized_earth-rot.swf">

  </object></div>

Dadurch, dass ich die Animation auf die Hintergrundgrafik gesetzt habe, wird der statische Globus angezeigt, wenn kein Player dafür verfügbar ist.

Um die Bildleiste überschreibbar zu machen, wird diese mit einem zunächst transparenten Bereich (<div id="div_image"></div>)überdeckt. Darin wird das Element <WCP:image/> in entsprechender Größe platziert. Dies erlaubt es dem Anwender auf Dokumentebene eine alternative Grafik auszuwählen, welche dann die Bildleiste komplett überdeckt. Wird keine Grafik gesetzt, bleibt das Hintergrundbild sichtbar.

Code:

<div id="div_image">

  <WCP:image id="i1" width="919" height="83"/></div>

Nun müssen die statischen Verweise in der Shortcut-Leiste gesetzt werden:

Code:

<div id="div_shortcut">

  <a href="impressum.php<?php echo(x(wcp_param()));?>">Impressum</a> -

  <a href="agb.php<?php echo(x(wcp_param()));?>">AGB</a> -

  <a href="login.php<?php echo(x(wcp_param()));?>">Login</a></div>

Die Dateinamen sind frei gewählt und müssen später entsprechend gesetzt werden. Weiter unten wird eine passende Möglichkeit dazu gezeigt.

Der PHP-Code <?php echo(x(wcp_param()));?> sorgt über die Funktion wcp_param() dafür, dass Variablen, die WEBCOMpro oder ein integriertes Modul gesetzt haben, als Querystring ausgegeben werden. Z.B. wird auf diese Weise der gewählte Bearbeitungsmodus weitergegeben, wenn man seine Inhalte beim Surfen bearbeitet. Die Funktion x() stellt dabei lediglich ein Kürzel für die native PHP-Funktion htmlspecialchars() dar.

Jetzt muss ich dafür sorgen, dass der Seitentitel an der vom Grafiker bestimmten Stelle angezeigt wird. Und zwar möchte ich, dass der für das Dokument vorgegebene Titel dafür benutzt wird, der Anwender aber auf Dokumentebene die Möglichkeit hat, etwas anderes an der Stelle einzugeben.

Dies erreiche ich mit Konditionalblöcken:

Code:

<div id="div_title">

  <h1>

    <WCP:cblock idref="t1"><WCP:text id="t1"/></WCP:cblock>

    <WCP:calt idref="t1">

<?php

$mysql = new mysql();

echo(x($mysql->get(WCP_CONTENT_INDEX,

                   WCP_DB_CONTENT_TITLE,

                   WCP_DB_CONTENT,

                   WCP_DB_CONTENT_INDEX)));

?>

    </WCP:calt>

  </h1></div>

Im Alternativblock wird der Seitentitel mit PHP aus der Datenbank ausgelesen und angezeigt. Die Klasse mysql ist Teil der WEBCOMpro-API.

Die Vorlage hat nun in der Editoransicht diesen Stand erreicht:

[Bild: tutorial5.jpg]

Im Dokumentfuß soll noch ein Button, mit dem man an die oberste Dokumentposition zurückspringen kann, stehen. Die Grafik dazu schneide ich aus der Designvorgabe aus, speichere diese als "top.gif" und lade Sie in den "image"-Ordner hoch.

Der erforderliche HTML-Code ist simpel:

Code:

<div id="div_foot">

  <a href="<?php echo(x(WCP_ACTIVE_URL . wcp_param()));?>#top">

    <img src="image/top.gif" alt="Top"> Top</a></div>

WCP_ACTIVE_URL ist eine Konstante, welche die aktuelle Seitenadresse enthält, wcp_param() wurde weiter oben bereits erklärt.

Es fehlt noch die Sprungmarke:

Code:

<div id="div_page">

  <a id="top"></a>

  ...

Der gesamte Quelltext der Basisvorlage sieht nun so aus:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<WCP:head title="LAGERKEHRAUS - %s"/>

<meta name="robots" content="index, follow">

<link rel="stylesheet" type="text/css" href="custom.css">

</head>

<body><WCP:control/>

<div id="div_page">

  <a id="top"></a>

  <div id="div_head">

    <div id="div_animation">

      <object data="anim/stylized_earth-rot.swf"

              type="application/x-shockwave-flash"

              width="48"

              height="48">

        <param name="movie" value="anim/stylized_earth-rot.swf">

      </object></div>

    <div id="div_image">

      <WCP:image id="i1" width="919" height="83"/></div>

    <div id="div_shortcut">

      <a href="impressum.php<?php echo(x(wcp_param()));?>">Impressum</a> -

      <a href="agb.php<?php echo(x(wcp_param()));?>">AGB</a> -

      <a href="login.php<?php echo(x(wcp_param()));?>">Login</a></div>

    <div id="div_title">

      <h1>

        <WCP:cblock idref="t1"><WCP:text id="t1"/></WCP:cblock>

        <WCP:calt idref="t1">

<?php

$mysql = new mysql();

echo(x($mysql->get(WCP_CONTENT_INDEX,

                   WCP_DB_CONTENT_TITLE,

                   WCP_DB_CONTENT,

                   WCP_DB_CONTENT_INDEX)));

?>

        </WCP:calt>

      </h1></div>

  </div>

  <div id="div_body">

    <div id="div_menu"></div>

    <div id="div_content">

      <WCP:template id="tp1"/>

      <div id="div_foot">

        <a href="<?php echo(x(WCP_ACTIVE_URL . wcp_param()));?>#top">

          <img src="image/top.gif" alt="Top"> Top</a></div>

    </div><br style="CLEAR:all">

  </div>

</div>

</body>

</html>

Schritt 4: Site-Navigation einbinden

In einer weiteren Vorgabedatei des Grafikers sieht man, wie das Navigationsschema gedacht ist:

[Bild: tutorial7.jpg]

Schaut man unter Vorlagen in die Kategorie "Navigation", findet man eine umfangreiche Sammlung vorgefertigter Schemas. Viele davon binden PHP-Scripte ein, die sich unter {root}/#include/ befinden. Diese sind ausführlich kommentiert, so dass man mit etwas Programmierkenntnissen eigene Schemas beliebig gestalten kann. Das ist aber in den seltensten Fällen erforderlich, da die mitgelieferten Schemas in Kombination mit CSS äusserst flexibel anpassbar sind.

Für meine Zwecke eignet sich das Navigationsschema "Sidebar-Menü (aufklappbar)". Ich kopiere den PHP-Code aus dem Quelltext des Schemas heraus und füge ihn in meine Basisvorlage ein:

Code:

<div id="div_menu">

  <?php include(WCP_ROOT_PATH . "#include/menu7.inc");?></div>

Die ebenfalls im Quelltext des Schemas befindlichen CSS-Formatierungen übernehme ich als Orientierung in die "custom.css". Alle Referenzen zu DIV.c_menu7 ersetze ich entsprechend meiner Vorlage durch #div_menu.

Damit ich meine Anpassungen des Stylesheets bzgl. der Navigation überprüfen kann, lege ich einige Webseiten mit der neuen Basisvorlage unter EasyPage / Neu verschachtelt an. Besonders praktisch ist es, wenn man vorher schon eine Vorstellung der Site-Struktur hat, ansonsten reichen einige Dummy-Einträge aus, die man später umbenennen oder löschen kann:

[Bild: tutorial6.jpg]

Wie man sieht, entspricht das Navigationsschema mit passenden Styles der Intention des Grafikers:

[Bild: tutorial8.jpg]

Schritt 5: Einrichtung statischer Adressen

Weiter oben habe ich drei Links in die Shortcut-Leiste des Layouts eingebunden: impressum.php, agb.php und login.php. Damit diese als Ziel auch existieren, muss man zunächst Webseiten dafür anlegen. Unter EasyPage füge ich zwei ausgeblendete Webseiten unterhalb von "Home" hinzu:

[Bild: tutorial9.jpg]

Dann wechsle ich zum Verzeichnis und wähle den ersten der beiden Einträge aus. Rechts unten befindet sich ein das Feld Ausgabepfad überschreiben. Hier lege ich den Dateinamen fest, wie ich ihn in der Basisvorlage verwendet habe:

[Bild: tutorial10.jpg]

Das gleiche mache ich beim zweiten Eintrag.

Für den dritten Eintrag "Login", mit dem der Anwender sich beim WEBCOMpro CMS anmelden können soll, benötige ich keine neue Webseite. Hier reicht eine Verknüpfung mit WEBCOMpro/. Dazu erstelle ich mit Verzeichnis / Neu einen weiteren ausgeblendeten Eintrag unterhalb von "AGB" und trage das genannte Ziel unter WWW-Adresse ein. Im Feld Ausgabepfad überschreiben setze ich auch hier den richtigen Dateinamen.

Schritt 6: Anpassung des globalen Stylesheets

Unter {root}/data/stylesheet.css finden Sie ein CSS-Stylesheet, welches per Defaulteinstellung von Basisvorlagen eingebunden wird. Ausserdem wird dieses für die Voransicht von Teilvorlagen verwendet. Sie können dieses frei an Ihr Design anpassen oder andere Stylesheets für Ihre Basisvorlage verwenden.

In Dateien wähle ich die Datei {root}/data/stylesheet.css aus und nehme unter Bearbeiten die gewünschten Änderungen vor.

Hier das Ergebnis:

[Bild: tutorial11.jpg]

Die neue Website ist nun einsatzbereit.

Die in diesem Tutorial angesprochenen Dateien habe ich Ihnen zum Download zusammengestellt:

Download tutorial.rar

In diesem Fall muss ich noch zusätzliche Teilvorlagen für den Kunden erstellen, dies soll jedoch Thema eines weiteren Tutorials werden. Ich hoffe, Ihnen damit einen Einblick in die Arbeit mit dem WEBCOMpro CMS verschafft zu haben und freue mich über Kommentare und Anregungen zu diesem Tutorial und beantworte gerne Ihre Fragen.