Contrexx - first steps
Zusammenfassung der wichtigsten Dinge für die Bearbeitung von Layouts des Contrexx
How to use (HTU):
Am liebsten würde man ja ein Template wählen welches in etwa so ausschaut wie die Webseite dann mal ausschauen sollte.
Leider sind die neusten Templates, vorallem das Original mit der installierten Version 2.1.3 ausgestattet ist, sehr kompliziert programmiert.
Das leichteste und handlichste ist das Template "violetta" das sich im Verhältnis gesehen leicht anpassen lässt. Wissen muss man dass es ein älteres Template ist und für die neusten Versionen der Module bestimmte Platzhalter nicht eingebaut sind. Violetta habe ich vor kurzem für verschiedene Projekte als Grundlage eingesetzt und dementsprechend erweitert.
Hier die Beispiele:
Die Templates kann du hier http://esx.ch/files herunter laden.
Wichtige Tools:
Gratis Tools - Die top Helfer:
Das wichtigste Werkzeug ist der Mozilla Firefox mit dem Plugin Webdeveloper:
-> Aktuellste Version 3.6: http://www.mozilla-europe.org/de/firefox/
Der Webdeveloper muss noch angepasst werden. Hierzu habe ich hier ein paar Printscreens hinterlegt:
-> http://esx.ch/index.php?page=415
-> http://esx.ch/index.php?page=415
Wenn der so eingestellt ist kannst du jede Webseite die CSS Elemente ganz leicht auslesen.
Mit der Tastenkombi Ctrl + Shift + Y aktivierst du das Werkzeug und kannst auf das jeweilige Element klicken.
Dann erscheint die CSS Formatierung und ganz wichtig in welchem CSS-File das Element hinterlegt ist.
Dies erleichtert die Arbeit ungemein...
-> Webdeveloper-Plugin: http://chrispederick.com/work/web-developer/
InstantEyedropper dient als Farbpipette und kann unabhängig davon welches Programm geöffnet ist eingesetzt werden.
Das Programm aus der Systray mit gehaltenem linken Mausklick starten und über die Bildschirmfläche an den Farbbereich führen bis die Farbe die man sucht angezeigt wird. Nun mit Ctrl + C den Farb-HEX-Code in die Zwischenablage kopieren und wo auch immer benötigt einfügen (CSS)
-> InstantEyedropper: http://esx.ch/files
Pixel-Lineal braucht es um einfach die Bereiche auszumessen.
Der Lineal kann beliebig angepasst / vergrössert werden.
Dazu mache auf den Lineal ein rechten Mausklick und richte dich ein...
-> Pixel-Lineal für PC: http://esx.ch/files
Die Lupe ist ganz praktisch wenn im beinahe von Auge nicht erkennbaren Pixelbereich Fehler oder Anpassungen gemacht werden müssen.
-> Lupe für PC: http://esx.ch/files
Der WinResizer zeigt einem wie die Webseite mit den verschiedensten Monitorauflösungen angezeigt werden.
-> WinResizer: http://www.aidex.de/software/resize
-> WinResizer: http://www.aidex.de/software/resize
Kostenpflichtig aber enorm wertvolles Tool:
Das neuste Tool von Microsoft "Expression Web" kann für 60 Tage getestet werden. Expression Web ersetzt den vorgängigen Frontpage und ist komplett neu aufgebaut. CSS-Programmierung ist damit leicht gemacht...
-> Testversion: http://www.microsoft.com/downloads/details.aspx?FamilyID=0A73A3A7-3E06-4125-B3C6-F9C10387E9CC&displaylang=de
Jetzt an die Arbeit ...
Die Vorbereitungen:
Wichtig:
Bevor du überhaupt nur eine einzige Anpassung vornimmst, sicher immer wieder der funktionierende Stand der Dateien.
Ich richte mich jeweils so ein dass ich alle Dateien die ich bearbeite lokal in einer txt-Datei temporär sichere. So kopiere ich der ganze Code einer Datei in eine analog benannte txt-Datei und kann so immer wieder zurück falls ich was verhauen habe...
Planung und Strategie entwickeln:
-> Web-Grundstruktur ausdenken -> Wo Logo, Banner, Menü und Inhalt
-> Layout -> Wo Grafiken -> wo nur Farben
-> Gewünschtes Vorlage Template im Contrexx aktivieren:
Nun sollte das Frontend so ausschauen wie das aktivierte Template. Wenn aber das so nicht ist, liegt es zumeist daran dass der URL der CSS-Files in der index.html im Header nicht stimmen. Gehe im Backend zu Layout % Design -> Dein Template -> index.html und suche die Zeilen wo die CSS-Files angegeben sind.
Beispiele:
<link rel="stylesheet" type="text/css" href="themes/esx/style.css" />
<link rel="stylesheet" type="text/css" href="themes/esx/layout.css" />
<link rel="stylesheet" type="text/css" href="themes/esx/layout.css" />
Wenn ein Template vor der Aktivierung umbenannt worden ist, muss wie hier im Beispiel esx angepasst werden.
Das Layout:
Gundsätzlich muss man verstehen wie die Dinge miteinander verknüpft sind. Die wichtigste Datei ist die index.html wo die Grundstruktur aufgebaut ist. Direkt daran angelehnt sind die Dateien home.html, content.html, navbar.html, subnavbar.html und im weiteren Sinn alle sonstigen HTML-Files. Diese Einzelfiles werden mit den jeweiligen Platzhalter an den ensprechenden Orte eingebunden.
Beispiel content.html:
In der index.html findest du der Platzhalter wo dann auch genau die content.html eingebunden wird. So werden auch alle weiteren Files implementiert.
Das Platzhalterverzeichnis findest du hier:
Wichtig zu wissen ist dass dies zusammen erst die Grundstruktur der Webseite aufbaut. Die Module müssen im ContentManager (Seitenlayout - nicht Modulinhalt) angepasst werden (falls überhaupt notwendig).
HTML anpassen:
Dazu braucht es ein Html-Editor wie das oben aufgeführte Programm Microsoft Expression Web.
Wenn es Änderung in der HTML-Struktur benötigt, kopiere der ganze HTML-Code aus dem Backend in eine leere Seite im HTML-Editor und bearbeite sie. Danach wiederum den ganzen Code zurück ins Backend einfügen. So lassen sich auch die HTML-Strukturen der Mudule bearbeiten.
Aber Achtung: im Editor werden natürlich die CSS-Files nicht geladen und somit ist die Darstellung ohne Formatierungen. Auch muss darauf geachtet werden dass der Editor bestimmte Scripts nich überschreibt.
Das zum Thema Layout, HTML und Platzhalter...
Das CSS
CSS-Files sind zentrale Formatierungsdateien für Layout, Text, Links und Bilder. Damit kann in ein paar wenigen Text-Dateien mit der Endung css das Layout gesteuert werden. CSS bedeutet: Cascading Style Sheed - kaskadiertes Formatieren der Html-Elemente.
Dass es leichter zum Bearbeiten ist, auffinden der Formatierungsbereiche, werden verschiedene CSS-Dateien eingesetzt.
Im Contrexx sind die wichtigsten:
-> layout.css (definiert die Layout-Elemente)
-> style.css (definiert die Text, Links Elemnte)
-> buildin_style.css (hier sind die Module definiert)
-> navbar.css (Navigationsbereich - Haupt-Menüliste)
-> subnavbar.css (Subnavigation - Untermenüs)
teils auch eingesetzt:
-> modules.css
-> text.css
Wie gehe ich das an ...
Elementar sind die Kenntnisse des Aufbaues der man sich wie eine Zwiebel vorstellen kann. So ist jede Schicht ein Bereich der in sich definiert ist. Und so empfehle ich mit einer klaren Linie durch das Layout durch zu arbeiten.
Man beginne mit dem body-Bereich wo für die ganze Seite die Hintergrundfarbe oder Bild festgelegt wird. Dann arbeite dich von oben nach unten durch. Also den Header oder Logobereich - dann der Menu-Layout-Bereich, ohne die eigentlichen Links im Menü zu definieren - also nur der strukturelle Bereich. Weiter der Content-Bereich (Inhalt) anpassen und der Fussbereich (footer) will ja auch definiert werden.
Elementarste CSS-Kenntnisse:
CSS ist eine Verschachtelung von Formatierungen. Grundsätzlich kann auch das wieder mit einer Zwiebel verglichen werden.
Typ-Selektoren sind die im Hmtl vorgegebenen Elemente.
html = ganzer Html-Berich
body = Inhalter der Seite
a = Inaktiver Link
a:hover = Link Rollover (wenn mit Maus darüber gefahren wird)
img = Image / Bild
hr = Horizontale Linie
h1 - h5 = Überschrift 1 - 5
u.s.w.
ID-Selektoren dürfen nur einmal eingesetzt werden. Die werden mit # angegeben und deklarieren fixe Layout-Bereiche.
#header = Kopf-DIV-Container
#content = Inhalt-DIV-Container
#footer = Fusszeile-DIV-Container
Class-Selektoren sind den Typ- und ID-Selektoren untergeordnet. Die können als einzelnes Element oder verschachtelt eingesetzt werden.
Die ermöglichen bespielsweise die Flexibilität der Link-Definition. so kann der Fusszeilen Link ganz anders definiert werden als die des Inhalt- oder Menübereiches.
Einzel eingesetzt kann zum Beispiel eine Box definiert werden die im Html mit class="text-box" angegeben und natürlich mehrfach eingesetzt werden können.
Hier ein paar Beispiele:
Verschachtelt - oder cascadiert eingesetzt:
Beispiel für den Fusszeilenbereich:
#footer = definiert die Grösse, Farbe und Position des DIV-Containers
#footer a = definiert der Link im Footer
#footer a:hover = definiert der Rollover im Footer
weitere Möglichkeiten:
#footer h1 = definiert die Überschrift 1 im Footer
#footer img = definiert Bilder im Footer
Es gibt unzählige und sehr ausführliche Webseite die das CSS beschreiben.
Hier die wichtigsten:
-> http://www.css4you.de (beinahe vollständiges CSS Tutorial)
-> http://de.selfhtml.org/index.htm (Die Webmaster-Bibel)
Dein CSS überprüfen lassen:
Für ungeduldige Leser oder autodidaktisch Veranlage:
Wenn mit dem Webdeveloper ein Bereich für die Anpassungen festgelegt ist, schaue man sich den Bereich mal genau an und versuche zu intepretieren was mit den Definitionen wohl gemeint ist.
Beispiel für den DIV-Container Header:
#header {
height: 110px; fixe Höhe
width: 780px; fixe Breite
float: right; Ausrichtung des Containers Rechts
margin: 0 20px 0 0; Aussenabstand bis zum Rand (border) Hier zusammengefasst top, left, bottom, right
border: 1px solid #000000; Rand zusammengefasst - also rundum mit 1px Breite, durchgezogen und in schwarz
background-image: url('images/banner.png'); Hintergrundbild URL
background-position:left top; Hintergrundbild-Position
background-repeat: no-repeat; Hintergrund-Bild Widerholung = Nein / kann auch repeat-y oder repeat-z sein
}
Zum pröbeln nutze ich oft das Auskommentieren. Im CSS können Kommentare / Infos hinterlegt werden ohne dass die Einfluss auf das CSS nehmen.
Wenn nicht sicher ist wie etwas sich auswirkt oder man will vorerst diese Zeilen erhalten, kann ein Teilbereich mit /* auskommentierter Bereich */ eingeklammert werden.
Beispiel auskomentiertes Hintergrund-Bild:
#header {
height: 110px;
width: 780px;
float: right;
margin: 0 20px 0 0;
border: 1px solid #000000;
/* background-image: url('images/banner.png');
background-position:left top;
background-repeat: no-repeat; */
}
Fazit:
Wenn die wichtigsten Elemente begriffen sind und die ersten Erfolge sich abzeichnen, kann das scripten und coden süchtig machen. Man erkennt plötzlich die Vielfalt der Möglichkeiten und will immer mehr umsetzen. Natürlich kommt man hie und da an Grenzen weil es nach den eigenen Vorstellungen nicht funktioniert. Ich habe des öfteren die Erfahrungen gemacht dass es im Prinzip immer eine Lösung gibt. Manchmal wird man absolut "Projektblind" und es braucht nur eine neue Sichtweise / Richtung die zur Lösung führt...