Create Pop-up Window in Dreamweaver (Behaviors Panel)

This is an old post demonstrating JavaScript Behaviors.  The preferred method now is Modal or Lightbox windows.

Creating a JavaScript Behavior

1. Insert an image or type some text on your page.
2. Highlight text or select image by clicking on it and go to the Link field in your Properties Panel as in (Fig. 1).



Fig. 1

3. Browse for the file or type the full URL: http://example.com. 
4. Go to the Behaviors Panel and hit the plus sign (+) to add a new behavior (see Fig. 3)
5. From the menu, select Open Browser Window (Fig. 2)
6. Browse to file or type the URL (Yes, a 2nd time).
7. Set the height, width and other optional attributes for your pop-up window.
   



Fig.2

8. Hit OK.
9. Verify that the behavior's trigger event is <A> onClick.  If it's not, click inside the event box to show other trigger options.



Fig. 3

10. Go back to the Properties Panel (Fig. 4) and replace the first URL in the link field with javascript:()  This makes the primary link into a null link so the page doesn't open twice.



Fig. 4

11. Save your page and preview in browsers.

That's all there is to it.  Hope you enjoyed this brief tutorial.

Working With Dreamweaver Templates (.dwt files)

PART 1 -- Template Creation

1. Create a page with all the site wide elements (common header, footer, sidebar, etc..) that you will need for your project.   This requires some careful planning even for small web sites.
2. Validate your code with the W3C code validation tools.
   CSS - http://jigsaw.w3.org/css-validator/
   HTML - http://validator.w3.org/ 
3. Test your prototype page in all major browsers. 
4. When you're completely satisfied with the page layout, SaveAs Template.   DW will save this as a .dwt file in a site folder called Templates.
5. DW will ask you to add Editable Regions for stuff that will change from page to page.   Do this and hit SAVE (Ctrl+S).
6. Close your Template.dwt file.

PART 2 -- Home Page Creation

1. File > New  > Site Templates.  Select your site from panel #2.  Select your Template.dwt file from panel #3.  Hit the Create button.
2. This is known as a child page.  You can only edit content within editable regions.  Everything else is locked or grayed out.
3. SaveAs index.html (your domain home page) in the root of your local site folder.

PART 3  -- Creating Other Site Pages

1. Repeat PART 2 for each additional page required.

PART 4  --  Editing Templates

1. Open your main TEMPLATE.dwt file and add a navigation menu with links to your site pages.
2. SAVE (Ctrl+S).
3. DW will ask if you want to populate changes to child pages.  Hit yes.
4. Publish all site pages to your server.

PART 5

If you ever need to edit your TEMPLATE.dwt file, Repeat PART 4 and re-publish all child pages.