19,99 €
Mehr erfahren.
- Herausgeber: Franzis Verlag
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Deutsch
- Veröffentlichungsjahr: 2012
Keine Angst vor CSS! Auch in Zeiten von Joomla! und WordPress sorgen Cascading Style Sheets für unverwechselbares Webseitendesign. Anhand von 23 Praxisbeispielen zeigt der erfahrene Webentwickler, Dozent und Trainer Clemens Gull, wie Sie CSS gezielt einsetzen und welche Designeffekte Sie damit erzielen können. Ob Überschriften, Texte, Navigationselemente oder komplette und gleichzeitig flexible Weblayouts - CSS ist der Schlüssel für effektives Webdesign. Inklusive des neuen Standards CSS 3!
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Ähnliche
Inhaltsübersicht
Vorwort
Worum geht es in diesem Buch?
Herunterladen der Beispielcodes zum Buch
Berichtigungen und Feedback
1 Do’s & Dont’s im Webdesign
1.1 Referenzieren von Dateien
1.2 Auf fremde Quellen referenzieren
2 Die Grundlage: Hypertext Markup Language (HTML)
2.1 Grundregeln
2.2 HTML-Tags im praktischen Einsatz
2.3 Arten von Tags
2.4 Attribute bei den Tags
2.5 HTML-Entitäten
2.6 HTML-Struktur
2.7 Text mit HTML strukturieren
2.8 Zitate
2.9 Logische Auszeichnungen
2.10 Bilder einbinden
2.11 Tabellen
2.12 Hyperlinks
2.13 Elemente zum Gruppieren
2.14 Besondere Tags
2.15 Webadressen für dieses Kapitel
3 Eclipse
3.1 Installation der Entwicklungsumgebung
3.2 Der Browser
3.3 Webadressen für dieses Kapitel
4 Cascading Style Sheets
4.1 CSS-Grundlagen
4.2 Selektoren
4.3 Hierarchie der CSS-Definitionen
4.4 Text und Schrift formatieren
4.5 Positionieren von Elementen
4.6 Navigation
4.7 Layout
4.8 Bilder formatieren
4.9 Besondere Formate
4.10 Formatierungen mit CSS 3
4.11 Webadressen für dieses Kapitel
5 Anhang
5.1 Fachbegriffe
5.2 Websichere Farben
5.3 Quellcodes
Stichwortverzeichnis
Vorwort
Worum geht es in diesem Buch?
Dieses Buch will die Grundlagen des Webdesigns mit CSS vermitteln. Es ist jedoch kein klassisches Lehrbuch, von denen es bereits Dutzende gibt. Es will vielmehr ein »Mitmach-Buch« sein. Es zeigt zwar fertige Lösungen auf, bei denen es sich um in der Praxis oft benötigte (Teil)Layouts handelt. Rein theoretisch können sie direkt in Ihre Webprojekte übernommen werden. Aber eigentlich sind es Startpunkte, die Ihnen ein Gefühl für HTML und CSS geben sollen. Sie erklären den theoretischen Hintergrund und zeigen den Einsatz in der Praxis. Aber trotz allem werden sie erst durch kreative Weiterverwendung zum Leben erweckt.
Eine Warnung: Wer eine Aufzählung aller CSS-Eigenschaften und der zugrunde liegenden HTML-Technik mit allen möglichen Einstellungen und Varianten erwartet, wird enttäuscht sein. Ich schreibe hier über den praktischen Einsatz von HTML und CSS. Daher verwende ich auch nicht alle Tags oder CSS-Eigenschaften, sondern beschränke mich auf häufig benutzte Tags und Befehle.
Im Web treffen wir auf viele verschiedene Betriebssysteme und Browser in unterschiedlichen Versionen. Ideal wäre es, wenn alle diese Kombinationen unser Design identisch darstellen würden. Aber leider ist dies ganz und gar nicht so. Daher müssen wir versuchen, die einzelnen Browser so zu unterstützen (mit der Art unserer Codierung), dass sie eine (fast) gleiche Darstellung der Website erzeugen. Leider würde die Unterstützung der gesamten Palette verfügbarer Browser einen nicht zu vertretenden Aufwand im Design erzeugen. Daher beschränken wir uns auf eine Auswahl derjenigen Browser, die derzeit hauptsächlich verwendet werden.
Dazu wurden Erhebungen namhafter Webanalysten[1] zu Rate gezogen. Davon ausgehend beschränken wir uns auf die Browser mit mehr als 5 % Marktanteil und halten so den Aufwand für die Codierung in einem vertretbaren Rahmen. In diesem Buch konzentrieren wir uns auf die Versionen 7 und 8 des Internet Explorers, auf die Versionen 3.0 bis 3.6 von Firefox und auf den Safari 4.0. Die Versionen 6 und älter des Internet Explorer lassen wir außen vor. Da Websites zum Teil mit sehr hohem Aufwand an diese Browservarianten angepasst werden mussten, sollten wir nicht allzu traurig darüber sein, dass der IE 6 und älter bei den Anwendern langsam ausstirbt. Sofern es gravierende Abweichungen in der Darstellung zwischen den einzelnen Browsern gibt, werde ich darauf hinweisen und einen Trick[2] zur korrekten Darstellung anbieten.
Das Kapitel 1 bietet einen ersten Überblick. Wir lernen einige Grundregeln für Webdesign kennen und schließen damit einige häufig auftretenden Fehlerquellen im technischen Bereich des Designs aus.
Das Kapitel 2 beschäftigt sich mit den HTML-Elementen. Wir lernen die wichtigsten Tags und ihre Verwendung kennen. Diese werden wir in den folgenden Kapiteln einsetzen und formatieren. Dieses Kapitel können Sie als Nachschlagewerk für die späteren Formatierungen benutzen. Da es sich bei den Beispielen in diesem Kapitel noch nicht um schwierigere Probleme handelt, benötigen wir für die Arbeit nur einen einfachen Texteditor. Eine Entwicklungsumgebung brauchen wir erst später.
In Kapitel 3 installieren wir unsere Entwicklungsumgebung. Diese werden wir hier konfigurieren und im folgenden Abschnitt intensiv benutzen. Zusätzlich werden wir für den Firefox-Browser das eine oder andere Add-On installieren, damit wir uns bei der Arbeit leichter tun.
Das Kapitel 4 behandelt den großen Komplex des Designs mit Cascading Style Sheets. Hier werden wir eine Fülle von Formatierungsmöglichkeiten kennenlernen und in einzelnen Beispielen umsetzen.
Im Anhang finden Sie weiterführende Informationen und auch den gesamten Quelltext aller im Buch vorgestellten Beispiele.
Herunterladen der Beispielcodes zum Buch
Wenn Sie die Franzis-Website unter der Adresse http://www.buch.cd besuchen und dort die letzten fünf Ziffern der ISBN dieses Buches samt Bindestrich eingeben, können Sie alle Beispielcodes und sonstigen Ressourcen zu diesem Buch herunterladen. Die verfügbaren Dateien werden nach der erfolgreichen Anmeldung angezeigt.
Berichtigungen und Feedback
Obwohl alle Beteiligten mit größter Sorgfalt vorgehen, um die Richtigkeit der Inhalte sicherzustellen, passieren mitunter Fehler. Wenn Sie einen Fehler in diesem Buch entdecken, ob im Text oder im Quellcode, bin ich für eine Mitteilung sehr dankbar. So können Sie anderen Lesern Ärger ersparen und mithelfen, die nachfolgende Version des Buches zu verbessern. Wenn Sie irgendeinen Druckfehler finden, teilen Sie ihn mir bitte per E-Mail an [email protected] mit. Aktualisierungen sowie Verbesserungen des Buches werde ich auf meinem Blog (http://www.guru-20.info) veröffentlichen.
Ich würde mich über Reaktionen und Anregungen sehr freuen. Darüber hinaus sind Lob und Kritik sehr willkommen. Sie erreichen mich unter folgender Adresse: [email protected].
Herzlichen Dank vorab!
Ihr
Clemens Gull
Beispielsweise: http://www.webmasterpro.de/portal/webanalyse-aktuell.html
[2]einen sogenannten Hack
1 Do’s & Dont’s im Webdesign
Im Webdesign gibt es einiges, was wir zwar tun könnten, aber möglichst vermeiden sollen. Wenn wir uns an diese ungeschriebenen Gesetze halten, ersparen wir uns einige Probleme bei unseren Websites. Beginnen wir mit einigen formalen Vorgaben:
Datei- und Verzeichnisnamen sollten:
keine Leerzeichen enthalten
nur aus Buchstaben (a – z und A – Z) und Ziffern bestehen
Unterstriche (_) sind erlaubt
Groß-/Kleinschreibung ist wichtig
Datei- und Verzeichnisnamen sollten »klingende« Namen verwenden.
Da wir das Betriebssystem eines Webservers nicht vorab kennen, sollten wir uns auf den kleinsten gemeinsamen Nenner bei den Namen einigen. Denn ein Unix-System speichert die Zeichen anders als ein Windows-System. So unterscheiden UNIX-Systeme bei der Groß-/Kleinschreibung und Windows-Systeme nicht. Allein dadurch können uns einige Probleme entstehen, wenn wir uns nicht an die Regeln halten.
Struktur
Dateien sollten immer logisch gruppiert werden:
Bilder in das Verzeichnis \images
Style Sheets in das Verzeichnis \css
JavaScript-Skripte in das Verzeichnis \js
Für jedes Website-Thema sollte ein Verzeichnis erstellt werden:
Beispiel-Fotos, Grafiken, Zeichnungen, Skulpturen
Die Verzeichnisstruktur sollte nicht mehr als drei Ebenen aufweisen.
In jedem Verzeichnis sollte eine Datei namens index.html stehen.
Verweise auf Dateien erfolgen immer mit einer relativen Pfadangabe (dazu gleich mehr).
Eine gute und logische Struktur erleichtert uns die Arbeit an einer Website immens. Wenn wir bei allen unseren Sites die gleichen Verzeichnisse anlegen und verwenden, fällt uns die Arbeit leichter.
Webserver sind nichts anderes als Computer, die auf eine Datenanforderung reagieren. Wenn ein Anwender eine Domäne verlangt, so ist das für den Webserver ein Verzeichnis auf seiner Festplatte. Findet der Server eine Datei mit dem Namen index.html, so schickt er diese an den anfordernden Browser. Fehlt diese Datei jedoch, zeigt der Webserver den Inhalt des Verzeichnisses als Liste an. Und gerade das wollen wir den Benutzern unserer Website nicht zeigen. Daher sollten wir in jedem Verzeichnis eine Datei namens index.html anlegen.
1.1 Referenzieren von Dateien
Webseiten bestehen ja im Grunde nur aus reinem Text, aber trotzdem sehen wir Bilder, hören Sound oder es wird ein Video abgespielt. Zusätzlich gibt es noch Hyperlinks, CSS-Dateien oder externe JavaScript-Dateien. Auf all diese Dateien oder Links müssen wir Referenzen einrichten. Über eine solche Referenz binden wir externe Medien in unsere textbasierten Webseiten ein. Referenzen entstehen zwar immer auf die gleiche Art, aber trotzdem müssen wir sie komplett verstanden haben, um sie zu beherrschen.
Wir müssen also Wege (auch Pfade genannt) in den verschiedensten Attributen (beispielsweise href="..." beim a-Tag oder URL(...) in CSS) bei HTML und CSS angeben.
1.2 Auf fremde Quellen referenzieren
Die einfachste Methode ist die absolute Adressierung auf eine fremde Quelle. Damit ist gemeint, dass der exakte Ort der Zieldatei bekannt ist und auf diese verwiesen werden kann.
Beispiel
Diese Art der Referenzierung (Adressierung) nennen wir absolut.
In der eigenen Website verweisen
Innerhalb der eigenen Website können wir natürlich auch mit absoluten Referenzen arbeiten, aber es ist nicht üblich. Besser arbeiten wir mit relativen Referenzen.
Bei dieser Art werden einfach der Domänenname und das Protokoll weggelassen. Wir navigieren also mit der Pfadangabe durch die Verzeichnisstruktur der eigenen Website. Relativ wird dies genannt, da der Speicherort der aktuellen Datei als Ausgangspunkt verwendet wird und die Referenz relativ zu diesem Punkt erfolgt. Bei diesem Beispiel gehen wir immer vom Wurzelverzeichnis (root) aus. Damit ist die Datei gemeint, die die Referenz enthält. Nehmen wir an, diese Datei hat den Namen portfolio.html und steht im Hauptverzeichnis unserer Domäne.
Beispiel: Verweis auf Startseite
Sobald wir von der Datei auf die Startseite index.html verweisen wollen, z. B. mit einem Hyperlink, müssen wir diese Schreibweise verwenden:
Beispiel: Verweis auf Bild in Unterverzeichnis
Wollen wir in der Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz so aufbauen:
Bei dem folgenden Beispiel gehen wir davon aus, dass wir uns in der Datei info.html im Unterverzeichnis /standard befinden.
Beispiel: Verweis auf Datei in höherem Verzeichnis
Sobald wir von der Datei auf die Startseite verweisen wollen, z. B. mit einem Hyperlink, müssen wir die folgende Schreibweise verwenden. Wir können mit zwei aufeinanderfolgenden Punkten eine Verzeichnisebene höher wechseln. Wir müssen so vorgehen, da wir uns ja in einem Unterverzeichnis des Hauptverzeichnisses befinden.
Beispiel: Verweis auf Bild in höherem Verzeichnis
Wollen wir in der HTML-Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz wie folgt aufbauen. Zuerst wechseln wir mit den zwei Punkten ein Verzeichnis höher (in das Hauptverzeichnis) und danach in das Verzeichnis images, das unterhalb des Hauptverzeichnisses angesiedelt ist.
Bei den folgendenen Beispielen gehen wir davon aus, dass die Datei galerie.html im Verzeichnis /photos/paris gespeichert ist.
Beispiel: Verweis auf Startseite in höherem Verzeichnis
Sobald wir von der Datei auf die Startseite verweisen wollen, z. B. mit einem Hyperlink, müssen wir diese Schreibweise verwenden. Mit einem einfachen Schrägstrich am Anfang wechseln wir immer ins Hauptverzeichnis.
Beispiel: Verweis auf Bild in entferntem Ordner
Wollen wir in der HTML-Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz wie folgt aufbauen. Zuerst wechseln wir mit den zwei Punkten ein Verzeichnis höher, ins Verzeichnis /photos. Danach geht es wieder eine Stufe höher ins Hauptverzeichnis und in der Folge ins Verzeichnis images, das unterhalb des Hauptverzeichnisses angesiedelt ist.
Beispiel: Verweis auf Indexseite in höherem Verzeichnis
Mit dieser Referenz zeigen wir die Startseite des Verzeichnisses /photos an.
AUTONUM Übung: Referenzieren
Folgende Verzeichnisstruktur ist gegeben:
Wir wollen von den verschiedenen HTML-Dateien auf CSS-Dateien oder Bilder referenzieren. Dazu benötigen wir die Pfadangabe für die passende Datei. Ermitteln Sie den relativen Pfad für die Referenz auf
die Datei main.css in der Datei index.html
die Dateien bild1.jpg und bild2.jpg in der Datei album1.html
die Datei logo.gif in der Datei subalbum1.html
die Dateien bild5.jpg und bild6.jpg in der Datei subalbum1.html
Die Lösungen für diese Übung lauten:
css/main.cssalbum1/bild1.jpg und album1/bild2.jpg../../images/logo.gif../subalbum1/bild5.jpg und ../subalbum1/bild6.jpg
2 Die Grundlage: Hypertext Markup Language (HTML)
Tags sind Marker in HTML. Sie dienen als Formatierungskommandos einer HTML-Seite. In der Folge werden wir die Grundregeln für Tags kennenlernen. Bei den folgenden Beschreibungen wird nur auf die Besonderheiten eingegangen. Die hier aufgeführten Grundregeln gelten aber immer.
2.1 Grundregeln
Allgemeine Merkmale
Alle HTML-Tags werden von spitzen Klammern
<
und
>
umschlossen.
Ein Tag besteht immer aus seinem Namen und kann im öffnenden Tag Attribute enthalten.
Tags werden in HTML immer nach dem LIFO-Prinzip (Last-In, First-Out) gesetzt.
Beispiel einer gültigen Tag-Folge:
Beispiel einer ungültigen Tag-Folge:
2.2 HTML-Tags im praktischen Einsatz
Tags werden immer in Kleinbuchstaben geschrieben.
Der öffnende Tag lautet immer gleich wie der schließende.
Der schließende Tag beginnt immer mit einem Schrägstrich.
Hat der Tag keinen schließenden Partner, wird im öffnenden Tag der Schrägstrich vor der schließenden spitzen Klammer gesetzt.
Werte für Attribute in einem Tag werden immer in Anführungszeichen gesetzt.
2.3 Arten von Tags
Inline-Elemente
Diese Tags werden vom Browser so eingesetzt, dass sie den Textfluss nicht unterbrechen, also keinen Umbruch einfügen.
Block-Elemente
Diese Tags erzeugen im Browser einen eigenen Block. Wir können uns das optisch als ein Rechteck auf der Seite vorstellen. Meistens wird unterhalb des Elements auch noch automatisch eine Leerzeile eingefügt.
Lesen Sie weiter in der vollständigen Ausgabe!
Lesen Sie weiter in der vollständigen Ausgabe!
Lesen Sie weiter in der vollständigen Ausgabe!
Lesen Sie weiter in der vollständigen Ausgabe!
Lesen Sie weiter in der vollständigen Ausgabe!
