Anzeige
Tutorialbeschreibung

Ein- und Ausblenden von Div Container

Ein- und Ausblenden von Div Container

Hier wird gezeigt, wie man einzelne Elemente einer Webseite per Klick auf ein Element ausblendet, um die Aufmerksamkeit auf ein wichtiges Element zu lenken.

Grundlegende CSS Kenntnisse und Bedienung von Dreamweaver sind Vorraussetzung


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ß


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von 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..

Portrait von Arven
  • 06.05.2011 - 17:01

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

Portrait von Kaval
  • 24.11.2010 - 18:03

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

Portrait von Truschi2000
  • 01.11.2010 - 09:08

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

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 29.09.2010 - 18:08

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

Portrait von 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

-versteckt-(Autor hat Seite verlassen)

  • 02.12.2009 - 20:04

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

Portrait von Recorim
  • 21.10.2009 - 23:47

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

Portrait von Thujan
  • 24.09.2009 - 15:47

Danke hat mir sehr weitergeholfen.

Portrait von williamo
  • 22.07.2009 - 11:22

Gutes Tutorial. sehr verständlich

Portrait von DasFranzi
  • 25.03.2009 - 09:31

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

Portrait von 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
Portrait von ledavi
  • 01.10.2008 - 18:21

Sehr gut und verständlich beschrieben, danke!

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

x
×
×