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!

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

  • Alternative Portrait von arnieparnie

    arnieparnie

    21.10.2011 - 13:57

    Nicht schlecht...aber der rote container (apdiv1) bleibt, nachdem er wieder ausgeblendet wurde,
    weiterhin verweissensetiv. Müsste noch angepasst werden...Ist aber nur eine Kleinigkeit..

  • Alternative Portrait von Arven

    Arven

    06.05.2011 - 17:01

    Klasse, ich fange gerade mit DW an und das hat Unklarheiten beseitigt!

  • Alternative Portrait von Kaval

    Kaval

    24.11.2010 - 18:03

    Vielen Dank, für Anfänger gut erklärt.

  • Alternative Portrait von Truschi2000

    Truschi2000

    01.11.2010 - 09:08

    Sehr gut beschrieben, insbesondere für Anfänger.
    Danke

  • Alternative Portrait von Ingo1966

    Ingo1966

    29.09.2010 - 18:08

    Schlicht, einfach, effektiv, genau das richtige für neulinge.

  • Alternative Portrait von chewi

    chewi

    29.01.2010 - 23:38

    Super beschrieben! hab auch kaum erfahrung im umgang mit dreamweaver, bin aber dank der guten beschreibung, trotzdem direkt zum ziel gekommen =)
    danke

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    02.12.2009 - 20:04

    Auch für einen Neuling gut anwendbar! Vielen Danke!

  • Alternative Portrait von Recorim

    Recorim

    21.10.2009 - 23:47

    cooles Tutorial, hat mir sehr geholfen, auch klar verständlich!

  • Alternative Portrait von Thujan

    Thujan

    24.09.2009 - 15:47

    Danke hat mir sehr weitergeholfen.

  • Alternative Portrait von williamo

    williamo

    22.07.2009 - 11:22

    Gutes Tutorial. sehr verständlich

  • Portrait von DasFranzi

    DasFranzi

    25.03.2009 - 09:31

    Danke für das Tutorial. Sehr aufschlussreich! Mehr davon, bitte!

  • Alternative Portrait von spaxi

    spaxi

    12.02.2009 - 12:38

    Wow, wusste gar nicht, dass das so einfach geht!
    Sogar ICH, als absoluter DreamWeaver-Anfänger habs geschafft :)

    Danke!

  • Portrait von kleinerkruemel

    kleinerkruemel

    05.10.2008 - 12:10

    Sehr gut. Bitte mehr davon. :)

  • Portrait von ledavi

    ledavi

    01.10.2008 - 18:21

    Sehr gut und verständlich beschrieben, danke!

  • Portrait von Sampiero

    Sampiero

    30.09.2008 - 15:15

    Ich nehme an es besteht Interesse an Dreamweaver!
    Wann kommt ein komplettes Anleitungstutorial für eine kleine Webseite?
    Wie und wo man die verschiedenen Ordner anlegt...

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

Tutorial empfehlen

 

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


Schritt 1:

Als erstes sollte man immer mit einen Dreamweaverprojekt (Website) arbeiten.

Bilder

 

Die Prozedur sollte geläufig sein.

 

Schritt 2:

Wir sollten dann ein einfaches HTML erstellen und abspeichern

Bilder

Schritt 3:

 

Danach sollte man beliebige "div" Container

Bilder

Hier hab ich der einfach halber die Styles im Dokument gelassen, mann kann aber auch die Stylesheetdatei extern einbinden.

Bei der "CSS Definition" habe ich (noch) nichts eingetragen

Nach ein paar "Divs" mehr sollte das so etwa aussehen. (Hier soll nur das Prinzip verstanden werden)

Bilder

Und im Quellcode so:

Bilder

 

Um den ganzen Block herum habe ich noch einen "center" Container erstellt.

 

Bilder

Schritt 4:

Damit man auch später etwas mehr sieht als diese hässlichen Zeilen sollten wir die "Divs" ein wenig über die CC Palette editieren.

Hier ein Vorschlag:

Bilder

Das Ganze sollte dann so aussehen: ( ich weiß, sieht ziemlich Sch...e aus, hier gehts jedoch nur ums Prinzip)

Bilder

Schritt 5:

Jetzt habe ich ein Element erstellt, dass nachher die Schalterfunktion sein soll. Das kann ein beliebiges Objekt sein.  Ein Bild , ein Wort

Ich markiere es und erstelle wieder  einen weiteren Container.

Bilder

 

Über die CSS Palette kann man das ganze noch besser anpassen

z.B.

#ausblenden {     width: 150px;     background-color: #CCCCCC; }

Bilder

Schritt 6:

Jetzt habe ich das Element erstellt das später eingeblendet werden soll.

Bilder

Hierbei wird ein "absoluter Div" Container erstellt, den man völlig frei auf der Seite platzieren kann, hier habe ich die Hintergrundfarbe schon auf "rot" gesetzt.

Danach sollte man in der AP Palette das Element ausblenden! (Auge zu) Ein Z-Index von 1000 wäre auch ratsam, damit das Element immer im Vordergrund steht.

Bilder

 

Schritt 7:

Um  die Elemente ein- und auszublenden müssen wir das Element auswählen das die Aktion ausführen wird ( hier ein Klick). Danach können wir  in die Verhaltenpalette wechseln und folgendes aufrufen...

Bilder

In dem darauffolgenden Dialog sollten wir angeben welches Element beeinflusst werden soll. Hier das "apdiv1" Div,....

Bilder

und als zweites Verhalten das "Center" Div. Hier wird die Sichtbarkeit auf 25% gelassen, damit man das Ursprüngliche noch sieht..

Bilder

 Damit der Ursprung wiederhergestellt wird habe ich auf einem anderen Element das Ganze in umgekehrter Weise aufgebaut.

Also...

Bilder

Und beim zweitem Verhalten...

Bilder

 

Schritt 8:

Nach dem abspeichern wird man noch darauf hingewiesen das JAVASCRIPT Code eingefügt wird.

Das Dokument sollte sich erfolgreich testen lassen

 

Viel Spaß

vBulletin 0.043 ZF-App 0.527 Total 0.569