Web Site Building-101

Chapter 4 / Fill In The Blanks.

"Web Site Building-101"

Use the template as a guideline.

 

To publish your first page there is really just one rule that you must adhere to. Name your home or first page index.html

Click on the blue earth icon in the top tool bar in your editor. You should see the name of the site, page title, and file name. The page title looks wacky for now, but we will change that in a minute through the source code. In the file name box enter this: index.html Never use spaces and always use lowercase when entering file names. Click Publish... 

That's all there is to it. Open a new browser like Google or Yahoo and enter the web site address for your domain and now hopefully existing page, to have a look. As I think I mentioned earlier, I always keep the actual site page up that I'm editing to quickly refresh and have a look at my changes.

Let's make tis page capture!

With a capture page there really is not too much to following the sales guidelines laid out by the template, however for any sales page you plan on building with this same template, you really can just follow the yellow brick road as they say.

You will probably begin to notice a very similar pattern from now on when searching the net through different offer pages. They all look very similar, same red and black fonts, and people that simply used this same template's descriptions as a guideline for what kind of wording they should put on their page, and where to put it. Funny to me, but I'm just glad I found it, and I hope you feel the same.

Any text you don't need or want, just highlight it and erase or backspace it out. Remember this is your creation, and you only use the parts that fit into what your ideas are. Some of the tables or boxes included in the template can be useful too but, if you don't want em' or need em', then just get rid of em' It's so easy to do. 

Left click any where inside one of the boxes like the 100% money back yellowish guarantee box, and you will see a boarder appear around it with X's. Just click on one of the X's, and it will be gone. Made the wrong choice? Click on Edit in the tool bar and select Undo, and it's back. That command normally only works on the last command you gave.

Payment Buttons:

I know we are talking about a capture page here but with the discussion of the boxes the template comes with, let's quickly talk about using the ones that include the PayPal button. This is probably the easiest, most widely recognized, and free-est (Is that a word?, Kidding...) way to accept payments on a web site. Not everyone will recognize it (believe it or not) nor will everyone want to use it, but for starting out, it's the perfect solution.

Do you have a PayPal account? If not then Click here and  go get one now. 

By the way, there are some simple little tricks and shortcuts to building a user friendly site that I plan on throwing together near the end of this course. One of those I just though of as I was using it was the following command:

<"target=_blank">

That little command placed in the exact spot inside the source code of a text hyper link like the "Click here" one above for PayPal, allow a link to open in a new window, rather than taking the user completely away from your site. Sometimes, you may want the user to make their choice, and be gone, but in many cases, you want people to have a look at something but not totally leave your site and be gone forever.

To use this command, enter a sample text, Click Here Now, into the page you are working on in the editor. Highlight only the text you want to be clickable. Now, do you see the gray chain link icon in the tool bar that says "Link"? Click on it. Enter in a destination address. Just use anything, but be sure to include the http://www all the way to the .com Use http://www.websitebuilding-101.com if you want, and click OK. (Keep the highlight on the Click Here Now text, do not click it off.)

You should now see that text blue and underlined in your editor, hopefully still highlighted to make life easier. If it's not still highlighted then just search for the web site address you entered in as the destination. We need to now go into the source of the page, and set it up to open in a new window when clicked. 

Click on the Source tab at the bottom of the page, and you should be able to easily find the hyper link and text in the codes, if it is still highlighted. Inside the code you will see this highlighted:

href="http://www.websitebuilding-101.com">

All we need to do is to enter the target command into the proper spot. Make it look like this:

href="http://www.websitebuilding-101.com"target=_blank">

That's it! Toggle back over to the "Normal" view on the editor, and click Publish. Any time you publish new changes, and you go to the actual site on the net to see how they look you will need to Refresh your page to see them. You newly created text hyper link should now open in a new window.

Alright back to a capture page but that was an important detour as it took me a long time to learn little tricks like that.

Did you get your PayPal account in the step above before we got side tracked? Get familiar with the PayPal back office area, and under "merchant services, you can create "Pay Buttons" Follow the steps by selecting the look you like and entering a price, then copy the html code it creates right into the source portion of your web page in the editor. Get it right inside the box provided if possible, then delete out the PayPal button that's already there and publish. Bam... you now accept money on your site!

Any capture page must have a optin box on it. This is simply the field that a user can enter their name and email, or whatever other info you want to collect. Normally the least you can work with, is the best to make mandatory on these forms. In other words, I set up my web forms optin boxes to include First name (mandatory) last name (not mandatory) and email (mandatory) The box will work if they don't enter their last name, but they don't have to. Many people will enter it any way. The other two fields you will need if you ever plan on contacting them.

Here is a link to the service I use, yes it's an affiliate link but whatever. Use them if you want. They have a free trial you can set up for the sake of creating this page, then cancel if you don't plan on using it. I think the basic plan is only $9 bucks a month any way.

Click here to create your free web form, auto responder account, and then we can create your first web form optin box to embed into your new site.

So here is one cool thing about this service, they have an available support staff. Yes, you can actually call and speak to a living and breathing person. One that is actually knowledgeable too. Rare stuff these days. 

My point to this is that I am not going to walk you through creating a web form or sign up form as they call it. Call them and get them to help you to create one. It is very easy and like three clickable steps to complete it. Here is what you want to create. If you enter your name and email it will just take you to the "thank you page" I selected. Just another course of mine you may have seen...


 



Quick tip: Use this command in the source to center any image, object or optin box: <center>

Simple I know, but took me forever to figure it out by searching for examples when I was learning. 

So believe it or not, if you made it this far then you are well on your way to doing just about whatever you want with this page. Learning how to write ad copy or how to write at all is a totally different course. It can take a lot of practice to get good at. I do recommend working with a good online dictionary and or utilizing the spell checker built into NVU.

Even if you are a pretty good speller, typos happen real easily, and the spell checker picks up most of them. At the top of the tool bar there is a red check mark with abc and the word Spell behind it. Just click on it and it will go through your page. I laugh sometimes at the silly errors I will find on a page that I thought looked perfect at first glance.

Enter some cool images:

Look around at other people's sites that are similar to what you have in mind to get ideas. If this is a capture page you are building, then you don't really need a lot of text, just a few good lines to get the curiosity factor going high enough for someone to want to know more. 

You may want to add some other images to the page, like an arrow pointing to your optin box or possibly a picture of yourself or you and your family. I have included a good handful of sample images with this course. Placing them exactly where your eye wants them to be will be the fun part, but it will get easier for you with practice.

Click here to grab an image or two that might look good on your page, the same way we inserted the header graphic back in chapter 3. Right click over an image you would like to have on your page and left click "Save Picture As." I normally select the Desk Top as the destination to save the image in. Next open up your FileZilla file uploader and find the image on your desktop in the left hand column. Left click, hold and drag it into the right column to upload it to your page. 

Next inside the NVU editor, place your cursor where you would like the image to be. Click on "Insert" in the top tool bar. Select "Image," click on "Chose File" to find the image on your desktop, and click on the image file once. Choose your alternate text, then click "OK" 

Your new image should now appear on the screen in the editor. Remember to check the source code now by clicking the "Source" button at the bottom of the page. Make sure only the file name for the image shows in the source, and not any other local file names like Desktop or C programs or anything like that. As always click "Publish," and you now have a new image on your page. You can move the image around a bit if you need to. Just place your courser in front of, or behind it and space bar it forward, or backspace it back. Remember the <center> command as well that would go in front of the "image" text in the source code.

Continue to Chapter 5




WebSiteBuilding-101

(c) 2009 Web Site Building-101 - All Rights Reserved.