Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

April 2017

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Absturz bei FTP Publizierung
von nettesekel
16. April 2017, 12:51:56

E-Masil Adresse herausfinden
von nettesekel
11. April 2017, 16:16:20

Keine Neuinstallation möglich
von nettesekel
10. April 2017, 16:00:27

Publizieren geht nicht
von musikavokale
09. April 2017, 23:15:50

NOF 15
von nettesekel
04. April 2017, 23:55:26

Feststehender Seitenbereich
von nettesekel
01. April 2017, 17:37:12

Aufklappbare Navigation
von nettesekel
31. März 2017, 12:50:30

Nov 12 zum hare ausreisen
von Jim Panse
26. März 2017, 11:48:03

Lytebox Dateiablage
von fahrzeugseiten
21. März 2017, 23:23:23

* Schatznasen Feed

* Aquablogger Feed

* Strickzeugs Feed

* Links für Katzenfreunde

* ...

Fachanwalt für Internet-Recht C.Schmietenknop

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Autor Thema: Thema Design: Ein Bild mit CSS3 Hover Effekt, Text und Verlinkung  (Gelesen 3252 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
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.

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Thema Design: Ein Bild mit CSS3 Hover Effekt, Text und Verlinkung
« Antwort #1 am: 15. August 2014, 18:28:47 »
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!
« Letzte Änderung: 15. August 2014, 18:51:25 von maulwurfmoeger »

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Thema Design: Ein Bild mit CSS3 Hover Effekt, Text und Verlinkung
« Antwort #2 am: 15. August 2014, 19:01:34 »
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
  1.  <link rel="stylesheet" type="text/css" href="css/style_common.css" />
  2.  <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.


Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Thema Design: Ein Bild mit CSS3 Hover Effekt, Text und Verlinkung
« Antwort #3 am: 15. August 2014, 19:12:07 »
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
  1. 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.

Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Thema Design: Ein Bild mit CSS3 Hover Effekt, Text und Verlinkung
« Antwort #4 am: 15. August 2014, 19:19:37 »
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
  1.  <div class="main">
  2.                 <div class="view view-first">
  3.                     <img src="images/1.jpg">
  4.                     <div class="mask">
  5.                         <h2>Hover Style #1</h2>
  6.                         <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>
  7.                         <a href="#" class="info">Read More</a>
  8.                     </div>
  9.                 </div>  
  10.                 <div class="view view-first">
  11.                     <img src="images/2.jpg">
  12.                     <div class="mask">
  13.                         <h2>Hover Style #1</h2>
  14.                         <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>
  15.                         <a href="#" class="info">Read More</a>
  16.                     </div>
  17.                 </div>  
  18.                 <div class="view view-first">
  19.                     <img src="images/3.jpg">
  20.                     <div class="mask">
  21.                         <h2>Hover Style #1</h2>
  22.                         <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>
  23.                         <a href="#" class="info">Read More</a>
  24.                     </div>
  25.                 </div>  
  26.                 <div class="view view-first">
  27.                     <img src="images/4.jpg">
  28.                     <div class="mask">
  29.                         <h2>Hover Style #1</h2>
  30.                         <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>
  31.                         <a href="#" class="info">Read More</a>
  32.                     </div>
  33.                 </div>  
  34.             </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/


Offline maulwurfmoeger

  • Community Mitglied
  • ***
  • Beiträge: 62
Re: Thema Design: Ein Bild mit CSS3 Hover Effekt, Text und Verlinkung
« Antwort #5 am: 20. August 2014, 18:26:44 »
Jetzt ist man dem Ziel schon nahe  (happy)

Denkt bitte daran, dass die images (Bilder) auch auf den Server gezogen sind, d.h. in euer Projekt eingebunden sind. Sonst sieht man da schlussendlich natürlich nix  8-)

Nun geht es ab ans publizieren und fertig ist das DING  (happy)

Am Ende möchte ich mich bei der ganzen NOF Community bedanken - ihr seid klasse! Entschuldigt meine laienhafte Darstellung, aber ich bin nicht gerade Experte auf diesem Gebiet, möchte aber auch meinen Beitrag zu diesem Forum leisten.

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion