Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Fade and Appear Effects

  • We are going to take a look at some somewhat hidden effects that Dreamweaver can create for you on your pages
  • Dreamweaver offers the ability to apply CSS3 effects very easily
  • Behaviors panel offers effects that can be done using CSS3
  • Open the Tag inspector panel by going to Window->Tag inspector
  • Click on the Behaviors button and click the + sign
  • You will see the word effects in the listing
  • These are the CSS3 effects that are available to you
  • We will look at the Appear/Fade effect
  • We will create a new page called appear-fade.html & add a single div to the page with an image inside the div
  • We will make this image appear & disappear by clicking on it
  • In design view select the image in the tag inspector
  • Click behaviors & the + sign to choose appear/fade from the list
  • Use the default settings and click the toggle checkbox & save the page
  • We are given a dialog box from DW saying there will be spry libraries added to the files panel
  • These must be uploaded to the web server or this feature will not work
  • Preview this page in the browser & click on the image, it should fade & appear with each click
  • We will now add a background image to this div so when the image disappears we can view the background image
  • Add a background image property to the id in the CSS panel
  • Now try the page again in the browser & you will have the background image showing when the foreground image disappears

Fade and Appear Effects

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Fading and Appearing in CSS3 0:15
    • Add Page Title and Header
    • Insert Image
    • Set Image Tag Properties
    • Insert Another Image
    • Add Appear/Fade Behavior Effect
  • Preview in Browser 5:25
  • Add Appear/Fade Behavior Effect 7:16
  • Preview in Browser 8:02
  • Summary 9:07

Transcription: Fade and Appear Effects

We are now going to take a look at how to make images fade and appear in your web page.0000

This is actually a CSS3 feature, but Dreamweaver has the built-in capability to be able to add this.0007

Let's take a look at working with fading and appearing in CSS3.0016

It is kind of hidden in Dreamweaver; this is a feature a lot of people don't even realize Dreamweaver can do--it was added in one of the more recent versions.0023

I am going to create a new page, and I am going to name this page fade-appear; so, it will be fade-appear.0032

Now that I have the page, I am going to have it say "Make Images Fade and Appear"; and now that I have a title, I'll just copy that and put it right onto the web page to save me some typing, and we'll make that a Header 1.0045

I am doing this on all separate pages so that you can go back when you need to review these, or if you decide you want to actually use these individual features--that it is possible for you to do that and just look at the page, and you don't have to dig around in all this other information on the page; you can just focus on that one piece.0066

We will make images fade and appear--I need some images in order to do this, so I am going to add a couple of images.0088

In the Common tab of the Insert bar, if I click on this tree, you will see, I have an image: anywhere there is a tree in Dreamweaver, it says image.0097

I'll go ahead and click on that; and what I want to do is go down towards the bottom.0110

And this is the world's oldest working bakery: it is in Austria.0117

I'm going to click OK; this is going to say World's Oldest Bakery (and this is from the 1500's--I think it's 1548 that this bakery opened, and it is still going--it's amazing; it's all wood on the front--it's just beautiful).0124

Anyway, on to our fade and appear: I need to give my images a name, so I am going to name this one bakery and hit Enter or Return to set that.0143

I'm going to do one more; so I'll hit Enter or Return one more time, and this next one I am going to add--I'll use the Insert menu this time, so I use the Insert bar.0156

And this one is the oldest pub; and this is kind of a funny picture; this is going to be Pub in Graz, Austria; and believe it or not, it has little bunnies on the front--so it's kind of fun from the outside.0171

These are the two images we are going to make fade and appear.0192

Let's select this image: now notice, this one has an ID; I did not add an ID to this one, so I should go back and do that; I'll name it pub.0196

We'll go up to bakery first and make that one fade and appear; I select the image; I am going to hit the + sign in the Behaviors area of the tag inspector.0210

Now, in case this is not open, you can always go to the Window menu and go down to Behaviors right here, or choose Tag Inspector and click the Behaviors button.0223

So, I have the image selected; I am going to hit the + sign, go down to the Effects, and...you can see, it is easy to totally skip this one, but it does have an arrow here; it is actually facing right, but there isn't enough space for me to open it there, so Dreamweaver opens it on the left.0235

I am going to choose Appear/Fade; now, this is asking me which element on the page--and notice, it says Current Selection; what I am going to do is choose the actual image here, just to make sure I get the correct image.0256

That is why I wanted to give it an ID or a name; that is this piece down here.0274

Now, the effect duration--1,000 milliseconds means one second; so, just drop the three zeros and you have the number of seconds--so that is how long it is going to take.0281

I am going to fade, and I am going to fade from how it looks now to completely invisible; and I am going to use a toggle.0293

Now, what the toggle does is: each time you click it, it changes--it goes to the opposite; you will see what I mean once we run this.0303

I'll click OK; notice, we have an on-click event--so what has happened is: the user has to click the image for that event to be triggered.0312

And here is my Appear/Fade; so, we'll go out to the browser, and let me test this one in Firefox....so I'll go ahead and save the page.0322

Now, notice what this says: this is actually using a technology called Spry, which Adobe created; what it is, is a Spry library of features that you can use.0333

These features are all written in Javascript, and oftentimes they pull in CSS within the Javascript file in order to create these effects.0347

That is why I said they were CSS effects; they are not pure CSS, but there is some CSS involved in many of these effects that you are going to add.0358

For the most part, they are Javascript--that is a .js file.0370

Dreamweaver is telling me that it is going to create this new folder called Spry Assets, and I must have that on my Web server in order for this feature to work.0374

It needs that Javascript library so the browser knows what to do when the user clicks.0384

I'll click OK; it is going to go out and open the browser; here is my image--I click on it; it fades; I click on it again; it comes back.0390

Now, I could have it just get lighter--let's make the lower one just get a little bit lighter.0402

The thing I want you to note is: when I click on this and make it disappear (basically), it keeps this space here: my second image does not bounce up to fill that space.0408

So, it keeps that blank space on your page; and that makes a difference in your page layout.0421

If this bounced up, my whole page layout could change; I just wanted you to note that.0429

I'll go down and do this once more on my pub image; I'll go ahead and hit the + sign and go down to the effects.0436

Now, I did select the image, but that was just for your benefit, so you knew what I was going to do.0444

I'll click Appear/Fade; I am not going to choose Current Selection...now, you certainly could, as long as I know this image is selected...personally, I need to make sure, or want to make sure, that the browser knows exactly what I want, so I am going to put the name of the image in myself.0450

But what this one is going to do is just fade to 50%.0469

I'll go ahead and toggle this one, also; so each time I click, it does the opposite.0475

I'll say, "OK, save my page"; and I am going to take this one out to Safari; let's take a look at what happens.0481

My top one fades completely; my second one should only fade halfway--I set it to 50%: you can still see it--it just fades out.0490

Now, what this would be nice for is an effect behind the scenes: so, what if I added another behavior on this particular image, or another Javascript piece that, when they click on it, something else pops up on top of this image?0501

Well, I can allow the back one to fade this way, and then let the other one appear based on another event.0518

That is Fade/Appear; the toggle piece means, when I click, it shows if it is not showing; if I click again, it hides if it is showing.0525

Toggle means just go back and forth, basically.0537

The same thing with this lower one: click to make it show; click to make it fade just a little bit.0540

These are some cool effects you can add (appear and fade) to an on-click Javascript event; and we did not write one bit of code--all we needed to do was make a couple of clicks, and we are all set in Dreamweaver.0548

Just make sure, when you use these, that the Spry Assets folder that Dreamweaver told you about gets uploaded to the Web server.0563

What we really did was: we added some Spry effects to our web page, making images fade and appear very easily, using Dreamweaver.0572