Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > NetObjects Fusion - Tutorials von Usern für User
Thema Design: Ein Bild mit CSS3 Hover Effekt, Text und Verlinkung
maulwurfmoeger:
Widmen wir uns in diesem Turorial einer interessanten Möglichkeit, seiner Homepage das "gewisse Etwas" zu verpassen.
Es handelt sich dabei um die Gestaltung eines Bildes mit CSS3 Hover Effekt, inklusive einem Kurztext und Verlinkung. Und so sieht das ganze aus.
Ihr seht auf der Seite diverse Demos. Das nachfolgende Tutorial bezieht aich auf die Demo 1. Aber keine Sorge, hat man das Prinzip einmal verstanden, kann man problemlos alle anderen Demos umsetzen.
maulwurfmoeger:
Fangen wir an ;-)
Zunächst einmal geht ihr auf diese Seite und ladet euch unter "Download Source" das notwendige Material herunter, um dieses Projekt umszusetzen. Schnell nocht die zip Datei entpackt, und los geht es.
In der Datei müssen folgende Dinge auftauchen:
1 x Ordner namens "css"
1 x Ordner namens "images"
10 x index (nummeriert bis index10)
Schaut euch in diesem Zusammenhang ruhig mal die Ornder an. Gerade wenn man noch nicht so geübt im Umgang mit CSS3 ist, kann man sich durch einfaches anklicken viele Dinge von selber erklären.
Was bedeuten die einzelnen Ordner, was bedeutet index?
* Einfach formuliert: Im Orner "css"befindet sich die Datei, die in das Homepage-Projekt eingebunden werden muss. Die css-Dateien muss auf den Server geschoben werden. In der NOF13 Version ist das jedenfalls zwingend notwendig, ansonsten klappt das nicht. In älteren Versionen kann man das auch über die Assetverwaltung hinbekommen. Wer nicht weiß wie das geht, kann sich das hier anschauen
https://www.nof-community.de/richtiger-umgang-mit-netobjects-fusion/externe-css-dateien-in-netobjects-fusion-einbinden/
* Der Ordner "images" erklärt sich von selbst ;-)
* index spuckt euch den code aus, den ihr später in einem Textfeld positionieren müsst, also nicht vernachlässigen!
maulwurfmoeger:
Jetzt geht es weiter mit der Zuordnung im Head Tag deiner Homepage. Hier muss man jetzt die entsprechenden Zeilen einfügen, damit das Projekt umgesetzt werden kann. Für die Demo 1 sind das folgende Eingaben:
--- Code: HTML5 --- <link rel="stylesheet" type="text/css" href="css/style_common.css" /> <link rel="stylesheet" type="text/css" href="css/style1.css" />
Wer nicht weiß, was um alles in der Welt ein Head Tag ist, kann sich hier schlau machen
https://www.nof-community.de/code-oder-codeschnipsel-an-der-richtigen-stelle-einfuegen/code-zwischen-den-head-tags-der-seite-einfugen/msg5633/#msg5633
Vorab sollte man sich Gedanken machen, ob das Bild auf allen Seiten erscheinen soll, oder nur auf einer Unterseite. Der Unterschied besteht darin, dass der css style in den Master Head Tag kommt, oder aber in den Layout Head Tag.
maulwurfmoeger:
Der Teufel steckt im Detail (devil)
Achtet bitte unbedingt darauf, die richte Pfadangabe zu wählen. Es ist so, dass diese css Datei sich bei euch in einem bestimmten Ordner von NOF wiederfindet. Nur wenn die Pfadangabe stimmt, kann NOF damit arbeiten. Konkret meine ich diesen Teil hier:
--- Code: HTML5 ---href="css/style_common.css
An dieser Stelle muss die konkrete Pfadangabe stimmen. Denkt dabei auch an die Problematik mit der Eingabe ./ für die Startseite oder ein ../ für die Unterseite.
maulwurfmoeger:
Wir dürfen auch das liebe Textfeld nicht vergessen. Hier kommt die index Datei ins Spiel. Man kann sich da sehr leicht den Quellcode der Seite anschauen und den entsprechenden Baustein ziehen. In unserem Beispiel sieht das so aus:
--- Code: HTML5 --- <div class="main"> <div class="view view-first"> <img src="images/1.jpg"> <div class="mask"> <h2>Hover Style #1</h2> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p> <a href="#" class="info">Read More</a> </div> </div> <div class="view view-first"> <img src="images/2.jpg"> <div class="mask"> <h2>Hover Style #1</h2> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p> <a href="#" class="info">Read More</a> </div> </div> <div class="view view-first"> <img src="images/3.jpg"> <div class="mask"> <h2>Hover Style #1</h2> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p> <a href="#" class="info">Read More</a> </div> </div> <div class="view view-first"> <img src="images/4.jpg"> <div class="mask"> <h2>Hover Style #1</h2> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p> <a href="#" class="info">Read More</a> </div> </div> </div>
Hier müsst ihr natürlich den Text anpassen, aber das ist ja nicht weiter schwer.
Wie das mit dem Textfeld klappt, könnt ihr euch hier nochmal genauer anschauen:
https://www.nof-community.de/code-oder-codeschnipsel-an-der-richtigen-stelle-einfuegen/sodort-fugt-man-code-schnipsel-ein/
Navigation
[0] Themen-Index
[#] Nächste Seite
Zur normalen Ansicht wechseln