book

Learning Web Design, 4th Edition

by Jennifer Robbins

August 2012

Beginner

619 pages

19h 7m

English

O'Reilly Media, Inc.

Read now

Unlock full access

How This Book Is OrganizedAcknowledgmentsAbout the AuthorUsing Code ExamplesWe’d Like to Hear from You
Where Do I Start?What Does a Web Designer Do?DesignUser Experience, Interaction, and User Interface designVisual (graphic) designDevelopmentAuthoring/markupStylingScripting and programmingContent strategy and creationMultimediaWhat Languages Do I Need to Learn?Hypertext Markup Language (HTML)Cascading Style Sheets (CSS)JavaScript/DOM scriptingServer-side programmingWhat Do I Need to Buy?EquipmentSoftwareWeb page authoringHTML editorsImage-editing and drawing softwareInternet toolsWhat You’ve LearnedTest Yourself
The Internet Versus the WebServing Up Your InformationA Word About BrowsersWeb Page Addresses (URLs)The parts of a URLDefault filesThe Anatomy of a Web PageHTML documentsA quick introduction to HTML markupBut where are the pictures?Adding a little stylePutting It All TogetherTest Yourself
A Dizzying Multitude of DevicesFor further readingSticking with the StandardsFor further readingProgressive EnhancementFor further readingResponsive Web DesignFor further readingOne Web for All (Accessibility)For further readingThe Need for Speed (Site Performance)For further readingTest Yourself
A Web Page, Step by StepBefore We Begin, Launch a Text EditorCreating a new document in Notepad (Windows)Creating a new document in TextEdit (Mac OS X)Step 1: Start with ContentLearning from step 1Step 2: Give the Document StructureIntroducing...HTML elementsBasic document structureStep 3: Identify Text ElementsIntroducing...semantic markupBlock and inline elementsDefault stylesStep 4: Add an ImageEmpty elementsAttributesStep 5: Change the Look with a Style SheetWhen Good Pages Go BadValidating Your DocumentsTest YourselfElement Review: Document Structure
ParagraphsHeadingsHeading groupsListsUnordered listsOrdered listsDescription listsMore Content ElementsLong quotationsPreformatted textFiguresOrganizing Page ContentSections and articlesAside (sidebars)NavigationHeaders and footersHeadersFootersAddressesThe Inline Element RoundupText-level (inline) elementsEmphasized textImportant textThe previously presentational elements that are sticking around in HTML5 with fancy new semantic definitionsbisusmallShort quotationsAbbreviations and acronymsCitationsDefining termsProgram code elementsSubscript and superscriptHighlighted textTimes and machine-readable informationInserted and deleted textAdding BreaksLine breaksWord breaksGeneric Elements (div and span)Divide it up with a divGet inline with spanid and class attributesIdentification with idClassification with classSome Special CharactersPutting It All TogetherTest YourselfElement Review: Text
The href AttributeLinking to Pages on the WebLinking Within Your Own SiteLinking within a directoryLinking to a lower directoryLinking to a higher directorySite root relative pathnamesIt’s the same for imagesLinking to a specific point in a pageStep 1: Identifying the destinationStep 2: Linking to the destinationLinking to a fragment in another documentTargeting a New Browser WindowA new window with markupPop-up windowsMail LinksTelephone LinksTest YourselfElement Review: Links
First, a Word on Image FormatsThe img ElementProviding the location with srcProviding alternate text with altProviding width and height dimensionsMatch values with actual pixel sizeA Window in a WindowTest YourselfElement Review: Images

How Tables Are UsedMinimal Table StructureTable HeadersSpanning CellsColumn spansRow spansTable AccessibilityDescribing table contentConnecting cells and headersWrapping Up TablesTest YourselfElement Review: Tables
How Forms WorkFrom data entry to responseThe form ElementThe action attributeThe method attributeThe POST methodThe GET methodVariables and ContentThe name attributeNaming your variablesThe Great Form Control RoundupText entry controlsSingle-line text fieldMultiline text entry fieldSpecialized text entry fieldsPassword entry fieldHTML5 text inputsSubmit and reset buttonsRadio and checkbox buttonsRadio buttonsCheckbox buttonsMenusDrop-down menusScrolling menusGrouping menu optionsFile selection controlHidden controlsDate and time controls (HTML5)Numerical inputs (HTML5)Color selector (HTML5)Form Accessibility FeaturesLabelsfieldset and legendForm Layout and DesignUsable formsStyling FormsTest YourselfElement Review: Forms
A Funny Thing Happened on the Way to XHTML 2A “don’t blink or you’ll miss it” history of HTMLEnter XHTMLHello HTML5!In the Markup DepartmentA minimal DOCTYPEElements and attributesNew form input typesNew global attributesObsolete HTML 4.01 MarkupMeet the APIsVideo and AudioThe good news and the bad newsHow media formats workMeet the video formatsMeet the audio formatsAdding a video to a pageVideo for all!Adding audio to a pageCanvasThe canvas elementDrawing with JavaScriptFinal WordTest Yourself
The Benefits of CSSThe power of CSSHow Style Sheets Work1. Marking up the document2. Writing the rulesSelectorsDeclarations3. Attaching the styles to the documentThe Big ConceptsInheritanceDocument structureParents and childrenPass it onConflicting styles: the cascadeSpecificityRule orderThe box modelGrouped selectorsMoving Forward with CSSBooksOnline resourcesCSS toolsTest Yourself
The Font PropertiesSpecifying the font nameFont limitationsGeneric font familiesFont stack strategiesSpecifying font sizePercentage valuesEm measurementsEm best practicesPixels and absolute measurementsWorking with keywordsFont weight (boldness)Font style (italics)Font variant (small caps)The shortcut font propertyChanging Text ColorA Few More Selector TypesDescendant selectorsID selectorsClass selectorsSpecificity 101Text Line AdjustmentsLine heightIndentsHorizontal alignmentUnderlines and Other “Decorations”Changing CapitalizationSpaced OutText ShadowChanging List Bullets and NumbersChoosing a MarkerMarker positionMake your own bulletsTest YourselfCSS Review: Font and Text Properties
Specifying Color ValuesColor namesRGB color valuesA word about RGB colorPicking a colorWriting RGB values in style sheetsAbout hexadecimal valuesRGBa colorSumming up color valuesForeground ColorBackground ColorPlaying with OpacityIntroducing...Pseudo-Class SelectorsLink pseudo-classesUser action pseudo-classesFocus stateHover stateActive statePutting it all togetherOther pseudo-class selectorsPseudo-Element SelectorsFirst letter and lineGenerated content with :before and :afterAttribute SelectorsBackground ImagesAdding a background imageControlling tiling directionBackground positionBackground attachmentThe Shorthand background PropertyMultiple backgroundsLike a Rainbow (Gradients)Linear gradientsRadial gradientsIntroducing vendor prefixesDesigning gradientsFinally, External Style SheetsUsing the link elementImporting with @importModular Style SheetsTest YourselfCSS Review: Color and Background Properties
The Element BoxSpecifying Box DimensionsSizing the content box (default)The border-box modelSpecifying heightHandling overflowPaddingThe shorthand padding propertyBordersBorder styleBorder width (thickness)Border colorCombining style, width, and colorRounded corners with border-radiusElliptical cornersBrowser supportPicture-perfect bordersMarginsMargin behaviorCollapsing marginsMargins on inline elementsNegative marginsAssigning Display RolesAdding Drop Shadows to BoxesTest YourselfCSS Review: Basic Box Properties
Normal FlowFloatingFloating inline and block elementsFloating an inline text elementFloating block elementsClearing floated elementsFloating multiple elementsContaining floatsUsing floats to create columnsPositioning BasicsTypes of positioningSpecifying positionRelative PositioningAbsolute PositioningContaining blocksSpecifying positionPixel measurementsPercentage valuesStacking orderFixed PositioningTest YourselfCSS Review: Floating and Positioning Properties
Page Layout StrategiesFixed layoutsHow to create fixed-width layoutsFluid page designHow to create fluid layoutsElastic layoutsHow to create elastic layoutsHybrid layoutsWhich one should I use?Page Layout TechniquesUsing the examplesMulticolumn Layouts Using FloatsTwo columns, fluid layoutTwo columns, fixed-width layoutTwo columns, fixed width, centeredThree columns, fluid layoutAny order columns using negative marginsPositioned LayoutThree columns, positioned, fluid layoutThree columns, positioned, fixedTop-to-Bottom Column BackgroundsFaux columns for fluid layoutsThree faux columnsTest Yourself
Ease-y Does It (CSS Transitions)Transition basicsSpecifying the propertyHow long should it take?Timing functionsSetting a delayThe shorthand transition propertyApplying multiple transitionsA transition for all occasionsCSS TransformsTransforming the angle (rotate)Transforming the position (translate)Transforming the size (scale)Making it slanty (skew)Applying multiple transformsSmooooooth transforms3-D transformsKeyframe AnimationEstablishing the keyframesAdding animation propertiesTest YourselfCSS Review: Transitions, Transforms, and Animation
A Clean Slate (CSS Reset)Image Replacement TechniquesCSS SpritesStyling FormsThe markupStep 1: Adding basic stylesStep 2: Aligning labels and inputsStep 3: Fixing fieldsets and minor labelsStep 4: Adjusting the buttonsStyling TablesSeparated and collapsed bordersSeparated border modelCollapsed border modelEmpty cellsBasic Responsive Web DesignA simple exampleHow it worksSetting the viewportFluid layoutsMaking images flexibleMedia query magicMedia queries in the document head“Mobile first” media queriesThe tricky bitsChoosing breakpointsResponsive imagesOne size doesn’t fit allResponsive limitationsWrapping Up Style SheetsTest YourselfCSS Review: Table Properties
What Is JavaScript?What it isn’tWhat it isWhat JavaScript can doAdding JavaScript to a PageEmbedded scriptExternal scriptsScript placementThe Anatomy of a ScriptThe basicsStatementsCommentsVariablesData typesArraysComparison operatorsEqual versus identicalMathematical operatorsIf/else statementsThat covers “if,” but what about “else”?LoopsFunctionsNative functionsCustom functionsArgumentsReturning a valueVariable scope and the var keywordThe Browser ObjectEventsAs an HTML attributeAs a methodaddEventListenerPutting It All TogetherExample 1: A tale of two argumentsExample 2: The longest wordTest Yourself
Meet the DOMThe node treeAccessing DOM nodesBy element nameBy id attribute valueBy class attribute valueBy selectorAccessing an attribute valueManipulating nodesAdding and removing elementsFor further readingPolyfillsHTML5 shiv (or shim)ModernizrSelectivizrRespond.jsJavaScript LibrariesA few libraries you ought to knowHow to use a JS library (jQuery)Download the jQuery .js fileAdd it to your documentGet “ready”Scripting with jQueryBut what if I don’t know how to write scripts?Big FinishTest Yourself
Image SourcesCreating your own imagesStock photography and illustrationsClip art and iconsHire a designerMeet the FormatsThe ubiquitous GIF8-bit indexed colorGIF compressionTransparencyInterlacingAnimationThe photogenic JPEG24-bit Truecolor imagesLossy compressionProgressive JPEGsDecompressionThe powerful PNGMultiple image formatsTransparencyProgressive display (interlacing)Gamma correctionEmbedded textWhen to use PNGsChoosing the best formatSaving an image in your chosen formatImage Size and ResolutionGoodbye inches, hello pixels!Pixel madnessResizing imagesWorking with TransparencyHow binary transparency worksHow alpha transparency worksMaking transparent GIFs and PNGsAvoiding “halos”Adding transparency to flattened imagesIntroduction to SVGDrawing with XMLSVG toolsAdding SVG to a pageBut wait...there’s more!Browser supportFor further readingSumming Up ImagesTest Yourself
General Image Optimization StrategiesOptimizing GIFsReducing the number of colorsReducing ditheringUsing the Lossy filterDesigning for GIF compressionKeep it flatHorizontal stripesSumming up GIF optimizationOptimizing JPEGsGetting to know JPEG compressionAvoid detailAvoid flat colorsBe aggressive with compressionChoose optimized JPEGsBlurring or smoothing the imageSelective quality (Fireworks)Summing up JPEG optimizationOptimizing PNGsPNG-24PNG-8Optimize to File SizeOptimization in ReviewTest Yourself
Chapter 1: Where Do I Start?Chapter 2: How the Web WorksChapter 3: Some Big Concepts You Need to KnowChapter 4: Creating a Simple Page (HTML Overview)Chapter 5: Marking Up TextExercise 5-1Exercise 5-2Exercise 5-3Chapter 6: Adding LinksExercise 6-1Exercise 6-2Exercise 6-3Exercise 6-4Exercise 6-5Exercise 6-6Exercise 6-7Chapter 7: Adding ImagesExercise 7-1Chapter 8: Basic Table MarkupExercise 8-1Exercise 8-2Exercise 8-3Exercise 8-4Chapter 9: FormsExercises 9-1 through 9-4: Final source documentChapter 10: What’s Up, HTML5?Chapter 11: CSS OrientationExercise 11-1Chapter 12: Formatting TextExercises 12-1 through 12-3Chapter 13: Colors and BackgroundsExercise 13-1Exercise 13-2Exercise 13-3Exercise 13-4Exercise 13-5Exercise 13-6Exercise 13-7Exercise 13-8Chapter 14: Thinking Inside the BoxExercise 14-1Exercise 14-2Exercise 14-3Chapter 15: Floating and PositioningExercise 15-1Exercise 15-2Exercise 15-3Exercise 15-4Exercise 15-5Chapter 16: Page Layout with CSSExercise 16-1Exercise 16-2Chapter 17: Transitions, Transforms, and AnimationExercise 17-1Exercise 17-2Chapter 18: CSS TechniquesExercises 18-1 through 18-3Chapter 19: Introduction to JavaScriptExercise 19-1Exercise 19-2Chapter 20: Using JavaScriptChapter 21: Web Graphics BasicsChapter 22: Lean and Mean Web Graphics

Content preview from Learning Web Design, 4th Edition

Colophon

Our look is the result of reader comments, our own experimentation, and feedback from distribution channels. Distinctive covers complement our distinctive approach to technical topics, breathing personality and life into potentially dry subjects. The text font is Linotype Birka; the heading font is Adobe Myriad Pro.