Making Graphics Interactive

Transcription

1 Making Graphics Interactive

2

3 A Banner Ad or web banner is a form of advertising on the World Wide Web delivered by an ad server. This form of online advertising entails embedding an advertisement into a web page. It is intended to attract traffic to a website by linking to the website of the advertiser. The advertisement known as a "click through." In many cases, banners are delivered by a central ad server. Source:

4 Type A Specific Web Address Type B Open Web Address

5

6 Type A Specific Web Address Leads to a specific, pre-determined Web address (in this case ).

7 Type B Open Web Address Can lead to any Web site, usually a State-sponsored Web site (State Department of Transportation, or any of its partners).

8 Type A Specific Web Address

9 Type A STEP 1: Download Asset Navigate to Asset page, and download. In this case Asset is a Web-banner ad, JPEG, 728x90 pixels.

10 Type A STEP 2: Navigate to Your Download Navigate to your downloaded Asset, usually found in your computer s Downloads folder.

11 Type A Step 3: Let s Look at the Asset In this case Asset is KnowForSure_180x150.swf. We ask that you keep this title intact. (That is, don t change it.) NHTSA can use this specific title to track usage of banner ad.

12 Type A Step 4: Make Your Image Interactive So you have a static image (JPEG) now what? You can place this image on a Web page using programs such as Dreamweaver, FrontPage, and other similar programs, but you still have a static image on a page. We want to make it interactive. That is, when you click on it, it will perform a desired action or take you to a specific Web page. (Although Web address appears in banner, the banner needs to be clickable and take you to the desired site.)

13 Type A Step 5: Place Banner on Page Place banner on desired location on Web page. Place banner image on page with Web design software. Remember, this is a linked asset (that is, it will reside on a folder on the Web site, even though it appears as part of the Web page).

14 Type A Step 6: Hyperlink the Banner Hyperlink the banner add a Web address to the image and make it clickable. Although Web design software packages differ, it is usually fairly easy to hyperlink an image. In most cases right-click the image, and choose hyperlink".

15 Type A Step 7: Add Link Insert the link. Make sure to add appropriate prefix (usually ). Some of the older browser versions require the hypertext protocol extension ( ) to correctly link to the site. Although this is a dwindling segment of browsers, they are still out there. And, the hypertext protocol extension will not affect Web addresses in newer browsers. In this case link is

16 Type A Step 8: Add Alt Tags Alt Tags are text tags added to the banner image that work in certain browsers and screen readers for the visually impaired. Not only does this make the banner 508 compliant, but it also includes important keywords that can be picked up by search engines. Be as descriptive as possible. EXAMPLE: Banner Ad promoting Child Passenger Safety. Text says Getting Home Safely is Just a Click Away and shows images of child car seats buckled in correctly. Web link: Ad produced in cooperation with the National Highway Transportation Safety Administration (NHTSA) and the Ad Council.

17 Type A Step 9 (optional): Make Hyperlinks into XHTML Rollovers (advanced) Impress your visitors by adding a rollover effect to the banner. This effect involves Cascading Style Sheets (CSS) and bit of XHTML programming know-how. Step-by-step instructions can be found here:

18 Type B Open Web Address

19 Type B STEP 1: Download Asset Navigate to Asset page, and download. In this case Asset is downloadable as either a flash object, shockwave file, or JPEG. This item can be publically downloaded at: +Over/No+Refusal+Toolkit/300x250+Basic

20 Type B What s the difference?

21 Type B Flash and Shockwave files can be animated. (GIFs can be animated as well.)

22 Type B JPEG Files are stagnant. (For purposes of this demonstration, we ll be using the JPEG.)

23 Type B STEP 2: Navigate to Your Download Navigate to your downloaded Asset, usually found in your computer s Downloads folder.

24 Type B Open the Zip file, extract to a folder. Open the Zip file. You will see three items. Extract them to a folder on your hard drive. We will be using the first item, with the JPEG extension.

25 Type B Step 3: Let s Look at the Asset In this case Asset is JPEG nhtsa_basic_300x250. Please keep this title intact. (That is, don t change it.) NHTSA can use this specific title to track usage of banner ad.

26 Type B Step 4: Make Your Image Interactive So you have a static image (JPEG) now what? You can place this image on a Web page using programs such as Dreamweaver, FrontPage, and other similar programs, but you still have a static image on a page. We want to make it interactive. That is, when you click on it, it will perform a desired action or take you to a specific Web page.

27 Type B Step 5: Place Banner on Page Place banner on desired location on Web page. Place banner image on page with Web design software. Remember, this is a linked asset (that is, it will reside on a folder on the Web site, even though it appears as part of the Web page).

28 Type B Step 6: Hyperlink the Banner Hyperlink the banner add a Web address to the image and make it clickable. Although Web design software packages differ, it is usually fairly easy to hyperlink an image. In most cases right-click the image, and choose hyperlink".

29 Type B Step 7: Add Link Insert the link. Make sure to add appropriate prefix (usually ). Some of the older browser versions require the hypertext protocol extension ( ) to correctly link to the site. Although this is a dwindling segment of browsers, they are still out there. And, the hypertext protocol extension will not affect Web addresses in newer browsers.

30 Type B Step 8: Add Alt Tags Alt Tags are text tags added to the banner image that work in certain browsers and screen readers for the visually impaired. Not only does this make the banner 508 compliant, but it also includes important keywords that can be picked up by search engines. Be as descriptive as possible. EXAMPLE: Banner Ad promoting driver safety. Text says Drive Sober or Get Pulled Over and shows image of a police officer and a shield. A button link says Learn More and leads to Web link: [insert relevant Web link here].

31 Type B Step 9 (optional): Make Hyperlinks into XHTML Rollovers (advanced) Impress your visitors by adding a rollover effect to the banner. Drive Sober or Get Pulled Over This effect involves Cascading Style Sheets (CSS) and bit of XHTML programming know-how. Step-bystep instructions can be found here:

32 v1 More Info: ehow instructions on how to post a banner ad: How Stuff Works Banner Ads: