In this section you're going to discover how to design your own FLY-IN advertisement that LOOKS something like this:
Step 1.1:
Open Photoshop Elements and create a new document that's sized 300 pixels wide by 400 pixels high.
Step 1.2:
Add your headline using a nice thick font, like IMPACT by clicking the TYPE TOOL, then click on the white background
Step 1.3:
Now click the TYPE TOOL again then click on the white background below the headline and when the TYPE TOOL turns into a cursor, you can type a SUB HEADLINE.
Step 1.4:
Add images to make up your design, by clicking FILE> OPEN and choose a stock photo on your hard drive.
Remember you can buy stock photos very inexpensively at bigstockphoto.com
Add a stock photo to your design, like this:
Step 1.5:
Now, CROP OFF whatever leftover white space you have in the image by choosing the RECTANGULAR MARQUEE and drawing around the image, omitting the white space, then go to the MENU BAR and choose IMAGE > CROP
Step 1.6:
Save the entire image as "pop.gif" to your "My Web Site" folder.
In the NEXT section of the Web Design Dashboard we will take the image created here and use that to create a functional pop up window.
Step Two: Creating the Actual Fly In Page
Step 2.1: Open your FirstPage software and go to the MENU BAR then choose FILE: NEW WEB DOCUMENT
Step 2.2: Save this document as flyin.html
Step 2.3: Go to the MENU BAR and click the TABLES button.
Step 2.4: Insert a new table with these settings when the settings box pops up on the screen:
Please Note: In the white space above you'll see I typed the text "Insert Image Here". I suggest you type the same text in your own table settings so when the table is inserted into the page, you will see where to insert your image.
Step 2.5: Click the OK button to proceed.
That merges the table into your page which should now look like this:
Step 2.6: Now move your mouse directly onto the border of the table and you should see the 4 way arrow show up.
When that arrow shows up, click down with your left mouse button (just as you'd click on anything) and that will let you select the border of the table.
Your table should now look like this:
Step 2.7: Go to the MENU BAR and look for the LEFT, CENTER, RIGHT and JUSTIFY buttons, like you see below:
Please Note: The above is highlighted in yellow. It will NOT be yellow on your screen.
Step 2.8: Click the button to CENTER the TABLE, like this:
Now your table should look like this in FirstPage:
Step 2.9: Go to the text in the table and click with your mouse JUST before the first word. (This helps you later, just in case you're wondering why the text would need to be there.)
This is what your cursor would look like now, flashing just before the first word in the sentence:
Step 2.10: Go to the MENU BAR and choose INSERT.
Step 2.11: Now choose IMAGE QUICKLY.
Step 2.12: Browse your "My Web Site" folder for the file labelled pop.gif and when you find it, click on it to insert that into your page.
Step 2.13: What you should see now is the image inserted into the table, with the "insert image here" text pushed downwards, on the bottom of the image like this:
Don't worry if having the image and the text like that looks silly. The text is to help you be able to move your mouse around inside the table AFTER the image was inserted. We are going to remove it right away.
Step 2.14: Put your mouse just before the "i" in the word insert and click down, then hit the ENTER key on your keyboard so the text moves to it's own line like this:
Now the line of text can be deleted. So click with your mouse right after the "e" in the word "here" and click the BACKSPACE key on your keyboard to delete the whole line of text.
Step 2.15: Now go to the MENU BAR and click the TABLE button or choose INSERT > TABLE and use these settings:
Make sure you type the text "put optin form code here" in the text field, just like you see in our example.
Step 2.16: Go to the MENU BAR and look for the LEFT, CENTER, RIGHT and JUSTIFY buttons, like you see below:
Please Note: The above is highlighted in yellow. It will NOT be yellow on your screen.
Step 2.17: Click the button to CENTER the TABLE so your new table is centered below the image, like this:
Step 2.18: Now go to the SOURCE view.
Step 2.19: Now go to the FILE MENU and choose FILE > SAVE.
Then save your page as flyinad.html
Step Three: Add Your Autoresponder Code
Keep your flyinad.html page open in FirstPage and go and either sign up for an autoresponder, or login to the autoresponder you're using.
IF YOU USE GETRESPONSE, FOLLOW THESE STEPS:
If you use GetResponse as your autoresponder just login to your account then click on
SUBSCRIBERS
Then choose:
BUILD SUBSCRIBER LIST
Then choose:
CAPTURE SUBSCRIBERS
When you see the link for Web Form, click that and it will give you access to the code you display on your page to create the optin form.
Now select:
Then click: START CAPTURING
That brings up a page with several options you can custom configure to create your form. When you're done entering your thank you page URL and the other custom options, click the GENERATE CODE button and copy the HTML code from the next page.
Scroll DOWN this page until you get to Step #4 which is where we are going to add the HTML code to our fly in ad page.
IF YOU USE AWEBER:
If you use Aweber as your autoresponder just login to your account then click on HELP and click on WEB FORM.
When you see the link for Web Form, click that and it will give you access to the code you display on your page to create the optin form.
Scroll DOWN this page until you get to Step #4 which is where we are going to add the HTML code to our fly in ad page.
Step Four: Add the HTML Code To Your Page
Step 4.1: Open your First Page software and choose to open flyinad.html
Step 4.2: Click to go to SOURCE VIEW
Step 4.3: Now look for THIS line of text in the SOURCE VIEW:
"put optin form code here"
Step 4.4: When you see that line of text, highlight it and then click the DELETE key on your keyboard.
Step 4.5: Now go to the FILE MENU and choose EDIT then choose PASTE and PASTE in your HTML code.
Step 4.6: Now go back to DESIGN VIEW and highlight the code, then click to align it to the LEFT or CENTER it, whichever you prefer.
Step 4.7: Now go back to SOURCE VIEW and choose FILE > SAVE AS and save it as flyinad.html
OPEN FORM SUBMISSION "THANK YOU" PAGE IN NEW WINDOW
If you'd like your "thank you" page to open in a new window after someone enters their email address and subscribes, then follow these steps:
Step 1.1: Open your flyinad.html page in FirstPage.
Step 1.2: Click the SOURCE button to view your page's source code.
Step 1.3: Scroll through the source code until you see:
The code you see may be slightly different from what you see above and that's okay. As long as you see value="Submit"> then you have the right code.
Step 1.4:Copy this code by highlighting and hitting CTRL + C:
onClick='sendme();'>
Step 1.5: ADD the portion of code after the value="Submit" and BEFORE the ending >, like this:
value="Submit" onClick='sendme();'>
Step 1.6: Copy and paste this code BEFORE the submit button code:
<script>
function sendme()
{
window.open("","myNewWin","width=500,height=300,toolbar=0");
var a = window.setTimeout("document.form1.submit();",500);
}
</script>
What the end result should look like is this:
<script>
function sendme()
{
window.open("","myNewWin","width=500,height=300,toolbar=0");
var a = window.setTimeout("document.form1.submit();",500);
}
</script>
Now your table should look like this in FirstPage:
