Download presentation
Presentation is loading. Please wait.
1
Web Page Design Day 2
2
Agenda Questions Assignment 1 posted Due March 7 @ 2:05 Pm Today we begin building web pages Chap 1 of text
3
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/
4
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 text! ○ http://www.asciitable.com/ http://www.asciitable.com/ ○ Most commonly used in xhtml, /, =, “”, &, a- z,#,.
5
XHTML Elements Labels that identify and structure a document stuff Stuff can be ○ Text ○ Other elements Empty (no “stuff”) Examples a header emphasis Only a limited number http://www.w3.org/TR/2005/WD-xhtml2- 20050527/elements.html http://www.w3.org/TR/2005/WD-xhtml2- 20050527/elements.html
6
Attributes and values Information about the stuff in-between the opening and closing tags stuff Attribute=“value” Values are allways in quotes Values are allways in lowercase Attributes are specific to elements Can use percentages instead of numbers
7
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 http://perleybrook.umfk.maine.edu/samples/blockv sinline.htm
8
Parents and children 1 is a parent of 2 & 3 2 is a child of 1 3 is a child of 1 2 & 3 are siblings
9
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/ © © xHTML uses Unicode ASCII + http://www1.tip.nl/~t876506/EntitiesXHTML1.ht ml http://www1.tip.nl/~t876506/EntitiesXHTML1.ht ml & &
10
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 diretory”
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 have closing tag XHTML is case sensitive (all lowercase)
13
XHTML page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Untitled Document
14
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
15
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 http://www.cookwood.com/html/colors/sixteencolors.html rgb(%35,35%,35%) ○ http://www.w3schools.com/html/html_colors.asp http://www.w3schools.com/html/html_colors.asp #AAFF66 ○ http://www.cookwood.com/html/colors/websafecolors.html http://www.cookwood.com/html/colors/websafecolors.html
16
Working with Web Page Files Design Site Layout Audience Centered Design a naming convention for pages Define site navigation Home page Info page Order page Parts Page Contact pages FAQ
17
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
18
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 http://www.hartnell.edu/library/word_web_design/w ord_web_pages.htm
19
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
20
COS 125 Web Site http://perleybrook.umfk.maine.edu/classes/cos125/ http://perleybrook.umfk.maine.edu/classes/cos125/
21
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”
22
Using Dreamweaver
23
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
24
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 http://www.dwfaq.com/Tutorials/Basics/defau lt.asp
25
Paint Shop Pro
26
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 http://www.sumrallworks.com/freebies/button hole/psp/tutorials/link2g.htm PSP Tips From 6 th Dimension http://psptips.com/6/
27
Assignment 1 Cos 125 assignment 1.doc 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
Similar presentations
