Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 05 - Teil 2 - Butter bei die Fische
zurück: Kapitel 05 - Teil 3 - Feingeschliffen weiter: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 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:
09. Dez 2007, 12:26
Rufname:
Wohnort: Aachen

Kapitel 05 - Teil 2 - Butter bei die Fische - Kapitel 05 - Teil 2 - Butter bei die Fische

Nach oben
       

·Kapitel 05 - Teil 2 - Butter bei die Fische


Hallo zusammen,

dann machen wir mal munter weiter mit unserer Seite. Als erstes spielen wir ein paar Bilder aus, das Auge will ja auch was haben. Dafür öffnen wir unser Layout wieder im Gimp. Leider bietet Gimp keine Möglichkeit Bilder aus einem Teil des Layouts zu exportieren. Die Recherchen nach PlugIns waren auch nicht besonders erfolgreich. Deshalb müssen wir einen kleinen Umweg gehen. Speichert euer Layout unter einem anderen Namen ab. Wir werden als erstes die Grafik für den Kopf erstellen, also benennt die Datei am besten kopf.xcf oder head.xcf, wie ihr möchtet. Nun können wir einen Großteil der Hilfslinien entfernen; es bleiben die Linie links vom Menü, auf Position 50 und die rechts des Inhalts auf Position 864. Ebenso auch eine horizontale Hilfslinie, die wir auf Position 200 schieben. Es ergibt sich somit ein Rechteck von 814 x 200 Pixel. Löscht alle Ebenen, die das mit dem Menü zu tun haben und auch den Beispieltext mit der Überschrift, die brauchen wir für das Bild nicht mehr.

Speichert noch mal und wählt das Zuschneide-Werkzeug aus. In den Werkzeugoptionen aktiviert ihr die Option 'Zuschneiden'. Wenn ihr mit dem Messer entlang der Hilfslinie zieht,
öffnet sich ein Fenster, in das ihr die Koordinaten eingeben könnt. Bestätigt mit 'Zuschneiden'.



Nun ist der nicht benötigte Teil entfernt. Speichert das Bild nochmals ab und dann exportiert ihr das Bild indem ihr unter 'Speichern unter' als Dateiname head.jpg oder kopf.jpg angebt. Gimp fragt dann nach, ob es das Bild zusammenfügen und exportieren soll. Das bestätigt ihr. Es folgt ein Fenster, in dem die Komprimierung des .jpg eingestellt werden kann. Ihr könnt euch auch eine Vorschau zeigen lassen. Dies ist ganz sinnvoll, da bei einer Vergrößerung von 200% sehr gut zu sehen ist, wann Artefakte entstehen, also wann die Komprimierung zu stark wird. Mit 85% erreichen wir eine gute Qualität und bestätigen dies.

Diesen Vorgang werden wir stets durchführen, wenn hier von Bild ausspielen die Rede ist: Ausgehend vom Original eine Kopie durch 'Speichern unter' erstellen. Überflüssige Elemente entfernen, Hilfslinien entlang der zu exportierenden Fläche ziehen, ausschneiden, speichern und exportieren mittels Speichern unter.

Genau dies machen wir nun, um die Hintergrundgrafik zu exportieren. Oder, in diesem Falle einfacher, wählt den Hintergrund aus (Verlauf) und kopiert ihn mit Strg+C, erstellt eine neues Dokument mit Strg+N und fügt es dort wieder ein. Die schwebende Auswahl wird mit 'Neue
Ebene erstellen
' fixiert – kennt ihr ja noch aus dem Grafikkapitel. Speichert es ab. Wir brauchen von dem Hintergrund ein vertikales Rechteck mit einer Breite von 4 Pixel und einer Höhe von 600 Pixel. Beim Exportieren des .jpg’s könnt ihr 100% angeben. Dann suchen wir uns aus der Farbpalette ziehender das Orange des Hintergrundes heraus und notieren und den Hexadezimalwert: #f2af3b.

So, nun brauchen wir noch eine Grafik für den Contentbereich. Dafür öffnet ihr wieder euer Originalbild, speichert es unter inhalt.xcf und schneidet ein schmales, horizontales Rechteck aus mit Ursprung X = 50, Ursprung Y = 150, Breite = 814 und Höhe = 4. Neben den Ebenen, die nicht mehr in der neuen Grafik vorhanden sind, entfernt ihr auch den Hintergrund. Das Bild wird nun als .png gespeichert. An sich wäre auch das .gif-Format möglich, aber leider ist Gimp wohl nicht in der Lage die Schlagschatten mit ihrer Transparenz richtig zu komprimieren. In dem Dialogfenster 'Als PNG speichern' aktiviert ihr nur Farbwerte aus 'Transparenz speichern'. Alle anderen Angaben könnt ihr deaktivieren. Als Kompression kann Stufe 9 ruhig stehen bleiben.

Nun können wir die drei Grafiken in unser CSS einfügen. Die Hintergrundgrafik wird im body als background-image eingebunden. Sie ist deshalb so schmal, weil sie in x-Richtung gekachelt, also wiederholt werden soll. Außerdem muss auch noch eine Hintergrundfarbe angegeben werden, denn wenn die Inhalte länger werden und die die Höhe von 600 Pixel überschritten wird, schließt die Hintergrundfarbe (optisch) an das Bild an. In Wirklichkeit ist der ganze Hintergrund orange, nur die oberen 600 Pixel werden durch die Grafik verdeckt. Das Ganze sieht dann so aus:

body{
padding: 0;
margin: 0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
background-image: url(images/hintergrund.jpg);
background-repeat: repeat-x;
background-position: left top;
background-color: #f2af3b;
}


Da die Kachelung oben links beginnen soll, habe ich das auch in der Eigenschaft background-position angegeben. Genauso machen wir das mit dem Contentbereich, nur dass wir hier keine Hintergrundfarbe benötigen – diese Angabe kann wegfallen. Diesmal soll die Grafik in y-Richtung, also nach unten kacheln. Die Richtung muss entsprechend notiert werden.

/* Hauptcontainer */
#content{
width: 814px;
height: 100%;
margin-left: -407px;
top: 0px;
left: 50%;
position: absolute;
background-image: url(images/inhalt.png);
background-repeat: repeat-y;
background-position: left top;
}


Als letztes haben wir noch den Kopfbereich. Dort nimmt die Grafik den gesamten Bereich des Containers ein und brauch insofern nicht gekachelt werden, das wollen wir auch nicht. Deshalb wird die Eigenschaft background-repeat auf no-repeat, nicht kacheln gesetzt. Auch die Hintergrundfarbe ist nicht mehr vonnöten.

/* Kopf */
#head{
width: 814px;
height: 200px;
background-image: url(images/kopf.jpg);
background-repeat: no-repeat;
background-position: left top;
}


Soweit, so gut. Speichert die CSS Datei ab und schaut euch das Ergebnis im Browser an. In
einem Mozilla Browser wird es schon ganz anständig aussehen, im IE gibt es wohl Probleme mit der Transparenz der .png-Grafik. Stellen wir das Problem aber erstmal hinten an. Ihr stellt vielleicht fest, dass die Formatierung mit CSS unabhängig von der der HTML-Datei stattfindet. Im Prinzip brauchen wir die erst, wenn die Inhalte eingepflegt werden.

Dann schauen wir mal, dass wir schnell zu diesem Punkt gelangen. Es steht nämlich noch die Formatierung der Menüleiste an. Dafür brauchen wir ..., ihr wisst schon, eure Original Datei in Gimp. Speichert sie unter menu.xcf ab. Von dem Menü brauchen wir nur einen schmalen Streifen des Menühintergrundes zum kacheln. Wählt das Rechteck mit dem Ursprung X = 50, Ursprung
Y = 195, Breite = 148 und Höhe = 4 aus und schneidet es zurecht. Speichert es als .jpg-Datei ab. Nun enthält die Grafik zwar den Rand links und rechts, der Rand oben und unten ist aber weg. Wir hätten es auch nicht mit exportieren können, denn sonst hätten wir beim Kacheln ein schickes Streifenmuster erhalten. Ist aber nicht dramatisch, wofür ist denn CSS gut. Mit den Eigenschaften border-top und border-bottom können wir problemlos den fehlenden Rand erstellen.

/* Menü */
#menue{
background-image: url(images/menu.jpg);
background-repeat: repeat-y;
background-position: left top;
border-top: #cf8545 1px solid;
border-bottom: #cf8545 1px solid;
width: 148px;
height: 300px;
left: 0px;
top: 190px;
position: absolute;
}


Die Angaben beim border sind in der Reihenfolge die Farbe des Randes, seine Breite und die Art, in diesem Falle durchgezogen. Mit den Grafiken sind wir jetzt soweit durch. Nebenbei könnt ihr auch die Hintergrundfarbe für den Inhalt entfernen, so sieht die Seite schon fast fertig aus.

Als letzten Punkt im heutigen Kapitel wollte ich euch erklären, wie man ein Menü mittels einer
Liste erstellt. Der Vorteil einer Liste bei einem vertikalen Menü ist, dass die Listeneinträge unter-
einander liegen und beliebig weitere Listenelemente hinzugefügt werden können. Also eine ganz flexible Sache. Das Elternelement der Listenelemente ist in diesem Fall die ungeordnete Liste ul. Normalerweise wird Listenelementen einer solchen Liste ein Aufzählungszeichen voran gestellt. Das wollen wir aber nicht, deshalb müssen wir mit CSS der Liste diese Zeichen verbieten. Wir nutzen den Element-Selektor, um direkt auf die Liste Einfluss zu nehmen. Das ul wird ein Kindelement des Containers #menue sein, die Reihenfolge sieht deshalb so aus:

#menue ul{
list-style-type: none;
padding: 0px;
margin: 0px;
}


Wir haben der Liste damit gesagt, dass sie keine Auflistungszeichen haben soll und nebenbei noch alle Außen- und Innenabstände auf Null gesetzt. Schreibt diese Anweisung hinter euren #menue Container. Jetzt solltet ihr die HTML-Datei öffnen und in dem Container eine Liste schreiben. Die füllt ihr mit Listenelementen, indem ihr pro Element einen Menüpunkt einfügt. In etwa so:



Damit haben wir eine optische Kontrolle wie sich unsere Anweisungen auswirken. Wir können die Seite im Browser betrachten und bei jeder Änderung im CSS die datei abspeichern und den Browser aktualisieren. Tun wir dies nun, stellen wir fest, dass die Menüpunkte alle zentriert sind. Das kommt daher, dass wir im body text-align auf center gesetzt haben. Dies muss natürlich überschrieben werden. Der Container #menue ist ein Kindelement des body und das Elternelement der Liste. Am besten, wir schreiben dort den Textfluss auf text-align: left; um.
Jetzt "kleben" die Menüeinträge am linken Rand. Auch nicht so schick! Also versuchen wir mal einen Innenabstand zu setzen. Wir machen dies indem wir direkt auf das Listenelement zugreifen, d.h. wir schreiben eine neue Anweisung.

#menue li{
padding-left: 10px;
}


Mit padding-left geben wir mal 10px; an und schauen uns das Ergebnis im Browser an: Im Firefox sieht’s ok aus, im IE verschieben sich leider die Ränder oben und unten 10 Pixel nach rechts. Das war es also nicht. Bleibt letztendlich nichts anderes, als im HTML-Code feste Abstände zu setzen. Dies machen wir mit dem Leerzeichen ohne Umbruch &nbsp; und fügen ein oder zwei dieser Zeichen vor die einzelnen Menüpunkte. Wer sagt’s denn, es geht doch! Nun können wir den Text noch so formatieren, dass er unserer Vorlage entspricht. Das heißt, die Schriftgröße, -art und –farbe zu definieren.

#menue li{
font-size: 12px;
font-weight: bold;
color: #3b4a79;
}


Im Browser sieht das schon recht viel versprechend aus, die Menüpunkte könnten allerdings ein wenig mehr Abstand zueinander vertragen. Den erreichen wir mit der Eigenschaft line-height. Versucht mal einige Werte, für meinen Geschmack ist 30px ein Abstand, der gut aussieht. Aus dem Container #menuekönnen wir nun auch die Höhenangabe entfernen. Durch die Listeneinträge wird der Container soweit nach unten ausgedehnt, wie die Elemente an Platz einnehmen. Nun brauchen wir noch, da es sich ja um Menüpunkte handelt, das Ankerelement a, um auch später navigieren zu können. Umschließt also eure Menüpunkte innerhalb des Listenelements mit dem Ankerelement. Als Zieldokument geben wir erstmal eine Raute ein – diese ignoriert der Browser und öffnet keine Datei.



Schauen wir uns das Ergebnis im Browser an, so erscheinen die Menüeinträge unterstrichen und in der Farbe des Standardstylesheets. Dem wollen wir gleich abhelfen. Mit den Pseudoklassen a:link, a:visited, a:active und a:hover können wir ganz gezielt nur die Menüpunkte beeinflussen. Zum einem sollen die Menüpunkte die zugewiesene Farbe behalten und nicht unterstrichen sein:

#menue li a:link, #menue li a:visited { color:#3b4a79; text-decoration: none;}

Zum anderen soll beim Überfahren mit der Maus die Textfarbe in Schwarz erscheinen, ebenfalls nicht unterstrichen sein und die Hintergrundfarbe soll sich ändern.

#menue li a:active, #menue li a:hover { color:#000; text-decoration: none; background: #e0bd90;}

An dieser Anweisung ist sehr schön zu sehen, wie die Vererbungslinie funktioniert. Das Eltern-
element ist #menue, dessen Kindelement li mit der Pseudoklasse verknüpft worden ist. So gelten diese Anweisungen ausschließlich für dieses spezielle Kindelement des Bereichs #menue. Schauen wir uns im Browser wiederum das Ergebnis an und stellen fest, dass die Farbe stimmt und dass der Text nicht unterstrichen ist. Der Hover-Effekt mit dem veränderten Hintergrund beschränkt sich aber nur auf den Bereich des Textes. Da müssen wir eine weitere Eigenschaft bemühen, das die Art der Anzeige regelt: display. Wir möchten, dass der Menüeintrag in dem Listenelement als ein Block dargestellt wird. Dafür braucht es aber eine Breitenangabe des Elementes. Deshalb muss in der Anweisung #menue li eine Breite von 146px angegeben werden. Die Breite ist 2 Pixel schmaler als der Menü-Container, da rechts und links ja noch ein Rand von 1 Pixel ist. Damit dieser auch bei der Blockanweisung berücksichtigt wird setzen wir den linken Außenabstand auf 1px.

#menue li{
font-size: 12px;
font-weight: bold;
color: #3b4a79;
line-height: 30px;
margin-left: 1px;
padding: 0px;
width: 146px;
}


Für die Pseudoklasse wird entsprechend auch eine Breitenangabe gemacht und der Anzeigemodus auf block gesetzt.

#menue li a:active, #menue li a:hover {
display: block;
color:#000;
text-decoration: none;
background: #e0bd90;
width: 146px;
}


Im Browser betrachtet sieht die Seite ja schon prima aus und der Hover-Effekt funktioniert einwandfrei. Damit können wir für heute zufrieden sein und machen erstmal Schluss.

Im nächsten Kapitel werden wir das Feintuning vornehmen und die Seite (hoffentlich) fertig stellen.


Übung...

Diesmal gibt's zwar keine Übungsdatei, ihr könnt aber die HTML Dateivorlage aus den vorherigen Kapiteln verwenden.

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:00
Rufname: maninweb
Wohnort: Aachen


AW: Kapitel 05 - Teil 2 - Butter bei die Fische - AW: Kapitel 05 - Teil 2 - Butter bei die Fische

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 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 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 4736 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 2 - Hat es deine Augen oder meine? 1 womaninweb 4360 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?
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 4346 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: Excel Projekte: Pivot-Tabelle - Teil 1 - Erstellung von Pivot-Tabellen 0 Lukas Mosimann 30275 26. Apr 2008, 08:59
Lukas Mosimann Pivot-Tabelle - Teil 1 - Erstellung von Pivot-Tabellen
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 5 maninweb 3751 03. Apr 2008, 12:05
voler Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 3 - Es lebt immer noch! 50 maninweb 11853 11. Feb 2008, 22:54
Nicki007 Kapitel 02 - Teil 3 - Es lebt immer noch!
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML! 9 maninweb 3515 27. Dez 2007, 19:08
Lisa Kapitel 02 - Teil 4 - Der Konformist – XHTML!
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Macromedia Dreamweaver