We have learnt how to add the colorful frame to the web page last article. Now we will learn how to make the twinkling background color in this article. When you enter a web page, the twinkling background color will give you a mystic feeling. Moreover, the twinkling background color will attract the viewers’ attention and the links with twinkling background color can attract more people to click the links. Now you may be interested in how to make the twinkling background color. It is easy, and just need four steps. Follow me.

Dreamweaver 8.0 Tutorial ---- How To Make The Twinkling Background Color 001

First, open the original web page you have saved. The original web page is like the following picture.

Dreamweaver 8.0 Tutorial ---- How To Make The Twinkling Background Color 002

Second, click the code button and open the code view. Then put the following blue text into the section between <head> and </head>.

  1. <script LANGUAGE="JavaScript">
  2. <!-- Hide from old browsers
  3. var Color= new Array(9);
  4. Color[1] = "ff";
  5. Color[2] = "ee";
  6. Color[3] = "dd";
  7. Color[4] = "cc";
  8. Color[5] = "bb";
  9. Color[6] = "aa";
  10. Color[7] = "99";
  11. Color[8] = "88";
  12. Color[9] = "77";
  13. Color[10] = "66";
  14. Color[11] = "55";
  15. Color[12] = "44";
  16. Color[13] = "33";
  17. Color[14] = "22";
  18. Color[15] = "11";
  19. Color[16] = "00";
  20. /* Do not display text on a fading background. Instead, let it
  21. fade in and out once or twice, then load a new page. */
  22. function fadeIn(where) {
  23. if (where >= 1) {
  24. document.bgColor="#" + Color[where] +"0000";
  25. where -= 1;
  26. setTimeout("fadeIn("+where+")", 15);
  27. } else {
  28. setTimeout('fadeOut(1)', 15);
  29. }
  30. }
  31. function fadeOut(where) {
  32. if (where < =16) {
  33. document.bgColor="#" + Color[where] +"0000";
  34. where += 1;
  35. setTimeout("fadeOut("+where+")", 15)
  36. } else {
  37. setTimeout("fadeIn(16)", 15);
  38. // window.location.href="http://www.donotyet.com/";
  39. }
  40. }
  41. // Unhide -->
  42. </script>

The color[] is to definite the fading background colors. You can change them into other colors. setTimeout is to definite the twinkling time. function fadeout is to definite the fade function. These codes are easy to understand.

Third, modify the body sentence. The final body sentence should be like this: <body onLoad=fadeIn(16)>. When you open the document, the web page will rule out the fadeIn(16) function. The spilt view is like the following picture.

Fourth, go back to the design view and save the document. Then press F12 key to preview the effect in the Internet Explorer. Like the following picture. You can see the back color fading from red to black. If you are discontent with the twinkling color, you can change it to others.

Dreamweaver 8.0 Tutorial ---- How To Make The Twinkling Background Color 003

 

Dreamweaver 8.0 Tutorial ---- How To Make The Twinkling Background Color 004

Now the web page with twinkling background color is ready. You can change the color in to others. But the twinkling color should be fit for the whole website. Or the twinkling background color will look unharmonious.

For help, advice, tips and tricks, challenges, feel free to visit ourDoNotYet forum or Submit your good resource to share.

Reminder: Unless stated otherwise, all resources published on this site are NOT for commercial use. To use any resource from this site for commercial purposes, please contact the author.

Related Posts