zurück blättern
weiter blättern

Einbindung der Stylesheets und HTML

Die mit dem YAML-Framework ausgelieferten Verzeichnisse css/, js/ und yaml/ müssen zunächst auf den Webserver übertragen und dann mit den entsprechenden Pfaden in das Yaml-Template eingebunden werden. Diese Einbindung geschieht über die folgenden zwei Zeilen Code:

  1. // Einzubindende YAML3.0-Stylesheets
  2. $yamlStylesheet     = 'files/css/my_layout.css';
  3. $yamlPatchesStylesheet  = 'files/css/patches/patch_my_layout.css';

In diesem Besipiel wurden die YAML-Verzeichnisse also in das /files – Vezeichnis der redaxo – Site kopiert. Die Bennennung der Stylesheet-Dateien wurde beibehalten. Sie kann natürlich nach belieben angepasst werden und muss lediglich im YAML-Template berücksichtigt werden.

Zu guter Letzt folgt der eigentliche HTML-Quelltext des YAML-Templates. Dieser kann grundsätzlich unverändert bleiben, da alle Anpassungen über den Einsatz der Stylesheets bzw. über die Platzhalter erfolgen.

  1. // Hier folgt die Quelltext-Struktur entsprechend der YAML3.0-Datei markup_draft.html
  2. ?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  5. <head>
  6.   <title><?php print $REX['SERVERNAME'].' | '.$this->getValue("name"); ?></title>
  7.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.   <!-- (en) Add your meta data here -->
  9.   <!-- Fügen Sie hier ihre Meta-Daten ein -->
  10.   <meta name="keywords" content="<?php print $metaKeywords; ?>" />
  11.     <meta name="description" content="<?php print $metaDescription; ?>" />
  12.   <link href="<?php echo $REX['HTDOCS_PATH'].$yamlStylesheet ?>" rel="stylesheet" type="text/css"/>
  13.   <!--[if lte IE 7]>
  14.     <link href="<?php echo $REX['HTDOCS_PATH'].$yamlPatchesStylesheet ?>" rel="stylesheet" type="text/css" />
  15.   <![endif]-->
  16. </head>
  17. <body>
  18.   <div class="page_margins">
  19.   <?php if($graphLayoutBorder=='on')echo "\t<div id=\"border-top\">\n\t\t\t<div id=\"edge-tl\"></div>\n\t\t\t<div id=\"edge-tr\"></div>\n\t\t</div>\n"?>
  20.     <div class="page">
  21.       <div id="header">
  22.         <div id="topnav">
  23.             <!-- Start: Skiplink-Navigation -->
  24.           <a class="skip" href="#navigation" title="Direkt zur Navigation springen">Zur Navigation springen</a><span class="hideme">.</span>
  25.           <a class="skip" href="#content" title="Direkt zum Inhalt springen">Zum Inhalt springen</a><span class="hideme">.</span>
  26.             <!-- Ende: Skiplink-Navigation -->
  27.             <?php print $headerTopNav; ?>
  28.         </div>
  29.         <?php print $headerContent; ?>
  30.       </div>
  31.  
  32.       <!-- #nav: Hauptnavigation -->
  33.       <div id="nav">
  34.         <a id="navigation" name="navigation"></a> <!-- Skiplink-Anker: Navigation -->
  35.         <?php print $headerNavigation; ?>
  36.         <?php print $headerBreadcrumb; ?>
  37.       </div>
  38.       <!-- #nav: - Ende -->
  39.  
  40.       <!-- #main: Beginn Inhaltsbereich -->
  41.  
  42.       <div id="main">
  43.         <a id="content" name="content"></a> <!-- Skiplink-Anker: Content -->
  44.  
  45.         <!-- #col1: Erste Float-Spalte des Inhaltsbereiches -->
  46.           <div id="col1">
  47.               <div id="col1_content" class="clearfix">
  48.                 <?php print $col1Breadcrumb; ?>
  49.                 <?php print $col1Navigation; ?>
  50.                 <?php print $col1Content; ?>
  51.             </div>
  52.           </div>
  53.         <!-- #col1: - Ende -->
  54.  
  55.         <!-- #col2: zweite Flaot-Spalte des Inhaltsbereiches -->
  56.           <div id="col2">
  57.               <div id="col2_content" class="clearfix">
  58.             <?php print $col2Breadcrumb; ?>
  59.                 <?php print $col2Navigation; ?>
  60.                 <?php print $col2Content; ?>
  61.               </div>
  62.           </div>
  63.  
  64.         <!-- #col2: - Ende -->
  65.  
  66.         <!-- #col3: Statische Spalte des Inhaltsbereiches -->
  67.           <div id="col3">
  68.               <div id="col3_content" class="clearfix">
  69.                 <?php print $col3Breadcrumb; ?>
  70.                 <?php print $col3Navigation; ?>
  71.                 <?php print $col3Content; ?>
  72.             </div>      <!-- IE Column Clearing -->
  73.               <div id="ie_clearing">&nbsp;</div>
  74.             <!-- Ende: IE Column Clearing -->
  75.         </div>
  76.         <!-- #col3: - Ende -->
  77.  
  78.       </div>
  79.       <!-- #main: - Ende -->
  80.  
  81.       <!-- #Footer: Beginn Fußzeile -->
  82.       <div id="footer">
  83.           <?php print $footerNavigation; ?>
  84.             <?php print $footerContent; ?>
  85.       </div>
  86.       <!-- #Footer: Ende -->
  87.     </div>
  88.   <?php if($graphLayoutBorder=='on')echo "\t<div id=\"border-bottom\">\n\t\t\t<div id=\"edge-bl\"></div>\n\t\t\t<div id=\"edge-br\"></div>\n\t\t</div>\n"?>
  89.   </div>
  90. </body>
  91. </html>
  92.  
zurück blättern
weiter blättern