Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Portrait von Eddy0312

    Eddy0312

    03.03.2012 - 13:49

    sehr schön, danke

  • Alternative Portrait von Tragg0r

    Tragg0r

    10.02.2011 - 11:53

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

  • Portrait von kunolli

    kunolli

    04.10.2010 - 22:46

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

  • Alternative Portrait von Lordi

    Lordi

    24.09.2010 - 10:40

    Einfach und klar beschrieben, klasse.

  • Alternative Portrait von Talisac

    Talisac

    23.09.2010 - 13:54

    Klappt wunderbar, ich bin begeistert.

    direkt mal irgend wo hinein basteln :D

  • Alternative Portrait von Christian1991

    Christian1991

    21.09.2010 - 21:01

    Solange man diese Version nimmt, gibts keine Probleme ;)

  • Alternative Portrait von eddybaer

    eddybaer

    21.09.2010 - 08:50

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

  • Portrait von DerOtto

    DerOtto

    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

  • Alternative Portrait von Dissolution

    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.

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Tutorial empfehlen

 

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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.


vBulletin 0.033 • ZF-App 0.46 • Total 0.493