super +1  
User online : 2 

für NOF ( Netobjects Fusion )

 

Aktuelle  Seite : Tutorials / Newsticker-Newsbox

Tutorial zum Einbau eines Newstickers / Newsbox

Newsticker / Newsboxen gibt es natürlich viele, aber wenn man schon so ein Teil einbaut,
dann sollen auch die Suchmaschinen etwas davon haben.
Viele Ticker sind nur ein Javascript und die sind mit Sicherheit die schlechteste Variante.
Wie es besser geht, möchte ich euch in diesem kleinen Tutorial beschreiben.
Wer mit dem Quelltext auf der Demo-Seite klarkommt, kann die Newsbox natürlich auch
unabhängig von NOF nutzen.

 

Vorschau - neuer tab
Hits :

Diesen Newsticker / Newsbox habe ich
auf dieser Seite entdeckt ( zum Original )

Das Design der Newsbox ist nur ein Beispiel.
Ich habe die dazugehörige newsticker.css kommentiert.
Daher sollte eine individuelle Gestaltung nicht
allzu schwer sein.


100 Download(s)
letzter: 22.02.12 - 22:14 Uhr

 

Schritt 2

Nach dem Download entpackt Ihr die NOF-NewsTicker.rar
Die darin enthaltenen Dateien sind:
ticker.html
newsticker (Ordner)

In dem Ordner (newsticker) befinden sich alle notwendigen
Scripte, CSS-Dateien und Ordner.

 

 

Schritt 3

Öffnet euer NOF - Projekt

 

 

Schritt 4


Nun fügt Ihr den folgenden notwendigen Code im head Bereich ein.
Wenn Ihr die Newsbox auf allen Seiten verwenden wollt, sollte der Code im Masterrahmen
eingefügt werden: Seitenansicht -  (Taste F10) - Masterrahmen Eigenschaften - html
Bei einzelnen Seiten das Layout verwenden:
(Taste F9) Layout Eigenschaften - html
 

Achtung:
Bei der Verwendung auf allen Seiten, müsst Ihr für die Startseite und die Unterseiten
einen jeweils eigenen Masterrahmen verwenden, da sich der Code minimal unterscheidet.
Bei der Verwendung von nur einem Masterrahmen würden die Pfadangaben sonst nicht stimmen.

Folgender Code gehört in den head - Startseite (Masterrahmen 1)

<!-- Ticker Lytebox Head -->
<script type="text/javascript" language="javascript" src="./newsticker/lytebox.js"></script>
<link rel="stylesheet" href="./newsticker/lytebox.css" type="text/css" media="screen">
<!-- Ticker Lytebox Head -->

<!-- Ticker Head -->
<link rel="stylesheet" type="text/css" href="./newsticker/newsticker.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="./newsticker/jquery.newsticker.js"></script>
<script type="text/javascript" src="./newsticker/parsesamples.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$("#news").newsticker();
parseSamples();
}
);
</script>
<!-- Ticker Head Ende -->

 

Folgender Code gehört in den head - Unterseiten (Masterrahmen 2)

<!-- Ticker Lytebox Head -->
<script type="text/javascript" language="javascript" src="../newsticker/lytebox.js"></script>
<link rel="stylesheet" href="../newsticker/lytebox.css" type="text/css" media="screen">
<!-- Ticker Lytebox Head -->

<!-- Ticker Head -->
<link rel="stylesheet" type="text/css" href="../newsticker/newsticker.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="../newsticker/jquery.newsticker.js"></script>
<script type="text/javascript" src="../newsticker/parsesamples.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$("#news").newsticker();
parseSamples();
}
);
</script>
<!-- Ticker Head Ende -->

 

Anmerkung:
Worin unterscheiden sich die Codes ?

Im Masterrahmen 1 beginnen die Pfadangaben mit ./ zum Ordner “newsticker”

 Im Masterrahmen 2 beginnen die Pfadangaben mit ../ zum Ordner “newsticker”

 

 

Schritt 5


Weiter geht es mit dem eigentlichen Newsticker / Newsbox

Dazu zieht Ihr Euch ein Textfeld auf und
klickt im Eigenschaftenfenster (rechts) auf  den html Button

Im jetzt geöffneten Fenster fügt Ihr folgenden Code ein (vor dem tag):

<!-- Ticker -->
<div id="ueberschrift">
  <h2 class="h2">News: Newsticker für NOF</h2> <!-- Überschrift -->
</div>
<div id="outer">
  <ul id="news"> 
    <!-- Text 1 --><li><b>News Text 1 :</b><p>ist mit <a href="http://www.servus-strunz.de" target="_blank">eingebautem Link</a> , der sich in einem neuen Tab öffnet und zu meiner Startseite geht.</p></li>
    <!-- Text 2 --><li><b>Suchmaschinen tauglicher Newsticker :</b><p>ist mit <a href="http://www.servus-strunz.de">eingebautem Link</a> , der sich im selben Fenster öffnet und zu meiner Startseite geht.</p></li> 
    <!-- Text 3 --><li><b>News Text 3 :</b><p>ist mit <a href="http://www.servus-strunz.de/vorschau/fullscreen/aussicht-40.jpg" rel="lytebox" title="schöne Aussicht">eingebautem Link</a> , der ein Bild in der Lytebox öffnet.</p></li> 
    <!-- Text 4 --><li><b>News Text 4 :</b><p>ist mal ohne Link, aber dafür ein bisschen Text zum lesen ;-)</p></li> 
    <!-- Text 5 --><li><b>News Text 5 : ein Bild</b><p><img src="newsticker/bilder/bild-1.jpg" alt="ein kleines Bild" /></p></li>
  </ul>
 </div>
<!-- Ticker Ende -->

 

Anmerkung:
Wie Ihr seht, sind die relevanten Zeilen kommentiert (Überschrift, Text 1, Text 2 usw.)
Diese jetzt entsprechend ändern.

Wegen der Übersichtlichkeit und Ordnung, gibt es im Ordner “newsticker”,
einen Ordner “bilder”. Einfach eure Bilder hier rein packen, dann braucht Ihr bei der
entsprechenden Pfadangabe zum Bild/er nur euren Dateinamen zu ersetzen.

<img src="newsticker/bilder/bild-1.jpg" alt="ein kleines Bild" />

<img src="newsticker/bilder/dein-Bildname.jpg" alt="ein kleines Bild" />

 

 

Schritt 6



Jetzt das Textfeld mit dem eingefügten und angepassten Code
an der gewünschten Stelle platzieren.

 

 

Schritt 7


Wichtig:
Jetzt muss noch der Ornder “newsticker” mittels FTP-Programm auf euren Server.
Dieser gehört bei den oben verwendeten Codes in das Hauptverzeichnis
(Root = wo eure index.html bzw. index.php liegt)

Um den Newsticker / Newsbox lokal zu testen, kopiert Euch den Ordner “newsticker”
nochmals in den Ordner “lokale Publizierung” eures NOF-Projektes.

 

 

Schritt 8



Ihr seid fertig ;-)

Ergänzung:
Im Ordner “newsticker” befinden sich die Lytebox-Dateien.
Wer die Lytebox schon anderweitig eingebaut hat,
kann diese Dateien und die 2 Codeschnipsel im head
natürlich löschen.

Zur Erinnerung:
Das Design des Newstickers / Newsbox wird in der
newsticker.css festgelegt (Breite, Höhe, Schrift usw.)

Die Anzeigedauer der einzelnen Texte stellt Ihr in der
jquery.newsticker.js / Zeile 27 ein.

delay = delay || 7000; (Zeit in Millisekunden)

 

 

17589 Gäste (seit 26.05.2010)

...weitere folgen !