Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Opening a new browser window


Dreamweaver CS3 Essential Training

with Garrick Chow

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.
Expand all | Collapse all
  1. 1m 11s
    1. Welcome
      1m 11s
  2. 20m 56s
    1. HTML vs. XHTML
      3m 3s
    2. What is CSS?
      3m 48s
    3. What is XML?
      2m 10s
    4. What is DHTML?
      1m 9s
    5. What is JavaScript?
      1m 22s
    6. File naming conventions
      3m 22s
    7. What is an index page?
      6m 2s
  3. 46m 11s
    1. Setting up your workspace
      2m 38s
    2. The Welcome screen
      4m 10s
    3. Windows and Mac differences
      3m 17s
    4. The Insert bar
      4m 37s
    5. The Property Inspector
      1m 49s
    6. The Document toolbar
      6m 6s
    7. The Document window
      9m 10s
    8. Panels and panel groups
      6m 58s
    9. Saving workspace layouts
      2m 21s
    10. Defining a default browser
      5m 5s
  4. 24m 57s
    1. Defining a site
      9m 4s
    2. File and folder management
      3m 11s
    3. Understanding path structure
      3m 16s
    4. Adding content to a site
      6m 6s
    5. Creating a site map
      3m 20s
  5. 38m 37s
    1. Creating a new blank site
      6m 0s
    2. Creating and saving a new document
      7m 54s
    3. About DOCTYPE
      3m 59s
    4. Inserting images
      9m 26s
    5. Inserting text
      3m 34s
    6. Aligning text and images
      4m 8s
    7. Inserting meta tags
      3m 36s
  6. 45m 54s
    1. Link basics
      6m 4s
    2. Linking with Point to File
      5m 18s
    3. External links
      4m 15s
    4. Creating email links
      5m 48s
    5. Named anchors
      7m 36s
    6. Linking to a file
      7m 34s
    7. Image maps
      9m 19s
  7. 1h 7m
    1. About CSS
      4m 51s
    2. Anatomy of a style sheet
      4m 9s
    3. CSS and page properties
      10m 11s
    4. Moving an internal style sheet to an external style sheet
      6m 45s
    5. The CSS Styles panel
      3m 48s
    6. CSS selectors
      2m 37s
    7. Type selectors
      12m 13s
    8. ID selectors
      10m 21s
    9. Class selectors
      5m 41s
    10. Creating rollovers with pseudo-class selectors
      7m 21s
  8. 42m 51s
    1. CSS vs. the Font tag
      2m 42s
    2. Formatting text with the Property Inspector
      8m 41s
    3. What measurement should I use?
      3m 15s
    4. Managing white space with margins, padding, and line height
      8m 34s
    5. Using font lists
      5m 45s
    6. Aligning text
      2m 46s
    7. Creating lists
      5m 7s
    8. Creating Flash text
      6m 1s
  9. 43m 14s
    1. About tables
      1m 27s
    2. Tables in Code view
      2m 36s
    3. Creating and adding content to tables
      7m 40s
    4. Changing table borders with XHTML
      5m 45s
    5. Coloring tables with XHTML and CSS
      6m 40s
    6. Aligning table content
      6m 39s
    7. Sorting tables
      3m 5s
    8. Setting table widths
      4m 48s
    9. Creating rounded-corner tables
      4m 34s
  10. 28m 20s
    1. Dreamweaver's layout tools
      3m 8s
    2. Tracing images
      4m 57s
    3. Adding AP div tags
      7m 28s
    4. Working with Layout Tables
      6m 55s
    5. Adjusting table widths and nesting tables
      5m 52s
  11. 16m 19s
    1. What is a device?
      3m 14s
    2. Attaching a printer-friendly style sheet
      3m 5s
    3. Styling for print
      7m 41s
    4. Adobe Device Central
      2m 19s
  12. 29m 51s
    1. Rollover rules
      3m 30s
    2. Creating simple rollovers
      5m 36s
    3. Creating disjointed rollovers
      7m 12s
    4. Creating navigation bars with multiple states
      9m 20s
    5. Creating Flash buttons
      4m 13s
  13. 26m 30s
    1. Viewing the code
      6m 8s
    2. Editing in Code view
      2m 59s
    3. The Code toolbar
      5m 11s
    4. Working with Code Collapse
      4m 27s
    5. The Quick Tag Editor
      2m 20s
    6. Working with snippets
      5m 25s
  14. 32m 42s
    1. About forms
      3m 23s
    2. Adding text fields
      9m 51s
    3. Adding checkboxes and radio buttons
      5m 36s
    4. Adding lists and menus
      6m 4s
    5. Submitting form results
      3m 23s
    6. Styling form elements with CSS
      4m 25s
  15. 23m 16s
    1. Opening a new browser window
      9m 38s
    2. Creating a popup message
      2m 49s
    3. Validating text fields
      2m 42s
    4. Getting more behaviors
      7m 2s
    5. Removing extensions
      1m 5s
  16. 14m 57s
    1. External image editor preferences
      3m 18s
    2. Built-in image editing tools
      3m 10s
    3. Roundtrip editing from Dreamweaver to Fireworks or Photoshop
      4m 39s
    4. Copying and pasting
      3m 50s
  17. 34m 14s
    1. Templates in action
      5m 12s
    2. Creating a new template
      6m 36s
    3. Applying templates
      3m 36s
    4. Modifying a template
      1m 40s
    5. Adding repeating regions
      3m 27s
    6. Working with repeating regions
      3m 13s
    7. Adding optional regions
      3m 34s
    8. Creating a library item
      3m 47s
    9. Modifying a library item
      3m 9s
  18. 13m 1s
    1. Using the History panel
      4m 23s
    2. Saving History steps as commands
      3m 25s
    3. Using Find and Replace
      5m 13s
  19. 14m 40s
    1. W3C accessibility guidelines
      4m 6s
    2. Accessibility preferences
      1m 28s
    3. Inserting accessible images
      3m 1s
    4. Inserting accessible tables
      2m 52s
    5. Inserting accessible form objects
      3m 13s
  20. 26m 16s
    1. About media objects
      2m 6s
    2. Linking to audio and video files
      5m 56s
    3. Embedding audio and video files
      7m 7s
    4. Setting parameters
      4m 26s
    5. Inserting Flash content
      2m 37s
    6. Inserting Flash video
      4m 4s
  21. 28m 44s
    1. Getting site reports
      3m 34s
    2. Checking links sitewide
      3m 30s
    3. Signing up with Tripod
      6m 35s
    4. Entering remote info
      4m 13s
    5. Publishing your site
      5m 41s
    6. Updating and publishing pages
      5m 11s
  22. 43s
    1. Goodbye

please wait ...
Watch the Online Video Course Dreamweaver CS3 Essential Training
10h 22m Beginner Apr 16, 2007

Viewers: in countries Watching now:

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.

Garrick Chow

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.

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 of some 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 complicate simple 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 have a 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 version of 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 have this page pop-up in its own smaller browser window on top of the main products page so, 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 have a Navigation bar meaning, there will be no back, or forward buttons. It's not going to have a Location toolbar meaning, 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 unchecked for 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 window can 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 this is 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 into that little pointing finger that usually indicates that you're clicking on a link. That's because I added this 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 you attach 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've done 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 that little pointing finger, they most likely will not realize that's clickable. Here, we recognize immediately that this 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 work as 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 behavior directly 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 up for 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.

There are currently no FAQs about Dreamweaver CS3 Essential Training.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

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.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Dreamweaver CS3 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

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

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your 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.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts. provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now

A trusted source for knowledge.


We provide training to more than 4 million people, and our members tell us that helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

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

Sign up and receive emails about and our online training library:

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

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.