CMS Typo3 PHP + MySQL + XML HTML + CSS OpenOffice Iné Referencie Kontakt

Home

Definícia funkčných celkov dynamických stránok

Predpokladáme, že dizajn webu je definitívne schválený a my sme celý "žhavý" do programovania. Na začiatku je veľmi dôležité definovať všetky statické a dynamické bloky webovej stránky, aby sme sa neskôr vyhli zložitému porerábaniu a komplikáciám. Ďalej treba vybrať spôsob, ako budú jednotlivé dynamické bloky fungovať a určiť moduly, ktoré to zabezpečia. V tabuľke nižšie vidíme rozčlenenie jednotlivých blokov so stručným popisom.

Náčrt grafického členenia

Logo

obrázok s odkazom na úvodnú stránku

Hlavička

Ilustračný obrázok alebo flash animácia

Odkaz na Home

Text s odkazom

Navigácia (BREADCRUMB)

Navigačné "cesta"

Menu (MENU)
Hlavný navigačný prvok stránky s definovaným počtom zobrazených úrovní štruktúry

Obsah (CONTENT)

Texty, obrázky, zoznamy, tabuľky, odkazy a iné obsahové prvky, alebo výstup špeciálnych modulov (novinky, ankety a podobne)

Najnovšie správy (LATEST)

Zoznam posledných správ podľa dátumu vytvorenia

Copyright

Text s odkazom

Meta menu (MENU_META)

Vybrané odkazy

Legenda

svetlo sivá - statický HTML kód
modrá - dynamické bloky
biela - samotný obsah stránky (dynamický blok)

HTML šablóna

Tučným písmom sú vyznačené bloky, ktoré budú generované dynamicky. Ako ste si iste všimli ich názvy zodpovedajú blokom z predošlej tabuľky. Blok s názvom ###DOCUMENT_BODY### je v Typo3 definovaný ako subpart, v našom prípade označuje časť HTML šablóny, ktorá sa použije pri renderovaní výstupu v Typo3. Hlavička HTML bude generovaná tiež dynamicky v Typo3.

HTML šablóna bude umiestnená v adresári fileadmin/sitename/tmpl/index.html.

<!-- ?xml version="1.0" encoding="utf-8"? -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
 <title>HTML te,mplate</title>
 <meta http-equiv="Content-Language" content="sk" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<!-- ###DOCUMENT_BODY### -->
 <div id="page">
  <div id="header">
   <a id="anchorLogo" href="http://www.sitename.sk/" title="Sitename">
    <img id="headerLeft" src="fileadmin/sitename/img/logo.gif" alt="Sitename" />
   </a>
   <img id="headerImage" src="fileadmin/sitename/img/headerImage.jpg" alt="Header image" />
  </div>
  <div id="block">
   <a id="anchorHome" href="http://www.sitename.sk/" title="Sitename">Home</a>
   <div id="path">
    ###BREADCRUMB###
   </div>
  </div>
  <div id="content">
   <div id="left">
    ###MENU###
   </div>
   <div id="center">
    ###CONTENT###
   </div>
   <div id="right">
    ###LATEST###
   </div>
  </div>
  <div id="break"></div>
  <div id="footer">
   <div id="footer_copyright">
    Copyright © 2008 Sitename
   </div>
   <div id="footer_menumeta">
    ###MENU_META###
   </div>
  </div>
 </div>
<!-- ###DOCUMENT_BODY### -->
</body>
</html>

Postup vytvorenia Typoscriptu

Základná konfigurácia Typo3 (jazyk stránky, kódovanie, HTML doctype, ochrana emailových adries):

config {
  locale_all = slovak
  language = sk
  metaCharset = utf-8
  doctype = xhtml_trans
  htmlTag_langKey = sk
  inlineStyle2TempFile = 1
  removeDefaultJS = external
  spamProtectEmailAddresses = 2
  spamProtectEmailAddresses_atSubst = (at)
}

Nový objekt typu PAGE:

page = PAGE
page {
  typeNum = 0
  bodyTag = <body>
}

Príklad podrobnejšej konfigurácie objektu PAGE >>

Pripravíme HTML šablónu do pomocného objektu temp.mainTemplate a priradíme ju objektu page pod ID = 10:

temp.mainTemplate = TEMPLATE
temp.mainTemplate.template = FILE
temp.mainTemplate.template.file = fileadmin/sitename/tmpl/index.html
 
page.10 = TEMPLATE
page.10.template = FILE
page.10 < temp.mainTemplate

MENU: Jedno-úrovňové textové menu formátované vo výstupnom HTML ako nečíslovaný zoznam:

temp.menu = HMENU
temp.menu {
  entryLevel = 0
}
temp.menu.1 = TMENU
temp.menu.1 {
  wrap = <ul>|</ul>
  NO {
    allWrap = <li>|</li>
  }
  CUR = 1
  CUR {
    allWrap = <li>|</li>
    ATagParams = class="menuAct"
  }
  ACT = 1
  ACT < .CUR
}

Príklad nastavenia viac úrovňového menu >>

BREADCRUMB: Menu - navigačná lišta (do úrovne 5) - formátované ako zoznam odkazov oddelených zobáčikom ( > ):

temp.menuPath = HMENU
temp.menuPath {
  special = rootline
  special.range = 1|5
}
temp.menuPath.1 = TMENU
temp.menuPath.1 {
  target = _top
  NO {
    linkWrap = | >  |*||*|  |
  }
  CUR = 1
  CUR {
    linkWrap = | >  |*||*|  |
    noLink = 1
    doNotLinkIt = 1
  }
}

MENU_META: Textové meta menu dole je objekt HMENU typu directory. Hodnota special.value = 11 určuje, z ktorej stránky sa majú načítať položky meta menu. Jednotlivé položky menu sú oddelené zvislou čiarou (HTML znak |).

temp.menuMeta = HMENU
temp.menuMeta {
  special = directory
  special.value = 11
}
temp.menuMeta.1 = TMENU
temp.menuMeta.1 {
  wrap = |
  NO {
    allWrap = | &#124;  |*| | &#124;  |*| |
  }
  CUR = 1
  CUR {
    allWrap = | &#124  |*| | &#124;  |*| |
    ATagParams = class="menuBottomAct"
  }
  ACT = 1
  ACT < .CUR
}

LATEST: Zobrazuje výstup extensionu tt_news (ktorý samozrejme predtým nainštalujeme pomocou Extension manažéra) s typom výstupu nastaveným na LATEST. Výstup ukladáme do pomocného objektu lib.news:

lib.news < plugin.tt_news
lib.news {
  code >
  code = LATEST
}

Príklad nastavenia extensionu tt_news >>

Finalizácia Typoscriptu

CONTENT: Obsah je priradený pomocou predpripraveného objektu styles.content.get. Následne je z HTML šablóny vytvorený subpart DOCUMENT_BODY, do ktorého značiek (MENU, BREADCRUMB...) budú priradené jednotlivé nami vygenerované objekty:

page.10.workOnSubpart = DOCUMENT_BODY

page.10.marks {
  MENU < temp.menu
  BREADCRUMB < temp.menuPath
  MENU_META < temp.menuMeta
  LATEST < lib.news
  CONTENT < styles.content.get
}


Žiadne dokumenty ani odkazy k tejto stránke.

Generátor typoscriptu

Vytvára typoscript pre bežné použitie. Generátor je jednoduchý na obsluhu, stačí vyplniť zopár položiek formulára.

rtgx