Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 2. WYSIWYG Editor > Anleitung Amaya

Anleitung Amaya 1 – Website Layout erstellen

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.

typisches-website-design

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 amaya-neu 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