HTML & CSS für Einsteiger (Teil 41): Das Layout entwickeln

In den folgenden Video-Trainings werde ich euch zeigen, wie sich ein Webseiten-Layout Schritt für Schritt umsetzen lässt. Dafür gibt es ganz unterschiedliche Herangehensweisen. Oft werden die Layouts in Photoshop erstellt. Die einzelnen Seitenelemente schneidet man anschließend aus und fügt sie mittels CSS und HTML wieder als eine Webseite zusammen. Genauso wird das auch hier gehandhabt. Allerdings setze ich anstelle von Photoshop das kostenlos verfügbare GIMP ein. Die beschriebenen Schritte lassen sich so aber auch in Photoshop nachvollziehen.
... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!
Wer sich mit der Entwicklung von Webseiten auskennt, weiß, dass man dabei meistens nicht mit der HTML-Struktur anfängt. Stattdessen nimmt man sich ein Grafikprogramm und baut dort das Layout der Seite. (Wer in einer Agentur arbeitet, bekommt dann das Layout vom Grafiker oder dem Kunden geliefert). Danach lautet die Aufgabe, aus diesem Layout die Seite zu bauen. Genau darum soll es jetzt gehen.
Im Zusammenhang mit dem Nachbauen von Layouts werden euch immer wieder die beiden Begriffe Slicing und Dicing begegnen. Damit ist eigentlich nichts anderes gemeint, als dass man die Vorlage bzw. das Design nimmt, es in seinem Grafikprogramm zerschneidet und dann per HTML wieder zusammensetzt.
Das richtige Grafikprogramm
Nun ja, jeder hat seine Vorlieben, welche Software er oder sie am liebsten einsetzt. So natürlich auch bei den Grafikprogrammen. Im Zusammenhang mit professionellem Webdesign sieht das Ganze allerdings etwas anders aus. Dort wird fast ausschließlich mit Photoshop gearbeitet. Tatsächlich liegen die meisten Design-Entwürfe als PSD-Datei vor. Und eben dieses PSD-Format lässt sich nicht in allen Programmen öffnen oder gar bearbeiten.Wer kein Photoshop hat, ist übrigens nicht völlig aufgeschmissen. Eine mögliche Alternative stellt GIMP dar. Das Programm könnt ihr kostenlos von der Seite http://www.gimp.org/ herunterladen. Ich werde euch die grundlegenden Schritte zum Erstellen eines Layouts anhand von GIMP zeigen. Das funktioniert dann so ähnlich aber auch in Photoshop.
Ein eigenes Layout erstellen
Zunächst einmal überlegt ihr euch die grundlegenden Design-Aspekte:• Wie breit soll das Layout werden?
• Wie viele Spalten sollen enthalten sein?
Erstellt anschließend die Arbeitsfläche über Datei>Neu und legt die Größe fest. Obwohl das von mir erstellte Layout "seitenfüllend" sein wird, hat der eigentliche Inhalt nur eine Breite von 1000 Pixel. Als Layouthöhe stelle ich 887 Pixel ein. (Wobei sich die Höhe der Webseite später ohnehin am Inhalt orientiert).
Ein ganz typisches Element, das auf die Webseite gehört, ist das Logo, das üblicherweise als Grafik vorliegt. Um es in das Layout einzufügen, ruft ihr Datei>Öffnen auf und wählt euer Logo aus, das in einem der Formate PNG, GIF oder JPEG vorliegen sollte. Bestätigt die Auswahl mit Öffnen. Drückt nun Strg+C, um das Logo in die Zwischenablage zu kopieren. Wechselt anschließend zum eigentlichen Webdesign und drückt dort Strg+V. Das eingefügte Logo wird sich jetzt noch nicht an der gewünschten Stelle befinden. Über das Verschieben-Werkzeug lässt es sich aber problemlos an die richtige Position verschieben.
Für eine bessere Aufteilung solltet ihr Hilfslinien einblenden. Dazu klickt ihr mit der Maustaste auf das Lineal und zieht es bei gedrückter linker Maustaste an die gewünschte Position.
Legt euch nun eine weitere Ebene an. Diese Ebene soll das obere Menü enthalten.
Ich gehe im aktuellen Beispiel davon aus, dass der Hintergrund des oberen Menüs einen Farbverlauf bekommt. Dazu klicke ich auf Farbverlauf: Auswahl mit einem Farbverlauf (füllen).
Der Farbverlauf soll von Grau nach Schwarz verlaufen. Die entsprechenden Farben kann man über die Farbfelder einstellen. Als Farbverlaufstyp stelle ich VG nach HG ein, er verläuft also von der Vorder- zur Hintergrundfarbe. Haltet nun die Strg-Taste gedrückt und zieht im ausgewählten Bereich eine Linie von oben nach unten. Nachdem die linke Maustaste losgelassen wurde, besitzt der Bereich den gewünschten Farbverlauf.
Prinzipiell habt ihr jetzt zwei Möglichkeiten:
• Ihr lasst den Bereich für die Navigation so, wie er ist.
• Ihr fügt die einzelnen Menüpunkte ein, um bereits im Entwurf genauer sehen zu können, welche Schriften usw. ihr verwendet.
Welche dieser beiden Varianten ihr wählt, bleibt letztendlich natürlich euch überlassen. Wenn ihr das Layout aber beispielsweise euren Kunden präsentieren wollt, würde ich euch in jedem Fall dazu raten, die Menüpunkte mit einzubauen. Erfahrungsgemäß mangelt es vielen Kunden hier nämlich an Vorstellungskraft.
Zunächst solltet ihr eine Schriftart auswählen. In GIMP findet ihr die entsprechenden Einstellungen unter Fenster>Andockbare Dialoge>Schriften.
Im Laufe dieser Reihe wurde bereits auf die Schriftartenproblematik im Zusammenhang mit CSS und HTML eingegangen. Letztendlich könnt ihr als Webdesigner zwar theoretisch jede beliebige Schriftart angeben. Ob diese aber auf dem Rechner der Seitenbesucher tatsächlich vorhanden ist und somit angezeigt werden kann, wisst ihr nicht. Daher lassen sich die Ergebnisse – vor allem natürlich, wenn ihr sehr exotische Schriftarten verwendet – nur schwer kontrollieren. Ich werde auf diesen Aspekt im Laufe dieser Reihe aber noch einmal eingehen, wenn es um die Schriftarten der Beispielwebseite geht. Für das aktuelle Layout entscheide ich mich jedenfalls für die folgenden Einstellungen:
• Verdana bold
• 20 Pixel
• Weiße Schriftfarbe
Das obere Menü soll einen Hover-Effekt bekommen. Fährt man also mit dem Mauszeiger über die einzelnen Menüpunkte, ändert sich deren Hintergrundfarbe. Dieser Aspekt sollte natürlich ebenfalls im Entwurf mit visualisiert werden. Dazu stellt man die gewünschte Hover-Farbe ein und kopiert sich eine der vorhandenen Menü-Ebenen. Dieser Ebene weist man die Farbe zu. Im aktuellen Beispiel gehe ich von einem blauen Farbverlauf aus. Anschließend wird der Text des Menüpunktes eingefügt. So hat man dann schon einmal ein Gefühl dafür, wie das Menü im Endeffekt aussehen wird.
Weitere Teile
- Tutorial: HTML & CSS für Einsteiger (Teil 01): Ein erster Blick auf HTML, CSS & Co.
- Tutorial: HTML & CSS für Einsteiger (Teil 02): Die erste HTML-Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 03): Elemente, Tags und Attribute
- Tutorial: HTML & CSS für Einsteiger (Teil 04): Texte strukturieren
- Tutorial: HTML & CSS für Einsteiger (Teil 05): Texte aufhübschen
- Tutorial: HTML & CSS für Einsteiger (Teil 06): Listen
- Tutorial: HTML & CSS für Einsteiger (Teil 07): Tabellen (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 08): Tabellen (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 09): Grafiken fürs Web (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 10): Grafiken fürs Web (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 11): Hyperlinks definieren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 12): Hyperlinks definieren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 13): Formulare (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 14): Formulare (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 15): Formulare (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 16): Formulare (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 17): Formulare (5)
- Tutorial: HTML & CSS für Einsteiger (Teil 18): Semantik fürs Web (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 19): Semantik fürs Web (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 20): Semantik fürs Web (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 21): Semantik fürs Web (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 23): Multimedia für die Webseite (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 24): iFrames
- Tutorial: HTML & CSS für Einsteiger (Teil 25): Das ist CSS
- Tutorial: HTML & CSS für Einsteiger (Teil 26): So klappt der Zugriff mit den Selektoren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 27): So klappt der Zugriff mit den Selektoren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 28): So klappt der Zugriff mit den Selektoren (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 29): Schöner Text durch CSS (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 30): Schöner Text durch CSS (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 31): Farben und Hintergründe
- Tutorial: HTML & CSS für Einsteiger (Teil 32): Außenabstände und Außenränder
- Tutorial: HTML & CSS für Einsteiger (Teil 33): Den Textfluss kontrollieren
- Tutorial: HTML & CSS für Einsteiger (Teil 34): Rahmen
- Tutorial: HTML & CSS für Einsteiger (Teil 35): Listen und Counter
- Tutorial: HTML & CSS für Einsteiger (Teil 36): Das Boxmodell
- Tutorial: HTML & CSS für Einsteiger (Teil 37): Elemente positionieren
- Tutorial: HTML & CSS für Einsteiger (Teil 38): Alles im Fluss mit float
- Tutorial: HTML & CSS für Einsteiger (Teil 39): Die verschiedenen Layoutvarianten
- Tutorial: HTML & CSS für Einsteiger (Teil 40): Zwei- und dreispaltige Layouts
- HTML & CSS für Einsteiger (Teil 41): Das Layout entwickeln
- Tutorial: HTML & CSS für Einsteiger (Teil 42): Das Layout weiter anpassen
- Tutorial: HTML & CSS für Einsteiger (Teil 43): Das Grundgerüst erstellen
- Tutorial: HTML & CSS für Einsteiger (Teil 44): Den Inhaltsbereich gestalten
- Tutorial: HTML & CSS für Einsteiger (Teil 45): Schicke Schriften für die Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 46): Das Kontaktformular (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 47): Das Kontaktformular (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 48): Die Webseite geht online

Passend zum Inhalt empfehlen wir:
Programmieren lernen für Anfänger
Vielen Dank für das interessante Tutorial
Herzlichen Dank für das Tut :)
Vielen Dank für das Tutorial!
LG Zaina
vielen Dank
MfG
Vielen Dank für den 41. Teil, klasses Tutorial.
Vielen Dank für das informative Texttutorial.
Danke für das Tutorial.
Herzlichen Dank für das Tutorial.
Danke für das informative Tutorial.
Vielen Dank für den weiteren Teil der sehr interessanten Serie!
Vielen Dank für das informative Texttutorial.
Danke für diesen weiteren lehrreichen Teil. MfG
Großen Dank für das Video.
LG Zaina
Danke für das Video. Habe es in Photoshop nachvollzogen. Klappt sehr gut.
LG
Vielen Dank für dieses lehrreiche Tutorial
Danke für informatives Video!
Vielen Dank für das interessante Videotutorial.
Vielen Dank für ein weiteres informatives Teilstück der Tutorialreihe.
Herzlichen Dank für das Video.
Vielen dank für das Tutorial.
Mehr anzeigen