Anzeige
Tutorialbeschreibung

Professionelle Websites: Seitenlayouts Teil 1 - Seitenlayouts mit CSS

Professionelle Websites: Seitenlayouts Teil 1 - Seitenlayouts mit CSS

Das Kapitel über Seitenlayouts zeigt, wie Sie mit diesen Bordmitteln professionelle und standardkonforme Seitenlayouts erstellen können. Gestalterische Kreativität und Genialität bei der Komposition von Farbe und Form ist zwar nicht vermittelbar, wohl aber das Handwerkszeug und die richtigen Kniffe, um gestalterische Wünsche umsetzen zu können. Das Kapitel hat Workshop-Charakter.


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education .


1 Seitenlayouts mit CSS

Wenn Webdesigner der ersten Generation Webseitenlayouts entwarfen, griffen sie dabei zu zwei wesentlichen Mitteln: einem so genannten blinden Pixel und blinde Tabellen. Der blinde Pixel war eine 1 × 1 Pixel große Grafik, die im GIF-Format abgespeichert wurde. Die Farbe des einen Pixels war egal, aber sie musste als transparent definiert sein. Der blinde Pixel konnte nun in img- Elemente eingebunden werden, wobei als Höhe und Breite der Grafik angegeben wurde, was gerade benötigt wurde. Auf diese Weise verschafften sich die Designer in Zeiten von Netscape 3 bis 4 und Internet Explorer 3 Platz auf der Seite, erzwangen Abstände und Ränder. Das zweite Mittel, die blinde Tabelle, war ebenso wichtig. Zwischen <body> und </body> wurde stets erst einmal das Gerüst einer Tabelle mit 100% Breite und 100% Höhe, aber ohne sichtbaren Rahmen notiert. Weil sich die Browser zum Teil starke Interpretationsfreiheiten erlaubten, waren meist noch ein, zwei innere Tabellen nötig, um mehrspaltige Layouts einigermaßen festzuzurren.

Hier hat mittlerweile ein deutlicher Paradigmenwechsel stattgefunden. Die attraktive optische Verteilung von Inhalten auf einer Seite wird heute nicht mehr über Tabellen gelöst, sondern über Bereiche, die mithilfe von CSS auf gewünschte Weise positioniert, zueinander ausgerichtet und ins Verhältnis gesetzt werden. Zu verdanken ist dieser Paradigmenwechsel in erster Linie den unermüdlichen Standardisierungsanstrengungen des W3-Konsortiums, gepaart mit der Bereitschaft und der Einsicht der Browser-Anbieter, diese Standards strikter einzuhalten.

Weiterführende Links:
CSS-Anwendungsbeispiele:
http://css.fractatulum.net/beispiele.htm
CSS-Zengarden (das gleiche Manifest in lauter unterschiedlichen, meditativ schönen
Layouts):
http://www.csszengarden.com/
Little Boxes (CSS-Boxen für Seitenlayouts):
http://www.thenoodleincident.com/tutorials/
box_lesson/boxes.html
Open Source Web Design (fertige, frei verfügbare Layouts):
http://www.oswd.org/
Slants (Polygon-Effekte mit CSS):
http://infimum.dk/HTML/slantinfo.html



1.1 Typische Seitenaufteilungen

Bevor wir auf die Techniken eingehen, werfen wir einen Blick auf typische Seitenaufteilungen.

Portallayout
Ein so genanntes Portal verwendet die Optik von Bauten wie dem Arc de Triumphe in Paris: zwei mächtige Stützen links und rechts und ein üppiger Oberbau.
Das Portallayout signalisiert einerseits überlegene Ruhe und Ausgewogenheit, andererseits aber auch eine Fülle von Informationen und unterschiedlichen Angeboten. Verwendet wird es gerne von Online-Zeitungen und -Zeitschriften, aber auch von großen Unternehmen oder Sites, die sich als werbefinanziertes Linkportal zu allgemeinen Themen wie Gesundheit oder Recht verstehen.
Eine der Säulen, meist die linke, wird für eine Navigationsleiste verwendet. Die andere Säule dient zum Featuring bestimmter Themen, aber auch für Werbung. Der Kopfbereich enthält meist auch Werbung sowie Logos, eine Navigation zum Direktaufruf häufig verlangter Unterseiten, ein Eingabefeld zum Durchsuchen der Site oder Login-Felder für Mitglieder, die sich nicht öffentliche Unterseiten aufrufen möchten.
Die Technik hinter Sites mit solchen Layouts besteht meist in dynamisch generierten Seiten. Das Bearbeiten der Seiten erfolgt in der Regel durch mehrere Redakteure über ein Content Management System.

Bilder

Abbildung 5.1: Portallayout (hier: Süddeutsche Zeitung)

Winkellayout
Im Gegensatz zur Metapher »Portal« ist diese hier eine Neuschöpfung, die einfach einen ebenfalls häufig vorfindbaren Typ von Seitenlayout beschreiben soll. Beim Winkellayout wird der Seiteninhalt links und oben von optisch hervorgehobenen Leisten flankiert.
Das Winkellayout signalisiert mehr Dynamik als das Portallayout. Die Navigation ist dominanter, es wird mehr Hypertext-Feeling vermittelt. Der Inhalt erhält auch optisch mehr Raum.
Geeignet ist dieses Universallayout eigentlich für fast alle Arten von Seiten, deren Aufgabe nicht darin besteht, durch Originalität zu bestechen, sondern durch Funktionalität bei umfangreichen Inhalten. Für die Hauptnavigation links steht genügend Raum zur Verfügung. Die Kopfleiste wird in der Regel für ein Logo verwendet, das sich gut in Winkelnähe oben links platzieren lässt. Die restliche obere Leiste enthält je nach Projekt Werbebanner und/oder eine Zweitnavigation zum Direktaufruf häufig verlangter Unterseiten oder eine Möglichkeit zum Durchsuchen der Site.

Bilder

Abbildung 5.2: Winkellayout (hier: Wortschatzlexikon der Uni Leipzig)

Individuelles Layout mit verteilten Bereichen
Solche Layouts zeichnen sich dadurch aus, dass sie zwar ebenfalls mit verteilten und aufgabenspezifischen Bereichen arbeiten, diese aber einfach mal anders und unorthodoxer verteilen als bei den zuvor genannten beiden Typen.
Solche freieren Layouts werden meist für individuelle kleinere Homepages, Auftritte oder Webpräsenzen benutzt, die in der Regel auch keine Werbebanner schalten. Das Ziel ist eine ordentliche, professionelle Präsentation mit Betonung des eigenen Akzents. Daher wird auf solchen Sites auch eher mal mehr Farbe gewagt.

Bilder

Abbildung 5.3: Unorthodoxe Bereichsaufteilung (hier: Homepage einer Travestie-Tanzband)

1.2 HTML- und CSS-Basis für ein Portallayout


Eines muss man bei allem Hype, den das boomende CSS ausgelöst hat, zugeben: Für ein dreispaltiges Layout war eine einfache Tabelle mit drei Zellen, wie man sie früher benutzt hat, gar nicht so ungeeignet. Dennoch werden wir die Lösung über CSS-positionierte Bereiche vorstellen, da sie die modernere und zukunftsorientiertere ist.

Schritt 1: Das HTML-Rohgerüst
Listing 5.1: HTML-Rohgerüst für Portallayout

Bilder

Es fällt auf, dass das Markup sehr aufgeräumt wirkt. Den sichtbaren Dateikörper prägen vier Bereiche mit den id-Namen header (dies wird der Kopfbereich), navigation (der Navigationsbereich als linke Portalsäule), content (der inhaltstragende Bereich in der Mitte) und features (ein Bereich für Hinweise auf Highlights oder Aktuelles, die rechte Portalsäule). Innerhalb der div-Bereiche wird testweise einfach ein Wort geschrieben, das den entsprechenden Bereich benennt.

Wie erkennbar ist, geht aus dem Markup nichts über die optische Verteilung der Bereiche hervor. Würde die Seite ohne CSS angezeigt, dann würde einfach zuerst der Kopfbereich, dann die Navigation, dann der Inhalt und zum Schluss die Feature-Hinweise angezeigt. Abgesehen von der fehlenden Optik ist das durchaus eine sinnvolle Aufteilung, die in dieser Form etwa auch für eine akustische Ausgabe der Seite geeignet ist.

Im Dateikopf wird mittels <link>-Tag eine externe CSS-Datei namens styles.css eingebunden. Da das Layout einheitlich für etliche Seiten gelten soll, ist das Arbeiten mit extern definierten CSS- ormaten die einzig sinnvolle Lösung.

Schritt 2: Das CSS-Rohgerüst
Listing 5.2: Rohgerüst der CSS-Datei »styles.css« für ein Portallayout

Bilder

In dieser Phase definieren wir lediglich die Formate für die formale Verteilung der Bereiche.

Das Layout arbeitet mit einer Mischung aus positionierten und nicht positionierten Bereichen. Warum das so ist, werden wir noch erläutern. Damit jedoch auch die nicht positionierten Bereiche korrekt platziert werden, müssen die Default-Ränder, die der Browser dem sichtbaren Dateikörper spendiert, auf 0 gesetzt werden. Der erste Definitionsblock setzt Rand (margin) und Innenabstand (padding) für die Elemente html und body auf 0. Außerdem wird Weiß explizit als Standardhintergrundfarbe definiert.

Über die Syntax mit dem Gatterzeichen (#id-Name) werden die vier Bereiche definiert. Die Definitionen sorgen für die optische Verteilung der Bereiche als Portal. Der Kopfbereich (das div- Element mit dem id-Namen header) steht im normalen Textfluss, wird also nicht positioniert. Da das Element in HTML unmittelbar hinter dem einleitenden <body>-Tag notiert ist, beginnt es in der oberen linken Ecke des Anzeigefensters. Da dessen Ränder explizit auf 0 gesetzt wurden, ist sichergestellt, dass der div-Bereich wirklich an der Pixelposition 0,0 beginnt.
Zur Sicherheit erhält der Bereich headers jedoch auch noch mal einen expliziten Rand von 0 Pixel. Ebenfalls zur Sicherheit bekommt er explizit die volle verfügbare Breite von 100% zugewiesen. Zwingend nötig ist diese Angabe für Browser, die das Box-Modell von CSS richtig interpretieren, allerdings nicht, da Blockelemente, die sich im normalen Textfluss befinden, ohnehin auf die volle verfügbare Breite ausgedehnt werden sollen.

Als Höhe werden 100 Pixel festgelegt. Platz genug für die typischen Elemente eines solchen Kopfbereichs, wie Logo, Werbebanner, Suche und Highlight-Navigation.
Die beiden Säulen des Portals, also die Bereiche mit den id-Namen navigation und features, werden absolut positioniert, also aus dem normalen Textfluss herausgenommen. Daher erhalten sie auch Angaben zu top (Anfangsposition von oben) und left (Anfangsposition von links) bzw. right (Anfangsposition von rechts). Da die Anzeigebreite des Fensters nicht bekannt ist, ist die Eigenschaft right sehr hilfreich, um die Position der rechten Säule von rechts her zu definieren.

Beide Säulen erhalten eine Breite von 180 Pixel. Das sollte genügen, um Navigationslinks und Feature-Blöcke unterzubringen. Immerhin gehen dem eigentlichen Inhalt dadurch ja schon 360 Pixel Breite ab. Bei einigen portablen Geräten bekommen wir dadurch schon ein Problem mit der Anzeigebreite. Andererseits sind Geräte mit Mini-Displays nun mal nicht wirklich geeignet, um Seiten mit Portal-Charakter, also mit großer gleichzeitiger Angebotsfülle, anzuzeigen. Bei Geräten ab der typischen Standardbreite von 640 Pixel bleibt in unserem Layout aber zumindest schon ein gerade noch akzeptabler Mittelstreifen von 280 Pixel für den Inhalt übrig.

Der inhaltstragende Bereich, also das div-Element mit dem id-Namen content, bleibt wie der Kopfbereich im Textfluss, wird also nicht positioniert, um flexibel zu bleiben. Seine »Positionierung« wird stattdessen über definierte Ränder nach oben, links und rechts erreicht. Nach oben (margin-top) werden 0 Pixel definiert. Da ja der Inhaltsbereich ebenso wie der Kopfbereich im normalen Textfluss bleibt, beginnt er einfach direkt unterhalb des Kopfbereichs, und zwar mit sicherheitshalber erzwungenen 0 Pixel Abstand. Rechts und links (margin-left und margin-right) wird dagegen ein Rand von je 180 Pixel gesetzt. Das entspricht jeweils der Breite der Säulen.

Alle Innenabstände (padding) der vier Bereiche werden explizit auf 0 gesetzt. Einen optisch ordentlichen Abstand zum Bereichsrand werden wir stattdessen später bei den inneren Elementen erzeugen.
Die Bereiche header, navigation und features haben je eine Hintergrundfarbe erhalten. Beim Inhaltsbereich ist dies nicht nötig, da er die explizit definierte Hintergrundfarbe des Elternelements, also des body-Elements, erbt.
Zusammen mit den Testtexten in jedem Bereich können wir das Grundgerüst des Layouts nun im Browser wie abgebildet optisch gut nachvollziehen.
Es fällt auf, dass die Bereiche navigation, content und features keine definierte Höhe haben. Im Test sind sie überhaupt nur andeutungsweise sichtbar, weil sie ein Wort als Inhalt enthalten haben. Es wäre durchaus möglich, eine Höhe vorzugeben. Da die Bereiche jedoch unterschiedliche Inhalte erhalten können, was zu unterschiedlichen Realhöhen führt, werden wir später eine andere Lösung bevorzugen, für die ein kleines JavaScript erforderlich ist.

Bilder

Abbildung 5.4: Rohgerüst des Portallayouts

Schritt 3: CSS-Definitionen für Elemente des Kopfbereichs
Nachdem die grundsätzliche Bereichsaufteilung realisiert ist, können wir das Stylesheet um »innere« Elemente erweitern. Im Kopfbereich soll links oben ein Logo platziert werden, dessen Ausmaß 82 Pixel Breite × 87 Pixel Höhe beträgt. Im HTML-Quelltext fügen wir das Bild in den Kopfbereich ein:

<div id="header">
<img id="logo" src="logo.gif" alt="News Web">
</div>

Das Bild erhält einen id-Namen logo. Ansonsten werden nur die Quelle und der obligatorische Alternativtext angegeben. Alle weitere Daten werden im Stylesheet notiert, und zwar wie folgt:

#logo {
position:absolute;
top:5px;
left:12px;
width:82px;
height:87px;
}

Durch #logo wird der Bezug zum Element id="logo" hergestellt. Das betroffene Element, also die Logografik, wird absolut mit geeignetem Abstand oben und links positioniert. Breite und Höhe der Grafik werden ebenfalls hier angegeben.

Bilder

Abbildung 5.5: Im Kopfbereich platziertes Logo

Ähnlich verfahren wir mit dem Werbebanner. Die Bannergrafik muss jedoch wie bei solchen Bannern üblich in einen Link eingebettet werden. Den HTML-Code des Kopfbereichs erweitern wir wie folgt:

<div id="header">
<img id="logo" src="logo.gif" alt="REAL NEWS Logo">
<a id="banner" href="http://www.example.org/">
<img id="banner_pic" src="banner.png" alt="Werbebanner">
</a>
</div>

Das a-Element des Links erhält den id-Namen banner und die dadurch anklickbare Grafik den id- amen banner_pic. Bei der Grafik werden wieder nur die Quelle und der Alternativtext notiert. Den Rest erledigen wir im Stylesheet:

#banner {
position:absolute;
top:5px;
left:196px;
}
#banner_pic {
border:none;
width:468px;
height:60px;
}

Das a-Element, adressiert durch den Selektor #banner, wird absolut an geeigneter Stelle positioniert. Für die Grafik wird neben Breite und Höhe (468 × 60 Pixel ist übrigens eines der Standardformate für Werbebanner) auch die Angabe border:none notiert. Dadurch wird ein Rahmen um die Grafik unterdrückt, was in diesem Fall wichtig ist, da der Browser ansonsten wegen der Position innerhalb des Links einen Rahmen um die Grafik zeichnen würde. Die Grafik soll jedoch nur durch Überfahren mit der Maus oder Ansteuern mit der Tabulatortaste als Link erkennbar sein, da die Bannerfunktion Anwendern hinlänglich bekannt ist.

Bilder

Abbildung 5.6: Kopfbereich mit Logo und Banner

Die Bannergrafik ist natürlich ein vorläufiger Dummy, ebenso wie die im Banner-Link angegebene Adresse.
Zuletzt soll nun unterhalb des Banners, unmittelbar am unteren Rand des Kopfbereichs, eine Leiste für »Hotlinks« platziert werden. Diese werden wir zunächst als Grafik realisieren. Um die darin sichtbaren Schaltflächen als Link zu definieren, können wir beispielsweise eine verweis-sensitive Grafik daraus machen. In Abschnitt 5.2 werden wir darauf eingehen, wie sich attraktiv aussehende Linkleisten auch mithilfe von HTML und CSS realisieren lassen.

Die Grafik wird ähnlich wie das Logo absolut positioniert. In HTML sieht der Kopfbereich am Ende folgendermaßen aus:

<div id="header">
<img id="logo" src="logo.gif" alt="REAL NEWS Logo">
<a id="banner" href="http://www.example.org/">
<img id="banner_pic" src="banner.png" alt="Werbebanner">
</a>
<img id="top_navigation" src="topnav.gif"
alt="Obere Navigation">
</div>

Das Stylesheet wird für die Grafik mit dem id-Namen top_navigation wie folgt erweitert:

#top_navigation {
position:absolute;
top:79px;
left:196px;
border:none
width:459px;
height:21px;
}

Da die Grafik eine Höhe von 21 Pixel hat, bekommt sie als Wert für top 79 Pixel zugewiesen. Dadurch schließt die Unterseite der Grafik bei 100 Pixel ab, was genau der Unterkante des Kopfbereichs entspricht. Links wird die Grafik bündig zum Banner ausgerichtet. Auch die Elemente des Inhaltsbereichs werden später bündig dazu positioniert.

Bilder

Abbildung 5.7: Kopfbereich mit Logo, Banner und Topnavigation

Schritt 4: CSS-Definitionen für Elemente des Inhaltsbereichs
Im Inhaltsbereich soll üblicher Text stehen – im Wesentlichen also Überschriften, Textabsätze, Listen und Tabellen. Die entsprechenden Elemente sollen sich optisch ins Layout einpassen und mithelfen, der Site Wiedererkennungswert zu verleihen. In unserem Beispiel definieren wir in der CSS-Datei folgende Formate:

Bilder

Mit margin-left und margin-right wird für alle inhaltstragenden Blockelemente, die direkt innerhalb des Inhaltsbereichs vorkommen (h1, h2, p.text, p.intro, ul, ol, table.text), ein Randabstand links und rechts von je 16 Pixel definiert. Dies bezieht sich auf das Elternelement. Da es sich um Elemente handelt, die in dieser Form im div-Bereich mit dem id-Namen content vorkommen sollen, entsteht ein absoluter Rand von 196 Pixel links und rechts. Damit beginnen diese Elemente auch bündig unterhalb des Werbebanners und der Topnavigation. Solche »gedachten Linien« sind für die ruhige und saubere Wirkung eines Layouts ungemein wichtig.

Bilder

Abbildung 5.8: Portallayout mit Textformaten und Beispieltext

Als Grundschriftart für den Fließtext wird eine Serifenschrift (Century Schoolbook) gewählt. Als generische Schriftart wird folglich serif angegeben.
Es werden nur zwei Überschriftenebenen benötigt – daher erhalten nur die Überschriftenebenen 1 und 2 spezifische Formate. Mithilfe von Rahmenlinien, Schriftgrößen und Abständen werden die Überschriftenebenen optisch so definiert, dass sie mit dem Layout harmonieren und ihre Textstrukturierungsfunktion optisch unterstrichen wird.
Normaler Fließtext wird als Blocksatz ausgerichtet (text-align:justify). Auch das prägt bei längeren Texten die Gesamtwirkung des Layouts deutlich in Richtung Ruhe und Ausgeglichenheit. Ein Signal der objektiven Vermittlung von News geht davon aus. Eine Sonderstellung nimmt der Intro- bsatz unterhalb der Seiten-h1-Überschrift ein. Er wird kursiv mit Flattersatz formatiert und beginnt bündig unterhalb des Textes der h1-Überschrift.

Schritt 5: CSS-Definitionen für Inhalte der Säulenbereiche
Im Navigationsbereich werden wir fürs Erste – ähnlich wie bei der Topnavigation – einfach eine Grafik einfügen. Für die rechte Säule, also den Feature-Bereich, definieren wir Boxen, die kleinen Fenster ähneln und damit signalisieren, dass sie einen Ausblick auf Feature-Themen geben. Dazu werden zwei CSS-Formate benötigt:

Bilder


Bilder

Abbildung 5.9: Portallayout mit Hauptnavigation und Feature-Boxen

Verwendet wird für beide Boxtypen das neutrale div-Element. Die Definitionen sind so gesetzt, dass jeweils zwei hintereinander notierte div-Elemente der Klasse box_title und box_content eine vollständige Box bewirken

Die Boxentitel sind dunkelgrau (background-color:rgb(130,130,130)) und erhalten weiße Schrift (color:white) in der serifenlosen Schriftart Tahoma (font-family:Tahoma,sansserif), die auch bei den Linktexten der Navigationsleisten oben und links verwendet wird. Die Boxinhalte dagegen erscheinen in schwarzem Text (color:black) auf weißem Grund (background-color:white), wobei die Schriftart die gleiche ist wie im Inhaltsbereich, jedoch kleiner (font-size:80%). Die Boxinhalte erhalten einen Rahmen (border:rgb(130,130,130) solid 1px) in der Farbe der Boxentitelhintergrundfarbe. Links und rechts haben beide Boxtypen einen Abstand von 8 Pixel (margin-left:8px, margin-right:8px). Boxentitel haben oben einen Abstand von 16 Pixel (margin-top:16px), was für den nötigen Abstand zwischen den Feature-Boxfenstern sorgt.

Schritt 7: Anpassung der Höhen von Navigation, Inhalt und Features
Mit den Navigationsgrafiken, dem formatierten Fließtext im Inhalt und den gestalteten Feature-Boxen haben wir nun bereits eine attraktiv aussehende Seite. Was jedoch noch negativ auffällt, sind die unterschiedlichen Längen der beiden Säulen. Da diese nicht bis zum Artikelende herunter reichen, wirken sie auch gar nicht wie »bodenständige« Säulen. Hier macht sich ein Nachteil von mehrspaltigen Layouts mit CSS gegenüber klassischen Tabellenlayouts bemerkbar, der von Vertretern der neuen Layoutgeneration gerne unter den Tisch gekehrt wird. Bei Tabellen entsteht das Problem der unterschiedlichen Längen nicht, solange die Spalten eine einzige Tabellenzeile darstellen, bei der immer alle Zellen die Höhe der längsten haben.

Mithilfe eines kleinen JavaScripts können wir die Spalten unseres Portallayouts jedoch an der Artikelspalte ausrichten. Da das Script auf jeder Seite erneut seinen Dienst versehen muss, wird es in einer separaten JavaScript-Datei notiert. Die Datei hat folgenden Inhalt:

Bilder

Listing 5.3: JavaScript für Layoutanpassung bei Portallayout

Auf den Quelltext gehen wir an dieser Stelle nicht näher ein. Das Script enthält eine Funktion namens correct_layout(), die dafür sorgt, dass alle drei Portalspalten, also die div- Bereiche mit den id-Namen navigation, content und features, die gleiche Höhe erhalten. Die JavaScript-Datei muss allerdings im HTML-Dokument eingebunden werden und die Funktion correct_layout() muss aufgerufen werden. Der Beginn des HTML-Quelltextes unserer Beispielseite lautet daher:

Bilder


Die externe JavaScript-Datei – wir haben sie layout.js benannt – wird im HTML-Dokumentkopf über das script-Element (<script...></script>) eingebunden. Im src-Attribut wird die Datei als URI referenziert. Im type-Attribut wird der Mime-Type für JavaScript (text/javascript) angegeben.

Im einleitenden <body>-Tag wird ein Event-Handler onLoad= notiert. Dies ist ein HTMLAttribut, das eine Verknüpfung zu JavaScript-Code herstellt. Der Event onLoad tritt ein, wenn das HTML- okument vollständig an den Browser übertragen und geladen ist. Ist dies der Fall, wird die Funktion correct_layout() aufgerufen, welche die Höhenkorrektur der drei Layoutspalten besorgt.

Für die heute verbreiteten Browser mit grafischer Oberfläche haben wir nun ein ordentliches Portallayout gebastelt. Wir verwendeten dazu zeitgemäßes, schlankes HTML in Verbindung mit CSS. Einer der Ansprüche an solche Seiten ist jedoch auch, dass sie mit nicht grafischer oder nicht visueller Benutzer-Software gut zugänglich sind.

Ein hervorragendes Werkzeug zum Austesten der »Accessibility« ist der textbasierte Browser Lynx, den es für MS-DOS sowie für alle Arten von Unix-Shells gibt. Lynx beherrscht HTML 4.01 bestens, kann aber verständlicherweise kein CSS umsetzen. Unsere Portalseite sieht in Lynx wie abgebildet aus. Optik spielt bei der Beurteilung keine große Rolle. Wichtig ist, dass die Lektüre des Inhalts nachvollziehbar ist. Angezeigt werden auch keine Grafiken, sondern die im alt-Attribut notierten Alternativtexte. Hier zeigt sich, wie wichtig es ist, diese Texte so zu formulieren, dass sich der Sinn erschließt.

Bilder

Abbildung 5.10: Mit JavaScript angepasste Spaltenhöhen beim Portallayout

Bilder

Abbildung 5.11: Portallayout-Seite im textbasierten Lynx-Browser

Da wir anstelle einer echten Navigation vorläufig nur Grafik-Dummies notiert haben, gibt es noch keine Links außer dem Werbebanner. Obere Navigation und Hauptnavigation sind jedoch erkennbar oben angeordnet und etwaige Links würden an den entsprechenden Stellen angezeigt. Anschließend folgt der Artikeltext, dank Verwendung üblicher HTML-Textelemente ordentlich dargestellt. Zum Schluss werden die Feature-Boxen angezeigt, einfach mit Boxenüberschrift und Inhalt der Boxen.

Da die beiden Säulen für Navigation und Feature-Boxen absolut positioniert sind, könnten sie im HTML-Quelltext auch an anderer Stelle notiert werden, etwa nach dem Artikelinhalt. In diesem Fall würde der Artikel in Lynx und vergleichbarer Ausgabe-Software vor der Hauptnavigation angezeigt. Solche Entscheidungen in Bezug auf den Accessibility- Aspekt sollten Sie in Ihre Layout- berlegungen stets mit einbeziehen.

1.3 HTML- und CSS-Basis für ein Winkellayout

Als Nächstes werden wir Schritt für Schritt ein typisches Winkellayout entwickeln.

Schritt 1: Das HTML-Rohgerüst
Beim HTML-Rohgerüst entscheiden wir uns für folgende Struktur:

Listing 5.4: HTML-Rohgerüst für Winkellayout

Bilder

In diesem Fall verwenden wir eine verschachtelte div-Struktur. Es gibt zwar Hardliner, die in solchen Fällen bereits wieder von tagsoup (zu Deutsch: Auszeichnungssuppe) sprechen, doch erstens stört diese Struktur in Hinblick auf die Zugänglichkeit des Layouts in nicht grafischen oder nicht visuellen Umgebungen keineswegs und zweitens hat sie unbestreitbare Vorteile, wie wir noch zeigen werden.
Auf der Ebene unterhalb des body-Elements werden zwei Basisbereiche definiert: zuerst ein Bereich mit dem id-Namen top_section und anschließend ein Bereich mit dem Namen main_section. Während der Bereich top_section zunächst leer bleibt, wird der Bereich main_section mit zwei inneren div-Bereichen gefüllt. Diese erhalten die sprechenden id- Namen navigation und content.

Die gewünschte optische Verteilung der Bereiche realisieren wir wieder mithilfe von CSS. Da das Layout für viele Seiten gelten soll, werden die entsprechenden Formatdefinitionen in einer externen Stylesheet-Datei namens styles.css vorgenommen. Diese wird über das style-Tag im HTML- Dokumentkopf eingebunden.

Schritt 2: Das CSS-Rohgerüst
In unserem Beispiellayout wollen wir mit einem Farbverlauf arbeiten. Dazu werden folgende Grafiken erstellt:

Bilder

Abbildung 5.12: Grafiken für Farbverlauf

Die obere Grafik, 640 × 100 Pixel groß, wird als Hintergrund für die obere Leiste dienen, die untere Grafik, 100 × 240 Pixel groß, wird für die linke Leiste benötigt. Damit sind die nötigen Vorarbeiten erledigt. Die CSS-Datei erhält zunächst folgenden Inhalt:

Listing 5.5: Rohgerüst der CSS-Datei »styles.css« für Winkellayout

Bilder

Da die meisten Elemente unseres Layouts nicht positioniert werden, sondern im normalen Textfluss bleiben, werden Rand (margin) und Innenabstand (padding) der Elemente html und body auf 0 gesetzt. So ist sichergestellt, dass die Inhalte exakt oben links beginnen. Die globale Hintergrundfarbe wird auf ein ganz helles, gegen Weiß tendierendes Gelborange gesetzt. Damit die rechte Leiste optisch zustande kommt, wird für den gesamten body- Bereich eine Hintergrundgrafik bestimmt – die kleinere der beiden Farbverlaufsgrafiken (back-v.png). Diese soll jedoch nicht über den gesamten Bereich wiederholt werden, sondern nur eine linke Spalte bilden. Mit background- epeat:repeat-y wird genau dieser Effekt erreicht.

Die Definitionen für #top_section beziehen sich auf das div-Element mit dem entsprechenden id-Namen. Der Bereich ist nicht positioniert. Da er als im HTML-Quelltext unmittelbar hinter dem einleitenden <body>-Tag notiert wird, beginnt er dank der auf 0 gesetzten Werte exakt links oben im Anzeigefenster. Als Höhe werden die gewünschten 100 Pixel festgelegt. Rand und Innenabstand werden auf 0 gesetzt. Ferner wird mit background- image die Hintergrundgrafik für den Farbverlauf eingebunden und zwar die breitere der beiden – wir haben sie back-h.png benannt. Wichtig ist auch die Angabe background-repeat:no-repeat, die dafür sorgt, dass die Grafik nur einmal angezeigt wird und kein Tapeteneffekt entsteht. Damit das hellgelbe rechte Ende der Grafik nahtlos in den weiteren Hintergrund übergeht, wird der entsprechende Farbwert als Hintergrundfarbe (background-color) für den Bereich definiert.

Der gesamte Bereich unterhalb des div-Bereichs top_section wird durch den Bereich main_section abgedeckt. Für main_section sind keine besonderen Definitionen vorgese- hen. Ränder und Innenabstände werden sicherheitshalber auf 0 gesetzt. Die Abstände zu den Leisten oben und links werden stattdessen später bei den inhaltstragenden Elementen definiert.

Bleiben die Formatdefinitionen für die beiden div-Bereiche, die innerhalb von main_section notiert wurden: navigation und content. Da die Inhalte dieser beiden Bereiche nebeneinander stehen, aber sich nicht gegenseitig beeinflussen sollen, wird der eine Bereich (navigation) absolut positioniert. Da er sich nicht innerhalb eines anderen positionierten Elements befindet, beziehen sich die Angaben zu top und left auf die obere linke Ecke des Anzeigebereichs. Beim Bereich content wird die »Positionierung« über eine Angabe zu margin-left so vom linken Rand des Elternelements abgesetzt, dass keine Kollision mit navigation entsteht, zumal navigation auch eine Breite von 240 Pixel vorgegeben bekommt. Das Elternelement von content ist main_section. Dieses beginnt links an Position 0, also sind die 240 Pixel Linksabstand bei content zugleich der Abstand vom linken Rand des Anzeigebereichs.

Der Bereich content erhält schließlich noch links und oben je eine kräftige, warmrote Rahmenlinie oben. Links wird die gleiche Rahmenlinie erscheinen, jedoch ist sie dort Teil der Hintergrundgrafik (back-v.png) Durch die Rahmenlinien entsteht noch mal eine optische Betonung des Winkeleffekts.

Bilder

Abbildung 5.13: Rohgerüst des Winkellayouts

Die linke Leiste mit der Verlaufsgrafik passt sich in der Höhe automatisch der Länge des Seiteninhalts an. Der Grund ist, dass die Hintergrundgrafik, welche die linke Leiste optisch darstellt, dem body-Element zugewiesen wurde. Deshalb benötigen wir in diesem Beispiel kein JavaScript für Höhenanpassungen.

Schritt 3: CSS-Definitionen für Elemente des Kopfbereichs
In Winkelnähe oben links soll natürlich ein identitätsstiftendes Logo platziert werden. Weiterhin soll in der oberen Leiste ein Eingabefeld mit Absende-Button zum Durchsuchen der Site platziert werden. Die entsprechenden Elemente in HTML sind eine Grafikreferenz für das Logo sowie ein Formularelement mit einem Eingabefeld und einem Absende-But- ton. Im Kopfbereich, also im div-Bereich mit dem id-Namen top_section, werden die Elemente notiert:

<div id="top_section">
<img src="logo.gif" id="logo" alt="Logo">
<form id="search" action="search.php" method="get">
<span id="search_label">Suche nach:</span>
<input type="text" id="search_text" name="search_text"
value="Suche">
<input type="submit" src="ok.gif" id="search_button"
value="OK">
</form>
</div>

Um die Elemente wunschgemäß zu positionieren, erhalten sie id-Namen. Das Stylesheet
der externen CSS-Datei wird wie folgt erweitert:

Bilder

Die Logografik (id-Name logo) und das Suchformular (id-Name search) werden absolut positioniert. Bezug für die Oben-links-Definitionen ist die obere linke Ecke des Anzeigefensters, da sich die Elemente nicht innerhalb eines anderen positionierten Elements befinden.

Bilder

Abbildung 5.14: Kopfbereich mit Logo und Suchformular

Die Logografik füllt den Winkel und reicht dabei in die linke Leiste hinein. Das Formular ist bündig zum Winkel, den die roten Rahmen bilden und nah zum Inhalt platziert. Der Inhalt ist zum Logotext »Linkweb« mittig ausgerichtet. Dies sind wieder »gedachte Linien«, von denen früher bereits die Rede war.

Die Formularelemente werden mit CSS ansprechend und passend zum Layout formatiert.
Der Raum oberhalb des Suchformulars könnte noch genutzt werden, etwa für einen waagerechten
Ticker. Andererseits unterliegen viele Webdesigner dem Zwang, jedes Fleckchen
zu füllen. Sofern es dazu keinen zwingenden Grund gibt, ist dies allerdings nicht
sehr anwenderfreundlich. Je mehr unterschiedliche Bereiche auf einer Seite nach Auf-
merksamkeit heischen, desto eher wird der Betrachter überfordert. Er gerät in den Stress, etwas zu verpassen.

Schritt 4: CSS-Definitionen für Navigation und Elemente des Inhaltsbereichs
Für die Navigation basteln wir wie schon im Beispiel des Portallayouts zunächst eine Dummy- rafik, die einer späteren Navigation ähnelt. In HTML wird die Grafik in den div-Bereich navigation eingebettet:

<div id="navigation">
<img id="navigation_pic" src="navi.gif" alt="Navigation">
</div>

Die Grafik erhält den id-Namen navigation_pic. Im Stylesheet werden ihre genaue Lage und ihre Ausmaße angegeben:

#navigation_pic {
margin-top:0px;
margin-left:25px;
width:190px;
height:281px;
}

Bilder

Abbildung 5.15: Winkellayout mit Grafik zur Demo einer möglichen Navigation

Die inhaltstragenden Elemente werden wie folgt definiert:

Bilder


Bilder

Abbildung 5.16: Winkellayout mit Inhalt

Auf der gesamten Seite wird – mit Ausnahme der Schrift im Logo – Verdana als Grundschrift benutzt. Bei Nichtverfügbarkeit kommt eine andere serifenlose Schrift zum Einsatz. Alle Blockelemente, die direkt innerhalb des div-Bereichs content vorkommen werden, erhalten links und rechts einen Rand von 20 Pixel (margin-right:20px, margin-left:20px). Die eigentlichen Texte von Überschriften, Textabsätzen und Listen erhalten jedoch zusätzlich einen linken Innenabstand von 25 Pixel (padding-left:25px). Dies erlaubt den Effekt, dass die unteren Rahmenlinien für Überschriften 1. und 2. Ordnung (border-bottom: rgb(175,35,35) solid 1px bzw. border-bottom: rgb(175,35,35) solid 1px) ausgerückt gegenüber dem Text erscheinen. Die unteren Rahmenlinien der Überschriften korrespondieren optisch mit den Linien zwischen den Einträgen der Navigationsleiste.

Für Hyperlinks werden geeignete Pseudoelemente definiert. Links zu noch nicht besuchten Zielen erscheinen wie der Fließtext schwarz (color:black), werden jedoch zur Kenntlichmachung wie üblich unterstrichen. Außerdem werden sie fett dargestellt (fontweight: bold). Da einige Anwender das Unterstreichen von Links im Browser ausgeschaltet haben, wird es mit text-decoration:underline explizit festgelegt. Links zu bereits besuchten Zielen werden in abgeschwächtem Grau (color:gray) dargestellt, und Links, die gerade mit der Maus überfahren oder angeklickt werden (a:hover und a:active), werden im Rot der Rahmenfarben dargestellt (color: rgb(175,35,35)).

Bilder

Abbildung 5.17: Winkellayout-Seite im textbasierten Lynx-Browser

Die bereits vom Portallayout her bekannte Gegenprobe gegen den Textbrowser Lynx ergibt ein zufriedenstellendes Ergebnis. Die Seite ist inhaltlich gut nachvollziehbar und sinnvoll strukturiert.

1.4 HTML- und CSS-Basis für ein freies Bereichslayout

Im dritten Workshop-Beispiel soll ein Layout erstellt werden, dass vom Aufbau her etwas ungewöhnlicher ist. Wir entscheiden uns für eine »Fenster-Metapher«. Der Inhalt soll innerhalb des Browser-Fensters in einem Bereich erscheinen, der selber nicht scrollt, sondern stattdessen eigene Scrollleisten für übergroße Inhalte haben soll. Der Bereich hat wie bei Anwendungs- oder Dialogfenstern üblich eine Titelleiste, welche den Titel der aktuellen Seite anzeigt. Am unteren Rand soll eine Hot-Link-Navigationsleiste für Links zu häufig verlangten Zielen angebracht werden. Und rechts befindet sich ein ähnlich gestaltetes Extrafenster für die vollständige Navigation. Um die optische Wirkung zu erhöhen, wer- den wir ein dezentes »Desktop-Bild« einsetzen, das sich über das gesamte Browser-Fenster erstreckt.

Schritt 1: CSS und HTML für das Rohgerüst
Zunächst wählen wir eine Hintergrundgrafik aus. Die Wahl fällt auf das Motiv eines Blitzes, der den Nachthimmel erhellt.

Bilder

Abbildung 5.18: Grafik für den »Desktop« des geplanten Layouts

Wichtig ist, dass die Grafik nicht zu viel Speicher beansprucht und trotzdem gut aussieht. Als Größe wählen wir 500 × 375 Pixel und speichern sie im JPEG-Format ab, da dieses bei solchen Grafiken am besten komprimiert. Wir erreichen eine akzeptable Dateigröße von 30 Kbyte.

Die Layoutvorgaben speichern wir wieder in einer separaten CSS-Datei. Zunächst werden dort folgende Formate definiert:

Listing 5.6: Rohgerüst der CSS-Datei »styles.css« für freies Layout

Bilder

Für die Basiselemente html und body werden alle Ränder und Abstände auf 0 gesetzt. Breite und Höhe werden explizit auf die Größe des Anzeigefensters gesetzt (100%). Die gesamte Anzeigefläche erhält eine schwarze Hintergrundfarbe.
Als Nächstes werden Formate für ein Element mit dem id-Namen desktop definiert. In HTML wird es sich dabei um ein div-Element handeln. Eigentlich könnte man das img- Element zum Referenzieren der Gewittergrafik, welches den id-Namen desktop_image erhält, auch direkt absolut positionieren. Doch in der Strict-Variante von HTML dürfen keine Inline-Elemente unmittelbar im Dateikörper stehen, sondern nur Block-Elemente. Daher der umgebende div-Bereich. Dieser wird absolut positioniert und beginnt ganz links oben im Anzeigefenster an Position 0,0. Ränder und Abstände werden auf 0 gesetzt und Breite und Höhe des Anzeigebereichs werden voll ausgenutzt. Die Angabe z-index:1 ist von Bedeutung, da sich bei diesem Layout mehrere positionierte Bereiche überlagern werden. Durch die Eigenschaft z-index wird die gewünschte Schichtenverteilung explizit gesteuert.

Das Bild selbst erhält für Breiten- und Höhenangaben Prozentwerte. Es wird dadurch fast, aber nicht ganz über den gesamten Anzeigebereich gestreckt. Unten und rechts bleibt ein schwarzer Streifen übrig – bedingt durch die schwarze Hintergrundfarbe des body-Elements.

Ein Element mit dem id-Namen credits wird schließlich noch absolut positioniert, und zwar am unteren Rand (bottom:0px). Es handelt sich um Text, der im unteren schwarzen Streifen erscheinen soll.

Das passende HTML-Gerüst sieht wie folgt aus:

Listing 5.7: HTML-Rohgerüst für freies Layout

Bilder

Die externe CSS-Datei wurde unter dem Namen styles.css gespeichert. Über das übliche <link>-Tag wird sie im HTML-Dokument eingebunden.

Im body-Bereich werden die beiden div-Bereiche mit den id-Namen desktop und credits notiert. Innerhalb des desktop-Bereichs wird das img-Element für die »Desktopgrafik« notiert. Sie erhält den für die CSS-Formatdefinitionen passenden id-Namen desktop_picture.

Im Bereich mit dem id-Namen credits wird ein geeigneter Text notiert. An dieser Stelle könnten natürlich auch spannendere Inhalte stehen, wie etwa ein wechselnder Spruch zum Tage oder ein Hinweis, ob der Homepage-Besitzer über ICQ gerade online erreichbar ist oder nicht.

Im Browser sieht das Ergebnis nun schon recht attraktiv aus. Beim Verändern der Fenstergröße bleibt das Layout erhalten. Die Grafik wird vom Browser entsprechend gezoomt.

Zur Anzeigequalität der Grafik ist zu bemerken, dass diese stark von den Fähigkeiten des Browsers abhängt, eine Grafik nichtlinear zu strecken. Die Grafik selbst ist zwar im Seitenverhältnis 4:3 abgespeichert worden, was auch dem Verhältnis von typischen Bildschirmauflösungen wie 1024 × 768 Pixel entspricht. Doch letztlich bestimmen viele Faktoren die Größe des Anzeigefensters im Browser und wir verzichten darauf, dem Anwender irgendeine Größe dieses Fenster aufzwingen zu wollen. Da die Grafik aber noch vom inhaltstragenden »Fenster« und dem für die Navigation überdeckt wird, spielen kleine Auflösungsgrobheiten bei der Grafik letztlich keine so große Rolle.

Bilder

Abbildung 5.19: Rohgerüst des freien Layouts
Schritt 2: CSS-Definitionen für das Inhalts- und das Navigationsfenster
In der CSS-Datei werden folgende Formate für die beiden »Fenster« definiert:

Bilder

Die »Fenster« werden grundsätzlich durch die Bereiche mit den Namen main_window für den Inhalt und nav_window für die Navigation definiert. Diese werden absolut positioniert, jedoch ausschließlich mithilfe von Prozentangaben. Die beiden Bereiche für die Fenster werden dadurch so im Anzeigefenster ausgerichtet, dass sie dort insgesamt einigermaßen zentriert und mittig erscheinen. Beim Verändern der Größe des Browser-Fensters werden die Größen der Fensterbereiche automatisch angepasst.

Als besonderer Effekt wird bei beiden Bereichen mit Transparenz gearbeitet. Da die CSS- 3.0- Eigenschaft opacity im Internet Explorer noch nicht funktioniert, dagegen jedoch die hauseigene Angabe zum Alpha-Filter (filter:alpha(...)), werden im Beispiel beide Eigenschaften notiert. Eine Hintergrundfarbe (background-color) wird ebenfalls angegeben. Dadurch wird auch sichergestellt, dass Browser, die keine der beiden Angaben zur Transparenz interpretieren (wie z.B. Opera bis einschließlich Version 7), zumindest die Hintergrundfarbe anzeigen, deren Farbwert sich am Hintergrundbild orientiert.

Wichtig ist auch die Angabe z-index:3 bei den Definitionen zu main_window und nav_window. Nur durch den höheren z-index-Wert erscheinen beide Bereiche über dem zuvor definierten Bereich desktop.
Weitere Bereiche mit den Namen main_window_title, main_window_content, nav_window_title und nav_window_content definieren innere Bereiche von main_window bzw. nav_window. Diese Bereiche werden nicht positioniert, sondern bestimmen den Textfluss innerhalb ihrer Elternbereiche. Durch eine dunklere Hintergrundfarbe werden die Titelzeilenbereiche von den Inhaltsbereichen optisch getrennt. Die beiden Bereiche für Inhalte (main_window_content und nav_window_content) sollen gescrollt werden können, wenn ihr Inhalt die definierten Werte für Höhe und Breite sprengt. Dies besorgt die Definition overflow:scroll. Schließlich erhalten die Bereiche noch je eine Angabe zum Rahmen rechts und beim Inhalt auch unten.

Innerhalb der Fenstertitelzeilen sollen aus struktureller Sicht Überschriften stehen. Daher werden zwei spezielle Formate für Überschriften 1. Ordnung definiert, die sich optisch als Titelleisteneintrag eignen, aber logisch gesehen die Funktion zentraler Überschriften erfüllen.

Der body-Bereich des HTML-Dokuments wird um die entsprechenden Elemente und ihre
gedachte Struktur erweitert. Der folgende Quelltextausschnitt zeigt den gesamten Inhalt
zwischen <body> und </body>:

Bilder

Bilder

Abbildung 5.20: Transparente »Fenster« für Inhalt und Navigation im freien Layout

Bilder

Abbildung 5.21: Beispiellayout im Browser ohne Transparenz (hier: Opera)

Die div-Struktur aus main_window mit den Unterbereichen main_window_title und main_window_content sowie aus nav_window mit nav_window_title und nav_window_content ist gut erkennbar und in ihrer Komplexität noch überschaubar.

Schritt 3: CSS-Definitionen für Inhalt und Navigation
Für die Navigation erstellen wir wie auch in den beiden zuvor behandelten Layouts eine Grafik, die eine Navigationsleiste simuliert. Für die Textinhalte im Bereich main_window_content werden im Stylesheet folgende Formate festgelegt:

Bilder

Alle zu erwartenden inhaltstragenden Blockelemente erhalten Randabstände links und rechts von je 10 Pixel. Dies ist der Abstand zum Rand des simulierten Fensters. Auffällig ist, dass für alle Elemente eine fette Schriftart vorgesehen ist. Mit Arial wird außerdem eine Schriftart gewählt, die alles andere als exotisch ist, dafür aber wohl mit am besten lesbar. Ungewöhnliches bei der Schriftformatierung ist auch gar nicht mehr nötig – das Layout selbst bietet Individualität genug. Stattdessen steht bei der Schriftformatierung die Lesbarkeit auf dem farbigen Hintergrund mit transparent durchscheinendem Desktopbild im Vordergrund.

Überschriften werden nur in der 2. Ordnung benötigt. Diese erhalten eine schwarze Rahmenlinie unterhalb. Die Schriftgröße von 125% orientiert sich an der Schriftgröße des Elternelements. Da dieses ein div-Element ist und div-Elemente im Browser per Voreinstellung die Schriftgröße von normalem Fließtext haben, erscheinen h2-Überschriften also in einer Schriftgröße von 125%, gemessen an normalem Fließtext. Der normale Fließtext für Elemente wie Textabsätze, Listenpunkte oder Tabellenzellen wird auf 90% gesetzt. Das ist etwas kleiner als normal, sollte aber immer noch gut lesbar sein, sofern der Anwender keine extrem kleine Schriftgröße als Default- Schriftgröße eingestellt hat.

Bilder

Abbildung 5.22: Freies Layout mit Inhalt

Bilder

Abbildung 5.23: Seite mit freiem Layout im textbasierten Lynx-Browser

Alles in allem ist unser »freies Layout«, das sich in dieser Form eher für private Homepages oder vergleichbare Auftritte eignet, eine Mischung aus gewagten Mitteln, die mit einigen älteren Browsern gar nicht gut aussehen, und Rücksichtnahme auf Usability und unterschiedliche Umgebungsbedingungen und Ausgabemedien. Auch der Check mit dem textbasierten Lynx-Browser zeigt ein strukturell sinnvolles Erscheinungsbild. Dank der absoluten Positionierung wäre es übrigens ebenso möglich, die Navigation im HTML Quelltext oberhalb des Inhalts zu notieren. Bei einem Browser wie Lynx würde dann zuerst die Navigation und anschließend der Textinhalt angezeigt.

Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von RFChris
  • 06.08.2013 - 02:54

Immer gut, wenn man vorhandenes Nicht/Wissen mal mit anderen Quellen beseitigen/vergleichen kann. Danke.

Portrait von MaoMao
  • 09.01.2013 - 16:53

Gute Tutorial leicht erklärt.

Portrait von Leoni_1402
  • 11.12.2012 - 14:48

Wie man bei Facebook jetzt sagen würde "Gefällt mir - daumen hoch" :P
Danke fuer das ausführliche Tutorial :)

Portrait von ero77
  • 17.09.2011 - 00:37

Ich habe mir noch nicht alles durchgelesen aber was ich so gesehen habe ist genau das was ich suche um mit css anzufangen...

Danke

Portrait von arcom
  • 06.06.2010 - 05:45

........................................................................

Portrait von CrazyAndre33
  • 21.12.2009 - 01:44

gutes Tutorial kann bestimmt gebrauchen

Portrait von susi171188
  • 18.09.2009 - 11:15

war gut gemacht. danke dafür!

Portrait von williamo
  • 21.08.2009 - 14:53

gute weiterführung des ersten teils

Portrait von fneurieser
  • 11.07.2009 - 14:30

eigentlich schade dass hier ein buch kapitelweise ohne listings wiedergegeben wird.

man ist wohl besser beraten sich das buch zu kaufen

Portrait von greske
  • 27.05.2009 - 13:14

Danke für das schöne tutorial.
Werde bestimmt einiges davon gebrauchen können

Portrait von westja
  • 16.03.2009 - 21:32

Sehr verständlicher, ausführlicher und präzise!
Bin gerade erst angefangen mit html aber da will ich auch mal hin kommen

Portrait von Crusher
  • 19.12.2008 - 00:38

Schöner Workshop,
es gibt zwar immer mehrere Wege zum Ziel, aber ich find das hier dargestellte gut und verständlich erklärt. Es ist nachvollziehbar und gut umsetzbar.

Portrait von Nerosmeel
  • 12.04.2008 - 15:26

ist ganz ok, für nen Auszug aus einem Buch

Portrait von schluggy
  • 05.04.2008 - 22:44

Ich kann mich dem Vorredner nur anschließen.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 05.04.2008 - 21:49

zum Tut: verständlich und sehr ausführlich!
zum Thema "Barrierefreiheit", Browserkompatibilität, ..: in diesem Tut wurde halt der Weg mit Javascript realisiert (Länge der Säulen); persönlich würde ich es auch so wie von Uepfel beschrieben realisieren.
Aber "Jedem das Seine".

Portrait von Uepfel
  • 05.04.2008 - 14:13

Ich bin ehrlich gesagt nicht so begeistert.

Ist zwar sehr ausführlich, aber für den Auszug aus einem Buch, das (neben dem Kaufpreis von ca. 60€) den Anspruch erhebt, wirklich professionelle Techniken vorzustellen, gibt's hier doch ein paar Schwächen:

Beispiel erste Layout:
Wieso jemand, der in seinem Text soviel Wert auf "Barrierefreiheit" legt und sich schon Gedanken darüber macht, wie die Seite in einem rein textbasiertem Browser aussieht, die Schriftgrößen aber über px-Werten definiert, womit sie sich im IE-6 nicht mehr vergrößern lassen (Ich will keinen neuen Browser installieren, nur weil ich meine Brille verlegt habe), ist mir schleierhaft.

Das JavaScript-Workaround für die Leisten-Hintergründe wäre in diesem Fall auch unnötig gewesen. Wenn ich beiden Leisten feste px-Werte für die Breite zuweise, dann benötige ich nur eine Grafik für jede der beiden Navigation - eine im body-bg und eine in nem Container-bg.


Natürlich ist das pingelig. Aber bei einem Auszug aus einem Buch mit solchem Anspruch bin ich pingelig ;)

Portrait von lomapatta
  • 05.04.2008 - 02:21

Sehr verständlicher, ausführlicher und präziser Workshop. Wenn der Rest des Buches genauso gut ist, dann ist es eine lohnende Anschaffung.

Portrait von MBAAC
  • 05.04.2008 - 01:23

dank für das schöne tutorial

genau das richtige fürs wochende :)

Portrait von Dark_Slyder
  • 05.04.2008 - 01:22

gefällt mir. Kann man sich immer mal anschaun ;)

Gruß

Dark_Slyder

Portrait von leg0lyZe
  • 04.04.2008 - 23:36

danke echt cool, hilfreich manchmal das nochmal durchzulesen

x
×
×