Web Design Guide Line

http://www.youtube.com/watch?v=a0qMe7Z3EYg

Finish Your Website

Use Google webmaster tool to improve your site's visibility.
http://www.google.com/webmasters/start/
Submit your site to searching engine
http://www.google.com/addurl/?continue=/addurl
http://search.yahoo.com/info/submit.html
Google Website Optimizer Tip
http://www.blastam.com/broadcast/2009/03/top-50-tips-on-what-to-test-using.html
SEO
http://www.youngentrepreneur.com/blog/2009/04/30/seo-advice-i-slept-through-class/
Clean up your page so searching result on your site will look better.
http://www.vdotmedia.com/blog/3-ways-to-clean-up-your-google-search-results/
Earn money from relevant ads on your website
http://www.google.com/adsense/

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/

Web class 5/8

1. Before start to do any html or css page, check your files on your right side panel to see if they are in your root folder. If you see desk top or some other folder, but not your root folder that contains files for this site; then you need to recreate Dreamweaver site first.
2. On ramp:Café Townsend site simulation. http://www.adobe.com/devnet/dreamweaver/articles/getting_started_dreamweaver_cs3.html
3. Review:table layout with colored background and rounded image corners. External style sheet will control over all page, but internal style sheet inside html page head can add extra rules.
4. Create External style sheet: When in the start up page, select from create new >css.

• When in a html page File> new, select from sample>css or copy from anywhere else
• After you have a CSS file, open a html page to link to CSS file
• Then you can add new rule or edit property.
• syntax is: selector { property : value}
• The rule selector are
• 1. class : start with "." ex: .whateverNameMakeSense.
• 2. Tag, which is html tag, so in order to know what you are selecting, you need to memerize some html code while you are designing. (just look at code view when you click an object)
  recognize xhtml and css code. http://www.webdeveloper.com/design/
• 3.Id selector, which usually only use for once in the same page for dynamic page which load data from data base server.

We will have more CSS tutorial practice today.
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_cs3.html

my computer> T :>webclass_wu>css>Copy 1,2,3,4,5, folder and classoutline>week4 to your H drive new folder. Follow paper tutorial 1,2,3,4,5

Publish Site tutorial : Read it first. We may have our web server latter.

http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt5.html

Q: How do I control/resize the size of the pop up window so it won't cover my previous window totally?

A: Use javascript: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml