Alles in einem!

Webauftritt in einer Datei

Ein komplettes Internetangebot in einer einzigen Datei? Warum nicht? Plötzlich werden Effekte möglich, die vorher zu großen Problemen geführt hätten. Wir zeigen Ihnen, wie es funktioniert!

  1. Webauftritt in einer Datei
  2. Teil 2: Webauftritt in einer Datei
Webauftritt in einer Datei

© Archiv

Webauftritt in einer Datei

Wenn Sie Webdesigner sind und die Internetauftritte, die Sie gestalten, per Seitenpreis anbieten, dann sollten Sie diesen Webbaukasten nicht als Grundlage Ihrer zukünftigen Projekte einsetzen, Sie würden bitterarm! Denn in diesem Monat legen wir alle Daten eines Webauftritts in eine einzige Datei. Das machen wir nicht aus purer Freude, sondern um einen bestimmten Effekt zu realisieren.

Die Internetseiten sollen zunächst wie in einem Frameset einen fixierten oberen - für die Titeldaten - und linken Block - für das Menu - besitzen. Die Inhalte des Auftritts liegen in einem dritten Block, der rechts von der Navigation zu finden ist. Wenn die Seiten durch einen Klick auf einen Menüpunkt gewechselt werden sollen, gleitet der Inhaltsbereich nach rechts aus dem Bild, der neue Inhaltsbereich von unten schwebt ins Bild.

Bewegte DIVs

Um die einzelnen Bereiche der Seite zu fixieren, arbeiten wir bei diesem Design mit DIVs, die über CSS-Klassen platziert werden. Für den Inhaltsbereich gilt Ähnliches. Jede Seite des Angebots findet in einem separaten DIV Platz. Das DIV, in dem die Elemente der Startseite stehen, wird nach Aufruf der Seite bereits an Ort und Stelle positioniert. Alle anderen DIVs werden mit den entsprechenden HTML-Daten gefüllt, so dass die Seiten des Angebots fix und fertig gestaltet sind. Allerdings werden diese DIVs so weit unten auf der HTML-Seite platziert, dass sie nicht sichtbar sind.

Webauftritt in einer Datei

© Archiv

Beim Seitenaustausch schwebt die aktuelle Seite 1 rechts aus dem Bild (gelber Hintergrund) während die neue Seite 2 von unten in das Design einfliegt.

An dieser Stelle treten die JavaScript-Funktionen ihren Dienst an. Im linken Frame finden Sie die Navigation der Seite. Die einzelnen Menüpunkte sind mit einem Link versehen. Allerdings ruft dieser Link keine Seite aus dem Internet auf, sondern die Funktion "wechsel()". Als Übergabewert wird die ID der "Seite" übergeben, die auf dem Bildschirm sichtbar sein soll.

Die Funktion sorgt nun dafür, dass das aktuelle DIV langsam nach rechts von der Bildschirmfläche verschwindet und gleichzeitig das gewünschte DIV langsam von unten nach oben ins Bild schwebt und die Position des Inhaltsfensters übernimmt.

Deklaration und Aufruf

Im HTML-Code müssen Sie nur wenige Dinge beachten. Die Positionierungen der DIVs übernehmen die CSS-Klassen. Die Gestaltung übernehmen natürlich Sie! Stellen Sie einfach wie üblich die Seiten Ihres Angebots mit einem HTML-Editor zusammen. Konzentrieren Sie sich dabei auf den Inhaltsbereich. Die Navigation und das Hauptdesign werden in der endgültigen einzigen Seite definiert. Wenn Sie den Inhaltsbereich einer Seite fertig gestellt haben, kopieren Sie den Inhalt des BODYs in die Zwischenablage und fügen ihn in der Hauptdatei in das entsprechende DIV ein. Für die erste Seite gilt:

Webauftritt in einer Datei

© Archiv

<div class="inh1" id="finh1">... 
.HTML-CODE...</div>

Alle weiteren Seiten werden entsprechend in DIVs gelegt, wobei Sie die Ziffern am Ende des Klassen- bzw. ID-Namens jeweils um 1 erhöhen. Um die Seiten später aufzurufen, verlinken Sie die Einträge im Menü mit den Aufrufen der JavaScript-Funktion. Auch hier achten Sie auf die Übergabevariable, sie muss natürlich die richtige Endziffer besitzen:

<a href="javascript:wechsel(‘finh1‘)">
.Seite 1</a><br><br>

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".