HTML Exercise 12 Making A Transparent 3-D Heading For The Hyperlinks 3 Page This exercise will give you practice downloading and installing your own SuperBladePro presets, creating a transparent heading using the GIF Optimizer, and inserting the heading into the html of a Web page. Open Your Downloaded Folder 1. Double-click the My Computer icon. 2. Double-click the C:\ drive to open it. 3. Double-click the Program Files folder. 4. Double-click the SuperBladePro folder. 5. Double-click the Environments and Textures folder. 6. Double-click the Downloaded folder. 7. You should see the files you downloaded in the previous exercise. 8. Click the Internet Explorer button on the Taskbar. 9. Type http://kittykatz.www4.50megs.com/bppresets10.htm in the Address bar text box and press Enter. 10. Bookmark this Web site as you may come here again. 11. Scroll down a bit until you see the preset section. These are for SuperBladePro. 12. There are 25 pages of presets.. 13. Click the page 1 hyperlink. 14. Page 1 will open with a number of presets. 15. Find a preset you like on this page or any other page. 16. Each picture is a hyperlink. Exercise 12 Page 1
17. Click the preset you wish to download. 18. The File Download dialog box will open. 19. Select Open. 20. Click OK. 21. WinZip will automatically open. 22. Click. 23. Click twice. 24. Click. 25. A new folder will open with the unzipped files in it. 26. Press Ctrl+A to select the files. 27. Press Ctrl+C to copy the files. 28. Click the Downloaded folder on the Taskbar. 29. Press Ctrl+V to paste the files. 30. Close all open windows. Open an Existing File 31. With your HTML folder open, double-click your hyperlinks3.html file to open it. 32. It will open in Internet Explorer. View the Source of a Web Page 33. Click View on the Menu bar and select Source. 34. The HTML code for the Web page will open in Notepad. 35. Change the Revision Date in the footer of the page to today s date. 36. Click the Internet Explorer button on the Taskbar. 37. Click the Refresh button. Changing the Background Color of a Web Page 38. Locate the <BODY> tag. 39. Type this to make a light yellow background color. <BODY BGCOLOR="#CCFFFF"> Hexadecimal Code 40. Click the Internet Explorer button on the Taskbar. 41. Click the Refresh button. 42. You should now see the Web page with a light blue background. Exercise 12 Page 2
Matching the Background Color In order to make the heading transparent, always use a background color that will match the Web page. 43. Click Start, point to Programs, point to the Jasc Software folder, and select Paint Shop Pro 7. 44. Maximize the Paint Shop Pro window. 45. Click the triangle on the Foreground/Stroke button and select Solid. 46. Click the Foreground/Stroke button, but not on the triangle. 47. The Color dialog box opens. 48. Change the Hexadecimal Code to:. 49. Click OK. 50. Click the triangle on the Background/Fill button and select Solid. 51. Click the Background/Fill button, but not on the triangle. 52. The Color dialog box opens. 53. Under Basic colors, select White. 54. Click OK. 55. Under Textures, both the Foreground and Background should be set to Null. 56. Press Ctrl+N. 57. The New Image dialog box opens. 58. Under Image Dimensions, select 600 pixels for the Width and 150 pixels for the Height. 59. The Resolution should be set to 72 ppi. 60. For Background Color, select Foreground Color. 61. For Image Type, select 16.7 Million Colors. 62. Notice the Memory Required. This is far too large for a Web graphic. Don t worry about it for now. 63. Click OK. 64. Click the Normal Viewing button on the Toolbar. 65. The canvas is now at full size. Creating Text 66. Click the Text tool on the Tool Palette. Exercise 12 Page 3
67. Move the mouse over the drawing canvas. 68. Click on the drawing canvas. 69. The Text Entry dialog box opens. 70. Under Font, select a font with a heavy weight. 71. Under Size, select 72 or lower. 72. Select Bold 73. Select Center. 74. Under Create As, select Floating and Antialias. 75. Select Auto Kern. Kerning is the space between letters. 76. Click the Standard text button.. 77. This turns off the Stroke color and leaves the Fill color. 78. Press the Caps Lock key and type Bookmarks in the text box. 79. Click OK. 80. The text is selected. 81. Move the mouse pointer over the selected text until the pointer turns to a four-headed arrow. 82. The four-headed arrow is called the Mover tool. 83. Move the text horizontally to the middle of the canvas. Creating Textured Text with SuperBladePro 84. Click Effects on the Menu bar, point to Plug-in Filters, point to Flaming Pear, and select SuperBladePro. 85. The SuperBladePro dialog box opens. Exercise 12 Page 4
Loading a SuperBladePro Preset 86. Click the Load Preset button. 87. The Open a settings file dialog box will appear. 88. Double-click the Downloaded folder. 89. Select.q5q. 90. A preview of the effect will appear on the right. 91. Click Open. 92. You can now see a preview of the effect on your text. 93. Look at Figure 1. 94. Click the + sign so that you are looking at 100%. Figure 1 Adding a Drop Shadow Effect 95. Click Effects on the Menu bar, point to 3D Effects, and select Drop Shadow. 96. The Drop Shadow dialog box opens. 97. Click the Color box. 98. The Colors dialog box opens. 99. Under Basis Colors, select Black. 100. Click OK. Exercise 12 Page 5
101. Copy the settings in the picture to the right. 102. Click OK. 103. Do not deselect the text. 104. Look at Figure 2. 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. 105. Click File on the Menu bar, point to Export, and select GIF Optimizer. 106. The GIF Optimizer opens. 107. Click the Transparency tab. 108. Select Outside the current selection. 109. Everything outside the selection will become transparent. 110. Click the Partial Transparency tab. 111. Copy the settings to the right. Exercise 12 Page 6
112. Click the Colors tab. 113. Copy the settings to the right. 114. You need 256 colors, for this graphic to look good. 115. Notice how the two pictures look the same, but the file size is much smaller because it is compressed. 116. Click OK. 117. The Save As dialog box opens. 118. Look in your HTML folder. 119. Name the file heading5.gif. 120. Click Save or press Enter. 121. The file is now 9 times smaller in file size, and is now ready to be inserted into your hyperlinks3.html file. 122. Close Paint Shop Pro. Inserting a Picture in HTML To insert a picture use the <IMG SRC= filename > tag. The tag is nonpaired. 123. Click the hyperlinks3.html Notepad document on the Taskbar. 124. Select this line of code: <H1 ALIGN="center">Making Bookmarks in HTML</H1> 125. Type this to make a new heading. <P ALIGN="center"><IMG SRC="heading5.gif"></P> 126. Click File on the Menu bar and select Save. 127. Click the Internet Explorer button on the Taskbar. 128. Click the Refresh button. 129. Look at Figure 2. Uploading Your Documents 130. In Internet Explorer, type www.geocities.com in the Address bar text box and press Enter. 131. Type your user name and password. 132. Press Enter or click the Sign in button. 133. Under Advanced Toolbox, click. Exercise 12 Page 7
Upload hyperlinks3.html Upload heading5.gif 134. Click the button to copy the files to the Geocities server. 135. A new page will open telling you that you have successfully uploaded the files. 136. Click the hyperlink to your home page. 137. Click. Figure 3: Your teacher downloaded this bronze preset from the Web. Printing the Web Page 138. Before printing, click View on the Menu bar, point to Text Size, and select Medium. 139. Press Ctrl+P. 140. The Print dialog box opens. 141. Change the Name to Ireland. 142. Change the Number of copies to 2. 143. Click OK. 144. Your teacher will go online to check your Web page and mark the grade on the printed copy. 145. Close all windows. Exercise 12 Page 8