Lva Webdesign Layoutieren fürs Web

Layoutieren am Web
Lena Doppel, Webdesign WS 09/10

DER ERSTE WEBBROWSER
@ 1993, TIM BERNERS-LEE, CERN

INTERNET WACHSTUM (ALS AUSWIRKUNG DES WEB)
© WIKIPEDIA

Was ist „Markup“?
Was im Word sichtbar
ist:
Lena Doppel
Oskar-Kokoschkaplatz 2
1010 Wien
Wien, den 11. 11. 2009

Sehr geehrte Damen und
Herren!
Ich möchte mich beschweren!

Ihr Produkt ist so was von
schlecht, da geht mir echt der
Humor aus.
Aber wirklich!

Was ist „Markup“?
Was im Word sichtbar Was FÜR DEN COMPUTER im
ist: Word steht (fiktiv):
Lena Doppel [Dokument Anfang, Absatz Beginn,
linksbündig, Standardschrift
Oskar-Kokoschkaplatz 2 HelveticaNeue, 27pt] Lena
1010 Wien Doppel[Zeilenschaltung]Oskar Kokoschka
Platz 2 [Zeilenschaltung]1010 Wien [Absatz
Ende]
Wien, den 11. 11. 2009 [rechtsbündig Beginn] Wien, den 11. 11.
2009 [rechtsbündig Ende, Absatz
Sehr geehrte Damen und Beginn]Sehr geehrte Damen und Herren!
[Absatz Ende, Absatzbeginn]Ich möchte
Herren! mich [Fett Anfang beschweren![Fett Ende,
Absatz Ende, Absatz Anfang]Ihr Produkt
Ich möchte mich beschweren! ist so was von schlecht, da geht mir
[Schriftfarbe rot Anfang]echt[Schriftfarbe
rot Ende] der Humor aus. [Absatz Ende,
Ihr Produkt ist so was von Schrift Papyrus Anfang, Absatz
schlecht, da geht mir echt der Anfang]Aber wirklich! [Absatz Ende, Schrift
Humor aus. Papyrus Ende, Dokument Ende]

Aber wirklich!

Das gleiche in HTML
Was man IM Browser
sieht:
Lena Doppel
Oskar Kokoschka Platz 2
1010 Wien
Wien, den 1. 11. 2007

Sehr geehrte Damen und
Herren!
Ich möchte mich beschweren!

Ihr Produkt ist so was von
schlecht, da geht mir echt der
Humor aus.
Aber wirklich!

Das gleiche in HTML
Was man IM Browser Was der BROWSER sieht:
sieht: <html>
<body>
Lena Doppel 
Lena Doppel 
Oskar Kokoschka Platz 2 Oskar Kokoschka Platz 2 
1010 Wien 1010 Wien


Wien, den 1. 11. 2007 Wien, den 1.
11. 2007

Sehr geehrte Damen und Sehr geehrte Damen und Herren!
Herren! 
 Ich möchte mich
Ich möchte mich beschweren! beschweren! 

Ihr Produkt ist so was von Ihr Produkt ist so was von schlecht, da
schlecht, da geht mir echt der geht mir echt der Humor aus.

Humor aus. Aber
wirklich!

Aber wirklich! </body>
</html>

Guten "Tag" (sprich: Täg)
„Tags“ nennt man die Elemente von HTML. Sie beschreiben das
Aussehen von Webseiten im allgemeinen und Texten im Speziellen

Tags kommen (meistens) in Paaren vor
fetter Text
manchmal auch nicht


manchmal auch nicht

Tags können Attribute und diese wiederum Werte haben


manchmal auch nicht


Tags betten Objekte ein (z.B. Bilder, Töne oder Flash Files)


manchmal auch nicht



Tags kann man ineinander verschachteln


manchmal auch nicht



Tags kann man ineinander verschachteln

Tags beschreiben die Struktur einer Seite, Styles (CSS) beschreiben
das Layout

Don‘ts bei Dateinamen
KEINE Leerzeichen verwenden
meine seite wird z.B. in der URL zu meine%20seite.html

KEINE ä, ü, ö, ß etc. im Pfadnamen
Domains dürfen inzwischen Umlaute verwenden in Pfaden
gilt das gleiche wie bei den Leerzeichen

KEINE &, §, ?, !, $ im Pfadnamen verwenden
sind für Scriptbefehle in der URL reserviert

NICHT Groß- und Kleinschreibung mixen
für den eigenen Rechner und manche Windows-Server ist
hallo.html das gleiche Dokument wie Hallo.html für 99% aller
Server aber nicht

Do‘s bei Dateinamen
NUR Kleinbuchstaben und Zahlen verwenden

Dateinamen generell mit Buchstaben beginnen

IMMER ein Sufﬁx verwenden (.htm, .html)

statt Leerzeichen Unterstriche und Bindestriche
verwenden (_ -)

das Default-Dokument in einem Ordner heisst
IMMER index.htm oder index.html bei einem CMS
z.B. index.php oder index.asp

Links - Getting around...
absolut auf einen anderen Server:
http://www.orf.at/news/whatever.dhtml

absolut auf dem eigenen Server:
/webdesigns/web_f_drei/screen2.html

relativ auf dem eigenen Server:
screen1.html (Datei im selben Verzeichnis)
web_f_drei/index.html (ein Verzeichnis unterhalb)
../ (ein Verzeichniss nach oben)

Web-Screendesign
visuelle Dummy-Seiten in Photoshop, InDesign
etc. zumindestens zwei Seiten-Typen (index/liste
und content)

festlegen der Textformate für CSS

ausmessen der Spalten-Formate in Pixel

ev. tracing image verwenden

umsetzen in tables oder layers

Bildformate am Web
gif (graphic interchange format)

jpg, jpeg (joint photographers expert group)

png (portable network graphics)

tif, tiff (tagged image ﬁle format)

unter Windows (bis XP) werden nur RGB
Dateien im Browser korrekt angezeigt, am Mac
auch CMYK

generell werden nur 3x8-bit Dateien richtig
angezeigt

Farbräume am Schirm
und in Print
RGB CMYK

Red/Green/Blue Cyan/Yellow/
Magenta/Key

additives Farbmodell subtraktives
Farbmodell

emittiertes Licht Farbe auf Medium

„schwarz“=0% „schwarz“=100%

Abbildung von Farbe am
Schirm
Computer arbeiten mit 0 und 1

1-bit Farbsystem könnte 2 Farben darstellen,
z.B. schwarz=0 und weiss=1

2-bit Farbsystem könnte 4 Farben darstellen,
z.B. schwarz=00, dunkelgrau=01,
hellgrau=10, weiss=11

8-bit Farbsystem RGB kann 16,7 Mio.
verschiedener Farben darstellen.

Wieso 16,7 Mio.?
8-bit bedeutet, dass eine Farbkomponente
von 8 Nullen und Einsen dargestellt wird

jede Farbe besteht aber aus den drei
Komponenten rot, grün und blau

daraus ergibt sich, dass jede Farbe von
8+8+8 = 24 Nullen und Einsen dargestellt
wird

000000000000000000000000 = schwarz
111111111111111111111111 = weiß

Wieso 16,7 Mio.?
Eine Farbkomponente wird von 8 Nullen und
Einsen gebildet (00000000 bis 11111111)

Die Anzahl an Möglichkeiten beträgt 2 hoch 8

2hoch1=2*1=2, 2hoch2=2*2=4,
2hoch3=2*2*2=8 .......
2hoch8=2*2*2*2*2*2*2*2*=256

RGB = 256*256*256=16.777.216
Farbmöglichkeiten

What the #FFF ***?
Schwarz =0000000000(R)0000000000(G)00000000(B)
oder
=000000 (00->R, 00->G, 00->B)

Weiß
=11111111(R)11111111(G)11111111(B) oder
=FFFFFF (Kurzschreibweise FFF)

dazu braucht es ein „erweitertes“ Ziffernsystem, das
hexadezimale („Basis 16“)

unser dezimales System (dezimal = Basis von 10
Ziffern) hat die Ziffern 0,1,2,3,4,5,6,7,8,9

hexadezimal hat die (Basis von 16) „Ziffern“
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

GIF
für damalige (80er Jahre) Netzkapazitäten entwickeltes sehr
kleines Format

kann animiert werden

keine Kompression, kein Qualitätsverlust, aber „Farbverlust“

8-bit Farbraum (im Gegensatz zum 24bit Farbraum
moderner Bildbearbeitungssoftware), dh. kann nur 256
Farben darstellen (insgesamt!)

unterstützt Transparenz

kann auch weniger als 256 Farben darstellen (siehe 1-bit,
2-bit)

Einsatz: bei Farbﬂächen, Logos, Line Art

JPEG
Kompressionsverfahren mit Verlust an
Bilddaten

kann 16,7 Mio Farben darstellen (24bit
Farbraum)

keine Unterstützung von Transparenz

löscht Bilddaten (unwiderbringlich) und
speichert stattdessen Annäherungen in
Formeln

Kompressionsverfahren erzeugt so genannte
„Artefakte“, meist sichtbar als Sprenkel in

PNG
modernstes Format

Kompressionsformat wie jpg, aber mit
„besseren“ Techniken

unterstützt Transparenz

keine Unterstützung in älteren Browsern

Einsatz: kann alles was gif und jpg kann außer
Animation

Lva Webdesign Layoutieren fürs Web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Empfohlen

Empfohlen (20)

Lva Webdesign Layoutieren fürs Web