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!

Opening a New Window Behavior

  • We are going to open a new window showing a larger version of an image when we click on the smaller version of the image
  • We will use Dreamweaver Behaviors to create the JavaScript code to do this
    • Create a new web page & name it open-window.html
    • Add the barcelona1-thumb.jpg image to the page & give it an id of thumb
    • Open the Tag Inspector & choose the Behaviors button
    • Click the + sign and choose the Open Browser window option
    • Insert the correct information, choosing barcelona1.jpg as the image to show
    • We will set the window size to slightly larger than this image to allow for the various toolbars
    • Give the window a name of newWindow & click OK
    • Preview this behavior in the browsers & click on the thumbnail
  • You should see another window popup with a larger version of the image in it

Opening a New Window Behavior

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
  • Creating a New Browser Window Behavior 0:24
    • Insert Thumbnail Image
    • Image Tag Properties
    • Add Open Browser Window Behavior
  • Save and Preview in Browser 5:40
  • Modify Open Browser Window Behavior 6:46
  • Save and Preview in Browser 7:11
  • Summary 9:09

Transcription: Opening a New Window Behavior

We are now going to take a look at a new behavior, and that is opening a browser window; and we are going to let Dreamweaver do all of the work for us.0000

This is a type of interactivity you can add to your web page; and what I have is a small image that we are going to click on, and a new, larger version of that image will pop up.0011

Let's get started on creating a new browser window behavior.0025

I am going to hit Ctrl or Command, N to create a new page; I am going to go ahead and plug in some text here, and I am going to say Open a New Browser Window--that is the effect we are going to be adding.0030

I'll copy that and paste it into my title area; it is usually good to add a title so we don't end up with all of these untitled documents; and this will become a Header 1 by using Ctrl+1 with my cursor in the line.0047

I'll go ahead and hit Enter; and this is where I am going to place my image.0064

Let me show you what we are going to do: I actually have two images inside the Images area.0069

So, I'm in the Assets panel, and I have chosen the Images icon in the upper left of this panel; and I have a thumbnail image, which is a small version of an image.0076

The idea is: when the user clicks on this small version, they are going to end up with a big version in a new window.0089

Let's take a look at how to do this.0097

Now, up in my Tag Inspector, I have the Behaviors area; and in case you don't have this open, I'll go to Window and go down to Behaviors; and that is right where I am.0100

Now, we always add a behavior to an object on the page; so, first of all, I need an image on the page to add this to.0114

I'll move this up just a little bit; and my thumbnail image I am going to drag out.0123

So, tahiti-park-thumb is the image I am going to work in; it is a small version of an image--I am going to drag it out and just say "Park in Tahiti."0129

This is a park in the main part of downtown in Tahiti.0141

The idea is: that is a small version of an image, and when the user clicks on it, they get a bigger version.0147

In the ID area, I am going to name this tahitiImage; and I know that i and uppercase I looks kind of funny--when I am working in Javascript, I tend to avoid using dashes; I could use an underscore between these, but I understand what that specific name means, and Dreamweaver will, as well; so it shouldn't be a problem.0155

Now, that is the image I want to have the user click on to pop up a new one; so what we are going to do is go up to the Behaviors panel to do it.0182

I'll click the + sign, and I am going to go down to Open Browser Window.0193

Now notice, I have this image selected before I do that...so Open Browser Window, and this dialog box is asking me, "OK, when the user clicks, what page or what image do you want to show?"0199

Now, I certainly could create a new web page here to browse out to, but I am not going to do that; I am just going to browse out to the image itself.0216

I'll scroll down, and I don't want the one that says thumb (that is the one on the page already); I want the larger version; so I'll just double-click tahiti-park.0226

Now, I haven't really shown you this message much throughout the course, so I want to talk about this; what this means is: I am adding images and behaviors to my page, but Dreamweaver doesn't know where this page is going to be located, because I haven't saved it.0238

And sometimes that can cause some problems in Dreamweaver figuring out the paths between things.0257

This is Dreamweaver reminding you "Please save!"; so I'll say, "OK, I will save"; you can see, in the URL I get this funny file, and that is what Dreamweaver drops in when it doesn't know where my page is going to be stored.0265

In my window width and height, if I didn't add anything, it would open the exact same size as the original window.0282

I want to limit the size to smaller than the original window, meaning this page here; I don't want a full-size window to open.0291

I am going to set a width--now, this image is 375x500; I am also going to add resize handles and scroll bars; and down here, my window name is going to be...let me do...let's do tahiti-thumb so this is associated with the tahiti-thumb image.0300

I'll click OK; you can see, I now have a behavior added: when the user clicks this image, the browser window will open.0329

Let me save this; and I'm going to save it as open-window (I'm trying to keep my page names short); so now, Dreamweaver is happy because it can plug in the correct path to the image and add the effects correctly.0340

Let's put this out in Safari and see what happens.0359

There is my page: when I click on the window, notice, my image pops up.0363

Now, I am able to resize it, because it's not quite fitting correctly; what I have to keep in mind, when this image opens, is that quite often, you need it just a little bit bigger than your original image.0370

Browsers usually add an offset; there are also little scroll bars that can happen--and that type of thing.0385

So, a good rule of thumb is to start with about 20 pixels larger on both dimensions of the image, and then you can try it in the various browsers and see how it ends up and if you need to add more or less.0392

That is Safari.0407

Let me make this a little bit bigger: so I am going to select the image so I can get to the behavior; I'll double-click where it says Open Browser Window--that will open the dialog one more time for me; and I am going to make this 20 pixels larger in both width and height.0408

I'll click OK and save this page, and we'll go out to another browser.0430

Let me put it into Internet Explorer; now, this is that older version; I want you to see if it works or not.0435

I put my cursor on it; I click; notice, it works very nicely.0443

This is the browser offset I was talking about.0448

Now, I can open this up, but you can see, it might even be just a little bit small at 20 pixels; so I'll leave it up to you if you want to fine-tune that or not...but you can see, this works great, even in Internet Explorer 8.0452

I click on it; the new image pops up; you can decide if you want scroll bars or not.0468

It says scroll bars as needed; and this is needed, because it is not quite large enough for my image; so it would be good to add a little more space here.0476

With the image selected, I am going to add a little bit more: let me do 405; so I'll add 10; and I'll do 530 over here.0487

That should prevent those scroll bars from popping up; and I'll show you this in one more browser--let's take a look at it in Chrome.0499

I'll go ahead and click on the image, and there is my new image; now you can see, Chrome and Safari don't add that offset, so there is a little more space here.0509

But my other browsers are a little bit different: let's put it back into Internet Explorer and see what happened, since that was where it seemed to need the new size.0520

And you can see, I do get the scroll bars still--it is just not quite wide enough--but I am not going to be concerned about that.0531

The user, if they want to, can open it up--that is the resize feature; but this is a proper size for all of the browsers.0539

That is how you add the Open Browser Window behavior to an object on your page; what I did was made this image a small version (a thumbnail); when the user clicks on that image, they get the larger version of the image in a new browser window.0550

I have taken care of limiting the size of that new window.0568

That is the Open New Browser Window behavior in Dreamweaver.0572