Tài liệu Einstieg in CSS- P8 pptx

219__— Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark... Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark... 20.1 Der Basis-HTML-C

Hauptspalte flexibel lasst, so dass Ihre Leser deren Mahe (durch Anderung der FenstergréBe) selbst einstellen kénnen

Egal, wie Sie sich entscheiden — bei einigen der nachfolgenden Seitenvorlagen sind beide Varianten berticksichtigt

19.4 Design - Die Kunst liegt im

Weglassen!

Ich verwende gerne die folgende »Rechnung«, wenn ich Schti- ler davon Uberzeugen mochte, es mit Designspielereien nicht zu libertreiben

Stellen Sie sich Ihre Webseite mit einer gewiinschten Wirkung von 100 Prozent auf Ihre Besucher vor Nehmen wir an, Sie haben fiinf einpragsame Designkomponenten verwirklicht (seien es nun Farben, Hintergriinde, typografische Elemente, Symbole, Buttons etc.) Wenn Sie nun die Aufmerksamkeit gleichmafig aufteilen könnten, dann erhielte jede Ihrer Designkomponenten 20 Prozent dieser Aufmerksamkeit Im Englischen bezeichnet man diese Wir- kung auch als Impact

Wenn Sie nun zwanzig Designkomponenten einsetzten, dann erhielte jede nur mehr als 5% Aufmerksamkeit Fragen Sie sich einfach, was wohl mehr Impact erzeugt — wenige Elemente mit je 20% oder viele mit je 5%

In Design-Workshops kann ich immer wieder feststellen, wie Teilnehmer gegen Ende eines kleinen Projekts viel Zeit und Muhe

in die Uberlegung stecken, was noch alles fehlen könnte, bezie- hungsweise was man noch alles an Designelementen einbauen koénnte: Vielleicht hier noch ein Kastchen, dort noch ein Bild, an- derswo noch ein paar Linien, Punkte, Symbole Viel wichtiger ist

es allerdings, zu diesem Zeitpunkt zu testen, wie viel vom vorhan- denen Design man wegnehmen kann

Blenden Sie ein Element nach dem anderen aus (mit CSS geht das ja wirklich einfach) und entscheiden Sie, ob diese Weglassung dem Gesamteindruck schadet Dann - und nur dann - sollten Sie eine Designkomponente beibehalten Sofern nichts Nachteiliges passiert, kKonnen Sie auf das Element getrost verzichten

Erst wenn Sie nichts mehr weglassen kénnen, ohne das ge- samte grafische Konzept zu beeintrachtigen, dirfen Sie mit Ihrem Design zufrieden sein

Lenken Sie das Auge des Betrachters auf wichtige

Punkte, heben Sie The-

men hervor, fokussieren Sie Schwerpunkte

Branding Beachten Sie bei diesem Test

allerdings, dass das » Bran- ding« Ihrer Seiten nicht ver- loren geht Das heift, der

Gesamteindruck einer Marke muss bestehen bleiben Sie

soliten ein Webprojekt im-

merso behandeln, als hat- ten Sie es mit einer groben Marke zu tun, selbst wenn es

sich nur um pers6nliche Sei-

ten handelt

219 — Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Schliisselfarbe und Leitfarben Legen Sie sich auf eine Schltisselfarbe (Key- Color) fest, die Sie am besten aus Ihren Schlisselbildern (das Design bestimmende Fotos, Hintergriinde u.A.) beziehen Das bildet bereits die erste harmo- nische Klammer ftir Ihr Design

Der Einsatz von Farben kann auch die Logik Ihrer Naviga- tionselemente untersttitzen Definieren Sie fiir Ihre Hauptthemen jeweils eine andere Leitfarbe und stimmen Sie fủr die Themen- seiten Link-Farben, Uberschriften und weitere Elemente auf diese Leitfarben ab Ohne die Verwendung von Stylesheets ware diese Aufgabe auferst muhselig - spätestens dann, wenn Anderungen notwendig werden

Setzen Sie Prioritaten Farben und Bilder helfen Ihnen auch, auf |hren Seiten inhaltliche Prioritaten zu setzen und Ihre Besucher unbemerkt durch lhren Inhalt zu lotsen Gruppieren Sie Inhalte mithilfe von Kastchen, Far- ben oder Linien Heben Sie Wichtiges hervor, ordnen Sie weniger wichtige Informationen auch weniger prominent an Das heift, verstreuen Sie nicht alle Information gleichmafig auf Ihren Seiten Auch hierbei hat sich CSS unverzichtbar gemacht Nie war es einfacher, die Aufmerksamkeit Ihrer Besucher auf die wesentlichen Inhalte zu fokussieren

fur alle Falle

CSS BoxMania

NTAKT 7

TEAM PRODUKTE seniice KO! sc

cole dd 1.4 -ẼẽÊẼ lịt, sed gravida |aeU!5 lis risus ° Birne irnen

consectetuer apie fend bibendum, obotis 99% Kirschen

“1adnia euismod nun:

Sie werden lernen,

> wie Sie ein Basislayout erstellen,

> wie Sie die wichtigsten Einstellungen vornehmen und

> wie Sie dieses Layout anpassen können

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Es sorgt bei meinen Kursteilnehmern immer wieder fur Uberraschung, wie einfach doch der Code einer komplex erscheinenden HTML-Seite

im Hintergrund bleibt — selbst wenn diese in einem noch so raffinier- ten Design daherkommt

Ein paar grundlegende Einstellungen bzw Elemente teilen die meisten der hier vorgestellten Seitenvorlagen Um Platz und Wie- derholungen zu sparen, erklare ich hier zunachst ein Basislayout, das ich als Grundlage ftir einige der nachfolgenden Seitenvorlagen zusammengestellt habe Bei den weiteren Layouts mussen dann lediglich Anderungen oder Erganzungen vorgenommen werden

Und so wird es aussehen:

Jog

WY UG cee —— g

iv

CSS BoxMania

HOME TEAM PRODUKTE SERVICE KONTAKT da

cold cole Seitenvorlage Basis 4 Spalten Obst

mprenencaccchencbmnanensncnrssnenensnnasrenenancnanamenscmaanonerarcecr Obst

Consectetuer adipiscing elit Sed gravida iaculis risus, Maecenas Apfel

lactus eras, eleifend bibendum, lobortis aget, consequat quis, Bimen tortor, Quisque lacinia euismod nunc Suspendisse lobortis, massa Kirschen

2 Sollicitudin ultricies, eros felis eleifend risus, imperdiet wulourate Gemuse est ligula at augue Duis vitae massa, Duis yehioula gurus id lacus Tomaten

Morbi nibh Sec dolor felis, accumsen nee, luctus vitae, adipiscing Gurken

eu, nibh, Cras mi sem, tempor et, congue eget, tristique a, arcu Sspinat

Sed matts dui id mauris Donec non elit ac matus congue

commoca Aenean nec mi Sed alit, Vestibulum dui

20.1 Der Basis-HTML-Code

den Sie auf der beiliegenden DVD sowie auf der Website http://

Der body erhalt eine passende id, sodass Sie spater spezifische Mithilfe einer ¡d fùr den a

CSS-Regeln nur fiir diese Seite definieren kénnen body einer Seite konnen Sie

spater ganz gezielt Elemente

</div><! END #header >

<div id="nav">

<ul>

<1i class="navhome"><a href="#">home</a></1i>

<li class="navteam"><a href="#">team</a></1i> aw

<1i class="navprodukte"><a href="#">produkte</a> NỊ_

<1i class="navservice"><a href="#">service</a></1i>

<li class="navkontakt"><a href="#">kontakt</a></1i>

</ul>

</div>

zen, erscheint die Liste horizontal

Jedes Listenelement erhalt eine unterschiedliche Klasse Auch dies geschieht bereits in weiser Voraussicht, sodass Sie spater mit einer Kombination aus

223 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Fiir den Anfang sind fiir das Basislayout zwei Spalten links und eine Spalte rechts neben dem Bereich mit den Hauptinhalten vorgesehen

body#home li.navhome { }

oder body#team li.navteam {}

ganz einfach und automatisch hervorheben kénnen, wo sich Ihre Besucher gerade befinden

<div id="wrap_content">

Dieser div-Container ist ein zusatzlicher Wrapper, der die vier Spalten im Inhaltsbereich zusammenhalt

<div id="coll">Spalte 1</div><! END #coll >

<div id="col2">Spalte 2</div><! END #col2 >

<div id="menu">

<ul>

<1i><a href="#">Obst</a>

<ul>

<li class="aepfel"><a href="#">&Auml ;pfel</a></1i>

<li class="birnen"><a href="#">Birnen</a></1i>

<li class="kirschen"><a href="#">Kirschen</a></1i>

</ul>

</1>

<1i><a href="#">Gem&uuml ; se</a>

<ul>

<li class="tomaten"><a href="#">Tomaten</a></1i>

<1i class="gurken"><a href="#">Gurken</a></1i>

<li class="spinat"><a href="#">Spinat</a></1i>

Auch das Ment ist mithilfe einer unordered list entstanden Bitte beachten Sie, dass hier zwei Listen verschachtelt sind, wo-

durch praktisch zwei Ebenen entstehen Auch beim Ment wer- den Klassen vorgesehen, die spater die Markierung des aktuellen Mentipunktes erlauben Sie werden diese Méglichkeit anhand einer Seite ftir ein Unterthema beim nachsten Seitenlayout an- wenden

<div id="maintext ">

<hl>Basis-Layout vier Spalten</hl>

<p>Consectetuer eleifend <a href="#">bibendum</a>, —

lobortis eget massa <a href="#" target="_blank" —— class="ext">Duis vehicula</a> purus nibh .—

<a href="#">Cras mi sem</a>, tempor dui.</p>

</div><! END #maintext >

<div id="footer">Vorname Nachname &middot; Stra&szlig;e

</div><! END #wrapper >

Den Rest des Codes verstehen Sie nun auch bereits ohne groke Erklarung lm Container divi#maintext sind drei Links vorgesehen, sodass Sie auch Link-Farben und Link-Einstellungen testen kön- nen Einer der Links beinhaltet eine Klasse class="ext" mit einem — target="_blank" Das erlaubt uns, externe Verkniipfungen geson- — dert zu kennzeichnen

happchenweise

sheets, die Sie teilweise bereits im ersten Teil des Buches kennen- gelernt haben:

225 — Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

/* CSS BoxMania Basis-Layout */

htm] {height: 100.1%; font-size: 62.5%; }

Wird die Hohe des Elements htm] auf mehr als 100% gesetzt, so erzwingen Sie in allen Browsern Scroll-Balken Wird die Schrift- groRe auf 62,5% gesetzt, entspricht diese etwa 10 Pixeln, und es kann in Folge einfacher in em gerechnet werden

body { font-family: Verdana, sans-serif;

Alle Elemente des body werden zentriert, damit der Container div#wrapper (also der eigentliche Seiteninhalt) in der Mitte der Seite schwebt

* {margin: Opx; padding: Opx; border: Opx;}

Mit dem Universal-Selektor werden auch hier margin, padding und border fiir samtliche Elemente auf null gesetzt

hl, h2, h3, h4, h5, hé { font-family: "Century Gothic", sans-serif;

margin: Oem Oem 0.5em Oem;

padding-bottom: 0.4em;

font-weight: normal;

Fur eine Uberschrift hl erster Ordnung wird die SchriftgrdRe fest- gelegt Fur eine Unterstreichung sorgt ein gestrichelter Rahmen border-bottom in der Schriftfarbe sowie ein kleiner Abstand pad- ding-bottom, damit der Rahmen nicht zu dicht an der Schrift er- scheint Zuletzt wird noch die Schriftstarke font-weight auf nor- mal (also nicht fett) gesetzt

te ersetzt, da die automatische Unterstreichung sehr hasslich an der Schrift »klebt«

divi#wrapper {

width: 760px;

margin: 20px auto;

Beachten Sie bitte, dass

sich SchriftgroBen vererben und relative GroBenangabe

sich immer auf das Eltern- Element beziehen

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark

227

Mit der Anweisung white-space: nowrap;

kénnen Sie erzwingen, dass die Zeile nicht umbricht Ver- wenden Sie diese Regel aber nur dann, wenn dies nicht Ihr Layout stort Wenn Sie zu viele Navigationspunkte erwarten, sollten Sie Ihr Design tiberdenken In die- sem Fall sind Sie mit einer vertikalen Navigation auf der

Die Textausrichtung wieder auf links zu setzen, ist notwendig,

da im body samtliche Elemente zentriert ausgerichtet wurden

div#header { height: 40px;

background: #FAFAFA;

padding: 10px;

Dem div#header ein padding zu geben, funktioniert zuverlassi- ger, als ihm einen Abstand margin zuzuweisen Allerdings ist zu beachten, dass ein padding zur Héhe des Elements dazugerechnet wird Der Header kdnnte also hdher erscheinen als die angegebe-

ne Hohe von 40px, falls die Schrift vom Benutzer stark vergroRert wird, was in diesem Fall aber kein Problem darstellt

div#nav {background: #CCCCCC;}

div#nav 11 {display: inline; margin-left: 10px; }

Das Setzen der Listenelemente 1i auf den Wert display:inline; bewirkt, dass sie durchgehend in einer Zeile erscheinen (nattirlich nur, sofern die Zeile breit genug ist, andernfalls wird eine neue Zeile begonnen)

divénav a { text-decoration: none;

font-weight: bold;

text-transform: uppercase;

padding-bottom: 2px;

|

(O55 Boxitania “055 fiir Linsteipen * Webhome Basismodell - Mozilla hirefox

wowace same ddeccwccrmaconeucnoecsoecucceuase Gofe!

Consactatuer adipisang alit, Sed Biman 4 Abbildung 20.2

gravida iaculis risus, Maecenas lectus Kirschen Hatten Sie mehr Navi gati-

eros, eleifand bibendum, lobortis agat, Gemise kte als die Breite d

consequat quis, tortor Quisque lacinia Tometen onspun € als ale breite des euismod nunc Suspendisse lobortis, Gurken Layouts erlaubt, rutschten

massa a sollicitudin ultricies, eras felis Spinat die ủ berzahligen Punkte in

“HONE TEAM PRODUKTE SERVICE KONTAKT HOME TEAM PRODUKTE SERMC: rủ

Consectetuer adipiscing elit Sed Bimen Weisen Sie de mdi vit nav ein

gravida iaculis sus, Maecenas lectus kirschen white-space: nowrap; ZU,

eros, eleifand bibendum, lobortis eget, oe dann verbieten Sie sozusa- consequat quis, tortor, Quisque lacinia ometen

euismod nunc Suspendisse lobortis, Gurken ge n das Um brec he Al ler- ;

massa a sollicitudin ultricies, eros falis Spinat dings kann dies - wie in obi-

Layout »sprengen«

In einem Bereich, der von den Besuchern eindeutig als Navigation oder Menti wahrgenommen wird, diirfen Sie ausnahmsweise auf die Unterstreichung von Links verzichten Als Schrift ftir die Navi- gation werden Gro&buchstaben benutzt

229 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Alternativ kénnen Sie das Menii auch mit kleinen Icons vor den Listenpunkten

gestalten

Hier wird fiir Besucher dezent, aber doch deutlich angezeigt, wel- cher Navigationspunkt angewahlt ist, das heibt, in welchem Be- reich der Benutzer sich gerade befindet Dabei ist diese Markie- rung bereits ftir ftinf verschiedene Seiten angelegt und geht davon aus, dass Sie den body jeder Seite mit einer entsprechenden id versehen

div#wrap_content {}

div#coll, div#co12, div#menu, div#maintext {padding:

20px 10px;}

div#coll, div#col2, div#menu (width: 80px; }

Alle vier Spalten erhalten die gleichen Innenabstande Die drei Spalten div#coll, div#col2 und div#menu sollen 100px breit wer- den Da vorher ein seitliches padding von l0px festgelegt wurde, muissen von der gewiinschten Breite also 20px abgezogen wer- den

div#coll, div#col2 {float: left;}

div#coll {background: #EBEBEB; }

div#col2 {margin-left: 5px; background: #E5E5E5;}

Die beiden Spalten div#coll und div#col2 sollen 100px breit sein und - vorläufig - am linken Rand angeordnet sein Da vorher ein seitliches padding von je 10px definiert wurde, miissen Sie die an- gegebene Breite auf 80px reduzieren

div#menu {float: right;}

Die Mentibox schwebt vorlaufig am rechten Rand

div#menu ul {list-style-type: none; font-weight: bold; }

Auch das Ment ist mit einer ungeordneten Liste ul erstellt wor- den Die Listenpunkte werden entfernt, und die Schriftstarke wird fett definiert Allerdings soll diese Einstellung nur ftir die erste Ebene des Ments gelten

divi#menu ul ul {margin-left: 10px; font-weight: normal; }

Daher wird die Schriftstarke in der zweiten Ebene gleich wieder auf normal zurtickgesetzt Zusatzlich wird diese Ebene um 10px

eingertickt, was Sie genauso gut mit einem text-indent erreichen

Die Unterstreichung von Links allgemein wurde ja bereits unter- drtickt, weil diese unsch6n nah am Text anliegt Daher gestalten Sie hier selber eine Alternative und riicken den border-bottom mittels padding ein wenig vom Text ab

Vielleicht fallt uns ja spater noch eine kleine Spielerei dafiir ein

20.3 Variante mit flexibler Breite

Dieses Basislayout funktioniert natủrlich auch problemlos mit Mithilfe eines Style-

einer flexiblen Breite Die entsprechenden CSS-Anweisungen sind SWitchers konnen Sie

" yee bereits vorensenen slecmmussen lediglich einige we BIYWEISI1IrETEDIIKIETS nige Zeilen auskommentieren und bei einigen anderen den Kom- _ paonitorbreiten zur Auswahl

231 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

body { font-family: Verdana, sans-serif;

div#wrapper { /* width: 760px; */

de zum Browserfenster hin definiert werden Dadurch wird auch das Zurticksetzen der Zentrierung tiberfllissig und kann entfallen Hier wurde es lediglich auskommentiert

e Modell FOL eet lobortis eget,

Webhom eee nas jectus eros, eleifend bibendum,

a sollicitudin ultri

tuer adipiscing elit Sed are isse lobortis, massa 39°" ” ss taste

Consectetuer adipiscing © ‘enue lacinia euismod nunc suspendiss? tae massa: Quis vehicula ourus id

ee OSU ~.=_ PĐull€ Vi

Ein einfaches Layout fur einfache Anforderungen

eros

Sie werden lernen,

> wie vielfaltig ein einfaches Layout sein kann,

> wie Sie mit Hintergriinden Eindruck machen und

> wie Sie Ihre Seiten »abrunden« kénnen

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.