2. Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 6 Backgrounds and Colors

3. 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

4. Why Would I Do This?  Increase design impact  Develop a theme  Maximize use of CSS

5. Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Using Background Images  Text must be readable  Edit the transparency option  Consider download and processing time  Do not use animated gifs  Choose graphic formats  Test your page

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Working With The Colors Of The Web Monitor factors  Size  Color depth  Quality Dithering Palette

7. 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)

8. Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Visual Summary Properties inspector Page properties

9. Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Visual Summary (continued) Color selection Eyedropper cursor

10. Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Visual Summary (continued) Design panel

11. Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Wallpaper-pattern Backgrounds Tiled Repeating pattern Readability BackgroundCity.com

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Inserting A Wallpaper-Pattern Background Page properties Appearance category

13. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Inserting A Wallpaper-pattern Background (continued) Select image source Image preview

14. Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Inserting A Wallpaper-Pattern Background (continued) Background image in browser

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Avoiding Unsuitable Background Images Readability FFlat color depth LLow contrast

16. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Problems With Transparent Background Graphics Image halo Gray background Visually impaired

17. Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Margin Graphics Widths Heights CSS background options

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Margin Graphics (continued) Too narrow – repeats Too wide – 1600-px wide

19. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Margin Graphics (continued) Top border  Too short and repeats

20. Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Watermark Background Graphics Size Repetition Flattened

21. Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Watermark Background Graphics (continued) Complex background Positioned for readability

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Insert a Watermark Graphic Watermarked  Less contrast and color-depth

23. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Applying Both Background Image And Color  Default browser display  Disabled graphics  Readability

24. Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Applying Both Background Image And Color (continued) Start with page properties

25. Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Applying Both Background Image And Color (continued) Page properties after selecting black

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Applying Both Background Image And Color (continued) Appearance in browser

27. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Setting Default Text Colors Options Page properties System color picker Color Matrix/Wheel

28. Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Color/Colors Dialog Boxes Windows

29. Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Color/Colors Dialog Boxes (continued) Macintosh

30. Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Default Colors Changed to yellow Color palette

31. Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Color Matrix Mouse location Color

32. Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Color hues Selected color Saturation levels

33. Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Setting Link Colors Linked Visited Active Hover RRollover

34. Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Page Properties Links category

35. Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Page Properties (continued) Set colors

36. Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Page Properties (continued) Browser results

37. 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

38. Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 End-of-Project Exercises Screen ID Multiple Choice Discussion Questions Skill Drill CChose a Color from an Image SSet Heading Colors SSet the Background Repeat Options AApply Background Colors to Other Elements EExplore Design Options with Background Images PPrevent a Background Image from Scrolling

39. Copyright (c) 2004 Prentice-Hall. All rights reserved. 38 End-of-Project Exercises Challenge AAdd Decorative Corners around a Block of Content PPlace Decorative Graphics in the Background Portfolio Builder CCreate Alternative Color Schemes

40. What Are Your Questions