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.

Valid CSS!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;
font-size: 12px;
color: #000000;

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.
Primär um alternative Formate für die Aufzählung nutzen zu können

#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
.liminus
  • Das ist ein Plus
  • Das ist ein Minus
  • und eine Warnung

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.

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:

 

Weitere Links