Hinter diesem WYSIWYG Editor steht der der Erfinder des World Wide Web mit seinem Gremium für Internetstandards W3C. Ein Wikipedia Beitrag dazu: Wikipedia.
Amaya bietet wie auch schon der Kompozer vorher, die
Möglichkeit Webseiten mit CSS und Div-Containern zu erstellen.
Diese Möglichkeit sollte man auf jeden Fall nutzen. Die andere
Möglichkeit wäre mit Tabellen zu arbeiten.
Tabellen sind aber nicht gerne gesehen, da sie einige Nachteile
gegenüber Div-Containern haben.
Vorteil Div-Container mit CSS statt Tabellen Layout
Amaya kann auf der Herstellerseite kostenlos herunter geladen werden: W3C Amaya
Das Grundgerüst, Layout einer Webseite erstellen
Webseiten bestehen meist aus diesen Bereichen: Header (Kopfzeile), Menü (Navigation), Content (Inhalt) und Footer (Fußleiste). Auf die Idee mit dem Logo kommen wir dann erst später und fügen es nachträglich ein.
Dabei kann die Navigation als horizontales, sowie vertikales Menü gestaltet werden. Wir werden beides auf unsere eigene Website einbauen.
Div-Container erstellen für die Bereiche der Website
Als erstes Starten wir Amaya mit einem leerem HTML Dokument und speichern es unter index (Regeln für Dateinamen) in einen eigenen Ordner (warum?) ab. Dafür muss man auf Datei –> Neu –> Dokument, oder auf das Symbol klicken. Das ganze mit OK bestätigen. Nun das ganze mit Datei –> Speichern unter als index speichern.
Jetzt legen wir die verschiedenen Bereiche der Website mit Div-Containern fest.
Dazu gehen wir auf Einfügen –> Block-Element (div). Zu sehen
ist erstmal nichts, nur unten ist nun ein div dazu gekommen .
Damit wir etwas sehen, weisen wir dem DIV-Container gleich eine
Hintergrundfarbe per CSS zu. Dazu klickt man auf das CSS Symbol und
wählt im Reiter Farben bei background-color mit dem Farbsymbol eine
Farbe aus. Übernehmen klicken und fertig. Zur besseren Übersicht
schreiben wir noch die Bezeichnung rein, für was der Div-Container
sein soll. Wir wollen mit diesem Div-Container die Webseitenbreite
festlegen, als den Rahmen um alles herum, daher schreiben wir
einfach Rahmen.
Mit der Enter Taste gehen wir in die übernächste Zeile und dann
per Maus ein Feld nach oben (so bleibt nach einem neuen Div-Container
eine Linie frei für den nächsten Div-Container). Nun legen wir
einen weiteren Div-Container für den Header an. Diesem geben wir
ebenfalls eine andere Hintergrundfarbe und schreiben Header rein.
Das ganze wiederholen wir jetzt für Menüleiste, Menü links,
Content und Footer. Beim Footer ist es nicht nötig darunter eine
Zeile frei zu lassen, da wir danach keinen weiteren Div-Container
einfügen wollen.
Wichtig ist, dass das Menü links vor dem Content (Inhalt)
eingefügt wird. Das Menü links wird später nur eine geringe Breite
erhalten und der Inhalt soll rechts davon stehen.
Weiter geht es mit Teil 2: Website mit fester Breite und flexibler Breite erstellen