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.
Type A — Specific Web Address
Type A — Specific Web Address
Type B — Open Web Address
STEP 1: Download Asset
Navigate to Asset page, and download. In this case Asset is a Web-banner ad, JPEG, 728x90 pixels.
STEP 2: Navigate to Your Download
Navigate to your downloaded Asset, usually found in your computer’s “Downloads” folder.
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.
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
Step 5: Place Banner on Page
Place banner on desired location on Web page.
Type A
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
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
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.
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
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
What’s the difference?
Flash and Shockwave files can be animated.
(GIFs can be animated as well.)
JPEG Files are stagnant.
(For purposes of this demonstration, we’ll be using the JPEG.)
STEP 2: Navigate to Your Download
Navigate to your downloaded Asset, usually found in your computer’s “Downloads” folder.
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.
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.
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.
Step 5: Place Banner on Page
Place banner on desired location on Web page.
Type B
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
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.
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].
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
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
