Introduction to Technologies Stylesheets mit CSS
Beispiele CSS http://css.maxdesign.com.au/listamatic/ http://www.csszengarden.com/tr/deutsch/ http://www.albinoblacksheep.com/livedesign http://de.selfhtml.org/css/layouts/index.htm
Beispiele http://www.creative-edesign.com/css/css.php enthält z.b. Fenster mit Scrollbalken http://www.andreas-kalt.de/webdesign/links/css enthält viele Beispiele und Links, oft auch in englisch http://www.drweb.de/csspraxis/index.shtml verschiedene Beispiele und Anleitungen http://www.alistapart.com/ englische Seite zu Webdesign und CSS http://www.accessify.com/tools-and-wizards/developertools/markup-maker/default.php Werkzeug zur automatisierten Erstellung von HTML aus einer Liste von IDs für Seitenbereiche http://www.andreas-kalt.de/webdesign/tutorials/runde-ecken Tutorial für frei skalierbare Box mit runden Ecken
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
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...
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 (%)
Copyright: Jon Hicks
display -Eigenschaft entscheidet, wie Browser ein Element darstellen soll Block, Listenelement, Textzeile o.ä. derzeit von den Browsern unterstützt: block, inline, list-item, none
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
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
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
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
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
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: http://www.stichpunkt.de/css/bereiche.html http://de.selfhtml.org/css/layouts/mehrspaltige.htm
Ü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
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; } http://de.selfhtml.org/css/eigenschaften/positionierun g.htm#z_index
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
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
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%);
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
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
Farbe in CSS bei Hintergrundbild oder Hintergrundfarbe alle darauf angeordneten Elemente mit transparentem Hintergrund versehen.boxelement { color: white; background-color: transparent; }
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.
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
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; }
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
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
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
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
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
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
Navigation mit CSS Navigation in Webseiten mit Menüleisten in HTML: Listen zur Navigation verwenden Beispiel vertical06 mit Dreamweaver nachbauen von http://css.maxdesign.com.au/listamatic/vertica l06.htm
Navigation mit CSS Welche mit CSS ansprechbaren Elemente enthält das Beispiel? Wie sind sie strukturiert? Listeneinträge, sind Verweise aktiver Eintrag ungeordnete Liste
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>
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
Datei im Dreamweaver
CSS-Quelltext vom Beispiel #navlist { padding-left: 0; margin-left: 0; border-bottom: 1px solid gray; width: 200px; }
CSS im Dreamweaver padding-left: 0; //Innenabstand links margin-left: 0; //Außenrand links
CSS im Dreamweaver width: 200px; //Breite in Pixel
CSS im Dreamweaver border-bottom: 1px solid gray; //unterer Rand 1 Pixel breit, durchgezogene Linie in grau
CSS-Quelltext vom Beispiel #navlist li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid gray; }
CSS im Dreamweaver Einstellungen für Listeneinträge neuer CSS-Stil #navlist li list-style: none;
CSS im Dreamweaver margin: 0; padding: 0.25em;
CSS im Dreamweaver border-top: 1px solid gray;
CSS-Quelltext vom Beispiel #navlist li a { textdecoration: none; }
Gestaltung mit CSS horizontale statt vertikaler Navigationsleiste
Gestaltung mit CSS Abstände einfügen
CSS - Validierung Tests in verschiedenen Browsern http://jigsaw.w3.org/css-validator/ 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