Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > Design, Layout, gestalterische Elemente

Ein Masterrahmen mit verschiedenen Bannern

(1/1)

nettesekel:
Seiten mit verschiedenen Bannern gestalten ohne auf die Nutzung des Masterrahmens zu verzichten oder zusätzliche Masterrahmen zu erstellen geht so...

Beispiel:  http://demos.nof-community.de/verschiedeneBannerimMB/index.html

Zunächst benötigen alle Seiten die ihr mit unterschiedlichen Bannern ausstatten möchtet eine eindeutige Kennzeichnung, nämlich eine ID.

Um die ID zu vergeben, öffnet ihr nacheinander jeder der Seiten, klickt einmal ins Layout (nicht Masterrahmen!!!) und klickt danach auf den EP den Button "HTML" an. Es öffnet sich ein Fenster in welchem ihr in den Body-Tag (im Haupttext-Tag) die ID für die aufgerufene Seite eintragt. Verwendet für die ID am besten eine Bezeichnung ähnlich dem Seitennamen und verzichtet auf Umlaute und Sonderzeichen.




Wiederholt den Vorgang bitte für jede Seite, die ein anderes Banner erhalten soll.

In meinem Beispielprojekt sieht die Zuordnung Seiten/IDs in etwa so aus.

Home    id="home"
Seite1   id="seite1"
Seite2   id="seite2"

u.s.w.

nettesekel:
Nun erstellt eure Banner-Grafiken/Fotos und bringt sie für alle Seiten auf ein einheitliches Maß. Diese Bild-Dateien bindet ihr nun als Assets in euer Projekt ein.

http://www.nof-academy.de/Zusaetzliche%20Assets%20in%20NOF%20einbinden/


Im nächsten Schritt fügt ihr an Stelle eures Banners (im Masterrahmen) eine Tabelle mit einer Zeile und einer Spalte ein und gebt ihr die selben Maße wie euren Banner-Bildern. (wer mag kann sich auch mit einem Textfeld oder Layoutbereich versuchen, ich habe es nicht getestet denke aber, dass es auch damit funktionieren kann)

Klickt nun einmal in die Tabellen-Zelle (der Cursor darf nicht blinken) und klickt im Anschluss auf den Button "Zeilen-html".
Es öffnet sich ein Fenster und ihr tragt in den Zeile-Tag die ID für diese Tabellenzeile ein.


--- Code: HTML5 ---id="banner"

nettesekel:
Nun müsst ihr eigentlich nur noch festlegen, wie eure einzelnen Banner aussehen sollen.

Hierzu passt ihr den folgenden Code nach euren Bedürfnissen an und fügt ihn im Masterrahmen-HTML (F10) zwischen den Head-Tags eurer Seite ein. Anleitung: www.nof-community.de/index.php/topic,851.0


--- Code: HTML5 ---<style type="text/css">#banner {   background-repeat: no-repeat; background-position: top left;} #home #banner{  background-image: url( " ./assets/images/galerie1.jpg" )}#seite1 #banner{background-image: url( "../assets/images/galerie2.jpg" )}#seite2 #banner{background-image: url( "../assets/images/galerie3.jpg" )}#seite3 #banner{background-image: url( "../assets/images/galerie4.jpg" )}#seite4 #banner{background-image: url( "../assets/images/galerie5.jpg" )}#seite5 #banner{background-image: url( "../assets/images/galerie6.jpg" )}</style>
Notwendige Anpassungen:

ersetzt meine Seiten-IDs bitte durch eure eigenen und ändert die Dateinamen der Bilder entsprechend eurer eigenen Dateien ab. Pfade entsprechen der Publizierungsstruktur "nach Assettyp".

Viel Erfolg!

Navigation

[0] Themen-Index