1. COS 125 Internet Fundamentals and Web Page Design Day 11

2. Agenda Capstone Projects Proposals Over Due Capstone Projects Proposals Over Due Timing of deliverables is 10% of Grade Timing of deliverables is 10% of Grade First Capstone Progress Report Due Feb 24 First Capstone Progress Report Due Feb 24 One week from today One week from today Quiz 2 covering the rest of the HITW text will be on Feb 20 (Next Class) Quiz 2 covering the rest of the HITW text will be on Feb 20 (Next Class) Same format as before Same format as before Assignment 3 will be posted by next class Assignment 3 will be posted by next class Today is Introduction to Web Design, Using Dreamweaver and Paint Shop Pro Today is Introduction to Web Design, Using Dreamweaver and Paint Shop Pro

3. Browser Wars 1994 Netscape 1994 Netscape Created multimedia extensions Created multimedia extensions Became most popular browser Became most popular browser 1996 Microsoft 1996 Microsoft Created its own set of non-standard extensions Created its own set of non-standard extensions For Web designers this became a mess! For Web designers this became a mess! Had to create two of everything Had to create two of everything

4. Standards HTML 3.2 HTML 3.2 First try at standards First try at standards Ended browser wars except for frames Ended browser wars except for frames HTML4 and CSS HTML4 and CSS Deprecated elements Deprecated elements Cascading Style Sheets Cascading Style Sheets XML and xHTML XML and xHTML XML creates other languages XML creates other languages xHTML is HTML written in XML xHTML is HTML written in XML

5. Today Webpage Design Webpage Design xHTML, HTML 4.0 and CSS xHTML, HTML 4.0 and CSS >90% Browser Compliance >90% Browser Compliance xHTML xHTML Stronger and more flexible Stronger and more flexible Stricter Stricter 3 Flavors 3 Flavors Transitional Transitional Frameset Frameset Strict Strict

6. What we are going do Use xHTML & CSS Use xHTML & CSS More current More current More useful for large sites More useful for large sites Learning xHTML means you've learnt HTML too (same vocabulary different syntax) Learning xHTML means you've learnt HTML too (same vocabulary different syntax) In Dreamweaver “new document” dialog In Dreamweaver “new document” dialog Check “Make Document XHTML Compliant” Check “Make Document XHTML Compliant” Web Site Web Site http://www.cookwood.com/html/ http://www.cookwood.com/html/ http://www.cookwood.com/html/

7. XHTML Elements Attributes and Values Markup Markup Formatting instructions Formatting instructions Details between parts of Documents Details between parts of Documents 3 types 3 types Elements Elements Attributes Attributes Values Values All in text! All in text!

8. XHTML Elements Labels that identify and structure a document Labels that identify and structure a document Text Text Other elements Other elements Empty Empty Examples Examples

9. Attributes and values Information about the data in the document Information about the data in the document Attribute=“value” Attribute=“value” Values are allways in quotes Values are allways in quotes Values are allways in lowercase Values are allways in lowercase Attributes are specific to elements Attributes are specific to elements Can use percentages instead of numbers Can use percentages instead of numbers

10. URLs Absolute URLs Absolute URLs Entire path to file Entire path to file http://perleybrook.umfk.maine.edu/default.htm http://perleybrook.umfk.maine.edu/default.htm http://perleybrook.umfk.maine.edu/default.htm Must use if your are referencing a file not on the same server as your web page Must use if your are referencing a file not on the same server as your web page Relative URLs Relative URLs File must be on the same server File must be on the same server../ to go up a directory../ to go up a directory /directory/file.ext to go down a directory /directory/file.ext to go down a directory

11. Relative URL C:/ web Index.html Star.gif ftp Tony.htm Tony.gif stuff Dog.gif In web page Index.html To refer to star.gif “star.gif” To refer to tony.htm “../ftp/tony.htm” To refer to dog.gif “../stuff/dog.gif”

12. HTML vs. XHTML XHTML must use XHTML must use XHTML must have closing tag XHTML must have closing tag XHTML is case sensitive (all lowercase) XHTML is case sensitive (all lowercase)

13. Adding Style Style sheets Style sheets Selector{property:”value”,…} Selector{property:”value”,…} Declaration -> property:”value” Declaration -> property:”value” More in Chap 8 More in Chap 8 Cascade Cascade What happens when more than one rule applies? What happens when more than one rule applies? Inheritance Inheritance If no rule than inherit from parent element If no rule than inherit from parent element Specificity Specificity If more than one rule applies use the more specific rule If more than one rule applies use the more specific rule Location Location If more than one rule applies and they are are equally specific, than the rule that appears later is used If more than one rule applies and they are are equally specific, than the rule that appears later is used

14. Property values Each CSS property has rules about what values can be accepted Each CSS property has rules about what values can be accepted Predefined values must NOT be in quotation marks Predefined values must NOT be in quotation marks Length values Length values Number and units Number and units 2em 2 * current font size 2em 2 * current font size 40px forty pixels 40px forty pixels 20cm twenty centimeters 20cm twenty centimeters Percentage Percentage 20% relative to parent unit 20% relative to parent unit URLS URLS url(path/file.ext) url(path/file.ext) Colors Colors 16 predefined names 16 predefined names rgb(%35,35%,35%) rgb(%35,35%,35%) #AAFF66 #AAFF66

15. Working with Web Page Files Design Site Layout Design Site Layout Audience Centered Audience Centered Design a naming convention for pages Design a naming convention for pages Define site navigation Define site navigation Home page Info page Order page Parts Page Contact pages FAQ

16. Create a web page In dreamweaver In dreamweaver >File >new >File >new Check make document xhtml compliant Check make document xhtml compliant Create page in Code or design mode Create page in Code or design mode >file>save as >file>save as Pick folder and name Pick folder and name

17. Microsoft Word Can automatically create web pages Can automatically create web pages Problems Problems “bloat” code “bloat” code Proprietary code Proprietary code Good for quick jobs Good for quick jobs Bad for anything that has to be maintained over time Bad for anything that has to be maintained over time

18. Some general Hints Web Servers Web Servers Most have a system for recognizing “home” pages Most have a system for recognizing “home” pages Index.html or default.htm Index.html or default.htm Find out from Server Administrator Find out from Server Administrator Organize your web projects into folders Organize your web projects into folders Images Images Html pages Html pages Check your pages in browser before uploading to server Check your pages in browser before uploading to server Use the “inspiration of others” Use the “inspiration of others”

19. Using Dreamweaver

20. Dreamweaver Tutorials Dreamweaver Seminars Dreamweaver Seminars http://www.macromedia.com/software/dream weaver/productinfo/ondemand/ http://www.macromedia.com/software/dream weaver/productinfo/ondemand/ http://www.macromedia.com/software/dream weaver/productinfo/ondemand/ http://www.macromedia.com/software/dream weaver/productinfo/ondemand/ Dreamweaver Fever Dreamweaver Fever http://www.dreamweaverfever.com/ http://www.dreamweaverfever.com/ http://www.dreamweaverfever.com/ Dreamweaver FAQ.com Dreamweaver FAQ.com http://www.dwfaq.com/Tutorials/Basics/default.asp http://www.dwfaq.com/Tutorials/Basics/default.asp

21. Paint Shop Pro

22. Paint Shop Pro tutorials Web Graphics on a Budget Web Graphics on a Budget http://mardiweb.com/web/ http://mardiweb.com/web/ http://mardiweb.com/web/ Sumrallworks.com Sumrallworks.com http://www.sumrallworks.com/freebies/buttonh ole/psp/tutorials/link2g.htm http://www.sumrallworks.com/freebies/buttonh ole/psp/tutorials/link2g.htm http://www.sumrallworks.com/freebies/buttonh ole/psp/tutorials/link2g.htm http://www.sumrallworks.com/freebies/buttonh ole/psp/tutorials/link2g.htm PSP Tips From 6 th Domension PSP Tips From 6 th Domension http://psptips.com/6/ http://psptips.com/6/ http://psptips.com/6/