COS 125 Internet Fundamentals and Web Page Design Day 11

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 2:05 Pm Due March 2:05 Pm Today we begin building “real” web Pages Today we begin building “real” web Pages

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

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

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

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

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!

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

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

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

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

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 &copy  © &copy  © xHTML uses Unicode xHTML uses Unicode ASCII + ASCII &amp  & &amp  &

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

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”

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)

XHTML page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ " Untitled Document

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

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 #AAFF

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

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

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

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”

Using Dreamweaver

Dreamweaver Tutorials Dreamweaver Developer Center Dreamweaver Developer Center Dreamweaver Fever Dreamweaver Fever Dreamweaver FAQ.com Dreamweaver FAQ.com

Paint Shop Pro

Paint Shop Pro tutorials Web Graphics on a Budget Web Graphics on a Budget Sumrallworks.com Sumrallworks.com ole/psp/tutorials/link2g.htm ole/psp/tutorials/link2g.htm ole/psp/tutorials/link2g.htm ole/psp/tutorials/link2g.htm PSP Tips From 6 th Dimension PSP Tips From 6 th Dimension

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