background-color: transparent

Transcrição

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 HTMLCodes
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, RGBDezimalwerte, 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:
color:
color:
color:
blue;
rgb(0, 0, 255);
#0000ff;
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
#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;
#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 HTMlDokument an W3C schicken
Ergebnis: ist ein Report, bei Bestehen darf
Seite das Logo tragen