Open Browser Window in Dreamweaver



Opening a separate page in a new browser is a popular feature and it is very easy to do. It is used to open HTML pages in a new separate browser windows.You can open them at the dimensions that you choose.

In this Tutorial we will go over the various options that Dreamweaver allows you to set for spawning new windows.

The first thing you will need is a clickable object on your original page. This could be an image or simply some text. Secondly, you will need another HTML document to appear in the pop up.

This first example will offer the viewer the option to open another window by clicking on the thumbnail to view a larger version.

First, highlight the text or thumbnail photo you wish to link from and enter javascript:; into the Link field of the Property Inspector.

Select the image or text that you wish to spawn the new window and click the + in the Behaviors palette, then select Open Browser Window. The dialog box below appears.

Browse to the HTML page you wish to open in a new window. Usually this will be a file you have created and will be on your own hard drive, however you can enter any URL you wish here.

Window width and height will be the new windows dimensions (in pixels of course). If you do not enter any dimensions here Dreamweaver will use defaults settings of 640x480.

Behaviors Palette

By default Dreamweaver assigns this behavior to the onMouseDown event. If it is not, you will need to change the behaviors to 4.0 and later browsers. Click small arrow, then Show Event For> 4.0 and Later Browsers. Then select the little arrow again and from the list select (onClick). This will force a little hand to appear when the user mouses over the image, and it will work in
Netscape without hitch.

For this example we are linking to lagunalake1.htm, and I have set the dimensions to 640x480.

Click thumb for larger version

As you can see there is quite a bit of excess empty space on the outsides, so we will reduce the windows size to make it look better. To change the new windows settings once the behavior has already been applied, Click on the photo in Dreamweaver and in the Behaviors Palette double click the behavior on either side of the arrow and the previous dialog box will appear allowing you to edit this behavior.

We will set the dimensions to 490x290. Since the exact dimensions of the larger image are 450x250 this will give the photo a 20px border of background.

Click thumb for larger version

We still have a problem. There is a 40px border at the bottom and none at the top. In order to get the symetrical border on "all" sides of the photo you must set the Top Margin and Margin Height dimensions to 20 in the HTML of the popup. (Modify>Page Properties). Once you do this you will have equal borders as in the example below.

Click thumb for larger version

Another option would be to have absolutely no borders around the larger image. You just set the Window Width and Height attributes in the dialog box to the exact dimensions of the image. Note here that the page margins have to be set to "0" on the larger image page so the image will be flush against the top of the window.

Click thumb for larger version


Exploring more options