HTML Exercise 15 Creating An Engraved Metal Heading For The Text Wrap Page

Transcription

1 HTML Exercise 15 Creating An Engraved Metal Heading For The Text Wrap Page 1. Click Start, point to Programs, point to the Jasc Software folder, and select Paint Shop Pro Maximize the Paint Shop Pro window. 3. Press Ctrl+N. 4. The New Image dialog box opens. 5. Under Image Dimensions, select 600 pixels for the Width and 150 pixels for the Height. 6. The Resolution should be set to 72 ppi. 7. For Background Color, select White. 8. For Image Type, select 16.7 Million Colors. 9. Click OK. 10. Notice the Memory Required. This is far too large for a Web graphic. Don t worry about it for now. 11. Click OK. 12. Click the Normal Viewing button on the Toolbar. 13. The canvas is now at full size. Change the Foreground and Background Colors 14. Click the triangle on the Foreground/Stroke button and select Solid. 15. Click the Foreground/Stroke button, but not on the triangle. 16. The Color dialog box opens. 17. Change the color to yellow (R=255, G=255, B=0). 18. Click OK. 19. Click the triangle on the Background/Fill button and select Solid. 20. Click the Background/Fill button, but not on the triangle. 21. The Color dialog box opens. 22. Change the color to gray (R=192, G=192, B=192). 23. Click OK. 24. Under Textures, both the Foreground and Background should be set to Null. Creating a Brushed Metal Background 25. Click Effects on the Menu bar, point to Noise, and select Add. Exercise 15 Page 1

2 26. The Add Noise dialog box will open. 27. Copy the settings in the picture to the right. 28. Click OK. 29. Click Effects on the Menu bar, point to Blur, and select Motion Blur. 30. The Motion Blur dialog box opens. 31. Copy the settings in the picture to the right. 32. Click OK. 33. Now to get rid of all the colors except black and white. 34. Click Colors on the Menu bar and select Gray Scale. 35. Increase colors to 16 million by clicking Colors on the Menu bar, point to Increase Color Depth, and select 16 Million Colors. 36. Darken the image by clicking, Colors on the Menu bar, and pointing to Adjust and selecting Brightness/Contrast. 37. The Brightness/Contrast dialog box opens. 38. Copy the settings in the picture to the right. 39. Click OK. Hopefully, this looks like bushed metal to you. Creating Text 40. Press Ctrl+Alt+G to view the Grid. 41. Press Ctrl+Alt+R to turn on the Rulers. 42. Click the Text tool on the Tool Palette. 43. Move the mouse over the drawing canvas. 44. Move the crosshair 100 pixels from the top and 300 pixels across. 45. Look at the Status bar in the left corner. 46. Click on the drawing canvas. 47. The Text Entry dialog box opens. 48. Under Font, select Arial Black. 49. Under Size, select 60. Exercise 15 Page 2

3 50. Select Bold. 51. Select Center. 52. Under Create As, select Selection and Antialias. 53. Do not select Floating. 54. Uncheck Auto Kern 55. Set the Kerning to This will increase the space between the characters. 57. Press the Caps Lock key and type TEXT WRAP in the text box. 58. Click OK. 59. The text is selected. 60. Press Ctrl+Alt+G to turn off the Grid. 61. Look at Figure 1. Figure 1 The selection is in the shape of words Adding Some Effects 62. Click Effects on the Menu bar, point to 3-D Effects, and select Cutout. 63. The Cutout dialog box opens. 64. Uncheck Fill interior with color. 65. Click the Shadow color swatch. 66. The Color dialog box opens. 67. Under Basic Colors, select Black. 68. Click OK. Exercise 15 Page 3

4 69. Set the Opacity, Blur and Offset to the settings in the picture to the right. 70. Click OK. 71. Set the Opacity, Blur and Offset to the settings in the picture to the right. 72. Click OK. Adding a Drop Shadow Effect 73. Click Effects on the Menu bar, point to 3D Effects, and select Drop Shadow. 74. The Drop Shadow dialog box opens. 75. Click the Color box. 76. The Colors dialog box opens. 77. Under Basis Colors, select White. 78. Click OK. 79. Copy the settings in the picture to the right. 80. Click OK. 81. Look at Figure Press Ctrl+D to deselect the text. 83. Look at Figure You have created the illusion of engraved metal text. Figure 2 Saving as a Compressed GIF File Paint Shop Pro files are not compressed. GIF files are compressed and are much smaller in size. Exercise 15 Page 4

5 85. Click File on the Menu bar, point to Export, and select GIF Optimizer. 86. The GIF Optimizer opens. 87. Click the Transparency tab. 88. Select None. 89. Click the Colors tab. 90. Copy the settings to the right. 91. You need 256 colors, for this graphic to look good. 92. Notice how the two pictures look the same, but the file size is much smaller because it is compressed. 93. Click OK. 94. The Save As dialog box opens. 95. Look in your HTML folder. 96. Name the file heading8.gif. 97. Click Save or press Enter. 98. Close Paint Shop Pro. Inserting a Picture in HTML To insert a picture use the <IMG SRC= filename > tag. The tag is nonpaired. 99. Double-click your HTML folder to open it Double-click the html_template.html document to open it Right-click a blank spot on the page and select View Source Click File on the Menu bar and select Save As The Save As dialog box opens Change the file name to textwrap.html Click Save or press Enter Change the Revision Date in the footer of the page to today s date Below the date, add this line of code. Revised--Date<BR> HTML Exercise 15<BR> 108. Change this line of code in the header. <TITLE>Wrapping Pictures Around Text</TITLE> 109. Select this line of code: Exercise 15 Page 5

6 <P>All of our wonderful text, graphics, hyperlinks, and sounds go here.</p> 110. Type this to make a new heading. <P ALIGN="center"><IMG SRC="heading8.gif"></P> 111. 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 Uploading Your Documents 115. 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. Exercise 15 Page 6

7 118. Under Advanced Toolbox, click. Upload textwrap.html Upload heading8.gif 119. 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 Click the hyperlink to your home page Click. Printing the Web Page 123. 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 15 Page 7