Anzeige
Tutorialbeschreibung

jQuery-Coda-Slider mit Dreamweaver

jQuery-Coda-Slider mit Dreamweaver

Dieses Tutorial beschreibt, wie Sie einfach durch jQuery einen Coda-Slider erstellen, welcher Textinhalte, Links, Bilder und Programmierung enthalten kann. Durch Weiterklicken auf den Pfeilen oder den einzelnen Panels entsteht ein schöner Seitenübergang, der nicht nur bei Text gut aussieht.


jQuery ist ein freies, umfangreiches JavaScript-Framework, das komfortable Funktionen zur DOM-Manipulation (Document Object Model) und -Navigation zur Verfügung stellt. jQuery ist die meistverwendete JavaScript-Bibliothek.

Bilder



01.

Laden Sie sich zuallererst auf folgender Website „Coda-Slider 1.1“ (oder Folgeversionen) herunter. http://www.ndoherty.biz/demos/coda-slider/1.1.1/

Extrahieren Sie nun den Inhalt des geladenen Ordners mit einem beliebigen Programm (z.B: 7-zip).


02.

Rufe Sie Dreamweaver auf, öffnen Sie ein neues, leeres HTML-Dokument und fügen diesen Text über den head ein:

<link type="text/css" rel="stylesheet" href="css/styles.css"/>
<meta http-equiv="Content-Language" content="en-us" />

Dadurch verbinden Sie die Html-Datei mit der später zu erstellenden Css. Schreiben Sie nun in den title eine beliebige Überschrift, die später ganz oben im Explorer zu sehen ist. Z. B.:
<title>Mein Coda-Slider</title>


03.

Fügen Sie nun darunter den folgenden Quellcode ein:

<meta http-equiv="Content-Language" content="en-us" /> <meta name="author" content="Niall Doherty" /> <script src="jquery-1.2.1.pack.js" type="text/javascript"></script> <script src="jquery-easing.1.2.pack.js" type="text/javascript"></script> <script src="jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script> <script src="coda-slider.1.1.1.pack.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(window).bind("load", function() {jQuery("div#slider1").codaSlider() }); </script>

Dadurch wird die jQuery-Funktion angesprochen und aktiviert. Danach kann sich der head schließen, es sei denn, Sie möchten noch etwas hinzufügen.


04.

In den Body fügen Sie folgenden Text ein:
<div class="slider-wrap"> <div id="slider1" class="csw"> <div class="panelContainer"> <div class="panel" title="Panel 1"> <div class="wrapper"> </div> </div> <div class="panel" title="Panel 2"> <div class="wrapper"> </div> </div> <div class="panel" title="Panel 3"> <div class="wrapper"> </div> </div> <div class="panel" title="Panel 4"> <div class="wrapper"> </div> </div> <div class="panel" title="Panel 5"> <div class="wrapper"> </div> </div> </div> </div> </div>

So erstellen Sie die einzelnen Panels. Den Text „Panel 1“ etc. können Sie natürlich durch aussagekräftigere Oberbegriffe austauschen. Sofern Sie Text in den Slider-Container bringen wollen, fügen Sie einfach durch <p> </p> Zeilenumbrüche ein und geben Sie Ihren Text im div wrapper ein. Z. B:
<div class="wrapper"> <h3>Panel 1</h3> <p>Sed eu ligula eget eros …</p> </div>


 

05.

Bilder verlinken Sie völlig normal, mit
<img src="images/test01.jpg" />


Wenn Sie ein Weiter und Zurück unter den Text einfügen möchten, geben Sie folgenden Text ein:
<p><a href="#5" class="cross-link" title="Go to Panel 5">&#171; Zurück</a> | <a href="#2" class="cross-link" title="Go to Panel 2">Weiter &#187;</a></p> 

Dieses Beispiel gilt natürlich nur für das erste Fenster. Für alle anderen gilt Folgendes:

<a href="#5" das Zurück-Feld ist immer mit dem vorigen verlinkt, was bei Fenster eins, das letzte - also in diesem Fall Panel 5 ist. Im 2. Fenster würde hier #1 stehen. Selbiges gilt natürlich für den Weiter-Link. <a href="#2"

Ebenfalls muss "go to panel 5" etc. dementsprechend abgeändert werden.


06.

Auch div-Container etc. können ohne Probleme in den Slider-Fenstern geschrieben werden. Speichern Sie nun das Dokument im soeben geladenen Ordner unter dem Namen „index.html“ ab und überspeichern dabei ruhig die vorhandene Datei.


07.

Öffnen Sie nun in Dreamweaver eine neue Css-Datei und kopieren Sie folgende Texte hinein:
 
 * { margin: 0; padding: 0 } p { text-align: left; margin: 15px 0 } p, ul { font-size: 13px; line-height: 1.4em } p a, li a { color: #39c; text-decoration: none } p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% } p#cross-links { text-align: center } p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px } noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left } noscript a { color: #a00; text-decoration: underline } noscript ol { margin-left: 25px; } a:focus { outline:none } img { border: 0 } h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }

 
Dieser Teil bezieht sich auf Link-Darstellung, Auflistungen und Text.


 

08.

Kopieren Sie nun Folgendes darunter:
 body { font-family: Verdana, Arial; background: #ffffff; /* Hintergrundfarbe der generellen Seite */ color: #3B7588; width: 800px;/* entfernung der links/rechts Pfeile */ margin: auto; text-align: center; padding-bottom: 20px; } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .slider-wrap { margin: 20px 0; position: relative; width: 100%; } .csw {width: 100%; height: 460px; background: #fff; overflow: scroll} .csw .loading {margin: 200px 0 300px 0; text-align: center} 

Hier können Sie Schriftart, Schriftfarbe und Hintergrundfarbe der gesamten Oberfläche nach Belieben anpassen.


09.

 .stripViewer { /* Angezeigtes Fenster */ position: relative; overflow: hidden; border: 2px solid #3B7588;/* border umrandung des sliders ist in größe (px) und Farbe (#xxxxxx) änderbar */ margin: auto; width: 700px;/* Width und height ist hier nach beliebigen Parametern änderbar */ height: 460px; clear: both; background: #ffffff;/* Die Hintergrundfarbe des Sliders */ } .stripViewer .panelContainer { position: relative; left: 0; top: 0; width: 100%; list-style-type: none; }


Hier kann die Farbe und Größe der Borderumrandung eingestellt werden. Ebenfalls die Breite, Höhe und Farbe/ bg-image des Slider-Fensters.


10.

 .stripViewer .panelContainer .panel { float:left; height: 100%; position: relative; width: 700px;/* Breite, in der der Text/Bild Bereich sein soll. empfehlenswert ist selber Wert wie oben (hier 700 px) */ } .stripViewer .panelContainer .panel .wrapper { padding: 10px; } .stripNav { margin: auto; } .stripNav ul { list-style: none; } .stripNav ul li { float: left; margin-right: 1px;/* Abstand zwischen den einzelnen Panels; Vorsicht bei änderungen, dass sich nichts verzieht */ }

 
Bei dem Abstand zwischen den Panels sollte der Wert nicht zu hoch liegen, da sich sonst das Layout verziehen kann.



 

11.

 .stripNav a {/* Navigations links */ font-size: 10px; font-weight: bold; text-align: center; line-height: 32px;/* Höhe der Panel-Blöcke */ background: #c6e3ff; color: #ffffff; /* Farbe der Schrift im Normalzustand */ text-decoration: none; display: block; padding: 0 15px; } .stripNav li.tab1 a { background: #6DDeff} /* Hintergrundfarbe der jeweiligen Panels */ .stripNav li.tab2 a { background: #6DDeff} .stripNav li.tab3 a { background: #6DDeff} .stripNav li.tab4 a { background: #6DDeff} .stripNav li.tab5 a { background: #6DDeff}

 
Nach Belieben kann auch eine Breite der Panels angegeben werden; zum Beispiel 60 Pixel:
width: 60px;



12.

Die Panels sind natürlich beliebig erweiterbar, wenn sie auch im Html entsprechend eingestellt werden. z. B.:
Html:
 </div> <div class="panel" title="Panel 6"> <div class="wrapper"> </div> </div> ... 

Css:
 .stripNav li.tab6 a { background: #6DDeff}
 ...



 

13.

 .stripNav li a:hover { background: #3B7588; /* Hintergrundfarbe beim roll over der Panels */ } .stripNav li a.current { background: #3B7588; /* Hintergrundfarbe beim angeklickten Panels */ color: #fffff;/* Schriftfarbe beim angeklickten Panels */ } 

Anstatt einer festen Farbe in dem Panel können auch Bilder eingefügt werden, was natürlich auch für den Roll-over gilt.


 

14.

 .stripNavL, .stripNavR {/* links und Rechts Pfeile */ position: absolute; top: 230px; text-indent: -9000em; } .stripNavL a, .stripNavR a { display: block; height: 40px;/* höhe und breite der links / Rechts Pfeile */ width: 40px; } .stripNavL { left: 0; } .stripNavR { right: 0; } .stripNavL { background: url("../images/arrow-left.gif") no-repeat center; /* Pfeil links (bild) */ } .stripNavR { background: url("../images/arrow-right.gif") no-repeat center; /* Pfeil rechts (bild) */ }

 
Dieser Bereich ist für die seitlichen Pfeile zuständig, welche natürlich ohne Probleme ausgetauscht werden können.


15.

Legen Sie nun einen Ordner „css“ in Ihrem entpackten Coda-Slider-Ordner an und speichern die soeben erstellte Css-Datei dort hinein. Wichtig: Nennen Sie diese Css-Datei „styles.css“ oder ändern Sie die entsprechende Verlinkung in der Html-Headline.

Nun können Sie die „index.html“ mit einem Explorer Ihrer Wahl öffnen und das Ergebnis sollte ähnlich aussehen:

Bilder




 

16.

Mit Text- und Bild-Elementen kann dies sehr interessant aussehen, allerdings auch mit einem Panorama, welches passend zugeschnitten und nahtlos in die einzelnen Fenster eingefügt wird.

Beim Zuschnitt ist zu beachten, dass die einzelnen Bilder pro Panel dieselbe Höhe und Breite haben wie das Fenster selbst. Hier: 700 x 460px. Dies ergibt beim Weiter- und Zurückschalten einen interessanten Effekt.

Bilder



 
Auch eine Alternative zu einer herkömmlichen Seite ist schnell und einfach gestaltet.

Bilder



Einfach den Rahmen um die Fenster auf „none“ stellen und Container mit passenden Bild- und Textelementen als Layout setzen. (dementsprechend natürlich auch die Höhe und Breite des Fensters bedenken).

Für die Auflistung der oberen Panels kann auch einfach ein Bild eingesetzt werden, dem eine width und line height gegeben, ist. Z. B.:

 .stripNav a { /* Navigations links */ font-size: 10px; font-weight: bold; text-align: center; line-height: 25px;/* Höhe der Panel-Blöcke */ width: 91px; background: #c6e3ff; color: #000000; /* Farbe der Schrift im Normalzustand */ text-decoration: none; display: block; padding: 0 15px; } .stripNav li.tab1 a {background-image:url(../images/nav1.jpg)} /* Hintergrundfarbe der jeweiligen Panels */ .stripNav li.tab2 a {background-image:url(../images/nav1.jpg)} .stripNav li.tab3 a {background-image:url(../images/nav1.jpg)} .stripNav li.tab4 a {background-image:url(../images/nav1.jpg)} .stripNav li.tab5 a {background-image:url(../images/nav1.jpg)} .stripNav li.tab6 a {background-image:url(../images/nav1.jpg)} .stripNav li.tab7 a {background-image:url(../images/nav1.jpg)} .stripNav li.tab7 a {background-image:url(../images/nav1.jpg)} .stripNav li a:hover { background-image:url(../images/nav2.jpg);/* Hintergrundbild beim roll over der Panels */ } .stripNav li a.current { background-image:url(../images/nav2.jpg);/* Hintergrundbild beim angeklickten Panels */ color: #fffff;/* Schriftfarbe beim angeklickten Panels */ }

 
 
Das könnte je nach Geschmack und Verwendungszweck ähnlich aussehen:

Bilder



So könnte eine einfache Menü-Führung durch Ihre Website erfolgen. Natürlich sind innerhalb der einzelnen Panels auch andere jQuery-Scripte möglich, sodass Sie zum Beispiel eine Lightbox oder Bildergalerie einbinden können.

Ich bedanke mich für das Interesse an diesem Tutorial und wünsche viel Spaß beim Ausprobieren.



Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Eddy0312
  • 03.03.2012 - 13:49

sehr schön, danke

Portrait von Tragg0r
  • 10.02.2011 - 11:53

Danke für das Tut, gut gemacht! Aber für mich ein wenig too much.

Portrait von kunolli
  • 04.10.2010 - 22:46

Sehr schön! Aber was kann man tun, damit es mit dem Internet-Explorer auch tadellos funktioniert?

Portrait von Lordi
  • 24.09.2010 - 10:40

Einfach und klar beschrieben, klasse.

Portrait von Talisac
  • 23.09.2010 - 13:54

Klappt wunderbar, ich bin begeistert.

direkt mal irgend wo hinein basteln :D

Portrait von Christian1991
  • 21.09.2010 - 21:01

Solange man diese Version nimmt, gibts keine Probleme ;)

Portrait von eddybaer
  • 21.09.2010 - 08:50

Klasse, schön gemacht und erklärt! Vielen Dank.

Portrait von patrick_l
  • 21.09.2010 - 01:08

Ein super Tutorial. So etwas kommt gerade genau richtig. Befasse mich seid 3 Wochen sehr intensiv mit jQuery. Danke DerOtto

Portrait von Dissolution
  • 20.09.2010 - 14:05

Tolles Tutorial! Schade finde ich nur, dass der Hang hin zu JS(-Frameworks) immer mehr spürbar ist und viele Seite ohne Javascript gar nicht mehr aufrufbar sind.

Das heißt einerseits große Einschnitte in die Barrierefreiheit sowie ein nicht zu unterschätzendes Sicherheitsrisiko.

Jedem angehenden Webdesigner möchte ich deshalb raten, sei sparsam mit deinen Skripten! Viele Leute, mich eingeschlossen, besuchen heute keine zufällig gefundenen Seiten mehr wenn dafür JS eingeschaltet sein muss.

x
×
×