Week 05

week 05 – ftp (file transfer protocol) review, final project assignment, more css, more layers, behaviors: show-hide layers, spry widgets, pop-up windows. Assignment 5.

FTP (file transfer protocol) review
Please be sure to review the information about how to use FTP to upload the files to the class server. There are demonstration videos and text directions in the Week 02 notes. Remember you will need to upload your final project to the class server in order to receive your final grade.

Final project assignment. Your final project will be due by midnight on Friday, October 17. No late projects accepted.
Please also review the assignment for your final project and let me know if you have any questions. Note that you are required to use the site map located in the specifications for the final project. You may change the names of the sections but all of them need to exist in your final project. For instance, “Who We Are” could be changed to “About Us” if you’d like to change it

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

This week we’re going to cover several items that aren’t things you’re required to include in your final project — but you may want to. We’ll cover two items using the Behaviors windows: show-hide elements, and open browser window. And we’ll also cover how to create a spry menu bar. You’ll need Dreamweaver CS3 in order to create the spry menu bar. Earlier versions of Dreamweaver do not have this feature.

The spry menu bar may be something you want to use in your final project. You assignment this week is to create a spry menu bar so you might decide you’d like to use one in your final project.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Behaviors
How to add interactivity to a web page

Introduction

event -> action

Dreamweaver calls its way of adding interactive JavaScript to a web page behaviors. Behaviors are actions associated a specific event (e.g. onMouseOver) that are attached to an object on the page (e.g. an image). When a defined event occurs (e.g. a mouse click) for that object, the action is executed (e.g. play an animation timeline). Usually, a behavior causes something to happen to a named object in the page.

Note that to add a behavior to an object on the page, the object must be a link. In other words, it must have an <A> tag. The easiest way to do this is to select the object, and put the “#” character in the Link box in the Property Inspector.

Behaviors and AP elements

Show or hide a AP element

• Name the a AP element you want to show/hide
• Select the object in the page that show/hide the a AP element
• In the property inspector for the selected object, put the “#”character in the link box (or a named anchor – see discussion below)
• Open the Behaviors window
• Using the “+” pull-down menu, select SHOW-HIDE ELEMENTS
• Select each AP element you want affect
• Select SHOW or HIDE for that AP element
• You can affect multiple AP element by selecting each AP element and setting show or hide for that AP element
• Select OK when finished
• In the behaviors palette, click on the just-entered behavior
• In the Events column, click on the default event to set your preferred event for this action

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Pop-up windows

Creating custom browser windows with JavaScript

Pop-up windows are used to display additional content in a new browser window rather than replacing the current page. The simplest way to make a pop-up window is to use the “_blank” target for a normal link in a page. But these windows are standard browser windows.

If you want to specify the dimensions of the window and control features such as scroll bar visibility, menu availability, toolbar visibility, and so on, then JavaScript is required to create the window. Dreamweaver includes a behavior called “Open Browser Window” to generate this JavaScript.

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, insert a named anchor so the page doesn’t scroll to the top – see the named anchor note 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

• onClick event: I’ve had the best luck with using 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 “#”).
• Consistent pop-up window size: If you are putting graphics that must fit exactly in a pop-up window, you may find that there are either 10 extra or 10 less pixels in the window than you expect. The fix is this:Set the resize and scrollbars attribute settings to “no”. The window scrollbars and resize handle are what browsers treat differently. If you don’t specify what should happen, some browsers leave space for them even if they aren’t showing, others don’t. So rather than using the default setting, you can avoid any ambiguity and fix the problem with code like this, which explicitly says do not display the scrollbars and resize handle.onClick=”MM_openBrWindow(’pop_up_example.html’,’popup’, ‘scrollbars=no,resizable=no,width=200,height=300′)”You can edit the HTML and insert in the “scrollbars=no,resizable=no,” text, or, when you use the Dreamweaver Open Browser Window behavior, check the boxes for “Scrollbars as Needed” and “Resize Handles” in the Open Browser Window dialog. Then open up code view and change “yes” to “no” in the code: scrollbars=yes,resizable=yes –> scrollbars=no,resizable=no

Read pages 251-252 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

Forcing the pop-up to the front

Sometimes, the user will try to open a pop-up, and it will seem as if it is not opening. In fact, the pop-up is already open, but hidden behind another browser window. The solution is to force the pop-up window to the front when the user clicks. This is accomplished by modifying JavaScript code to add the window.focus() method. You can modify the pop-up window JavaScript that Dreamweaver creates. Find the following code in the <HEAD> section of your web page:

// Standard Dreamweaver function

function MM_openBrWindow(theURL,winName,features) { //v2.0

window.open(theURL,winName,features);

}

Copy the below code and paste it into your HEAD section, completely replacing
the above code.

// Modified function, with additions in BOLD

function MM_openBrWindow(theURL,winName,features) { //v2.0   var newWindow = window.open(theURL,winName,features);

   newWindow.focus();

}

Putting the window in a specific location

If you want to position the new window in a specific location on the screen, you can modify the code further to look like the following. By adding the “left, top” features for Explorer, and “screenX, screenY” for Netscape, the window will be positioned to the coordinates you put in place of “300″ in this example.

// Modified function with additions in BOLD

function MM_openBrWindow(theURL,winName,features) { //v2.0   var win_position = ‘,left=300,top=200,screenX=300,screenY=200′;

   var newWindow = window.open(theURL,winName,features+win_position);

   newWindow.focus();

}

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Creating Pop up Menu using a Spry widget

The following definition and description about the Spry widget is from the Adobe web site:

“A Spry widget is a page element that combines HTML, CSS and JavaScript code to enable user interaction.

A Spry widget is made up of the following parts:

1. Widget structure:

An HTML code block that defines the structural composition of the widget.

2. Widget behavior:

JavaScript code that controls how the widget responds to user-initiated events.

3. Widget styling:

CSS code that specifies the appearance of the widget.

The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript code. You can easily insert these widgets—the code is HTML and CSS at its simplest—and then style the widget.

The behaviors in the framework include functionality that lets users show or hide content on the page, change the appearance (such as color) of the page, interact with menu items, and much more. Each widget in the Spry framework is associated with unique CSS and JavaScript files, available on Adobe Labs.

The CSS file contains everything necessary for styling the widget, and the JavaScript file gives the widget its functionality. The CSS and JavaScript files associated with a given widget are named after the widget, so it’s easy for you to know which files correspond to which widgets. (For example, the files associated with the Accordion widget are called SpryAccordion.css and SpryAccordion.js).”

Click here for an Example of Spry Menu Bar

Follow the steps below to add the menu like the one above:

Step 1: Make sure you have your site defined using the Site Definition box we’ve used when uploading our files. You need to go to SITE > NEW SITE and fill in the local information for your site. In this case for the field “Local root folder” you will choose your folder named final_lastname. You only need to fill in 2 fields: “Site name” and “Local root folder.”

Step 2: Make sure in the SITE > MANAGE SITE palette that you’ve selected the site you defined called final project. This will ensure that the Spry assets are copied to the correct folder.

Step 3: Now you are ready to insert the popup menu widget into your page. I recommend that you insert the pop up menu widget into a layer. Click inside the layer and go up to the Insert Window labeled “Spry” as shown below and click on the icon labeled “Spry Menu Bar.” This will insert the Spry Menu Bar into your page:

Step 4: Save your page and double check to make sure that the folder named “Spry Assets” is correctly linked in the head of your page and the folder is copied into your final_lastname folder. The folder named “Spry Assets” contains the Javascript and CSS files you will need to display the bar.

Step 5: You will be able to edit the Menu Bar using the WINDOWS > PROPERTIES Inspector. It looks like this:

Here you will be able to change the text for the navigation and add and delete second and third level navigation using the +/- signs. Here you can also create links for the navigation. If you would like to customize the widget (I have customized the rollover and hover states), you can click on “Customize this widget” and follow the directions given here.)
Video Demonstration

I demonstrate how to insert a spry menu into a web page. You can view the video demonstration in one of two ways.

1) You can download the entire demonstration in one QuickTime movie file (29MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 3 videos from the YouTube site. I have posted the two videos below.

Spry Menu | Part 1

Spry Menu | Part 2

Read pages 240-241 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

Additional Resources:
View Adobe video:
Creating Menus with Spry Widgets

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment Week 05

Spry Menu: Create a spry menu bar following the instructions above. Please be sure to view the Video Demonstration, read through the class notes, the textbook reading, and the Adobe video. Upload the zipped file with your complete folder to the “DropBox” on the smconline.org site by noon, Friday, October 3.

(If you don’t have Dreamweaver CS3 and therefore don’t have the Spry Menu feature, create a pop up window and upload the zipped files to the “DropBox.”)

copyright © 2006-2008, jamie cavanaugh