Responsive-Webdesign-Tutorial
Prototyp A – Statisches 960px-Layout mit HTML 4.01 und CSS2
6.1. Vorgehensweise bei der Entwicklung
Der übliche Entwicklungsprozess einer (statischen) Website besteht – neben Vorbesprechungen / Klären der Anforderungen – aus der Erstellung eines grafischen Layouts (häufig in Photoshop oder GIMP) und dem anschließenden „Slicen“ (= Zerlegen des Layout-Bildes in für das Web passende Einzelbilder).
Auf den letzten Teil konnte bei der Entwicklung verzichtet werden. Einzig grafisches Element ist das fiktive Unternehmenslogo. Es genügte also ein Entwurf auf Papier, der im Anschluss in HTML (und CSS) überführt wurde. Die nachfolgende Abbildung zeigt den bereits fertigen Prototyp A:
6.2. HTML-Code (index.html)
Nachfolgend wird der vollständige HTML-Code der Startseite („Home“, index.html) gezeigt und erklärt. Wichtige Passagen wurden gelb hervorgehoben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Unternehmenswebsite, Variante A / Startseite</title> <!-- Stylesheet fuer Layout und Inhalt --> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <!-- Umschliessendes DIV, um die Seitenbreite festzulegen --> <div id="CONTAINER"> <div id="left"> <div id="logo"> <a href="index.html" style="display:block;"> <img border="0" src="logo.png" alt="Logo der Unternehmenswebsite"> </a> </div> <!-- Navigationsmenue --> <div id="leftmenu"> <ul> <li class="active"><a href="index.html">Home</a></li> <li><a href="leistungen.html"> Dienstleistungen</a></li> <li><a href="galerie.html">Galerie</a></li> </ul> </div> </div> <!-- Ende left --> <div id="content"> <h1>Beispielhafte Unternehmenswebsite</h1> <h2>Prototyp A - fixes Layout / Startseite</h2> <p> Dieser Prototyp zeigt ein einfaches Layout eines fiktiven Unternehmens aus dem Bereich Fotografie und hat folgende Eigenschaften: </p> <ul> <li>Erstellt in <b>HTML 4.01</b>.</li> <li>Formatierungen mit CSS Level 2 (<b>CSS 2.1</b>), mit Ausnahme von <i>border-radius</i> und <i>text-shadow</i>.</li> <li>Der Container (#CONTAINER) hat eine <b>fixe Breite von 960px</b> und zentriert die Website horizontal.</li> <li>Schriftgrößen und alle <b>Breiten-/Höhenangaben erfolgen in Pixel</b> (px), es gibt keine relativen (%) Werte.</li> <li>Auflösungen unterhalb von - typischen - 1024px in der Breite erzeugen einen horizontalen Scrollbalken.</li> <li>Auf mobilen Geräten muss die Website mit Touchgesten vergrößert werden. Große leicht anklickbare Links im Button-Stil unterstützen die Navigation.</li> </ul> </div> <!-- Ende content --> <div id="footer"> <!-- Fusszeile mit Impressum etc. --> <div id="footermenu"> <ul> <li><a href="../browserweiche/">Browserweiche</a></li> <li><a href="../variante-b/">Variante B</a></li> <li><a href="../variante-c/">Variante C</a></li> </ul> </div> <div id="footerinfo"> © 2013 <a href="http://www.webanwendungen.at/" target="_blank">Ing. Andreas Hammer</a> </div> </div> <!-- Ende Footer --> </div> <!-- Ende CONTAINER --> </body> </html>
Doctype ist HTML 4.01 Transitional, auf XHTML wurde verzichtet, da Browser XHTML (mit Content-Type text/html) ohnehin als HTML 4 verarbeiten (siehe Abschnitt 2.1). Es gibt ein zentrales Stylesheet (style.css), das unten näher beschrieben wird. Das DIV mit der ID #CONTAINER legt die Seitenbreite fest (width: 960px) und wird auch dazu verwendet, die Website horizontal zu zentrieren. Das DIV #left mit fester Breite (width: 220px) floatet nach links (float: left) und enthält das Logo und das Hauptnavigationsmenü. Das Menü nutzt ein (Farb-)Highlighting mit der Klasse „active“. Dies ist eine der wenigen Stellen, wo sich die statischen HTML-Seiten (index.html, leistungen.html, galerie.html) – abgesehen vom Content-Bereich – unterscheiden. #content mit fester Breite (width: 658px) enthält den Inhaltsbereich und wird mit 240px vom linken Rand (margin-left: 240px) auf der rechten Seite positioniert. Die Fußzeile (#footer) beendet das float (clear: both) und enthält neben Copyright-Informationen auch eine (Neben-)Navigation, mit der leicht zwischen den einzelnen Varianten/Prototypen gewechselt werden kann.
Die Unterseite „Dienstleistungen“ (leistungen.html) benötigt keine weitere Erklärung. Den vollständigen Quellcode entnehmen Sie bitte der verlinkten Beispieldatei.
Die Seite „Galerie“ (galerie.html) unterscheidet sich – neben Menü und Titel/Überschriften – von der Startseite im Inhaltsbereich:
<div id="content"> <h1>Beispielhafte Unternehmenswebsite</h1> <h2>Prototyp A - fixes Layout / Galerie</h2> <p> Die nachfolgende - fiktive - Bildergalerie zeigt Beispiele aus dem Portfolio des Unternehmens: </p> <div id="galerie"> <div class="bild"><img src="person_klein.png" alt="Beispielbild, Person"></div> <div class="bild"><img src="person_klein.png" alt="Beispielbild, Person"></div> <div class="bild"><img src="person_klein.png" alt="Beispielbild, Person"></div> <div class="bild"><img src="person_klein.png" alt="Beispielbild, Person"></div> <div class="bild"><img src="person_klein.png" alt="Beispielbild, Person"></div> <div class="bild"><img src="person_klein.png" alt="Beispielbild, Person"></div> </div> </div> <!-- Ende content -->
Das DIV #galerie beinhaltet alle Galeriebilder, mit float: left werden die inneren DIVs eingeschlossen („Set a float to fix a float“, vgl. Müller). Die DIVs mit der Klasse „bild“ lassen die Bilder nach links floaten (float: left) und definieren Außenabstände (margin).
Müller, P. 2011, Das große Little Boxes-Buch - Webseiten gestalten mit HTML & CSS. Grundlagen, Navigation, Inhalte, YAML und mehr, 1. Auflage, Markt+Technik Verlag, München.
Das Beispielbild (Dummy-Bild) „person_klein.png“ wurde im PNG-Format mit transparentem Hintergrund abgespeichert. Im HTML-Code gibt es keine Breiten- (width) und Höhenangabe (height) beim Bild, es wird also in Originalgröße angezeigt (200x200px; deshalb zuvor mit einem Bildbearbeitungsprogramm auf die richtige Größe verkleinert).
Die nächste Abbildung zeigt einen Screenshot der Seite „Galerie“:
6.3. Stylesheet (CSS), style.css
Nachfolgend werden wichtige Passagen des Stylesheets (style.css von Prototyp A abgedruckt. Wichtige Zeilen wurden wieder markiert (und werden oder wurden bereits erklärt). Viele Zeilen sind „nur“ für unwesentliche Design-Elemente zuständig und wurden deshalb ausgelassen. Es wurde versucht, Design-Aspekte auf ein Minimum zu reduzieren (unter Beachtung der Anforderungen aus Kapitel 5). Den vollständigen Quellcode entnehmen Sie bitte wieder der verlinkten Beispieldatei.
/* ###################### ##### (a) LAYOUT ##### ###################### */ /* "global reset" */ * { margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; background-color: #F3F3F3; } /* Umschliessendes DIV, Seitenbreite */ div#CONTAINER { width: 960px; /* Zentrieren der Seite und Abstaende*/ margin: 20px auto 10px auto; } div#left { width: 220px; float: left; /* DIV des Menues floated nach links, #content mit margin-left rechts daneben */ text-align: center; /* Logo und Menue zentrieren */ background-color: white; border: 1px solid black; border-radius: 15px 15px 0 0; /* runde Ecken, nur Optik */ } div#leftmenu li.active a { background-color: orange; } /* Inhaltsbereich */ div#content { overflow: hidden; width: 658px; margin-left: 240px; min-height: 450px; padding: 30px 30px 30px 30px; background-color: white; border: 1px solid black; border-radius: 15px 15px 0 0; /* runde Ecken, nur Optik */ } div#galerie { float: left; /* Bilder einschliessen */ } /* ein Einzelbild in der Galerie */ div.bild { float: left; margin: 0px 10px 10px 0; } /* Fusszeile */ div#footer { clear: both; padding-bottom: 0px; margin-top: 20px; margin-bottom: 20px; text-align: center; } /* ###################### ##### (b) Inhalt ##### ###################### */ div#content h1 { margin-bottom: 10px; font-size: 22px; text-shadow: 1px 1px 2px #999999; }
Am Anfang werden mit einem „global CSS reset“ Innen- und Außenabstände (padding, margin) aller Elemente auf 0px gesetzt. Sonst gelten die Standardwerte des jeweiligen Browsers (aus dessen Browser-Stylesheet), was zu unterschiedlichen Darstellungen führen kann. Die hier verwendete Variante ist eine (ausreichende) „Minimalversion“, eine bessere und vor allem ressourcen-schonendere Alternative wird u.a. bei Müller vorgestellt.
Müller, P. 2011, Das große Little Boxes-Buch - Webseiten gestalten mit HTML & CSS. Grundlagen, Navigation, Inhalte, YAML und mehr, 1. Auflage, Markt+Technik Verlag, München.
Die Standardschriftgröße in <body> wird auf 16px gesetzt, das ist meist auch bereits die Browservorgabe. Dieser Wert wird später noch von Bedeutung sein. Mit border-radius bekommen mehrere DIVs runde Ecken zugewiesen, was ausschließlich als Design-Verbesserung gedacht ist. Unterstützt ein Browser (bspw. Internet Explorer 7) diese Anweisung nicht, werden normale Ecken angezeigt (Progressive Enhancement; der Inhalt bleibt in jedem Fall zugänglich). Auf Abwärtskompatibilität zu bestimmten älteren Browsern mit CSS-Browser-Präfixen wurde bewusst verzichtet (-moz-border-radius, -webkit-border-radius; u.a. vgl. Müller). text-shadow weist den Überschriften einen (leichten) Schatten zu.
Müller, P. 2011, Das große Little Boxes-Buch - Webseiten gestalten mit HTML & CSS. Grundlagen, Navigation, Inhalte, YAML und mehr, 1. Auflage, Markt+Technik Verlag, München.
Hinweis: border-radius und text-shadow gehören bereits zu CSS3. Lässt man beide Anweisungen weg, kann die CSS-Datei auch erfolgreich als CSS 2.1 validiert werden.
Der Inhaltsbereich (#content) nutzt overflow: hidden, um gefloatete DIVs einzuschließen. Anderenfalls würden die Galeriebilder (-DIVs) aus dem Content-Bereich hinauslaufen.
Müller, P. 2011, Das große Little Boxes-Buch - Webseiten gestalten mit HTML & CSS. Grundlagen, Navigation, Inhalte, YAML und mehr, 1. Auflage, Markt+Technik Verlag, München.
| Vorheriges Kapitel | Nächstes Kapitel |