Web Page Design Day 2 Agenda Questions Assignment 1 posted Due March 7 @ 9:35 AM Today we begin building web pages Chap 1 & 2 of text What we are going do Use xHTML & CSS More current More useful for large sites Learning xHTML means you've learnt HTML too (same vocabulary, different syntax) In Dreamweaver “new document” dialog Check “Make Document XHTML Compliant” Web Site http://www.cookwood.com/html/ XHTML Elements Attributes and Values Markup Formatting instructions Details between parts of Documents 3 types ○ Elements – parts of the web page ○ Attributes – optional properties of the elements ○ Values – values for the attributes All in ASCII (or unicode) text! http://www.asciitable.com/ Most commonly used in xhtml <, >, /, = , “ ” , & , a-z , # , . , 0-9 You can write xHTML with ANY acsii editor ○ Notepad, EDIT, VI, PICO XHTML Elements Labels that identify and structure a document <element>stuff</element> Stuff can be ○ Text ○ Other elements Empty (no “stuff”) <element … /> ○ <br/> , <img src=“picture.jpg ” /> Examples <h1>a header</h1> <em>emphasis</em> <img src=“picture.jpg” /> Only a limited number http://www.w3.org/TR/2005/WD-xhtml2- 20050527/elements.html Attributes and values Information (and instructions) about the stuff in-between the opening and closing tags for the web broswer’s html parser <element attribute=“value” > stuff </element> Attribute=“value” Values are allways in quotes Values are allways in lowercase Attributes are specific to elements Can use percentages instead of numbers Block vs. Inline Some elements are block-level elements and the other are inline Block-level are structural pieces of the document ○ Paragraph, headers etc. ○ Allways on a new line ○ Can contain Block-level elements Inline elements text Inline ○ On the same line ○ Words ○ Can contain Inline elements Text http://perleybrook.umfk.maine.edu/samples/blockv sinline.htm Parents and children <element1> <element2></element2> <element3></element3> </elememt1> 1 is a parent of 2 & 3 2 is a child of 1 3 is a child of 1 2 & 3 are siblings Text Content All extra space, tabs or other white spaces is collapsed to one character wide space I am Tony. I am Tony. HTML Text limited to ASCII http://www.lookuptables.com/ &copy © xHTML uses Unicode ASCII + http://www1.tip.nl/~t876506/EntitiesXHTML1.ht ml &amp & URLs & Filenames Use lowercase in the names of files Extension should be .htm or .html for xHTML pages Absolute URLs Entire path to file http://perleybrook.umfk.maine.edu/default.htm Must use if your are referencing a file not on the same server as your web page Relative URLs File must be on the same server ../ to go up a directory /directory/file.ext to go down a directory ./ Means “this directory” Relative URL Web root/ web ftp Index.html Tony.htm Star.gif Tony.gif stuff Dog.gif In web page Index.html To refer to star.gif “star.gif” or “./star.gif” To refer to tony.htm “../ftp/tony.htm” To refer to dog.gif “../stuff/dog.gif” HTML vs. XHTML XHTML must use <!DOCTYPE … > <html> <head></head> <body></body> </html> XHTML must have closing tag XHTML is case sensitive (all lowercase) XHTML page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> </body> </html> Adding Style Style sheets (CSS) Selector{property:”value”,…} Declaration -> property:”value” More in Chap 7 Cascade What happens when more than one rule applies? Inheritance ○ If no rule than inherit from parent element Specificity ○ If more than one rule applies use the more specific rule Location ○ 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 Predefined values must NOT be in quotation marks Length values Number and units ○ 2em 2 * current font size ○ 40px forty pixels ○ 20cm twenty centimeters Percentage ○ 20% relative to parent unit URLS url(path/file.ext) Colors 16 predefined names ○ http://www.cookwood.com/html/colors/sixteencolors.html rgb(%35,35%,35%) ○ http://www.w3schools.com/html/html_colors.asp #AAFF66 ○ http://www.cookwood.com/html/colors/websafecolors.html Working with Web Page Files Design Site Layout Audience Centered Info page Design a naming convention for pages Define site navigation Order page FAQ Home page Contact pages Parts Page Microsoft Word Can automatically create web pages Problems ○ “bloat” code ○ Proprietary code Good for quick jobs Bad for anything that has to be maintained over time Microsoft Word as a Web Page Design Tool Select “new” from file menu Select “blank web page” Type out web page Add graphics Save as “Web Page (*htm;*html)” If you use graphics, Word will create a folder containing the graphic files http://www.hartnell.edu/library/word_web_design/w ord_web_pages.htm Ftp using Windows Explorer In address bar ftp://perleybrook.umfk.maine.edu Login with the same info you used to login in to lab computers Select COS 125 folder Select the folder with your first name Moving files Drag and drop files Use menu edit copy/paste Click on file and right mouse for context menu COS 125 Web Site http://perleybrook.umfk.maine.edu/classes/cos125 / Some general Hints Web Servers Most have a system for recognizing “home” pages ○ Index.html or default.htm Find out from WEB Server Administrator Organize your web projects into folders Images Html pages This has already been done for this class Check your pages in browser before uploading to server Use the “inspiration of others” Using Dreamweaver Create a web page In dreamweaver >File >new Check make document xhtml compliant Create page in Code or design mode >file>save as ○ Pick folder and name Dreamweaver Tutorials Dreamweaver Developer Center http://www.adobe.com/devnet/dreamweaver/ Dreamweaver Fever http://www.dreamweaverfever.com/ Dreamweaver FAQ.com http://www.dwfaq.com/Tutorials/Basics/defau lt.asp Paint Shop Pro Paint Shop Pro tutorials Web Graphics on a Budget http://mardiweb.com/web/ Sumrallworks.com http://www.sumrallworks.com/freebies/button hole/psp/tutorials/link2g.htm PSP Tips From 6th Dimension http://psptips.com/6/ Assignment 1 Cos 125 assignment 1.doc Goals Confirm students know MS word Make sure students know how to use COS 125 technologies (FTP, backboard, etc) Have students demonstrate some creative abilities