Programm Hilfe Website X5

Viele fragen sich wie erstelle ich mir ein eigenens Template.

Es gibt hier verschiedene vorgehensweisen.
Ich werde mal ein paar erklären und hoffe das es verständlich genug ist.

1. individuelle Template Erstellung im Programm
2. arbeiten mit vorhandenen Ordner um mehr Berechtigungen zu haben

Als erstes sollten wir uns überlegen wie die Seite aussehen soll und wie groß später der Inhalt sein soll.
Da die Seiten eine feste Breite haben sind sie für gewisse Bildschirmgrößen optimiert (1024px).

Ich nutze für die Bildbearbeitung meistens Adobe Photoshop.
Da dies aber die meisten nicht haben ist es nicht gerade sinnvoll dies zu erklären.

Als Bildbearbeitungsprogramm kann man viele benutzen google hilft einem beim finden eines guten Programmes mit dem man auch zurecht kommt. Zur Bildbeschneidung nutze ich Microsoft Office Picture Manager.

Die Bilderstellung

Da jeder hier seinen eigenen Geschmack hat kann er sich frei austoben.
Die Bilder sollten eine maximal Breite von 988px haben da jeder Browser auch noch ein wenig Platz benötigt und wir wollen ja keine unschönen Scrollbalken.

Mein Template soll später so aussehen wie dieses hier.

Dazu benutze ich 4 Dateien.

bg.jpg - Hintergrundbild
top.jpg - Die Kopfzeile
content.jpg - Der Hauptbereich wo mein Menü und der Seiteninhalt steht
bottom.jpg - Die Fußzeile



All diese Bilder bis auf bg.jpg haben eine feste Breite von 988px.
Die bg.jpg kann man entweder wiederholen lassen oder ihr auch eine feste Breite geben, diese sollte dann aber größer sein als die anderen 3 Bilder.


1. arbeiten mit dem individuellen Template direkt in X5

folgt

2. arbeiten mit vorhandenen Ordner um mehr Berechtigungen zu haben

Leider ist es nicht möglich einfach einen Ordner zu erstellen der am Ende auch im Programm angezeigt wird.
Aber es gibt einen kleinen Trick wie wir dies umgehen können.
Man nimmt sich einfach einen vorhandenen Ordner den man nicht benötigt.

In meinem Fall nehme ich den Template Ordner "Soft Lines"

C:\Program Files\WebSite X5 v8 - Evolution\Models\Soft Lines

In X5 ist dieser ganz oben zu finden.

Wenn wir in diesen Ordner reinschauen sehen wir wieder 2 Ordner

VER
HOR

Dies ist die Art des Menüs entweder vertikal oder horizontal.
Ich nehme mir den vertikalen als Beispiel.

Wenn wir in diesen Ordner reinschauen sehen wir wieder 4 Ordner und 3 Dateien.
Die Ordnernamen beinhalten die Farben des Template als Hex Code.
Welchen wir davon nehmen ist egal. Aber wichtig ist es das wir uns eine Sicherungskopie des gesamten Soft Lines Ordners machen bevor wir anfangen etwas zu ändern.

Wie ich eben schon geschrieben habe sehen wir 3 Dateien.

index.html
Settings.ini
template.css

Die index.html wird für X5 benötigt um überhaupt die Seiten zu erstellen. Wir können in dieser Datei z.B. Dinge hinzufügen welche dann auf jeder Seite auftauchen. Beispielsweise ein Bild oder einen Besucherzähler direkt unter dem Menü.

Die Settings.ini enthält folgenden Inhalt:

[Model]
ContentWidth = 735

Die 735 gibt die Breite unserer Seite in px an. Um unsere Seite so groß wie möglich zu gestalten schreiben wir dort 988 rein.

Das sieht dann so aus.

[Model]
ContentWidth = 988

Und nun zur letzten und wichtigsten Datei!
Die Datei template.css.
Diese hat folgenden Inhalt

body {margin: 0; padding: 0; background-image: url('bg.jpg'); }
#imSite {width: 928px; margin: 0px auto; text-align: left; }
#imHeader {height: 188px; background-color: #0F0F0F; background-image: url('top.jpg'); background-repeat: no-repeat; background-position: left top; }
#imBody {background-color: #FFFFFF; background-image: url('content.jpg'); background-repeat: repeat-y; background-position: left top; }
#imMenuMain {width: 145px; float: left; padding: 26px 0 0 21px; }
#imContent {width: 746px; float: left; margin-top: 16px; }
#imFooter {clear: both; height: 68px; background-color: #C0C0C0; background-image: url('bottom.jpg'); background-repeat: no-repeat; background-position: left top; }

Das sieht jetzt zwar umständlich aus ist es aber nicht.
Wenn wir etwas im Code lesen sehen wir einige Bilddateien das sind unsere Dateinamen die wir am Anfang erstellt haben.
Fangen wir mal oben an.

body ... dies ist die Zeile welche den kompletten Hintergrund regelt
margin ... Außenabstand
padding ... Innenabstand
bg.jpg ... unsere Bilddateiname für den Hintergrund
#imSite width:928px ... Dies ist die Breite unsere Seite diesen Wert ändern wir auf 988px
#imHeader height:188px ... Dies ist der Kopfteil unserer Seite und der Wert 188px gibt die Höhe des Bildes an.
..............................................................

DIESE LISTE WIRD NOCH ERWEITERT!

--------------------------------------------------

Meine Bilder haben folgende Größen:

top.jpg - 988x242
content.jpg - 988x1
bottom.jpg - 988x118
bg.jpg - 300x8000

Mit diesen Werten können wir jetzt unsere template.css bearbeiten.

Das würde dann so fertig aussehen.

body {margin: 0; padding: 0; background-color: #FFC080; background-image: url('bg.jpg'); background-repeat: repeat; background-position: left top; }
#imSite {width: 988px; margin: 15px auto; text-align: left; }
#imHeader {height: 242px; background-color: #C0C0C0; background-image: url('top.jpg'); background-repeat: no-repeat; }
#imBody {background-color: #FFFFFF; background-image: url('content.jpg'); background-repeat: repeat-y; background-position: left top; }
#imMenuMain {width: 148px; float: left; padding: 14px 0 0 30px; }
#imContent {width: 795px; float: left; margin-top: 4px; }
#imFooter {clear: both; height: 118px; background-color: #C0C0C0; background-image: url('bottom.jpg'); background-repeat: no-repeat; }

Nun schauen wir mal was alles in der index.html drin steht.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
</head>
<body>
<div id="imSite">
<div id="imHeader">
  <h1>[imSiteTitle]</h1>
</div>
<!-- InnerJump_Menu -->
<div id="imBody">
  <div id="imMenuMain">
[imMenuMain]
  </div>
<!-- InnerJump_Content -->
  <div id="imContent">
[imContent]
  </div>
  <div id="imFooter">
  </div>
</div>
</div>
<!-- InnerJump_Footer -->

</body>
</html>

Dies ist ein normales html Grundgerüst welches verwendet wird um die Seiten zu generieren. Es gibt dort einige Variablen welche auf andere Dinge zu greifen.

Wie wir jetzt hier Bilder oder Besucherzähler einbinden werde ich später noch erklären. Für den Anfang können wir dies so lassen.

Wir haben jetzt unsere Bilder fertig und unsere Dateien angepasst nun wollen wir mal sehen ob auch alles so hinhaut wie wir uns das vorgestellt haben.
Dazu öffnen wir unser Programm und wählen den Ordner "Soft Lines" unter dem Titel "Abstrakt" an. Wie wir sehen sind dort noch die alten Bilder als Vorschau drin. Wir wählen uns also den Ordner mit der Farbe die wir auch genommen haben. Und machen eine Testlauf in der Vorschau. Wenn alles passt können wir einen Screenshot von diesem Fenster machen und diesen als Datei imPrev.jpg in unseren Template Ordner speichern. Somit sehen wir gleich um welches Template es sich handelt.