COS 125 - Ecom and COS classes
Download
Report
Transcript COS 125 - Ecom and COS classes
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/
© ©
xHTML uses Unicode
ASCII +
http://www1.tip.nl/~t876506/EntitiesXHTML1.ht
ml
& &
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