Webdesign Grundlagen

Umgang mit dem CSS-Layout - Stand:

Das PBCS Webtemplate basiert auf reinem HTML Code nach Spezifikation 4.0. Fr kleine Zusatzinformationen wird Javascript 1.2 verwendet (Stand der Webseite, Datum, Begrung). Alle Layouts basieren auf einem sogenannten Cascaded Style Sheet (kurz: CSS). Das ist eine Textdatei, die fr die meisten Elemente (Hintergrnde, Tabellen, Schriftarten, Farben und Gren) die Vorgabe enthlt.
Darberhinaus gibt es eine Musterseite, die als Vorlage fr eigene zustzliche Webseiten genutzt werden sollte.
Zur Bearbeitung der Seiten kann z.B. Microsoft Frontpage (empfohlen ab Version 2002/xp), ein handelsblicher Texteditor, Shareware-HTML-Editoren oder auch professionelle Software wie Macromedia Dreamweaver verwendet werden.

Webaufbau und Dateinamen
Die Startseite (index.htm) ruft zwei sogenannte Frames auf "frnavneu.htm" stellt die feste Komponente am oberen Bildschirmrand dar, wo links das Firmenlogo (wenn man darauf klickt, kommt die Begrungsseite (homepage) und daneben die Navigation (Befehlszeile) fr das Web. Darunter startet zunchst die "frhaupts.htm". Sobald man auf einen Navigationsleistenpunkt klickt, wird die Seite, die den Namen dieses Menpunkts trgt (z.B. impressum.htm) geladen.

Alle Grafiken liegen im Unterordner "/graphics". Bitte beachten, wenn eigene Grafiken zugefgt werden, diese auch hier zu speichern.

!template.htm
Dieses Muster fr eine Webseite liegt im Stammverzeichnis Ihres Webauftritts und ist in Sektionen unterteilt, sogenannte "DIV"s (wie an dieser Seite erkennbar).
Der erste "DIV" namens "KOPF" enthlt die berschrift der Seite. Hier wird das Wort bernommen, auf das man zuvor in der Navigationsleiste geklickt hat.
DIV Nummer 2 (Titel) und DIV Nr. 3 (Kasten) sind immer als Doppel zu verwenden. Im Webseiten-Muster wird in der ersten Kapitelberschrift automatisch das Datum der letzten Bearbeitung der Webseite eingefgt (Javascript).

Mit "Kopf" und "Kasten" knnen einzelne Kapitel optisch ansprechend dargestellt werden. Im Bereich "Titel" formulieren Sie die berschrift des Kapitels, im Bereich "Kasten" setzen Sie den Inhalt, Grafiken, Tabellen usw. wie gewohnt ein.
Beachten Sie dabei bitte folgende Dinge:

• Der Inhalt des Kastens darf nicht breiter als 600 Pixel sein (wird er breiter, so werden beim Ausdruck einer Seite rechts Teile abgeschnitten)
• ndern Sie nicht die Schriftarten, denn diese werden im CSS (siehe oben) vorgegeben
• Geizen Sie mit verschiedenen Schriftgren und Farben. Das macht das Web nur unbersichtlich und gibt ihm einen unprofessionellen Touch. Weniger ist mehr!
• Verwenden Sie innerhalb des Kastens keine Hintergrundbilder. Das erschwert nur die Lesbarkeit und macht die Darstellung unruhig.
• Speichern Sie alle Grafiken im Unterordner /graphics
• Beachten Sie die goldenen Regeln des Webdesigns (weiter unten zu lesen)

Im folgenden Fall-Beispiel sind die typischen nderungsflle am Web fr Sie beschrieben. Als Webeditor wird Frontpage 2002 verwendet.

Neue Seite einfgen (wir fgen eine Seite "veranstaltungen" ein):

• Frontpage starten, (falls nur eine leere Seite angezeigt wird: Datei/Web ffnen/Stammordner fr Ihr Web auswhlen)
• Doppelklick auf !template.htm, dann Datei/Speichern unter "veranstaltungen.htm", Titel der Seite ebenfalls ndern auf "Veranstaltungen und Messen"
• Im Entwurfsmodus knnen Sie nun wie gewohnt Inhalte einfgen
• Wenn Sie ein zweites Kapitel einfgen wollen, schalten Sie die Darstellung bitte auf "HTML" um - so geht's am Einfachsten. Suchen Sie nach der Zeichenfolge:

  </div>
  <div id="titel">Subtitel</div>
  <div id="kasten">
  
  (statt "Subtitel" steht dort Ihre berschrift) markieren Sie diese und kopieren sie in die Zwischenablage. Finden Sie nun das Kommando <DIV> hinter dem Inhalt von "Kasten" und fgen den gespeicherten Inhalt direkt DAVOR ein:

  <div id="kasten">
  <p>Text und Bilder und Tabellen...hier hinkopieren</div>
  
  Schon haben Sie ein zweites Kapitel erzeugt. Schalten Sie nun wieder auf die "Entwurf" Darstellung um.

• Fgen Sie nun Ihre Inhalte ein, beachten dabei die goldenen Regeln
• ffnen Sie die "frnavneu.htm" und fgen in die Menleiste das Wort "Veranstaltungen" ein. Markieren Sie das Wort und fgen ber "Einfgen""Hyperlink""veranstaltungen.htm" den Link ein.

Datum der letzten Seitenaktualisierung automatisch einblenden:

• ffnen Sie die gewnschte Seite und wechseln in die "HTML" bzw. "Code"- Darstellung
• Finden Sie die erste <div id="kasten">
• Fgen Sie hinter Ihrer Kapitelberschrift, aber vor dem </DIV> die folgende Codesequenz ein:

 - Stand: <SCRIPT LANGUAGE="JavaScript"> <!--
datum = new Date(document.lastModified)
tag = datum.getDate()
monat = datum.getMonth()+1 // JavaScript: Monate 0-11
jahr = datum.getFullYear()
document.write(tag,". ",monat,". ",jahr) // -->
</SCRIPT>

• Speichern Sie die Seite. Von nun an wird immer das Datum der letzten nderung der Seite in der ersten Kapitelberschrift angegezeigt

Farben und Schriftarten, Hintergrundbild und Layout ndern:

• ffnen Sie die Seite "pbcsneu.css" bzw. die einzige Datei mit der Endung .CSS im Stammverzeichnis mit Frontpage
• ber "Format""Formatvorlage" sehen Sie nun die einzelnen Elemente, die Sie links markieren knnen und dann ber "ndern""Format>>" nach Ihren Wnsche gestalten.
• Alle nderungen wirken sich nach Speichern der CSS Datei sofort auf das gesamte Web und alle Seiten aus.