web page design day 2. agenda questions assignment 1 posted due march 7 @ 2:05 pm today we begin...
Post on 12-Jan-2016
218 Views
Preview:
TRANSCRIPT
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 currentMore useful for large sitesLearning 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 instructionsDetails between parts of Documents3 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 <, >, /, =, “”, & , a-
z,#,.
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/elemen
ts.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 quotesValues are allways in lowercaseAttributes are specific to elementsCan 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/blockvsinline.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 spaceI am Tony. I am Tony.
HTML Text limited to ASCII http://www.lookuptables.com/ © ©
xHTML uses UnicodeASCII + http://www1.tip.nl/~t876506/EntitiesXHTML1.htm
l
& &
URLs & Filenames Use lowercase in the names of files Extension should be .htm or .html for
xHTML pages Absolute URLs
Entire path to filehttp://perleybrook.umfk.maine.edu/default.htmMust 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
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 CenteredDesign a naming
convention for pagesDefine site navigation
FAQ
Contact pages Parts Page
Order page
Info page
Home page
Microsoft Word
Can automatically create web pagesProblems
○ “bloat” code○ Proprietary code
Good for quick jobsBad 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/
word_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/pasteClick 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 pagesThis 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 >newCheck make document
xhtml compliantCreate 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 Feverhttp://www.dreamweaverfever.com/
Dreamweaver FAQ.comhttp://www.dwfaq.com/Tutorials/Basics/
default.asp
Paint Shop Pro
Paint Shop Pro tutorials
Web Graphics on a Budgethttp://mardiweb.com/web/
Sumrallworks.comhttp://www.sumrallworks.com/freebies/
buttonhole/psp/tutorials/link2g.htm
PSP Tips From 6th Dimensionhttp://psptips.com/6/
Assignment 1
Cos 125 assignment 1.doc Goals
Confirm students know MS wordMake sure students know how to use COS
125 technologies (FTP, backboard, etc)Have students demonstrate some creative
abilities
top related