Los geht`s

Starte mit einer kompletten funktionierenden Homepage

Nun zum spaßigen Teil. Nimm deine Homepage auseinander. Wenn du keine hast dann kannst du folgendes
machen:

Such dir einen Webdesigner der dir eine erstellt.
Such dir eine Vorlage von einer beliebigen CSS Seite (zB. http://www.cssdrive.com oder einfach eine andere - es gibt hunderte davon). Sei dir aber sicher das du diese auch verwenden darfst. Im Zweifelsfall kontaktiere den Designer und frage nach.
Oder zu holst dir ein fertiges Template von der MODx Seite. Am einfachsten zu benutzen aber du wirst nicht viel mit diesem Tutorial lernen.
Oder du benutzt die Standard Seite von MODx. So habe ich das in diesem Tutorial gemacht, damit du auch gleich anfangen kannst.

Es ist hilfreich wenn du dich schon ein wenig mit (X)HTML, CSS, JavaScript (und PHP, wenn du eigene Snippets erstellen willst) auskennst. Sollte das nicht der Fall sein kaufe dir oder borge dir ein Paar Bücher und studiere diese. Kopieren und Einfügen vom Code ist auch eine Möglichkeit um dies zu erlernen.

Selber Coden vs. automatisches Coden lassen

In diesem Tutorial gehe ich davon aus, dass du eine HTML Editor hast, wenn du keinen hast gibt es eine Menge an Freien Editoren die ausgezeichnet funktionieren. Für Windows Benutzer folgende:

Crimson Editor (http://www.crimsoneditor.com/) oder
Notepad++ (http://notepad-plus.sourceforge.net/uk/site.htm)

und für Mac (und Windows) Benutzer

NVU (http://www.nvu.com/index.php)
Textwrangler - nur für Mac (http://www.barebones.com/products/textwrangler/)

Ich würde empfehlen in diesem Tutorial keinen Dreamweaver oder GoLive oder einen anderen WYSIWYG Editor zu verwenden. Beim selber coden lernst du mehr und es ist nicht so schwer wie man denkt. Auf keinen Fall darfst du MS Office oder OOo Writer verwenden um formatierten Text in MODx hineinzukommen. Das geht immer schief!

Was passiert mit meinem Template?

Einer der ersten Fragen der neu Einsteiger von MODx ist: Wo sind die Dateien? Die meisten sind in der MySQL Datenbank, wo du sie nicht sehen kannst (zB. die Templates, Dokumente/Seiten, Snippets, Chunks und Template Variablen). Ein paar Zusätzliche Dateien befinden sich auf dem Server die du sehen kannst (zB Bilder, CSS Dateien, Audio Dateien, Film Dateien etc.)

Die Beispiel Seite

vorlage

Die Beispielseite ist eine einfache, zweispaltige Seite mit fixer Breite. Es besteht aus:

einem Header
2 Spalten für den Inhalt in einer 2/3 – 1/3 Aufteilung.
1 Seitennavigation und 1 Top Navigation
1 Info Box (genannt Footer)