Slideshow mit einer HTML-Seite Teil 1

Im nächsten Beispiel möchte ich zeigen wie man mit JavaScript wunderbar das DOM einer HTML-Datei ändern kann. Dazu habe ich mich für den Nachbau von S5 entschieden. Im ersten Teil werde ich den Aufbau der HTML- und CSS-Datei erklären, um dann morgen in die JavaScript-Programmierung einzusteigen.

Fangen wir mit dem HTML an. Den Aufbau habe ich bewusst nicht sehr komplex gestaltet, um die spätere Programmierung einfach zu halten. Im Grunde besteht die Datei aus 5 Hauptkontainern:

  1. header
    Hier besteht die Möglichkeit der Präsentation eine Überschrift und eine Tagline zu geben.
  2. body
    Dieser Bereich enthält alle Slides die nacheinander angezeigt werden. Zusätzlich wird hier auch ein <noscript>-Tag eingebunden, um den Benutzern darauf hinzuweisen, dass die Präsentation nicht wie vorgesehen funktionieren kann bei deaktiviertem JavaScript.
  3. helper
    Der helper-Bereich ist für zusätzliche Informationen vorgesehen und am Anfang noch leer.
  4. navigation
    Dieser wird erst durch JavaScript erzeugt und beinhaltet die Navigationselemente.
  5. footer
    Im letzen Bereich kann Platz für weitere Angaben, wie z.B. rechtliche Hinweise, genutzt werden.

Hier nun de gesamte Quellcode mit gekürzten Texten:

  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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>RE-Design - JavaScript - Slideshow Präsentation</title>
  6. <link rel="stylesheet" href="ssp.css" type="text/css" media="screen" />
  7. <script type="text/javascript" src="ssp.js"></script>
  8. <script type="text/javascript">
  9. /*<!CDATA[*/
  10. window.onload = function()
  11. {
  12. slideshow.init();
  13. }
  14. /*]]>*/
  15. </script>
  16. </head>
  17. <body>
  18. <div id="header">
  19. <h1>Powerpoint Präsentation</h1>
  20. <h2>Eine Slideshow mit JavaScript</h2>
  21. </div>
  22. <div id="body">
  23. <noscript>
  24. <p>Sie brauchen unbedingt JavaScript, um die ganze Funktionalität benutzen zu können.</p>
  25. </noscript>
  26. <div class="slide">
  27. <h3>Slide 1</h3>
  28. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.</p>
  29. <p>Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
  30. </div>
  31. <div class="slide">
  32. <h3>Slide 2</h3>
  33. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.</p>
  34. <p>Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
  35. <p>Morbi consequat felis vitae enim ... Mauris aliquam dui eget purus.</p>
  36. <p>Sed ut metus sed wisi commodo viverra ... Curabitur a turpis at ligula lobortis cursus.</p>
  37. </div>
  38. <div class="slide">
  39. <h3>Slide 3</h3>
  40. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.</p>
  41. <p>Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
  42. </div>
  43. </div>
  44. <div id="helper"></div>
  45. <div id="footer">
  46. © 2007 - <a href="http://www.re-design.de">RE-Design</a>
  47. </div>
  48. </body>
  49. </html>

Als nächstes erkläre ich die wichtigsten Punkte in der CSS-Datei

  1. @charset "utf-8";
  2. /* CSS Document */
  3. body {
  4. margin:0;
  5. padding:0;
  6. font: 16px/130% normal normal Arial, Helvetica, sans-serif;
  7. background-color:#b3d1e1;
  8. }

Als erstes die Body-Formatierung. Hier wird der Abstand zum Rand auf Null gesetzt, um jeden Platz der da ist auch zu nutzen. Zusätzlich habe ich Anpassungen an der Typographie vorgenommen und die Basis-Hintergrundfarbe eingestellt.

  1. #header {
  2. position:absolute;
  3. overflow:hidden;
  4. top:0;
  5. width:100%;
  6. height:6em;
  7. background-color:#069;
  8. color:#fff;
  9. padding:0 1em;
  10. }

Der Kopfbereich wird absolut links oben platziert. Mit einer relative Höhe wird fester Platz für ihn reserviert. Weiterhin habe ich eine passende Hintergrund- und Schriftfarbe festgelegt. Um absolut positionierte Layer auch über die gesamte Breite fließen zu lassen wird die Breite auf 100% gesetzt.

  1. #body {
  2. position:absolute;
  3. overflow:auto;
  4. top:6em;
  5. bottom:4em;
  6. width:100%;
  7. }

Auch der mittlere Präsentationsbereich ist absolut positioniert. Um keine Überlappung mit die Kopfbereich zu erhalten, fängt der Layer erst dort an wo der Kopfbereich endet. Gleiche habe ich auch für den Fußbereich eingestellt.

  1. #footer {
  2. position:absolute;
  3. overflow:hidden;
  4. height:3em;
  5. bottom:0;
  6. width:100%;
  7. padding:.5em 1em;
  8. background-color:#069;
  9. }

Ähnlich wie der Kopfbereich wird auch der Fußbereich eine feste Positionierung zugewiesen. Allerdings im unteren Bereich des Browsers. Dabei musste ich darauf achten, dass die Höhe des Fußbereiches sich aus der Layerhöhe plus dem Innenabstand des Layers zusammensetzt.

  1. #helper {
  2. position:absolute;
  3. overflow:hidden;
  4. width:50%;
  5. height:2em;
  6. bottom:3em;
  7. left:25%;
  8. z-index:2;
  9. }

Zwar ist in meinem helper-Layer noch nichts drin aber platzieren kann ich ihn auf jeden Fall schon mal. Das besondere daran ist, dass ich ihn über den Fußbereich halb überlappen lassen wollte. Um dieses zu erreichen muss über die z-index-Eigenschaft der Layer vor dem nachfolgenden Fußbereich gelegt werden.

  1. .slide {
  2. margin:1em;
  3. }

Die Formatierung der einzelnen Slides habe ich nicht großartig verändert, um dem Umfang der CSS-Datei möglichst übersichtlich zu halten. Es ist aber jeder Zeit möglich, den einzelnen Slides über IDs ein individuells Design zu geben.

Und morgen im Teil 2 beschreibe ich die JavaScript-Programmierung die nötig ist um dem Ganzen Leben einzuhauchen.

Downloads

  • HTML-Datei
  • CSS-Datei
  • JavaScript-Datei
  • komplettes Set