Dies ist die linke Navigationsleiste. Der div-Container weist die gleiche Breite auf wie der linke Rand von ebene1. Er ist absolut positioniert – sein Bezugssystem ist also das HTML-Dokument.

    #navlinks {
    position:absolute;
    width:143px;
    top:9px;
    left:9px;}

Dies ist die obere Navigationsleiste. Sie wird ein Logo, Textlinks und das Suchformular enthalten.

    #navleiste { background: darkkhaki;}

Dies ist der Block für ein Logo.

    #logoleiste { background: khaki;}

### Newsletter

Ein Link zu einem Formular, in dem ein Newsletter abonniert werden kann.

### Die Dozenten

Die Links zu den Seiten der Dozenten.

### Sitemap

Ein Textlink zur Sitemap dieser Site.

### Referenzen

Textlinks zu Seiten mit Referenzen.

### Eine_lange_Zeichenkette

# Dies ist die Hauptsektion.

Die "Tippbox".

Seminar Bildbearbeitung mit Adobe Photoshop

  Dozent: Dipl.-Inf. Ulrike Häßler

  Grundlagen der Bildbearbeitung und Bildverbesserung
  Für immer mehr Berufsgruppen zählt die digitale Bildbearbeitung mit Programmen wie Adobe Photoshop zu den Basisfertigkeiten. Dazu gehören Fotografen in Fotostudios ebenso wie Mitarbeiter von Pressestellen und Versicherungen.

Seminar Digitale Fotografie

  Dozent: Dipl.-Ing. Dietmar Wüller

  Der Umstieg vom fotografischen Film auf den Chip

  Sie versprechen eine schnellere Produktion, vereinfachen die Abläufe im Fotostudio und liefern heute bereits die gleiche Qualität wie der fotografische Film: digitale Kameras. Nicht nur im Fotostudio, sondern in zahlreichen Mess- und Prüfstellen, bei Versicherungen und in der Presse halten sie ihren Einzug und erfordern den Umgang mit dem neuen Medium.

# Hier beginnt Sektion 2

Layout + Satz

  Dozent: Dipl.-Inf. Ulrike Häßler

  Texte brechen immer wieder um und landen auf neuen Seiten. Das einzige, was das Textverarbeitungsprogramm wirklich festhält, ist der Seitenrand ... keine Anschnitte, sondern alles muss ein paar Zentimeter weit weg vom Papierrand bleiben.
  Textverarbeitungsprogramme sind dafür gemacht, Briefe zu schreiben, nicht aber für den professionellen Satz von Dokumenten, seien es nun Betriebszeitungen, Gesetzestexte oder amtliche Bekanntmachungen. An dieser Stelle setzen Satzprogramme wie Adobe PageMaker, InDesign oder QuarkXPress ein. Sie sind in der Lage, ein Bild oder einen Text millimetergenau an Ort und Stelle zu halten und dem Schriftstück den professionellen Schliff zu verleihen, der es letztendlich nicht nur professionell aussehen lässt, sondern auch lesefreundlich macht.

Webdesign mit Stylesheets

  Dozent: Dipl.-Inf. Ulrike Häßler

  Stylesheets werden heute bereits auf vielen Seiten für die Typografie eingesetzt. Sie entsorgen die Seite von all ihren <font>- und <center>-Tags und der großen Vielzahl der HTML-Attribute für die Ausrichtung der Inhalte und bringen ein schlankes und schnelles HTML-Dokument ans Tageslicht. Das Stylesheet wird zentral gespeichert und sorgt so für ein konsistentes Erscheinungsbild der Seite. Dabei ist die zentrale Lage der Stylesheetdatei der Garant für eine effiziente und einfache Änderung und Erweiterung der Site.

  An ein Layout mit Stylesheets wagen sich nur wenige Entwickler im Web. Hier beginnt eine Gratwanderung zwischen Design und Programmierung: Das Layout mit Stylesheets ist keinesfalls intuitiv.

Und so sieht der HTML-Code dieser Seite aus:

    ...
    <style>
      body {
        margin:9px 9px 0 9x;
        padding:0;}
      #ebene0 {
        background:khaki;
        width:100%;}
      #ebene1 {
        margin-left:143px;
        padding-left:9px;
        background:white;}
      #ebene2 {
        background:white3AC;
        position:relative;
        width:inherit;}
      #main {
        margin-right:143px;
        padding-right:9px;
        background:white;}
      #navleiste{
        background:khaki;}
      #logoleiste{
        background:white3AC;}
      #tippbox{
        float:right;
        width:175px;
        background:white3AC;
        position:relative;}
      #navlinks {
        position:absolute;
        width:143px;
        top:9px;
        left:9px;}
      #navrechts {
        position:absolute;
        width:143px;
        top:0;
        right:0;}
      #main h1 {
        margin:0;
        padding-left:.3em;
        font:1.25em Verdana,Helvetica,Arial;
        color:#609;
        background:khaki;}
      #main dt {
        font-weight:bold;
        font-size:120%;
        margin-top:.8em}
      #navrechts h3 {
        margin:0;
        padding:3px;
        background:khaki;
        font-weight:bold;
        font-size:1em;
        text-align:center;}
    </style>
    ...
    <body>
      <div id="navlinks">
        The WebReference logo goes ...
      </div>
      <div id="ebene0">
        <div id="ebene1">
          <div id="navleiste">
            This is the top navigation bar.
            <div id="logoleiste">
              This is the advertisement bar.
            </div>
          </div>
          <div id="ebene2">
          <div id="navrechts">
            <h3>Newsletters</h3>
            Here goes a form to ...
            <h3>Experts</h3>
            ...
            <h3>A_Long_String</h3>
          </div>
            <div id="main">
              <h1>This is the main.</h1>
              <div id="tippbox">
                This is the "Tip of the day"...
              </div>
              <dl>
                <dt>HTTP for HTML Authors, Part III</dt>
                <dd>We examine two of the ...</dd>
                ...
              </dl>
              <h1>This is the main2.</h1>
              ...
              The code you are reading.
            </div>
          </div>
        </div>
      </div>
    </body>
    ...