-
Ein- und Ausblenden von Div Container
30.09.2008 in Adobe Dreamweaver von Gackoo_duz
- Zum Downloadmanager hinzufügen
- PDF-Datei herunterladen
- Arbeitsmaterialien herunterladen
- Kommentare ansehen (15)
- Kategorie: Adobe Dreamweaver
- Erstellt mit Programmversion: CS3
- Dateigröße (PDF): 1.7 MB
- Dateigröße (Arbeitsmaterial): 13 KB
- Bisherige Zugriffe: 3980
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.
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.
- Download: Spiegelungen 2
- Download: Vektor-Logo (Eidechse)
- Download: Sepia-Vintage-Effekt-Aktion
- Tutorial: Neue Pinsel erstellen leicht gemacht
- Tutorial: Kommerzielle Fotografie 01: Berufswunsch Fotografie
- Tutorial: Linien zum Glühen bringen
- Tutorial: Ballons aus einer Schublade
- Videotraining: CorelDRAW X6 Grundlagen - Hilfsmittel Freihand, 2-Punkt-Linie, Bezier, B-Spline, Polylinie, Stift, 3-Punkt-Kurve
- Videotraining: CorelDRAW X6 Grundlagen: Hilfsmittel Form - Heranziehen, Zurückweisen
- Videotraining: Die Programmoberfläche und der Arbeitsbereich von Adobe InDesign
- Videotraining: Lichtscheinkontureneffekt mit Animation
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.
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
Kommentare
Tutorial empfehlen
Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)
Schritt 1:
Als erstes sollte man immer mit einen Dreamweaverprojekt (Website) arbeiten.

Die Prozedur sollte geläufig sein.
Schritt 2:
Wir sollten dann ein einfaches HTML erstellen und abspeichern

Schritt 3:
Danach sollte man beliebige "div" Container

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)

Und im Quellcode so:

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

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:

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

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.

Über die CSS Palette kann man das ganze noch besser anpassen
z.B.
#ausblenden { width: 150px; background-color: #CCCCCC; }

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

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.

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...

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

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

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

Und beim zweitem Verhalten...

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ß
-
Reklame
-
-
- Farbe ins Gesicht
- Hallo erstmal ne
- [CONTEST] CSS-Contests: Worauf habt ihr Lust?
- Wacom Bamboo zu verkaufen!
- InDesign/CS5 unsichtbare €-Zeichen ersetzen
- Fotobüchern
- Umrandung um Textfeld
- Kanten glätten bei meinem Bild oder Vektor?
- After Effects Ram-Vorschau - Problem mit Cache (aktualisert nicht)
- blender render stürzt ständig ab
- jQuery - Größe von einem Frameset ändern?
- [CS5] "Löschen-Mitteilung"
- Zerissenes Foto
- Biete Programmierung Ihres PSD-Designs
- Fehler beim Platzieren von Bildern
- Zeilenumbruch CS4
- Gestaltung eines Logos
- Kaufberatung Drucker
- Dynamische Auswahlliste: Name und ID übergeben
- Adobe Encore - Probleme Schaltflächen Unterbild
-
-
Aktuelles Commag
Anzeige
-
Anzeige


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..
Arven
06.05.2011 - 17:01
Klasse, ich fange gerade mit DW an und das hat Unklarheiten beseitigt!
Kaval
24.11.2010 - 18:03
Vielen Dank, für Anfänger gut erklärt.
Truschi2000
01.11.2010 - 09:08
Sehr gut beschrieben, insbesondere für Anfänger.
Danke
Ingo1966
29.09.2010 - 18:08
Schlicht, einfach, effektiv, genau das richtige für neulinge.
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
User hat PSD-Tutorials.de verlassen
02.12.2009 - 20:04
Auch für einen Neuling gut anwendbar! Vielen Danke!
Recorim
21.10.2009 - 23:47
cooles Tutorial, hat mir sehr geholfen, auch klar verständlich!
Thujan
24.09.2009 - 15:47
Danke hat mir sehr weitergeholfen.
williamo
22.07.2009 - 11:22
Gutes Tutorial. sehr verständlich
DasFranzi
25.03.2009 - 09:31
Danke für das Tutorial. Sehr aufschlussreich! Mehr davon, bitte!
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!
kleinerkruemel
05.10.2008 - 12:10
Sehr gut. Bitte mehr davon. :)
ledavi
01.10.2008 - 18:21
Sehr gut und verständlich beschrieben, danke!
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...