Anleitung KompoZer 2 – Website feste oder flexible Breite erstellen
Feste Breite: Als erstes erstellen wir ein
Design für die Auflösung von 1024 x 768 Pixel bzw. 600. Hierfür
legen wir den Rahmen mit der Breite fest. Mit F11 rufen wir CSS
auf und klicken auf #Rahmen. Bei Box 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
vergessen wird mit anzugeben. Unter Box geben wir dem Rahmen einen
Außenabstand von z.B. 10 Pixel auf allen Seiten. Macht zusammen
990 Pixel. Dadurch steht der Rahmen nicht direkt am Bildrand an.
Sieht meiner Meinung nach besser aus. Mit Vorschau kann das ganze
immer wieder im Browser überprüft werden. Bei mehr als 990 Pixel
wird ein Scroll-Balken eingeblendet, wenn der Bildschirm eine
Auflösung von 1024 Pixel hat.
Flexible Breite: Statt der 970px geben wir hier
z.B. 98% ein und Außenabstand 1 %. Macht zusammen 100 % Bildbreite
aus.
Div-Container richtig anordnen
Der Rahmen, den wir erstellt haben, ist nur dazu da, dass wir
die Seitenbreite festlegen können. Im Moment kann man seine Farbe
zwischen jedem Div-Container sehen. das wollen wir nicht. Daher
ordnen wir die Div-Container direkt untereinander an. Zuerst
klickt man in die Header Linie ans Ende des Wortes. Mit Entf-Taste
die Zwischenlinie des Rahmens löschen, das ganze mit allen anderen
Elementen bis nach unten wiederholen. Übrig bleibt die oberste
Rahmen Linie.
Es gibt nun 2 Möglichkeiten:
- Man behält den Rahmen und legt mit F11 und Box einen Rahmen um die ganze Seite mit Innenabstand (Pixel oder Prozent, je nachdem, ob flexible oder feste Freite), oder
- Löscht den ganzen sichtbaren Rahmen, so dass nichts mehr zu sehen ist
Den sichtbaren Rahmen werden wir löschen, da das schwieriger
ist. Mit der Entf-Taste geht das ganze diesmal nicht, denn dann
würde der Header verschwinden.
Wir müssen den HTML-Tag für Zeilenumbruch entfernen, der nennt
sich <br>. Dazu müssen wir die Ansicht wechseln, am besten geht
das indem man unten unten auf Quelltext geht 
,
ansonsten über das Menü Ansicht. Zu sehen sollte nach <body> dies
hier: <div id=”Rahmen”>Rahmen<br>. Am Anfang die Namenszuweisung
des Div-Containers mit Rahmen, dann das was in der Linie sichtbar
geschrieben ist – Rahmen und am Ende der HTML-Tag <br> für
Zeilenumbruch. Wir entfernen das geschriebene und den
Zeilenumbruch (Rahmen<br>) und lassen <div id=”Rahmen”> stehen.
Wenn man nun in die WYSIWYG Ansicht zurück wechselt, ist der
rahmen + Beschriftung verschwunden. Da wir keinen sichtbaren
Rahmen mehr haben, können wir auch die Farbe entfernen. Mit F11
ins CSS wechseln und dort bei der Div ID #Rahmen den Hintergrund
löschen. So halten wir unsere CSS Stylesheet Datei klein, indem
wir unnötiges wieder löschen.
Design Grundgerüst fertigstellen
Als nächstes geht es an das festlegen der Höhen und Breiten der ganzen Bereiche. Bisher wird das ganze mit der Entertaste = Zeilenumbrüche gestaltet, oder durch den Inhalt der sich in Boxen befindet. Mit CSS (F11 – Div ID wählen – Box) lassen sich die Höhen gestalten, wie wir das schon mit der Breite getan haben. Das kann jeder so gestalten wir er es für richtig hält. Darauf brauchen wir nicht weiter eingehen, da wir das schon auf der vorherigen Seite gelernt haben.
Beschäftigen wir uns mit dem 2 Menü und dem Inhalt. Die sollen
statt untereinander nebeneinander stehen. Daher weisen wir dem 2
Menü eine geringere Breite zu z.B. 150 Pixel (F11). Neben dem Menü
erscheint nun ein Loch mit der Farbe des Rahmens (keine). Dort
soll unser Inhaltsbereich hin.
In CSS gibt es das Float um das umzusetzen. Float heißt soviel wie
im Wasser schweben/treiben.
CompoZer nennt das ganze Puffer und ist im CSS Reiter Box zu
finden.
Wir nehmen links. Siehe da, der Inhaltsbereich ist nun rechts vom
Menü 2.
Wie muss man sich das mit float vorstellen?
Fehlersuche: Sollte das nicht der Fall sein, dann liegt das an
der Formatierung des Inhalt Bereiches. Entweder man hat dem Inhalt
eine Breite zugewiesen, oder eine Position. Die müssen entfernt
werden.
Ich nehme mal nicht an, dass es daran liegt, dass man zuerst den
Inhalt, dann das Menü 2 erstellt hat, habe das extra auf der
vorherigen Seite zwei mal erwähnt.
Die Breite passt sich nach dem Rahmen an, den wir der Seite
gegeben haben, je nachdem ob man nun eine feste oder flexible
Breite eingestellt hat, verändert sich der Inhaltsbereich
dementsprechend. Daher ist keine Breitenangabe nötig. wird aber
eine breite angegeben, die Breiter ist, als der freie Platz neben
dem Menü 2, rutscht der Inhalt nicht nach oben.
Eine Positionsangabe brauchen wir nicht. Der Inhalt soll einfach
nach dem Menü 2 kommen.
Weiter mit dem 3. Teil: Website fertig stellen und verlinken