Layout entwerfen

http://validator.w3.org/
Seite noch beim Zusammenstellen!

Elemente

Einzeln erklärt und beschrieben unter Codefragmente.


Lesezeichen
Anmelden / Abmelden
Suchfeld
Pfad + Seite
Editieren
Revisionen
Besitzer
Berechtigungen
Einstellungen
Umbenennen
Löschen
Beobachten
Drucken


Kommentare
Dateien

Dateien


header.php
!/HeaderPhp?


footer.php
!/FooterPhp?


show.php – Dateien, Kommentare


Kommentarleiste ausblenden


<?php
  $this
->config['hide_comments'] = 1;
?>


Dateileiste ausblenden


<?php
  $this
->config['hide_files'] = 1;
?>




Aktionen einbinden:


<? print $this->format'{{hits}}' );?>


Ausblenden von Elementen für nicht angemeldete Nutzer:


<?
if ($this->get_user())

// auszublendender Teil / Elemente
}
?>

Bilder


Bilder einbinden


<input type="image" 
src="<?php echo $this->config['theme_url']; ?>icon/bild.png" alt="alternativ Text" />


Bsp. mit Link hier ...


ggf. eigner Ordner /img und dann img/bild.png

HTML


XHTML Struktur

Kontainer

<div class="header"></div>
<!-- Kommentar -->
<div class="pageBefore"></div>
<div class="page"></div>
<div class="filesheader"></div>
<div class="commentsheader"></div>
<!-- Kommentar -->
<div class="footer"></div>

CSS


CSS Struktur

Datei 'wacko.css?' des Standard-Themes 'default'

Elemente


HTML Wiki Bemerkung
<strong> ** ** fett
<em>// // kursiv
<u>__ __ unterstrichen
<small>++ ++ klein
<tt>## ## monospace
<s>-- -- durchgestrichen
<div style="text-align: center;">>> << zentriert
<span class="cite">!! !! Hinweis
<span class="cl-blue">!!(blue) !! Hinweis blau
<span class="cl-green">!!(green) !! Hinweis grün
<span class="cl-red">!!(red) !! Hinweis rot 
<span class="mark">??rot ?? hervorgehoben
<textarea class="code">%% %% eingebetteter Quelltext
<h1>== == Haupt-Überschrift
<h2>=== == Grosse Überschrift
<h3>==== == Mittelgrosse Überschrift
<h4>===== == Kleinere Überschrift
<h5>====== == Kleine Überschrift
<h6>======= == Kleinste Überschrift
<blockquote><[ ]> Zitat
<dfn title="Def">Bez</dfn>(? Bez == Def ?) Bezeichnung, Definition
<hr noshade="noshade" size="1">---- Linie

Vorlage

/***********************************************************************
* Allgemein
***********************************************************************/
 
html * {}
body   {}
 
/* Links */
a:link    {}
a:visited {}
a:hover   {}
a:active  {}
a:focus   {}
 
/* Formular */
form     {}
textarea {}
 
/* Copyright am Ende */
.copyright {}
.copyright a {}
 
/* Gruppierungen (Feldgruppe) */
.fieldset {}
 
/* Seiten-Vorschau (Editieren) */
.preview {}
.preview legend {}
 
/* Seite */
.page {}
 
/* Seitenkopf */
.pageBefore {}
 
/* Seiten-Vorschau */
.pageedit {}
 
/* Header, Footer */
.header {}
.footer {}
 
/* Span: \'Suche:\', Input */
.searchbar {}
 
/* kein Textumbruch */
.nobr {}
 
/* Wiki-Name (header.php) */
.main
 
/***********************************************************************
* Wiki-Formatierungen
***********************************************************************/
 
/* fett, kursiv, unterstrichen, klein, monospace, durchestrichen */
strong {}
em {}{}
small  {}
tt {}{}
 
/* Hinweis, blau, grün, rot, hervorgehoben, eingebetteter Code */
.cite     {}
.cl-blue  {}
.cl-green {}
.cl-red   {}
.mark     {}
.code {}
 
/* Messenger Code */
.micq1 {}
.micq2 {}
.micq3 {}
 
/* E-Mail */
.email1 {}
.email2 {}
 
/* Überschriften */
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
 
/* Definition */
dfn {}
 
/* Zitat */
blockquote {}
 
/* Inhaltsverzeichnis-Ebenen: Divs */
.toc1 {}
.toc2 {}
.toc3 {}
.toc4 {}
.toc5 {}
.toc6 {}
 
/***********************************************************************
* Dateien, Kommentare
***********************************************************************/
 
/* Überschriften: Div, Link */
 
.filesheader, .commentsheader {}
.filesheader a, .commentsheader a {}
 
/* Listen: */
 
.files, .comment { /* Div */ }
 
table.upload td { /* alle Zellen */ }
table.upload td.dt- { /* Zelle Datum */ }
table.upload td.dt- .dt2- { /* Span Datum */ }
table.upload td.remove- { /* Zelle Löschen */ }
table.upload td.remove- a.remove2- { /* Link Löschen */ }
table.upload tsize- { /* Zelle Größe */ }
table.upload tsize-size2- { /* Span Größe */ }
table.upload td.file- { /* Zelle Dateiname */ }
table.upload td.file- a { /* Link Dateiname */ }
table.upload td.desc- { /* Zelle Beschreibung */ }
 
.commentinfo { /* Div (Name, Zeit) */ }
.commentinfo a { /* Link Name */ }
 
/* Formulare: */
 
.filesform, .commentform { /* Div */ }
.filesform td, .commentform td { /* Alle Zellen */ }
.filesform input, .commentform input { /* Alle Inputs */ }
 
.commentform form textarea { /* Textarea Kommentare */ } 


Noch nicht dabei:


/* basic


*/ P, TD, LI, SELECT, TEXTAREA


label


UL, OL


.time


.print


.error


.revisioninfo


.name


.include


.outerlink


.missingpage


.logBtn


#tooltip


.buttonsspacer


/* Wiki Edit? Toolbar


*/
.toolbar tr
.toolbar .btn-, .toolbar .btn-hover, .toolbar .btn-active, .toolbar .btn-pressed
.toolbar img
.toolbar .btn-hover
.toolbar .btn-active, .toolbar .btn-pressed
.toolbar .btn-pressed
.edname-w, .edname-r, .edname-s
.edname-w
.edname-r
.edname-s


/* Wiki Formatting


*/
STRIKE, S 
STRIKE A:VISITED, S A:LINK
STRIKE A:VISITED, S A:VISITED
STRIKE IMG, S IMG
cite


.add
.del


.center
.indent


.additions
.deletions


.notes


table.usertable
table.usertable tr td
table.dtable
table.dtable tr td


.email-odd
.email-even


p.auto
.pmark
.pmark A:LINK,
.pmark A:VISITED
.pmark A:HOVER,
.pmark A:ACTIVE
.pright
.pright .p-
.pright .pbody-


.pleft
.pleft .p-
.pleft .pbody-


/* Text_Highlighter */
.hl-main
.hl-gutter
.hl-table


.hl-default
.hl-code
.hl-brackets
.hl-comment
.hl-quotes
.hl-string
.hl-identifier
.hl-reserved
.hl-inlinedoc
.hl-var
.hl-url
.hl-special
.hl-number
.hl-inlinetags
.hl-builtin
/* Text_Highlighter Box*/


div.action
div.action-content

Aufgaben

  • Codebeispiele für andere Startseite für angemeldete Benutzer / + individuelle Startseite nach Anmeldung
  • verstecken aller Interaktionselemente für nicht angemeldete Nutzer -> Wiki als Webseite / CMS 
  • http://www.tjkdesign.com/articles/liquid.asp