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 Still missing 1 proposal Still missing 1 proposal 1 st progress report due March 7 1 st progress report due March 7 Quiz 2 Corrected Quiz 2 Corrected 4 A’s, 3 B’s, 2 C’s & 1 D 4 A’s, 3 B’s, 2 C’s & 1 D Assignment 3 posted Assignment 3 posted Due March 7 @ 2:05 Pm Due March 7 @ 2:05 Pm Today we begin building “real” web Pages Today we begin building “real” web Pages

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 >95% Browser Compliance >95% Browser Compliance Opera 9 is best Opera 9 is best 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 ASCII text! All in ASCII text!

8. XHTML Elements Labels that identify and structure a document Labels that identify and structure a document stuff stuff Stuff can be Stuff can be Text Text Other elements Other elements Empty Empty Examples Examples a header a header emphasis emphasis

9. Attributes and values Information about the stuff in-between the opening and closing tags Information about the stuff in-between the opening and closing tags stuff stuff 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. Block vs. Inline Some elements are block-level elements and the other are inline Some elements are block-level elements and the other are inline Block-level are structural pieces of the document Block-level are structural pieces of the document Paragraph, headers etc. Paragraph, headers etc. Allways on a new line Allways on a new line Can contain Can contain Block-level elements Block-level elements Inline elements Inline elements text text Inline Inline On the same line On the same line Words Words Can contain Can contain Inline elements Inline elements text text

11. Parents and children 1 is a parent of 2 & 3 1 is a parent of 2 & 3 2 is a child of 1 2 is a child of 1 3 is a child of 1 3 is a child of 1 2 & 3 are siblings 2 & 3 are siblings

12. Text Content All extra space, tabs or other white spaces is collapsed to one character wide space All extra space, tabs or other white spaces is collapsed to one character wide space I am I am Tony.  I am Tony. Tony.  I am Tony. HTML Text limited to ASCII HTML Text limited to ASCII http://www.lookuptables.com/ http://www.lookuptables.com/ http://www.lookuptables.com/ &copy  © &copy  © xHTML uses Unicode xHTML uses Unicode ASCII + ASCII + http://www1.tip.nl/~t876506/EntitiesXHTML1.html http://www1.tip.nl/~t876506/EntitiesXHTML1.html http://www1.tip.nl/~t876506/EntitiesXHTML1.html &amp  & &amp  &

13. URLs & Filenames Use lowercase in the names of files Use lowercase in the names of files Extension should be.htm or.html Extension should be.htm or.html 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

14. 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”

15. 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)

16. XHTML page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Untitled Document

17. Adding Style Style sheets (CSS) Style sheets (CSS) Selector{property:”value”,…} Selector{property:”value”,…} Declaration -> property:”value” Declaration -> property:”value” More in Chap 7 More in Chap 7 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

18. 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 http://www.cookwood.com/html/colors/sixteencolors.html http://www.cookwood.com/html/colors/sixteencolors.html http://www.cookwood.com/html/colors/sixteencolors.html rgb(%35,35%,35%) rgb(%35,35%,35%) http://www.w3schools.com/html/html_colors.asp http://www.w3schools.com/html/html_colors.asp http://www.w3schools.com/html/html_colors.asp #AAFF66 #AAFF66 http://www.cookwood.com/html/colors/websafecolors.html http://www.cookwood.com/html/colors/websafecolors.html http://www.cookwood.com/html/colors/websafecolors.html

19. 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

20. 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

21. 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

22. 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”

23. Using Dreamweaver

24. Dreamweaver Tutorials Dreamweaver Developer Center Dreamweaver Developer Center http://www.adobe.com/devnet/dreamweaver/ http://www.adobe.com/devnet/dreamweaver/ http://www.adobe.com/devnet/dreamweaver/ 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 http://www.dwfaq.com/Tutorials/Basics/default.asp http://www.dwfaq.com/Tutorials/Basics/default.asp

25. Paint Shop Pro

26. 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 Dimension PSP Tips From 6 th Dimension http://psptips.com/6/ http://psptips.com/6/ http://psptips.com/6/

27. Assignment Create a web page using Dreamweaver Create a web page using Dreamweaver Same info as last time Same info as last time Save as test3.htm Save as test3.htm Ftp to web server Ftp to web server Cos125 assignment3.doc Cos125 assignment3.doc Cos125 assignment3.doc Cos125 assignment3.doc