I am using the term pop-up window. In the behaviors palette, Dreamweaver refers to this JavaScript function as Open Browser Window. I’ll use the Browser Window reference for clarity in this section but I will continue to use the term Pop Up window throughout the text. As I have state previously, using Browser windows to isolate your work is an effective design strategy.

Here are few items of importance for you to consider when working with the Open Browser Window Behavior: Pop-up windows should typically be smaller than the Web page that launched it. It does not have to be, but it makes good design sense to apply the idea. These sizes can vary. Here are a few suggestions.

Try 600 x 400 for showing off graphics and image related work. Use 400 x 300 for smaller work that requires smaller windows. Try 600 x 800 for long text-based pages such as an interactive Web resume. Let’s use the background color white. Each of these pop-up windows has a unique link address (URL) that links to a distinct HTML page that you must create separately (Towers, 1999).

What this means to your portfolio is that you must create a separate page for each “piece of work” that you put into the portfolio. You are probably thinking that this will complicate and lengthen the production process. Actually, it will shorten it. You can use your flowchart to assume the number of pages needed for the work going into the Web portfolio. Work on one page until you are completely happy.

Then use Save As to save the page again and again as a template for each piece of work. The pop-up window should be kept simple with minimum graphics and text. Navigation should be included but it can most definitely be text-based. The layout can consist of a few strategically placed layers that will contain a work layer and a navigation layer.

No other content is needed. We do not want to distract the user away from our content. In addition, we use other techniques inside the pop-up windows such as jump menus and named anchors. Both of which we spoke about in previous sections.

Apply the Open Browser Window Behavior

This JavaScript needs to be applied to a text or graphic button to trigger the event.

1.Highlight the text or graphic that will trigger the event and go to the behaviors menu.

2.Click on the + in the Behaviors palette and choose Open Browser Window. In the dialog box click Browse. This will open up the navigation widow showing your computer. Click to where your Web portfolio resides and choose the .htm page that you want to load in the Pop up window.

3.Set the event to onClick.

Calling JavaScript

You can “call” JavaScript with or without using behaviors. JavaScript can be typed directly into the link field on the Properties Inspector. We might call a JavaScript to perform some sort of function.

This web design tutorial is not about JavaScript, nor am I a qualified expert on the subject, but what I am about to explain to you is pretty simple to understand and very functional to have in your Web page design arsenal. When your user opens a pop-up window displaying your work, you want to be sure that you have an easy and intuitive method for the user to close the window and return to the home page.

You can rely on user to click on the window’s title bar and close the window by clicking the X. But, it’s kind of nice give the user a close button somewhere in your pop-up window page designs. This is where some simple JavaScript comes in.

Make a Close Button

In a pop-up window (don’t put this on your home page — it will close it!) make a new layer and type the words close window and apply a style (or make a new one for closeout). Highlight the text and in the Properties Inspector go to the link field and type: JavaScript:self.close(). Now preview the Web page in a browser by pressing the F12 key and Close the window. You must preview the page in the browser to execute the JavaScript and see it run. Congratulations, you have successfully written JavaScript.

You can explore some more on your own; for now this little JavaScript morsel will help you make your pop-up windows a whole lot more user friendly. To use Behaviors to call JavaScripts in Dreamweaver, type close again in the layer you made before. Highlight the text that will trigger the JavaScript (in our case, the close again button), now click on the + in the Behaviors palette and choose Call JavaScript. Set the event to onClick.

In the dialog box type self.close() and press F12 to preview in the browser. Thus, the same result as when we typed it into the Link field on the Properties Inspector. You use the close button with forward and back buttons in your pop-up windows to provide user navigation. This navigation system should be very discreet and should not interfere with portfolio work in any way.

The navigation should be in the same location on every page. Open browser window behavior dialog boxes (The open browser window behavior allows you to specify the size and window attributes. This is effective for controlling window sizes on pop-ups without having to write JavaScript code.)

The list of techniques provided earlier are only a small sample of the Web authoring techniques available using applications such as Macromedia Dreamweaver. Hopefully, you are beginning to understand how the Web portfolio design process involves some technical skills which will be beneficial to you throughout your professional career.

These techniques can be directly applied to any Web development process and are some of the most common items used by Web authors. By experimenting with them in your own Web pages you will begin to see how each component may enable user functionality or limit functionality.