Unsere Ausgangssituation:

Folgende Veränderungen werden eingefügt: Fonteigenschaften für den Bodybereich, Fonteigenschaften für das Formular (jeweils12 px Verdana), Rand der Formularfelder (1 px solid black), Hintergrund der Formularfelder(orange).

Dem Ganzen soll jetzt mit Hilfe des CSS-Editors ein bißchen Farbe eingehaucht werden und daher beginnen wir mit den Eigenschaften des Formulares.

Also wird der CSS-Editor geöffnet. Als nächstes wird ein neuer Stil .class erstellt. Wir geben dem neuen Stil den Namen .formulare
Als erstes weisen wir den Schriftstil zu.

Weitere Formatierungsmöglichkeiten:

Unser nächstes Objekt der Begierde ist das Attribut border. Hiezu wechseln wir im Inspektor zu den Randeigenschaften.

Die Möglichkeiten hier sind sehr vielfältig. Man könnte mit dotted eine gestrichelte Linie erzeugen, doppelte Linien usw. Ein paar Beispiele:

Als letztes legen wir die Hintergrundfarbe für die Formularfelder fest. Wir wechseln zu den Hintergrundeigenschaften...

Wir haben nun die Eigenschaften für das Aussehen des Formulares festgelegt und sind fast fertig. Die Fonteigenschaften für den Bodybereich legen wir wie folgt fest: Rechtsklick, neuer Stil, body. Anschließend, wie oben, mit dem Inspektor einfach den Schriftstil zuweisen. in Unserem Fall: Fontfamily Verdana, 12 px.

Als letztes wechseln wir zurück in die Layoutansicht und weisen jedem Formularfeld die Klasse .formulare zu. Wenn wir einen Blick in den Quälcode werfen, finden wir im headbereich folgende Zeilen:

body { color: black; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: white }

.formulare { color: white; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: orange; border: solid 1px black }

Dies ist der Code den wir mit dem CSS-Editor erzeugt haben. Man könnte diese zwei Zeilen natürlich von Hand hinzufügen, jedoch wäre dieser Weg nicht so bequem und man hätte keine direkte Vorschau auf das Ergebnis.

Wenn wir das erfolgreich abgeschlossen haben, sollte unser Formular nun so Aussehen:

Anmerkung zum Schluss: Der Unterschied zwischen Golive Creative Suite und Golive 6.0 ist in Bezug auf den CSS-Editor rein von der Optik her gering, soll heißen dass dieses Tutorial auch problemlos mit Golive 6.0 nachzuvollziehen sein sollte. Und nicht vergessen: Immer mit der Sitedatei arbeiten!

Das war eine kleine Einleitung über die Gestaltung von Formularen mit Golive. Bei Fragen oder Problemen meldet euch im Goliveforum zu Wort.

Autor: (schneeschaufel)