Internet und Webseiten

 Documents

 74 views
of 38
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Description
Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 12. Mai 2004 Dipl.-Inf. T. Mättig 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig…
Share
Transcript
Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 12. Mai 2004 Dipl.-Inf. T. Mättig 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen • Dipl.-Inf. T. Mättig – E-Mail: tmaettig@hs-zigr.de – Tel.: 03581 4828-269 – Raum GR I 257 • Diese Folien nach der Vorlesung im Internet: www.maettig.com/wi – Nicht ab-, aber mitschreiben! 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 2 „Sasser“ • 18-jähriger Schüler aus Niedersachsen • Motiviert durch Klassen- Kameraden • Hat jemand Mitleid? 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 3 Vorlesungsinhalte 2004-05-12 • Die Entwicklungsschritte – überarbeitete Version • Illustration: Vom Inhalt zur fertigen Webseite • Ausflug in den „CSS Zen Garden“ • Komplexere HTML-Elemente – Gestaltungs-Möglichkeiten mit Stylesheets (CSS) 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 4 Entwicklungsschritte 1. Inhalt und Struktur festlegen • (Navigations-) Struktur der gesamten Web-Präsenz 2. Design vorbereiten • Z.B. gezeichnet im Grafik-Programm 3. Webseiten erstellen • Inhalt und Seiten-Struktur in HTML • Design in CSS 4. Überprüfen • Testen mit verschiedenen Browsern 5. Ins Internet stellen • Evtl. bekannt machen 6. Kontinuierliche Pflege 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 5 Wozu dieser Quatsch, der nichts bewirkt? • Dokumenten-Typ ist wichtig: – – weil Ihr Design sonst in manchen Browsern anders aussieht. • Zeichensatz ist wichtig: – – weil Ihre Umlaute auf einem japanischen Computer sonst so aussehen: „Liebe Gr□□e!“. – wenn Sie z.B. ein „ł” eingeben wollen. – aber unwichtig, wenn Sie ł schreiben. 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 6 Inhalt / Struktur / Design (1/7) Inhalt 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 7 Inhalt / Struktur / Design (2/7) Struktur Überschrift Absatz Zwischenüberschrift Absatz Zwischenüberschrift Absatz 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 8 Inhalt / Struktur / Design (3/7) Standard-Design 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 9 Zur Erinnerung: Das CSS Box-Modell margin (transparent) border padding Inhalt (Text, Bilder usw., wird automatisch umgebrochen) width 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 10 Inhalt / Struktur / Design (4/7) Visualisierung Inline/Block-Elemente 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 11 Inhalt / Struktur / Design (5/7) a { display: block; } 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 12 Inhalt / Struktur / Design (6/7) #menue { float: right; width: 20ex; } 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 13 Inhalt / Struktur / Design (7/7) Eigenes Design 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 14 Inhalt / Struktur / Design Motivation • Design einmal festlegen, beliebig oft verwenden – Weniger Tipparbeit für Sie, wenn Sie viele Einzelseiten haben • HTML allein ist nicht so kompliziert – Konsistentes Aussehen der Seiten • Design der gesamten Web-Präsenz auf einen Schlag ändern • Sie können keine Seite vergessen • Eine Quelle, viele Verwendungszwecke – Viel leichter z.B. auf Mobiltelefonen darstellbar • Verwendet einfach ein eigenes Mini-Design – Barrierefreiheit • Z.B. kann die Seite viel leichter vorgelesen werden, weil kein Design-Zeug mittendrin steht 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 15 Ein Bild sagt mehr als 1000 Worte • Ja, HTML und CSS ist schwieriger zu verstehen als HTML allein. • Ja, manche Dinge sind mit HTML allein schneller machbar. • Gegenbeispiele: – „CSS Zen Garden“ • http://www.csszengarden.com/ – „CSS + Design“ • http://cssdesign.e-workers.de/ 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 16 Trick: „runde“ Ecken • Block erhält Beispiel einmaliges (no- repeat) Hintergrundbild, das eine „runde“ Ecke darstellt • Farben dieses Bildes stimmen mit den Hintergründen überein 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 17 Komplexere HTML-Elemente • Textstrukturierung • Listen • Verweise (Links) • Grafiken • Tabellen 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 18 Textstrukturierung • Block-Elemente: – Überschrift:

,

usw. • Heading – Absatz:

• Paragraph – Zitatblock:

• Inline-Elemente: – Hervorgehoben: • emphatisch – stark hervorgehoben: – hoch/tiefgestellt: , 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 19 Block-Elemente mit CSS gestalten • h1 { … } – auffällige Farbe, dicke Rahmenlinien vorn, weniger Außenabstände, Hintergrundgrafik als künstlerische Unterstreichung (nicht gekachelt) • blockquote { … } – kursive Schrift, leicht abgesetzte Hintergrundfarbe, dünne Rahmenlinie, mehr Außenabstand 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 20 Inline-Elemente mit CSS gestalten • em { … } – nicht kursiv, fett, herausstechende Farbe • strong { … } – Textmarker-Effekt (grelle Hintergrundfarbe) • blockquote strong { … } – dezentere Hintergrundfarbe, die zur Farbe des Zitatblocks passt 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 21 Trennlinien • Trennlinie:
– horizontale Rule • Mit CSS gestalten – hr { … } • Höhe verändern, Hintergrundfarbe mit dem Seitenhintergrund gleichsetzen, dickere Rahmenlinie mit 3D-Effekt (Relief-Effekt) • Aber: Trennlinien sparsam verwenden! – Mit Rahmenlinien (CSS) können meist die selben Effekte erreicht werden 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 22 Listen •
  • Listenelement 1
  • Listenelement 2
  • Listenelement 3
– ul = unsortierte Liste – ol = ordered Liste – li = Listen-Item 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 23 Definitions-Listen •
ZI
Zittau
GR
Görlitz
Griechenland
– dl = Definitions-Liste – dt = Definitionslisten-Term – dd = Definitionlisten-Definition 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 24 Listen mit CSS gestalten • ul { … } – Gesamte Liste links mit einer Linie absetzen, Listen- Symbol oder Nummerierung ändern (z.B. römisch) • li { … } – Außen-Abstand zwischen den Listenelementen vergrößern (erhöht die Lesbarkeit), Einrückung links vergrößern/verkleinern • Für Menü-Listen: – li { display: inline; } • Listen-Elemente nicht unter- sondern nebeneinander darstellen 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 25 Verweise (Links) • Verweistext – a = Anker, href = Hyper-Referenz • Regeln für Verweistext: – Aussagekräftig • Schlecht: „Zurück“ (wohin denn?) • Besser: „Zurück zur Einstiegsseite“ • Schlecht: „Weitere Informationen gibt es hier“ • Besser: „Weitere Informationen gibt es hier“ – Eindeutig – Art des Verweisziels sollte erkennbar sein 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 26 Verweisziele • Projekt-interne Verweise (Links) – – Kann auf beliebige Datei(typ)en verweisen – Möglichst keine Leer- und Sonderzeichen • Projekt-interne Verweise mit Pfadangaben – – Keine umgekehrten Schrägstriche • Projekt-externe Verweise – • E-Mail-Verweise – 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 27 Verweise mit CSS gestalten • a{…} – Keine Unterstreichung, fett, leicht erkennbare Farbe, (Hintergrund-) Symbol vor jedem Link • Spezial-Effekte: – a:link { … } = noch nicht besuchte Links – a:visited { … } = besuchte Links – a:hover { … } = beim Überfahren mit der Maus • #menue a { … } – Links im Menü () anders darstellen als normale Links 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 28 Zielfenster für Verweise • Öffnen eines neuen Fensters erzwingen – • Aber: Pro/Contra abwägen – Mit erzwungenem neuen Fenster: • Bildschirm und Taskleiste werden immer voller • Ihre Seite bleibt im Hintergrund offen – Ohne erzwungenes neues Fenster: • Besucher kann wählen („In neuem Fenster öffnen“) • Besucher „verlässt“ Ihre Seite (na und?) 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 29 Grafiken • – Ist ein Inline-Element • Beispiel: A a a a a a a a a a a a a a a a a a a a a a • Breite und Höhe angeben – • Grafik beschriften – … – Unterschied beachten: Alternativtext ist nicht gleich Zusatztext (Tooltipp-Fenster) 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 30 Grafiken als Verweise • Aus Beschriftung • wird – Achtung: Bekommt in diesem Fall standardmäßig eine (hässliche) Rahmenlinie – Lösung: a img { border-style: none; } oder: a img { border-width: 0; } oder kurz: a img { border: …; } 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 31 Grafiken mit CSS gestalten • img { … } – dünne Rahmenlinie, Innen-Abstand innerhalb der Rahmenlinie (gefüllt mit einer Hintergrundfarbe), größerer Außenabstand zum Text • Ausrichten – – .umfliessend { … } (oder img.umfliessend { … }) • float-Eigenschaft positioniert das Bild und lässt alles Nachfolgende drumherumfließen • clear-Eigenschaft bricht den Fluss auf – (Neue Beispiele in der Kurzreferenz!) 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 32 Tabellen • Kopf 1 Kopf 2 Daten 2 Daten 1 und mehr
Kopf 1Kopf 2
Daten 1 Daten 2
und
mehr
2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 33 Tabellenzellen verbinden • Zelle 1 Zelle 2 Zelle 3 Zelle 4
Zelle 1Zelle 2 Zelle 3
Zelle 4
2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 34 Zellinhalte ausrichten • Horizontale Ausrichtung – , right, left • Standard für Kopfzellen ist center • Standard für Datenzellen ist right • Vertikale Ausrichtung – , top, bottom • Standard für alle Zellen ist center • Warum nicht CSS? Ist das nicht Design? 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 35 Tabellen mit CSS gestalten • table { … } – Regeln, die die komplette Tabelle betreffen, z.B. Rahmen und Abstände • tr { … } – Regeln, die eine ganze Zeile betreffen • th, td { … } – Regeln, die einzelne Kopf- oder Datenzellen betreffen (oder beides gleichzeitig) 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 36 Das ist doch nicht alles? • Musik, Animation, Video, … • (Kontakt-) Formulare • Dynamische / interaktive Webseiten? – Besucher „ändert“ den Inhalt – Z.B. Forum, Buchen von Reisen, … – Interesse an richtiger Programmierung? • Mit der Sprache PHP ist das möglich (serverseitig) • Kleinere Spielereien sind auch mit JavaScript möglich (clientseitig) 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 37 „Das Internet wird sich eh nicht durchsetzen.“ (Quelle unbekannt) 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 38

Related Search
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks