docWeb- und multimediabasierte Informationssysteme
download 
Report Transcription
Web- und multimediabasierte Informationssysteme
Jørn Pabst
Web- und multimediabasierte Informationssysteme 2003
Typo3 Einstieg mit einem eigenen HTML-Template
1 Installation des Paketes
2 Anlegen einer neuen Seite über den Globus (root-Element id=0)
3 Für diese Seite ein leeres neues Template anlegen
3.1 Seite Anklicken
3.2 Im MenueFrame die Webfunktion „Templates“ anwählen
3.3 Den Butten anklicken ohne etwas auszuwählen
3.4 Das PopUp positiv bestätigen
4 TypoScript einfügen
4.1 Rechts oben im Pulldown-Menue auf „Info/Modify“ umschalten
4.2 Klick auf „Click here to edit whole template record“
4.3 Füllen sie die ersten beiden Felder nach ihrem belieben aus.
4.4 Fügen die folgende Zeilen in das „Constants“-Feld ein:
#FrontendEditing
config.admPanel = 1
# Datumsformat
date_stdWrap.strftime = %e.%m.%Y
styles.content.strftime= %e.%m.%Y
# Sprache
config.language = de
config.locale_all = de
# Targets, empty for no-frames websites
PAGE_TARGET =
content.pageFrameObj =
# Style
styles.content.textStyle {
altWrap = <p>|</p>
# styles.header.gfx1.file.fontFile = fileadmin/hatten.ttf
}
styles.topmenue = background-color : #155555;
cSet {
color1 = #FFAD31
color2 = #4242FF
color3 = #C6C6C6
}
#Content
content {
wrap.header1 = <h1> | </h1>
wrap.bodytext = <p class="contenttext">|</p>
headerSpace =
space =
wrap.header1 = <h1> | </h1>
wrap.header2 = <h2> | </h2>
wrap.header3 = <h3> | </h3>
wrap.header4 = <h4> | </h4>
altWrap.bodytext =
}
# MetaTags
plugin.meta.language = de
plugin.meta.author = Jørn Pabst
4.5 Fügen die folgende Zeilen in das „Setup“-Feld ein:
# Simulation statischer Dokumente
# config.simulateStaticDocuments = 1
# URL-Parameter werden MD5 verschlüsselt
# config.simulateStaticDocuments_pEnc = md5
# config.simulateStaticDocuments_noTypeIfNoTitle = 1
# Anker vor jedem Element
tt_content.stdWrap.dataWrap = <A name="{field:uid}"></a>
# Spam-Schutz bei Email-Links
config.spamProtectEmailAddresses = 2
config.spamProtectEmailAddresses_atSubst = (at)
# Eigentliches Seiten-Element
page = PAGE
page.typeNum = 0
# Index für die Suche
page.config.index_enable = 1
page.config.index_externals = 1
# Einbinden der CSS-Datei
page.includeCSS {
file = fileadmin/format.css
}
# Hardcoded Seiten-Hintergrundfarbe für alte Browser
page.bodyTag = <body bgcolor="#FFFFFF">
tt_content.stdWrap.dataWrap = <div id="block"><A name="{field:uid}"></a> |
</div>
page.10 = TEMPLATE
page.10 {
#Einbinden der HTML-Vorlage-Datei
template = FILE
template.file = fileadmin/tmpl_page.html
# Arbeitsbereiche
workOnSubpart = DOCUMENT_BODY
subparts.CONTENT_LEFT < styles.content.getLeft
subparts.CONTENT < styles.content.get
subparts.CONTENT_RIGHT < styles.content.getRight
subparts.CONTENT_BORDER < styles.content.getBorder
subparts.HEADLINE = TEXT
subparts.HEADLINE.field = title
subparts.HEADLINE.wrap = <h1> | </h1>
marks.BREADCRUMBS = HMENU
marks.BREADCRUMBS.special = rootline
marks.BREADCRUMBS.special.range = 1|-1
marks.BREADCRUMBS.1 = TMENU
marks.BREADCRUMBS.1.wrap = <div id=“breadcrumbs“><p>Sie sind hier: |
</p></div>
marks.BREADCRUMBS.1.NO {
linkWrap = | > |*| | > |*| |
before =
}
# Grafisches Hauptmenue
subparts.MENU = HMENU
subparts.MENU.minItems = 3
subparts.MENU.maxItems = 6
subparts.MENU.begin = 2
subparts.MENU.1 = GMENU
subparts.MENU.1 {
NO {
wrap =
|
XY = [10.w]+14, 21
backColor = red || blue || yellow || brown || pink
10 = TEXT
10.fontFile = fileadmin/hatten.ttf
10.fontSize= 18
10.fontColor = #FFFFFF
10.fontStyle = bold
10.text.field = title
10.text.align = center
10.offset = 7,13
10.niceText = 1
10.shadow{
offset = 1,1
color = #BBBBBB
}
}
RO < .NO
RO = 1
RO {
backColor = red || blue || yellow || brown || pink
10.shadow.offset = 1,1
10.fontColor = #FFFFFF
10.fontStyle = bold
10.shadow.color = #BBBBBB
}
}
/*
# Grafik Menue
subparts.MENU_LEVEL1 = HMENU
subparts.MENU_LEVEL1.entryLevel = 1
subparts.META_MENU.special.value = 2
subparts.MENU_LEVEL1.1 = GMENU
subparts.MENU_LEVEL1.1.expAll = 0
subparts.MENU_LEVEL1.1.wrap = <table border="0" cellspacing="0"
cellpadding="0" width="100%">|</table>
subparts.MENU_LEVEL1.1 {
NO {
wrap =
| <br />
XY = 209, 24
backColor = green
5 = IMAGE
5.file = fileadmin/box.gif
5.offset = 0,7
10 = TEXT
10.fontFile = fileadmin/hatten.ttf
10.fontSize= 18
10.fontStyle = bold
10.fontColor = #FFFFFF
10.text.field = title
10.offset = 25,15
10.niceText = 1
10.shadow{
offset = 1,1
color = #BBBBBB
}
}
ACT < .NO
ACT = 1
ACT {
backColor = grey
10.shadow.offset = 1,1
10.shadow.color = #BBBBBB
}
RO < .NO
RO = 1
RO {
backColor = silver
10.shadow.offset = 1,1
10.fontColor = #FFFFFF
10.shadow.color = #BBBBBB
}
}
*/
/* Alternativ ein Textbasiertes Hauptmenue */
/*
# Text Hauptmenue
subparts.MENU = HMENU
subparts.MENU.minItems = 3
subparts.MENU.maxItems = 6
subparts.MENU.begin = 2
subparts.MENU.1 = TMENU
subparts.MENU.1.NO {
allWrap = |*| <td width="120" height="20" bgcolor="silver"
</td> |*|
linkWrap = |
}
# Ende des Text-Hauptmenues
*/
#Text-Untermenue als Tabellen-Konstrukt
subparts.MENU_LEVEL1 = HMENU
subparts.MENU_LEVEL1.entryLevel = 1
nowrap> |
subparts.MENU_LEVEL1.1 = TMENU
subparts.MENU_LEVEL1.1.expAll = 0
subparts.MENU_LEVEL1.1.NO {
allWrap = <tr height="1"><td height="1" bgcolor="#FFFFFF"></td></tr> <tr
height="21"><td height="21"> | </td></tr>
beforeImg =
fileadmin/box.gif
beforeImgLink = 1
beforeROImg = fileadmin/box_mo.gif
RO = 1
}
subparts.MENU_LEVEL1.1.ACT = 1
subparts.MENU_LEVEL1.1.ACT {
allWrap = <tr height="1"><td height="1" bgcolor="#FFFFFF"></td></tr>
<tr height="21"><td height="21" class="bgfarbe"> <b> |
</b></td></tr>
beforeImg =
fileadmin/box.gif
beforeImgLink = 1
beforeROImg = fileadmin/box_mo.gif
RO = 1
}
subparts.MENU_LEVEL1.1.ACTIFSUB = 1
subparts.MENU_LEVEL1.1.ACTIFSUB {
allWrap = <tr height="1"><td height="1" bgcolor="#FFFFFF"></td></tr>
<tr height="21"><td height="21" class="bgfarbe"> <b>
| </b></td></tr>
beforeImg =
fileadmin/down.gif
beforeImgLink = 1
beforeROImg = fileadmin/down.gif
RO = 1
}
subparts.MENU_LEVEL1.2 = TMENU
subparts.MENU_LEVEL1.2.expAll = 1
subparts.MENU_LEVEL1.2.NO {
allWrap = <tr height="21"><td height="21"> |
</td></tr>
beforeImg =
fileadmin/box.gif
beforeImgLink = 1
beforeROImg = fileadmin/box_mo.gif
RO = 1
}
subparts.MENU_LEVEL1.2.ACT = 1
subparts.MENU_LEVEL1.2.ACT {
allWrap = <tr height="21"><td height="21"
class="bgfarbe"> | </td></tr>
beforeImg =
fileadmin/box.gif
beforeImgLink = 1
}
subparts.META_MENU = HMENU
subparts.META_MENU.special = directory
subparts.META_MENU.special.value = 32
# PageID des MetaMenus
subparts.META_MENU.1 = TMENU
subparts.META_MENU.1.NO {
linkWrap = | ||*| | ||*| |
beforeImg = fileadmin/box.gif
beforeImgLink = 1
beforeROImg = fileadmin/box_mo.gif
RO = 1
after =
}
} // end: page
4.6 Belassen sie die 3 Häckchen für clear und rootlevel
5 Wählen sie im Bereich „Include static“
„content (default)“ und „cSet (default)“
aus.
6 Kopieren sie evtl. benötigte Files (wie die HTML-Vorlage-Datei, TrueType-Schriftarten, Grafiken) in die
jeweils angegebenen Verzeichnisse.
7 Legen sie einige weiter Seiten und Unterseiten an. (Z.B. mit dem Befehl „Functions“ aus dem Menue)
8 Rufen sie ihre Site mit der id auf (http://localhost/quickstart/index.php?id=27)
Die notwendigen Files finden sie auch unter: http://www.pabstis.de/ba/wumbi03/t3_einstieg.zip
