You need a website, but graphic design is not your strong
point. You may have looked for software, such as
Dreamweaver or Frontpage to help you design a website, or
considered hiring a professional designer to do it for you.
But both of these options can be expensive.
I know, because I went through the same issue when I set
up my website for my first business. All I needed was a
simple page with my business name and phone number. So
I bought my domain name and signed up with my hosting
provider. I added a green bar at the top, and my business
name below that. The rest was white. It looked absolutely
horrible. No wonder I never got any sales!
It wasn’t until later that I discovered this little method of
whipping together a website that looks great, and isn’t that
difficult to do.
In this book I’m going to hold your hand through a very
simple web design process that’ll have you ending up with a
well-designed, and professional looking website.
So, first things first...
A Simple, Free, and Visual HTML Editor
To edit the actual web pages, we could mess around with
HTML coding. But I don't want to do this and neither do you.
What we need is a good editor that shows us the actual web
page as it looks. This is called What You See Is What You
Get, or WYSIWIG. Just call it wizzy-wig. The most common
ones are Microsoft FrontPage and Dreamweaver, but we're
keeping this free, so go download a program called NVU,
right here. It's pronounced N-view, and it'll do nicely for our
purposes. If you're using Windows, just download
the Windows full installer:
Download to a place where you can find it. Preferably your
desktop. Then install it. Now that we have our visual editor
the cool part comes next: selecting our actual web page
template.
The Cool Part: Selecting a Free Template
Now, there are a lot of software programs out there, and
plenty of designers willing to create a website for top dollar.
I always see people asking how they can create a nice
looking website, what programs they need to buy, and so on.
But there’s a free resource full of terrific looking designs
ready for your use.
It's called Open Web Design. REAL web designers upload
free templates, hundreds of them, for your completely free
use. They’re all open-source, which means you can do
whatever you want with them. Short of selling them. A lot of
them simply use them for promotional purposes, asking you
to politely keep their link at the bottom. You can change the
graphics, the colors, the layout, whatever you want.
So first, click on Browse Designs on the left menu, and then
where it says "Date (Newest)" in the drop-down menu,
change it to "Rating (Highest)" to sort by highest rating first:
You can browse and browse to find the site you want. Pretty
cool, huh? All free, and many of which are pretty good.
Which is why I want you to sort with the highest rated ones
first. These will also have been used by others more, but the
chances of someone coming across yours and someone
else's exact same template are almost nil because you’ll
most likely be using them for different topics than others.
For example purposes, I'll choose Farmhouse. Go ahead
and click on it to see it up close. And when you're ready,
click Download at the top:
Save it in a place where you can find it. I can't tell you how
many people I meet save files to their computer and don't
where they put them. It'll be in a zip file, so you'll have to
unzip it to a new folder or, preferably, your desktop. Inside
the unzipped folder, you'll see a whole bunch of files, like
this:
That file named "Index" is our homepage. So go to Start >
Programs and open up the NVU program we installed. After
NVU is open, go to File > Open File... and browse to
wherever you unzipped that web template. Select the file in
there named "index."
Now you have that free template opened in your HTML
editor. First things first. I'm going to delete the title and put in
my own web page’s title:
Of course, hopefully you've chosen a template more fitting to
what you need than my farmhouse one. There's a way to
change the picture, but it's a bit more complicated so for right
now we'll stick to just choosing a minimalist design or one
with pictures that match what you want to do.
Now, you can change all the text in the body of the page. It
may be technical instructions from the designer or just filler
text like “Lorum ipsum dolar” and so on. Erase and fill in with
what you want. You should be able to just backspace or use
the delete key to erase everything, and if you mess up, just
hit Control-Z.
If you want to insert a picture, easy. Just save your picture,
wherever you get it from, to the folder within your web page
template folder called images if there is one. If there isn't
one, poke around in this folder until you figure out where the
designer saved all the pictures used to make the web page.
Sometimes the pictures are right there in the main folder
itself. Just keep them all together.
Then go back to NVU and place the cursor within the web
page where you want your image. Select Insert > Image...
...and then click Choose File. Then browse to the folder
where you saved the image:
... and double click it. In the text box that says Alternate
Text, type in any descriptive term for the picture, one that
would explain what it is to someone who couldn't have
pictures on their browser:
Hit OK.
Now we need to rename the menu items. If you can think
ahead and name all your menu items now, even for stuff you
won't have right away, it'll help you in the future. So I'm going
to go ahead and make my menu, by simply backspacing and
typing over what's already there.
Tip: don't backspace ALL the letters in the menu. Leave
one or two, and type your menu item, and then go back
and erase the unwanted letters. This will keep your
formatting.
I need to add a few more items on my menu. So highlight
any of the menu items:
Go to Edit > Copy on the top menu bar. Then put the cursor
at the end of the last menu item and press enter, to create a
new line. Then go to Edit > Paste to paste in the copied menu
item:
Now all I have to do is rename it to what I want! As I did with
the others.
If you want, just keep pressing enter to create a few lines,
and paste the same menu item over and over again until you
have as many as you need, and then rename them all to
what you want. I'm going to paste about three more in there:
And then rename them:
Again, try to anticpate what you will EVER need for a menu
item. It will make life so much easier, because this
homepage will become the template for each page of our
site, and if you have to add another menu item in the future,
you'll have to do it on each page individually. This is the part
where software would help us out, by doing the organizing
for us, but we're doing it manually, so we can't complain too
much.
TIP: Be sure you include a menu item at the top named
“Home” and link it to the index.html file. This will give
users a way to get back to your homepage if they want.
OK, so by now you should have a template you like, filled in
with your own text and menus. A few more details left. First
let's get those menu items to actually link to another page,
as right now they only link to the homepage.
Double click a menu item, and a window will pop up. Under
Link Location, enter a name for the web page that the
menu item will link to. The page doesn't exist yet, so it would
behoove you to write down what you name it.
Whatever it is,
make sure you add ".html" to the end of it. And keep it short.
For instance, with my Order Now! menu item, I'll double click
it and under Link Location type: ordernow.html
I'll then write down ordernow somewhere, perhaps in a
Notepad file, so I know what to name one of my pages.
Do this with each of your menu items, and your homepage is
practically done. There's just one other tiny little thing we
should do. I'll call it optional because it involves going into
the HTML code (I lied when I said we wouldn't have to do
that), but it's a good habit to get into, and it MAY help us a
tiny bit with our search engine placement. If you don't want
to bother, it's not a big deal and you can move on to making
the multi-page site.
However, if you're brave, then type down the following code:
<meta name="description" content=" " />
<
Then, in NVU, near the bottom, click Source. Now you'll see all the
code behind the curtain. Scroll to the top and look for the word
“head.” You'll actually see two names,
Then press enter to make a new blank line: Now Edit > Copy and Edit > Paste the code you typed down earlier into this area:
Now, between those quotes, where it says content=" ", we need to add a description of our website as well as a list of keywords that our website should be found under. For description, I'll type:
Generally, you'd want something a little bit longer than this, and more descriptive. This is what users would see in the search engines when they see your site listing, so be alluring and descriptive. Now for keywords:
Think of SPECIFIC keywords that users might be typing into the search engines to find your site. I'm not going to put the general word "sheep" because people searching with that single word might be looking for general information, or pictures, or something entirely different. My site is a sheep store, so therefore I'm going to be specific. Also, don't go too crazy here. Only add a few words. It used to be that you could get your site higher in the search engines if you repeat words many times in this area, but now you'll just be seen as spam, or the search engines will just ignore this section. It's debatable whether the search engines even use this portion of website to see what it's about, but it's still good practice to put it in there.
Guess what? You're done with your homepage! Not too bad, eh? Now we'll just add the other pages of the site. Easy.
How to Create a Multiple Page Website OK, so you created a homepage in the last step. Now you're ready to create your menu pages, or sub pages. All we have to do now is copy and paste the homepage multiple times.
Go into the folder where your web template is, and highlight the file named index. In the folder itself, go to Edit > Copy and then Edit > Paste. A file named Copy of index will show up. Now do it as many times as you have menu items:
Now, I sure hope you wrote down what you named the links on your menu on your homepage, because you have to rename each of these files the exact same. Just right click each file and select Rename and type in the new name. Note: if you don't see the file extension .html at the end of each file, then DON'T add it. It's already there; it's just invisible. If you DO see the .html extension, then make sure you leave it in there, intact.
OK, now back NVU. All we have to do now is open each of these files individually and type whatever it is you want for each of your subpages. Select File > Open File in NVU and choose one of your subpages. I'll choose my ordernow.html page. At first it'll look exactly the same as your homepage. Erase the text and change it to fit what it's supposed to be:
Add any images you want as before. Save it, and do the same to each of your subpages. After you're finished, you can see what it really looks like by going to the folder with your template in, and double clicking the file index. It should open up in your web browser automatically. Click on each of the links on your menu to be sure they take you to the correct page.
You now have a completed website! Of course, it's on your computer instead of the internet, so we'll have to rectify that.
Getting a Domain Name If you decide to host your site on a free server, such as geocities, your website name would be something like http://www.geocities.com/thesheepstore.html
If, however, you decide to have your own name, i.e. www.thebestsheepstore.com, you can get domain names very cheap. For instance, at GoDaddy.com you can get a domain name for $9.95 a YEAR. Almost negligible.
However, hold that thought. First let's figure out where to put the website we just built. A company who holds our website on its computers and makes it available to the world wide web is called a “web hosting” company, and some web hosting companies let you purchase the domain name with them along with a hosting plan, keeping everything simple.
Find a Home for Your Website Right now, your website is just sitting in a folder on your computer. We need to upload it to a computer owned by a company on the Internet. Esentially, all we need to do is pick a good monthly plan.
Now, you could get a free plan at a place like Geocities, however, they will not allow you to upload your own site unless you upgrade to the paid plan. You'd have to use their own website builder. Not to mention the free version is full of annoying ads plastered all over the web pages. So you've designed a nice site. Why ruin it in such a way? Web hosting is very competitive, so it is easy to find cheap hosting these days.
Let's check out one of my favorites, and then we'll walk through the process of uploading your site.
DreamHost is the name of one of my favorite hosting companies.
And they have plans as cheap as $7.95 a month, and a free domain name is given along with your signup for a hosting plan. This is why I told you to wait on the domain name. Web hosting companies are happy to get you as a customer because they have your monthly fee for as long as you have a website, so they are glad to give away a domain name with their hosting plans.
Also see the appendix at the end of this book for comparisons of other good hosting companies.
So, head over to DreamHost, and let’s get started.
Let's walk through the steps of getting a domain name and signing up with a plan at Dreamhost. First, click Domains near the top. Here you can check to see if the domain name you want is available. If not, you can always try a different extension, such as .net or .org. When you find one you want, click Register. You'll now be given the opportunity to choose a plan. You can choose L1, which means Level 1, for the cheapest option. And if you choose a two-year payment plan, it will only be $7.95 a month instead of $9.95 a month.
Your own domain name and hosting for 8 bucks a month!
Now, an important bit. You'll be asked to provide an FTP/shell username. A password will be sent to the email address you provide. These two pieces of information are important. So, let's say I register the username sheepman and get a password of a48fqx. Write these down and keep them handy!
Our last bit of technical stuff is coming up. The last hurdle. But it's ridiculously easy.
Open Internet Explorer. In the top, where you would type a web address, type:
ftp://xxxx@yourdomain.com
Where xxxx is the above username I told you to write down, and yourdomain is the domain name of your website. Of course, if it's .org or .net, be sure to put that instead of .com:
A window will pop up asking you for your password. This is the above password I also told you to write down. Enter it. You'll now see the contents of the folder on DreamHost's server. If it's been a while since you bought your domain and hosting plan, you should see a folder in there with the name of your domain. Double click it to open it. If not, simply right click anywhere in the folder and select New > Folder. A new folder will appear. Rename it your domain name, without the preceding www. Mine would be thesheepstore.com
Now all you have to do in is copy the contents of your website folder on your computer, and paste them into this folder on your web hosting company. Simply open your website template folder, select any file, and then hit Control- A. All the files will now be highlighted. Drag them over to the folder on DreamHost. Make sure you put the files in the folder named yourdomain.com or whatever your domain name is.
You're done! Type the name of your domain into Internet Explorer, and you should see your website!
Now, one last thing. You have a website, but how do you get people to visit it? Right now, if you went to Google and even typed in your domain name, it wouldn't be found. Google doesn't know you exist! So you're gonna have to do some basic search engine optimization, or SEO. This is a whole topic unto itself, but let's get you started at least.
Basic Search Engine Optimization
It used to be that you could get your website noticed if you repeated a keyword over and over and over on your web page. For instance, if you wanted to be found when people typed the phrase "sheep store," you could put "sheep store, sheep store, sheep store, sheep store, sheep store..." and so on on your web page, and then make it the same color as the background so people didn't notice the obnoxious repeating words. But the search engines did, and assumed that since your site had the word so many times on it, it must be an important sheep store.
Well, you can see the fallacy in that. So what did the search engines do?
They began, pioneered by Google, to rank web pages based on how many OTHER sites linked to a site. So if a site has a lot of other sites linking to it, it must be good, so it ranks higher in the search engines. If no other sites link to it, it must be new or really bad, and will rank lower in the search engines.
So the very, very basic goal is to get other websites to link to yours. How do you do this? Here's the basic rundown, in order of importance, to get your site off the ground:
1) Start by making a good, useful website. A website people can actually use.
2) Submit it to a few Internet directories. These are not like search engines; more akin to the phone book. They list sites the same way the Yellow Pages does, by category. Some are free, some are pay. Here's a list of some directories along with how much they cost:
strongest links
3) Write some articles relating to whatever your website is about. I might write tips about taking care of sheep, or what do when they get sick. It doesn't have to be long or spectacularly written; just USEFUL. At the bottom of these articles, write a very short bio about yourself and include a link to your website.
Perhaps mine would have this: Bob Shepherd has been tending sheep for almost forty years. He runs a Sheep Store that sells sheep and sheep supplies at http://www.thesheepstore.com
That's actually kind of crappy but you get the idea. Now, take these articles, and submit them to the following sites: Ezinearticles, GoArticles, and Searchwarp. These sites allow authors to submit articles for free, which people can then read or other webmasters can use for free on their own sites, as long as they keep your author bio intact. Do you see where this is going? If you write USEFUL articles, other people with websites may pick them up and use them on their own sites, and include your bio with the link to your website at the bottom! Aha! A link to YOUR website, and you will slowly begin to rise in the ranks!
4) Add to the website constantly. As often as possible. Add new information, new articles, whatever it is your website requires. Perhaps it could be as simple as a blog. Just post your daily thoughts about your industry. Simple.
5) Time. The final ingredient for search engine optimization is waiting. Google takes forever to do its thing. Keep doing the above four things, as often as possible, over the course of the next year. Within a year, you should be getting a good amount of traffic to your website!
And that's it! You've built a website from the ground up, signed up for a hosting plan, and began basic SEO. You should be well on your way to having an awesome web presence!
Our Thanks to Martin Kulp For Providing this Free Guide to Building Your Own Website!