making graphics interactive€¦ · a banner ad—or web banner—is a form of advertising on the...

Making Graphics Interactive

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: http://en.wikipedia.org/wiki/Web_banner

Type A — Specific Web Address

Type B — Open Web Address

Type A — Specific Web Address Leads to a specific, pre-determined Web address (in this case www.SaferCar.gov/TheRightSeat ).

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).

Type A – Specific Web Address

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

Type A

STEP 2: Navigate to Your Download Navigate to your downloaded Asset, usually found in your computer’s “Downloads” folder.

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.

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.

Type A

(Although Web address appears in banner, the banner needs to be “clickable” and take you to the desired site.)

Step 5: Place Banner on Page Place banner on desired location on Web page.

Type A

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).

Step 6: Hyperlink the Banner Hyperlink the banner – add a Web address to the image and make it clickable.

Type A

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".

Step 7: Add Link Insert the link. Make sure to add appropriate prefix (usually “http://”). Some of the older browser versions require the hypertext protocol extension (“http://”) 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 http://www.SaferCar.gov/TheRightSeat

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: www.SaferCar.Gov/TheRightSeat. Ad produced in cooperation with the National Highway Transportation Safety Administration (NHTSA) and the Ad Council.

Type A

Step 9 (optional): Make Hyperlinks into XHTML Rollovers (advanced) Impress your visitors by adding a rollover effect to the banner.

Type A

www.SaferCar.Gov/TheRightSeat

This effect involves Cascading Style Sheets (CSS) and bit of XHTML programming know-how. Step-by-step instructions can be found here: http://bit.ly/GOSQbZ

Type B – Open Web Address

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: http://www.trafficsafetymarketing.gov/CAMPAIGNS/Drunk+Driving/Drive+Sober+or+Get+Pulled

+Over/No+Refusal+Toolkit/300x250+Basic

Type B

What’s the difference?

Type B

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

Type B

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

Type B

STEP 2: Navigate to Your Download Navigate to your downloaded Asset, usually found in your computer’s “Downloads” folder.

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.

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.

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.

Type B

Step 5: Place Banner on Page Place banner on desired location on Web page.

Type B

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).

Step 6: Hyperlink the Banner Hyperlink the banner – add a Web address to the image and make it clickable.

Type B

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".

Step 7: Add Link Insert the link. Make sure to add appropriate prefix (usually “http://”). Some of the older browser versions require the hypertext protocol extension (“http://”) 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.

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].

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-by-step instructions can be found here: http://bit.ly/GOSQbZ

Type B

eHow instructions on how to post a banner ad: http://www.ehow.com/how_7244571_program-banner-ad.html How Stuff Works – Banner Ads: http://www.howstuffworks.com/banner-ad.htm

More Info:

10111-111213-v1