Verdana Courier Georgia Arial Times New Roman w k M R.
-
Upload
uwe-boehnke -
Category
Documents
-
view
120 -
download
2
Transcript of Verdana Courier Georgia Arial Times New Roman w k M R.
![Page 1: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/1.jpg)
Verdana
Courier
Georgia
ArialTimes New Roman
w
k
MR
![Page 2: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/2.jpg)
on-screen-design
grundlagen der webgestaltung
07.03.2002
rainer weidenhiller
![Page 3: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/3.jpg)
on-screen-design
• schrift• farbgebung• layout
![Page 4: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/4.jpg)
schrift
• welche schriftarten sind webfähig?
– groteskschriften (serifenlose linearantiqua)
• arial• verdana
– antiquaschriften• times• georgia• courier
![Page 5: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/5.jpg)
schrift
• diese schriftarten sind auf allen computern installiert
• nicht installierte schriften werden vom browser ersetzt und zerstören u. u. das layout
• diese schriftarten sind auch bei einer auflösung von 72 dpi noch detailgenau
![Page 6: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/6.jpg)
schrift
embedded fonts
• bieten die möglichkeit schriftarten in html einzubinden und somit mit dem html-code zu übermitteln
• dazu sind spezielle programme erforderlich:
• true doc (bitstream)
• open type (adobe)
• weft (microsoft)
![Page 7: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/7.jpg)
schrift
embedded fontsvorteil:
auch nicht installierte schriften können beim user angezeigt werden
![Page 8: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/8.jpg)
schriften
nachteile:
- nicht alle schriften eignen sich technisch zum einbetten
- viele schriftarten werden bei einer 72-dpi-darstellung schwer lesbar
- unter umständen klappen beim user popupfenster auf
- embeddingprogramme sind kommerziell,ausnahme weft
embedded fonts
![Page 9: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/9.jpg)
schriften
schriften als grafik
schriften können auch als grafiken (gif oder jpg) abgespeichert werden
notwendig bei logos und firmenbezeichnungen
achtung:
diese „schriften“ sind weder editierbar, noch können sie von schuchmaschienen ausgelesen werden!
![Page 10: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/10.jpg)
schriften
schrift und layout
grundregel
2 schriftarten
2 auszeichnungen
diese präsentation lief bisher mit 1 schriftart und einer auszeichnung
satzbreite
35 - 60 zeichen
![Page 11: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/11.jpg)
farbgebung
ebenso wie bei den schriften heißt es hier „weniger ist mehr“
die farbgebung einer webseite ist immer das wechselspiel von schrift, farbe und bildern
d.h. das design lebt vom zusammenspiel dieser elemente und nicht von den elementen
![Page 12: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/12.jpg)
farbgebung
die farbgebung muss zum inhalt passen
bilder sollten auf neutralen untergrund gesetzt werden
schriftfarbe und hintergrund müssen harmonieren
![Page 13: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/13.jpg)
farbgebung
kontraste
farbe- an-
sich-
kontrast
![Page 14: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/14.jpg)
farbgebung
kontraste
hell-
dunkel-
kontrast
![Page 15: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/15.jpg)
farbgebung
kontraste
komplementärkontrast
![Page 16: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/16.jpg)
farbgebung
kontraste
simultankontrast
simultankontrast
![Page 17: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/17.jpg)
farbgebung
farbraum• alle auf dem computer dargestellten farben
werden nach der additiven farbmischung gemischt
- die drei grundfarben sind rot grün und blau
• drucker erzeugen farbe durch subtraktive farmischung
- hierbei sind die grundfarben cyan (blau), magenta (rot) und gelb
• es ist fast unmöglich bildschirmfarben 1:1 als print wiederzugeben
![Page 18: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/18.jpg)
layout
tipps:
•breite der webseite max. 700 Pixel
•vorsicht mit hintergrundbildern, sie werden u.u. gekachelt
•hintergrundbilder dezent halten– wasserzeichen– schwarz-weiß
![Page 19: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/19.jpg)
layout
tipps:
•bilder als gif- 265 farben, transparenz möglich
•oder als jpeg- 16,7 millionen farben, keine
transparenz
•mit animationen sparsam umgehen
•ladezeiten testen
![Page 20: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/20.jpg)
layout
tipps:
•style sheets verwenden•mit tabellen arbeiten•beispiele
![Page 21: Verdana Courier Georgia Arial Times New Roman w k M R.](https://reader036.fdocument.pub/reader036/viewer/2022062307/55204d7449795902118c87c9/html5/thumbnails/21.jpg)
layout
und so bitte nicht!
•wie war das mit den tabellen?•ob das die richtige wahl ist?•alles ist möglich!•weitere goodies (badies?)