book

DHTML and CSS: Advanced Visual QuickPro Guide

Name: DHTML and CSS: Advanced Visual QuickPro Guide
Author: Jason Cranford Teague
ISBN: 9780321266910

by Jason Cranford Teague

December 2004

Intermediate to advanced

440 pages

11h 21m

English

Peachpit Press

Read now

Unlock full access

Copyright
Dedication
Special Thanks To...
i. Introduction
Who This Book Is ForWhat This Book Is AboutValues and UnitsLength valuesColor valuesPercentagesURLsReading This BookThe codeWeb Sites for This Book
1. Creating a Dynamic Web Site
What Makes a Web Site Dynamic?Understanding Layout on the WebCreating an Accessible Web SiteWeb content accessibility checklistUnderstanding Hypertext, Navigation, and ControlsNavigation Dos and Don’tsDosDon’tsDynamic by DesignThe Four Ds of Web DesignStep 1: DefineCollect and review your contentKnow your audienceEstablish your goalsPlan the features and interactivityConsider the graphic design styleStep 2: DesignOutline the siteCreate a site mapSketch the layout gridCreate a storyboardDefine the look and feelStep 3: DevelopPrepare the contentCreate the codeCreate a templateAssemble the pagesTest your siteStep 4: Deploy
2. Mastering CSS
The Myths of CSSCSS Myth # 1: CSS is not available in all browsersCSS Myth # 2: CSS is not fully cross-browser compatibleCSS Myth # 3: CSS cannot handle the layouts I needCSS Myth # 4: CSS is harder to use than HTMLBuilding Your Style SheetsStyle orderAdd notesWeb Typography: Beyond Times and ArialText in graphicsBrowser-safe fontsChoosing the right typefaceReadabilityVisual messageDifferentiate content types on the pageCreating Web Pages for PrintBuilding a Master Style SheetTo create a master style sheet:Understanding CSS ShorthandShorthand and legacy browsersShorthand for browser-safe colorsUsing Grouping and ContextUnderstanding groupingUnderstanding contextFixing CSS Browser InconsistenciesSetting the page originThe box model hackCSS Beyond Internet Explorer 6Child selectorsTo set up child selectors:Adjacent selectorsTo set up adjacent selectors:Pseudo elementsTo set up :before and : after pseudo elements:Dynamic pseudo classesTo use dynamic pseudo classes:
3. Advanced DHTML Techniques
Setting Up and Accessing ArraysFour ways to set up arraysTo set up an array:Accessing an arrayTo access the data in an array:To access all the contents of an array:Changing an ArrayTo make changes to an array:Sorting an ArrayTo sort an array:Working with Data ObjectsTo create a data object:Storing Data in FramesTo store data in frames:Storing Data in URLsTo store data in a URL:Storing Data in CookiesTo store data in a cookie:Delaying or Stopping an ActionTo set up a delayed function:Handling Errors on the FlyTo handle errors (gracefully):
4. Content
Preloading ImagesTo preload images using CSS:Adding External Content with iframesTo import external content with iframes:Adding External Content Using Server-Side IncludesTo add a server-side include:Adding External Content with JavaScriptTo add an external JavaScript file:Viewing Someone Else’s External JavaScript or CSSTo view hidden code:Adding External Content with PHPTo add external content using PHP:Inserting a New ElementTo insert a new element:Inserting a New Text ElementTo insert a new tag with text:Inserting a New iframe ElementTo insert a new iframe element:Removing an ElementTo remove an object:Including Random ContentTo add random content:Including Multiple Pages in a Single PageTo create a single Web page with multiple pages of content:Including a ClockTo add a clock to your Web page:
5. Layout
Creating Simple ColumnsTo create simple columns:Creating Balanced ColumnsTo create balanced columns:Creating Graphic Background ColumnsTo create columns with graphic backgrounds:Creating Contextual LayoutsTo create contextual layouts:Centering Layouts Horizontally and VerticallyTo center elements horizontally and vertically in the page:Creating Curved Text WrappingTo create curved text wrapping:Creating Curved BordersTo create curved borders around an element:Creating a Drop Shadow Around an ElementTo create a drop shadow:Creating a Frame Drop ShadowTo add a drop shadow to a frame:Keeping Pages FramedTo place an HTML page in a frameset automatically:Switching Layouts on the FlyTo switch layouts on the fly:Highlighting Table RowsTo create highlighted table rows:
6. Navigation
Working with Link StylesCustom underline colorsTo specify a custom underline color:Graphic link stylesTo specify a custom graphic link style:Differentiating link typesTo add differentiating link icons:Creating an HTML Text Graphic ButtonTo create a graphic button with HTML text:Creating Tabbed NavigationTo create tabbed navigation:Adding a Simple MenuTo add a simple menu:Adding a Fixed Drop-down MenuTo add a fixed drop-down menu:Adding a Floating Menu BarTo add a floating menu:Adding a Clipping MenuTo add a clipping menu:Adding a Jump MenuTo add a jump menu:Adding Pop-up MenusTo add a pop-up menu:Educating the BrowserTo set up a <link> tag:To set up a <meta> tag:
7. Controls
Creating Customized Browser ControlsTo add browser control buttons:Creating a Sortable TableTo create a sortable table:Adding Font Size ControlsTo add font size controls:Creating a Scrollable AreaTo create a scrollable area:Animating Scroll ControlsTo create animated scroll controls:Adding a Calendar Date PickerTo add a calendar date picker:Adding QuickTime Video ControlsTo add QuickTime video controls:Opening and Closing FramesTo set up collapsible frames:

8. Forms
Styling FormsTo add styles to forms:Highlighting Form FieldsTo create highlighted form fields:Auto-Focusing Form FieldsTo set up auto-focus fields:Performing Form ValidationTo validate a form before sending it:Creating Contextual FormsTo create a contextual form:Creating Contextual Form DataTo add contextual data to a form:Restricting a Form Field’s ContentTo restrict the content of a form field:Disabling Form ControlsTo disable form controls until needed:Creating Graphic Form ControlsTo create graphic form controls:
9. Special Effects
Creating Transparent LayersTo create transparent layers:Creating Text Drop ShadowsTo create a drop shadow effect:Floating ObjectsTo set up floating objects:Adding a GIF AnimationTo create a GIF animation in Fireworks:To create a GIF animation in ImageReady:To add a GIF animation to your Web page:Adding Ambient SoundTo add ambient sound to a Web page:Creating Transparent Graphics in PNG FormatTo create a PNG graphic in ImageReady:To create a PNG graphic in Fireworks:To use a PNG graphic on a Web page:Special Effects in Internet Explorer for WindowsAdding effects filters (IE Windows only)To blur an element:Fading between objects (IE Windows only)To fade elements:Adding page transitions (IE Windows only)To set up a transition between Web pages:
10. Databases
Understanding XMLTo create an XML document:Accessing XML Data in Internet Explorer for WindowsTo create an XML data island:Accessing XML Data with Mozilla and Internet ExplorerTo access XML with JavaScript:Understanding MySQLCreating Database Objects in MySQLTo create the blog database:Understanding PHPUsing PHP with MySQLTo create a PHP blog entry listing page:Adding Comments to the PHP BlogHow to add comments to the blog:Adding a Comments Input FormTo add a comments input form:Adding an Administrator PageTo add an administrator page:Creating a Secure Blog Entry Input FormTo add a secure entry input form:
A. CSS Quick Reference
Adding StylesInlineInternalExternalSelectors: HTML, Classes, IDsHTMLClassIDGrouping StylesSame definitionsContextual definitionsProperties and Values
B. DHTML Quick Reference
The DOMEventsProperties and ValuesReserved WordsJavaScript and Java reserved wordsOther words to avoid
C. WAI Accessibility Checklist
PrioritiesPriority 1Priority 2Priority 3Priority 1 CheckpointsPriority 2 CheckpointsPriority 3 Checkpoints
D. Browser-Safe Fonts

Content preview from DHTML and CSS: Advanced Visual QuickPro Guide

Appendix B. DHTML Quick Reference

DHTML is the combination of CSS, JavaScript, DOM, and XHTML. Although I don’t have enough space here to teach you all of those technologies, I wanted to include a quick reference of important concepts to help refresh your memory if you’re away from a more comprehensive resource.

The DOM

The Document Object Model (DOM) describes a path starting with the window itself, down through the various objects on the Web page, each element representing a node within the document. For example, Code B.1 is broken down into nodes as shown in Figure B.1.

The Web page node starts at the top with the window, moving down to each individual element on the page.

Figure B.1. The Web page node starts at the top with the window, moving down ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 0321266919Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

DHTML and CSS: Advanced Visual QuickPro Guide

by Jason Cranford Teague

Appendix B. DHTML Quick Reference

The DOM

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.