Week #13: Web Page Form Design

Examples of form designs:
http://www.tumblr.com/register
Tumblr uses big form fields and a nice clean appearance.
http://www.newspond.com/register/
News Pond gets users to focus on their sign-up form with the use of a background glow.
http://graphik.fi/contact/
Graphik uses a big friendly header on their contact form.
_______________________________________________________

Web forms don’t have to be boring and, using CSS or Flash, you can easily make sure that they are appealing and effective. To get noticed, you need to come up with something unique and interesting — symbols, icons, colors, position or the size of web form are often used to achieve interesting design solutions.
• http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

• http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/

• http://www.alistapart.com/articles/prettyaccessibleforms

• http://designshack.co.uk/tutorials/10-css-form-examples

• http://www.1stwebdesigner.com/inspiration/77-inspiring-blog-comment-form-designs-good-examples/

Week #12: Pop Up Windows

This week we will design a web page that hyperlinks to a series of html files holding: a picture, a QT video, and an mp3 audio file. A new browser window will open when each hyperlink is clicked.




STEP #1: Create the resources and resource html files
Be sure to wrap each page:
relative
100%
100%
text-align: center
margins: 0, auto, 0, auto
-------------------

• PICTURE.html

• VIDEO.html
Insert > Plugin
Set the width and height properties for the video to 480 x 336 ( 320 + 16)
Modify > Page Properties, set margins to 0,0,0,0
In the HTML you can set autostart="false" to stop the video from playing automatically on opening the browser window.

• AUDIO.html
TIP: Use GarageBand to create an audio file for use in this exercise.

Insert > Plugin
Set the width and height properties for the audio to 300 x 16
Modify > Page Properties, set margins to 0,0,0,0
In the HTML you can set autostart="false" to stop the audio from playing automatically on opening the browser window.

------------------------------------
In DREAMWEAVER
1. When hyperlinking each item, be sure to add a # in the link field of the Properties for each hyperlink
2. Assign a behavior: Open Browser Window
URL to display: picture.html
Width: 200
height: 200
Name: picture
OK


CODE changes
Change to default script to now read the following:
function MM_openBrWindow(theURL,winName,features) { //v2.0
what = window.open(theURL,winName,features);
}
function MM_closeBrWindow() { //v2.0
what.window.close();
}

Also add the script to the close link:
a href="#" onClick="MM_closeBrWindow()">Close Window

Week #11: Frameset

Basic terminology:
A frameset is a container for frames.
A frame is a container for an html page.

Why Framesets?
This allows content to flow through a web site, while certain areas or frames remain on the screen all the time, other areas are dynamic.
Typically a three-frame-frameset would hold the following content 1) the top frame HEADER or Flash Banner, 2) the side frame nav bar, and 3) the mainFrame content area. When an item is clicked on the nav bar, the content would be played in the content area of the page.

Our basic example has two frames in the Frameset.
• The Frameset file will be saved as myFrameset.html.
• The topFrame (topFrame.html) will hold the Menu and the hyperlinks
• Page1.html, Page2.html, and Page3.html will play in the mainFrame (bottomFrame.html).

Here's an example of what we will do this week:


Part 1 HOW TO:


Part 2 HOW TO:

Week #10: Drop Down Menu

This week we will use the SPRY DROP DOWN MENU option and create a horizontal drop down menu.

Week #9: Exercise

Create three animations
1) Photoshop : using frames
2) Photoshop : using the timeline
3) Flash: using Actionscript 2.0, with a hyperlink to the menu.html

Week #9: Create a SWF Animation Using Flash

In this example, Flash is used to create an animation with a hyperlink to menu.html

Script for hyperlinking a button to a URL

FLASH, Actionscript 2.0

on (release) {
getURL("menu.html", "blank");
}