Become A Webpage Expert In 24 Hours

Giving you HONEST step by step instructions so that YOU can Create YOUR own Webpages

Written By Thales Prado & Samantha Milnerwww.dsm-publishing.co.uk

www.thalesdotcom.com

The information contained in this publication is for reference only. The author and/or publisher are not liable for any losses, actions or liabilities that arise from reading or using any of the information contained in this publication. The reader/user is responsible for checking and adhering to any legal requirement pertaining to the use, downloading or any resultant action from any software versions arising from a link in this book. The author and /or publisher are not responsible for any broken links although we try our best to make sure the information contained herein is accurate.

Please Note: You have Private Rights only on this product. You may use this product as many times as you wish as long as it is not passed on to others. If you would like to purchase Premium Master Resale Rights Click Here Join the DSM Ezine and receive special offers and fantastic freebies!

ets face it without a webpage we simply do not have an online business. Unless we were born with design skills there is simply no chance whatsoever that we are going to make it on our own. We need what I would call a nudge in the right direction. Someone with the experience that can show us the easy way of creating quality webpages in a flash without the need for huge webdesign fees.

Webpages

One of the easiest ways to set up your own products on the internet without being tied to eBay and being able to enjoy high traffic and increase your earnings.

Webpages have become very popular in recent times and I jumped on the webpage bandwagon about four years ago now.

I love creating Webpages!

After I have uploaded a webpage I feel a great sense of achievement and the more I do the wider my smile becomes.

There are several different types of webpages whether it is for content sites, squeeze pages or general sales pages. However if you have never created a webpage you will probably find it extremely daunting and pretty frightening.

Often you will put it on the back burner and decide to get back to it at a later date. That was me once until I decided I needed to take charge of the situation and no longer be afraid of it.

But I would have loved a product telling me what to do first and this is why I have written this e-book for you.

So Lets get started!

Through this report I am going to show you how you can build a top-notch Landing Page, be it for your own Products, or for a Google Adwords Campaign. For that we are going to use Freeware software called NVU, which is the best thing after an apple pie.

First Step:

You’ll need to go to http://www.net2.com/nvu/ and click in download:

The software is not really huge like the Trial of Dreamweaver CS4, so you should chill out whilst the software downloads, it is only 16Mb, it took 3min to download on my internet connection @ 100kb/s, so before you know it NVU will be on your hard-drive ready to be installed.If you get lost on the download page, look at the next screen in which I show you exactly where you have to click in order to download the installer of NVU:

You’ll want to download the .exe version since it makes things easier to install. When you find the screen above you need to click on Download button. Save it on your desktop, this way it will be easier for you to find it once it has done downloading.

Click twice over the icon to begin the installation:

This is the main screen of the Setup, click in Next:

You will now click in “I accept the agreement”, and hit next:

In this screen you don’t have to change anything, just hit Next:

Also nothing to change here, click next:

You’ll want a Shortcut on your desktop, so it will make it easier to launch the NVU when you need to, so check the box and click in next:

Just click on Install:

The installation process will begin and will not take long once it is done you need to click on Finish:

Working With NVU:

When you launch the NVU you’ll see exactly as shown on the picture below, unless they have changed its layout but in 2009 this is the layout you’re going to see:

We are going to focus in a few things here since we want to make a Landing Page, but it is mainly Tables, unless you want to add an opt-in and/or images, then you’ll have a bit more work, but don’t worry, I’m going to show exactly how you can do it in the next sections of this guide, I just wanted to tell you what we are going to learn from now on!

Creating the structure of the landing page:

Let’s begin to work on the layout of our landing page, what I want you to do now is to click on the Table tab as shown on the screen below:

After you click there, you’re going to make a table with 1x1:

Click in okay when you’re done, remember that if you point your mouse on the other cells it is going to increase the size of your table, so keep it only in the first cell.

When you click twice on the table the following window will pop-up:

Now this may look rather confusing so let me explain it all to you...

1 – For now we will add 1 row, since we will add more rows as we need them.2 – Columns we can add later as we please.3 – Height: That’s the height of the table, let it without any value because the height will increase as we add content to it, be it text, images or other cells.4 – Width: Here you want to put 780 pixels since that’s the most used resolution in monitors, so they don’t have to scroll the page horizontally because that’s really a pain.5 – Unless you want to make the borders visible you’ll change this to 0, so the borders of the table will be invisible once it is online, but don’t worry because you’ll be able to see that as you edit the landing page.6 – Spacing and padding I really recommend writing “1”, so the words don’t get too separated from each other.8 – Table alignment, always choose center, as it will look better on the browser and if someone has a screen resolution higher then 780px they will not have a hard time looking for your landing page.Once you are ready click in OK.

Adding Cells to the Table:Now we are ready to move on and begin to add cells to the table, this way you’ll have a more organized landing page, if you don’t create cells, it becomes harder to set things up.To add a new cell to the table you have to click with the right button of your mouse over the table and select:“Table Insert”>”Row Above” or “Row Under”, you can use either as it really won’t make many difference:

Once you do it, you’ll have something similar to this:

We are going to use the Top Cell as a Catchy Header Text/Image! In this example I’m going to use a simple image I have made. It’s important to say that if you’re going to add image to your landing page, it’s necessary that you create a new folder on your desktop with the name of your landing page website and also that you put everything you’re going to need inside this folder, so you don’t have to look for the files in your hard-drive and also you’ll not have troubles to upload it to the web. You can see what I did to organize the files to this report:

That’s inside the NVU Report folder, you can see that I have put the

images I’m going to need inside the “image” folder, this way I can just upload it and I will have no problem!

To add images to the table is really easy, just click on Image and the image files will be inside the Folder you created on your desktop!

In this case I created a folder to save the images I’m going to need on the landing page for this report, so the path would be “Desktop>NVU

Report>Images”, but you’ll find the images where you have saved previously, inside the folder on your desktop!

This step is crucial for SEO, where it is written “Alternate Text”, you’re going to write a short description of what this picture is, as this is just a header, I’m going to name it “1”, because it will not affect the way Google robots read, so if you posted a picture of your product, it is really wise to write the name of your product in this field. E.g.: Landing Page Expert eCover.

Click in OK, when you’re set!

Ta-da! There the image is… Now under this page we are going to write our sales copy/landing page text, in this case since I don’t have a Sales Page here I’m going to use Lorem Ipsun which is commonly used to test layouts and see if everything is alright.

What you are going to do, I know you can’t read what is written above and I’m sorry for that, you’re going to copy your sales letter text, if it is in Notepad or Microsoft Word or OpenOffice Writer, then all you have to do is press Ctrl+A if you are using Notepad/OpenOffice Writer to select the whole text and then Ctrl+C to copy the content. Now if you are using Microsoft word the shortcut to select the whole text is Ctrl+T, then Ctrl+C to copy the text:

Now you are going to head on NVU and right in that bottom cell you’re going to right click and select “Paste without Formatting”:

Since I’m using Lorem Ipsum and we haven’t personalized it yet, it is looking really ugly! But don’t worry that’s when things begin to get interesting!

Formatting the text:Now we are going to edit the H1 text, if you have no idea what it is, it is the catchy phrase you are going to use on your sales page, something that will engage the visitors to read your sales page and therefore make the decision of buying what you are selling or not.

You are going to select the first part of your text, the title (or H1) which is probably separated from the body text already; here is an example of header title or H1:

As you can see above the catchy phrase is red and big, that’s to get the attention of the reader, that’s one of the main parts of your sales letter, I highly recommend you using Verdana as the Default Font, and Red also increasing the font size to 26px, like the screen above shows.If the text is too close to your header image you may want to click before the title and press “Enter” once so the text stands out from the image:

Do you see the difference now?

So let’s take a look at the formatting bar and see how we can personalize our title, links and sub-titles or whatever text you want to stand out!Where the arrow is pointing it’s where you’ll be able to choose the color of your text, click once there and a window will pop-up with the colors used on the web, so it is most likely they are going to be shown in every internet browser people use, for heading as the sample above showed it would be better to choose RED.

Just remember to highlight the text you want to change the color of first, you can do it by holding the left clicking on the text you want to highlight, once it is highlighted you’re able to change its color:

Once you’ve selected just click on the black box:

Now choose the color you want and click in OK:

Now we are going to take advantage of the text is already selected and also increase the size of the text, so it will stand out! Click on the “Big A” shown below until you find a size which is appealing to you!

I’ve clicked 3 times to get the result below:

To make the text Bold, Italic or Underline, click on either the B, I or U, if you want you can click on all 3, but its totally up to you:

For this landing page I clicked on Bold and this is the result:

As you can see it looks much better and comes across as a lot more catchy!

Now the screen below shows where you can add numbered or bulleted lists like this:

1. That’s The Numbered List2. Great for showing benefits of using your products!3. Highly effective to increase conversion rates!

Now bullet lists:• Simple• Catchy• Awesome

As you can see, it’s great to use these to show the benefits of your product, bullet lists works better thus, since it doesn’t have a number, I find the numbered list more effective when you’re telling the reader what you want the person to do next, like a call for action.

To change the alignment of the text, that’s where you click, in this case it is centered:

Remember that to change the alignment of the text it has to be highlighted you cannot change the alignment before you highlight the text you want to change.

To indent or outdent the text, you select (highlight) the text you want to outdent/indent and click on the shown button:

Variable Width it’s where you’re going to select the font you want to use:

For a landing page or a sales letter, I highly recommend using Verdana, Georgia, Arial or Times New Roman, because if you choose a font that is only installed on your computer, then it will not be shown to the visitors of your website:

Here is the result of my personalization: Header:

• Font: Verdana• Size: Clicked 3 times on the A• Color: Red• Alignment: Centre

Body Text:• Font: Verdana• Size: Clicked 1 in “A” (The little A)• Alignment: Justified• Color: Black

At this point I would like to point out that there is far too many Websites and Blogs that are live on the internet that haven’t even been justified and it

looks absolutely dreadful so think about it before you just leave it on the left alignment.

Adding images to the body:Do you still remember how to add images on NVU?

Click on Image, look for the image in your desktop folder (which I told you to make in order to make things easier for you).

Advanced Image Properties:

Location, that’s the basic stuff, you only have to find the picture on your hard-drive, type an alternate text in case the image doesn’t show and click ok. But as you can see there are more options, so let’s see what it can do for us now.

Dimensions: If the image you’re going to use is big, you can check the “Custom Size” box and resize it in a way that it will fit better on your page, keep the “Constrain” box checked thus, because if you didn’t check it the image will appear asymmetrical, and that is really awful.

Appearance:

That’s where you are going to make some changes if you want:

Spacing:Left-Right: The distance between the image and the body text or table.Top-Bottom: The distance between the image and what it is above the image and under the image.Solid Border: If you want your image to have a border, just fill in a value and try out, but is not necessary.

Align text to Image:At the top: The image is going to be at the top of the text.In the center: The image is going to be placed in the center of the text.

Wrap to the left: The image is going to have the text wrapped around it and it will be of course on the left.Wrap to the right: The image is going to have the text wrapped around it and it will be of course on the right.

Link:If you want the image to link to anywhere, that’s where you’re going to type the address of the website you want your visitors to go once they click on the image:

TIP: To edit the image you just have to click on it twice and the Image Properties will pop-up!

How to add links to your pages:Every website you build, the main page of your website must be named “index.html” if you don’t do it then your website will not be shown. So let’s say you build a basic website with three links, Home | Contact | Affiliate, the home would be named index.html, the contact of course it would be contact.html and the same for affiliate.html.Your home page will always be index.html, you can’t name it as yourwebsitename.html. That wouldn’t show up once the visitor goes to your URL, yourwebsite.com.I should have told it from the beginning but it’s better now than never, and besides if you have already been on the internet marketing for a while you may already know it.

It’s a piece of cake to add links to images or text, all you have to do is select the text or image and click on “Link” as shown above, then this screen will pop-up:

1- If you are going to use an affiliate link, that’s where you’re going to Paste it, e.g.: http://www.thalesdotcom.com/ affiliate link. It is important that you write http:// before the WWW because this way there is no mistakes that the link will be saved like a website, not like a webpage of your website.

2- Choose File… This one is in case you’re going to link to another page of your website, for instance, you created a menu link which is named “Affiliates” and you want to link this menu to “affiliates.html”, then you would click in choose file and find the affiliates.html on your website folder.

How to add HTML codes to your landing page/sales page:

This part can be quite terrifying if you are not tech savvy but I’m going to make it easier as much as I can, ok?

At the main page of NVU of your landing page/sales letter, you’re going to see four tabs under the website itself:

Normal, HTML Tags, Source and Preview.

Normal is the tab you are using, which you can edit pretty much everything on your website in a friendly and automated way, Source is where you’re going to write codes or copy and paste the codes from Aweber or Paypal or whatever you’re going to use a code.

In this case as I don’t have AWeber account I’m going to use the code from Google analytics as an example, click in Source to see the monster!

The only thing you’ll be able to do in the Source mode is to copy and paste HTML codes, you won’t be able to do anything else, unless you know how to code, then you’re going to edit it yourself, but as you’re reading this report I bet you have no idea about coding.

When you do use HTML is usually for the very simple tasks where you are using other programs and you are simply copying and pasting the code into the HTML section.

Examples of this could include:

Aweber code for your own opt-in formPayPal payment buttonStat Counter CodeAdsense for a content siteAnd so on…..

You now have what it takes to create your very own webpage and I look forward to seeing your work on the internet.

To your online success

Samantha & ThalesXwww.dsm-publishing.co.ukwww.thalesdotcom.com