Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 42): Das Layout weiter anpassen

HTML & CSS für Einsteiger (Teil 42): Das Layout weiter anpassen

Die ersten Schritte hin zum eigenen Layout wurden im vorherigen Video-Training getan. Selbstverständlich fehlen noch zahlreiche Elemente. Diese werden in diesem Video-Training hinzugefügt. Sobald das Layout dann steht, geht es mit dem Ausschneiden, dem sogenannten Slicen weiter. Denn das ist letztendlich der Arbeitsschritt, durch den es möglich wird, das erstellte Design per HTML und CSS praktisch umzusetzen.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Der aktuelle Stand des Layouts sollte in etwa so aussehen:

Bilder



Bislang wurden also ein Logo und das obere Menü eingefügt. Weiter geht es mit einer etwas größeren Grafik, die direkt unterhalb der Navigation zu sehen sein soll.

 
Das Prinzip des Anlegens von neuen Ebenen wurde bereits im vorherigen Tutorial beschrieben. Daher möchte ich euch an dieser Stelle noch etwas anderes zeigen. Direkt unterhalb des oberen Menüs soll ein größeres Bild angezeigt werden. Das Ergebnis wird folgendermaßen aussehen:

Bilder



Das Bild sollte – wenn ihr es einfügt – in den richtigen Maßen vorliegen. Bearbeitet es also ggf. vorher. Ruft anschließend Datei>Öffnen auf und wählt das Bild aus. Das ausgewählte Bild wird daraufhin in einem neuen Fenster angezeigt. Drückt Strg+C, um das Bild in die Zwischenablage zu kopieren. Damit ihr das Bild nun gleich als Ebene einfügen könnt, die auch noch die richtige Größe hat, ruft ihr Bearbeiten>Einfügen als>Neue Ebene auf. Die neue Ebene hat so automatisch die Abmessungen des Bildes und ihr könnt die Ebene dann ganz einfach an die passende Stelle verschieben. Auf diese Weise lassen sich nun alle Bilder, die ihr einfügen wollt, in das Layout übernehmen und dort platzieren.

 
Fügt anschließend die Texte an den Stellen ein, an denen sie später tatsächlich zu sehen sein sollen. In der Entwurfsphase verwendet man dafür normalerweise sogenannten Blindtext.

Bevor ihr euch jetzt hinsetzt und wild "test, test, test" schreibt, empfehle ich euch die Seite http://www.blindtextgenerator.de/.

Bilder



Dort könnt ihr euch Blindtexte – übrigens unterschiedlicher Sorte – automatisch generieren lassen. Die Texte lassen sich dann per Copy & Paste ganz einfach in den Design-Entwurf übernehmen. In diesem Zusammenhang sei euch auch die Seite http://dummyimage.com/ empfohlen. Auf dieser Seite lassen sich Dummy-Bilder in beliebiger Größe generieren. Diese Dummy-Bilder könnt ihr dann beispielsweise als Platzhalter für noch nicht erstellte Originalgrafiken in euren Layouts nehmen.


 

Das Problem mit den transparenten Ebenen

Wenn ihr Texte einfügt, werden diese aus mehreren Elementen wie Überschriften, Textabsätzen usw. bestehen. Daher solltet ihr zusammengehörende Texte jeweils in eigenen Ebenen zusammenfassen. So könnt ihr diese Texte dann auch immer am Stück verschieben. Ruft dazu Ebenen>Neue Ebene auf. Weist der Ebene anschließend die gewünschte Größe und ggf. Hintergrundfarbe zu. Meistens werdet ihr allerdings einen transparenten Hintergrund einstellen/brauchen. Das Problem ist dann allerdings, dass ihr die transparenten Ebenen nur schwer verschieben könnt. Oft erwischt man dabei nämlich eine untergeordnete Ebene. Dieses Problem lässt sich ganz einfach umgehen. Entscheidend sind dafür die Einstellungen im Fenster Werkzeugkasten. Aktiviert darin das Verschieben-Werkzeug. Im unteren Fensterbereich aktiviert ihr anschließend die Option Aktive Ebene verschieben.

Bilder



So könnt ihr auch transparente Ebenen an jede beliebige Position verschieben.


 

Elemente ausschneiden

Wenn ihr mit dem Layout zufrieden seid, geht es ans praktische Umsetzen als HTML-Webseite. An dieser Stelle kommt das Slicen, also das Ausschneiden ins Spiel. Dieses Slicen ist nichts anderes als das Zerschneiden des Layouts in Einzelteile, die später mittels HTML und CSS wieder zusammengesetzt werden. Ihr müsst all die Elemente slicen, die später einzeln dargestellt werden sollen. Ausgenommen sind davon natürlich all die Bildelemente, die ohnehin einzeln vorliegen. Ich möchte euch zunächst zeigen, wie ihr Elemente ausschneiden könnt. Zieht euch dazu Hilfslinien um das betreffende Element. Die Hilfslinien bilden letztendlich die Schnittkanten. Achtet also darauf, diese richtig zu setzen.

Bilder



Markiert nun den gewünschten Bereich und drückt die Tastenkombination Strg+Umschalten+C. (Das gilt übrigens für GIMP und für Photoshop gleichermaßen). Legt euch anschließend eine neue Datei an. In Photoshop hat diese dann gleich die richtige Größe. Bei GIMP funktioniert das leider nicht so einfach. Hier erstellt ihr einfach eine Datei mit ausreichenden Abmessungen. Über Strg+V wird der Inhalt aus der Zwischenablage eingefügt.

 
Jetzt kommt das Zuschneiden-Werkzeug ins Spiel. Legt darüber den auszuschneidenden Bereich fest und drückt anschließend die Return-Taste. Das Bild wird daraufhin auf den gewünschten Bereich zugeschnitten. Über Datei>Speichern unter könnt ihr das Bild abspeichern.

Ein wichtiges stilistisches Element stellt für viele Webseiten ein Farbverlauf dar. Auch auf dem hier gezeigten Beispiel-Layout ist ein solcher Farbverlauf vorhanden. Um einen Farbverlauf zu slicen, wählt ihr euch einen schmalen Bereich des entsprechenden Verlaufs aus. Dabei genügt es tatsächlich, wenn ihr einen Bereich mit einer einen Pixel großen Breite einstellt. Die Höhe muss hingegen der tatsächlichen Höhe des Elements entsprechen. Mittels CSS könnt ihr später dafür sorgen, dass diese Grafik horizontal solange wiederholt wird, bis das gesamte Element ausgefüllt ist. Selbstverständlich könntet ihr auch einen breiteren Bildausschnitt verwenden. Das wiederum würde allerdings die Performance der Seite mindern. Wählt daher als Breite bei Farbverläufen einen Pixel.

Mit Strg+Umschalten+C kopiert ihr die einen Pixel breite Grafik in die Zwischenablage und fügt sie wieder als neues Bild ein. Das neue Bild speichert ihr anschließend, nachdem es auf den relevanten Ausschnitt gebracht wurde, ab.

Damit sollte das grundsätzliche Prinzip des Slicens deutlich geworden sein. Ihr schneidet also all die Dinge aus dem Layout aus, die später zur Webseite gehören. Wenn ihr einzelne Seitenelemente ohnehin bereits vorliegen habt, die nicht erst ausgeschnitten werden müssen, nehmt ihr diese direkt, also ohne Slicing-Umweg.

Das Ergebnis sollte nun wie folgt aussehen: Ihr habt alle Grafiken vorliegen, die ihr später in der Webseite einsetzen wollt. Dazu gehören beispielsweise das Logo, Hintergründe, Farbverläufe usw. Wo wir gerade beim Thema Farbverläufe sind: Mir ist natürlich durchaus bewusst, dass sich Farbverläufe bequem per CSS3 erstellen lassen. Das Problem ist allerdings, dass das eben noch nicht von allen Browsern unterstützt wird. Und da sich zudem das Slicen sehr schön anhand eines Farbverlaufs zeigen lässt, habe ich in diesem Tutorial auf eine Grafik für die Umsetzung von Farbverläufen gesetzt.

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
  • 27.05.2015 - 09:28

Herzlichen Dank für das Tutorial :) Super erklärt!

Portrait von Kundentest
  • 09.04.2015 - 19:42

Herzlichen Dank für das Tutorial.

Portrait von arko2013
  • 09.04.2015 - 16:33

Danke für das Tutorial und deine Mühe.

Portrait von renate_C
  • 09.04.2015 - 16:30

Ich bedanke mich für das weitere interessante Tutorial.

Portrait von Caesarion2004
  • 09.04.2015 - 16:22

Vielen Dank für das informative Tutorial.

Portrait von Snapshotbysusann
Portrait von MARIA52
  • 09.04.2015 - 15:47

Vielen Dank für den weiteren Teil des Tutorials.

Portrait von dlieb
  • 09.04.2015 - 13:50

Vilen Dank für den Teil 42.

Portrait von lalelu44
  • 09.04.2015 - 13:37

Wieder mal ein gelungenes Tutorial - vielen Dank! ;-)

Portrait von fe_web
  • 09.04.2015 - 13:32

Super - vielen Dankf für diesen weiteren Teil.MfG

Portrait von rocking_sid
  • 09.04.2015 - 13:19

Vielen Dank für das informative Tutorial!

Portrait von BOPsWelt
  • 09.04.2015 - 13:07

Vielen Dank für einen weiteren guten Teil der Reihe!. :)

Portrait von suzana
  • 09.04.2015 - 12:55

Vielen Dank für das Tutorial.

Portrait von ZainaPhoto
  • 28.03.2015 - 20:29

Cooles Tutorial.

Lg Zaina

Portrait von suzana
  • 07.03.2015 - 09:33

Vielen Dank für das Video. lg.

Portrait von dlieb
  • 28.02.2015 - 15:37

Vielen Dank für das interessante Videotutorial.

Portrait von Caesarion2004
  • 28.02.2015 - 11:42

Vielen Dank für das interessante Video.

Portrait von Domingo
  • 28.02.2015 - 10:59

Danke für das informative Video.

Portrait von MARIA52
  • 28.02.2015 - 10:41

Vielen Dank für das Videotutorial.

x
×
×