Fantasy Art ~ Phantastische Kunst
Please click on 'Switch Style'.
The style of the website will change.
Bitte klicken Sie auf 'Switch Style'.
Die Gestaltung der Webseite wird sich ändern.
Haupt-Rubriken | Namen der Rubriken |
---|---|
... | |
top1 | Start |
top2 | Zeichnung |
top3 | Malerei |
top4 | IT (früher: Plastik) |
top5 | Sonstiges |
<body id="top1" class="basis bakun ulbas"> <body id="top2" class="basis bakun ulbas"> <body id="top3" class="basis bakun ulbas"> <body id="top4" class="basis bakun ulbas"> <body id="top5" class="basis bakun ulbas"> |
Hauptklassen | Erklärung |
---|---|
... | |
Basis |
schmaler Inhalt, lesefreundliche Texte, Bilder-Vorschau |
Kunst |
Bilder-Galerie, Präsentation, manchmal ohne Menü |
Ultra |
sehr sperriger Inhalt, sehr große Bilder, umfangreiche Tabellen, Texturen, Picture-Wall |
<body id="top1" class="basis bakun ulbas"> <body id="top1" class="kunst kuult bakun"> <body id="top1" class="ultra ulbas kuult"> |
Zusatzklassen | Erklärung |
---|---|
... | |
kolpi |
Sonderinhalt |
karte (graph, index) |
Sitemap |
<body id="top1" class="... ... ... kolpi"> <body id="top1" class="... ... ... karte"> |
Klasse | Bedeutung |
---|---|
... | |
a.los | Verweis |
ul.uli ol.uli |
Liste |
dl.def | Definitionsliste |
.text-cent | text-align:center |
Klasse | Bedeutung |
---|---|
.vor niemals alleine stehen lassen - immer mit entsprechendem Zusatz verwenden: a, img, span | |
.vorschau | Vorschau-Galerie |
.vorschau.hintergrund | Vorschau-Galerie mit Hintergrundgestaltung |
.vor.v1x | Bild-Größe 1x |
.vor.v2x | Bild-Größe 2x (umgesetzt in Fluidum und Zoid) |
.vor.v3x | Bild-Größe 3x (Möglichkeit in weiter Ferne) |
a.vor | Verweis |
img.vor | Vorschau-Bild |
span.vor | Hover-Effekt |
Klasse | Bedeutung |
---|---|
... | |
.data | Enthält meistens unterschiedliche Aufzählungen von Daten. Kann aber auch alle Arten von Text enthalten. |
.tit | Titel |
.dat | Datum |
.cm3 | Größe |
.med | Medium |
.aut | Autor |
.pag | Seite |
.num | Nummer |
.uhr | Uhrzeit |
.web | Web-Seite, Index, erste Seite |
.top | Haupt-Rubrik |
.rub | Unter-Rubrik, kann dupliziert werden |
Beispiel |
---|
... |
<div id="info"> |
Klasse | Bedeutung |
---|---|
Aller Inhalt muss in Module, außer den Linien (hr) | |
.modul.buch | Kommentar, Geschichte, Avatar, Autor und weitere Daten |
.modul.werk | Kunstwerk Bild, Rahmen, Signatur, Daten, Beschreibung |
.modul.zeug | Behältnis für verschiedenste Inhalte, die sich an das Raster des Layouts halten |
.modul.zeug.ganz .modul.zeug.voll |
Behältnis für verschiedenste Inhalte, die sich an das Raster des Layouts halten. Größtmöglichste Breite: 95% - 100%. |
.modul.titan | Behältnis für übergroße (titanische) Inhalte, die über den Bildschirm hinaus ragen (können). Z.B.: Stammbaum. |
Klasse | Bedeutung |
---|---|
Spezifikationen für ein Kunstwerk in body.kunst | |
.modul.werk | Hierin befindet sich das gesamte Kunstwerk mit Beschreibung |
Größe maximal | 700 x 700 px |
Größe minimal | 280 x 280 px (wegen den Rahmenteilen) |
Maße | Breite und Höhe muss durch 2 teilbar sein (ganze Zahlen). |
.imago | Inline-Markup, z.B.: style="width:700px;height:700px;" |
img.img-werk | z.B.: width="700" height="700" |
Klasse | Bedeutung |
---|---|
vertikal u. horizontal zentrierter Text | |
non | kein Inhalt, leeres Element |
zen | enthält zentriertes Objekt |
txt | um den Text anzusprechen |
uni (unicode) | Icon (z.B.: Hamburger-Menü-Icon, trigram for heaven, ≡ ≡) |
Klasse | Bedeutung |
---|---|
<hr class="dick" /> <hr class="fett" /> |
|
hr.dick | Dicke Linie |
hr.fett | Fette Linie |
hr | Dick & Fett |
Klasse | Bedeutung |
---|---|
innerhalb #welt-mi | |
zwi-ob | Zwischen-Abstand oben |
zwi-un | Zwischen-Abstand unten |
zwi-obun | oben & unten |
Klasse | Bedeutung |
---|---|
... | |
#plus | Plus-Menü, Zusatz-Menü |
#menu | Haupt-Menü |
#smap | Sitemap |
.p-m | Plus + Menu |
.s-m | Smap + Menu |
.s-p | Smap + Plus |
.pms | Plus + Menu + Smap |
Klasse | Bedeutung | ||||||||
---|---|---|---|---|---|---|---|---|---|
... | |||||||||
#e1top1 #e1top2 #e1top3 #e1top4 #e1top5 |
jede Haupt-Rubrik hat einen obersten Listenpunkt in der Ebene 1 (e1) | ||||||||
ul.eX li.eX a.eX |
Die Menü-Struktur erlaubt 5 Ebenen (eX): .e1 / .e2 / .e3 / .e4 / .e5 |
||||||||
li.anfa | Listenpunkt am Anfang | ||||||||
li.ende | Listenpunkt am Ende | ||||||||
li.tief | eine Ebene tiefer | ||||||||
li.sing | 1x Single-Punkt (.solo = mögliche Alternative) |
||||||||
|
Elemente und Variation | Abk. |
---|---|
... | |
#useable Bedienung, Usability |
.use |
Inhalt, content | .con |
Sitemap, smap, map, Karte | .sma |
Suchen, search | .arc |
Social-Communities | .cia |
#auftrag Auftragsarbeit, Auftrag |
.auf |
Malerei | .mal |
Design | .des |
Klasse | Erklärung | kompatibel mit | nicht kompatibel mit | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Klasse | Erklärung | kompatibel mit | nicht kompatibel mit | ||||||||||
.blob | Container | Ausrichtung Breite Effekte |
.oval | ||||||||||
.wobi | .wobi.wort .wobi.bild |
Effekte | Ausrichtung Breite |
||||||||||
.wobi.wort | Rahmen für Text | - | .bild | ||||||||||
.wobi.bild | Rahmen für ein Bild | - | .wort | ||||||||||
.wobi.wort.legende | Bild-Legende | .wort | .bild | ||||||||||
.wobi.wort.kapitel | Kapitel-Auswahl | .wort | .bild | ||||||||||
Ausrichtung
|
|
- | .ganz / .voll | ||||||||||
Breiten
|
|
- | |||||||||||
Effekte
|
|
- | oval und rund sind zusammen nicht kompatibel |
#id .class | Erklärung |
---|---|
... | |
h1#Kapitel-AA | Anfang der Geschichte |
h1#Kapitel-ZZ | Ende der Geschichte |
h3#Kapitel-00 | Auswahl der Kapitel |
h3#Kapitel-01 | Kapitel 1 usw. |
h3#Seite-00 | Auswahl der Seiten |
h3#Seite-01 | (noch nicht vorgesehen) |
.blob .wobi.wort.kapitel | Bereiche der Überschriften und Auswahlmöglichkeiten |
#welt-all | Zum Anfang der Seite |
#welt-un | Zum Ende der Seite |
Wenn eine Geschichte aus mehreren Seiten besteht, soll die 'ordered list' <ol> die Klasse start="30" erhalten. Damit kann der Startzähler der Kapitel-Liste auf einen bestimmten Wert (im Beispiel: 30) festgelegt werden.
Diese Funktion ist nicht 'XHTML Strict'. Der 'Doctype' der Seite sollte dann in 'XHTML Transitional' abgeändert werden.
Klasse | Erklärung |
---|---|
<table class="tab nfo"> | |
table.tab | Alle Tabellen im Inhalt bekommen diese Klasse. |
table.tab.nfo | Informelle Tabelle. |
table.tab.lux | Deluxe-Tabelle im dezenten Stil. |
table.tab.zeb | Abwechselnde Zebra-Farben in den Zeilen. |
table.tab.hov | Zeilen leuchten auf beim Drüberfahren. |
table.tab.tab2big |
Bewirkt eine Spezial-Formatierung, wenn die Tabelle für das gewählte Seiten-Design zu breit wird. Wird derzeit nicht eingesetzt. |
Klassen | Erklärung |
---|---|
<table class="tab lux"> | |
table.tab.lux | Deluxe-Tabelle im dezenten Stil. |
Klasse | Bedeutung | ||||||||
---|---|---|---|---|---|---|---|---|---|
--- | |||||||||
#sbm | Haupt-Container | ||||||||
.sbm-text | Beschreibungstext (kann ausgeblendet werden) | ||||||||
.sbm-paar | Container für Paar (2x .sbm-mensch) oder Junggeselle (1x .sbm-mensch) | ||||||||
.sbm-bild | Portrait (max. 100x100px, muss quadratisch sein) | ||||||||
.sbm-mensch (Mensch) |
|
||||||||
.sbm-mensch.sbm-mann .sbm-mensch.sbm-frau |
|
||||||||
.sbm-data-1 Daten (A) für den Einzelnen |
|
||||||||
.sbm-data-2 weitere Daten (B) zum Abschluß |
|