Amaya WYSIWYG Website fertig stellen und verlinken Teil 3
Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 2. WYSIWYG Editor > Anleitung Amaya > 3. Website fertig stellen und verlinken

Anleitung Amaya 3 – Website fertig stellen und verlinken

Nachdem das Grundgerüst steht, fehlen nur noch die kleinen optischen Verbesserungen, ein Logo, die ganzen Links im Menü und die Webseiten die verknüpft werden sollen.

Optische Verbesserungen beim Text

Die Texte die wir bisher geschrieben haben (Bezeichnungen der Div-Container) stehen überall direkt am Rand. Das sieht überhaupt nicht gut aus. Daher werden wir überall einen Innenrand hinzufügen. Dazu wählen wir unseren Div-Container aus (unten div anklicken) und klicken auf das CSS Symbol . Bei Rahmen geben wir auf der rechten Seite unsere Innenabstände an. Geben z.B. 10px für jede gewünschte Seite ein. Padding top für oben, botton ist unten, left steht für links und right für rechts. Soll für alle Seiten der gleiche Innenabstand gelten, reicht es aus, nur padding zu wählen und 10 Pixel zu vergeben. Beim testen im Firefox, Chrome… wird nun auffallen, dass der text rechts vom menü noch immer ansteht. daher müssen wir dem Menü links einen Außenabstand geben. Den Div unten markieren und CSS aufrufen, bei Rahmen margin-right 10 Pixel als Abstand eingeben, fertig, nun funktioniert es richtig.

Immer daran denken: Vor jedem CSS Aufruf den entsprechenden DIV unten markieren

Logo hinzufügen

Für das Logo brauchen wir als erstes ein Logo, das wir einfügen können. Ist das erstellt, wird das in unseren Website Ordner kopiert, am besten in einen Ordner mit dem Namen Bilder für die bessere Übersicht.
Jetzt können wir entweder unter Einfügen –> Bild unser Bild direkt in den Header einfügen, oder das mittels CSS machen.

Den Div des Headers markieren und CSS aufrufen. Beim Reiter Farben das Hintergrundbild mit dem Ordnersymbol bei background-image auswählen. Darunter kann gewählt werden, wie das Bild angezeigt werden kann, neben einzeln gibt es noch weitere Möglichkeiten das Bild im Header zu wiederholen.

Viel besser ist es das Logo in einen Div-Container zu legen. So kann man später die Position jederzeit beliebig verändern.
Im Header schauen wir, dass wir wieder ein Linie frei haben unter dem Div den wir einfügen werden. Enter Taste und per Pfeiltaste auf der Tastatur ein Feld nach oben in die erste Linie. Nun gehen wir auf Einfügen –> Block-Element (div) und klicken dann gleich auf CSS. Bei Rahmen legen wir eine Breite fest (width) und die Höhe daneben. Bei Format wählen wir float left aus. Logo wird bei Farben –> background-image auswählen und die Anzeige Option darunter auswählt. Übernehmen und das Logo ist nun eingefügt.

Menü erstellen, Verlinkung der Seiten mit Hyperlinks

Nun tragen wir in die Menüs die Namen der Links ein, die wir verwenden wollen. Für jeden Link speichern wir nun eine eigene Seite ab. Dann markieren wir einen Namen, den wir verlinken und rufen über Verweise –> Verweis erstellen oder ändern ein Eingabefenster für den Link auf. Hier können wir mit dem Ordner am Ende der Linie unser Link Ziel aussuchen. Leider scheint bei Amaya die Option zu fehlen, wo der Link geöffnet wird. So wird der Link im gleichem Fenster geöffnet.

Externen Link einfügen

Wer einen externen Link setzen möchte, der muss Erfahrung haben um im HTML Code das zu ändern.
Die Lösung wär im Quelltext das zu ändern. Den Quelltext ruft man über Ansicht –> Quelltext anzeigen auf.
Beispiel: die index.html Seite soll im neuem Fenster geöffnet werden.

<a href="index.html">Home</a>

Das oben ist der Link, wie er von Amaya erstellt wurde. index.html stellt die URL dar, die geöffnet werden soll und Home ist der Name des Links, auf den man klickt. Damit sich das ganze im neuem Fenster öffnet, muss man in der Mitte den Befehl dazu einsetzen. Das ist:

target="_blank"

Die Position zum einfügen ist nach dem

der Url und vor dem >

<a href="index.html"  < -- hier einsetzen. Das Leerzeichen dabei nicht vergessen
Fertig sieht das so aus:
<a href="index.html" target="_blank">Home</a>

Nun öffnet sich der Link in einem neuen Fenster bzw. Tab je nach Browser und Einstellung

Vorlagen erstellen

Vorlagen erstellen ist in Amaya möglich, aber es scheint nicht richtig zu funktionieren. Bei mir stürzt Amaya immer ab, wenn ich die Vorlage speichern will. Daten gehen zum Glück keine verloren, denn die Vorlage ist trotz Absturz von Amaya gespeichert worden. Will ich aber eine neue Seite aus der Vorlage speichern, stürzt Amaya manchmal auch ohne das Dokument gespeichert zu haben ab.
Leider scheinen Änderungen die ich in der Vorlage vornehme nicht auf die aus der Vorlage erstellten Dokumente übernommen zu werden. Auch das übernehmen meiner Vorlage in die Auswahlliste bringt nichts.

Scheinbar ist das ganze genauso verbugt, wie beim KompoZer.