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.