introduction to rita/ آ  webdesign mit css plan mit detaillierter spezifikation funktionen

Download Introduction to rita/ آ  Webdesign mit CSS Plan mit detaillierter Spezifikation Funktionen

If you can't read please download the document

Post on 30-Jun-2020

0 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • 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

    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/developer- tools/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“

    http://www.creative-edesign.com/css/css.php http://www.andreas-kalt.de/webdesign/links/css http://www.drweb.de/csspraxis/index.shtml http://www.alistapart.com/ http://www.accessify.com/tools-and-wizards/developer-tools/markup-maker/default.php http://www.accessify.com/tools-and-wizards/developer-tools/markup-maker/default.php http://www.andreas-kalt.de/webdesign/tutorials/runde-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 - 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

    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

    http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index http://de.selfhtml.org/css/eigenschaften/positionierung.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 -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 - 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 letter- spacing (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 text- decoration: none

  • Listen mit CSS Blockelement, alle bisher genannten Eigenschaften auch für Listen gültig spezielle Eigenschaften sind list-style- type, 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 -Bereich passender Größe erzeugen, Eigenschaft overflow: hidden; zuweisen und Bild so in -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

    http://css.maxdesign.com.au/listamatic/vertical06.htm http://css.maxdesign.com.au/listamatic/vertical06.htm

  • Navigation mit CSS Welche mit CSS ansprechbaren Elemente enthält das Beispiel? Wie sind

Recommended

View more >