Adding JavaScript in Dreamweaver
In this video I’m gonna show you the built-in JavaScript behaviors in Dreamweaver...
Download everything we made in this video (ZIP)
Hey everybody, Greg Davis here. In this video I'm gonna show you the built-in JavaScript behaviors in Dreamweaver.
First, I'm gonna show you how to create a JavaScript pop-up window, and then I'm gonna show you all kinds of cool stuffs that you can do with the Dreamweaver JavaScript behaviors.
So, let's get started! I'm gonna use THIS gallery page from my previous video.
First, I wanna show you how to create a pop-up window, so I SELECT an element on this page, like this SECOND image.
And let's GO under Window, and SELECT Behaviors.
And now, we have got THIS panel here, just select Behaviors.
And to add a behavior, simply CLICK this little plus button.
And we have quite a few options here. I'm gonna explain them to you in just a bit, but first, let's create a pop-up window real quick.
Just SELECT: Open Browser Window.
And we need to choose a URL to display. I just BROWSE my second image.
And my image is 500px wide, 500px tall, but I GIVE it some more real estate, like 520, by 520.
And I ALLOW them to have their "Scrollbars as needed" just in case.
I HIT Ok.
And you can see the behavior HERE, that is added to your selected element. You can CLICK it, and you can go back to edit it if you want.
Now, this image is also linked to THIS 2.html page.
But since I'm gonna use a pop-up window, I don't want users to go to that page, so I PUT a hash tag in the link
And this is because I want the image to be a link, so people know they can actually click it, but I don't want them to go to that page. I just want the pop-up window to show up.
Alright, let's PREVIEW it in a browser.
YES, save changes.
And now when I CLICK that image, I get THIS pop-up window. Awesome!
Let's GO back to Dreamweaver.
And let me show you what else you could do with the JavaScript behaviors in Dreamweaver.
I just CLICK this plus button again.
And you can Call a JavaScript.
So if are limited with what you are able to do here in Dreamweaver, you can bring in your own JavaScript and you can call it.
You can Change a Property.
You can use this behavior to change the value of an object's properties. For example the background color of a div, or the action of a form.
You can Check Plugin, to make sure that the user has the correct plugin.
Then you've got some Effects, now, these are spry effects. You can have a Fade, or Blind, or Grow, or Shake effect.
You can Go To URL, and this is a bit left over from the frame's day.
You can Open a Browser Window, which is what we just did. A pop-up window, or a new browser window.
You can also have a Popup Message. I see people use this on optin pages, where they have an image, that looks like a video to play, and you click it, and you get a popup message saying "Hey, if you wanna watch this video, enter your email address below, and I will send you the video via email." So, you could use this on optin pages.
You automatically Preload Images anyway
You can Set Text of a Container, or a Status Bar
You can Swap Image. This is just a basic rollover for your swap image.
And it's already gonna Restore.
Then you can Validate a Form.
And of course, you can Get More Behaviors. So you can go to Adobe's website, and you can get more behaviors.
So that's it for today. I hope you learned something. I hope you enjoyed it. Check out my website EasyWebDesignSystem.com. Thanks a lot for watching, and see you in the next video. Bye!
Next video:
Send Email with a Web Form>>>All videos in recommended learning order:
How to design a website using Adobe Fireworks>>>
Building a Website Start To Finish With Dreamweaver>>>
How To Embed a YouTube Video On Your Website>>>
Floating Div Tags in Dreamweaver>>>
How To Create a Table in Dreamweaver>>>
Building a Web From in Dreamweaver>>>
Dreamweaver CSS Website Layouts>>>
Creating a CSS Drop Down Menu in Dreamweaver>>>
Creating a Spry Menu Bar in Dreamweaver>>>
Creating Spry Tabbed Panels in Dreamweaver>>>
Creating a Spry Collapsible Panel in Dreamweaver>>>
Working with the Spry Tooltip Widget in Dreamweaver>>>
Creating a Web Photo Gallery/Album in Dreamweaver>>>