Lva Webdesign Layoutieren fürs Web

897 Aufrufe

Veröffentlicht am

Veröffentlicht in: Bildung
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
897
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
21
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Lva Webdesign Layoutieren fürs Web

    1. 1. Layoutieren am Web Lena Doppel, Webdesign WS 09/10
    2. 2. DER ERSTE WEBBROWSER @ 1993, TIM BERNERS-LEE, CERN
    3. 3. INTERNET WACHSTUM (ALS AUSWIRKUNG DES WEB) © WIKIPEDIA
    4. 4. Was ist „Markup“?
    5. 5. 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!
    6. 6. 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!
    7. 7. Das gleiche in HTML
    8. 8. 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!
    9. 9. Das gleiche in HTML Was man IM Browser Was der BROWSER sieht: sieht: <html> <body> Lena Doppel <p> Lena Doppel<br /> Oskar Kokoschka Platz 2 Oskar Kokoschka Platz 2<br /> 1010 Wien 1010 Wien </p> Wien, den 1. 11. 2007 <p style="text-align:right"> Wien, den 1. 11. 2007 </p> Sehr geehrte Damen und <p> Sehr geehrte Damen und Herren! Herren! </p> <p> Ich möchte mich Ich möchte mich beschweren! <strong> beschweren! </strong> </p> Ihr Produkt ist so was von <p> Ihr Produkt ist so was von schlecht, da schlecht, da geht mir echt der geht mir echt der Humor aus. </p> Humor aus. <p style="font-family:Papyrus"> Aber wirklich! </p> Aber wirklich! </body> </html>
    10. 10. Guten "Tag" (sprich: Täg)
    11. 11. Guten "Tag" (sprich: Täg) „Tags“ nennt man die Elemente von HTML. Sie beschreiben das Aussehen von Webseiten im allgemeinen und Texten im Speziellen
    12. 12. 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 <strong>fetter Text</strong> manchmal auch nicht <br /> <!--Zeilenschaltung-->
    13. 13. 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 <strong>fetter Text</strong> manchmal auch nicht <br /> <!--Zeilenschaltung--> Tags können Attribute und diese wiederum Werte haben
    14. 14. 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 <strong>fetter Text</strong> manchmal auch nicht <br /> <!--Zeilenschaltung--> Tags können Attribute und diese wiederum Werte haben Tags betten Objekte ein (z.B. Bilder, Töne oder Flash Files)
    15. 15. 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 <strong>fetter Text</strong> manchmal auch nicht <br /> <!--Zeilenschaltung--> Tags können Attribute und diese wiederum Werte haben Tags betten Objekte ein (z.B. Bilder, Töne oder Flash Files) Tags kann man ineinander verschachteln
    16. 16. 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 <strong>fetter Text</strong> manchmal auch nicht <br /> <!--Zeilenschaltung--> Tags können Attribute und diese wiederum Werte haben Tags betten Objekte ein (z.B. Bilder, Töne oder Flash Files) Tags kann man ineinander verschachteln Tags beschreiben die Struktur einer Seite, Styles (CSS) beschreiben das Layout
    17. 17. Website Struktur - simpel
    18. 18. Website Struktur - komplexer
    19. 19. 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
    20. 20. Do‘s bei Dateinamen NUR Kleinbuchstaben und Zahlen verwenden Dateinamen generell mit Buchstaben beginnen IMMER ein Suffix 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
    21. 21. 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)
    22. 22. 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
    23. 23. Bildformate am Web gif (graphic interchange format) jpg, jpeg (joint photographers expert group) png (portable network graphics) tif, tiff (tagged image file 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
    24. 24. 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%
    25. 25. 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.
    26. 26. 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ß
    27. 27. 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
    28. 28. 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
    29. 29. FARBHARMONIE WERKZEUGE
    30. 30. 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 Farbflächen, Logos, Line Art
    31. 31. 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
    32. 32. 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

    ×