Creative HTML Design
Published on 13. January 1998
Book
Mixed media product
434 pages
978-1-56205-704-6 (ISBN)
Description
Creative HTML Design walks you through building a real, working web site, specially created for the lesson plans in this book. In the process, you will learn all the phases of site design--from selecting an ISP and uploading files, to more advanced techniques like adding animation and rollovers. Step-by-step tutorials for Photoshop 4.0 and Paint Shop Pro teach how to design using "safe" colors, make distinctive background tiles, align your graphics, use tables and frames, include JavaScript rollovers, use CSS, as well as numerous other design and HTML features. This book includes a complete HTML 4.0 reference with details on all current HTML elements.
More details
Language
English
Place of publication
United States
Publishing group
Pearson Education (US)
Target group
College/higher education
Dimensions
Height: 230 mm
Width: 186 mm
Thickness: 27 mm
Weight
885 gr
ISBN-13
978-1-56205-704-6 (9781562057046)
Copyright in bibliographic data and cover images is held by Nielsen Book Services Limited or by the publishers or by their respective licensors: all rights reserved.
Schweitzer Classification
Other editions
New editions
Linda Weinman | William Weinman
creative html design.2
Book
05/2001
2nd Edition
New Riders
€58.46
Article is exhausted; no reprint
Content
(NOTE: Each chapter concludes with a Summary.)
1. Start.
Types of Internet Providers. ISP or PP? Does Your Provider Have Enough Bandwidth? Do They Have Enough Overhead? Other Services. ISP Comparison Study. How the Authors Do It. HTML Software. HTML Versus Design. Should You Learn HTML? Text-Based Editors. Dedicated HTML Editors. WYSIWYG HTML Editors.
2. First Page.
How Does the Web Work? Definitions. Hyperlinks-Web-like Relationships. Following the Exercises. Creating Your First Page. Understanding What You Just Did. Carriage Returns in HTML. HTML Capitalization. File Naming Conventions. Spaces in Tags and Attributes. HTML Template. Uploading the Page. PC FTP Instructions. Mac FTP Instructions. Link Me Up. Linking with Images. Adding Color to the Page. Hash Marks. Add Some Color. Using a Background Pattern. Adding a Background Tile.
3. Speedy Graphics.
How to Read the True File Size. To Icon or Not to Icon? GIF Pronunciation. How GIF Compression Works. Making Small GIFs. Reducing Colors in GIFs. Reducing Colors Using Photoshop 4.0. Reducing Colors Using Paint Shop Pro. Bit Depth Dilemma? Anti-Aliasing Versus Aliasing. Photoshop Alised Type Exercise. Paint Shop Pro Alised Type Exercise. To Dither or Not to Dither? GIF Compression Tables. Dither Settings in Photoshop. Dither Settings in Paint Shop Pro. Making Small JPEG Files. JPEG Compressions in Photoshop 4.0. Problems with Progressive JPEGs. JPEG or GIF? DeBabelizer. GIFs in DeBabelizer Pro for Windows. JPEGs in DeBabelizer Pro for Windows. GIFs in DeBabelizer for Macintosh. PNG. PNG Resources. Gamma Correction. Alpha-Channel Transparency. Filters. Large 24-Bit PNG Files.
4. Web Color.
Designers Versus Everyone Else. Browser-Safe Specs. What Does the Browser-Safe Palette Look Like? Do Browser-Safe Colors Really Matter? RGB Color. Hexadecimal RGB. Hexadecimal Colors in HTML. Hexadecimal Resources. Web Hex Converters. Hex Calculators. When to Use Browser-Safe Colors? HTML-Based Color Choices. How to Load a Browser-Safe Swatch Palette into Photoshop. Previsualizing Colors in Photoshop. Working with Color Picker-Based Applications. Internet Color Picker. CMYK/RGB Conversions. Illustration-Based Artwork. GIFWizard. Browser-Safe CLUT. Converting to Browser-Safe Doesn't Always Work! How to Ensure Your Artwork Stays Browser Safe. Removing Colors in Photoshop 4.0. Photographic-Based Artwork. JPEGs Don't Use Palettes! Adding Color to a Web Page with HTML. Using Color Names Instead of Hex. Coloring Individual Lines of Text. Color Names-Not Browser Safe! Coloring Links. Adding Color to Tables. HTML Tags That Support Color.
5. Clickable.
Identifying Hot Images. Creating Linked Images and Text. Turning Off Image Borders. Importance of ALT Text. The Importance of WIDTH and HEIGHT. Resizing Using WIDTH and HEIGHT Info.Aesthetics of Interlaced Graphics. Caching Images. Linking Graphics. What Are Imagemaps? Client-Side or Server-Side Imagemap? Client-Side Imagemaps in Mapper (Macintosh). Client-Side Imagemaps in MapEdit (Windows). Understanding the Client-Side Imagemap Code. Creating Server-Side Imagemaps. Server-Side Imagemaps in MapEdit. Do You Need an Imagemap? Imagemap Resources. The Importance of ALT Text.
6. Tiles.
Tiling Backgrounds. Determining Tiled Pattern Sizes. Full-Screen Body Backgrounds? Pitfalls of Full-Screen Backgrounds. File Formats for Patterned Background Tile. Seams or No Seams? Seams. No Seams, the Photoshop Way. A Seamless File in Photoshop 4.0. Seamless Tile Exercise 2. Special Effect Tiles. Aesthetics of Backgrounds. Specify Text Color Schemes. Printing Issues. How to Color Tiles in Photoshop. Anti-Aliased Example. Alised Example.
7. Buttons & Rules.
Horizontal Rules. Rules. Horizontal Rules, the HTML Way. Fancier Horizontal Rules the Do-It-Yourself Way. Vertical Rules. Clip Art Rules, Too. Bullets. Creating HTML Bulleted Lists. Creating Ordered and Definition Lists. Button Clip Art. Creating Custom-Made Bullets. Changing Button Size in Photoshop. Linked Bullets.
8. Transparency.
Transparency Tricks. Color Preferences in Browsers. JPEG or GIF? Creating Background Color the Hex Way. Background Color Using Solid Patterns. Transparent GIFs. When to Use Transparent Artwork. Making Clean Transparent GIF Artwork. Glows, Soft-Edges, and Drop Shadows with GIF Transparency. GIF Transparency Compositing Chart. Transparent GIF URLs. HTML for Transparent GIFs. Other Transparency Experiments. Transparent GIF Software. Adobe Photoshop GIF89a Export Plug-In. Transparency in Paint Shop Pro 4.0. PNG Transparency.
9. Alignment.
Text Alignment Tags. Using P to Align Text. Using DIV to Align Blocks of Text. CENTER. Graphic Alignment Tags. IMG ALIGN Attribute. Floating Graphics. Insert a Line Break with BR. Image Gutters. The Single-Pixel GIF Trick-Part I. HTML Tables. Table Basics. Coloring and Spacing in Tables. Space between Table Cells. The BORDER Attribute in Netscape. Tables for Spacing. Margins in HTML. Spacing Text with Tables. Tables with Odd Numbers of Cells. Tables for Graphics. Cutting Up an Image in Photoshop 4.0. Piecing the Artwork Back Together. Table Tricks and Tips. The Single-Pixel GIF Trick-Part II. Bulleted List. Center an Object on the Page. Vertical Rules.
10. Typography.
Limited Choices. HTML Type Versus Graphical Type. HTML-Based Typography. B and I. STRONG and EM. Preformatting. Blinking Text. Changing Font Sizes. Caps and Small Caps. Small Caps. HTML Font Choices. Experiment with Type. Centering Text. Font Face Attribute. Which Fonts? Web Type Blues. Verdana and Georgia. Embedding Options. TrueDoc. TrueType Embedding and OpenType. Type Standards. A Peek into Font Embedding. TrueDoc Anti-Aliasing Defaults. Graphics-Based Typography. Aliasing Versus Anti-Aliasing. Writing the HTML to Place Your Text Graphics. Type Facts. Leading Techniques. Unreliable Leading Methods. Indent Techniques. Digital Font Foundries.
11. Planning.
Looking Ahead. Organizing Your Site. Mind Maps. More on Mind Maps. Ducks In A Row Goals. Art Direction. Metaphors. Flowcharting.
12. Organization.
Simplicity Versus Chaos. What's in a Name? The Parts of a URL. Absolute and Relative URLs. Paths in Relative URLs. Relative URL Examples. Convert a Relative URL. Relative URLs as Links. Relative URL Resources. Directory Structure. Repeating Elements. Server-Side Includes. How SSI Works. Potential SSI Problems. File and Folder Names. SSI Resources.
13. Style Sheets.
Cascading Style Sheets. How CSS Style Sheets Work. Style Sheets. Adding a Style Sheet. The Anatomy of a CSS Style Sheet. Type and Measurements. Unit Measurements. Text-Related Properties. Selectors. The SPAN Tag. Absolute Positioning. ID vs. CLASS. DIV and Absolute Positioning. Layering Text and Images. Resources.
14. Navigation.
Frames. How Frames Work. Support for Older Browsers. ( ...within Frames ( ...within Frames ) ). Adjusting the Size of Frames. Borderless Frames. Navigating Frames. Scrollbars in Frames. Margins in Frames. Aesthetics of Frames. Do People Scroll? Size Considerations Navbars/Frames. Making Thumbnails and Small Graphics. Reducing Graphics in Photoshop. Frames Resources. Fragments. A URL with a Fragment.
15. Rollovers.
Creating Rollover Graphics. Photoshop Rollover Techniques. Photoshop Layers for Rollovers. Make Your Own DIAR Icons. JavaScript for Rollovers. Pointing Rollover. Make Your Own Pointing Rollover. Slideshow Rollover. Make Your Own Slideshow Rollover. Highlighting Rollover. Highlighting Rollover File Naming Convention. Make Your Own Highlighting Rollover. Blank Images. JavaScript Uploading Issues. DHTML for Navigation.
16. Forms.
The FORM Element. Widgets. Examples. Using Tables with Forms. The IMAGE Type. How Can I Use the Data? Using mailform.cgi.
17. Animation & Sound.
Animation Process. Ducks in a Row Animation Case Study. Setting Up an Alpha Channel. GifBuilder 5.0 for the Macintosh. Impact's GIF Animator (PC). LOWSRC Animation Trick. Client Pull for Slideshows. Client Pull Disadvantages. The Aesthetics of Animation. Web Animation Technology Overview. Animated GIFs. Plug-Ins. HEIGHT and WIDTH. Java. JavaScript. Good JavaScript Resources. Animated GIFs in Detail. Sound on the Web. Shockwave Case Study. Sound Aesthetics. Getting Sound Files into Your Computer. Digital Audio Terminology. The Stream or Not to Stream? Making Small Audio Files. Rates and Bits. Audio File Formats. Tips for Making Web-Based Sound Files. HTML for Downloading Sound Files. MSIE Audio Tags. Netscape Audio Tags. Cross-Browser Compatibility. Other Sound Options.
18. Get Listed.
Using Search Engines and Directories. The Trusting Web? Search Engines. Directories. List Your Site with Search Engines. META Tag for Search Engines. Ad Banners: From Heaven or Hell? Exchanging Links for Links. Trade Banners' Guidelines. Click Here.
19. Good HTML.
Why Write Good HTML? HTML Terminology. What You See AIN't What You Get. Cleaning Up After a WYSIWYG Editor. Common HTML Gotchas. What's in a Quote? Hanging Quotes. Straddling Containers. Line-Endings. A Brief History of Line-Endings. Entities vs. Numbers vs. Embedded Characters.
20. HTML 4.0 Reference.
Introduction. Categorized Reference. Alphabetical Reference. Supplemental Reference.
1. Start.
Types of Internet Providers. ISP or PP? Does Your Provider Have Enough Bandwidth? Do They Have Enough Overhead? Other Services. ISP Comparison Study. How the Authors Do It. HTML Software. HTML Versus Design. Should You Learn HTML? Text-Based Editors. Dedicated HTML Editors. WYSIWYG HTML Editors.
2. First Page.
How Does the Web Work? Definitions. Hyperlinks-Web-like Relationships. Following the Exercises. Creating Your First Page. Understanding What You Just Did. Carriage Returns in HTML. HTML Capitalization. File Naming Conventions. Spaces in Tags and Attributes. HTML Template. Uploading the Page. PC FTP Instructions. Mac FTP Instructions. Link Me Up. Linking with Images. Adding Color to the Page. Hash Marks. Add Some Color. Using a Background Pattern. Adding a Background Tile.
3. Speedy Graphics.
How to Read the True File Size. To Icon or Not to Icon? GIF Pronunciation. How GIF Compression Works. Making Small GIFs. Reducing Colors in GIFs. Reducing Colors Using Photoshop 4.0. Reducing Colors Using Paint Shop Pro. Bit Depth Dilemma? Anti-Aliasing Versus Aliasing. Photoshop Alised Type Exercise. Paint Shop Pro Alised Type Exercise. To Dither or Not to Dither? GIF Compression Tables. Dither Settings in Photoshop. Dither Settings in Paint Shop Pro. Making Small JPEG Files. JPEG Compressions in Photoshop 4.0. Problems with Progressive JPEGs. JPEG or GIF? DeBabelizer. GIFs in DeBabelizer Pro for Windows. JPEGs in DeBabelizer Pro for Windows. GIFs in DeBabelizer for Macintosh. PNG. PNG Resources. Gamma Correction. Alpha-Channel Transparency. Filters. Large 24-Bit PNG Files.
4. Web Color.
Designers Versus Everyone Else. Browser-Safe Specs. What Does the Browser-Safe Palette Look Like? Do Browser-Safe Colors Really Matter? RGB Color. Hexadecimal RGB. Hexadecimal Colors in HTML. Hexadecimal Resources. Web Hex Converters. Hex Calculators. When to Use Browser-Safe Colors? HTML-Based Color Choices. How to Load a Browser-Safe Swatch Palette into Photoshop. Previsualizing Colors in Photoshop. Working with Color Picker-Based Applications. Internet Color Picker. CMYK/RGB Conversions. Illustration-Based Artwork. GIFWizard. Browser-Safe CLUT. Converting to Browser-Safe Doesn't Always Work! How to Ensure Your Artwork Stays Browser Safe. Removing Colors in Photoshop 4.0. Photographic-Based Artwork. JPEGs Don't Use Palettes! Adding Color to a Web Page with HTML. Using Color Names Instead of Hex. Coloring Individual Lines of Text. Color Names-Not Browser Safe! Coloring Links. Adding Color to Tables. HTML Tags That Support Color.
5. Clickable.
Identifying Hot Images. Creating Linked Images and Text. Turning Off Image Borders. Importance of ALT Text. The Importance of WIDTH and HEIGHT. Resizing Using WIDTH and HEIGHT Info.Aesthetics of Interlaced Graphics. Caching Images. Linking Graphics. What Are Imagemaps? Client-Side or Server-Side Imagemap? Client-Side Imagemaps in Mapper (Macintosh). Client-Side Imagemaps in MapEdit (Windows). Understanding the Client-Side Imagemap Code. Creating Server-Side Imagemaps. Server-Side Imagemaps in MapEdit. Do You Need an Imagemap? Imagemap Resources. The Importance of ALT Text.
6. Tiles.
Tiling Backgrounds. Determining Tiled Pattern Sizes. Full-Screen Body Backgrounds? Pitfalls of Full-Screen Backgrounds. File Formats for Patterned Background Tile. Seams or No Seams? Seams. No Seams, the Photoshop Way. A Seamless File in Photoshop 4.0. Seamless Tile Exercise 2. Special Effect Tiles. Aesthetics of Backgrounds. Specify Text Color Schemes. Printing Issues. How to Color Tiles in Photoshop. Anti-Aliased Example. Alised Example.
7. Buttons & Rules.
Horizontal Rules. Rules. Horizontal Rules, the HTML Way. Fancier Horizontal Rules the Do-It-Yourself Way. Vertical Rules. Clip Art Rules, Too. Bullets. Creating HTML Bulleted Lists. Creating Ordered and Definition Lists. Button Clip Art. Creating Custom-Made Bullets. Changing Button Size in Photoshop. Linked Bullets.
8. Transparency.
Transparency Tricks. Color Preferences in Browsers. JPEG or GIF? Creating Background Color the Hex Way. Background Color Using Solid Patterns. Transparent GIFs. When to Use Transparent Artwork. Making Clean Transparent GIF Artwork. Glows, Soft-Edges, and Drop Shadows with GIF Transparency. GIF Transparency Compositing Chart. Transparent GIF URLs. HTML for Transparent GIFs. Other Transparency Experiments. Transparent GIF Software. Adobe Photoshop GIF89a Export Plug-In. Transparency in Paint Shop Pro 4.0. PNG Transparency.
9. Alignment.
Text Alignment Tags. Using P to Align Text. Using DIV to Align Blocks of Text. CENTER. Graphic Alignment Tags. IMG ALIGN Attribute. Floating Graphics. Insert a Line Break with BR. Image Gutters. The Single-Pixel GIF Trick-Part I. HTML Tables. Table Basics. Coloring and Spacing in Tables. Space between Table Cells. The BORDER Attribute in Netscape. Tables for Spacing. Margins in HTML. Spacing Text with Tables. Tables with Odd Numbers of Cells. Tables for Graphics. Cutting Up an Image in Photoshop 4.0. Piecing the Artwork Back Together. Table Tricks and Tips. The Single-Pixel GIF Trick-Part II. Bulleted List. Center an Object on the Page. Vertical Rules.
10. Typography.
Limited Choices. HTML Type Versus Graphical Type. HTML-Based Typography. B and I. STRONG and EM. Preformatting. Blinking Text. Changing Font Sizes. Caps and Small Caps. Small Caps. HTML Font Choices. Experiment with Type. Centering Text. Font Face Attribute. Which Fonts? Web Type Blues. Verdana and Georgia. Embedding Options. TrueDoc. TrueType Embedding and OpenType. Type Standards. A Peek into Font Embedding. TrueDoc Anti-Aliasing Defaults. Graphics-Based Typography. Aliasing Versus Anti-Aliasing. Writing the HTML to Place Your Text Graphics. Type Facts. Leading Techniques. Unreliable Leading Methods. Indent Techniques. Digital Font Foundries.
11. Planning.
Looking Ahead. Organizing Your Site. Mind Maps. More on Mind Maps. Ducks In A Row Goals. Art Direction. Metaphors. Flowcharting.
12. Organization.
Simplicity Versus Chaos. What's in a Name? The Parts of a URL. Absolute and Relative URLs. Paths in Relative URLs. Relative URL Examples. Convert a Relative URL. Relative URLs as Links. Relative URL Resources. Directory Structure. Repeating Elements. Server-Side Includes. How SSI Works. Potential SSI Problems. File and Folder Names. SSI Resources.
13. Style Sheets.
Cascading Style Sheets. How CSS Style Sheets Work. Style Sheets. Adding a Style Sheet. The Anatomy of a CSS Style Sheet. Type and Measurements. Unit Measurements. Text-Related Properties. Selectors. The SPAN Tag. Absolute Positioning. ID vs. CLASS. DIV and Absolute Positioning. Layering Text and Images. Resources.
14. Navigation.
Frames. How Frames Work. Support for Older Browsers. ( ...within Frames ( ...within Frames ) ). Adjusting the Size of Frames. Borderless Frames. Navigating Frames. Scrollbars in Frames. Margins in Frames. Aesthetics of Frames. Do People Scroll? Size Considerations Navbars/Frames. Making Thumbnails and Small Graphics. Reducing Graphics in Photoshop. Frames Resources. Fragments. A URL with a Fragment.
15. Rollovers.
Creating Rollover Graphics. Photoshop Rollover Techniques. Photoshop Layers for Rollovers. Make Your Own DIAR Icons. JavaScript for Rollovers. Pointing Rollover. Make Your Own Pointing Rollover. Slideshow Rollover. Make Your Own Slideshow Rollover. Highlighting Rollover. Highlighting Rollover File Naming Convention. Make Your Own Highlighting Rollover. Blank Images. JavaScript Uploading Issues. DHTML for Navigation.
16. Forms.
The FORM Element. Widgets. Examples. Using Tables with Forms. The IMAGE Type. How Can I Use the Data? Using mailform.cgi.
17. Animation & Sound.
Animation Process. Ducks in a Row Animation Case Study. Setting Up an Alpha Channel. GifBuilder 5.0 for the Macintosh. Impact's GIF Animator (PC). LOWSRC Animation Trick. Client Pull for Slideshows. Client Pull Disadvantages. The Aesthetics of Animation. Web Animation Technology Overview. Animated GIFs. Plug-Ins. HEIGHT and WIDTH. Java. JavaScript. Good JavaScript Resources. Animated GIFs in Detail. Sound on the Web. Shockwave Case Study. Sound Aesthetics. Getting Sound Files into Your Computer. Digital Audio Terminology. The Stream or Not to Stream? Making Small Audio Files. Rates and Bits. Audio File Formats. Tips for Making Web-Based Sound Files. HTML for Downloading Sound Files. MSIE Audio Tags. Netscape Audio Tags. Cross-Browser Compatibility. Other Sound Options.
18. Get Listed.
Using Search Engines and Directories. The Trusting Web? Search Engines. Directories. List Your Site with Search Engines. META Tag for Search Engines. Ad Banners: From Heaven or Hell? Exchanging Links for Links. Trade Banners' Guidelines. Click Here.
19. Good HTML.
Why Write Good HTML? HTML Terminology. What You See AIN't What You Get. Cleaning Up After a WYSIWYG Editor. Common HTML Gotchas. What's in a Quote? Hanging Quotes. Straddling Containers. Line-Endings. A Brief History of Line-Endings. Entities vs. Numbers vs. Embedded Characters.
20. HTML 4.0 Reference.
Introduction. Categorized Reference. Alphabetical Reference. Supplemental Reference.