Introduction to Technologies. Stylesheets mit CSS

Transkript

1 Introduction to Technologies Stylesheets mit CSS

2 Beispiele CSS

3 Beispiele enthält z.b. Fenster mit Scrollbalken enthält viele Beispiele und Links, oft auch in englisch verschiedene Beispiele und Anleitungen englische Seite zu Webdesign und CSS Werkzeug zur automatisierten Erstellung von HTML aus einer Liste von IDs für Seitenbereiche Tutorial für frei skalierbare Box mit runden Ecken

4 Webdesign mit CSS Plan mit detaillierter Spezifikation Funktionen und Eigenschaften der Webseite Technologien, die genutzt werden sollen Standards, Browser, Plattformen, die unterstützt werden sollen

5 Webdesign mit CSS Wie viele Seitentypen? - Startseite, Unterseite, Verteilerseiten, Katalogseiten, Bestellseiten, Hilfeseiten, Sitemap Wie viele Seitenbereiche? - Kopfbereich mit Logo, linke Spalte Navigationsleiste, Bildbereich, Inhaltsspalte, Fußzeile...

6 Webdesign mit CSS Box-Modell zur Platzierung von Bereichen Inhaltsbreite bzw. -höhe, Innenrand, Rahmen jedes HTML-Element hat eine eigene Box punktgenaue Positionierung von Elementen (Pixel) dehnbares Layout, dynamisch anpassbar (%)

7 Copyright: Jon Hicks

8 display -Eigenschaft entscheidet, wie Browser ein Element darstellen soll Block, Listenelement, Textzeile o.ä. derzeit von den Browsern unterstützt: block, inline, list-item, none

9 Mehrspaltiges Layout Zusammenfassung von HTML-Elementen zu <div> - Bereichen Eingliederung in Seitenlayout durch Definition von Außenrand, Rahmen und Innenrand Eigenschaft position: absolute oder relative Positionierung von Elementen relativ zum übergeordneten Element

10 Mehrspaltiges Layout Absolute Positionierung richtet sich immer am übergeordenten Element aus Relative Positionierung wird an der Stelle ausgerichtet, an der sich das Element ohne Positionierung befinden würde

11 Anordnung mehrerer Blöcke mehrere Elemente nebeneinander: Summe ihrer Breitenwerte muss Gesamtbreite des Blocks entsprechen am besten gleiche Maßeinheit für alle Breitenangaben Bsp.: Breite des body-bereiches 400px, 1. Block 80px, 2. Block 200px, 3. Block 120px Breite = width-eigenschaft

12 float-eigenschaft Werte left, right, none left und right verschieben Element an die linke bzw. rechte Seite der übergeordneten Box Element wird von Inhalten der nachfolgenden Boxen umflossen z.b. hängende Initialen

13 clear-eigenschaft Ausschalten den float-eigenschaft z.b. zum Trennen von Absätzen, wenn nur ein Absatz umfliessen soll, der nächste aber nicht Werte left, right, both, none für fast alle inline- und block-elemente

14 Höhen und Breiten Höhenangaben unkritisch, da es keine Höhenbegrenzung gibt absolute Werte sind unflexibel, Probleme bei Größenveränderung des Browserfensters Layout sollte dehnbar sein Prozentangaben Beispiele:

15 Überlappungen von Elementen Standardmäßig Anordnung von Elementen neben- oder übereinander Für manche Effekte gewünscht: stapeln Angabe nötig, welches Element durch das andere verdeckt wird Position in der Stapelfolge heißt z-index

16 z-index ohne z-index gilt Reihenfolge des HTML- Codes Je größer der z-index, desto weiter oben in der Stapelfolge ist das Element { position: absolute; z-index: 2; } g.htm#z_index

17 Design mit CSS nach dem Layout nun Design einzelner Elemente und Details farbige Gestaltung, Effekte Jeder Benutzer kann in den Benutzereinstellungen seines Browsers eigene Voreinstellungen treffen, die das Stylesheet überschreiben

18 Farben mit CSS Zuweisung möglich für Hintergründe, Rahmen, Text und Links Farbdefinition über Farbnamen, systemspezifische Farbwerte, RGB- Dezimalwerte, RGB-Hexadezimalwerte, RGB-Prozentwerte 16 Farbnamen per Standard unterstützt, aber 140 von nahezu jedem Browser interpretiert

19 Farben mit CSS systemspezifische Werte beziehen sich auf Betriebsystemeinstellungen (28 verfügbar), eher relevant für Webanwendungen RGB-Werte geben den jeweiligen Rot-, Grün- und Blauanteil der gewählten Farbe an color: blue; color: rgb(0, 0, 255); color: #0000ff; color: rgb(0%, 0%, 100%);

20 Farbauswahl passende Farbkombination auswählen, allgemeine künstlerische Regeln websichere Farben (web-safe colors): 216 Farben, die von allen Systemen und Browsern unterstützt werden bei farbigen Texten auf farbigem Hintergrund können Flimmer- und Wischeffekte auftreten Rot-Grün-Blindheit berücksichtigen

21 Farbe in CSS meist keine Hintergrundfarbe für <body>-element Textfarbe für gesamte Seite? besser nicht, denn: grundsätzlich: immer, wenn Vordergrundfarbe festgelegt wird, muss auch Hintergrundfarbe festgelegt werden Vererbung nicht vergessen: Einstellungen gelten dann für ALLE anderen Elemente der Seite

22 Farbe in CSS bei Hintergrundbild oder Hintergrundfarbe alle darauf angeordneten Elemente mit transparentem Hintergrund versehen.boxelement { color: white; background-color: transparent; }

23 Einsatz von Farbe farbige Textkästen zur Lenkung der Aufmerksamkeit des Lesers durch Festlegung von Hintergrund- und Textfarbe und Rahmen Marginalien zusammenhängende Bereiche durch Farbe kennzeichnen usw.

24 Schriften mit CSS nahezu unbegrenzte Skalierung möglich Definition alternativer Schrifttypen Einstellung von Strichstärke, Kursivschreibung, Kapitälchen unterstützte Schriftgattungen: serif, sans-serif, monospace, cursive, fantasy Konfiguration im Browser automatisch bei Installation

25 Texteffekte in CSS <span> - Element zur Hervorhebung innerhalb einer Zeile (inline-element) Textausrichtung mit text-align und den Werten left, center, right und justify (Blocksatz, von vielen Browsern nicht unterstützt) Zeileneinrückungen mit text-indent p { text-indent: 2em; }

26 Texteffekte in CSS Zeilenhöhe einstellen mit line-height, gibt Abstand vom obersten Punkt des höchsten Buchstabens einer Zeile bis zum obersten Punkt des höchsten Buchstabens der nächsten Zeile an relative Werte ohne Maßeinheit verwenden, außer bei Designs mit z.b. ineinander fließenden Textzeilen

27 Texteffekte in CSS Zeichenabstand einstellen mit letterspacing (Laufweite) Änderung des Wortabstandes vermeiden Textdekoration mit text-decoration und den Werten underline, overline, blink, line-through und none

28 Texteffekte in CSS schattierter Text durch zweimaliges Darstellen des selben Textes an leicht verschobener Position Pseudoklassen zur Gestaltung von Hyperlinks Reihenfolge in der Regel beachten (Kaskadierung), auch kombinierte Regeln möglich Unterstreichung von Links vermeiden mit textdecoration: none

29 Listen mit CSS Blockelement, alle bisher genannten Eigenschaften auch für Listen gültig spezielle Eigenschaften sind list-styletype, list-style-position (inside und outside) und list-style-image

30 CSS und Graphiken Positionierung auf der Seite, Verwendung als Anker oder Imagemap und Positionieren und Anordnen von Bildern neben Text Positionierung von Text auf Bildern Ausschneiden von Bildern

31 CSS und Graphiken Text um Bilder fließen lassen mit float, wie bei anderen Elemente auch Text auf einem Bild muss einen höheren Wert für den z-index bekommen, eventuell mit Hintergrundgraphik für Text zur besseren Lesbarkeit Ausschneiden <div>-bereich passender Größe erzeugen, Eigenschaft overflow: hidden; zuweisen und Bild so in <div>-bereich positionieren, dass gewünschter Bildteil gezeigt wird

32 Navigation mit CSS Navigation in Webseiten mit Menüleisten in HTML: Listen zur Navigation verwenden Beispiel vertical06 mit Dreamweaver nachbauen von l06.htm

33 Navigation mit CSS Welche mit CSS ansprechbaren Elemente enthält das Beispiel? Wie sind sie strukturiert? Listeneinträge, sind Verweise aktiver Eintrag ungeordnete Liste

34 Beispiel HTML-Quelltext <div id="navcontainer"> //gruppiert alle folgenden Elemente <ul id="navlist"> //ungeordnete Liste <li id="active"> //Listeneintrag, über dem die Maus ist <a href="#" id="current"> //aktueller Eintrag Item one</a></li> <li><a href="#">item two</a></li> <li><a href="#">item three</a></li> <li><a href="#">item four</a></li> <li><a href="#">item five</a></li> </ul> </div>

35 Gestalten mit CSS neue HTML-Seite erstellen Navigationsliste einfügen (ungeordnete Liste) Navigationsliste auswählen (anklicken) am linken Bildschirmrand im Fenster Tag gibt es CSS-Eingabehilfen dort unter id für die Liste (<ul>-tag) navlist eintragen

36 Datei im Dreamweaver

37 CSS-Quelltext vom Beispiel #navlist { padding-left: 0; margin-left: 0; border-bottom: 1px solid gray; width: 200px; }

38 CSS im Dreamweaver padding-left: 0; //Innenabstand links margin-left: 0; //Außenrand links

39 CSS im Dreamweaver width: 200px; //Breite in Pixel

40 CSS im Dreamweaver border-bottom: 1px solid gray; //unterer Rand 1 Pixel breit, durchgezogene Linie in grau

41 CSS-Quelltext vom Beispiel #navlist li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid gray; }

42 CSS im Dreamweaver Einstellungen für Listeneinträge neuer CSS-Stil #navlist li list-style: none;

43 CSS im Dreamweaver margin: 0; padding: 0.25em;

44 CSS im Dreamweaver border-top: 1px solid gray;

45 CSS-Quelltext vom Beispiel #navlist li a { textdecoration: none; }

46 Gestaltung mit CSS horizontale statt vertikaler Navigationsleiste

47 Gestaltung mit CSS Abstände einfügen

48 CSS - Validierung Tests in verschiedenen Browsern entweder Validator-Software herunterladen, URL angeben oder vollständiges HTMl- Dokument an W3C schicken Ergebnis: ist ein Report, bei Bestehen darf Seite das Logo tragen