StyleSheet
Um eine klare Trennung von eigentlichem Inhalt und der Formatierung zu erreichen, werden alle Formate über CSS definiert. Dabei kommen im Stylesheet Definitionen für normale Tags, ID und Class zu Einsatz.
/* Text = normale Tags */ /* #text = ID, darf nur einmal je Seite vorkommen*/ /* .name = Class, darf mehrfach vorkommen und ist in FP auch in der Formatleiste zu sehen */
Zusätzlich wird mit der Sonderfunktion @media print { xxxx} für den Ausdruck abweichende Formate definiert. Das Stylesheet wird mit "<link rel="stylesheet" type="text/css" href="msxfaq2005.css"> auf jeder Seite eingebunden. Das übernimmt aber der Einfachheit halber gleich die DWT-Vorlage, auf der alle Seiten aufbauen.
Due Nutzung von CSS hat aber auch noch weiteren Vorteil, dass die Formate alle im Stylesheet definiert werden und Sie als Anwender bei den moderneren Browsers sich sogar eigene alternative CSS-Vorlagen hinterlegen können. Es ist ratsam, ein erstelltes CSS-Sheet zu validieren.
http://jigsaw.w3.org/css-validator/validator?uri=http://www.msxfaq.de/msxfaq2005.css
Standard Tags
Natürlich werden auch auf der MSXFAQ einige Standardformate per CSS vorgegeben:
Tag | Format | Beschreibung |
---|---|---|
body, td, th, p, ul, ol, li,h1, h2, h3, h4, div, address, blockquote, nobr |
font-family:Verdana,Arial,Helvetica,sans-serif; |
Standard |
a:link |
background: none; color: #009 ; text-decoration: none |
normaler Link |
a:visited |
background: none; color: #009 ; text-decoration: none |
besuchter Link |
a:hover |
background: none; color: #009 ; text-decoration: underline |
Mouseover Link |
a img |
background: inherit; color: inherit; border: none |
IMG Link |
form |
margin-bottom: 0px |
Formularrand minimieren |
ID-Definitionen (Blöcke)
Folgende Definitionen sind für Blöcke (Prefix:#) definiert, die nur einmal je Seite vorkommen können.
Tag | Format | Beschreibung |
---|---|---|
#Header |
Position oben fix, auch beim Ausdruck |
Kopfbereich |
#Footer |
Position unten fix, auch beim Ausdruck |
Fußzeilen |
#Breadcrumb |
Position unter Header |
Navigationsübersicht |
#menu |
Position links fix, nicht beim Ausdruck |
Menüleiste. |
#content |
Position rechts neben Menu |
Inhalt |
#nocss |
Display:none |
Information für nicht CSS-tauglichen Browser |
Sie werden genutzt, um geschachtelte CSS-Klassen zu definieren, z.B. die Aufzählung im Menü hat ein anderes Format als eine Aufzählung im Content.
CLASS-Definitionen
Folgende Definitionen dienen der Formatierung von Absätzen. Sie sind im CSS mit "." Als Prefix definiert
Tag | Format | Beschreibung |
---|---|---|
A: |
|
Hyperlinks normal, besucht, aktiv |
.menu:LI |
LI { list-style-type: disc; list-style-image: URL('http://www.msxfaq.de/images/bullet.gif') } |
Aufzählungszeichen bei den Menüs |
.content:H1 |
|
Format der Überschrift H1 |
.content:H2 |
|
Format der Überschrift H1 |
.content:TABLE |
90%, zentriert Rahmen 1-zeilig |
Basisformat für alle Tabellen im Content |
.content:TH |
background-color : #EFEFEF; |
Überschrift von Tabellen |
.content:TH:LI |
|
Abweichende Formatierung für Aufzählungen in Tabellen |
.content:KB |
|
Kennzeichnung von Knowledgebase (Qxxxxx oder 6-stellige Nummern) |
.content:LI |
LI { list-style-type: disc; list-style-image: URL('http://www.msxfaq.de/images/bullet.gif') } |
Aufzählungszeichen im Content |
.content:PRE |
|
Codelistings |
.content:Key |
|
Keyword. Wird z.B. im Index verwendet |
.download |
grauer Block, umstrichelt, zentriert |
Kennzeichnung von Downloads |
.image |
zentriert |
Formatierung für Bilder im Text |
.blockwarn |
Roter Block, zentriert |
Warning |
.blockinfo |
Grüner Block, zentriert |
Infomail |
.zitat |
|
Zitieren von Informationen von anderen Quellen |
.liplus |
|
Listenaufzählungen mit Plus, Minus und Warnung |
Download
BlockWarn
BlockInfo
Zitat
Code
Baustelle
Zusammenfassung am Anfang jeder Seite
Unterstützung durch
Net at
Work:
Infoblock mit Hinweise auf Mehrwerte durch
Net at Work. Auch die MSXFAQ hat Grenzen und dann ist die Zeit für Dienstleistung.
Zeichenformate
Zusätzlich gibt es noch einige Formate, die für individuelle Zeichen, Worte etc. verwendet werden
Tag | Format | Beschreibung |
---|---|---|
SPAN.COL1 |
|
Rot bzw. Unterstrichen bei DRUCK |
SPAN.COL2 |
|
Grün bzw. invers bei Druck |
SPAN.COL3 |
|
Blau bzw. Kursiv bei Druck |
SPAN.COL4 |
|
Gelb bzw. fett bei Druck |
Durch das Prefix "SPAN" nutzt Frontpage diese Styles als Klassen für Spam-Tags
Damit ist es natürlich besonders einfach auch entsprechende Worte mit CSS zu formatieren.
Bild für externe Links
ich wollte schon immer externe Links entsprechend kennzeichnen. Ich habe mir dazu extra ein Stück Code gebaut, der diese Links mit einer eigenen Klasse "linkextern" versieht, damit ich per CSS einfach dann Bilder anfügen kann. Nach etwas Suchen habe ich dann auch eine passende Methode gefunden, die das sehr elegant und einfach macht.
- Externe Links kennzeichnen
mit CSS
https://frequenzfolger.de/archive/externe-links-kennzeichnen-mit-css
Ich habe zwar nicht genau diese generische Anleitung übernommen aber die CSS-Formatierung war ein guter Tipp
Es gibt noch andere Ansätze, die aber mit JavaScript arbeiten oder andere weniger elegante Wege nutzen:
- Externe Links gesondert
kennzeichnen
http://alt.pro-barrierefreiheit.de/entwickler/textformatierungen/externe-links/ - Externe Links als solche
kennzeichnen – Mit JavaScript
und CSS
http://www.holgerkoenemann.de/externe-links-als-solche-kennzeichnen-mit-javascript-und-css/
Weitere Links
- Musterseite
-
Learn CSS Layout
http://learnlayout.com
Sehr gute schrittweise Einführung in CSS. Sehr gut gemacht (Stand Mai 2013) - http://www.csszengarden.com/
- http://www.w3schools.com/css/
- http://de.selfhtml.org/css/intro.htm
- www.blooberry.com/indexdot/css/tobics/stylefaq.htm
-
Trainingsvideo zu Expressions Web mit guten Hinweisen zu CSS
http://www.microsoft.com/products/expression/en/events-training/training-videos.mspx -
Interaktiv Codieren lernen
www.codeacademy.com -
CSS Erklärungen
http://css.fractatulum.net -
CSS Kurzeinleitung
http://www.psbregenz.at/service/downloads/info/adobe/Dreamweaver_CSS.pdf
Nicht irritieren lassen, dass der Dateiname auf Dreamweaver (Wettbewerber zu Frontpage etc.) schließen lässt. Die Erläuterungen sind allgemein gültig. -
http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.5%A0
Deutsche Übersetzung von CSS2 - www.BestViewed.de
- http://validator.w3.org
- http://www.planethtml.de
- http://www.webdesign-referenz.de
- http://www.drweb.de/csspraxis/index.shtml
- http://www.drweb.de/csstechnik/index.shtml
- CSS Validator
http://jigsaw.w3.org/css-validator - Einführung in CSS
http://css.fractatulum.net/index.htm
Mit genialem Online CSS-Generator und vielen Layout Beispielen -
Sehr gut gemachte Infoseite zu CSS
http://www.css4you.de/download/index.php - Real World Style - Hilfreiche Seite mit vielen Tipps und Meinungen. Die Seite wird ständig aktualisiert. http://www.realworldstyle.com/
- Eric Meyer on CSS - Website zum Buch mit gleichnamigen Titel von
Eric Meyer. Die Informationen gehen zum Teil noch weiter als im Buch
beschrieben.
http://www.ericmeyeroncss.com
http://www.meyerweb.com/eric/css/edge/ - Blue Robot - Codesammlung für verschiedene Layouts
http://www.bluerobot.com/web/layouts - A List Apart - Lösungen und Beispiele, sowie neueste Informationen über CSS; Artikelarchiv zum Thema CSS http://www.alistapart.org
- CSS Layout Techniques - Übersicht über CSS
http://glish.com/css/ - CSS Positionierung
http://msdn.Microsoft.com/library/default.asp?URL=/workshop/author/position/positioning.asp - Sehr schönes Stylesheet mit Icons für Tipps, Warnung etc
http://tortoisesvn.sourceforge.net/docs/release/TortoiseSVN_en/ch03.html - Animierte Menüs ganz ohne JavaScript nur mit CSS
http://www.cssplay.co.uk/menus/flyoutt.html - Eine Content-Menü im Kacheldesign
http://www.5202.de/2012/06/eine-content-menu-im-kacheldesign.html - W3CALTERNATIVE STYLE SHEET
http://www.w3.org/Style/Examples/007/alternatives - Chrome braucht eine Extension
https://chrome.google.com/webstore/detail/style-chooser/daodklicmmjhcacgkjpianadkdkbkbce - CSS Intensivstation - Free HTML5 and CSS3 Templates / Open Source
Learning
http://www.intensivstation.ch/ - Webbausteine.de - Webseiten erstellen, optimieren und aufpeppen
https://webbausteine.de/_menue/index.php