class 12 -final project assignment, spry widgets
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:
- Veer: Wonderful selection of stock photography
- iStock Photo
- Morgue File: Free!
- Stock Xchange
- Stock Vault
- iStock Pro
- Open Photo
- Getty Images
- Index Stock Imagery
- Absolute Vision
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
|
|
|
|
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.
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? |
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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 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, Tuesday, May 19.
(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.”)
