COS 125 day 2 - Tony Gauvin's Web Site

advertisement
Web Page Design
Day 2
Agenda
Questions
 Assignment 1 posted

 Due March 7 @ 2:05 Pm

Today we begin building web pages
 Chap 1 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 text!
○ http://www.asciitable.com/
○ Most commonly used in xhtml <, >, /, =, “”, & , az,#,.
XHTML Elements


Labels that identify and structure a document
<element>stuff</element>
 Stuff can be
○ Text
○ Other elements
 Empty (no “stuff”) <element … />

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 about the stuff in-between
the opening and closing tags
 <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 diretory”
Relative URL
C:/
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”
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
Download