WyzGuys Computer Tutors

 Computer Instruction. Web Design Instruction,  and Web Hosting 

 

Adding a Payment Button

 

Site Navigation

Home
Student Registration
Class Resources

Day One

Introduction
Student Sites
Web Structure
Computer Settings
Site & Pages
Explore FrontPage
Web Site Wizard
Shared Borders
Web Page Themes
Page Header
Adding Text
Homework 1
Web Hosting 101
Web Site Design
Home Page Design

Day Two

Introduction
Your Home Page
Adding Pages
About Us Content
Add More Pages
Deleting Pages
Navigation
Link Bars
Custom Link Bars
Hyperlinks
Adding Hyperlinks
Hyperlink Exercise
Publishing
Copy Your Site
Homework 2

Day Three

Introduction
Bullet List
Numbered List
Tables
Table Uses
Create Tables
Graphics Intro
Image Sizing
Photo Editing
Adding Graphics
Photogalleries
Gallery Tool
Saving Images
Adding Music

Day Four

Form Wizard
Custom Form
Form Exercise
Form Properties
Web Components
Add a Map
Add Search Box
Marquee
Buttons
Hit Counter
Split & Code View
On-Line Sales
PayPal Buttons
Building Traffic
Meta Tags
Search Engines
Appendix & FAQs
Adv Techniques
Interactive Web
Conclusion
Evaluation

We use and recommend

for your on-line transactions

Hands on Practice - Adding a PayPal Button

Get the code:  Click on the link to download the code to create a button on your web site.  this should open Notepad and display the code we created earlier.  It should look like the text below.  I copied this from the Code view screen in order to get the colors, which show the different parts of the code.

Lets take a quick look.  The first thing we see is that this is really a web form from the <form> tag.

We can also see the values we typed into the PayPal web site.  HTML becomes less intimidating as you work with it.

  • Highlight and Copy the code from the text file.

  • Switch to FrontPage.

  • Open your Products page, and place the insertion point in a blank area of the page.

  • Switch to Split view.

  • Find the flashing cursor in the Code view, and click your insertion point there.  You should be between tags <p>&nbsp; and </p>

  • Select Edit, Paste or use CTRL V to paste the code into the Code view pane.

  • The button code should appear, as in the illustration below.

  • Click on the Design view.  The button will display inside the dashed form enclosure, as below.

You can edit this form the same way you can edit any web form in FrontPage.  Lets try it out

  • Place your insertion point into the form.

  • Type the text "Student Web Site Special Offer <press Enter> Only $50 for one year. Includes 1 domain name, web hosting, and 1 e-mail address." into the form enclosure.

  • Select the button image, right click, select Picture Properties.  Click on the Appearance tab, and choose Right from the selections.

  • Select the text and Center it.

  • Make the first line bold, if it isn't already.

  • Select the entire text, click on the arrow next to the Borders button, and select Outside Border from the options.

Your efforts should look like the example below.

Student Web Site Special Offer

Only $50 for one year. Includes 1 domain name, web hosting, and 1 e-mail address.

 

Switch to the Preview view and click on the button.  What happened?  You were directed to my PayPal Payments Page.  If you want to buy web hosting from me some day, this button would actually allow you to do so.

Adding Other Bits of Code

If you sign up for one or more affiliate marketing programs, there will be code snippets to insert for banner and border ads.  They insert the same way.

If you are interested in looking at Affiliate Marketing, try Commission Junction.  I've signed up a few products through them, and it works fine.

Back To Exercise Next

 

Curriculum developed by WyzGuys Computer Tutors

All Rights Reserved - updated 12/07/2006

Hosted by WyzHost.com

contact support@wyzhost.com