Class 11

May 5, 2009 — Jamie

class 11 – assignment 5: AP divs due, Final Project assignment, behaviors: show-hide layers, pop-up windows, Quiz 4.

Your final project will be due by noon on Tuesday, June 16. I want to give you plenty of time to do the research and design necessary for this project so I’m giving you the specifications for the project below. Please let me know if you have any questions about the final project.

Final Project
No late projects accepted.

The focus of this project is to create a complete, portfolio quality web site following the site map provided below. You are to design the web site for a company that currently does not have a web site. Designing a personal web site is not allowed:

  • Monday May Design. This fictitious company designs and engineers products as a service for their clients. The company is an industrial design company with projects such as — phones, consumer electronics, cable boxes, medical equipment, computers, etc. The company expertise in both design and engineering.
  • Here is the link to the site map you will follow for this project.

Your new web site design should have a strong design aesthetic that reflects a specific attitude and look and feel for the site that you create. The site design should also reflect a strong technical sophistication.

Your design should be original. You must make use of royalty free images for your project. (Note that the examples of student work below do not reflect this new requirement.) You can NOT use images from other websites. You may use your own original artwork and/or photography if you prefer. Below are some suggestions on where to find images, but you’re welcome to use your own sources.

Possible sources for images:

Your site should consist of:

  • 6 complete pages and placeholder pages for the rest of the pages. (Must use site map provided and create one page for each of the 6 section a,b,c,d,e,& g)
  • A sub navigation for “what we do” and “portfolio sections.”
  • A strong visual design
  • A theme and visual concept that carries through the site
  • A clear navigation system
  • An effective and clear system of displaying the company’s portfolio
  • A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560)
  • 6 pages that have complete content, including photos and text.
  • You must use some html text in the site
  • Yahoo directories of product design & architecture companies:
  • Product_Design

Previous student work

This student work is presented as examples of good work done in previous sections of this course. Of course, as beginning designers working with limited experience and time, the students did not make “perfect” sites from either a design or technology perspective. In particular, many sites suffer from the following problems that future students should try to avoid:

  • Sites take too long to download, often because of too many rollover images.
  • Heavy reliance on graphic text, when HTML text would be faster downloading and easier to maintain. More HTML text should be used, but this can require a more sophisticated approach to page layout than is covered in this course

Please note: You must make use of royalty free images for your project. Below are “A level” work from previous students.

Student 1
Student 2
Student 3


Final Project checklist

1. Did you research the project and determine a specific look and feel for your site?
2. Did you successfully create a strong, visually effective site? Did you follow the sitemap?
3. Did you follow the specified dimensions based on a 1024 x 728 monitor resolution? (Finished size 990 pixels wide)
4. Did you create your site using a combination of divs and tables?
5. Did you design effective main navigation and sub-navigation for your portfolio section?
6. Did you title your pages, insert rollovers, and highlight navigation?
7. Did you use HTML text in your site?
8. Did you create and use only one CSS file for your site?

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

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.

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

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. Using the “+” pull-down menu, select OPEN BROWSER WINDOW
  6. In the resulting dialog, browse to the HTML file you want to display in the new window
  7. Enter the width and height for the window
  8. 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 ifyou 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 Firefox, Safari, 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();

}

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

Assignment

Quiz 4

Answer the question in the attached Quiz 4 and upload to the “Dropbox” on smconline.org site by noon on Tuesday, May 12.

Advertisement
Posted in Uncategorized. Comments Off
«

»
Follow

Get every new post delivered to your Inbox.