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