25. Jan 2009 |
|
| Sie wollen auf einer Web-Seite Bilder und Texte an bestimmten Stellen unterbringen. Die Elemente sollen ihre Positionen auch behalten, wenn sich die Größe des Browser-Fensters ändert. Text und Bilder lassen sich auf Web-Seiten mit Tabellen, sogenannten "blinden Tabellen", oder per CSS (Cascading Stylesheets) positionieren. Tabellen haben einige Nachteile: Layout-Änderungen erfordern immer einen umständlichen Eingriff in den HTML-Code, und die genaue Positionierung ist nur mit Tricks möglich, etwa durch den Einsatz unsichtbarer Grafiken. Weitere Nachteile, und wie sie sie vermeiden können, finden Sie von selfhtml.org in der Webseite "Allgemeines zu Tabellen für Web-Seiten-Layouts" erläutert. Dafür ist die Darstellung ohne weitere Anpassungen praktisch in allen aktuellen Browsern gleich. Mit CSS können Sie das Layout vom Inhalt der Seite trennen – dadurch ist es später leichter, Änderungen vorzunehmen, die dann auch für alle Seiten auf einmal gelten. Außerdem ist eine pixelgenaue Positionierung möglich. Allerdings bereiten einige CSS-Strukturen vor allem dem Internet Explorer Schwierigkeiten, so dass für diesen spezielle Anpassungen nötig sein können. Mit welchen Hilfsmitteln lassen sich derartige CSS-Anweisungen erstellen? CSS-Anweisungen lassen sich z.B. mit Hilfe des kostenlosen Web-Editors NVU komfortabel einbauen. Fügen Sie zuerst den Text ein, und markieren Sie diesen. Klicken Sie dann auf das Symbol „Layer“ (rechts neben dem Auswahlfeld „Schriftart wählen“) in der Format-Symbolleiste. NVU umgibt den Text dann mit einem Rahmen, den Sie beliebig auf der Seite positionieren und in der Größe anpassen können. Auf die gleiche Weise bringen Sie Grafiken und weitere Textbereiche jeweils in eigenen Rahmen unter und ziehen sie auf der Seite an die gewünschten Stellen. Die Rahmen dürfen sich dabei auch überschneiden. Ob ein Element dabei im Vorder- oder Hintergrund steht, bestimmen Sie per Klick auf eine der beiden Schaltflächen neben dem Symbol „Layer“. Tipp: Wenn Sie mehrere Seiten im gleichen Layout erstellen möchten, sollten Sie den CSS-Code in einem externen Stylesheet unterbringen. Dabei hilft Ihnen der Editor, den Sie über „Extras > CSS-Editor“ aufrufen. Darüber festgelegte Rahmen sollten Sie in der Normalansicht allerdings nicht verändern. NVU fügt den CSS-Code sonst als Style-Attribut in den jeweiligen Tag und nicht in das externe Stylesheet ein.
|
|||
| Zuletzt aktualisiert am Sonntag, den 25. Januar 2009 um 18:12 Uhr |
