Embed Size (px)
Citation preview
Committed to Shaping the Next Generation of IT Experts.
Essentials For DesignDreamweaver
Level OneJulian Rickards
Project 6
Backgrounds and Colors
Copyright (c) 2004 Prentice-Hall. All rights reserved. 2
Objectives
Tiled, margin, and watermark backgrounds
Suitable background images
Transparent background graphics
Web-safe colors
Link colors Image backgrounds CSS properties Background images Text and background
color
Why Would I Do This?
Increase design impact Develop a themeMaximize use of CSS
Copyright (c) 2004 Prentice-Hall. All rights reserved. 4
Using Background Images
Text must be readableEdit the transparency optionConsider download and processing timeDo not use animated gifsChoose graphic formatsTest your page
Copyright (c) 2004 Prentice-Hall. All rights reserved. 5
Working With The Colors Of The Web
Monitor factors Size Color depth Quality
Dithering Palette
Copyright (c) 2004 Prentice-Hall. All rights reserved. 6
Web-safe color palette
RGB model Hexadecimal
Color-picking tool
Working With The Colors Of The Web (continued)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 7
Visual Summary
Properties inspector
Page properties
Copyright (c) 2004 Prentice-Hall. All rights reserved. 8
Visual Summary (continued)
Color selection
Eyedropper cursor
Copyright (c) 2004 Prentice-Hall. All rights reserved. 9
Visual Summary (continued)
Design panel
Copyright (c) 2004 Prentice-Hall. All rights reserved. 10
Wallpaper-pattern Backgrounds
Tiled Repeating pattern Readability BackgroundCity.com
Copyright (c) 2004 Prentice-Hall. All rights reserved. 11
Inserting A Wallpaper-Pattern Background
Page properties
Appearance category
Copyright (c) 2004 Prentice-Hall. All rights reserved. 12
Inserting A Wallpaper-pattern Background (continued)
Select image source
Image preview
Copyright (c) 2004 Prentice-Hall. All rights reserved. 13
Inserting A Wallpaper-Pattern Background (continued)
Background image in browser
Copyright (c) 2004 Prentice-Hall. All rights reserved. 14
Avoiding Unsuitable Background Images Readability
Flat color depth Low contrast
Copyright (c) 2004 Prentice-Hall. All rights reserved. 15
Problems With TransparentBackground Graphics
Image halo Gray background Visually impaired
Copyright (c) 2004 Prentice-Hall. All rights reserved. 16
Margin Graphics
Widths Heights
CSS background options
Copyright (c) 2004 Prentice-Hall. All rights reserved. 17
Margin Graphics (continued)
Too narrow – repeats
Too wide – 1600-px wide
Copyright (c) 2004 Prentice-Hall. All rights reserved. 18
Margin Graphics (continued)
Top border Too short and repeats
Copyright (c) 2004 Prentice-Hall. All rights reserved. 19
Watermark Background Graphics
Size Repetition Flattened
Copyright (c) 2004 Prentice-Hall. All rights reserved. 20
Watermark Background Graphics(continued)
Complex background
Positioned for readability
Copyright (c) 2004 Prentice-Hall. All rights reserved. 21
Insert a Watermark Graphic
Watermarked Less contrast and color-depth
Copyright (c) 2004 Prentice-Hall. All rights reserved. 22
Applying Both BackgroundImage And Color
Default browser displayDisabled graphicsReadability
Copyright (c) 2004 Prentice-Hall. All rights reserved. 23
Applying Both BackgroundImage And Color (continued)
Start with page properties
Copyright (c) 2004 Prentice-Hall. All rights reserved. 24
Applying Both BackgroundImage And Color (continued)
Page properties after selecting black
Copyright (c) 2004 Prentice-Hall. All rights reserved. 25
Applying Both BackgroundImage And Color (continued)
Appearance in browser
Copyright (c) 2004 Prentice-Hall. All rights reserved. 26
Setting Default Text Colors
Options Page properties System color picker Color Matrix/Wheel
Copyright (c) 2004 Prentice-Hall. All rights reserved. 27
Color/Colors Dialog Boxes
Windows
Copyright (c) 2004 Prentice-Hall. All rights reserved. 28
Color/Colors Dialog Boxes (continued)
Macintosh
Copyright (c) 2004 Prentice-Hall. All rights reserved. 29
Default Colors
Changed to yellow
Color palette
Copyright (c) 2004 Prentice-Hall. All rights reserved. 30
Color Matrix
Mouse location Color
Copyright (c) 2004 Prentice-Hall. All rights reserved. 31
Color hues
Selected color
Saturation levels
Copyright (c) 2004 Prentice-Hall. All rights reserved. 32
Setting Link Colors
Linked Visited Active Hover
Rollover
Copyright (c) 2004 Prentice-Hall. All rights reserved. 33
Page Properties
Links category
Copyright (c) 2004 Prentice-Hall. All rights reserved. 34
Page Properties (continued)
Set colors
Copyright (c) 2004 Prentice-Hall. All rights reserved. 35
Page Properties (continued)
Browser results
Copyright (c) 2004 Prentice-Hall. All rights reserved. 36
Summary
Tiled, margin, and watermark backgrounds
Suitable background images
Transparent background graphics
Web-safe colors
Link colors Image backgrounds CSS properties Background images Text and background
color
Copyright (c) 2004 Prentice-Hall. All rights reserved. 37
End-of-Project Exercises
Screen ID Multiple Choice Discussion Questions Skill Drill
Chose a Color from an Image Set Heading Colors Set the Background Repeat Options Apply Background Colors to Other Elements Explore Design Options with Background Images Prevent a Background Image from Scrolling
Copyright (c) 2004 Prentice-Hall. All rights reserved. 38
End-of-Project Exercises
Challenge Add Decorative Corners around a Block of
Content Place Decorative Graphics in the Background
Portfolio Builder Create Alternative Color Schemes
What Are Your Questions
