- Cover Page
- Title Page
- Copyright
- CREDITS
- Tryout
- Contents
- INTRODUCTION
- 1: STRUCTURE
- HOW PAGES USE STRUCTURE
- STRUCTURING WORD DOCUMENTS
- HTML DESCRIBES THE STRUCTURE OF PAGES
- HTML USES ELEMENTS TO DESCRIBE THE STRUCTURE OF PAGES
- A CLOSER LOOK AT TAGS
- ATTRIBUTES TELL US MORE ABOUT ELEMENTS
- BODY, HEAD & TITLE
- CREATING A WEB P1AGE ON A PC
- CREATING A WEB PAGE ON A MAC
- CODE IN A CONTENT MANAGEMENT SYSTEM
- LOOKING AT HOW OTHER SITES ARE BUILT
- SUMMARY STRUCTURE
- 2: TEXT
- 3: LISTS
- 4: LINKS
- 5: IMAGES
- CHOOSING IMAGES FOR YOUR SITE
- STORING IMAGES ON YOUR SITE
- ADDING IMAGES
- HEIGHT & WIDTH OF IMAGES
- WHERE TO PLACE IMAGES IN YOUR CODE
- OLD CODE: ALIGNING IMAGES HORIZONTALLY
- OLD CODE: ALIGNING IMAGES VERTICALLY
- THREE RULES FOR CREATING IMAGES
- TOOLS TO EDIT & SAVE IMAGES
- IMAGE DIMENSIONS
- CROPPING IMAGES
- IMAGE RESOLUTION
- VECTOR IMAGES
- ANIMATED GIFS
- TRANSPARENCY
- EXAMINING IMAGES ON THE WEB
- HTML5: FIGURE AND FIGURE CAPTION
- EXAMPLE IMAGES
- SUMMARY IMAGES
- 6: TABLES
- 7: FORMS
- WHY FORMS?
- FORM CONTROLS
- HOW FORMS WORK
- FORM STRUCTURE
- TEXT INPUT
- PASSWORD INPUT
- TEXT AREA
- RADIO BUTTON
- DROP DOWN LIST BOX
- MULTIPLE SELECT BOX
- FILE INPUT BOX
- SUBMIT BUTTON
- IMAGE BUTTON
- BUTTON & HIDDEN CONTROLS
- LABELLING FORM CONTROLS
- GROUPING FORM ELEMENTS
- HTML5: FORM VALIDATION
- HTML5: DATE INPUT
- HTML5: EMAIL & URL INPUT
- HTML5: SEARCH INPUT
- EXAMPLE
- SUMMARY
- 8: EXTRA MARKUP
- 9: FLASH, VIDEO & AUDIO
- HOW FLASH WORKS
- USE OF FLASH
- TIMELINE: FLASH, VIDEO & AUDIO
- ADDING A FLASH MOVIE TO YOUR WEB PAGE
- UNDERSTANDING VIDEO FORMATS AND PLAYERS
- USING HOSTED VIDEO SERVICES
- PREPARING A FLASH VIDEO FOR YOUR SITE
- ADDING A FLASH VIDEO TO YOUR PAGES
- HTML5: PREPARING VIDEO FOR YOUR PAGES
- HTML5: ADDING VIDEO TO YOUR PAGES
- HTML5: MULTIPLE VIDEO SOURCES
- HTML5: COMBINING FLASH & HTML5 VIDEO
- ADDING AUDIO TO WEB PAGES
- ADDING A FLASH MP3 PLAYER
- HTML5: ADDING HTML5 AUDIO TO YOUR PAGES
- HTML5: MULTIPLE AUDIO SOURCES
- EXAMPLE FLASH, VIDEO & AUDIO
- SUMMARY FLASH, VIDEO & AUDIO
- 10: INTRODUCING CSS
- UNDERSTANDING CSS: THINKING INSIDE THE BOX
- CSS ASSOCIATES STYLE RULES WITH HTML ELEMENTS
- CSS PROPERTIES AFFECT HOW ELEMENTS ARE DISPLAYED
- EXAMPLE
- USING EXTERNAL CSS
- USING INTERNAL CSS
- CSS SELECTORS
- HOW CSS RULES CASCADE
- INHERITANCE
- WHY USE EXTERNAL STYLE SHEETS?
- DIFFERENT VERSIONS OF CSS & BROWSER QUIRKS
- SUMMARY
- 11: COLOR
- 12: TEXT
- TYPEFACE TERMINOLOGY
- CHOOSING A TYPEFACE FOR YOUR WEBSITE
- TECHNIQUES THAT OFFER A WIDER CHOICE OF TYPEFACES
- SPECIFYING TYPEFACES
- SIZE OF TYPE
- TYPE SCALES
- UNITS OF TYPE SIZE
- MORE FONT CHOICE
- UNDERSTANDING FONT FORMATS
- BOLD
- ITALIC
- UPPERCASE & LOWERCASE
- UNDERLINE & STRIKE
- LEADING
- LETTER & WORD SPACING
- ALIGNMENT
- VERTICAL ALIGNMENT
- INDENTING TEXT
- CSS3: DROP SHADOW
- FIRST LETTER OR LINE
- STYLING LINKS
- RESPONDING TO USERS
- ATTRIBUTE SELECTORS
- EXAMPLE TEXT
- SUMMARY TEXT
- 13: BOXES
- BOX DIMENSIONS
- LIMITING WIDTH
- LIMITING HEIGHT
- OVERFLOWING CONTENT
- BORDER, MARGIN & PADDING
- WHITE SPACE & VERTICAL MARGIN
- BORDER WIDTH
- BORDER STYLE
- BORDER COLOR
- SHORTHAND
- PADDING
- MARGIN
- CENTERING CONTENT
- IE6 BOX MODEL
- CHANGE INLINE/BLOCK
- HIDING BOXES
- CSS3: BORDER IMAGES
- CSS3: BOX SHADOWS
- CSS3: ROUNDED CORNERS
- CSS3: ELLIPTICAL SHAPES
- EXAMPLE BOXES
- SUMMARY BOXES
- 14: LISTS, TABLES AND FORMS
- BULLET POINT STYLES
- IMAGES FOR BULLETS
- POSITIONING THE MARKER
- LIST SHORTHAND
- TABLE PROPERTIES
- BORDER ON EMPTY CELLS
- GAPS BETWEEN CELLS
- STYLING FORMS
- STYLING TEXT INPUTS
- STYLING SUBMIT BUTTONS
- STYLING FIELDSETS & LEGENDS
- ALIGNING FORM CONTROLS: PROBLEM
- ALIGNING FORM CONTROLS: SOLUTION
- CURSOR STYLES
- WEB DEVELOPER TOOLBAR
- EXAMPLE LISTS, TABLES AND FORMS
- EXAMPLE LISTS, TABLES AND FORMS
- SUMMARY LISTS, TABLES AND FORMS
- 15: LAYOUT
- KEY CONCEPTS IN POSITIONING ELEMENTS
- CONTROLLING THE POSITION OF ELEMENTS
- NORMAL FLOW
- RELATIVE POSITIONING
- ABSOLUTE POSITIONING
- FIXED POSITIONING
- OVERLAPPING ELEMENTS
- FLOATING ELEMENTS
- USING FLOAT TO PLACE ELEMENTS SIDE-BY-SIDE
- CLEARING FLOATS
- PARENTS OF FLOATED ELEMENTS: PROBLEM
- PARENTS OF FLOATED ELEMENTS: SOLUTION
- CREATING MULTI-COLUMN LAYOUTS WITH FLOATS
- SCREEN SIZES
- SCREEN RESOLUTION
- PAGE SIZES
- FIXED WIDTH LAYOUTS
- LIQUID LAYOUTS
- A FIXED WIDTH LAYOUT
- A LIQUID LAYOUT
- LAYOUT GRIDS
- EXAMPLE GRID
- POSSIBLE LAYOUTS: 960 PIXEL WIDE 12 COLUMN GRID
- CSS FRAMEWORKS
- USING THE 960.GS GRID
- A GRID-BASED LAYOUT USING 960.GS
- MULTIPLE STYLE SHEETS
- MULTIPLE STYLE SHEETS
- EXAMPLE LAYOUT
- SUMMARY LAYOUT
- 16: IMAGES
- 17: HTML5 LAYOUT
- 18: PROCESS & DESIGN
- WHO IS THE SITE FOR?
- WHY PEOPLE VISIT YOUR WEBSITE
- WHAT YOUR VISITORS ARE TRYING TO ACHIEVE
- WHAT INFORMATION YOUR VISITORS NEED
- HOW OFTEN PEOPLE WILL VISIT YOUR SITE
- SITE MAPS
- EXAMPLE SITE MAP
- WIREFRAMES
- EXAMPLE WIREFRAME
- GETTING YOUR MESSAGE ACROSS USING DESIGN
- VISUAL HIERARCHY
- GROUPING AND SIMILARITY
- DESIGNING NAVIGATION
- SUMMARY PROCESS & DESIGN
- 19: PRACTICAL INFORMATION
- INDEX
- TROUBLESHOOTING
- HTML ELEMENTS
- HTML ATTRIBUTES
- CSS PROPERTIES
Try out and download all of the code for this book online at: http://www.htmlandcssbook.com/code/
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.