CSS Template tutorial 1.5 - Template Body

Afdrukken PDF
Geschreven door Remco op zondag 21 september 2008 17:55, in: Templates (1.5.x)
Inhoudsopgave
CSS Template tutorial 1.5
Wat is een Joomla Template
W3C and Tableless Design
Een simpele leeg sjabloon
Template Body
CSS voor Tabelloze layout
Modules in templates
Menu's in templates
Kolommen verbergen
Joomla! 1.5 Template maken
Geavanceerde Template functies
Samenvatting
Alle pagina's
Pagina 5 van 12
 

 

Blank Joomla 1.5 Template Body

Het maken van onze eerste template zal heel erg makkelijk zijn! Klaar?

Het enige wat we hoeven te doen is gebruik te maken van Joomla codestatements, die plaatsen de inhoud van elke module in de mainbody.

<body>
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
</body>


Op dit moment (als u deze met preview bekijkt), lijkt onze site zo heel erg inspirerend. Het resultaat is in figuur 9.3.


basis template look
Figure 9.3 Een niet gestijlde template


De template bevat de volgende redelijk logische volgorde:

  • naam van de site
  • top module
  • left modules
  • main content
  • right modules

Wat u tenminste moet weten
 

De meest elementaire template laadt gewoon de Joomla modules en mainbody. Lay-out en het ontwerp is een onderdeel van de CSS, niet van Joomla!

Het doel is om te proberen zo dicht mogelijk bij semantische opbouw uit te komen Vanuit een oogpunt van het web, betekent dit dat een pagina kan worden gelezen door iedereen [md] een browser, een bot, of een screen reader. Semantische lay-out is de hoeksteen van de toegankelijkheid.

Wat we hier hebben is echt alleen het potentieel voor semantische lay-out. Als wij door zouden gaan om willekeurige modules in willekeurige posities te zetten, dan zouden we een puinhoop krijgen. Een belangrijke overweging voor CMS-sites is dat een template slechts zo goed als de waarde van de inhoud. Dit zorgt er vaak voor dat webdesigners uitstapjes maken om hun sites te proberen te valideren

U zult merken dat wij gebruik hebben gemaakt van de eerste van een aantal opdrachten die specifiek zijn voor Joomla voor het maken van deze output:

<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />

De PHP echo codestatements genereren  gewoon een string uit de configuration.php bestand. Hier gebruiken we de naam van de site, we kunnen net zo gemakkelijk kiezen voor het volgende:

The name of this site is <?php echo $mainframe->getCfg('sitename');?><br />
The administrator email is <?php echo $mainframe->getCfg('mailfrom');?><br />
This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();;?>

Het jdoc codestatement voegt verschillende soorten XHTML uitvoer in, hetzij uit modules, hetzij uit componten.
Deze code geeft de uitvoer van een component. Wat het onderdeel zal worden is bepaald door de menu-link:

<jdoc:include type="component" />

Interessant genoeg, u zou met meerdere exemplaren van component uitvoer kunnen werken.Ik ben niet zeker waarom u dat zou willen, maar ik laat het u hierbij weten! Misschien een bug?

Deze regel geeft de uitvoer voor een module locatie:

<jdoc:include type="modules" name="right" />


De volledige syntax is eigenlijk:

<jdoc:include type="modules" name="LOCATION" style="OPTION" />

We kijken naar de verschillende opties voor de stijlen in de sectie over modules later in dit hoofdstuk.

CSSTemplateTutorialStep1

Op dit moment hebben we een zeer kale template.  Ik heb een installeerbare template die beschikbaar is uit de Compass bibliotheek: CSSTemplateTutorialStep1

Dit zal een template installeren die bestaat uit twee bestanden, de index.php en templateDetails.xml.  De verwijzingen naar andere bestanden zijn verwijderd om een kale basis uitvoer zonder CSS te krijgen. Dit is eigenlijk een nuttige diagnostische template, deze kunt u installeren en gebruiken als er zich CSS fouten voordoen bij een component of module.
 



 

Donateurs: Ghio Webdesign Studio