HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐...
Transcript of HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐...
![Page 1: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/1.jpg)
StephanieSullivan
HTML&CSSBootcamp
![Page 2: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/2.jpg)
Agenda
• WhatisHTML?• WhatareCascadingStyleSheets(CSS)?• Content–theBasics• SemanticHTML• CSSOverview• ProperPageStructure• StylingwithCSS• Q&A(alongtheway)
![Page 3: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/3.jpg)
StephanieSullivan• Founder/Principal‐W3Conversions‐WebStandardsand
Accessibility• SpeakerandCorporateTrainer• Consultant&sub‐contractorforXHTML/CSSdevelopment• AdobeCommunityExpert• DreamweaverTaskForceforWebStandardsProject(WaSP)• Partner‐CommunityMX.com• Author‐DWMX2004Magic,WebDeveloper’s&Designer’s
Journal(formerlyMXDJ),Adobe’sDevNetCenter,andotherwebpublications
• InternationalAdvisoryBoardforWebDeveloper’sandDesigner’sJournal
• ListMomforWebWeavers&moderatorforSEM2.0
![Page 4: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/4.jpg)
HTML–TheBasics
![Page 5: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/5.jpg)
WhatisHTML?
• HTML,orHypertextMarkupLanguage,isasubsetofSGML
• “Ifeelsooomuchsmarter…NOT!”
• What’sthatreallymean?– Hypertextreferstolinks–buttodayisusedtomeanallwebcode
– MarkupLanguagereferstothelanguage(code)usedtoprovidestructure
![Page 6: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/6.jpg)
HTMLDocuments
• AllHTMLdocumentsconsistofthreeparts:– Doctype
• AppearspriortoallotherHTMLmarkup• DescribeswhatHTMLversionisusedinthedocument
– Head• Enclosedinthe<head>element• Containspagetitle,metadata,linkstostylesheets,scriptsandnon‐rendereddata
– Body• Theactualscreencontent• Enclosedinthe<body>element
![Page 7: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/7.jpg)
HTMLDoctypes
• ADoctypeconsistsofthreeparts:– Declaration– Version– DocumentTypeDeclaration(DTD)URI
• HTML4.01– Twotypes“transitional”and“strict”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
• XHTML1.0– Alsotwotypes“transitional”and“strict”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![Page 8: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/8.jpg)
HeadElement
• Appearsimmediatelyfollowingtheopening<HTML>tag
• Firsttagpairis<title>– Describesthecontentofthedocument
– Thistagisrequired
– Let’shavesomefun…Google:“untitleddocument”
![Page 9: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/9.jpg)
HeadElement
• Metadataisinformationaboutthedocument,notthecontent– Author
– Characterencoding
– Description
– Keywords
• ThemythaboutSearchEnginesandmetadata
![Page 10: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/10.jpg)
HeadElement
• Linkelementsareusedto“connect”thedocumenttostylesheetsandjavascriptfiles
<link href="acme.css" rel="stylesheet" type="text/css">
• StyleandScriptelementscanalsobeembeddedintothedocument
<style>a {color: #4C2DA1;font-size: 12px;font-family: Arial, Helvetica, sans-serif}
</style>
![Page 11: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/11.jpg)
BodyElement
• Thebodyelementcontainsalloftheactualcontentofthepagewhichisvisuallyrenderedbytheuseragent(browser)
• Theviewableareaofthepageintheuseragentiscalledthe“viewport”
![Page 12: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/12.jpg)
TagStructure
• Twotypesoftagstructure– Containers(mynameforthem)
– Empty
• Containerelementshaveanopeningandclosingtagandcontainothercontent
<p>This is a paragraph</p>
• Emptyelementsconsistofasingletagwithno“apparent”closingtag
<img src=“logo.gif” width=“100” height=“85” />
![Page 13: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/13.jpg)
TagSyntax
• Aproperlyformattedtagcanconsistofseveralparts• Thenameoftheelement
<table>• Attributes
<tablewidth=“300”height=“400”>• Closingtag–identicaltotheopeningtag
</table>
• Generally,mosttagattributes,suchaswidthandheight,willbedefinedwithintheCSSandnotaspartofthetagitself–butmoreaboutthatlater
![Page 14: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/14.jpg)
ElementRendering
• TherearetwotypesofrenderingforHTMLelements– Block– Inline
• Blockelementsstackverticallyonscreen– Examples:<div>,<h1>,<table>,<p>
• Inlineelementslineuphorizontallyandwrapwhennecessary– Examples:<img>,<strong>,<span>,<code>
![Page 15: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/15.jpg)
ProperNesting
• Elementscanbenestedwithinotherelements
– Blockelementscancontainbothblockandinlineelements
– Inlineelementscanonlycontaininlineelements• However,thetagsmustbeclosedinthereverseorderin
whichtheywereopened
<p>This text is really <em>cool</em></p>• Incorrect:<p>This text is really <em>cool</p></em>
![Page 16: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/16.jpg)
AquickdemonstrationofHTMLsemantics
![Page 17: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/17.jpg)
CascadingStyleSheets(inplainEnglish)
![Page 18: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/18.jpg)
WhatisCSS?• CascadingStyleSheets,orCSS,governtheseparationofstyle
(orpresentation)fromactualcontent
• CascadingStyleSheetsisaW3Cstandard
• CSS1wasratifiedforuseinDecemberof1996• CSS1containspropertiesforfonts,margins,colors,etc.,thatnearlyallprofilesofCSSneed
• CSS2wasratifiedforuseinMayof1998• CSS2includesalloflevel1andaddsabsolutelypositionedelements,pagebreaks,automaticnumbering,right‐to‐lefttextandotherthings
![Page 19: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/19.jpg)
CSSRealityCheck• Aswithmanytechnologies,CSShassufferedfromaslowadoptionrateduetoseveralkeyfactors:
– Limited(andvarying)browsersupport– Limitedtoolsfordevelopment
• Today,allofthemajorbrowserssupportCSS– Implementationstillvaries–butthedifferencesarerelativelyslight,andthey’regettingbetter…
– EvenInternetExplorer(now)doesdecentCSS!!!
![Page 20: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/20.jpg)
TheBenefitsofCSS
• CSSprovidesfourkeybenefitstoHTMLdesignersanddevelopers
– Designsbecomeeasiertomanagethroughtheeliminationofinlinetagssuchas<font>‐aswellasthebenefitofsite‐widechangesthroughtheuseofexternalstylesheets
– Pagesrendermorequickly(whenusingCSSPositioning)throughtheeliminationofnested<table>tags
– Pagedesignscanbeestablishedforprinting,digitaldevices,etc.
– Pagesbecomemoreaccessible(Section508)tovisitorsusingassistivetechnologies
![Page 21: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/21.jpg)
CSSPrimer• Therearethreemaintypesofrules(orselectors)
– Type• Definestheappearanceofeveryinstanceofagivenelement
h1 {font-family: Arial, Helvetica, sans-serif;font-size: 1.4em;font-weight: bold;}
– Class• Definestheappearanceoftheelementtowhichitisassigned
.content {font-size: 1em;margin-right: 12px;margin-left: 12px;}
– ID• Definestheappearanceofauniqueelementonthepage
#navigation {background-color: #999999;width: 750px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #000000;}
• Eachruleconsistsofaselectorname,apairofcurlybracketsandatleastoneproperty:valuedeclaration
![Page 22: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/22.jpg)
WritingEfficientCSS
•WhatmakesCSSmoreefficient?• ClassvsID
• Avoid“classitis”usingtypeanddescendantselectors
• Useshorthand
•Whatisadescendantselector?
• #nava:link
• #content.podh1
• ululli
![Page 23: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/23.jpg)
UnderstandingtheBoxModel
margin border
padding
Contentwithin
![Page 24: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/24.jpg)
AquickdemonstrationoftheBoxModel
![Page 25: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/25.jpg)
DocumentFlow
• The“flow”isthenaturalorderofoccurrenceoftheelementswithintheHTML
• WhenworkingwithCSSforpagelayout,thedocumentflowimpactsthevisualpositionofpageelements–dependinguponthemethodofpositioning
• Don’tfighttheflow,useit!
![Page 26: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/26.jpg)
TypesofPositioning
• ThefourtypesofpositioningavailableusingCSS:
Static
• Thedefaultlocationoftheelementinthedocumentflow
Relative
• Theelement’spositionisrelativetoitspositioninthedocumentflow
Absolute
• A“XY”coordinatebaseduponitsparentcontainer
Fixed
• A“XY”coordinatebasedontheviewport
![Page 27: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/27.jpg)
AquickdemonstrationofPositioning–andpotentialchallenges
![Page 28: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/28.jpg)
PrinciplesofFloating• Afloatmustbegivenawidth• Afloatmustbegivenadirectionalvalueofleftorright
(thereisnotoporbottom)• Ifyouwantafloattoappearalongsideanotherelement,it
mustprecedethatelementinthesourceorderofthedocument
• Afloatnevercoverstextorinlineimages• Avoidusingawidthonablockelementfollowingafloat;
useamarginonthesamesideofthefloatinstead• Sinceafloatistaken"outoftheflow"ofthedocument,a
floatinsideanothercontainermustbeclearedinorderfortheparentcontainertoencloseitproperly
![Page 29: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/29.jpg)
BewareofFloatDrop
• EvidentwhenonedivstartsbelowthelevelofthedivnexttoitCauses:
• Anelement,likeanimage,thatiswiderthancanfitinthespaceprovided.Thedivwillmovedownuntilitcanfitnexttothefloats.(MakesureclientswhoaretakingcareoftheirownsiteswithContributeareawareoftheirsizespecsandlimitations.)
• 3pxtextjoginInternetExplorer(unaccountedforinyourmath)
![Page 30: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/30.jpg)
AquickdemonstrationofFloating
![Page 31: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/31.jpg)
TypesofPageDesigns
• Therearetwobasicstylesofpagedesigns– The“ice”design
• Thepagewidthisfixed• Elementsdonotgrowtofittheviewport
– The“water”design• Thepagewidthisdeterminedbytheviewportortextsize• Contentresizesand“adjusts”toitssurroundings
• Ofcourse,wecancombinethetwoforanicehybriddesigninwhichsomeelementsresizewhileothersremainfixed
![Page 32: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/32.jpg)
Aquickdemonstrationofdesigntypes
![Page 33: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/33.jpg)
PuttingItAllTogether
![Page 34: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/34.jpg)
TheImportanceofContent
• ThesinglebiggestheadacheinCSSbaseddesigniscausedbythe“wrong”workflow
• Youshouldalwaysbeginwiththecontent• Theactualdesignshouldfocusonpresentingthecontent‐nottheotherwayaround
![Page 35: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/35.jpg)
![Page 36: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/36.jpg)
AnalyzingaLayout
• Where do you start?– Analyze page requirements
• Fixed width centered (or left aligned)?• Stretchy !uid page?• Fluid page with "xed-width columns or
elements?
– Analyze graphics• Decide how to slice• What can be pure CSS and still look like a
graphic?
![Page 37: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/37.jpg)
§Beginbythinkinginrectanglesforoveralldivlayoutandflowofthepage
§Later,you’lldropthoseintoyourHTMLdocumentasemptydivs
Header
Main content
Left column
Right column
Footer
![Page 38: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/38.jpg)
CSSConsiderations
• Atypicalbeginnermistakeistorelytooheavilyonimages
• AnumberofpageelementscanbecreatedusingCSSinsteadofimages
• Whattolookfor…– Areasofflatcolor
– Simpleborders
– Commonlyusedfonts
![Page 39: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/39.jpg)
GIF,JPGorPNG?
• gifsshouldbeusedforareasofflatcolorthatcan’tbepureCSS
• jpgsshouldbeusedforphotos,gradientsanddropshadowsorglows
• pngscannowalsobeused(finallysupportedinIE7)
![Page 40: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/40.jpg)
TransparentBackgrounds
• Lookforareaswheretheimagecanbeexportedasatransparentgifandmattedtothecoloritwillbepositionedon
• Then,useCSSforthebackgroundcolorofthedivbelowit
peach,roundedboxonrustbackgroundcolumn
Slice‐peachwithtransparentBackgroundmattedtorustcolor
mattecolor
![Page 41: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/41.jpg)
UsingNegativeSpace• Othercreativeusesfornegativespace‐fakingatransitionbetweentwo
areas
• Makingadivornavigationaldeviceappeartohaveacreativeshape
Background image placedon right side of button - matches color of the column below. Matted to column background
Background image placedon corner of header - meeting with right column. Matted to header background
![Page 42: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/42.jpg)
UsingRepeatingGraphics
• Pagebackgrounds
• Withcentereddesigns‐holdermayhaveadropshadoworglow‐repeatthoseontheyaxis
• Headings‐usuallyrepeatonthexaxis(thoughafixedwidthwithalefttorightgradientmightrepeatontheyaxis)
• Fauxcolumns‐repeatontheyaxis
![Page 43: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/43.jpg)
UsingMultipleWrappers
• Irregularlyshapes(ordecorativeborders)canbecreatedusingtwoormorewrappers‐‐eachwithitsownbackgroundimage
• Thesecanbestaticwidthorstretchy
![Page 44: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/44.jpg)
MoreMultipleWrappers
• Irregularlyshapedcontainersanddecorativeborderscanbeefficientlyslicedandassembled.
wrappertwobackground
wrapperonebackgroundrepeat‐y
wrapperthreebackground
![Page 45: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/45.jpg)
Aquickdemonstrationofanactualdesign
![Page 46: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/46.jpg)
TheBestLaidPlans…
![Page 47: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/47.jpg)
BustingBugsandCodingProblems
• Isitreallyabug?
• Coulditbeacascadeissue?
• ValidateyourHTMLandCSStoverifytheyaretostandardswithnoerrors
• It’ssimplertocodetostandards(usingabrowserlikeFirefoxtotestalongtheway)andhackasneededforIE
![Page 48: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/48.jpg)
DebuggingwiththeBrowser• PlacebackgroundcolorsintheCSS
foreachdiv• UseFirefoxwithChrisPederick’s
WebDeveloper’sToolbar– Outline>OutlineBlockLevel
Elements– Outline>OutlineCustom
Elements– CSS>EditCSS– CSS>ViewStyleInformation
• Createatestcasewithonlythebasicdivs
![Page 49: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/49.jpg)
MostCommonBugs• FloatDropdueto3pxbugordoublingmargins(starfilter)• Listwhitespace,andotherunaccountedforwhitespacedifferences(strip
whitespaceoradddisplay:inline)• IErequiresacontainertohavedimensions(HasLayout)‐Hollyhackwas
previouslyusedandnowzoom:1inanIEConditionalComment(IECC)• VariousIEMacissues(tanhack‐‐http://www.l‐c‐n.comformoreinfo)IF
you’restillworryingaboutacompletelyunsupportedbrowser• Mozilla’sissuewithmarginsprotrudingfromacontainercausingspace
(removetopand/orbottommarginsofelementinside)• DealingwithInternetExplorer7
– manypreviousbugsfixed– Also“fixed”thestarfilterhack‐*html#selectorName‐youcanstilluseittoselectversionsofIE
priortoIE7withinyourIECC
• UsetheAdobeCSSAdvisorsite(availabledirectlyinAdobeDreamweaverCS3)
![Page 50: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/50.jpg)
MagicBullets‐sometimes• Addposition:relative;
• WehavebeenusingtheHollyhack‐butnow,weswitchfrom:
/* Hides from IE5-mac \*/* html .buggybox {height: 1%;}/* End hide from IE5-mac */
To:zoom:1forIE7‐mustbeinIEConditionalCommenttovalidate
<!--[if IE]><style type="text/css">.buggybox {zoom: 1;}</style><![endif]-->
• CommunityMXhasCustombugsnippetsformosteverybrowser.Noneedtomemorizethem.
![Page 51: HTML & CSS Bootcamp - W3Conversions .:. Web … Sullivan • Founder/Principal ‐ W3Conversions ‐ Web Standards and Accessibility • Speaker and Corporate Trainer • Consultant](https://reader031.fdocuments.us/reader031/viewer/2022030419/5aa63d467f8b9a185d8e5b92/html5/thumbnails/51.jpg)
Q&A