Designs erstellen oder bearbeiten

Andere Sprache: en

  • Gehe zu Seite:
  • [1]
  • [2]

Wie erstelle ich ein eigenes Design?

Zuerst einmal solltest du die Grundlagen von CSS und HTML verstehen. Im Internet existieren dazu viele gute Tutorials.

Dann geht es darum, die Vorgehensweise von wiki2xhtml zu kennen. Beim Erstellen einer neuen Seite greift wiki2xhtml auf die Datei style/design-name/reck.html, die den grundsätzlichen Aufbau angibt, zurück und fügt dort generierte Inhalte (Titel, Footer, Menu und Text) ein. Durch reck.html lassen sich auch verwendete Stylesheets und der Seitenaufbau selbst verwalten. Nachdem so die zielverzeichnis/*.html-Seiten generiert wurden, werden alle .png-, .jpg-, .gif-, .ico- und .css-Dateien aus style/design-name/ nach zielverzeichnis/style/ kopiert.

Für Bilder werden weitere Vorlagen verwendet, sowohl für die Bilderseiten als auch für die Bilder auf normalen Seiten selber. Das Prinzip ist das selbe. Hier alle verwendeten Vorlagen:

Verwendete Vorlagen Anwendung optional?
reck.html Gesamte Seite nein
image-template.html Bilderseite nein
picture.html Bild alleine ja
pictureT.html Bild mit Beschreibung ja
thumbPicture.html Vorschaubild ja
thumbPictureT.html Vorschaubild mit Beschreibung ja
galleryContainer.html Galerie-Container ja
galleryText.html Galerie: Text ja
galleryImageNodesc.html Galerie: Vorschaubild ja
galleryImage.html Galerie: Vorschaubild mit Beschreibung ja
tplTOC.txt Inhaltsverzeichnis ja

Tags

Was wo eingefügt werden soll, kann durch Tags gesteuert werden. Einige Tags verfügen zudem über ein Delete-Tag: Falls das Tag leer ist, wird der Inhalt zwischen den beiden Delete-Tags entfernt.

Achtung: Seit wiki2xhtml 3.3 sind alle Tags in Kleinschrift. Wenn du wiki2xhtml mit dem Argument template [datei] startest, kannst du eine Vorlage aktualisieren. Der Dateiname ist optional.

Für reck.html sind folgende Tags verfügbar:

Tag Funktion Delete-Tag
[meta] Metadaten im head-Bereich des Dokuments
[title] Titel für die Fensterleiste
[textheader] Text-Header (Alternative zu Bild)
[head>st*] Der Head wird an dieser Stelle eingefügt. Das optionale Argument beschreibt, wie viele Leerschläge und Tabulatoren für ein optimales Aussehen des Quellcodes vorgestellt werden sollen. Beispiel: [head|tss] für einen Tabulator gefolgt von zwei Leerschlägen.
[menu] Menu >menu> und <menu<
[footer] Footer >footer> und <footer<
[h1] Seitentitel
[homelink] Link zur Startseite
[content] Inhalt

Tags für image-template.html (Beispiel: Bild gfx/img.jpg wurde auf der Seite from.html eingefügt):

Tag Funktion Delete-Tag
[imagepath] Pfad zum Bild: gfx/img.jpg
[imagename] Name des Bildes: img.jpg
[imagecaption] Überschrift (Argument caption=)
[alt] Inhalt fürs alt-Tag (Überschrift ohne HTML-Tags)
[args] Zusätzliche Argumente für das Bild (seit 3.4)
[argsLink] Zusätzliche Argumente für den Link zum Bild (seit 3.4)
[pre] ../ (Verzeichnis mit den Internetseiten)
[back] ../from.html#ID
[title] Titel (Fensterleiste)
[meta] Metadaten
[desc] Bildbeschreibung >desc> und <desc<
[width] Standardbreite der Bilder (aus css-settings.txt)
[nextimage] Link zum nächsten Bild (falls vorhanden)
[previmage] Link zum vorherigen Bild (falls vorhanden)
Navigation, falls das Bild von einer Galerie aus
verlinkt wurde 		>nav> und <nav<

Für die eingebetteten Bildervorlagen (thumb*.html, picture*.html und gallery*.html) können folgende Tags verwendet werden:

Tag Funktion
[pos] Position (.right, .left) für CSS-Klassen; nur thumb*.html
[link] Ziel (Bild oder Bilderseite)
[thumb] Vorschaubild
[imagepath] Direktlink zum Bild
[width] Breite
[desc] Beschreibung
[descxmlname] Beschreibung ohne Sonderzeichen, kann etwa fürs alt-Attribut verwendet werden
[id] ID (Für Anker beim zurück-linken)

Die beiden Dateien sowie die CSS-Datei können nun erstellt (oder, einfacher, von einem existierenden Design kopiert und abgeändert) werden.

Verfügbare Tags für tplTOC.txt

Tag Funktion
[toc] Inhaltsverzeichnis selbst
__TOC__ Standardtitel fürs Inhaltsverzeichnis

Beispiel: <div id="toc"><h2>Inhaltsverzeichnis</h2>
[toc]
</div><br style="clear: left;" />

Konfigurationsdateien

wiki2xhtml arbeitet mit einigen Konfigurationsdateien, mit denen zum Beispiel eingestellt werden kann, wie viele Bilder in einer Bildergalerie pro Linie angezeigt werden soll. Sie werden von wiki2xhtml in dem Verzeichnis gesucht, wo auch die restlichen Dateien für das Design (wie die CSS-Dateien oder Bilder) liegen. Wird eine Datei nicht gefunden, werden Standardwerte verwendet.

css-settings.txt

Masseinheiten werden in px oder % angegeben.

{{GalleryImagesPerLine:n}} — n gibt an, wie viele Bilder pro Linie in einer Galerie stehen soll. Nach dieser Anzahl Bilder wird ein <br style="clear: both;" /> eingefügt, falls es in der Commons-Datei oder einer einzelnen Seite mit {{ConsistentGallery:false}} abgeschaltet wurde.

{{GalleryThumbWidth:n(px|%)}} — Legt die Breite der Vorschaubilder in Galerien fest.

{{ImageWidthImagepage:n(px|%)}} — Legt die Bilder auf den Bilderseiten fest.

{{thumb-imagewidth:n(px|%)}} — Legt die Standardbreite von Vorschaubildern (nicht von Galerien) fest.

  • Gehe zu Seite:
  • [1]
  • [2]