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:
-
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.
- 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.
- 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."
- 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.
- FTP new
page: I saved my document and FTPed my new index.html page with the
new pop-up link to my server.
- 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...
- 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.