cos 125 internet fundamentals and web page design day 11
Post on 21-Dec-2015
218 views
TRANSCRIPT
COS 125COS 125
Internet Fundamentals and Web Internet Fundamentals and Web Page DesignPage Design
Day 11Day 11
AgendaAgenda Quiz 2 GradedQuiz 2 Graded
10 A’s, 2 B’s, 2 C’s and 1 D10 A’s, 2 B’s, 2 C’s and 1 D Much better than Quiz 1Much better than Quiz 1
Capstone Projects Proposals Over DueCapstone Projects Proposals Over Due Timing of deliverables is 10% of GradeTiming of deliverables is 10% of Grade Still missing twoStill missing two
First Capstone Progress Report Due Feb 24First Capstone Progress Report Due Feb 24 Next Class Next Class
Assignment 3 posted Assignment 3 posted Due right after Spring Break Due right after Spring Break
Today is Introduction to Web Design, Using Today is Introduction to Web Design, Using Dreamweaver and Paint Shop ProDreamweaver and Paint Shop Pro
Browser WarsBrowser Wars
1994 Netscape1994 NetscapeCreated multimedia extensionsCreated multimedia extensionsBecame most popular browserBecame most popular browser
1996 Microsoft1996 MicrosoftCreated its own set of non-standard Created its own set of non-standard
extensionsextensionsFor Web designers this became a mess!For Web designers this became a mess!
Had to create two of everythingHad to create two of everything
StandardsStandards
HTML 3.2HTML 3.2First try at standardsFirst try at standardsEnded browser wars except for framesEnded browser wars except for frames
HTML4 and CSSHTML4 and CSSDeprecated elementsDeprecated elementsCascading Style SheetsCascading Style Sheets
XML and xHTMLXML and xHTMLXML creates other languagesXML creates other languagesxHTML is HTML written in XMLxHTML is HTML written in XML
TodayToday
Webpage DesignWebpage Design xHTML, HTML 4.0 and CSSxHTML, HTML 4.0 and CSS >90% Browser Compliance>90% Browser Compliance
xHTMLxHTML Stronger and more flexibleStronger and more flexible StricterStricter 3 Flavors3 Flavors
TransitionalTransitional FramesetFrameset Strict Strict
What we are going doWhat we are going do
Use xHTML & CSSUse xHTML & CSSMore currentMore currentMore useful for large sitesMore useful for large sitesLearning xHTML means you've learnt HTML Learning xHTML means you've learnt HTML
too (same vocabulary, different syntax)too (same vocabulary, different syntax) In Dreamweaver “new document” dialogIn Dreamweaver “new document” dialog
Check “Make Document XHTML Compliant”Check “Make Document XHTML Compliant”Web SiteWeb Site
http://www.cookwood.com/html/http://www.cookwood.com/html/
XHTML Elements Attributes and XHTML Elements Attributes and ValuesValues
MarkupMarkupFormatting instructionsFormatting instructionsDetails between parts of DocumentsDetails between parts of Documents3 types3 types
ElementsElementsAttributesAttributesValuesValues
All in ASCII text!All in ASCII text!
XHTML ElementsXHTML Elements
Labels that identify and structure a documentLabels that identify and structure a document <element>stuff</element><element>stuff</element>
Stuff can be Stuff can be TextText Other elementsOther elements
Empty <element … />Empty <element … />
ExamplesExamples <h1>a header</h1><h1>a header</h1> <em>emphasis</em><em>emphasis</em> <img src=“picture.jpg” /><img src=“picture.jpg” />
Attributes and valuesAttributes and values
Information about the stuff in-between the Information about the stuff in-between the opening and closing tags opening and closing tags <element attribute=“value” > stuff </element><element attribute=“value” > stuff </element>
Attribute=“value”Attribute=“value”Values are allways in quotesValues are allways in quotesValues are allways in lowercaseValues are allways in lowercaseAttributes are specific to elementsAttributes are specific to elementsCan use percentages instead of numbersCan use percentages instead of numbers
Block vs. InlineBlock vs. Inline Some elements are block-level elements and the other Some elements are block-level elements and the other
are inlineare inline Block-level are structural pieces of the document Block-level are structural pieces of the document
Paragraph, headers etc.Paragraph, headers etc. Allways on a new lineAllways on a new line Can containCan contain
Block-level elementsBlock-level elements Inline elementsInline elements texttext
Inline Inline On the same lineOn the same line WordsWords Can containCan contain
Inline elementsInline elements texttext
Parents and childrenParents and children
<element1> <element2></element2> <element1> <element2></element2> <element3></element3> </elememt1><element3></element3> </elememt1>
1 is a parent of 2 & 31 is a parent of 2 & 32 is a child of 12 is a child of 13 is a child of 13 is a child of 12 & 3 are siblings 2 & 3 are siblings
URLsURLs
Absolute URLsAbsolute URLsEntire path to fileEntire path to filehttp://http://perleybrook.umfk.maine.edu/default.htmperleybrook.umfk.maine.edu/default.htmMust use if your are referencing a file not on Must use if your are referencing a file not on
the same server as your web pagethe same server as your web pageRelative URLsRelative URLs
File must be on the same serverFile must be on the same server ../ to go up a directory../ to go up a directory /directory/file.ext to go down a directory /directory/file.ext to go down a directory
Relative URLRelative URL
C:/
web ftp stuff
Index.html
Star.gif
Dog.gifTony.htm
Tony.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. XHTMLHTML vs. XHTML
XHTML must useXHTML must use<!DOCTYPE … ><!DOCTYPE … ><html><html><head></head><head></head><body></body><body></body> </html></html>
XHTML must have closing tagXHTML must have closing tagXHTML is case sensitive (all lowercase)XHTML is case sensitive (all lowercase)
Adding StyleAdding Style Style sheets (CSS)Style sheets (CSS)
Selector{property:”value”,…}Selector{property:”value”,…} Declaration -> property:”value”Declaration -> property:”value” More in Chap 8More in Chap 8
CascadeCascade What happens when more than one rule applies?What happens when more than one rule applies? Inheritance Inheritance
If no rule than inherit from parent elementIf no rule than inherit from parent element Specificity Specificity
If more than one rule applies use the more specific ruleIf more than one rule applies use the more specific rule Location Location
If more than one rule applies and they are are equally specific, than If more than one rule applies and they are are equally specific, than the rule that appears later is usedthe rule that appears later is used
Property valuesProperty values Each CSS property has rules about what values can be acceptedEach CSS property has rules about what values can be accepted Predefined values must NOT be in quotation marksPredefined values must NOT be in quotation marks Length valuesLength values
Number and unitsNumber and units 2em 2 * current font size2em 2 * current font size 40px forty pixels40px forty pixels 20cm twenty centimeters20cm twenty centimeters
PercentagePercentage 20% relative to parent unit20% relative to parent unit
URLSURLS url(path/file.ext)url(path/file.ext)
ColorsColors 16 predefined names16 predefined names
http://www.cookwood.com/html/colors/sixteencolors.htmlhttp://www.cookwood.com/html/colors/sixteencolors.html
rgb(%35,35%,35%)rgb(%35,35%,35%) http://www.w3schools.com/html/html_colors.asphttp://www.w3schools.com/html/html_colors.asp
#AAFF66#AAFF66 http://www.cookwood.com/html/colors/websafecolors.htmlhttp://www.cookwood.com/html/colors/websafecolors.html
Working with Web Page FilesWorking with Web Page Files
Design Site LayoutDesign Site Layout Audience CenteredAudience Centered Design a naming Design a naming
convention for pagesconvention for pages Define site navigationDefine site navigation
FAQ
Contact pages Parts Page
Order page
Info page
Home page
Create a web pageCreate a web page
In dreamweaverIn dreamweaver >File >new>File >new Check make Check make
document xhtml document xhtml compliantcompliant
Create page in Code Create page in Code or design modeor design mode
>file>save as>file>save as Pick folder and namePick folder and name
Microsoft WordMicrosoft Word
Can automatically create web pagesCan automatically create web pagesProblemsProblems
““bloat” codebloat” codeProprietary codeProprietary code
Good for quick jobsGood for quick jobsBad for anything that has to be maintained Bad for anything that has to be maintained
over timeover time
Some general HintsSome general Hints
Web ServersWeb Servers Most have a system for recognizing “home” pagesMost have a system for recognizing “home” pages
Index.html or default.htmIndex.html or default.htm Find out from Server Administrator Find out from Server Administrator
Organize your web projects into foldersOrganize your web projects into folders Images Images Html pagesHtml pages
Check your pages in browser before uploading Check your pages in browser before uploading to serverto server
Use the “inspiration of others”Use the “inspiration of others”
Using DreamweaverUsing Dreamweaver
Dreamweaver TutorialsDreamweaver Tutorials
Dreamweaver SeminarsDreamweaver Seminarshttp://www.macromedia.com/software/dreamwhttp://www.macromedia.com/software/dreamw
eaver/productinfo/ondemand/eaver/productinfo/ondemand/Dreamweaver FeverDreamweaver Fever
http://www.dreamweaverfever.com/http://www.dreamweaverfever.com/Dreamweaver FAQ.comDreamweaver FAQ.com
http://www.dwfaq.com/Tutorials/Basics/http://www.dwfaq.com/Tutorials/Basics/default.aspdefault.asp
Paint Shop ProPaint Shop Pro
Paint Shop Pro tutorialsPaint Shop Pro tutorials
Web Graphics on a BudgetWeb Graphics on a Budgethttp://mardiweb.com/web/http://mardiweb.com/web/
Sumrallworks.comSumrallworks.comhttp://www.sumrallworks.com/freebies/http://www.sumrallworks.com/freebies/
buttonhole/psp/tutorials/link2g.htmbuttonhole/psp/tutorials/link2g.htmPSP Tips From 6PSP Tips From 6thth Dimension Dimension
http://psptips.com/6/http://psptips.com/6/
Assignment Assignment
Create a web page using DreamweaverCreate a web page using DreamweaverSame info as last timeSame info as last timeSave as test3.htmSave as test3.htmFtp to web serverFtp to web serverCos125 assignment3.docCos125 assignment3.doc