Introduction to Technologiesisgrita/vorlesung9.pdf · Webdesign mit CSS Plan mit detaillierter...
Transcript of Introduction to Technologiesisgrita/vorlesung9.pdf · Webdesign mit CSS Plan mit detaillierter...
Introduction to Technologies Stylesheets mit CSS
Beispiele CSS
http://css.maxdesign.com.au/listamatic/http://www.csszengarden.com/tr/deutsch/http://www.albinoblacksheep.com/livedesignhttp://de.selfhtml.org/css/layouts/index.htm
Beispiele http://www.creative-edesign.com/css/css.phpenthält z.B. Fenster mit Scrollbalkenhttp://www.andreas-kalt.de/webdesign/links/cssenthält viele Beispiele und Links, oft auch in englischhttp://www.drweb.de/csspraxis/index.shtmlverschiedene Beispiele und Anleitungenhttp://www.alistapart.com/englische Seite zu Webdesign und CSShttp://www.accessify.com/tools-and-wizards/developer-tools/markup-maker/default.phpWerkzeug zur automatisierten Erstellung von HTML aus einer Liste von IDs für Seitenbereichehttp://www.andreas-kalt.de/webdesign/tutorials/runde-eckenTutorial für frei skalierbare Box mit „runden Ecken“
Webdesign mit CSSPlan mit detaillierter SpezifikationFunktionen und Eigenschaften der WebseiteTechnologien, die genutzt werden sollenStandards, Browser, Plattformen, die unterstützt werden sollen
Webdesign mit CSSWie viele Seitentypen? - Startseite, Unterseite, Verteilerseiten, Katalogseiten, Bestellseiten, Hilfeseiten, SitemapWie viele Seitenbereiche? - Kopfbereich mit Logo, linke Spalte Navigationsleiste, Bildbereich, Inhaltsspalte, Fußzeile ....
Webdesign mit CSSBox-Modell zur Platzierung von BereichenInhaltsbreite bzw. -höhe, Innenrand, Rahmenjedes HTML-Element hat eine eigene Boxpunktgenaue Positionierung von Elementen (Pixel)dehnbares Layout, dynamisch anpassbar (%)
Copyright: Jon Hicks
display - Eigenschaftentscheidet, wie Browser ein Element darstellen soll – Block, Listenelement, Textzeile o.ä.derzeit von den Browsern unterstützt: block, inline, list-item, none
Mehrspaltiges LayoutZusammenfassung von HTML-Elementen zu <div> - BereichenEingliederung in Seitenlayout durch Definition von Außenrand, Rahmen und InnenrandEigenschaft position: absolute oder relativePositionierung von Elementen relativ zum übergeordneten Element
Mehrspaltiges LayoutAbsolute Positionierung richtet sich immer am übergeordenten Element ausRelative Positionierung wird an der Stelle ausgerichtet, an der sich das Element ohne Positionierung befinden würde
Anordnung mehrerer Blöckemehrere Elemente nebeneinander: Summe ihrer Breitenwerte muss Gesamtbreite des Blocks entsprechenam besten gleiche Maßeinheit für alle BreitenangabenBsp.: Breite des body-Bereiches 400px, 1. Block 80px, 2. Block 200px, 3. Block 120pxBreite = width-Eigenschaft
float-EigenschaftWerte left, right, noneleft und right verschieben Element an die linke bzw. rechte Seite der übergeordneten BoxElement wird von Inhalten der nachfolgenden Boxen umflossenz.B. hängende Initialen
clear-EigenschaftAusschalten den float-Eigenschaftz.B. zum Trennen von Absätzen, wenn nur ein Absatz umfliessen soll, der nächste aber nichtWerte left, right, both, nonefür fast alle inline- und block-Elemente
Höhen und BreitenHöhenangaben unkritisch, da es keine Höhenbegrenzung gibtabsolute Werte sind unflexibel, Probleme bei Größenveränderung des BrowserfenstersLayout sollte dehnbar sein – ProzentangabenBeispiele: http://www.stichpunkt.de/css/bereiche.htmlhttp://de.selfhtml.org/css/layouts/mehrspaltige.htm
Überlappungen von ElementenStandardmäßig Anordnung von Elementen neben- oder übereinanderFür manche Effekte gewünscht: „stapeln“Angabe nötig, welches Element durch das andere verdeckt wirdPosition in der Stapelfolge heißt z-Index
z-Indexohne z-Index gilt Reihenfolge des HTML-CodesJe 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/positionierung.htm#z_index
Design mit CSSnach dem Layout nun Design einzelner Elemente und Detailsfarbige Gestaltung, EffekteJeder Benutzer kann in den Benutzereinstellungen seines Browsers eigene Voreinstellungen treffen, die das Stylesheetüberschreiben
Farben mit CSSZuweisung möglich für Hintergründe, Rahmen, Text und LinksFarbdefinition über Farbnamen, systemspezifische Farbwerte, RGB-Dezimalwerte, RGB-Hexadezimalwerte, RGB-Prozentwerte16 Farbnamen per Standard unterstützt, aber 140 von nahezu jedem Browser interpretiert
Farben mit CSSsystemspezifische Werte beziehen sich auf Betriebsystemeinstellungen (28 verfügbar), eher relevant für WebanwendungenRGB-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%);
Farbauswahlpassende Farbkombination auswählen, allgemeine künstlerische Regeln„websichere“ Farben (web-safe colors): 216 Farben, die von allen Systemen und Browsern unterstützt werdenbei farbigen Texten auf farbigem Hintergrund können Flimmer- und Wischeffekte auftretenRot-Grün-Blindheit berücksichtigen
Farbe in CSSmeist keine Hintergrundfarbe für <body>-ElementTextfarbe für gesamte Seite? besser nicht, denn:grundsätzlich: immer, wenn Vordergrundfarbe festgelegt wird, muss auch Hintergrundfarbe festgelegt werdenVererbung nicht vergessen: Einstellungen gelten dann für ALLE anderen Elemente der Seite
Farbe in CSSbei Hintergrundbild oder Hintergrundfarbe alle darauf angeordneten Elemente mit transparentem Hintergrund versehen
.boxelement {color: white;background-color: transparent;
}
Einsatz von Farbefarbige Textkästen zur Lenkung der Aufmerksamkeit des Lesers durch Festlegung von Hintergrund- und Textfarbe und RahmenMarginalienzusammenhängende Bereiche durch Farbe kennzeichnen usw.
Schriften mit CSSnahezu unbegrenzte Skalierung möglichDefinition alternativer SchrifttypenEinstellung von Strichstärke, Kursivschreibung, Kapitälchenunterstützte Schriftgattungen: serif, sans-serif, monospace, cursive, fantasyKonfiguration 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-indentp {
text-indent: 2em;}
Texteffekte in CSSZeilenhö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 anrelative Werte ohne Maßeinheit verwenden, außer bei Designs mit z.B. ineinander fließenden Textzeilen
Texteffekte in CSSZeichenabstand einstellen mit letter-spacing (Laufweite)Änderung des Wortabstandes vermeidenTextdekoration mit text-decorationund den Werten underline, overline, blink, line-throughund none
Texteffekte in CSSschattierter Text durch zweimaliges Darstellen des selben Textes an leicht verschobener PositionPseudoklassen zur Gestaltung von HyperlinksReihenfolge in der Regel beachten (Kaskadierung), auch kombinierte Regeln möglichUnterstreichung von Links vermeiden mit text-decoration: none
Listen mit CSSBlockelement, alle bisher genannten Eigenschaften auch für Listen gültigspezielle Eigenschaften sind list-style-type, list-style-position (insideund outside) und list-style-image
CSS und Graphiken Positionierung auf der Seite, Verwendung als Anker oder Imagemap undPositionieren und Anordnen von Bildern neben TextPositionierung von Text auf BildernAusschneiden von Bildern
CSS und GraphikenText um Bilder fließen lassen mit float, wie bei anderen Elemente auchText auf einem Bild muss einen höheren Wert für den z-Index bekommen, eventuell mit Hintergrundgraphik für Text zur besseren LesbarkeitAusschneiden <div>-Bereich passender Größe erzeugen, Eigenschaft overflow: hidden; zuweisen und Bild so in <div>-Bereichpositionieren, dass gewünschter Bildteil gezeigt wird
Navigation mit CSSNavigation in Webseiten mit Menüleistenin HTML: Listen zur Navigation verwendenBeispiel „vertical06“ mit Dreamweavernachbauen von http://css.maxdesign.com.au/listamatic/vertical06.htm
Navigation mit CSSWelche mit CSS ansprechbaren Elemente enthält das Beispiel? Wie sind sie strukturiert?
ungeordnete Liste
Listeneinträge,sind Verweise
aktiver Eintrag
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 EintragItem 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 CSSneue HTML-Seite erstellenNavigationsliste einfügen (ungeordnete Liste)Navigationsliste auswählen (anklicken)am linken Bildschirmrand im Fenster „Tag“ gibt es CSS-Eingabehilfendort 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 Dreamweaverpadding-left: 0; //Innenabstand linksmargin-left: 0; //Außenrand links
CSS im Dreamweaverwidth: 200px; //Breite in Pixel
CSS im Dreamweaverborder-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 DreamweaverEinstellungen für Listeneinträgeneuer CSS-Stil #navlist li
list-style: none;
CSS im Dreamweavermargin: 0; padding: 0.25em;
CSS im Dreamweaver
border-top: 1px solid gray;
CSS-Quelltext vom Beispiel#navlist li a { text- decoration: none; }
Gestaltung mit CSShorizontale statt vertikaler Navigationsleiste
Gestaltung mit CSSAbstände einfügen
CSS - ValidierungTests in verschiedenen Browsernhttp://jigsaw.w3.org/css-validator/entweder Validator-Software herunterladen, URL angeben oder vollständiges HTMl-Dokument an W3C schickenErgebnis: ist ein Report, bei Bestehen darf Seite das Logo tragen