“Tab-Navi” als Alternative zum Multi-Layout

Vielen Dank an Panda, für die Idee... und an HtmlNix, für seine Anleitung... für meine Anleitung ;o)!
 

 

 

 

 

 

 

  Schritt1u2_on.gif

Schritt1&2_off

  Schritt1u2_off.gif

BG

BG.gif

Schritt3_on

  Schritt3_on.gif

  Schritt3_off.gif

Schritt4_on

  Schritt4_on.gif

  Schritt4_off.gif

Schritt5_on

  Schritt5_on.gif

  Schritt5_off.gif



Vorarbeit 1:

Als aller Erstes benötigt man die Grafiken für die Tabs. Diese müssen in einem Grafik / Fotobearbeitungsprogramm erstellt werden und müssen bereits die Seitenbeschriftung beinhalten.
Für jeden Tabreiter benötigt man zwei Grafiken. Je eine Grafik für einen aktiven und einen inaktiven Reiter.
Diese Grafiken speichert man am Besten gleich unter den Seitennamen und mit dem entsprechenden Zusatz “on” oder “off” ab.

Da die passiven Tabs unten eine Linie haben, um den Charakter der Tabreiter zu erhalten, benötigt man außerdem ein kleines
Hintergrund-gif für die Tabellezeile, in welche die Tab-Navi gelegt werden soll.


Vorarbeit 2:

Im Projektordner >> lokale Publizierung >> assets >> Images legen wir nun einen neuen Ordner an und nennen ihn “navi”.

In diesen Ordner kopieren wir alle erstellten Tab-Grafiken. Die Hintergrundgrafik muss dort nicht abgelegt werden.
Ausserdem kopiere ich, um Probleme mit Pfaden zu vermeiden auch einmal alle Grafiken, einschließlich Hintergrundgrafik, in den Ordner Assets.
Der Ordner Assets befindet sich direkt im Projektordner.

 

 

Download Vorlage NOF 10  ZIP/372KB  neu

Ordner navi  ZIP/8KB 

Download Vorlage NOF 11  ZIP/380KB  neu

entpacken und den Ordner nach erster lokaler Publizierunge im Ordner Lokale Publizierung >> Assets>> Images ablegen

© mccolor- WebDesign // Impressum // NOF-Community