web page design day 2. agenda questions assignment 1 posted due march 7 @ 2:05 pm today we begin...
TRANSCRIPT
![Page 1: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/1.jpg)
Web Page Design
Day 2
![Page 2: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/2.jpg)
Agenda Questions Assignment 1 posted
Due March 7 @ 2:05 Pm Today we begin building web pages
Chap 1 of text
![Page 3: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/3.jpg)
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/
![Page 4: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/4.jpg)
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,#,.
![Page 5: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/9.jpg)
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
& &
![Page 10: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/10.jpg)
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”
![Page 11: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/11.jpg)
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”
![Page 12: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/12.jpg)
HTML vs. XHTML
XHTML must use<!DOCTYPE … ><html><head></head><body></body> </html>
XHTML must have closing tag XHTML is case sensitive (all
lowercase)
![Page 13: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/13.jpg)
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>
![Page 14: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/14.jpg)
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
![Page 15: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/17.jpg)
Microsoft Word
Can automatically create web pagesProblems
○ “bloat” code○ Proprietary code
Good for quick jobsBad for anything that has to be maintained
over time
![Page 18: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/18.jpg)
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
![Page 19: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/19.jpg)
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
![Page 20: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/20.jpg)
COS 125 Web Site http://perleybrook.umfk.maine.edu/classes/cos125/
![Page 21: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/21.jpg)
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”
![Page 22: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/22.jpg)
Using Dreamweaver
![Page 23: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/23.jpg)
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
![Page 24: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/24.jpg)
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
![Page 25: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/25.jpg)
Paint Shop Pro
![Page 26: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/26.jpg)
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/
![Page 27: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062314/56649ea35503460f94ba74b3/html5/thumbnails/27.jpg)
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