Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Opening a new browser window

From: Dreamweaver CS3 Essential Training

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.

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.

Show transcript

This video is part of

Image for Dreamweaver CS3 Essential Training
Dreamweaver CS3 Essential Training

129 video lessons · 86987 viewers

Garrick Chow
Author

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

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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

Congratulations

You have completed Dreamweaver CS3 Essential Training.

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


OK
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?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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:

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:

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.