HTML Exercise 9 Making A Transparent 3-D Heading For The Hyperlinks 1 Page

Size: px

Start display at page:

Download "HTML Exercise 9 Making A Transparent 3-D Heading For The Hyperlinks 1 Page"

Sydney Lindsey
5 years ago
Views:

1 HTML Exercise 9 Making A Transparent 3-D Heading For The Hyperlinks 1 Page Paint Shop Pro will make many different kinds of text. Here is a way to make a transparent 3-D heading. The heading must be transparent because this Web page will have a background color. Background colors can make your Web pages more appealing. However, never add a background color that interrupts the text. There are 216 colors that are considered browser-safe. The background color tag is placed within the opening <BODY> tag. Background colors can be named or you must use hexadecimal code. For example: <BODY BGCOLOR= color >. Open an Existing File 1. With your HTML folder open, double-click your hyperlinks1.html file to open it. 2. It will open in Internet Explorer. View the Source of a Web Page 3. Click View on the Menu bar and select Source. 4. The HTML code for the Web page will open in Notepad. 5. Change the Revision Date in the footer of the page to today s date. Changing the Background Color of a Web Page 6. Locate the <BODY> tag. 7. Type this to make a light yellow background color. <BODY BGCOLOR="#FFFFCC"> Hexadecimal Code 8. Click File on the Menu bar and select Save. 9. Click the Internet Explorer button on the Taskbar. 10. Click the Refresh button. 11. You should now see the Web page with a light yellow background. Preparing SuperBladePro 12. Click Start, point to Programs, point to the Jasc Software folder, and select Paint Shop Pro Maximize the Paint Shop Pro window. SuperBladePro gives graphics a 3-D look by creating beveled edges and surface textures. The effects can be subtle or stark, raised or sunken. There are several kinds of bevels, textures, and mirror-like reflections, and controls for light, gloss, iridescence, tarnish, glassiness, and more. It is a timesaving way to make touchable-looking text, web buttons, and special effects. SuperBladePro contains plug-in filters. Plug-in filters are special effects that work with Paint Shop Pro or PhotoShop. Installing Plug-in Filters 14. Click Start, point to Programs, point to the Jasc Software folder, and select Paint Shop Pro 7. HTML Exercise 9 Page 1

15. Click File on the Menu bar, point to Preferences, and select File Locations. 16. The File Locations dialog box opens. Figure 1 17. Click the Plug-in Filters tab. 18.

2 15. Click File on the Menu bar, point to Preferences, and select File Locations. 16. The File Locations dialog box opens. Figure Click the Plug-in Filters tab. 18. All of the check boxes should be selected. 19. At the end of the Folder 3 text box, click the Browse button. 20. The Browse for Folder dialog box opens. 21. Click the + sign next to the C: drive. 22. Click the + sign next to the Program Files. 23. Select the SuperBladePro folder. 24. Click OK twice. Matching the Background Color In order to make the heading transparent, always use a background color that will match the Web page. 25. Click the triangle on the Foreground/Stroke button and select Solid. 26. Click the Foreground/Stroke button, but not on the triangle. 27. The Color dialog box opens. 28. Change the Hexadecimal Code to:. 29. Click OK. 30. Click the triangle on the Background/Fill button and select Solid. 31. Click the Background/Fill button, but not on the triangle. 32. The Color dialog box opens. 33. Under Basic colors, select White. HTML Exercise 9 Page 2

For Image Type, select 16.7 Million Colors. 42. Notice the Memory Required. This is far too large for a Web graphic. Don t worry about it for now. 43. Click OK. 44.

3 34. Click OK. 35. Under Textures, both the Foreground and Background should be set to Null. 36. Press Ctrl+N. 37. The New Image dialog box opens. 38. Under Image Dimensions, select 600 pixels for the Width and 150 pixels for the Height. 39. The Resolution should be set to 72 ppi. 40. For Background Color, select Foreground Color. 41. For Image Type, select 16.7 Million Colors. 42. Notice the Memory Required. This is far too large for a Web graphic. Don t worry about it for now. 43. Click OK. 44. Click the Normal Viewing button on the Toolbar. 45. The canvas is now at full size. Creating Text 46. Click the Text tool on the Tool Palette. 47. Move the mouse over the drawing canvas. 48. Click on the drawing canvas. 49. The Text Entry dialog box opens. 50. Under Font, select Showcard Gothic. 51. Under Size, select Select Bold 53. Select Center. 54. Under Create As, select Floating and Antialias. 55. Select Auto Kern. Kerning is the space between letters. 56. Click the Standard text button This turns off the Stroke color and leaves the Fill color. 58. Press the Caps Lock key and type TEACHERS in the text box. HTML Exercise 9 Page 3

59. Click OK. 60. The text is selected. 61. Move the mouse pointer over the selected text until the pointer turns to a four-headed arrow. 62. The four-headed arrow is called the Mover tool. 63.

4 59. Click OK. 60. The text is selected. 61. Move the mouse pointer over the selected text until the pointer turns to a four-headed arrow. 62. The four-headed arrow is called the Mover tool. 63. Move the text horizontally to the middle of the canvas. Creating Gold Text with SuperBladePro 64. Click Effects on the Menu bar, point to Plug-in Filters, point to Flaming Pear, and select SuperBladePro. 65. The SuperBladePro dialog box opens. Loading a SuperBladePro Preset A preset is like an autoformat. Someone has created the design for you. SuperBladePro comes with a number of presets that you can use and change. You can also create your own presets or download thousands of presets free from the Web. 66. Click the Load Preset button. 67. The Open a settings file dialog box will appear. 68. Select gold furnace.q5q. 69. A preview of the effect will appear on the right. 70. Click Open. 71. You can now see a preview of the effect on your text. 72. Look at Figure Click the + sign so that you are looking at 100%. Adding a Drop Shadow Effect 74. Click Effects on the Menu bar, point to 3D Effects, and select Drop Shadow. 75. The Drop Shadow dialog box opens. 76. Click the Color box. 77. The Colors dialog box opens. Figure 2 HTML Exercise 9 Page 4

78. Under Basis Colors, select Black. 79. Click OK. 80.

GIF files are compressed and are much smaller in size. 84.

5 78. Under Basis Colors, select Black. 79. Click OK. 80. Copy the settings in the picture to the right. 81. Click OK. 82. Do not deselect the text. 83. Look at Figure 3. Figure 3 Saving as a Compressed GIF File Paint Shop Pro files are not compressed. GIF files are compressed and are much smaller in size. 84. Click File on the Menu bar, point to Export, and select GIF Optimizer. 85. The GIF Optimizer opens. 86. Click the Transparency tab. 87. Select Outside the current selection. 88. Everything outside the selection will become transparent. HTML Exercise 9 Page 5

89. Click the Partial Transparency tab. 90. Copy the settings to the right. Figure 4 The heading is transparent except for around the drop shadow where it blends into the background. 91.

Notice how the two pictures look the same, but the file size is much smaller because it is compressed. 95. Click OK. 96. The Save As dialog box opens. 97. Look in your HTML folder. 98.

6 89. Click the Partial Transparency tab. 90. Copy the settings to the right. Figure 4 The heading is transparent except for around the drop shadow where it blends into the background. 91. Click the Colors tab. 92. Copy the settings to the right. 93. You need 256 colors, for this graphic to look good. 94. Notice how the two pictures look the same, but the file size is much smaller because it is compressed. 95. Click OK. 96. The Save As dialog box opens. 97. Look in your HTML folder. 98. Name the file heading2.gif. 99. Click Save or press Enter The file is now 6 times smaller in size, and is now ready to be inserted into your hyperlinks1.html file Close Paint Shop Pro. Inserting a Picture in HTML To insert a picture use the <IMG SRC= filename > tag. The tag is nonpaired Click the hyperlinks1.html Notepad document on the Taskbar Select this line of code: <H1><CENTER>Teachers at Orville Wright</CENTER></H1> HTML Exercise 9 Page 6

104. Type this to make a new heading. <P ALIGN="center"><IMG SRC="heading2.gif"></P> 105. Click File on the Menu bar and select Save. 106. Click the Internet Explorer button on the Taskbar. 107.

7 104. Type this to make a new heading. <P ALIGN="center"><IMG SRC="heading2.gif"></P> 105. Click File on the Menu bar and select Save Click the Internet Explorer button on the Taskbar Click the Refresh button Look at Figure 5. Figure 5 The heading is transparent. Uploading Your Documents 109. 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 hyperlinks1.html Upload heading2.gif 113. 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. HTML Exercise 9 Page 7

8 Printing the Web Page 117. 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. HTML Exercise 9 Page 8

HTML Exercise 11 Making A Transparent 3-D Heading For The Hyperlinks 2 Page

HTML Exercise 11 Making A Transparent 3-D Heading For The Hyperlinks 2 Page This exercise will give you practice downloading and installing your own SuperBladePro presets, creating a transparent heading