Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 03 - Teil 4 - Pimp my Site
zurück: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt weiter: Kapitel 03 - Teil 3 - Stein auf Stein ... Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten.     Status: Diskussion Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
02. Nov 2007, 16:33
Rufname:
Wohnort: Aachen

Kapitel 03 - Teil 4 - Pimp my Site - Kapitel 03 - Teil 4 - Pimp my Site

Nach oben
       

·Kapitel 03 - Teil 4 - Pimp my Site


Hallo zusammen,

Leute, frohlocket! Wir befinden uns auf der Zielgeraden. Jetzt kommt noch ein wenig Feintuning und dann steht das Layout. Wenden wir uns also wieder dem Schild zu. Das braucht noch den Titel. Jetzt haben wir aber ein Problem, ihr und ich. Ich habe eine Schriftart verwendet, die ich käuflich erworben habe und deren Nutzungsbedingungen mich zwingen, diese nicht weiter- zugeben. Insofern müssen wir mal schauen, ob Windows oder Office eine akzeptable Schriftart bereithält.

In der Anmutung könnte die Mistral zur Anwendung kommen, oder, aber da blutet zwar mein Designerherz, die Comic Sans. Ich habe die Mistral genommen. Aber egal welche Schriftart genommen wird, die folgenden Schritte bleiben prinzipiell gleich. Nur die Größe und Laufweite der Schrift wird wohl ein wenig unterschiedlich ausfallen. Als Vordergrundfarbe wählt ihr das helle Grau, das auch schon für den Content-Bereich verwendet wurde. Für den Text brauchen wir das Text-Werkzeug . In dem Eigenschaftenfenster suchen wir die Schriftart Mistral aus, indem auf das Aa-Symbol geklickt wurde, die Schriftgröße beträgt in diesem Fall 50 Pixel. Es öffnet sich ein Texteditor, wo der Text eingetragen werden kann. Aktiviert im Eigenschaftenfenster den Button Pfad aus Text erzeugen und schließt das Texteditorfenster wieder.



Nachdem wir den Text erstellt und in einen Pfad umgewandelt haben, kann er problemlos mit dem Perspektiv-Werkzeug verzerrt werden. Passt die Verzerrung der des Schildes an. Genaue Werte sind hier schwer möglich, da müsst ihr euch ein wenig auf euer Augenmaß verlassen. Im Zweifelsfall gibt es ja noch die Tastenkombination Strg+Z, mit der ihr den Schritt wieder rückgängig machen könnt. Zum Abgleich noch mal ein Zwischenstand:



Wenn ihr mit der Verzerrung zufrieden seid, bestätigt den Vorgang und speichert euer Dokument wieder ab.

Das Blau des Schildes finde ich nicht so attraktiv, außerdem könnte dort noch die Perspektive mit einem kleinen Lichteffekt vertieft werden. Dazu erstellen wir eine neue Ebene unterhalb des Textes. Vergrößert das Dokument, so dass ihr das Schild möglichst groß und exakt sehen könnt. Mit dem Pfad-Werkzeug zeichnet ihr an dem Außenrand der blauen Fläche lang.



Wenn der Pfad geschlossen ist, aktiviert in dem Eigenschaftenfeld des Werkzeugs die Option Auswahl aus Pfad erzeugen.



Danach wechselt ihr zum Verlauf-Werkzeug und sucht euch eine passende Vorder- und Hintergrundfarbe aus.



Stellt als Verlaufsform Kreisförmig ein und beginnt von rechts mit dem Werkzeug einen Verlauf zu ziehen.



Wenn ihr mit eurem Verlauf zufrieden seid, könnt ihr die Auswahl aufheben. Meiner sieht nun so aus:



Diese Ebene habe ich Verlauf Schild genannt. Vergleichen wir nun unser Ergebnis mit meinem ursprünglichen Entwurf, so stellen wir fest, dass mit den Schildern irgendetwas anders ist:





Bei dem ursprünglichen Entwurf ist die Stange hinter dem Blatt und das Schild ragt drüber. Wie kriegen wir das hin? Ziehen wir die Schildebene unter die Blattebene würde das Schild im unteren Bereich abgeschnitten werden. Die Lösung wäre das Schild von dem Rohr zu trennen, so dass sie in unterschiedlichen Ebenen positioniert werden können. Im Grunde haben wir mit dem Farbverlauf oben schon einen Teil davon erledigt. Für den Rest erstellen wir noch mal eine neue Ebene in der Größe von
B 100 x H 100 Pixel. Diese Ebene verschieben wir in der Ebenepalette über die Ebene Verlauf Schild
und im Dokument über die rechten Ecken des Schildes.



Wie bei dem Verlauf des Schildes zeichnen wir mit dem Pfad-Werkzeug die obere Kante des Schildes und färben es hellgrau ein. Anschließend, wieder mit dem Pfad-Werkzeug, die untere Kante und färben diese in einem dunklen Grau. Geht dann in die Ebenenpalette, klickt mit der rechten Maustaste auf die gerade erstellte Ebene und wählt aus dem Kontextmenü den Eintrag Nach unten vereinen aus. Damit sind die Kantenebene und die Verlaufebene zu einer vereint. Benennt sie Schild neu.

Aktivieren wir nun die Ebene Schild (das ursprüngliche Schild) und wählen mit dem Pfad-Werkzeug das Schild aus. Dabei kann die Auswahl um das Schild herum etwas großzügiger ausfallen, nicht jedoch an dem Pfahl selbst.



Erzeugt aus dem Pfad wieder eine Auswahl und mit Strg+K entfernt ihr das Schild. Jetzt ist nur noch der Pfahl übrig. Benennt die Ebene Stange um. Erstellt für beide Ebenen, Stange und Schild neu, wie im letzten Kapitel beschrieben jeweils einen Schlagschatten. Verschiebt beide Schatten gleichermaßen nach unten und rechts, wie es euch beliebt. Nun müssen nur noch die Ebene Stange und die dazugehörige Schattenebene in der Ebenenpalette unterhalb des Schattens der Ebene Blatt orange verschoben werden.



Jetzt brauchen wir eigentlich nur noch das Menü fertig stellen und ein wenig Fließtext einzufügen. Erstellen wir also oberhalb der Menüleiste eine neue Ebene (B 148 x H 300) und nennen sie Menütext. Im Dokument verschieben wir die Ebene auf die Menüleiste. Wählen wir das Text-Werkzeug und nehmen einige Einstellungen vor. Für die Textfarbe habe ich das dunkle Blau aus der ziehender -Farbpalette ausgesucht. Die Schriftart ist Verdana Bold in 13 Punkt und der Zeilenabstand hat einen Wert von 12. Nun können wir in den Texteditor unsere Menüpunkte untereinander eintragen.



Platziert die Textebene mit Hilfe von Hilfslinien auf die horizontale Position von 205 und vertikal auf 65. Leider ist die Textfarbe für einzelne Wörter oder Zeilen nicht zu ändern. Eine Zeile sollte eine schwarze Textfarbe für den Mouse-over Zustand erhalten. Entweder behalten wir uns das im Hinterkopf oder wir müssen eine neue Ebene erstellen, in der wir die eine Zeile einfügen. Es bleibt euch überlassen. Zuletzt erstellen wir eine weitere Ebene mit der Breite 146 und der Höhe 30 und nennen sie hover. Sie wird unterhalb des Menütextes eingefügt. Füllt diese Ebene mit dem dunklen Orange und stellt die Deckkraft auf 40%. Schiebt sie im Dokument mittig unter einen Menüpunkt; dies ist der Zustand, wenn mit der Mause über ein Menüpunkt gehovert wird.



Jetzt noch der Fließtext und eine exemplarische Überschrift. Also, wieder Text-Werkzeug aktiviert, Das hellere Blau für die Überschrift ausgewählt, Verdana Bold in 16 Punkt und eine Überschrift schreiben. Verschiebt sie oberhalb der Menüleiste. Nun noch mal das Text-Werkzeug aktivieren und Verdana (Regular) auswählen. Als Schriftgröße wird jetzt 11 Punkt gesetzt und einen Zeilenabstand von 2. Als Farbe wählt ihr Schwarz. Nun könnt ihr einen beliebigen Blindtext, z.B. den aus dem HTML Kapitel in den Editor einfügen. Zugegebenermaßen ist der Texteditor nicht besonders komfortabel, aber wir machen das ja nur einmal. Verschiebt den Fließtext linksbündig unter die Überschrift. So, das Werk ist vollbracht – machen wir noch mal einen Abgleich:



Zwischen Menüleiste und Text habe ich einen Abstand von 38 Pixel gesetzt, Pi-mal-Daumen einen gleichen Abstand zum rechten Rand gehalten. Damit Text gut leserlich ist, sollte eine Zeile circa 10 Wörter enthalten. Die Zeilen selbst brauchen auch ein wenig Luft. Die Schriftschnitte sind mit ihren Zeilenabständen zwar darauf eingestellt, aber meist für die Druckausgabe. Für Darstellungen am Monitor empfiehlt es sich die Zeilenhöhe ein klitzekleines bisschen zu erhöhen. Auch die Schriftgröße sollte die 10 Pixel nicht unterschreiten. Serifenlose Schriftarten, wie Verdana, Arial und Tahoma sind am Monitor leichter zu lesen als Serifenschriften, wie die Times New Roman.

Zum Schluss verrate ich euch noch, dass Gimp auch ein Script für den Ebeneneffekt Schlagschatten hat. Den findet ihr unter Script-Fu -> Schatten -> Schlagschatten … Aber so einfach wollte ich es euch nicht machen. Wink Es gibt unterschiedliche Grafik- und Bildbearbeitungsprogramme, die mal mehr, mal weniger Funktionen bieten. Den Weg, den ich euch gezeigt habe, ist das Prinzip wie solche Effekte zu Fuß erstellt werden können.

Nachdem nun unser Layout fertig gestellt ist, können wir uns wieder der Theorie zuwenden. In der nächsten Woche starten wir dann frisch mit den Grundlagen in CSS.

Übung...

Wir empfehlen Euch, die zuvor genannten Dateien herunterladen und versuchen, die Schritte nachzuvollziehen.

Downloads...

Als Übungsdateien könnt ihr die Datei aus dem letzten Kapitel verwenden, Kapitel 3.3 sollte dafür natürlich bearbeitet worden sein.

1. Zip-Datei aus Kapitel 3.3 Grafiken (~200Kb).

Gruß

V 1.00 - (C) by Maninweb.de - All rights reserved··

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
maninweb
Microsoft Excel MVP 2014


Verfasst am:
21. Dez 2007, 17:02
Rufname: maninweb
Wohnort: Aachen


AW: Kapitel 03 - Teil 4 - Pimp my Site - AW: Kapitel 03 - Teil 4 - Pimp my Site

Nach oben
       

Dieser Beitrag dient nur zur Sortierung
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 01 - Zielgruppendefinition 1 womaninweb 7448 21. Dez 2007, 17:06
maninweb Kapitel 01 - Zielgruppendefinition
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 2 - Es lebt! 1 womaninweb 6526 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 2 - Es lebt!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 3 - Es lebt immer noch! 1 womaninweb 5455 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 3 - Es lebt immer noch!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML 1 womaninweb 5131 21. Dez 2007, 17:04
maninweb Kapitel 02 - Teil 4 - Der Konformist – XHTML
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 1 - Farbenrausch 2 womaninweb 6249 21. Dez 2007, 17:04
maninweb Kapitel 03 - Teil 1 - Farbenrausch
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 1 womaninweb 5415 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 3 - Stein auf Stein ... 1 womaninweb 5232 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 3 - Stein auf Stein ...
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt 1 womaninweb 4737 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell 1 womaninweb 4910 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 2 womaninweb 4348 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 3 - Feingeschliffen 1 womaninweb 4240 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 3 - Feingeschliffen
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 19 maninweb 6755 13. Sep 2008, 20:55
womaninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: CSS Forum