HTML Exercise 27 Creating A Van Gogh Background Using Plug-in Filters

Transcription

1 HTML Exercise 27 Creating A Van Gogh Background Using Plug-in Filters Background pictures need to be small so the Web page will download quickly. The browser automatically will repeat the picture to fill up the screen. This exercise will produce a repeating background tile that has the swirling colors of Van Gogh s paintings. For this exercise, you will need the following: Paint Shop Pro 7 Simple s Filters A colorful graphic of your choice Installing Plug-in Filters 1. Double-click Network Neighborhood. 2. Double-click the Students 200_ folder. 3. Double-click the Advanced Computers folder. 4. Double-click the HTML folder 5. Double-click the Exercise 27 folder. 6. Select the Simple Filters folder. 7. Press Ctrl+C. 8. Press the drop-down arrow at the end of the Windows Explorer toolbar. 9. Select your period folder. 10. Double-click your HTML folder. 11. Press Ctrl+V to paste the folder. 12. Click Start, point to Programs, point to the Jasc Software folder, and select Paint Shop Pro Click File on the Menu bar, point to Preferences, and select File Locations. 14. The File Locations dialog box opens. 15. Click the Plug-in Filters tab. 16. All of the check boxes should be selected. 17. At the end of the Folder 2 text box, click the Browse button. Exercise 27 Page 1

2 18. The Browse for Folder dialog box opens. 19. Click the + sign next to your period folder. 20. Click the + sign next to your HTML folder. 21. Select the Simple folder. 22. Click OK twice. 23. Minimize Paint Shop Pro. Installing the msvcrt10.dll File These filters use a format originally designed for Adobe Photoshop. Paint Shop Pro can read this format, but it needs an additional file called msvcrt10.dll to be placed in the Windows/System folder. Warning: System files are hidden because they are so important! 24. Double-click Network Neighborhood. 25. Double-click the Students 200_ folder. 26. Double-click the Advanced Computers folder. 27. Double-click the HTML folder 28. Double-click the Exercise 27 folder. 29. Click View on the Menu bar and select Folder Options. 30. The Folder Options dialog box opens. 31. Click the View tab. 32. Select. 33. Click OK. 34. Select the msvcrt10.dll file. 35. Press Ctrl+C. 36. Press the drop-down arrow at the end of the Windows Explorer toolbar. 37. Select the C: drive. 38. Double-click the Windows folder. 39. Double-click the System folder. 40. Press Ctrl+V to paste the file. 41. Close the System folder. Finding a Colorful Picture 42. Click Start, point to Programs, and select Internet Explorer. 43. In the Address bar text box, type Click the Images tab. 45. Search for a colorful picture. Exercise 27 Page 2

3 46. Some search terms you may want to use are flowers, trees, or landscape. 47. The picture should be more than 200 x 200 pixels in height and width. 48. Click the thumbnail of the picture so that you are viewing the full-size picture. 49. Right-click the picture and select Copy. 50. Click the Paint Shop Pro button on the Taskbar. 51. Press Ctrl+V. 52. Your picture will be pasted as a new image in Paint Shop Pro. Resizing the Picture Regardless of the height and width of your photo, the picture must be resized into small square tile. 53. Press Shift+S. 54. The Resize dialog box opens. 55. Uncheck Maintain aspect ratio. 56. Now the picture can be converted from a rectangle to a square. 57. Under Pixel size, change the Width and Height to Click OK. Changing Colors 59. Click the triangle on the Background/Fill button and select Solid. 60. Click the Background/Fill button, but not on the triangle. 61. The Color dialog box opens. 62. Select a light color of choice. 63. For the picture on the next page, your teacher chose #C69E Click OK. 65. Under Textures, both the Foreground and Background should be set to Null. Adding Borders 66. Click Image on the Menu bar and select Add Borders. 67. The Add Borders dialog box opens. 68. Check Symmetric. Exercise 27 Page 3

4 69. Type 8 in all boxes. 70. Click OK. 71. Click the Background/Fill button, but not on the triangle. 72. The Color dialog box opens. 73. Select a dark color of choice. 74. For the picture to the right, your teacher chose #A Click OK. 76. Click Image on the Menu bar and select Add Borders. 77. The Add Borders dialog box opens. 78. Check Symmetric. 79. Type 8 in all boxes. 80. Click OK. 81. Look at Figure 1. Figure 1 Creating Swirls with Effects 82. Click Effects on the Menu bar, point to Geometric Effects, and select Ripple. 83. The Ripple dialog box opens. 84. Copy the settings in the picture to the right. 85. Click OK. 86. Click Effects on the Menu bar, point to Texture Effects, and select Mosaic Glass. Exercise 27 Page 4

5 Copy the settings in the picture to the right. 87. Click OK. 88. Click Effects on the Menu bar, point to Geometric Effects, and select Twirl. 89. The Twirl dialog box opens. 90. Copy the settings in the picture to the right. 91. Click OK. 92. Click Effects on the Menu bar, point to Plug-in Filters, point to Simple, and select Blintz. 93. You will see the effect immediately. 94. Click Effects on the Menu bar, point to Plug-in Filters, point to Simple, and select Quick Tile. 95. A preview of the effect will open. Click Apply. 96. Look at Figure 2. Exercise 27 Page 5

6 Figure 2 Saving the Tile as a Compressed GIF 97. Click File on the Menu bar, point to Export, and select GIF Optimizer 98. The GIF Optimizer opens. 99. Click the Transparency tab Select None Click the Colors tab Copy the settings in the picture to the right Click OK The Save As dialog box opens Save in your HTML folder Name the file vangogh_bg.gif Click Save or press Enter Minimize Paint Shop Pro. Using the Tile as a Background 109. Click your HTML folder on the Taskbar Double-click the table2.html document to open it Right-click a blank spot on the page and select View Source The table2 page opens in Notepad Change the Revision date Below the date, add this line of code. Exercise 27 Page 6

7 Revised--Date<BR> HTML Exercise 27<BR> 115. Use the Caps Lock key to make all caps for the tags Change the text between the <BODY> </BODY> tags. <BODY BACKGROUND="vangogh_bg.gif"> 117. Click File on the Menu bar and select Save Click the Internet Explorer button on the Taskbar Click the Refresh button Look at Figure 3. Figure 3:The background is beautiful, but you can t read the table, the navigation strip, or the credits. Adding a New Row for the Navigation Strip and Credits Information The navigation strip and credits at the bottom of the page would be readable if they were part of the table. Here is how to create a new merged row at the bottom of the table Select the closing </TABLE> tag Press Ctrl+X to cut the text Move the insertion point to before the closing </BODY> tag Press Ctrl+V to paste the text. </TABLE> </BODY> </HTML> Exercise 27 Page 7

8 125. Change the text between the <BODY> </BODY> tags. <TR HEIGHT="100"> <TD ALIGN="center"><A HREF="wright.jpg"><IMG SRC="wrighttmb.jpg" ALT="Orville Wright" BORDER="0"></A></TD> <TD>I've taught at Orville Wright Magnet School for eight years. During that time, I've had the pleasure of knowing many wonderful students. From 1994 to 1998, I taught math, science, and aerospace. Since 1998, I have managed the computer lab. I can't wait for tomorrow, because each day is a new surprise.</td> </TR> <TR> <TD COLSPAN="2"> <P ALIGN="center"> <FONT FACE="arial" SIZE="1"> <A HREF="index.html">Home</A> <A HREF="lists.html">Making Unordered and Ordered Lists</A> <A HREF="hyperlinks1.html">Making Hyperlinks to Other Web Pages</A> <A HREF="hyperlinks2.html">Making Hyperlinks to Other Web Sites</A><BR> <A HREF="hyperlinks3.html">Making Hyperlinks to Other Parts of a Web Page</A> <A HREF="psp.html">Using Paint Shop Pro to Make Web Graphics</A> <A HREF="textwrap.html">Wrapping Text Around Pictures</A><BR> <A HREF="pictures.html">Linking Pictures</A> <A HREF="tables.html">Making Tables</A> <A HREF="backgrounds.html">Creating Backgrounds</A> <A HREF="fonts.html">Formatting Fonts, Font Size, and Color</A><BR> <A HREF="sound.html">Adding Sound To Your Web Site</A> <A HREF="animation.html">Animated GIF's</A> <A HREF="javascript.html">JavaScript</A> The navigation strip is here. </FONT> </P> <CENTER> <ADDRESS> Page created by: Your Names<BR> Copyright &COPY2001, Your names-all rights reserved.<br> Revised--Date<BR> us at: <A HREF="mailto:your address">your address</a> or <A HREF="mailto:your partner's address">your partner's address</a> </ADDRESS> </CENTER> </TD> </TR> </TABLE> </BODY> </HTML> Center the credits. The closing tag for centering; remember first in, last out. Add a Table Background Color and a Border Color The Van Gogh background is too colorful to use behind the table. Here s how to add a background color and colorful border to a table. Exercise 27 Page 8

9 126. Change or add these subcommands to the opening <TABLE> tag. <TABLE BORDER="10" WIDTH="640" CELLSPACING="5" CELLPADDING="5" ALIGN="center" BGCOLOR="#C69E42" BORDERCOLOR="#A64329"> 127. The border color is the dark color your teacher used for the second border in Paint Shop Pro Click the Paint Shop Pro button on the Taskbar Click the Background/Fill button, but not on the triangle The Color dialog box opens Copy the hexadecimal code Your teacher chose #A Click OK Paste the hexadecimal code into you HTML subcommand The background color of the table is the light color your teacher used for the first border in Paint Shop Pro Click Paint Shop Pro on the Taskbar Right-click the Background/Fill button, but not on the triangle The Recent Colors dialog box opens Click the light color you used for the first border Copy the hexadecimal code Your teacher chose #C69E Click OK Paste the hexadecimal code into you HTML subcommand Click File on the Menu bar and select Save Click the Internet Explorer button on the Taskbar Click the Refresh button Look at Figure 4. Exercise 27 Page 9

10 Figure 4: The background is beautiful, and the table is readable. Uploading Your Documents 148. In Internet Explorer, type in the Address bar text box and press Enter Type your user name and password Press Enter or click the Sign in button Under Advanced Toolbox, click. Upload table2.html Upload vangogh_bg.gif 152. Click the button to copy the files to the Geocities server A new page will open telling you that you have successfully uploaded the files. Exercise 27 Page 10

11 154. Click the hyperlink to your home page Click Click. Printing the Web Page 157. Before printing, click View on the Menu bar, point to Text Size, and select Medium Press Ctrl+P. The Print dialog box opens Change the Name to Ireland Change the Number of copies to Click OK Your teacher will go online to check your Web page and mark the grade on the printed copy Close all windows. Exercise 27 Page 11