…From Single Molecules to Cells…
Fachbereich 14

Hier geht es zum WebQuestTemplate (Feb 2008) Hinweise zum Template:

Aufbau:

Hier stehen ein paar Hinweise zum Umgang mit diesem Template. Das Template besteht aus sechs HTML-Seiten, wobei die Index.html die Seite ist, die immer als Erste aufgerufen wird. Die Index.html wird von jedem Browser als Startseite erkannt, wenn sie nicht existiert kann es zu Problemen mit dem Aufrufen der Seite kommen. Die anderen Seite sind entsprechend dem typischen Gerüst eines WebQuests, nach Dodge und March, benannt und in der Navigationsleiste links verlinkt. Deswegen und um Probleme zu verhindern sollten die Namen der HTML-Seiten nicht geändert werden. Falls Sie Namen von HTML-Seiten ändern, denken Sie daran jeden Link der auf die Seite, deren Namen geändert wurde, verweist ebenfalls zu ändern, sonst geht der Verweis ins Leere und es erscheint eine Fehlermeldung.

Tipps:

• ändern Sie die Namen der Seiten nicht, die Hauptseite – Index.html – findet sonst die Seiten nicht mehr
• die Index.html darf nicht verschoben oder um benannt werden, sonst findet der Browser sie nicht mehr
• lassen Sie alle Seiten in dem Hauptordner, Sie müssen sonst den Pfad mit angeben. Wenn zwei Dateien sich im gleichen Ordner befinden können sie ohne Probleme verlinkt werden, wenn sie sich jedoch in verschiedenen Ordner befinden muss zur Verlinkung auch immer der Ordner mit angegeben werden, daher ist es einfach alles im gleichen Ordner ab zu speichern.
• Ausnahme:alle Bilder werden im Ordner „images“ gespeichert

HTML

HTML ist eine Skriptsprache, die zum Gestalten von Web-Seiten eingesetzt wird. Die Grundlagen dieser Sprache sind recht einfach und dadurch auch leicht zu erlernen.  Außerdem gibt es im Internet viele gute Seite, die helfen können. Eine der bekanntesten ist SelfHTML. Da das Einarbeiten in HTML jedoch trotzdem etwas Zeit braucht und nicht jeder diese aufbringen kann, stellt unser Glossar (ist im Template verlinkt) die grundlegenden Informationen zusammen, es wird kein Anspruch auf Vollständigkeit erhoben.

Vorab einige Informationen:

HTML-Dateien bestehen aus Text. Zur Textauszeichnung gibt es bestimmte Zeichen aus dem normalen Zeichenvorrat.Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Der Inhalt dazwischen ist der "Gültigkeitsbereich" des entsprechenden Elements. Tags werden in spitzen Klammern notiert.

Quelle: SelfHTML

<einleitender Tag > Gültigleitsbereich </abschließender Tag>

Tipps:

• Versuchen Sie so viel wie möglich im Sourcecode zu arbeiten, dadurch sind Sie unabhängiger vom HTML-Editor. Um das zu erleichtern, haben wir den Sourcecode des Templates mit vielen wichtigen und hilfreichen Anmerkungen versehen.
• Alles was im Source-Code zwischen <!-- ... --> steht, ist auch nur im Source-Code zu sehen. Dieses Element definiert den Bereich in dem Anmerkungen gemacht werden können und kann jederzeit und ohne Konsequenzen gelöscht werden.
• Wenn Sie etwas auf Ihren HTML-Seiten verändert haben während Sie diese Seite im Browser anzeigen, vergessen Sie nicht:

1. die Seite im Editor zu speichern und
2. die Browseransicht zu aktualisieren

Das Glossar:

Das Glossar soll Ihnen helfen ein eigenes WebQuest zu erstellen. Dazu soll es Ihnen die technischen Hilfsmittel an die Hand geben, mit denen Sie einfache HTML-Seiten erstellen können, die Sie dann zu einem WebQuest zusammenfügen. Aber auch wenn Sie mit Templates arbeiten, kann dieses Glossar Ihnen helfen.
Vor allem für grundlegende Probleme, wie das Erstellen einer Überschrift, das Einbinden eines Bildes oder das Ändern der Schriftfarbe gibt es hier Lösungen.
Es ist vor allem für all jene gedacht, die mit einem HTML-Editor arbeiten, der keine graphische Benutzeroberfläche anbietet, da sich alle Funktionen die hier beschrieben sind, auf den Sourcecode beziehen. Bei einem Editor mit graphischer Benutzeroberfläche, sogenannten WYSIWYG-Editoren (What You See Is What You Get), sehen Sie den Sourcecode nicht, sondern das Dokument wie es im Webbrowser am Ende angezeigt wird.
Falls Sie jedoch mit Programmen wie Dreamweaver, Nvu Composer und KompoZer arbeiten, wird ihnen dieses Glossar nicht viel helfen, da Sie bei solchen Programmen nur den richtigen Knopf finden müssen um das große Angebot an Funktionen zu nutzen. Falls Sie trotzdem grundlegende Fragen zu HTML haben, können Sie natürlich hier nachschlagen.

Layout und CSS:

Das Tabellenlayout

Das Layout der HTML-Seiten wird mit Hilfe von Tabellen gestaltet, d. h. Die gesamte Seite ist eine große Tabelle. An dieser sollte zu Anfang auch nichts verändert werden. Wenn Sie ein bisschen mehr Erfahrung mit HTML gemacht haben, steht es Ihnen offen die Tabelle so weit zu verändern wie Sie möchten.

Zelle 1 in der graphischen Darstellung hat im Sourcecode die Id, d. h. den Namen, Logo,

Zelle 2 die IdUeberschriftWebquest,

Zelle 3 die IdNavigationund

Zelle 4 die IdInhalt.

Mit Hilfe der Id kann man das Layout dieses Bereichs schneller verändern (s. CSS) und man kann sich leichter im Sourcecode zurechtfinden.

Erklärung zum Sourcecode:

Die Tabelle, die für das Layout verwendet wird unterscheidet sich prinzipiell nicht von einer Tabelle, die Sie aus Word kennen oder die sonst in HTML genutzt wird (vergleichen Sie dazu die Tabelle aus der Auswertungsseite des Templates).

Dementsprechend finden Sie die gleichen Elemente in jeder Tabelle in HTML wieder.

CSS

CSS ist die Abkürzung für Cascading Style Sheets. CSS ist eine Ergänzungssprache zu HTML mit der vor allem Formateigenschaften definiert werden, z. B. Farbe, Größe, Schriftart, etc. Dazu kann man CSS-Befehle direkt in das HTML-Dokument hinein schreiben oder man nutzt eine ausgelagerte CSS-Datei, die dann mit dem HTML-Dokument verknüpft wird. Innerhalb dieses Templates wurde die zweite Variante gewählt. Dadurch besteht die Möglichkeit alle Formateigenschaften die man definiert hat übersichtlich in einem Dokument zu sammeln und zu verändern. Dadurch erspart man sich die mühsame Arbeit jede einzelne HTML-Seite nach z. B. der Schriftfarbe abzusuchen um sie dann manuell auf jeder Seite zu ändern.
Die ausgelagerte CSS-Datei hilft uns somit die Formatierung unserer HTML-Seiten übersichtlich und leicht veränderbar zu gestalten, dies erspart Arbeit und Zeit.
Eine ausgelagerte CSS-Datei hat die Dateiendung .css und kann mit den meisten gängigen Editoren erstellt werden.

Innerhalb des Head ist die CSS-Datei mit:

<style>
@import url (layout.css)
</style>

eingebunden.

Für weitere Hilfe mit CSS schauen Sie unter SelfHTML/CSS, außerdem sind innerhalb der CSS-Dateien, die die Formatierung des Templates definieren, einige Hilfestellungen gegeben, schauen Sie Sich die einfach mal an.

Tipps:

• Nehmen Sie Sich 5 Minuten und verändert einfach mal ein paar Sachen in der CSS-Datei, probieren Sie einfach wenig herum. Sie werden feststellen, dass das Formatieren Ihrer HTML-Seiten mit CSS gar nicht so schwierig ist, wie es am Anfang erscheint.
• Wenn Sie etwas in ihren HTML-Seiten verändern wollen, dass mit dem Aussehen zu tun hat, z. B. die Farbe von Links, den Hintergrund oder die Schriftgröße, schauen Sie als erstes in der CSS-Datei nach.

Beispiele zum Thema CSS:

...

ändern Sie die Namen der Seiten nicht, die Hauptseite – Index.html – findet sonst die Seiten nicht mehr