Schwebende DIV-Container erzeugen

Transkript

1 Anfasser DIV-Container sind nützliche Helfer beim Layouten. Sie können Texte und Bilder beinhalten und lassen sich mittels ihres Z- Wertes auch übereinander anordnen. MODx stellt dazu ein simples, aber effektives Tool zur Verfügung. Um ein solches ebenenbasiertes DIV zu erzeugen, klickt man in die Schaltfläche oben. Nun erscheint ein DIV mit Rahmen und Anfasser, um es zu bewegen. Die Größe des DIVs lässt sich mittels der Eckpunkte durch Klicken und Ziehen bestimmen. Dazu mit dem Mauszeiger auf eine der Ecken klicken, Maustaste drücken und ziehen. Unser DIV hat automatisch einen Text - Neue Ebene. Diesen Text können wir nun wie gewohnt färben, oder Format, Absatz oder Schriftart und Größe in der Werkzeugleiste einstellen. Einstellungen für Textfarbe und Texthintergrund Der Inhalt des DIVs ist - soweit nicht anders festgelegt - transparent und kann über die - 1 -

2 Hintergrundebene des Dokuments gelegt werden. Ein Bild in das DIV importieren Um ein Bild in das eben erzeugte DIV zu importieren, ist ein kleiner Kniff notwendig. Klickt man in das DIV und wählt das Bildimport Icon, passiert gar nichts. Wenn man des im DIV bereits enthaltenen Text löscht, verschwindet der DIV ganz. Erst wenn man den Cursor zwischen die Worte Neue / Ebene setzt lässt sich der Bildimport vornehmen (Bug des Programms). Nun erscheint folgendes Fenster: Wir klicken nun in den Button für den eigentlichen Import - Es öffnet sich nun das Fenster des Resources Browsers, in dem alle unsere vorher schon angelegten Ordner und Bilder abgelegt sind. Der Doppelklick auf einen der Ordner öffnet diesen und nun müssen wir lediglich auf eines der Bilder klicken, um es in den DIV zu importieren, indem wir es anklicken und dann im Bildimportfenster die Option einfügen wählen. Weiterhin ist es möglich, ein Bild von der eigenen Festplatte in den gerade gewählten Resourcenordner zu kopieren, indem man im Resourcenfenster die Option Durchsuchen aktiviert. Man wählt nun eine beliebige Datei, markiert diese und lädt sie mit dem Befehl Upload hoch, um später wie oben beschrieben zu verfahren

3 Bestehende Grafik in einem DIV- Container austauschen Um eine Grafik, die bereits in einen DIV Container importiert worden ist, auszutauschen, klickt man in den betreffenden Container. Dann aktiviert man die Schaltfläche Bildimport. Nun öffnet sich der Resources Browser und man kann aus der Ordnerstruktur, die hier zu sehen ist, einen Ordner auswählen und ein Bild markieren, das dann in dem DIV zu sehen ist. Eventuell muss der DIV in der Größe angepasst werden. Dazu klickt man in die äußeren Ecken hält die Maustaste gedrückt und zieht den Container auf, bis die gewünschte Größe erreicht ist. Ändern der Größe einer Grafik Um die Größe eines Bildes zu ändern, klickt man in den Tab-Reiter Aussehen. Hier können gleich mehrere Parameter der Grafik beeinflusst werden. Es kann die Ausrichtung der Grafik eingestellt werden (ist für DIVs nicht von Relevanz). Dann sollte die Größe in Pixeln eingestellt und für jedes Objekt definiert werden, so dass diese dann exakt dieselbe Größe haben

4 Unter dem Tab-Reiter Erweitert können Rollover-Animationen erzeugt werden. Dazu legt man zwei fast identische gif png-bilder an und bezeichnet sie als grafik_x_no und grafik_x_ro. Man wählt zuerst die Option bei Mauskontakt und klickt dann in die Schaltfläche, die den Resources Browser mit den Bildern öffnet. nun wählt man die Datei grafik_x_no. als nächstes klickt man in die Option bei einem Mauskontakt klickt in das Icon des Resources Browser und wählt die Datei grafik_x_ro. Das Ganze nun sichern und in der Vorschau betrachten - voila, wir haben einen Rollover Button erzeugt

5 Schriftmenü Format Ausricht Die Funktionen der Menüsteuerung von MODx - 5 -