Archiv für 18. Dezember 2008

Dreamweaver und CSS

18. Dezember 2008 | Autor: admin

Seit gestern gebe ich beim  KW Trainingszentrum eine offenes Seminar zum Thema Dreamweaver und CSS. Es ist schön Teilnehmer zu haben, die schon mit den Grundlagen des Programmes vertraut sind. So kann man direkt mit den bevorzugten Interessen der Teilnehmer beginnen.

Warum möchten Teilnehmer Dreamweaver in einer Schulung lernen, wo es doch so viele Bücher, Lern-DVDs und online Tutorials gibt? Ich glaube es liegt an der Bequemlichkeit. In den Schulungen kann man den Trainer direkt fragen. Wenn man ein Problem mit der Erstellung seiner Website hat, kann der Trainer direkt helfen. Bei allen anderen Medien muss man erst selber auf die Suche nach einer Lösung gehen und hoffen, dass jemand dieses spezielle Problem schon mal gelöst und veröffentlicht hat.

Veröffentlicht in Schulungen | Schlagworte: , , , | Keine Kommentare »

Tag 18 – HTML-Vorlagen

18. Dezember 2008 | Autor: admin

Heute möchte ich etwas über die verwendeten Templates schreiben. Wie schon im Artikel über die „Template“-Klasse geschrieben habe, setzt sich die Website aus verschiedenen Code-Schnipsel zusammen. Sie werden ineinander verschachtelt.

Index-Seite

In der Index-Seite steht das gesamte Grundgerüst. Neben dem allgemeinen Aufbau der HTML-Seite werden hier auch alle CSS-Dateien und JavaScript-Dateien geladen.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“de” lang=“de”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
  5. <title>##TITLEBAR##</title>
  6. <link rel=“stylesheet” href=“##BASEURL##/templates/styles/reset.css” />
  7. <link rel=“stylesheet” href=“##BASEURL##/templates/styles/layout.css” />
  8. <link rel=“stylesheet” href=“##BASEURL##/templates/styles/design.css” />
  9. <script type=“text/javascript” src=“##BASEURL##/templates/scripts/script.js”></script>
  10. <style type=“text/css”></style>
  11. </head>
  12. <body lang=“de” dir=“ltr”>
  13. <div id=“page”>
  14. <div id=“branding”>
  15. <h1>##WEBSITETITLE##</h1>
  16. <h2>##TAGLINE##</h2>
  17. </div>
  18. <div id=“main”>
  19. <div id=“content”>
  20. ##CONTENT##
  21. </div>
  22. <div id=“sidebar”>
  23. ##SIDEBAR##
  24. </div>
  25. </div>
  26. <div id=“copyright”>
  27. <p>&copy; 2008 &ndash; <a href=“http://www.re-design.de”>RE-Design</a></p>
  28. <ul class=“valid”>
  29. <li><a href=“http://validator.w3.org/check?uri=referer”><img src=“http://www.w3.org/Icons/valid-xhtml10″ alt=“Valid XHTML 1.0 Transitional” height=“31″ width=“88″ /></a></li>
  30. <li><a href=“http://jigsaw.w3.org/css-validator/”><img style=“border:0;width:88px;height:31px” src=“http://jigsaw.w3.org/css-validator/images/vcss” alt=“CSS ist valide!” /></a></li>
  31. </ul>
  32. </div>
  33. </div>
  34. </body>
  35. </html>

In dieser Datei gibt es eigentlich nur zwei Schlüsselworte die durch neue Schnipsel ersetzt werden: ##CONTENT## und ##SIDEBAR##. Die restlichen Schlüsselworte werden direkt in der „Application“-Klasse mit Inhalt gefüllt.

Content-Bereich

Da der Content-Bereich sehr viele verschiedene Aufgaben erfüllen muss, gibt es auch sehr viele verschiedene Code-Schnipsel die an diesem Platz eingesetzt werden:

  • page.tpl.html
  • page.form.tpl.html
  • menu.form.tpl.html
  • box.form.tpl.html

Der wohl wichtigste Bereich in diesem System ist die „page.tpl.html“-Datei, weswegen ich sie hier auch näher mal beschreibe.

Page-Bereich

Der „Page“-Vorlage wird von der „Page“-Klasse benutzt und mit Inhalt gefüllt. Aber zusätzlich wird in der „Page“-Klasse auch die Inhalte für die einzelnen Boxen gesammelt. Deshalb wird das „##BOXES##“-Schlüsselwort nicht direkt von der „Page“-Klasse gefüllt.

  1. <div class=“page” id=“page_##ID##”>

  2. <h2>##TITLE## ##ADMIN##</h2>
  3. <ul class=“meta”>
  4. <li>##AUTHOR##</li>
  5. <li>##MODIFIED##</li>
  6. </ul>
  7. <div class=“teaser”>
  8. ##TEASER##
  9. </div>
  10. <div class=“boxes”>
  11. ##BOXES##
  12. </div>
  13. </div>

Box-Bereich

Wie gerade beschrieben, füllt die „Box“-Klasse die „Box“-Vorlage und gibt sie dann an die „Page“-Klasse weiter, die diese dann an den richtigen Platz innerhalb der „Page“-Vorlage einsetzt.

  1. <div class=“teaserbox” id=“box_##ID##”>
  2. <h3>##TITLE## ##ADMIN##</h3>
  3. <ul class=“meta”>
  4. <li>##MODIFIED##</li>
  5. </ul>
  6. <div class=“teaser”>##TEASER##</div>
  7. <div class=“body”>##BODY##</div>
  8. </div>

Sidebar-Bereich

Auch die „Sidebar“-Vorlage wird von eine Klasse benutzt. Allerdings gibt es hier keine eigene Klasse sondern es ist die gleiche wie schon bei der „Index“-Vorlage. Es ist die „Application“-Klasse.

  1. <h3>Sidebar</h3>
  2. <div class=“box” id=“navigation”>
  3. ##NAVIGATION##
  4. </div>
  5. <div class=“box” id=“login”>
  6. ##LOGIN##
  7. </div>
  8. <div class=“box” id=“about_us”>
  9. <h4>Über das Projekt</h4>
  10. <p>Die ist nur ein kleines CMS-Beispiel. Ich hoffe ihr habt Spaß dieses zu benutzen. Falls ihr Fehler findet dann schreibt eine Nachricht an: <a href=“mailto:enrico@re-design.de” class=“nowrap”>enrico@re-design.de</a></p>
  11. </div>

Die „Application“-Klasse füllt dabei 2 Schlüsselworte mit Inhalt. Auf der einen Seite (##NAVIGATION##) ist es die Menüstruktur und auf der anderen Seite (##LOGIN##) der Administrationskasten. Zusätzlich ist hier auch noch ein fester Kasten eingetragen. Er kann später entweder mit mehr, bzw. anderen Inhalt gefüllt oder gelöscht werden.

Downloads

Veröffentlicht in Adventskalender 2008 | Schlagworte: , , , , | Keine Kommentare »
Archive

Contact Us | Terms of Use | Trademarks | Privacy Statement
Copyright © 2010 RE-Design - Enrico Reinsdorf. All Rights Reserved.

Powered by WordPress and WordPress Theme created with Artisteer by Enrico Reinsdorf.