TRIX

JUMP MENUS

These cute little link devices create drop down menus that act as links, but you can't really design them.

Set the Insert panel to "forms" and click on the Jump Menu option. You'll get a dialog box where you can list the contents of your menu and attach the relevant URLs to each item. Use the + button to add an item, type the name for it, and either type in or browse to the file you want to link to.

If you type things in the wrong order, select the item you want to move and use the up and down arrows to put it where it belongs.

When you're finished, click OK. What you see in your document isn't very interesting, but if you preview it in your browser, you can see how (and if) it works.

To edit the menu, select it and press the List Values button in the properties palette.
Set its position on the page by creating a CSS rule.

POP UP MESSAGES

Pop up messages can be annoying, but they can also come in handy. Here's how to make one.

You need to use the Behaviors panel—open it from the Window menu. It's tabbed with the Attributes panel in a set called Tag Inspector.

If you want text to trigger the event, select the word(s) in the document, and in the Properties pane, type "javascript;:" in the link field (no quotes). Or, select an image.

In the Behaviors tab, click on the + sign at the top. Halfway down, you'll see the option to create a "popup message." When you select that, a dialog box opens where you type the message you want to appear when someone clicks the link.

Check the user behavior that will trigger the popup message; if you want it to be something other than what appears, double-click it to access the other options.

Click OK and test it in your browser.

CREATING A NEW BROWSER WINDOW

There may be times when you might want a viewer to click on a link and have that link open in its own, personal window. This is easy to do.

Select the type or image you want to act as the trigger to open a new window, and type "javascript:;" in the link field of the property inspector.

Click on the "add behavior" plus sign in the Behaviors panel, and select Open Browser Window from the list.

In the dialog box that pops up, click the browse button and navigate to the file you want to display in this new window.

Specify the dimensions, and check any attributes you want that window to have. Naming each window is a good idea, so you won't get duplicates of it opening all over the place.

When you click OK, note in the behaviors panel, the action may be "onMouseOver," rather than "onClick." If you want this window to open the minute your page loads, leave this as is.

Otherwise, select the text or image and change "onMouseOver" behavior to "onClick" in the Behaviors panel. Double-click the behavior to access the popup menu where you can change the behavior to something more appropriate.

Very cool.

But wait, there's more! When you tested this in your browser, you probably noticed that the new window opened just slightly down and to the right of the regular browser window. This is the default position. To make your new window open in a specific place from the top left of someone's monitor, you can either specify the position in the Open Browser Window dialog box, or get into some HTML coding.

To use the Open Browser Window dialog box, double click the Open Browser Window text in the Behaviors panel. Place your cursor after the height you entered originally and type:

top=50, left=50

Then close the dialog box.

Switch the view to either "split" or "code" at the top left of the document, or open the Code Inspector from the Window menu. Locate the code for the link to the new window:
MM_openBrWindow(theURL,winName,features top=50, left=50)

Knowing where it is, or where it needs to go, in the HTML code is important if this is something you'll be doing on a regular basis, or if you need to tweak the position a bit.

If you want to add a "close this window" link or button, open the actual HTML file that will display in the new window and either type the text or insert a "close window" image.

Select it and type this in the link field of the Properties pane:

javascript:window.close()

Nice!!

iFRAMES

iFrames are a pretty nifty option if you want the page to remain the same with just one portion changing from time to time, depending on what the viewer wants to see.

The contents of an iFrame are defined in separate HTML files. The main, or "master" page has an area set apart using a <div> tag, and inside that are the <iframe></iframe> tags used to define the actual area that will display the external HTML file(s).

What pops up in that space right away is triggered by the file that's specified in the original HTML code ("firstcontent.html). Additional content changes are triggered by links in the "master" file.

<div id="change">
<iframe src="firstcontent.html" name="inline" align="left" scrolling="auto" frameborder="0" width="80%" height="400px"><br />this is where the iFrame will go</iframe>
</div>

Note that the first piece inside the <iframe> tag is a source file that will load automatically ("firstcontent.html"). The second piece is the name of the iframe area—"inline."

As you code other links to replace the original content, you'll use this name as the target for the next HTML file so it displays inside this defined space.

The name for the iFrame can be anything you want, and you can create a blank HTML file to display first if you don't want actual content to appear right away.

YOUR TURN

Open a new blank HTML file in Dreamweaver and set the view to Split. You'll be doing some hand coding in thie exercise.

In the design side, se any text you may have started to develop for your site, or lorem ipsum placeholder text, to create the first paragraph.

In a second paragraph, just type "the iFrame will go here."

In a third paragraph, type "here are the links to trigger more iFrame conent."

You're just doing this so you can create the <div>s needed to set things up.

On the code side of this file, create a "wrapper" <div> to surround everything between the <body> tags.

<body>
<div id="wrapper">
<p>Random text just to create an introduction area</p>
<p>the iFrame will go here</p>
<p>here are the links to trigger more iFrame content</p>
</div>
</body>

Now we can separate these three paragraphs into separate <div> areas.
In design view, select the first paragraph, and then use the Insert panel to add a <div> tag. Select "wrap around selection" and give it an ID name. You don't have to worry about setting up an new CSS rule just yet, so click OK.

Do the same for the next two paragraphs—one <div> for each.

<body>
<div id="wrapper">
<div id="intro">
<p>Random text just to create an introduction area</p>
</div>
<div id="inline"><p>this is where the iFrame will go></p>
</div>
<div id="links"><p>here are the links to trigger more iFrame content</p>
</div>
</div>
</body>

One way to do add the <iFrame> tag is by using the Insert > Tag menu option. From that submenu, choose Page Elements, and then iframe.

You will be presented with a series of dialog boxes where you can specify the height, width, and name options. But, before you can fill those out, you really need to understand how that information is used, so hand coding is actually easier.

Just after the <div id="inline"> tag, in code view, add this:

Note that you need to delete the placeholder text that you put there originally. You can call the src file anything you want—just remember what you call it as you'll be using that name for the next HTML file you're going to create.

Save this file—call it master.html so you know which one controls the iframes. Create a new folder first, so you can save this and the other files that will display in the iframe area all in the same place—it keeps things much more organized.

Then open a new blank HTML file.

Add some placeholder text and an image, then save the file using the same name you used in the code above.

Toggle back to the master.html file and test it.

Nice, right?

Create two additional iframe content files that include text and images and save them.
Back in the master.html file, replace the text in the third <div> ("here are the links to trigger more iframe content") with words that will act as links to open the second and third content files you just created.

Highlight one word and use the Properties panel to select one of the new HTML files. In the Title field in the Properties panel, be sure to add the name of the iframe, which is "inline" (no quotes). If the link and title options are not available, be sure to toggle from the CSS version of the Properties panel to the HTML version.

Do the same for the second link text. Then save and test the master.html file.
Now that you know the parameters needed to define an <iframe> area, yfell free to use the Insert > Tag option mentioned.

Take some time now to try out the other tricks covered in this section as well!