Anleitung Amaya 2 – Website feste oder flexible Breite erstellen
Feste Breite: Als erstes erstellen wir ein
Design für die Auflösung von 1024 Pixel x 768 bzw. 600. Hierfür
legen wir den Rahmen mit 970 Pixel Breite fest. Dafür müssen wir
den Div-Container Rahmen auswählen. Dafür klicken wir auf das
erste div unten 
.
Klickt man direkt ins Rahmenfeld, hat man nur ein Div zur Auswahl.
Das richtige hat man, wenn alles zusammen markiert ist. Das CSS
Symbol 
nun
anklicken und den Reiter Rahmen auswählen. Bei width wählen wir,
bzw. geben wir 970px ein. Px steht für Pixel (Maßeinheiten
Web). Immer darauf achten, dass man die Maßeinheit nicht
vergisst mit anzugeben. Unter margin geben wir dem Rahmen einen
Außenabstand von z.B. 10 Pixel auf allen Seiten. Macht zusammen
990px in der Breite. Dadurch steht der Rahmen nicht direkt am
Bildrand an. Sieht meiner Meinung nach besser aus. Wird mehr als
990 Pixel zusammen als Breite vergeben, wird ein hässlicher
Scroll-Balken eingeblendet.
Flexible Breite: Statt der 1000px geben wir hier
z.B. 98% ein und Außenabstand (margin) 1 %. Macht zusammen 100 %
Bildbreite aus.
Nicht vergessen: Immer mal wieder zwischendurch abspeichern!
Div-Container richtig anordnen
Dem Menü links soll nicht über die ganze breite gehen. Daher
weisen wir ihm eine Breite zu. Dazu klicken wir in die Menü links
Linie und klicken unten das letzte DIV-Element an, nun sollte die
ganze Linie markiert sein. Im Menü oben klicken wir auf das CSS
Symbol und
wählen den Reiter Rahmen aus. Bei width legen wir z.B. 150px fest.
Nun hat das Menü links nur noch 150 Pixel breite und rechts davon
scheint die Rahmenfarbe hervor.
Vom Rahmen wollen wir nichts mehr sehen, daher löschen wir nun die Hintergrundfarbe. Klicken in die Rahmenlinie und klicken unten auf das div, so dass alles markiert ist. CSS aufrufen und bei Farben die Hintergrundfarbe (background-color) entfernen, indem man transparent auswählt.
Ganz oben gibt es noch eine Rahmen Linie, in der wir auch die Beschreibung drin haben (Rahmen). Da der Rahmen Div-Container nur die Größe der Website festlegen soll, aber sonst nicht zu sehen sein soll, löschen wir diese Linie. Als erstes entfernen wir das Wort Rahmen, dann drücken wir die Entf-Taste, nichts mehr vom Rahmen zu sehen. Wenn alles richtig gemacht wurde, darf sich die Hintergrundfarbe des Headers nicht geändert haben. Ansonsten mit Strg+Z (engl. Ctrl+Z), bzw. Bearbeiten –> Rückgängig das ganze zurücksetzen und wiederholen. Wenn nun in eine Linie geklickt wird, müssen zwei div unten zu sehen sein. Der erste ist für den Rahmen und markiert alles, der zweite div steht für Zeile in der man ist.
Jetzt ist neben dem Menü links noch immer ein Loch und der Inhalt steht darunter. Nun setzen wir den Inhalt auf die rechte Seite. Dazu werden wir mit dem float Befehl die Menü Box nach links fließen lassen. Wir klicken in den Menü Links Bereich und markieren die Zeile durch das anklicken des div unten (der zweite und letzte, da der erste der Rahmen ist). Rufen CSS auf und wählen Format. Bei float geben wir left an, für links, übernehmen und fertig. Der Inhalt ist nun rechts vom Menü links.
Wer nun auf die Idee kommt, dass das Menü doch besser auf der rechten Seite aufgehoben ist, der wählt statt left nun right aus. Das Menü ist nun rechts und der Inhalt links.
Wie muss man sich das mit float vorstellen?
Jetzt ist noch alles ganz nah beieinander. Mit CSS könnte man den ganzen Div-Container Höhen zuweisen, alternativ ginge das auch mit der Entertaste. Aber wir lassen das besser so, denn durch die Inhalte (Text und direkt eingefügte Bilder, nicht durch Hintergrundbilder) die wir einfügen, werden sich die Boxen anpassen.
Weiter mit Teil 3: Website fertig stellen und verlinken