HTML / CSS

Workshop-Serie: Website erstellen Teil 1.2

von Patrick Lohmann 3 Kommentare

WordPress Entwickler und Webdesigner

Layout in Photoshop gestalten

Gestern haben wir den Hintergrund für unseren Wrapper (Container) erstellt. Heute wohlen wir uns um die eigentlichen Inhalte kümmern. Dazu erstellen wir unter anderem den Kopfbereich (Header), die Navigation (Button). Morgen folgt dann der eigentliche Inhalt. Dann könnt ihr auch alle bisherigen Dateien (*.psd, Projekte-Ordner) herunterladen.

Anzeige:




Header

In der Ebenenpalette wählen wir die Ebenengruppe Header aus. Hier erstellen wir nun eine neue Ebene und benennen diese auch gleich als „Header“. Mit dem Auswahlrechteck-Werkzeug aus der Werkzeugpalette wird wieder eine Auswahl mit festen Maßen erstellt. Für die Breite verwenden wir 930 Pixel. Nur die Höhe wird auf 140 Pixel geändert. Die Auswahl wird auch hier mit gedrückter Alt-Taste mittig ausgerichtet.

Für unseren Header habe ich einen recht dunklen Blau-Verlauf (#2c539e/#244386) heraus gesucht. Hiermit wird die eben erstellte Auswahl gefüllt. Dazu benutzen wir das Verlaufswerkzeug aus der Werkzeugpalette. Anschließend heben wir mit Strg+D unsere Auswahl wieder auf. Danach sollte der Header so aussehen:

Navigation

Die vertikale Navigation wird wie unser Header angelegt. Dazu erstellen wir in der Ebenengruppe Navigation eine neue Ebene. Danach wählen wir das Auswahlrechteck-Werkzeug aus der Werkzeugpalette und geben erneut feste Werte an (930 Px Breite / 40 Px Höhe). Anschließend wieder mit dem Füllwerkzeug (#2d55ab) die Auswahl füllen und mit Strg+D aufheben.

Buttons:

In der Ebenengruppe Navigation wird eine weitere Gruppe mit dem Titel Button angelegt. In dieser erstellen wir auch eine neue Ebene. Wie auch in den ersten Schritten wird das Auswahlrechteck-Werkzeug verwendet. Für unsere Buttons nutzen wir die Maße 90 x 35 Pixel. Die Werte werden oben in der Optionsleiste für „feste Größe“ eingetragen. Nun wählen wir in der Ebenenpalette die Ebene aus und erstellen unsere Auswahl (siehe Bild).

Die Auswahl wird jetzt noch weiter verändert. Dazu wählen wir im Menü Auswahl/Auswahl verändern/abrunden und geben dort einen Radius von 5 Pixel an. Die Auswahl soll aber nur oben abgerundet sein, deshalb korrigieren wir die unteren Ecken mit dem Auswahlrechteck-Werkzeug. Anschließend sollte die Auswahl so aussehen und mit dem Füllwerkzeug (#ededed) gefüllt werden.

Die Auswahl kann wieder mit Strg+D aufgehoben werden. Mit dem horizontalen Text-Werkzeug aus der Werkzeugpalette wird nun ein Textrahmen aufgezogen. Der Textrahmen wird an die Buttonfläche angepasst und in der Optionsleiste wird zentrierter Text eingestellt. Außerdem der Menüpunkt-Name eingetragen. Jedoch wird der Text anschließend ausgeblendet, da nur die Grafik benötigt wird.

Abschluss: Teil 1.2

Morgen erstellen wir dann weitere grafische Elemente für den Content-Bereich. Wir werden noch nette web2.0 Schaltflächen erstellen. Anschließend folgt dann auch der Aufbau unserer Site (xHTML).

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Patrick Lohmann

Redakteur und Autor von Webdesign-Podcast.de. Seit meiner Kindheit bin ich kreativ unterwegs. Als Medienkünstler erstelle ich unter anderem reale und sureale Bildmanipulationen (Composings). Aber auch im Bereich Webdesign & Coding fühle ich mich zuhause. Als Autor erstelle ich unter anderem Tutorials und gebe mein Wissen an Interessierte weiter.

3 Antworten zu “Workshop-Serie: Website erstellen Teil 1.2”

    • Durch meine Erkrankung muss ich gerade sehr viel Nacharbeiten. Heute Abend geht es aber direkt mit Teilo 1.3 und dem zweiten Teil weiter.

      Grüße Patrick

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.