Tài liệu Einstieg in CSS- P7 ppt

Die Verwendung von em nicht nur bei Schriftgré- Ben, sondern auch bei Ab- standen fiihrt dazu, dass sich auch Letztere proportional zu den Schriftgrö Ren ver- Nun haben Sie zwar ein

Trang 1

lm zweiten fieldset platzieren Sie adressbezogene Formularfel- der:

<fieldset><legend>Adresse</legend>

<label for="strasse">Straße<input id="strasse"

name="Strasse” type="text" value="Straße" />

</label>

Clabel for="ort">Ort<input id="ort" name="ort"

type="text” value="Ort" /></label>

(label for="bundesland">Bundesland<input id="bundesland"

name="bundesland" type="text" value="Bundesland” />

</label>

label for="plz">PLZ<input id=”plz” name=”p]z”

type="text” value="PLZ" /></label>

(label for="land">Land

<option selected="selected">&Ouml ;sterreich</option>

<option> Deutsch] and</option>

<fieldset class="radio"><legend>Kreditkarte </legend>

(label for="card1"><input ïid=”cardl” name=”card”

type="radio” />American Express</label>

label for="card2"><input id="card2" name="card"

type="radio" />Mastercard</label>

label for="card3"><input id="card3" name="card"

type="radio" />Visa</label>

</fieldset>

<label for="cardnum">Kartennummer<input id="cardnum"

name="cardnum" type="text” value="ohne Leerzeichen" />

</label>

<label for="expiry">G&uum];1tig bis<input 1d=*expiry"

name="expiry" type="text" value="mm/jj" /></label>

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

187_—_

Trang 2

sehr unschén »auseinander-

fallen« Die Verwendung von

em nicht nur bei Schriftgré- Ben, sondern auch bei Ab-

standen fiihrt dazu, dass sich

auch Letztere proportional

zu den Schriftgrö Ren ver-

Nun haben Sie zwar ein (theoretisch) funktionierendes Formular,

es sieht aber noch alles andere als ansprechend aus

Kartennummear ohne Leerzeicher Gultig bis min!) Apdschicken!

Der CSS-Code

#myform fieldset, #myform input, #myform select {border:

#myform fieldset { width: 24em;

margin: 2em 0em 2em 2em;

Trang 3

#myform fieldset fieldset {width: auto; margin: Oem 0em lem 0em; padding-bottom: Oem; }

#myform fieldset fieldset legend (font: inherit; color:

inherit; font-weight: bold;}

Da die Beschriftung der inneren fieldset-Elemente eine andere

Schrift zeigen soll als die der 4uberen, und Sie fiir fieldset allge-

mein bereits die Schrift Georgia definiert haben, holen Sie mithil- Darstellung von legend in _

fe des Wertes inherit (erben) einige der ursprtinglichen Schrift- | verschiedenen Browsern

#myform fieldset.radio label {font-weight: normal;}

#myform fieldset.anrede label {float: left; width: 8em; ]

Die Entweder-Oder-Auswahl fiir »Herr« oder »Frau« wird mit so- genannten »Radio-Buttons« geldst Diese Buttons sollen nebenei- nander erscheinen, also werden sie gefloatet

Radio-Buttons

erlauben nur eine Auswahl

Dagegen kénnen mithilfe des

width: 20em;

padding: 0.2em 0.6em 0.3em 0.6em;

Die richtigen Abstande ftir die Eingabefelder input zu finden, ver- —

#myform fieldset.radio input {

Trang 4

Abbildung 16.2

Ubung 17b, Formular (FF)

16 Formulare formschön gestalten

marqgin: 0.4em 0.4em 0em Oem;

Alle anderen Radio-Buttons sollen untereinander erscheinen Daher setzen Sie hier ein Attribut clear, wodurch ein Radio-But-

ton mit einer neuen Zeile beginnt Die Breite wird mit dem Wert

auto so definiert, dass sie den Inhalt des Elements umschliebt

#myform input#submit {width: 21.4em; margin-top: 2em;

border: 2px solid #999999; border-color: #CCCCCC #CCCCCC

#999999 #999999; }

#myform input#submit:hover {background: #990000; color:

#FFFFFF; font-weight: bold; }

SchlieBlich wird noch die Schaltflache zum Absenden des Formu-

lars an das Design der Seite angepasst Als Hintergrund konnen Sie hier natUrlich auch Bilder anstelle von Farben einsetzen

Und so sieht es aus:

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

Trang 5

margin: 2em Oem 2em 2em;

padding: lem;

background: #F8F8F8 url(images/bg_fieldset jpg) repeat-x left bottom;

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

Trang 6

r von Ihnen o persichtlichet un

Sie sehen Elemente macht Ihre

nildschirm=

CSS ist nicht nur benutzer-,

sondern auch medienfreundlich

Sie werden lernen,

>» welche Medien CSS unterstitzt,

>» worauf es beim Styling ftir den Druck ankommt und

>» wie Sie lhre Besucher beim Drucken tiberraschen kénnen

Trang 7

Sie konnen Stylesheets fur eine deutlich im Design reduzierte Darstellung Ihrer

Seiten aber auch zum Umschalten der Bildschirm- ansicht anbieten Einen

Einer der berragenden Vorteile von Stylesheets verbirgt sich hin- ter der Moéglichkeit, fir unterschiedliche Ausgabemedien unter- schiedliches Design zu gestalten und automatisch bereitzustellen

So wird beispielsweise ein Stylesheet ftir den Druck, das entspre-

chend deklariert ist, automatisch gewahlt, sobald der Benutzer

eine Druckfunktion waht Oft bedarf es nur ein paar weniger An- derungen, um eine Seite vdllig anders aussehen zu lassen

Ein schénes Beispiel fiir ein solches Stylesheets speziell flir den Druck finden Sie unter:

Trang 8

171 Verknipfung von Media-Stylesheets

camels * betory of fomnaie ecvnces * hatory of crmanclogy* tomrole hitp \heww cremecc rev icomnex hestoryindes htm

crime22Z net crimeltine * history of forensic science * history of crime Great thanks to mary contributors te Prof Anil Aggrawal Richard Munroe B.Sc.,

Sve -Natorit pxtture wring of ¢ hand with ridge patterns @

dscovered in Nova Scotia,

in ancent Babylon, fingerprints are used on clay tablets for

business transactions

>700 in ancient Chins, thumb prints ore found on doy St

250 ERASISTRATUS , an ancient Greek physician, observes that his

pabents’ pulse rates mcrease when Mey teltwn bes Thvs is

suppoted to be the fret He detection test

Wozu die Miihe?

Ich wei ja nicht, wie es Ihnen damit ergeht, aber die meisten

Menschen, die ich kenne, lieben es gar nicht, auf einem Monitor lesen zu mlssen Viele von ihnen haben noch nie im Leben so viel

Papier verbraucht, wie in Zeiten des Internets Sie drucken nam-

lich aus, was sie interessiert Die einen tun dies aus der Unsicher-

heit heraus, dass die betreffenden Seiten morgen vielleicht schon

in den Tiefen des Webs verschwunden sein kénnten, die anderen

schlicht und einfach, weil ihre Augen danach verlangen

Seien Sie also benutzer- und medienfreundlich!

Das ist namlich der Punkt Das Anbieten einer Druckversion Ihrer

Seiten wird von den Lesern als Serviceleistung, d h als zusatzliche und niitzliche Funktionalitat |hres Internetauftritts empfunden

171 Verknupfung von Media-

Stylesheets

Grundsatzlich stehen drei Méglichkeiten zur Verfigung, um Me- dia-Stylesheets (nicht nur ftir den Druck) mit Ihrem HTML-Code bzw Ihrer HTML-Seite zu verknipfen

link Die einfachste (und empfehlenswerte) Methode, ein Stylesheet fiir den Druck oder andere Medien mit Ihrem HTML-Dokument zu verbinden, ist das link-Element im Kopf (head) der Datei:

4 Abbildung 17.2

History of Forensic Sciences, Druckansicht (FF)

An letzter Stelle

Stylesheets fiir Medien, ins-

besondere ftir den Druck, sollten immer an letzter Stelle eines CSS-Dokuments stehen Andernfalls kann es vorkommen, dass eine An-

weisung im Druck-Stylesheet unbeabsichtigt eine Anwei- sung im allgemeinen CSS

berschreibt

Trang 9

@media Die dritte Méglichkeit erwahne ich hier nur der Vollstandigkeit halber Am besten vergessen Sie sie gleich wieder Warum es dem Kerngedanken von CSS widerspricht, Styles direkt in die HTML- Datei einzubinden, habe ich ja bereits erklart

17.2 Stylesheets fiir Medien-Typen

CSS zeigt seine Vorteile aber nicht nur beim Druck Fir die fol- genden Medientypen kénnen eigene Stylesheets ausgegeben werden:

— 196

Trang 10

17.3 Checkliste fiir Druck-Stylesheets

> all Dieses Stylesheet gilt flir alle Ausgabemedien Wenn Sie media nicht explizit deklarieren, so gilt ein Stylesheet flir alle Medien

> aural Gilt fiir die Ausgabe in Sprachsystemen (meist fiir Menschen

mit Sehschwachen bzw blinde Menschen)

> braille Liefert Styles ftir sogenannte Braille-Zeilen, die blinden Men- schen als Erweiterung der Tastatur beim Lesen von Seiten hel- fen

> emboss Stylesheets ftir Braille-Drucker

> handheld Richtet sich an mobile Ausgabegerate Es sollte auch geringe Bandbreiten berủcksichtigen

> print Optimiert Seiten fiir den Ausdruck

> projection Styles fiir Prasentationen auf Projektoren, Ausdruck auf Folien u.Ä

> screen Sorgt fiir optimierte Darstellung auf (Farb-)Monitoren

Fiir sogenannte Tele-Types muss beriicksichtigt werden, dass die AnzeigegröRe des Displays meist sehr klein ist

>» tv Passt die Darstellung von Seiten fiir TV-artige Gerate an, die durch eine niedrige Auflésung, eine meist geringere Farbtie-

fe sowie eine eingeschrankte Scroll-Funktion charakterisiert sind

Sie muissen sich (buchstablich) lediglich vor Augen halten, was

im Druck nicht mdglich ist, beziehungsweise was Ihre Benutzer

normalerweise bei einem Ausdruck stéren kénnte bzw was nicht

bendtigt wird Drucken Sie einfach einmal einige Seiten aus und sehen Sie selbst, welche Punkte das Lesevergniigen beeintrach- tigen

ADT: «

Trang 11

Was ist auf einem Ausdruck iiberfliissig?

Werbung Bilder

> Informationen, die fiir den Ausdruck nicht bendtigt werden

> Erklarung, dass es sich um eine Druckversion handelt

Genug der Theorie, jetzt wollen Sie es sicher wissen! Kopieren Sie bitte den Ordner uebung14 und benennen Sie diesen um in uebung18 Den darin vorhandenen Dateien geben Sie bitte die Namen uebung18a.htm und uebung18a.css Erstellen Sie auch noch eine zusatzliche CSS-Datei mit dem Namen uebung? 8aprint.css Kopieren Sie das 1ink-Element im head-Bereich Ihrer HTML- Datei uebung18a.htm und fligen Sie dieses nochmals ein Passen Sie beide 1ink-Elemente wie folgt an:

— 198

Trang 12

17.3 Checkliste fũr Druck-Stylesheets

Der HTML-Code Anderungen im HTML-Code sind zwar grundsatzlich nicht not- wendig, Sie werden nun aber ftir die Besucher Ihrer Seiten noch eine kleine Uberraschung vorbereiten Fligen Sie bitte zwischen div#header und divd#nav einen Container div mit id#printinfo

<div id="printinfo">Hier steht Text, der Ihre Besucher

darüber informieren soll, warum die Seiten beim Ausdrucken anders aussehen.</div>

Sie werden nicht glauben, wie viele Anfragen ich bereits erhal- —

ten habe, warum Seiten beim Ausdruck nicht so erscheinen wie

am Bildschirm! Eine Erklarung dazu kénnte etwa lauten: Sie sehen a eine Druckversion der von Ihnen gewahlten Seite Das Weglassen

verschiedener Bildschirmelemente macht Ihren Ausdruck ủber- sichtlicher

Zusatzlich zu dieser Information kénnten Sie zum Beispiel einen eigenen footer fiir den Druck dazu verwenden, um Kontaktinfor-

dem urspriinglichen div#footer nun bitte Folgendes ein: 3

<div id="printfooter">Für R&uum] ;ckfragen wenden Sie sich bitte an Max Mustermann, Tel.123 456</div>

Auch diese Information soll in dieser Form nur in der Druckversion

Sie ahnen bereits, was jetzt kommt: Diese Information fiir den

Ausdruck soll nattirlich nicht erscheinen, wenn Benutzer die Seiten

lediglich auf dem Bildschirm betrachten Daher wird sie im »nor- malen« Stylesheet versteckt

div#printinfo, divéprintfooter {display: none;} Die Auswirkungen Ihres —

Codes fiir die Druckversion

’ : können Sie kontrollieren,

Der CSS-Code in uebung18aprint.css i dard ie ial erie hod _ Zuerst setzen Sie den Seitenhintergrund auf Wei’, um dann mithil- |lhres Browsers oder im Kon-

fe des Universal-Selektors weitere Eigenschaften fiir alle Elemente |†#⁄tmenủ den Punkt DRuck-

Trang 13

Fũr den Druck werden Als SchriftgröÉe legen Sie allgemein 12pt fest, die eine pas-

_vornehmiich fixe Schrift- — sende GrdRe fiir den Druck und eine gut lesbare Grofe fiir den

groBen in Punktvewendet 4 ftext darstelit Mit der Schriftfamilie Trebuchet MS sorgen

Auch bei Breiten- und

Höhenangaben verwenden 9! fir ein zwar nicht allzu elegantes, aber ebenfalls gut lesbares Sie »Papiermae« wiemm Schriftbild

und cm Da Elemente mit float dazu neigen, dass Teile des Inhalts beim

Drucken »verschluckt« werden, heben Sie float nun generell auf

div#printinfo, div#printfooter { display: block;

border: 1px dashed #CCCCCC;

padding: 4mm;

font-size: 10pt;

Die versteckten Informationen werden mittels display nun expli-

zit wieder sichtbar gemacht Sie werden bemerken, dass im Druck- Stylesheet grobenteils Mabeinheiten verwendet werden, die den Gepflogenheiten beim Drucken entsprechen, wie hier beispielsweise mm

div#nav, div#menu, div#footer, img {display: none; } div#wrapper, div#wrapcontent, div#maintext, blockquote [

200

Trang 14

width: auto;

} div#maintext {padding: 4mm; }

So sieht es bisher aus:

CS BozMamua * Ubung 1a * C33 fir Eaneleiger * Eheabeth Wetsch * Gah file /MOJSERVERS_wiIDFACTORY Wwebeoterdwww cerboxmarss com/eab

CSS BoxMania

Sa tehen dine Druckversion der von Ihnen gewahiten Seite Das Weglatsen vertchiedener

Bidschimm-Elemante macht Ihren Ausdrucke Ubersichticher und kompakter

Dies ist eine Headline

consectetuer adipiscing elit Nam in mauris at nibh mollis loborti¥estibulum ante ipsum primis in faucibus orci luctus et ultrices posuereudilia Qurae, Sed

tortor neque, mattis quis, dictum vestibulum, egestas ac, lacus

Pellentesque habitantyggcbl tistique senectus et netus et melesueda fanes ac

turpis egestas Cras ullamecormer auctor mi Quisque sliquet lorem nec Ipsum Nulls

justo Pellentesque oree vehicula sem Mauris ac pede eget purus laculls congue

Aenean lorem dui, ultricies et, hendrerit in, rhoncus eget, nibh Donec vitae nunc

Quisque elementum condimentum nisi Integer blandit dul at justo Ut aliquam 4 Abbildung 17.3

massa Integer vitae felis vel est feugiat pharetra Sed adipiscing aliquam leo Ubung 18a, Seite mit Teil des

Dháe2llá 2 32x22 F le cu 225.2 AI L2 1,

Druck-Stylesheets (FF)

Andere Eigenschaften werden versteckt, da sie keinen Nutzen ftir

eine Druckversion haben Die Breite auto fiihrt dazu, dass sich die

entsprechenden Elemente an den Einstellungen des Druckers fủr die Rander orientieren

Gleichzeitig wird auch div#maintext durch ein entsprechen- des padding vom Rand weggertickt, sodass der Text btindig mit

div#printinfo und div#printfooter erscheint:

a {font-weight: bold; text-decoration: none; } h1, h2, h3, h4 {

font-family: "Century Gothic", sans-serif;

Trang 15

Möchten Sie Links im Druck

unterstreichen, dann verfah-

ren Sie so, wie Sie es bereits

gelernt haben, indem Sie

einen border-bottom anstatt text-decoration einsetzen

div#maintext h1, divé#maintext h2, divé#maintext h3 {border-bottom: lpx dashed #CCCCCC; margin: 6mm Omm; } div#maintext p {margin-bottom: 6mm; }

Zu guter Letzt definieren Sie noch Schriftgréen, auch hier wieder

in der Einheit pt, und sorgen fir ein wenig Kosmetik

Links kennzeichnen?

Ob man Links hervorhebt oder nicht, ist Geschmackssache Die

automatische Unterstreichung von Links im Druck sieht ziemlich hasslich aus Daher beschranke ich mich darauf, Verknipfungen im Druck einfach fett zu markieren

Und so sieht es aus:

CS BoxMamaa * Ubung 11s * CSS fir Eanetenger * Ehesbeth Wetsch * Gah file MOJSERVERS_viIDFACTORY /webeeterdwuw cerboxmars comteb

CSS BoxMania

Sa sehen aine Druckversion der von Ihnen gewahiten Seite Das Weglatten verichiedener

Bidschim-Elemente macht Ihren Ausdrucke Ubersichticher und kompakter

Dies ist eine Headline consectetuer adipiscing elit Nam in mauris at nibh mollis lobort ¥estbulum ante ipsum primis in faucibus ord luctus et ultrices posuereubilia Curae Sed tortor neque, mattis quis, cictum vestibulum, egestas ac, lacus

Pellentesque habitantmorbi tristique senectus et netus et malesuada fames

ac turpis egestas Cras ullamcorper auctor mi, Quisque a@iquet lorem nec

ipsum Nulla justo, Pellentesque ornare vehioula ser Mauris ac pede eget purus laculis congue Aenean lorem dui, ultricies et, handrerit in, rhoncus eget, nibh Donec vitae nunc

Tiêu đề	Tài liệu Einstieg in CSS - P7 ppt
Trường học	Unknown University

Định dạng
Số trang	30
Dung lượng	7,03 MB