Add Java Script Functionality and css technical

Javascript tutorial:
http://www.w3schools.com/js/default.asp
Yahoo Javascript Components
http://dreamcss.blogspot.com/2009/04/25-awesome-yahoo-ui-prototype.html

light box: Hide image in the background and swap to show them.
http://www.huddletogether.com/projects/lightbox2/

A way to Add Variables to Your CSS Files
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-add-variables-to-your-css-files/

Multimedia Features on The Web

Review and exercises:

1. Practice your html coding: Create a page in Dreamweaver, add table, div, email links..., copy each element's html source code and paste into goole's page creator html editor(on the bottum right). Or look at your Dreamweaver's code view window after you design from layout view, and then hand type html code into html editor area.
2. Create a Dreamweaver Site by selecting one of the design you like. For example, select design 3 folder as root and select images folder inside the root(design 3) as default image folder. Modify logo using Photoshop of Illustrator, add your own texts and multimedia features such as audio, flash, gif animation. ( remeber: copy gif and music folder, and flash swf files into your design 3 if you choose design 3 as your root) Then, find a free host to upload to.
3. Create Photoshop new file:

• file-->new, give a file name: photoweb, preset: web, size: 1152x864, then click OK.
• Open other photo images, resize them, collage them, add image text and arrange layout on the page.
• Flaten all the layers
• Use slice tool to slice it and from file-->save for web and devices. So then you will have a photoweb.html file plus an image folder. Put them into a folder name it photoweb and create a site from there.

Audio:

• embed sound: put this inside your body code :
• "<"embed src="http://www.davesite.com/webstation/html/davesite.wav" width="145" height="60" autoplay="false"">" "<"/embed">"
• Javascript to write html code : http://www.caloakfinefurniture.com/ look at source code
• Use Flash:

Web 2.0--not a new technology, but a new outlook in business

Review

Steps to buid a website:

1. Planning a WebSite :Search domain name available
2. Determining the Site Mission: Purpose of this site
3. Determining the Audience
4. Organizing Content--site map, menu bar and drop down menu widget.
5. Determining Technologies for a Site: Search web host that can provide the technology/services.
6. Creating a Mock-up: start to create the pages
7. Appling Design Principles: keep the same look and feel through the site-style sheet.
8. Developing Readable Content for the Web: text choice and content information source.
9. Improving Readability: accessibility issues .
10. Performing Usability Testing
11. Increasing Search Engine Rankings

• Wikis, blogs, social network, RSS etc... are not much new technology, but just new innovative usages of the web...
  RSS video tutorial: http://www.youtube.com/watch?v=0klgLsSxGsU
  http://www.youtube.com/watch?v=UW6lqGcjdlA&NR=1
• Introduce a new approach to the web application: AJAX http://www.w3schools.com/ajax/

Demos and exercises:

• Select one of the designs folder and create a new Dreamweaver site from it.
• Modify design images and logo with photoshop.
• Pull all the linked web sites such as picasa, youtube, blog, facebook... into your personal site-use old, but still useful technology: frame. Create new--> frame set.
• Modify javascript or rolled-over images.

Modify Image with Photoshop-Collage Image Using Layer

Video Tutorial for Layer in Photoshop
http://www.adobe.com/designcenter/video_workshop/
select a product--> photoshop; select a topic-->using layer, making and refining selection.

Use online "can" site to practice your html coding. search in goole.com -->enter --page creator
login, select the page you created, and click the area that you want to edit, then click on the lower right coner --->html editor. Practice : links ; images; break
.... take a look the code from Dreamweaver.
UI case study http://popularscreensavers.com/