Learning Web Design. A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics. 4th Edition

Spis treści książki

• Learning Web Design: A Beginners Guide to HTML, CSS, JavaScript, and Web Graphics
• Preface
  • How This Book Is Organized
  • Acknowledgments
  • About the Author
  • Using Code Examples
  • Wed Like to Hear from You
• I. Getting Started
  • 1. Where Do I Start?
    • Where Do I Start?
    • What Does a Web Designer Do?
      • Design
        • User Experience, Interaction, and User Interface design
        • Visual (graphic) design
      • Development
        • Authoring/markup
        • Styling
        • Scripting and programming
      • Content strategy and creation
      • Multimedia
    • What Languages Do I Need to Learn?
      • Hypertext Markup Language (HTML)
      • Cascading Style Sheets (CSS)
      • JavaScript/DOM scripting
      • Server-side programming
    • What Do I Need to Buy?
      • Equipment
      • Software
        • Web page authoring
        • HTML editors
        • Image-editing and drawing software
        • Internet tools
    • What Youve Learned
    • Test Yourself
  • 2. How the Web Works
    • The Internet Versus the Web
    • Serving Up Your Information
    • A Word About Browsers
    • Web Page Addresses (URLs)
      • The parts of a URL
      • Default files
    • The Anatomy of a Web Page
      • HTML documents
      • A quick introduction to HTML markup
      • But where are the pictures?
      • Adding a little style
    • Putting It All Together
    • Test Yourself
  • 3. Some Big Concepts You Need to Know
    • A Dizzying Multitude of Devices
      • For further reading
    • Sticking with the Standards
      • For further reading
    • Progressive Enhancement
      • For further reading
    • Responsive Web Design
      • For further reading
    • One Web for All (Accessibility)
      • For further reading
    • The Need for Speed (Site Performance)
      • For further reading
    • Test Yourself
• II. HTML Markup for Structure
  • 4. Creating a Simple Page: (HTML Overview)
    • A Web Page, Step by Step
    • Before We Begin, Launch a Text Editor
      • Creating a new document in Notepad (Windows)
      • Creating a new document in TextEdit (Mac OS X)
    • Step 1: Start with Content
      • Learning from step 1
    • Step 2: Give the Document Structure
      • Introducing...HTML elements
      • Basic document structure
    • Step 3: Identify Text Elements
      • Introducing...semantic markup
      • Block and inline elements
      • Default styles
    • Step 4: Add an Image
      • Empty elements
      • Attributes
    • Step 5: Change the Look with a Style Sheet
    • When Good Pages Go Bad
    • Validating Your Documents
    • Test Yourself
    • Element Review: Document Structure
  • 5. Marking Up Text
    • Paragraphs
    • Headings
      • Heading groups
    • Lists
      • Unordered lists
      • Ordered lists
      • Description lists
    • More Content Elements
      • Long quotations
      • Preformatted text
      • Figures
    • Organizing Page Content
      • Sections and articles
      • Aside (sidebars)
      • Navigation
      • Headers and footers
        • Headers
        • Footers
      • Addresses
    • The Inline Element Roundup
      • Text-level (inline) elements
        • Emphasized text
        • Important text
        • The previously presentational elements that are sticking around in HTML5 with fancy new semantic definitions
          • b
          • i
          • s
          • u
          • small
        • Short quotations
        • Abbreviations and acronyms
        • Citations
        • Defining terms
        • Program code elements
        • Subscript and superscript
        • Highlighted text
        • Times and machine-readable information
        • Inserted and deleted text
      • Adding Breaks
        • Line breaks
        • Word breaks
    • Generic Elements (div and span)
      • Divide it up with a div
      • Get inline with span
      • id and class attributes
        • Identification with id
        • Classification with class
    • Some Special Characters
    • Putting It All Together
    • Test Yourself
    • Element Review: Text
  • 6. Adding Links
    • The href Attribute
    • Linking to Pages on the Web
    • Linking Within Your Own Site
      • Linking within a directory
      • Linking to a lower directory
      • Linking to a higher directory
      • Site root relative pathnames
      • Its the same for images
      • Linking to a specific point in a page
        • Step 1: Identifying the destination
        • Step 2: Linking to the destination
      • Linking to a fragment in another document
    • Targeting a New Browser Window
      • A new window with markup
      • Pop-up windows
    • Mail Links
    • Telephone Links
    • Test Yourself
    • Element Review: Links
  • 7. Adding Images
    • First, a Word on Image Formats
    • The img Element
      • Providing the location with src
      • Providing alternate text with alt
      • Providing width and height dimensions
        • Match values with actual pixel size
    • A Window in a Window
    • Test Yourself
    • Element Review: Images
  • 8. Table Markup
    • How Tables Are Used
    • Minimal Table Structure
    • Table Headers
    • Spanning Cells
      • Column spans
      • Row spans
    • Table Accessibility
      • Describing table content
      • Connecting cells and headers
    • Wrapping Up Tables
    • Test Yourself
    • Element Review: Tables
  • 9. Forms
    • How Forms Work
      • From data entry to response
    • The form Element
      • The action attribute
      • The method attribute
        • The POST method
        • The GET method
    • Variables and Content
      • The name attribute
      • Naming your variables
    • The Great Form Control Roundup
      • Text entry controls
        • Single-line text field
        • Multiline text entry field
      • Specialized text entry fields
        • Password entry field
        • HTML5 text inputs
      • Submit and reset buttons
      • Radio and checkbox buttons
        • Radio buttons
        • Checkbox buttons
      • Menus
        • Drop-down menus
        • Scrolling menus
        • Grouping menu options
      • File selection control
      • Hidden controls
      • Date and time controls (HTML5)
      • Numerical inputs (HTML5)
      • Color selector (HTML5)
    • Form Accessibility Features
      • Labels
      • fieldset and legend
    • Form Layout and Design
      • Usable forms
      • Styling Forms
    • Test Yourself
    • Element Review: Forms
  • 10. Whats Up, HTML5?
    • A Funny Thing Happened on the Way to XHTML 2
      • A dont blink or youll miss it history of HTML
      • Enter XHTML
      • Hello HTML5!
    • In the Markup Department
      • A minimal DOCTYPE
      • Elements and attributes
        • New form input types
        • New global attributes
        • Obsolete HTML 4.01 Markup
    • Meet the APIs
    • Video and Audio
      • The good news and the bad news
      • How media formats work
        • Meet the video formats
        • Meet the audio formats
      • Adding a video to a page
        • Video for all!
      • Adding audio to a page
    • Canvas
      • The canvas element
      • Drawing with JavaScript
    • Final Word
    • Test Yourself
• III. CSS for Presentation
  • 11. Cascading Style Sheets Orientation
    • The Benefits of CSS
      • The power of CSS
    • How Style Sheets Work
      • 1. Marking up the document
      • 2. Writing the rules
        • Selectors
        • Declarations
      • 3. Attaching the styles to the document
    • The Big Concepts
      • Inheritance
        • Document structure
        • Parents and children
        • Pass it on
      • Conflicting styles: the cascade
        • Specificity
        • Rule order
      • The box model
      • Grouped selectors
    • Moving Forward with CSS
      • Books
      • Online resources
      • CSS tools
    • Test Yourself
  • 12. Formatting Text: (Plus More selectors)
    • The Font Properties
      • Specifying the font name
        • Font limitations
        • Generic font families
        • Font stack strategies
      • Specifying font size
        • Percentage values
        • Em measurements
        • Em best practices
        • Pixels and absolute measurements
        • Working with keywords
      • Font weight (boldness)
      • Font style (italics)
      • Font variant (small caps)
      • The shortcut font property
    • Changing Text Color
    • A Few More Selector Types
      • Descendant selectors
      • ID selectors
      • Class selectors
      • Specificity 101
    • Text Line Adjustments
      • Line height
      • Indents
      • Horizontal alignment
    • Underlines and Other Decorations
    • Changing Capitalization
    • Spaced Out
    • Text Shadow
    • Changing List Bullets and Numbers
      • Choosing a Marker
      • Marker position
      • Make your own bullets
    • Test Yourself
    • CSS Review: Font and Text Properties
  • 13. Colors and Backgrounds: (Plus Even More Selectors and External Style Sheets)
    • Specifying Color Values
      • Color names
      • RGB color values
        • A word about RGB color
        • Picking a color
        • Writing RGB values in style sheets
        • About hexadecimal values
      • RGBa color
      • Summing up color values
    • Foreground Color
    • Background Color
    • Playing with Opacity
    • Introducing...Pseudo-Class Selectors
      • Link pseudo-classes
      • User action pseudo-classes
        • Focus state
        • Hover state
        • Active state
      • Putting it all together
      • Other pseudo-class selectors
    • Pseudo-Element Selectors
      • First letter and line
      • Generated content with :before and :after
    • Attribute Selectors
    • Background Images
      • Adding a background image
      • Controlling tiling direction
      • Background position
      • Background attachment
    • The Shorthand background Property
      • Multiple backgrounds
    • Like a Rainbow (Gradients)
      • Linear gradients
      • Radial gradients
      • Introducing vendor prefixes
      • Designing gradients
    • Finally, External Style Sheets
      • Using the link element
      • Importing with @import
      • Modular Style Sheets
    • Test Yourself
    • CSS Review: Color and Background Properties
  • 14. Thinking Inside the Box: (Padding, Borders, and Margins)
    • The Element Box
    • Specifying Box Dimensions
      • Sizing the content box (default)
      • The border-box model
      • Specifying height
      • Handling overflow
    • Padding
      • The shorthand padding property
    • Borders
      • Border style
      • Border width (thickness)
      • Border color
      • Combining style, width, and color
      • Rounded corners with border-radius
        • Elliptical corners
        • Browser support
      • Picture-perfect borders
    • Margins
      • Margin behavior
        • Collapsing margins
        • Margins on inline elements
        • Negative margins
    • Assigning Display Roles
    • Adding Drop Shadows to Boxes
    • Test Yourself
    • CSS Review: Basic Box Properties
  • 15. Floating and Positioning
    • Normal Flow
    • Floating
      • Floating inline and block elements
        • Floating an inline text element
        • Floating block elements
      • Clearing floated elements
      • Floating multiple elements
      • Containing floats
      • Using floats to create columns
    • Positioning Basics
      • Types of positioning
      • Specifying position
    • Relative Positioning
    • Absolute Positioning
      • Containing blocks
      • Specifying position
        • Pixel measurements
        • Percentage values
      • Stacking order
    • Fixed Positioning
    • Test Yourself
    • CSS Review: Floating and Positioning Properties
  • 16. Page Layout with CSS
    • Page Layout Strategies
      • Fixed layouts
        • How to create fixed-width layouts
      • Fluid page design
        • How to create fluid layouts
      • Elastic layouts
        • How to create elastic layouts
      • Hybrid layouts
      • Which one should I use?
    • Page Layout Techniques
      • Using the examples
    • Multicolumn Layouts Using Floats
      • Two columns, fluid layout
      • Two columns, fixed-width layout
      • Two columns, fixed width, centered
      • Three columns, fluid layout
      • Any order columns using negative margins
    • Positioned Layout
      • Three columns, positioned, fluid layout
      • Three columns, positioned, fixed
    • Top-to-Bottom Column Backgrounds
      • Faux columns for fluid layouts
      • Three faux columns
    • Test Yourself
  • 17. Transitions, Transforms, and Animation
    • Ease-y Does It (CSS Transitions)
      • Transition basics
        • Specifying the property
        • How long should it take?
      • Timing functions
      • Setting a delay
      • The shorthand transition property
      • Applying multiple transitions
      • A transition for all occasions
    • CSS Transforms
      • Transforming the angle (rotate)
      • Transforming the position (translate)
      • Transforming the size (scale)
      • Making it slanty (skew)
      • Applying multiple transforms
      • Smooooooth transforms
      • 3-D transforms
    • Keyframe Animation
      • Establishing the keyframes
      • Adding animation properties
    • Test Yourself
    • CSS Review: Transitions, Transforms, and Animation
  • 18. CSS Techniques
    • A Clean Slate (CSS Reset)
    • Image Replacement Techniques
    • CSS Sprites
    • Styling Forms
      • The markup
      • Step 1: Adding basic styles
      • Step 2: Aligning labels and inputs
      • Step 3: Fixing fieldsets and minor labels
      • Step 4: Adjusting the buttons
    • Styling Tables
      • Separated and collapsed borders
        • Separated border model
        • Collapsed border model
      • Empty cells
    • Basic Responsive Web Design
      • A simple example
      • How it works
      • Setting the viewport
      • Fluid layouts
      • Making images flexible
      • Media query magic
        • Media queries in the document head
        • Mobile first media queries
      • The tricky bits
        • Choosing breakpoints
        • Responsive images
        • One size doesnt fit all
        • Responsive limitations
    • Wrapping Up Style Sheets
    • Test Yourself
    • CSS Review: Table Properties
• IV. JavaScript for Behaviors
  • 19. Introduction to JavaScript
    • What Is JavaScript?
      • What it isnt
      • What it is
      • What JavaScript can do
    • Adding JavaScript to a Page
      • Embedded script
      • External scripts
      • Script placement
    • The Anatomy of a Script
      • The basics
        • Statements
        • Comments
      • Variables
        • Data types
        • Arrays
      • Comparison operators
        • Equal versus identical
        • Mathematical operators
      • If/else statements
        • That covers if, but what about else?
      • Loops
      • Functions
        • Native functions
        • Custom functions
        • Arguments
        • Returning a value
      • Variable scope and the var keyword
    • The Browser Object
    • Events
      • As an HTML attribute
      • As a method
      • addEventListener
    • Putting It All Together
      • Example 1: A tale of two arguments
      • Example 2: The longest word
    • Test Yourself
  • 20. Using JavaScript
    • Meet the DOM
      • The node tree
      • Accessing DOM nodes
        • By element name
        • By id attribute value
        • By class attribute value
        • By selector
        • Accessing an attribute value
      • Manipulating nodes
      • Adding and removing elements
      • For further reading
    • Polyfills
      • HTML5 shiv (or shim)
      • Modernizr
      • Selectivizr
      • Respond.js
    • JavaScript Libraries
      • A few libraries you ought to know
      • How to use a JS library (jQuery)
        • Download the jQuery .js file
        • Add it to your document
        • Get ready
      • Scripting with jQuery
      • But what if I dont know how to write scripts?
    • Big Finish
    • Test Yourself
• V. Creating Web Graphics
  • 21. Web Graphics Basics
    • Image Sources
      • Creating your own images
      • Stock photography and illustrations
      • Clip art and icons
      • Hire a designer
    • Meet the Formats
      • The ubiquitous GIF
        • 8-bit indexed color
        • GIF compression
        • Transparency
        • Interlacing
        • Animation
      • The photogenic JPEG
        • 24-bit Truecolor images
        • Lossy compression
        • Progressive JPEGs
        • Decompression
      • The powerful PNG
        • Multiple image formats
        • Transparency
        • Progressive display (interlacing)
        • Gamma correction
        • Embedded text
        • When to use PNGs
      • Choosing the best format
      • Saving an image in your chosen format
    • Image Size and Resolution
      • Goodbye inches, hello pixels!
      • Pixel madness
      • Resizing images
    • Working with Transparency
      • How binary transparency works
      • How alpha transparency works
      • Making transparent GIFs and PNGs
        • Avoiding halos
        • Adding transparency to flattened images
    • Introduction to SVG
      • Drawing with XML
      • SVG tools
      • Adding SVG to a page
      • But wait...theres more!
      • Browser support
      • For further reading
    • Summing Up Images
    • Test Yourself
  • 22. Lean and Mean Web Graphics
    • General Image Optimization Strategies
    • Optimizing GIFs
      • Reducing the number of colors
      • Reducing dithering
      • Using the Lossy filter
      • Designing for GIF compression
        • Keep it flat
        • Horizontal stripes
      • Summing up GIF optimization
    • Optimizing JPEGs
      • Getting to know JPEG compression
        • Avoid detail
        • Avoid flat colors
      • Be aggressive with compression
      • Choose optimized JPEGs
      • Blurring or smoothing the image
      • Selective quality (Fireworks)
      • Summing up JPEG optimization
    • Optimizing PNGs
      • PNG-24
      • PNG-8
    • Optimize to File Size
    • Optimization in Review
    • Test Yourself
• A. Answers
  • Chapter 1: Where Do I Start?
  • Chapter 2: How the Web Works
  • Chapter 3: Some Big Concepts You Need to Know
  • Chapter 4: Creating a Simple Page (HTML Overview)
  • Chapter 5: Marking Up Text
    • Exercise 5-1
    • Exercise 5-2
    • Exercise 5-3
  • Chapter 6: Adding Links
    • Exercise 6-1
    • Exercise 6-2
    • Exercise 6-3
    • Exercise 6-4
    • Exercise 6-5
    • Exercise 6-6
    • Exercise 6-7
  • Chapter 7: Adding Images
    • Exercise 7-1
  • Chapter 8: Basic Table Markup
    • Exercise 8-1
    • Exercise 8-2
    • Exercise 8-3
    • Exercise 8-4
  • Chapter 9: Forms
    • Exercises 9-1 through 9-4: Final source document
  • Chapter 10: Whats Up, HTML5?
  • Chapter 11: CSS Orientation
    • Exercise 11-1
  • Chapter 12: Formatting Text
    • Exercises 12-1 through 12-3
  • Chapter 13: Colors and Backgrounds
    • Exercise 13-1
    • Exercise 13-2
    • Exercise 13-3
    • Exercise 13-4
    • Exercise 13-5
    • Exercise 13-6
    • Exercise 13-7
    • Exercise 13-8
  • Chapter 14: Thinking Inside the Box
    • Exercise 14-1
    • Exercise 14-2
    • Exercise 14-3
  • Chapter 15: Floating and Positioning
    • Exercise 15-1
    • Exercise 15-2
    • Exercise 15-3
    • Exercise 15-4
    • Exercise 15-5
  • Chapter 16: Page Layout with CSS
    • Exercise 16-1
    • Exercise 16-2
  • Chapter 17: Transitions, Transforms, and Animation
    • Exercise 17-1
    • Exercise 17-2
  • Chapter 18: CSS Techniques
    • Exercises 18-1 through 18-3
  • Chapter 19: Introduction to JavaScript
    • Exercise 19-1
    • Exercise 19-2
  • Chapter 20: Using JavaScript
  • Chapter 21: Web Graphics Basics
  • Chapter 22: Lean and Mean Web Graphics
• B. CSS3 Selectors
• Index
• About the Author
• Colophon
• Copyright

pokaż cały spis treści

ukryj recenzje