Das große CSS Tutorial - Webmaster
Werbung
Aus d
er
Prax
für d
is
ie Pra
xis
2014
Das große CSS Tutorial:
Alle Einstellungen des Worldsoft CMS
Leseprobe
Das komplette Buch gibt es unter:
http://www.webmaster-ausbildung.de/3112/
Online-Shop/Worldsoft_CSS_Tutorial.html
Thomas Issler
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Inhalt
Vorwort ...................................................................................................................................... 4
Optisches Design mit Hilfe von CSS ............................................................................................ 5
Besonderheiten beim Worldsoft CSS ......................................................................................... 6
Aufbau der Website ................................................................................................................... 7
Templatesmanager (Vorlagenmanager) .................................................................................. 12
Design bearbeiten .................................................................................................................... 14
Body / Links .............................................................................................................................. 15
Aufbau des Layouts .................................................................................................................. 22
Fenster Layout .......................................................................................................................... 25
Fenster Hintergrund ................................................................................................................. 33
Fenster Schrift / Text ................................................................................................................ 36
Fenster Rand ............................................................................................................................ 36
Legend ...................................................................................................................................... 38
Fieldset ..................................................................................................................................... 38
BlockContent ............................................................................................................................ 40
Even / Odd (gerade / ungerade) .............................................................................................. 41
Outer ........................................................................................................................................ 42
Head / Foot (Kopfzeile / Fußzeile)............................................................................................ 43
Aufbau der Menübereiche ....................................................................................................... 44
Wichtige Tipps zur Navigation.................................................................................................. 49
Tabellen .................................................................................................................................... 50
Formulare ................................................................................................................................. 51
CSS-Einstellungen für Responsive Design ................................................................................ 53
Aufbau des Responsive Templates .......................................................................................... 54
Übersicht über die neuen Container ........................................................................................ 55
Responsive Vorlagen ................................................................................................................ 57
Einstellungen der Container ..................................................................................................... 58
Bilder auf Inhaltsseiten und Blöcken........................................................................................ 63
Tabellen und Formulare ........................................................................................................... 65
Grundlegendes zu Media-Queries ........................................................................................... 67
Steuerung der Navigation mit Media-Queries ......................................................................... 68
Steuerung der Container mit Media-Queries .......................................................................... 70
Stand: 03.02.2014 | © 0711-Netz
2
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Anpassung von Schriftgrößen .................................................................................................. 72
Anpassung von Blöcken............................................................................................................ 73
Weitere empfehlenswerte eBooks .......................................................................................... 77
Seminare zum Kennenlernpreis ............................................................................................... 79
Empfehlenswerte Technik-Seminare ....................................................................................... 80
Nachwort .................................................................................................................................. 82
Leseprobe
Das komplette Buch gibt es unter:
http://www.webmaster-ausbildung.de/3112/Online-Shop/
Worldsoft_CSS_Tutorial.html
Stand: 03.02.2014 | © 0711-Netz
3
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Vorwort
Liebe Leser,
vielleicht sind auch Sie in der Vergangenheit schon verzweifelt mit Even, Odd, Outer,
Head, Fieldset, BlockContent und den weiteren unzähligen Möglichkeiten, die Ihnen
die Worldsoft CSS-Einstellungen bieten.
Das große CSS Tutorial liefert Ihnen die Antworten auf alle Ihre Fragen und zeigt die
Einstellungen des Worldsoft-CMS, die man in der Praxis benötigt.
Auch das Thema Optimierung für verschiedene Browser verliert seinen Schrecken.
Ihre Websites werden immer optimal aussehen. Egal ob sie mit dem Internet Explorer,
Firefox, Google Chrome, Opera oder Safari aufgerufen werden.
Da 2013 das Jahr war, das Responsive Design - verschiedene Darstellungen für PC,
Tablet und Smartphone - salonfähig gemacht hat, haben wir auch diese Einstellungen
ausführlich ins neue CSS Tutorial 2014 aufgenommen.
Das Buch ist in zwei große Bereiche gegliedert:
Bis Seite 52 finden Sie die Einstellungen, die für das klassische Webdesign gelten. Viele
Einstellungen gelten ebenfalls beim Responsive Design. Hin und wieder finden Sie dort
auch Hinweise auf die Unterschiede der beiden Anwendungen. Bitte beachten Sie die
Hinweise unbedingt falls Sie mit Responsive Design arbeiten.
Ab Seite 53 finden Sie die Besonderheiten beim Responsive Design in kompakter Form,
inklusive dem neuen Aufbau der Seiten-Struktur.
Mein ganz besonderer Dank gilt:
Isolde Nagel, die beim Entwickeln der neuen Responsive Design Inhalte ganz
maßgeblich mitwirkte sowie
Erich Weber, der beim Erstellen der vorigen Version des Tutorials dabei war.
Viel Erfolg bei der Gestaltung Ihrer Webseiten!
Thomas Issler
Stand: 03.02.2014 | © 0711-Netz
4
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Gesamt-Container (#container)
Der Gesamt-Container definiert die Fläche in der alle anderen Container Platz finden.
Mit anderen Worten, er bildet die eigentliche Website, die innerhalb des Default body
liegt und durch die anderen Container nochmals unterteilt wird.
Die wichtigste Eintragung ist die Breite der Website. Sie können mit festen Breiten arbeiten
(Angabe in Pixel) oder auch variable Breiten (Angabe in Prozent) verwenden.
Hinweis: Beim Aufbau der Seite in Responsive Design darf keine feste Breite eingegeben
werden. Wählen Sie in diesem Fall die Einstellung maximale Breite.
Überwiegend werden Webseiten mit Breitenangaben in Pixeln erstellt, da man dann von
festen Größenverhältnissen ausgehen kann.
Empfehlenswert ist nach wie vor die Optimierung auf die Bildschirm-Auflösung 1024x768
Pixeln, indem Sie eine maximale Breite von 980 Pixeln wählen. Wir können nicht die volle
Breite von 1024 Pixel wählen, da die Scroll-Leisten des Browsers auf der rechten Seite auch
noch Platz benötigen.
Zwar geht so bei größeren Bildschirmauflösungen relativ viel Platz verloren, aber Sie
vermeiden horizontale Scroll-Leisten bei der Auflösung 1024x768 Pixeln, die nach wie vor
sehr verbreitet ist.
Hinweis: Mit der Einstellung auto beim Außenrand links und rechts können Sie die Website
auf dem Bildschirm zentrieren.
Stand: 03.02.2014 | © 0711-Netz
9
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Body / Links
Dieser Bereich ist unterteilt in Default body (Basis), Links, Überschriften und Liste.
Default Body (Basis)
Im Default body (Basis) definieren Sie das Schriftbild für Ihre Website oder für den
ausgewählten Container.
Schriftart:
Es stehen Schriftarten mit entsprechenden Alternativen zur Auswahl. Ist die gewählte
Schriftart auf dem PC des Website-Besuchers nicht vorhanden, wird sie durch die zweite
oder, falls diese ebenfalls nicht vorhanden ist, die dritte ersetzt.
Schriftstil:
Hier stellen Sie die Stärke der Schrift ein, z.B. normal oder fett.
Stand: 03.02.2014 | © 0711-Netz
15
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Schriftgröße:
Es stehen verschiedene Varianten zur Auswahl:
Größenangaben mit der Endung pt sind in Bildpunkten definiert
Größenangaben mit der Endung % sind prozentuale Größenangaben
Größenangaben mit der Endung px sind in Pixeln definiert.
Hinweis: Empfehlenswert ist die Verwendung von Pixeln oder Prozent, da die Darstellung
der Größenangabe Punkt von den Einstellungen des verwendeten Betriebssystems abhängt.
Farbe:
Hier geben Sie die Schriftfarbe ein. Farbcodes bestehen im CSS aus sechs hexadezimalen
Zeichen und beginnen mit #.
Tipp: Eine Farbwert-Tabelle mit den Standard-Farbcodes finden Sie unter folgendem Link:
www.worldsoft-downloads.info/pdf/Farbwert_Tabelle.pdf
Zusätzlich befinden sich im Web zahlreiche Online-Tools um Farben einfach zusammen zu
stellen, z.B.:
www.colorschemedesigner.com
Stand: 03.02.2014 | © 0711-Netz
16
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Fenster Layout
Höhe
Definition der Höhe eines Containers. Bei den Containern Top, Top links, Top mitte und
Top rechts sowie bei allen Bottom-Containern ist die Angabe der Höhe wichtig.
Hinweis: Bei den Containern Center links, Center mitte und Center rechts ist die Höhenangabe nicht unbedingt notwendig und funktioniert, wenn überhaupt angegeben, nur als
Mindesthöhe. Diese Container sind in der Höhe dynamisch und passen sich dem jeweiligen
Inhalt an.
Breite
Definition der Breite eines Containers. Die Container Top und Bottom benötigen keine
Breite. HTML-technisch handelt es sich hier um DIV-Container. Sie nehmen automatisch
die Gesamtbreite der Website an.
Beispiel: Ihre Website hat eine Gesamtbreite von 980 Pixel. Center links ist 220 Pixel breit,
Center rechts ist 180 Pixel breit. Center mitte nimmt sich automatisch die verbleibenden
580 Pixel, auch wenn Sie keine Breite angeben. Achten Sie darauf, dass eventuelle
Innenränder, Ränder und Außenränder von links und rechts von der angegebenen Breite
abgezogen werden müssen.
Hinweis: Falls es einmal nötig ist, die Breite von Center links, Center mitte und Center rechts
zu bestimmen, achten Sie darauf, dass alle 3 Bereiche zusammen nicht mehr als 100% bzw.
die Breite des Containers messen.
Hinweis: Bei manchen vorgefertigten Standard-Templates ist im Center mitte eine Breite
von 100% eingetragen. Bitte entfernen Sie diesen Wert, wenn er im Template hinterlegt ist,
denn er führt dazu, dass in einigen Browsern Center mitte auch wirklich 100% breit ist.
Center mitte würde in diesem Fall Center links und Center rechts überdecken.
Stand: 03.02.2014 | © 0711-Netz
25
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Übersicht über die neuen Container
#menu_table
Der Container menu_table umfasst die Container Top Left, Top Center und Top Right.
CSS-Einstellungen, die hier vorgenommen werden, werden automatisch in alle 3 Container
übernommen. Sie können jedoch in den Einstellungen der einzelnen Container wieder
überschrieben werden – so wie Sie es von den Containern Center Table, Center Left,
Center Center und Center Right kennen.
#menu_table_tablet
Dieser Container steuert die Anzeige eines zusätzlichen Navigationsmoduls für mobile
Endgeräte.
Bei entsprechender Einstellung ersetzt der Container menu_table_tablet automatisch
den Container menu_table und es wird die Navigation für mobile Endgeräte angezeigt,
sobald die in der CSS-Datei voreingestellte Mindestbreite von 480px für Smartphones
bzw. 767px für Tablets unterschritten wird.
Stand: 03.02.2014 | © 0711-Netz
55
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Einstellungen der Container
Containerbreiten
Auch beim Responsive Design gelten die grundsätzlichen Informationen aus dem ersten Teil
des Tutorials.
Bitte stellen Sie deshalb auch hier den Innen- und Außenrand grundsätzlich auf 0, sowohl
unter Layout als auch im blockContent jedes Containers.
Besonders wichtig für die Responsive Programmierung sind die Breitenangaben für die
Container.
#container
Damit sich die Website den verschiedenen Bildschirmgrößen automatisch anpassen kann
darf im Container keine feste Breite definiert sein. Verwenden Sie stattdessen die Einstellung
maximale Breite.
Diese Einstellung bewirkt, dass an allen großen Bildschirmen (z.B. Desktop-PC, Mac), deren
Auflösung mehr als - hier im Beispiel - ca. 1000 Pixel in der Breite sind, die Webseite eine
feste Breite von 950 Pixeln einnimmt. An diesen Bildschirmen verhält sich die Webseite
also wie gewohnt. Sinkt die Bildschirmauflösung unter 950px, passt sich die Webseite
automatisch an die kleineren Breiten an.
Dazu dürfen bei allen anderen Containern keine festen Pixelangaben verwendet werden
sondern die gewünschte Breite muss in % definiert werden. Diese %-Zahl bezieht sich dann
auf die Gesamtbreite, die im #container definiert wurde.
Stand: 03.02.2014 | © 0711-Netz
58
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Bilder auf Inhaltsseiten und Blöcken
Die Responsive Template Vorlage enthält bereits folgende Zusatzangaben für Bilder:
img {
border:0 none;
height:auto;
max-width:100%;
vertical-align:middle;
}
Dies bewirkt, dass Inhaltsbilder maximal die tatsächliche Breite annehmen können,
keinen Rand haben (wichtig, wenn auf Bilder Links gesetzt werden) und dass sich die Höhe
automatisch proportional skaliert.
Geben Sie deshalb beim Einbau von Bildern keine feste Höhe ein. Am besten ist es,
wenn Sie die Bilder in Ihrer maximalen richtigen Größe einbauen und die Größenangaben,
die der Text-Editor automatisch beim Einfügen eingibt, komplett löschen.
Stand: 03.02.2014 | © 0711-Netz
63
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Grundlegendes zu Media-Queries
Die bisherigen Einstellungen dienten dazu, die Webseite prinzipiell in der Breite anpassbar
zu gestalten. Für ein ansprechendes Responsive Design können Sie darüber hinaus mit dem
Worldsoft CMS weitere spezielle Einstellungen vornehmen, die nur dann zum Tragen
kommen, wenn die Webseite mit Smartphone oder Tablet aufgerufen wird.
Hierfür wurde der Reiter Responsive mit den beiden Unterbuttons Tablet und Smartphone
in den CSS-Editor integriert. Durch Aktivierung dieser Buttons werden sogenannte BreakingPoints gesetzt, die mit zusätzlichen CSS-Angaben bestückt werden. Diese CSS-Befehle
werden nur ausgeführt, wenn die Bildschirmauflösung kleiner oder gleich der Angabe im
Media-Query ist.
(Standard) Breaking-Point für Tablets im Worldsoft CMS: 767px
(Standard) Breaking-Point für Smartphones im Worldsoft CMS: 480px
Stand: 03.02.2014 | © 0711-Netz
67
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Steuerung der Navigation mit Media-Queries
Wenn auf Ihrer Website sowohl das normale Navigationsmenü als auch das Navigationsmenü für mobile Geräte angezeigt werden, ist es erforderlich das nicht benötigte Menü
für den jeweiligen Bereich auszublenden.
Ausblenden des Menüs für mobile Endgeräte auf PCs/Laptops:
Gehen Sie zum Container menu_table_tablet und wählen Layout/#menu_table_tablet.
Stellen Sie die Anzeige auf keine.
Wählen Sie anschließend den Reiter Responsive und stellen sowohl bei Smartphone als auch
bei Tablet die Anzeige jeweils auf block.
Hinweis: Ohne diese Einstellung wird das Navigationsmenü für mobile Geräte nicht
angezeigt.
Stand: 03.02.2014 | © 0711-Netz
68
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Weitere empfehlenswerte eBooks
Der Internet-Marketing-Plan: Mehr Erfolg mit Ihrer Website
Internet-Marketing ist ein komplexes Gebiet. Der Internet-Marketing-Plan liefert Ihnen
wertvolle Informationen für mehr Erfolg mit Ihrer Website in allen relevanten Bereichen.
In fünf eBooks sind die wichtigsten Schritte
zur Bewerbung einer Webseite zusammengefasst:
Die perfekte Website
Suchmaschinenoptimierung (SEO)
Google AdWords
Social Media: Facebook, Google+,
Xing, Twitter usw.
E-Mail Marketing
www.webmaster-ausbildung.de/internet-marketing-plan-2013
Erfolgreich werben mit Google AdWords
Auch wenn bei der Erstellung einer Webseite alles richtig
gemacht wurde, stößt man bei begehrten Suchbegriffen
unweigerlich an die Grenzen der Optimierung.
Die klassische Suchmaschinenoptimierung erfordert viel
Know-How und Zeit. Mit AdWords können Sie innerhalb
weniger Minuten Top-Positionen auf Seite 1 erreichen.
In diesem Praxis-Handbuch erfahren Sie, wie Google
AdWords funktioniert und worauf Sie achten müssen.
www.webmaster-ausbildung.de/adwords-2013
Stand: 03.02.2014 | © 0711-Netz
77
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Das Kunden-Schulungs-Handbuch für Worldsoft Webmaster
Zwischen der Fertigstellung und Einweisung in die Bedienung
einer Website und dem Moment, wann die erste Aktualisierung
vorgenommen werden soll, vergeht häufig viel Zeit.
Dieses Handbuch bietet eine komplette Dokumentation der
Möglichkeiten, die das Worldsoft CMS aus Kundensicht bietet.
Auf fast 70 Seiten ist Schritt für Schritt erklärt, wie man
Textänderungen vornimmt, neue Bilder einfügt oder E-MailAdressen einrichtet. Spezielles Know-How, das Ihre Kunden
dringend benötigen.
Und das Beste daran: Sie dürfen Ihr Schulungs-Handbuch für beliebig viele Worldsoft
Website-Kunden einsetzen und entscheiden selbst, ob Sie es Ihrem Kunden als tollen ZusatzService kostenlos überlassen oder ob Sie es verkaufen. Dadurch können Sie mit dem
Handbuch sogar noch Geld verdienen.
www.webmaster-ausbildung.de/beraterhandbuch-2013
Stand: 03.02.2014 | © 0711-Netz
78
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Seminare zum Kennenlernpreis
Internet-Marketing Kompakt
Nach wie vor leisten sich sehr viele Firmen einen Internet-Auftritt, der keine Kunden bringt,
dafür aber Monat für Monat Kosten produziert.
Ein erfolgreiches Internet-Geschäft erfordert weit mehr als das Erstellen einer Homepage.
Dieses Seminar behandelt innerhalb von 90 Minuten die wichtigsten Themen zur
Kundengewinnung im Internet.
Jetzt zum Kennenlernpreis von nur 6,90 Euro (zzgl. 19 % MwSt.):
www.internet-marketing-college.de/internet-marketing/
Social Media Kompakt
Früher reichte eine Website aus – heute ist die Website lediglich ein Mosaikstein im
gesamten Internet-Marketing Konzept.
Es wäre sträflich, diese Entwicklung zu ignorieren. Die bessere Devise lautet: Machen Sie mit,
bevor der Wettbewerb die lukrativsten Nischen besetzt hat. In diesem Seminar erfahren Sie,
was Sie dazu wissen müssen.
Jetzt zum Kennenlernpreis von nur 6,90 Euro (zzgl. 19 % MwSt.):
www.internet-marketing-college.de/social-media/
Stand: 03.02.2014 | © 0711-Netz
79
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Empfehlenswerte Technik-Seminare
Worldsoft CSS / Skin Schulung - Design Erstellung
Mit individuell gestalteten Designs erzielen Sie deutlich mehr Umsatz und durch
professionelle Referenzen gewinnen Sie viel leichter neue Kunden.
Wir arbeiten nicht mit fertigen Vorlagen - Sie erstellen alles selbst - inklusive der Grafiken!
www.internet-marketing-college.de/worldsoft-css/
HTML Workshop
In diesem Workshop lernen Sie, wie man das Worldsoft
CMS "tuned" und noch professionellere Websites erstellt.
Sie erhalten wertvolle Praxistipps und werden erstaunt
sein mit welch einfachen Mitteln man das Worldsoft CMS
erweitern kann.
www.internet-marketing-college.de/html-workshop/
CSS Workshop: Radien, Schatten und Fotos im Polaroid-Look
Moderne Webseiten mit abgerundeten Ecken, Schatten
und Farbverläufen sind in. Dazu noch ein paar Bilder im
Polaroid-Look für das "gewisse Etwas" - und Ihr Kunde
wird begeistert sein!
Dieser Workshop vermittelt Ihnen den eleganten Weg mit
einer externen CSS-Datei und viele weitere Tipps & Tricks.
www.internet-marketing-college.de/css-profi/
Stand: 03.02.2014 | © 0711-Netz
80
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Worldsoft Responsive Design
Sie ärgern sich immer wieder über eine
fehlerhafte Darstellung Ihrer Website
auf dem PC, Tablet oder Smartphone?
Und haben sich gefragt wie wohl die neuste
Technik geht um stets perfekte Websites
auf allen wichtigen Plattformen zu
erstellen?
Hier kommt die Lösung:
Das Responsive Design Seminar zeigt Schritt für Schritt wie Sie professionelle Websites
mit dem Worldsoft CMS erstellen. Wir starten mit einem leeren Skin (“empty”) und
erstellen ein durchgehendes Beispiel, das für verschiedene Plattformen angepasst wird.
www.internet-marketing-college.de/worldsoft-responsive-design/
Stand: 03.02.2014 | © 0711-Netz
81
Das große CSS Tutorial: Alle Einstellungen des Worldsoft CMS
Nachwort
Dieses Werk ist urheberrechtlich geschützt. Jede Verwertung außerhalb des Urhebergesetzes ist ohne Zustimmung des Autors unzulässig und strafbar.
Die Weitergabe an Dritte ist ohne Zustimmung des Autors nicht erlaubt.
Haftungsausschluss: Die Inhalte dieser Publikationen wurden sorgfältig recherchiert, aber
dennoch haften der Autor nicht für die Folgen von Irrtümern, mit denen die vorliegenden
Texte behaftet sein könnten.
Bildnachweis:
Eigene Bilder
Worldsoft AG
Ich wünsche Ihnen viel Erfolg!
Thomas Issler
Telefon: 0711 - 2591718
E-Mail: [email protected]
Internet: www.internet-marketing-college.de
Leseprobe
Das komplette Buch gibt es unter:
http://www.webmaster-ausbildung.de/3112/Online-Shop/
Worldsoft_CSS_Tutorial.html
Stand: 03.02.2014 | © 0711-Netz
82
