Making Graphics Interactive€¦ · A Banner Ad—or web banner—is a form of advertising on the...
Transcript of Making Graphics Interactive€¦ · A Banner Ad—or web banner—is a form of advertising on the...
![Page 1: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/1.jpg)
Making Graphics Interactive
![Page 2: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/2.jpg)
![Page 3: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/4.jpg)
Type A — Specific Web Address
Type B — Open Web Address
![Page 5: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/5.jpg)
![Page 6: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/6.jpg)
Type A — Specific Web Address Leads to a specific, pre-determined Web address (in this case www.SaferCar.gov/TheRightSeat ).
![Page 7: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/7.jpg)
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).
![Page 8: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/8.jpg)
Type A – Specific Web Address
![Page 9: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/9.jpg)
STEP 1: Download Asset Navigate to Asset page, and download. In this case Asset is a Web-banner ad, JPEG, 728x90 pixels.
Type A
![Page 10: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/10.jpg)
STEP 2: Navigate to Your Download Navigate to your downloaded Asset, usually found in your computer’s “Downloads” folder.
Type A
![Page 11: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/11.jpg)
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
![Page 12: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/12.jpg)
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.)
![Page 13: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/13.jpg)
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).
![Page 14: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/14.jpg)
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".
![Page 15: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/17.jpg)
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
![Page 18: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/18.jpg)
Type B – Open Web Address
![Page 19: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/19.jpg)
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
![Page 20: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/20.jpg)
What’s the difference?
Type B
![Page 21: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/21.jpg)
Flash and Shockwave files can be animated. (GIFs can be animated as well.)
Type B
![Page 22: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/22.jpg)
JPEG Files are stagnant. (For purposes of this demonstration, we’ll be using the JPEG.)
Type B
![Page 23: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/23.jpg)
STEP 2: Navigate to Your Download Navigate to your downloaded Asset, usually found in your computer’s “Downloads” folder.
Type B
![Page 24: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/24.jpg)
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
![Page 25: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/25.jpg)
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
![Page 26: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/26.jpg)
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
![Page 27: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/27.jpg)
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).
![Page 28: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/28.jpg)
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".
![Page 29: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/29.jpg)
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
![Page 30: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/30.jpg)
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
![Page 31: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/31.jpg)
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
![Page 32: 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](https://reader033.fdocuments.us/reader033/viewer/2022053011/5f0ec3b47e708231d440d381/html5/thumbnails/32.jpg)
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