You Don't Have to be a Computer Genius to...
Add Pop-Up Windows in Dreamweaver!!!
Previous Article<<<

Next Article>>>

You've created an impressive website. You have links to your favorite sites, articles you have written, a way for people to email you and lots of photos. Now you want to add some more advanced features. I recently decided to have some of the links on my website pop-up in windows instead of causing my visitors to leave my homepage. Do you know what I discovered...YOU DON'T HAVE TO BE A COMPUTER GENIUS TO ADD POP-UP WINDOWS IN DREAMWEAVER!!!

Here's a step-by-step guide. ONE DISCLAIMER, I WILL BE DESCRIBING THE STEPS I TOOK USING THE WEBHOSTING AND SOFTWARE SERVICES I HAVE CHOSEN. IF YOU HAVE DIFFERENT BACK-END SUPPORT, YOU WILL HAVE TO ADJUST ACCORDINGLY.

My Tools:

  • Windows 98
  • Web2010 as my hosting company, using UNIX
  • WS_FTPLE (32-bit) for my file transfer protocol
  • Dreamweaver 3.0 as my web page designing software

    Step-by-Step:

    1. Open Up Dreamweaver: First, I opened my Dreamweaver program and opened the pagewhere I wanted to add the pop-up link. My link was to driving directions to my office. I wanted the directions to pop-up in a window instead of taking my visitors to another page. I typed the word Directions on my index.html page. (Of course, your link can be from any page not just your first page.) Then, instead of typing in the URL to the page that contained the directions, I simply typed a "#" in the "Link" space on the bottom floating "properties" palette in Dreamweaver.

    2. Open "Behaviors": Then I went to the top of my Dreamweaver menu and clicked on "Window." Under that I selected "Behaviors." A "Behaviors" window popped-up and I hit the drag down menu where it said "Events for:" and selected my browser...4.0 and Later Browser.

    3. Click "+" Then I clicked the "+" button in the middle left of the "Behaviors" window. A pulldown of selections appeared. In the middle of the list I clicked "open browser window."

    4. Fill in Information on Open Browser Window: A formatting window popped-up. The first thing I had to fill in was the "URL to Display." I typed in the URL of the page I was linking to. In my case it was "directions.html." (Remember in Dreamweaver you shouldn't have to type the whole URL, it assumes the tier you're in. So, in "URL to Display" I didn't need to type http://www.mydomain.com/directions.html, but just "directions.html." I then typed in the width and height of my desired pop-up window. Finally I added some "bells and whistles" like a scrollbar.

    5. FTP new page: I saved my document and FTPed my new index.html page with the new pop-up link to my server.

    6. Troubleshooting: If your pop-up window doesn't work or you want to change the specs, you'll have to go back in to check the "Link" on the bottom floating palette and the specs in the "Behaviors" window again. If your pop-up isn't working, first open the page in Dreamweaver where your link is. In my case it was in index.html. Make sure the Link on the bottom floating palette has a "#" and not the actual URL of the page you want linked. Next, open the "Behaviors" Window. IMPORTANT: When you open the "Behaviors" window, there should be a line under Events that says "onClick" and under Actions that says "Open Browser Window." If that line is not there you will have to play around in the actual source code and make sure your cursor is nested within the <a href> tag or somewhere that triggers that line. When that line does appear, click on "Open Browser Window" and your previous selections should pop up. Make sure the "URL to Display" is correct and change any other options you want. Save the document again and FTP it your the server. NOTE: At the top of your html page, the "pop up" window mechanism will automatically write javascript to the top of your page...
      <script language="JavaScript"> <!-- function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </script>
      This could be a problem if you are using server side includes. See below...

    7. Server Side Includes: If you are using Server Side Includes, you will need to cut and paste the above Java Script at the top of your "header" page (i.e., the page that has your navigation and banner) below the meta info but within the </Head> tag, or in the "content" page, directly after the server side include command. This should allow your pop-up window to function properly.

    Copyright 2000-2001 Marlene Hollander. All rights reserved.