Projekt-Website
Alexander Kohler

Das Projekt

Aufbau

Diese Website verfügt über fünf grundlegende Hauptbereiche, die bei Notwendigkeit noch weiter unterteilt und gegliedert sind:

  • Startseite
    Enthält die Begrüßung und eine Kurzübersicht über die gesamte Website
  • Lehrgang
    Informiert über Sinn und Zweck, Dauer, Lehrinhalte, Teilnehmer und Dozenten des Lehrganges. Zudem steht ein Gruppenfoto zur Verfügung, bei dem sich der Betrachter per mouseover die Namen der Teilnehmer anzeigen lassen kann.
    Dieser Bereich enthält insgesamt zwei Unterseiten.
  • Projekt
    Der mit Abstand umfangreichste Teil dieser Website stellt das Projekt Neon in allen Einzelheiten vor. Eine Übersicht über das Gesamtprojekt führt zu einzelnen Unterseiten für jede Teilgruppe. Diese durch die Projektgruppen gestalteten Inhalte informieren über die Aufgabe des jeweiligen Moduls, dessen Aufbau und die Funktion. Die Anordnung der einzelnen Seiten der Projektgruppen folgt dabei einem logischen Schema, das der Reihenfolge des Signalverarbeitung und -darstellung entspricht. Eine seitlich angebrachte Unternavigation ermöglicht sowohl eine übersichtliche Auflistung der einzelnen Unterseiten, wie auch den direkten Aufruf jeder einzelnen Seite. Da der Bereich der digitalen Auswertung aus drei Einzelgruppen besteht, ist dieser wiederum mit einer eigenen Übersichtsseite sowie drei Einzelseiten für die Gruppen ausgestattet. Die selbe Strukturierung findet auch beim Teilbereich der Projekt-Website Anwendung, da die Inhalte recht umfangreich ausfallen und deren übersichtliche Darstellung auf einer einzelnen Seite nicht möglich wäre.
  • Galerie
    Die Galerie der Website enthält Fotografien, die während des Projektablaufs aufgenommen wurden. Die benutzten Geräte waren hierbei eine Digitalkamera (Canon Digital IXUS 70), ein iPhone® 4s sowie ein iPad® der 4. Generation. Teilweise wurde das Blitzlicht der Digitalkamera eingesetzt. Alle Bilder sind internetgerecht aufbereitet, was sowohl die Anpassung von Farben und Kontrast betrifft, wie auch die Minimierung der Dateigröße durch größtmögliche Kompression und Reduzierung der Gesamtpixelanzahl. Durch Klick auf ein Bild der Galerie gelangt der Benutzer in den Bereich der Lightbox, die eine Darstellung der Bilder unter Verzicht auf ablenkende und irrelevante Seiteninhalte ermöglicht. Die Lightbox besteht aus insgesamt 32 einzelnen HTML-Seiten, da aufgrund der Vorgaben zur Erstellung der Projekt-Website weder php, noch Frames verwendet werden durften.
  • Impressum
    Das in Deutschland vorgeschriebene Impressum informiert den Besucher der Seite über den gemäß TMG (Telemediengesetz) für den Inhalt der Seiten Verantwortlichen sowie darüber, wer für die gestalterische und technische Umsetzung der Website zuständig ist.

Struktur

Mit Ausnahme der zur Galerie gehörigen Lightbox basieren alle einzelnen Seiten auf einem einzigen Layout, welches sich aus folgenden Basis-Elementen zusammensetzt:

  • Hauptnavigation
    Die Hauptnavigation, welche sich ganz am oberen Bildschirmrand befindet, bietet die Möglichkeit, jederzeit auf jede einzelne Seite zuzugreifen. Die Hauptnavigation ist dabei ständig sichtbar und scrollt nicht mit dem übrigen Inhalt der Seiten mit. Es findet auch hier - unter Verzicht auf Frames - reines HTML und CSS Verwendung, was bedingt, dass der HTML-Code der Navigation in allen Einzelseiten der Projekt-Website enthalten ist.

    HTML-Code der Hauptnavigation am Beispiel der Startseite:

<div id="page">
  <div id="topMenu">
    <ul>
      <li><a href="../index.html"><span>Start</span></a></li>
      <li class="has-sub"><a href="../projekt/projekt-uebersicht.html"><span>Lehrgang</span></a>
        <ul id="lehrgang-dropdown">
          <li><a href="../lehrgang/lehrgang-uebersicht.html"><span>Übersicht</span></a></li>
          <li><a href="../lehrgang/teilnehmer.html"><span>Teilnehmer</span></a></li>
        </ul>
      </li>
      <li class="has-sub_current"><a href="../projekt/projekt-uebersicht.html"><span>Projekt</span></a>
        <ul>
          <li><a href="../projekt/projekt-uebersicht.html"><span>Übersicht</span></a></li>
          <li><a href="../projekt/schalter-ausloeser.html"><span>Schalter und Auslöser</span></a></li>
          <li class="subhassub"><a href="../projekt/digitale-auswertung/digitale-auswertung-uebersicht.html"><span>Digitale Auswertung  »</span></a>
            <div>
              <ol>
                <li><a href="../projekt/digitale-auswertung/digitale-auswertung-uebersicht.html"><span>Übersicht</span></a></li>
                <li class="subhassubsub"><a href="../projekt/digitale-auswertung/nicht-module.html"><span>NICHT-Module</span></a></li>
                <li class="subhassubsub"><a href="../projekt/digitale-auswertung/und-module-1.html"><span>UND-Module 1</span></a></li>
                <li class="subhassubsub"><a href="../projekt/digitale-auswertung/und-module-2.html"><span>UND-Module 2</span></a></li>
              </ol>
            </div>
          </li>
          <li><a href="../projekt/schnittstellen-leiste.html"><span>Schnittstellen-Leiste</span></a></li>
          <li><a href="../projekt/element-anzeige.html"><span>Element-Anzeige</span></a></li>
          <li><a href="../projekt/diodenmatrix.html"><span>Diodenmatrix</span></a></li>
          <li><a href="../projekt/atom-modell.html"><span>Atom-Modell</span></a></li>
          <li><a href="../projekt/test-schalter-leiste.html"><span>Test-Schalter-Leiste</span></a></li>
          <li><a href="../projekt/test-led-leiste.html"><span>Test-LED-Leiste</span></a></li>
          <li class="last"><a href="../projekt/schnittstellenleitungen.html"><span>Schnittstellenleitungen</span></a></li>
          <li class="subhassub"><a href="uebersicht.html"><span>Projekt-Website  »</span></a>
            <div>
              <ol>
                <li><a href="uebersicht.html"><span>Übersicht</span></a></li>
                <li class="subhassubsub"><a href="struktur.html"><span>Struktur</span></a></li>
                <li class="subhassubsub"><a href="gestaltung.html"><span>Gestaltung</span></a></li>
                <li class="subhassubsub"><a href="spezielles.html"><span>Spezielles</span></a></li>
              </ol>
            </div>
          </li>
        </ul>
      </li>
      <li><a href="../galerie.html"><span>Galerie</span></a></li>
      <li><a href="../impressum.html"><span>Impressum</span></a></li>
    </ul>
  </div>
</div>


  • Header
    Der ebenfalls auf allen Seiten mit Ausnahme der Lightbox vorhandene Header (Seitenkopf) enthält das Logo der Website sowie den Titel der jeweils aktuell sichtbaren Einzelseite. Den Hintergrund bildet dabei ein zur Thematik passendes Platinenlayout. Auf den Seiten zum eigentlichen Projekt enthält der Header zudem die Namen der am Bau des jeweiligen Modules beteiligten Teilnehmer.

    HTML-Code des Headers am Beispiel der Startseite:

<div id="mainPicture">
  <div class="picture">
    <div id="headerTitle"><b>Start</b><br>
      Projekt des RVL-1306-7-A</div>
    <div id="headerSubtext"></div>
  </div>
</div>


  • Content-Box
    Die Content-Box bildet auf allen einzelnen Seiten das umgebende Grundgerüst, in dem wiederum die eigentlichen Seiteninhalte (Content) eingebracht sind. Eine Verschachtelung von verschiedenen Elementen ermöglich einfache Anpassungen auf einzelnen Seiten. Neben dem wechselnden Inhalt der Einzelseiten befinden sich innerhalb der Content-Box des Weiteren die Links zu den Druckansichten und pdf-Dateien, ein Link zum schnellen Scrollen nach oben, der Copyrighthinweis zum Content sowie ggf. eine Navigation zum Wechseln der Seiten vor und zurück.

    HTML-Code der Content-Box am Beispiel der Startseite:

<div class="contentBox">
  <div class="innerBox">
    <div id="breadcrump"><span class="bc_first">Startseite</span></div>
    <h1>Startseite</h1>
    <div class="contentText">
      <div id="main_content" style="margin-left: 140px;">
        <div id="fade_in">
          <div class="pdf-button-div"><a rel="nofollow" target="_blank" href="print/index.html"><span title="Druckansicht" class="sprite" id="drucker-button"></span></a><a rel="nofollow" target="_blank" href="pdf/index.pdf"><span title="pdf-Ansicht" class="sprite" id="pdf-button"></span></a></div>


Seiteninhalt



        </div>
      </div>
    </div>
    <div class="copyright">Text <a href="impressum.html#copyright">©</a> <a href="impressum.html#kohler">Alexander Kohler</a></div>
    <div id="totop"><a rel="nofollow" href="#top">Nach oben</a></div>
  </div>
</div>


  • Unternavigation auf den Projektseiten
    Zugunsten einer einfacheren und übersichtlichen Navigation speziell innerhalb der eigentlichen Seiten zum Projekt enthalten alle Projektseiten neben der Haupt-Navigation eine zusätzliche Unternavigation. Es werden dabei die Titel der Module übersichtlich und in der Reihenfolge der Signalverarbeitung links neben den Seiteninhalten angezeigt.

    HTML-Code der Unternavigation am Beispiel der Detail-Seite zum Atom-Modell:

      <div id="ddmenu" class="menuBox">
        <ul id="menu" >
          <li><a href="projekt-uebersicht.html">Übersicht</a></li>
          <li><a href="schalter-ausloeser.html">Schalter und Auslöser</a></li>
          <li><a href="digitale-auswertung/digitale-auswertung-uebersicht.html">Digitale Auswertung</a></li>
          <li><a href="schnittstellen-leiste.html">Schnittstellen-Leiste</a></li>
          <li><a href="element-anzeige.html">Element-Anzeige</a></li>
          <li><a href="diodenmatrix.html">Diodenmatrix</a></li>
          <li class="licurrent"><a href="atom-modell.html">Atom-Modell</a></li>
          <li><a href="test-schalter-leiste.html">Test-Schalter-Leiste</a></li>
          <li><a href="test-led-leiste.html">Test-LED-Leiste</a></li>
          <li><a href="schnittstellenleitungen.html">Schnittstellen-Leitungen</a></li>
          <li><a href="../website/uebersicht.html">Projekt-Website</a></li>
        </ul>
      </div>






Hinweis: Sie verwenden noch den Internet Explorer 7. Das stellt ein Sicherheitsrisiko dar! Wir empfehlen dringend einen Wechsel auf einen aktuellen Browser.