rtgx

CMS Typo3PHP + MySQL + XMLHTML + CSSOpenOfficeInéReferencieKontakt
Home

Vytvorenie typo3 webu - pravidlá

Šablóny HTML a CSS štýly

  • spraviť XHTML beztabuľkový layout
  • validovat minimálne pre XHTML Strict 1.0
  • CSS optimalizovať minimálne pre MS Internet Explorer 7 až 9, Firefox (SeaMonkey), Chrome, Opera

Súborový priestor

Keďže na jednej inštalácii typo3 môže byť umiestnených viacero domén alebo subdomén, máme určený tento vzor stromu súborov a názvoslovia (za názvom je zakomentovaný popis): 

fileadmin
    prvastranka		// podla domény: www.prvastranka.sk
        css		 	
            style.css	// základné štýly dizajnu
            rte.css	// štýly pre RTE htmlarea editor
        img		// obrázky dizajnu
            obrazok.jpg
            title.jpg
            ...
        inc		// pomocné, užívateľské skripty
            user.inc
        js		// javascript; knižnice, pomocné skripty
            prototype.js
        tmpl		// HTML šablóny
            index.html	// základná šablóna
            forum.html
            ...
        ts		// typoscript
            setup.txt	// základný typoscript stránky
            ...
        user_uploads	// priestor pre súbory BE usera (filemount)
            dokument.doc
            ...
    druhastranka	// dalšia doména
        css		// štruktúra sa opakuje podľa predošlej...
            style.css
            rte.css
        img
            obrazok.jpg
            title.jpg
            ...
        tmpl
            index.html
            forum.html
            ...
        user_uploads
            dokument.doc
            ...

Typoscript

  • vytvoriť a pomenovať typo šablónu podľa domény (tak ako názov rootpage: prvastranka)
  • nastaviť Include static: content (default)
  • nastaviť Include static (from extensions): CSS Styled Content (css_styled_content)
  • uložiť na rootpage domény

Typoscript Constants

# Content formating ###

content.wrap.header = |
content.wrap.header1 = <h1> | </h1>
content.wrap.header2 = <h2> | </h2>
content.wrap.header3 = <h3> | </h3>
content.wrap.header4 = <h4> | </h4>

content.headerSpace = 0|0
content.space = 0|0
content.spaceAfter = 10

pidHome =

Typoscript Setup

# Configuration, Page ######################################################

config {
  locale_all = sk_SK
  language = sk
  metaCharset = utf-8
  doctype = xhtml_trans
  htmlTag_langKey = sk
  inlineStyle2TempFile = 1
  removeDefaultJS = external
  spamProtectEmailAddresses = 10
  spamProtectEmailAddresses_atSubst = (at)
  simulateStaticDocuments = 0
  baseURL = www.prvastranka.eu
  tx_realurl_enable = 1
  no_cache = 0
}

page = PAGE
page {
  typeNum = 0
  bodyTag = <body>
}
page.includeCSS {
  rte = fileadmin/prvastranka/css/rte.css
  css = fileadmin/prvastranka/css/style.css
}
page.includeJS {
  jquery = fileadmin/prvastranka/js/jquery.js
  default = fileadmin/prvastranka/js/default.js
}

includeLibs.pagesTree = fileadmin/prvastranka/inc/user.inc

# Insert meta tag into head section ########################################

page.meta.description = BSP Magnetica, s.r.o. - výroba webových stránok...

page.headerData.1 = TEXT
page.headerData.1 {
  insertData = 1
  value =web,webové,stránky,webove,stranky,...,{field:title},{field:keywords} 
  wrap2 = <meta name="keywords" content="|" />
}

page.headerData.2 = HTML
page.headerData.2.value (

<meta name="robots" content="index,follow" />
<meta name="author" content="BSP Magnetica, s.r.o. - výroba webových stránok" />
)

# Menu Top #############################################################

temp.menu_top = HMENU
temp.menu_top {
  entryLevel = 1
  special = directory
  special.value = 457
}
temp.menu_top.1 = TMENU
temp.menu_top.1 {
  wrap = <ul class="menuTop">|</ul>
  NO {
    allWrap = <li>|</li>
    ATagTitle.field = title
  }
  CUR = 1
  CUR {
    allWrap = <li>|</li>
    ATagParams = class="menuTopAct"
    ATagTitle.field = title
  }
  ACT = 1
  ACT < .CUR
}

# Main Menu ##############################################################

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

# Menu Left ##############################################################

temp.menu_left = HMENU
temp.menu_left {
  entryLevel = 1
}
temp.menu_left.1 = TMENU
temp.menu_left.1 {
  wrap = <ul class="menuLeft">|</ul>
  NO.allWrap = <li>|</li>
  CUR = 1
  CUR {
    allWrap = <li>|</li>
    ATagParams = class="menuLeftAct"
  }
  ACT = 1
  ACT < .CUR
}

# Menu Path ###############################################################

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

# Body template ##########################################################

temp.mainTemplate = TEMPLATE
temp.mainTemplate.template = FILE
temp.mainTemplate.template.file = fileadmin/prvastranka/tmpl/index.html

page.10 = TEMPLATE
page.10.template = FILE
page.10 < temp.mainTemplate

# Layouts variations #####################################################

temp.content = TEMPLATE
temp.content.template = FILE
temp.content.template.file = fileadmin/prvastranka/tmpl/index.html

# Finalization ###########################################################

page.10.workOnSubpart = DOCUMENT_BODY

page.10.marks {
  MENU_TOP < temp.menu_top
  MENU < temp.menu
  CONTENT_BLOCK < styles.content.get
}

# Other  settings ########################################################

tt_content.text.20.parseFunc.allowTags =b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,em,
  li,ul,ol,blockquote,strike,span,h1,h2,h3,h4
tt_content.image.20.maxW = 800
tt_content.div.value = <div class="divSeparator"></div>
lib.stdheader.stdWrap.dataWrap = |

lib.parseFunc_RTE {
  nonTypoTagStdWrap.encapsLines.addAttributes.P.class =
  externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class {
    default =
    always = 0
    list =
  }
}

TS config

  • nastavenie RTE htmlarea podľa navrhnutého designu (nadpisy, tabuľky...)
  • otestovať nastavenie RTE htmlarea: vytvoriť všetky bežne popužívané obsahové prvky (text, text s obrázom, tabuľky a zoznamy v RTE...)
  • iné špecifické nastavenia napr.: výber layouts pre stránku, výber použitých obsahových stĺpcov...

TS config, všeobecné nastavenia

mod {
  SHARED.colPos_list = 0
  web_list {
    clickTitleMode = show
  }
}

TS config, nastavenie BE formulárov

# Rename and disable pages layout options #

TCEFORM.pages.layout {
  altLabels.2 = Tri stĺpce
  altLabels.3 = Dva stĺpce
}

TCEFORM.tt_content.header_layout {
  altLabels.2 = Nadpis 2
  altLabels.3 = Nadpis 3
  altLabels.4 = Nadpis 4
  removeItems = 0,1,5,6
}

Backend user

  • súborový priestor pre BE užívateľa (filemount: fileadmin/prvastranka/user_uploads/)
  • BE skupina s príslušnými prístupovými právami
  • BE užívateľ, ktorý má priradenú predtým vytvorenú BE skupinu
  • otestovať vytvoreného BE užívateľa (vytváranie/editovanie stránok a obsahu)

BE user, TS config

options.clearCache.all = 1
options.clearCache.pages = 1
 
Ž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.

Odkazy

Kontakt | Mapa stránok | Login

© Copyright 2007-2009 | Web: Robert Gonda | Design: Luka Cvrk - Solucija | Valid XHTML