James Reilly - reilly@jamesreilly.com - 310-379-2201
sec #4279, Thursday 6:30 - 9:35, room 108

Pop-up windows are used to display additional content in a new window rather than replacing the current page. The new window can have it's size and attributes (such as allowing the user to resize the window) set.

To have a link open a pop-up window:

1. Create and save the HTML page to be opened
2. Select the text or image in the page that will open the pop-up window
3. In the property inspector for the selected element, put the "#" character in the link box (or a named anchor - see discussion below)
4. Open the Behaviors window
5. Make sure that Dreamweaver is configured for the right version of JavaScript by selecting the "+" pull down>Show Events For>4.0 and Later Browsers
6. Using the "+" pull-down menu, select OPEN BROWSER WINDOW
7. In the resulting dialog, browse to the HTML file you want to display in the new window
8. Enter the width and height for the window
9. Select the desired browser window attributes. You should experiment with these checkboxes to see how they affect the display size, appearance, and features

Pop-Up Notes

• Explorer: You may have trouble previewing pop-ups with Explorer
  
• onClick event: Best to use the onClick event to make pop-ups. Other events seem to have trouble with placing the window in front of the current window, or showing a cursor change.
  
• Window name: If your site has multiple links that open pop-ups, and you want them all to be in the same window, you must put the same name in the "Window Name:" field in each open browser window dialog.
  
• Named Anchor: The "#" in the <A> tag will cause the launching window to scroll to the top of the page if you are positioned lower on the page. To avoid this, place a named anchor at the position of the pop-up link (INSERT>INVISIBLE TAGS>NAMED ANCHOR), and then make the link URL to that named anchor (e.g. "#popup" rather than a simple "#").

Cascading Style Sheets (CSS) are part of DHTML (Dynamic HTML) introduced in the 4.0 browsers. They enable the web designer to create text styles with characteristics such as font, size, and color. For example, the following text is enclosed in a new style class called "coolstyle" which has the following characteristics defined: font, size, bold, text color, background color, and underline.

Some text inside a css style called coolstyle

Cascading Style Sheets are definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

• Styles Sheets can redefine existing tags. For example, the <p> tag could be made to use the Verdana font with a specific pixel height (this is the case for the paragraphs on this page).
• Style Sheets can define new styles which can be applied to any text selection. This is the case with the <span class="coolstyle"> tag above, where the font, text color, background color, and underline are defined with a single style.
• The attributes of Style Sheets goes beyond the normal styling of HTML to include line height, leading, indent, background color or image for the styled selection, text weight, borders, and page breaks for printing (but not all of these features are supported in current browsers).
• Many of the styles defined in the CSS1 specification are not displayed properly inside Dreamweaver, and must be viewed in Netscape or Explorer.
• And of course, several of the style attributes display differently in Netscape and Explorer, or do not display at all in any browser.
  

1. Select TEXT>CSS STYLES>NEW CSS STYLE...
2. To redefine an existing tag, select REDEFINE HTML TAG, and select the tag from the pull down menu
3. To create a new tag, select MAKE CUSTOM STYLE, and give the new tag a name using the following rules:
   1. it should begin with a period
   2. the case of the characters is ignored
   3. it can contain only the characters A-Z, a-z, 0-9, and the dash "-"
   4. the underscore "_" and space " " characters are not allowed
   5. style names not following these rules will be ignored in some browsers
4. Select THIS DOCUMENT ONLY to create the style in the current document.
5. Select OK, and a dialog box will open with a series of formatting settings for TYPE, BACKGROUND, BOX, BORDER, etc. More information about each of these Style Definitions is available in the Dreamweaver Help.
6. Select OK from the Styles dialog box
7. Select DONE to complete the editing process
   

1. If you've modified a standard HTML tag with a new style, the style will automatically apply, and there is nothing to do beyond setting that tag in the normal way.
2. If you've created a new style, then:
3. Open the CSS STYLES window
4. Select the text you want to apply the style to and:
   1. Click on the desired style in the CSS STYLES window
   2. OR, you can do this by selecting TEXT>CSS STYLES>style
   3. OR, you can do this by using a right-clicking (pc) or control-click (mac) and selecting CSS STYLES>style

Note: CSS styles may not apply as expected to text inside of tables. You should preview in both Netscape and Explorer to verify that the text is formatting correctly. If not, you may have to apply the style to the table or the text within the table.

Note also that you can convert (in most cases) a web page with style sheets to traditional, HTML 3.0 compatible format by selecting FILE>CONVERT>3.0 BROWSER COMPATIBLE, and selecting CSS STYLES TO HTML MARKUP. Dreamweaver will create a new page that is as close as possible as the original, but that uses only HTML markup. Note that some CSS formatting (such as leading) cannot be converted to standard HTML.

The primary advantage of a frames based web page is that one part of the web page can stay fixed, while other parts of the page change. For example, a menu page can be fixed on the left hand side of the web page in a frame. When the user clicks on a new menu section, the menu remains, but the content on the right hand side of the web page changes based on the menu selection.

• In this example, frameset.htm tells the browser to display two frames: left_menu.htm and right_page1.htm. There is no content in the frameset.htm file. It only defines how the frames will be laid out in the browser window.
  
• left_menu.htm is a separate html file that contains the content for the left frame in the browser window. In the example, links in left_menu.htm target the frame on the right, causing a new HTML page to be loaded into the right frame when the link is clicked.
  
• right_page1.htm is a separate html file that contains the content for the right frame in the browser window.
  

These three separate HTML files, the Frameset and the two content html files, are all needed to show the one "page." The Frameset is never visible, but is the URL used to display this page.

Here is an example of a 2-frame design.

Here are the individual files that make up the frames:
left_menu.htm
right_page1.htm
right_page2.htm
right_page3.htm

Note that when you select different pages to be displayed on the right hand side, the displayed URL stays the frameset URL. This is one downside of frames, in that the user does not see the URL of the current page.

A major benefit of frames is the ability for a link in one frame to load a new HTML file in a different frame. For example, a link in the left menu frame can change the contents of the right frame. Targeting is the special method for making a link affect a different frame. By default, a link changes the content of the page or frame that contains the link. But you can target another frame for any link. In this case, the targeted frame gets the new HTML file specified in the link. To make this possible, each frame in a frameset must be named. Links with targets use these names to specify the frame where the new page should be loaded.

The frame names you use should be all lowercase, with no spaces. Note that there are several special target names that start the the underscore "_". You should not use the to name frames, but instead, use them in your target to do the following:

• _blank - opens a new browser window for the specified URL.
• _parent - this is appropriate to use if you have a frameset nested in another frameset. The specified URL will replace the parent frameset of the current frame.
• _self - This is the default if no target is listed. The specified URL will be placed in the current frame or, if there is no frameset, the specified URL will fill the current window.
• _top - clears the current browser window of all framesets, and fills the entire window with the new URL.
  

There are many files to keep track of when you use frames. This can be confusing, and means that you need to be very organized when saving, naming, and placing your files on the disk. A few suggestions:

• As soon as you have the frames formatted in Dreamweaver, save all the files: the frameset and each HTML file in a frame
• Save all the files in the same directory
• Name the files in a way that indicates where they go. For example, HTML files that go in the top frame should start with the word top. For example, top_titlepage.html.
• Keep in mind that if several different HTML files are displayed in a frame as a framed page is used, each file has a different name, and only one of them is displayed when the frameset page first opens.
• When you use FILE>OPEN IN FRAME... the frameset is updated to to use newly opened file as the default file for that frame. For example, if right_page1.htm was in the right frame, and you use FILE>OPEN IN FRAME to open right_page2.htm, the frameset will now open with right_page2.htm first. So if you are editing several pages within a frame, always use FILE>OPEN IN FRAME for the default page last. As an alternative, you can edit the other pages in a normal window outside the frameset.
• Once you've set the file names, you shouldn't normally use FILE>SAVE AS to resave your files. Many people make the mistake of writing over the different pages that are displayed in a frame by using SAVE AS.
  

In Dreamweaver, do the following:

1. In the Insert Toolbar, click on the FRAMES tab
2. Choose any of the preset frames layout. The blue box indicates the frame that will resize when the browser window is made bigger or smaller. The other frames are set to stay one size, regardless of the browser window size.
3. Save the frameset by selecting FILE>SAVE FRAMESET AS...
4. Save the HTML file for each frame by clicking in each frame and selecting FILE>SAVE FRAME AS...
5. To set the properties of the frameset, select the Frameset by clicking on the outermost border in the Frames palette:
   1. Set the title of the frameset by editing the Title box in the document window. The frameset title is the only one that displays for the user, and you must have the frameset selected to set this title rather than the title of one of the frames. Setting the page titles of the individual frame pages does nothing.
   2. Set the visibility of frameset borders in the property inspector
   3. Set the width of the frameset borders in the property inspector (note that if you want the borders to be completely invisible, you must also set the individual frames to have no borders and have margins of zero).
   4. In the right hand corner of the Property Inspector, click in each frame, and set the frame to percent or pixels. Usually, the left hand frame is set to a fixed size with pixels, and the right hand frame is set to a variable size with percent. This allows the user to change the size of the browser window, changing only the size of the right hand frame.
6. To set the properties of each frame, click in the middle of a frame in the frame palette. For each frame:
   1. Give the frame a target name by typing it into the Frame Name box in the property inspector.
   2. Set the frame to be resizable or not by checking or unchecking the No Resize box. If you want one frame to be resizable, you usually need to make all the frames resizable.
   3. Set the scrolling to be on, off, or auto for the frame with the Scroll pull-down.
   4. To completely eliminate borders in the frames, set the Borders to No, and set the margin height and width to zero.
7. Create a link in one frame that changes another frame:
   1. Make the link
   2. Set the target of the link in the Property Inspector to the name of the frame you want to change
8. To force a link to replace the entire browser window rather than an individual frame, set the target to "_top"
   

The menu frame should have 4 links that target and change the right hand frame. I.e. each link should put a page into the right hand frame.

• The default page for the right hand frame
• A different local page
• Another different local page
• A page from an outside website
  
  Go to the assignment page to view and print a PDF version of the Frames Exercise.
  A printed handout for technical specs will be given out in class.