Anzeige
Tutorialbeschreibung

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

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).

Bilder



 
Mit OK werden die Angaben bestätigt. Damit liegt die Arbeitsfläche vor und kann mit Inhalten gefüllt werden. (Ich arbeite der Übersichtlichkeit halber im Entwurf mit einem grauen Hintergrund. Auf der Webseite wird dieser später nicht zu sehen sein).

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.

Bilder



 
Sollte sich das Bild nicht verschieben lassen, müsst ihr zunächst die Ebene aktivieren. Die entsprechenden Einstellungen findet ihr unter Fenster>Andockbare Dialoge>Ebenen.

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.

Bilder



 
So könnt ihr beliebig viele Hilfslinien ziehen, an denen ihr die Elemente der Webseite ausrichten könnt.

Legt euch nun eine weitere Ebene an. Diese Ebene soll das obere Menü enthalten.

Bilder



 
Als Name könnte man Top-Menü angeben. Legt die Ebene mit OK an. Ruft das Auswahl-Rechteck auf und zieht die Fläche auf, in welche die Navigation eingefügt werden soll.

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).

Bilder



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.

Bilder



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

 
Ihr könnt auf diese Weise nun die einzelnen Menüpunkte einfügen. Am besten kopiert ihr dazu die Ebene, in welcher der erste Menüpunkt enthalten ist, und fügt sie als neue Ebene ein. Den Text der Ebene könnt ihr dann anpassen. Erstellt so das obere Menü.

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


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 17:26

Vielen Dank für das interessante Tutorial

Portrait von Kiasa
  • 13.05.2015 - 17:20

Herzlichen Dank für das Tut :)

Portrait von ZainaPhoto
  • 11.04.2015 - 13:24

Vielen Dank für das Tutorial!

LG Zaina

Portrait von teste123
  • 06.04.2015 - 22:52

vielen Dank
MfG

Portrait von BOPsWelt
  • 06.04.2015 - 15:27

Vielen Dank für den 41. Teil, klasses Tutorial.

Portrait von vaio001
  • 06.04.2015 - 15:25

Vielen Dank für das informative Texttutorial.

Portrait von Domingo
  • 06.04.2015 - 14:52

Danke für das Tutorial.

Portrait von Kundentest
  • 06.04.2015 - 14:45

Herzlichen Dank für das Tutorial.

Portrait von nikita2425
  • 06.04.2015 - 14:22

Danke für das informative Tutorial.

Portrait von rocking_sid
  • 06.04.2015 - 13:49

Vielen Dank für den weiteren Teil der sehr interessanten Serie!

Portrait von Caesarion2004
  • 06.04.2015 - 13:35

Vielen Dank für das informative Texttutorial.

Portrait von fe_web
  • 06.04.2015 - 13:05

Danke für diesen weiteren lehrreichen Teil. MfG

Portrait von ZainaPhoto
  • 28.03.2015 - 20:37

Großen Dank für das Video.

LG Zaina

Portrait von fuchs50
  • 22.02.2015 - 17:00

Danke für das Video. Habe es in Photoshop nachvollzogen. Klappt sehr gut.
LG

Portrait von dlieb
  • 22.02.2015 - 15:14

Vielen Dank für dieses lehrreiche Tutorial

Portrait von suzana
  • 22.02.2015 - 12:20

Danke für informatives Video!

Portrait von arko2013
  • 22.02.2015 - 11:02

Vielen Dank für das interessante Videotutorial.

Portrait von Caesarion2004
  • 22.02.2015 - 10:59

Vielen Dank für ein weiteres informatives Teilstück der Tutorialreihe.

Portrait von Kundentest
  • 22.02.2015 - 09:47

Herzlichen Dank für das Video.

Portrait von MARIA52
  • 22.02.2015 - 09:15

Vielen dank für das Tutorial.

x
×
×
teststefan