Video: Opening a new browser window

In this chapter, we're going to look more closely at behaviors in {italic}Dreamweaver.{plain} We saw a little bit of taste of the Behaviors panel in the chapter on rollovers, when we were creating our disjointed links, we saw we could come in here, and choose a behavior to create these complex rollovers. Again, behaviors is the term used to describe the pre-built scripts written in JavaScript that are available in {italic}Dreamweaver{plain} that extend XHTML to do things that it can't do on its own. {italic}Dreamweaver{plain} ships with a whole slew of behaviors that allow you to do all kinds of cool things such as, open a browser window in a smaller window, or even detect the version of a user's browser.

In Dreamweaver CS3 Essential Training, instructor Garrick Chow delves into the many powerful features of the latest version of this powerful web design application. He covers everything from the simplest basics of using Dreamweaver CS3 to applying it to develop a fully interactive, accessible site. Garrick explains the new interface features, and demonstrates how to create, edit, manage, design, and publish a professional website with Dreamweaver CS3 and complementary applications. Exercise files accompany the training.

Opening a new browser window

In this chapter, we're going to look more closely at behaviors in {italic}Dreamweaver.{plain} We saw a little bit of taste of theBehaviors panel in the chapter on rollovers, when we were creating our disjointed links, we saw we could come in here,and choose a behavior to create these complex rollovers. Again, behaviors is the term used to describethe pre-built scripts written in JavaScript that are available in {italic}Dreamweaver{plain} that extend XHTML to do things thatit can't do on its own. {italic}Dreamweaver{plain} ships with a whole slew of behaviors that allow you to do all kinds of cool thingssuch as, open a browser window in a smaller window, or even detect the version of a user's browser.

It is possible to even further extend {italic}Dreamweaver{plain} by downloading additional behaviors,and installing them into your copy of {italic}Dreamweaver. {plain} In this chapter, I want to give you a brief overview ofsome of the most popular, and useful behaviors that you can find right here in {italic}Dreamweaver.{plain}Let's start out by defining a new set of files. I've copied the chapter 14 behaviors folder to my desktop.I'll go head, and define that as a site. I'll call it "teacloud 14", and we'll select that folder.Ok, so, here are the files we're going to be working with. Let's open up the file inside ourproducts called"kettlesandteapot.html". The first behavior I want to show you is a behavior called "Open Browser Window".

This is for times that come up when you just can't cram everything into a single web page.For instance, maybe you have more information about one of your products, but you don't want to complicatesimple design by adding a whole bunch of information right onto the same page.For example, on this page, we have the three teapots carried by a teacloud here, and maybe I'd like to havea larger version of each one of these photos so that people can get a closer look at these pictures.Actually, we do have these pages already created inside the kettlesandteapots folder here.For instance, this Teacloud Azul photo here, if I double-click azul.html, we have a simple page with the large versionof the teapot photo, and the name of the product down here. I could simply create a link from this image to this page,but then users would have to click the back button in their browsers to get back into the main product page,or I would have to put up bunch of navigation on this page to help get them there. Instead what I'm going to do is havethis page pop-up in its own smaller browser window on top of the main products pageso, that way once people are done looking at the larger version of the image, they can close that window,and still be looking at this main products page. Let's take a look at how we do this. I'm going to come in here,and select that image. Now, I'm going to show you two methods for attaching this Open Browser Window behavior.

Commonly, you can come in here, and click an image that you want to use to trigger a window to open.Then come over here to your Behaviors panel, and again if you not see your Behaviors panel, go to the Window menu,and choose Behaviors, and in here we can click the little plus sign (+) to add a behavior.You can see we have a whole list of built-in behaviors to choose from. In this case,I'm going to choose Open Browser Window. That gives me the Open Browser Window dialog box.The first thing it's asking me is what page do I want to display, what's the address of the page I want to display?I can type the address in here, but it's much easier to click Browse, and then find the page that I want to open up.

There it is, click Choose. Next, it's going to ask me for the Window width, and the Window height.I can actually determine the dimensions of the window that's going to pop open.That way I don't have this huge Browser Window Open covering the entire products page.I can actually make this a little bit smaller. The actual dimensions you use,are going to take a little bit of experimentation, but you can always come back in here,and edit the information you type in here later. I'm going to guess 530 x 350 pixels tall.Next we have a selection of six different attributes we can have in the browser window that we're opening up.

By default, these are all unchecked meaning, when the browser window opens, it's not going to havea Navigation bar meaning, there will be no back, or forward buttons. It's not going to have a Location toolbarmeaning, that the Address bar you won't actually see the address of the page. It won't have a Status bar,which is the area at the bottom of the window. No Menu bar, no Scroll bars, no Resize handles.Just by leaving these unchecked does not guarantee that some of these items will not appear in certain browsers.Scroll bars seem to always appear in {italic}Safari,{plain} whether you need them, or not.The status bar might appear in {italic}Firefox{plain} whether you have it checked, or not. I'm going to leave everything uncheckedfor now, and we'll see what happen. We want to give the window a name, and I'm going to call this teacloudazul.

The Window name provides a JavaScript reference, which is similar to an ID so, that the pop-up windowcan be manipulated. Meaning, if you create 10 different pop-up windows, and give them all the same name,they would all open using the same window, instead of each opening its own independent window.If you want each pop-up window to open in a separate window, make sure you give each window a unique name.There are the settings for my Open Browser Window behavior. I'm going to click OK,and notice the action that's been added here. It says "onClick Open Browser Window". Let's give that a try.I'm going to check this out in {italic}Safari.{plain} Click Save, and let's click on that teapot. It worked just like it was supposed to.

It opened up a browser window. It made it the dimensions we needed, and notice that the Scroll bar has opened up,and it looks like I have a resize button down here. And I sure do, I can actually resize this window.Even though we specified in {italic}Dreamweaver{plain} that we didn't want either of those attributes. {italic}Safari{plain} is actually ignoring that,and giving me those attributes anyway. If I check this out in another browser, say {italic}Firefox,{plain} click that link.Notice we have no Scroll bar, no Resize handle, but we do have a Status bar down here.You can see a lot of this is hit and miss depending on which browser you're using, but the most important part of all of thisis that it opened up our browser window, and that will be consistent across your various browsers.

Now, you might've noticed that when I clicked on this teapot image in both {italic}Safari,{plain} and {italic}Firefox,{plain} my mouse didn't turn intothat little pointing finger that usually indicates that you're clicking on a link. That's because I addedthis behavior directly to the image, and as far as the browser is concerned, it's doesn't know that this is a link.Let's go back to {italic}Dreamweaver.{plain} This is also a concern for older browsers too, because when youattach a behavior directed to an image, some older browsers don't honor that, and your pop-up window might not work.Let's do another example here. I'm going to click the Earl's Grey teapot, and before I add a behavior here,I'm going to add a link by typing a hash mark, or a pound sign, (#), and again, this is called a "null link",which turns the image into a link, but doesn't actually take you anywhere. I'm going to add that, and now that I'vedone that, I'm going to click the Tag, which is the anchor, or link Tag to select that, and with that selected,I'm going to attach that behavior to the link Tag instead of the image. Here we're going to browse for the earlsgrey page.

Click choose, and again let's use the same settings here, 530 pixels by 350. We'll give this the name of earlsgrey.Click OK, and let's check that out. Notice now, I do have that pointing finger indicating to me that this is a link.This is an important detail to keep in mind, if somebody rolls over an image like this, and they don't see thatlittle pointing finger, they most likely will not realize that's clickable. Here, we recognize immediately thatthis is clickable so, we click on it. It opens up the Teapot page, and I can see the nice enlarged image.

When I'm done I can go ahead, and close that. Keep that in mind, if you want your behaviors to workas consistently as possible across both newer, and older browsers make sure to add the behavior to the link.Again, I'm going to select this image, add a null link, select that link, and add my Open Browser Window behavior,Browse for the page "simpleelegance", again, we'll use the same dimensions. That's just a detail to keep in mind too.By using the same dimensions, you're giving your users a consistent experience. We'll call this one "simpleelegance",click on OK, save our page, and let's test that out in our browser. Again, you can see the pointer finger. Click on it,and there's my page. If you want to go back, and fix the behavior on this image where we added the behaviordirectly to the image, you're supposed to be able to come up here in {italic}Dreamweaver,{plain} and where it says "onClick",we have the ability to select " onClick", which if I look at any of these, that's the behavior that's set upfor these images here. For some reason, in {italic}Dreamweaver{plain} this isn't quite working the way it's supposed to.

I get this message saying the " onClick is not a valid event for the IMG tag", which is true,but it's supposed to change this for me. So, what I'm going to do instead is just with this behavior selected,I'm just going to remove that event, and now I can come back to the image, and just redo this. I'm going to add the #.Now, I'll add my behavior. Browse for the azul, add my dimensions, add a Window name,and now I have fixed that behavior attachment. Save that, and we can test these all out. There's one, click another one.

Notice these are all opening in separate windows because they all have different names.Let's close that so, you can see each one of these with a separate name so, they all opened up in separate windows.Again, if you want them to open up in the same window, just give all three windows the same name.That is the Open Browser Window behavior, which comes built into {italic}Dreamweaver. {plain}You might find this very useful,not just for situations where you want a larger picture to open up, but maybe even in situations where for instance,you may have a list of our policies on a page, and instead of taking them to a new page on our policies,you can just have a policy page pop-up in a smaller window, they can read through them, and just close that,and you'll still be looking at the original page. Just keep that in mind,and I'm sure you'll find plenty of uses for the Open Browser Window behavior.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.