JWG Website Tutorials:
Newbie Guide
How to get YOUR website up and running...
I have split this guide into 5 main subject areas, with a link at the end of each, to the relevant section of the jwg links & resources directory, where you can obtain further useful information.
Contents
Getting Going
So how do you actually get started? Well, despite what you may be thinking, it is not as difficult as it seems. The key to success is to get yourself organised before you begin. Sit down with a notebook and a pen, and jot down a few ideas on what you want your website to do. It could be your personal homepage, or perhaps you need a web presence for your new business. Do you have any software available to you to help you build your site? - eg web editors or graphics programs -If the answer is No (and you cant afford to purchase any), dont despair. Perfectly good web pages can be designed in Notepad (which is found on all Windows computers), or a free HTML editor, and uploaded to your website using one of many free ftp clients available, or even uploaded via your browser to your site's File Manager. There are many free online graphics generators to assist you when you want to make logos and banners for your site,or resize photos, public domain images and so on. and finally, you can have your site hosted free, if you choose, as well!
Create your Site
create: This section deals
with how to actually write your pages, using a special language
called HTML, (Hyper Text Markup Language to give it it's full
title), and style them using css (Cascading Style Sheets). The
first thing you need to do is to familiarise yourself with HTML. If
you type HTML into any search engine, chances are it will come up
with hundreds of different sites to look at. But where do you
start? Which ones are the best? Well, that is very much a matter of
personal opinion, but I am going to suggest a few that I have
personally visited, and indeed some I have actually used myself to
learn how to code pages, (check out html resources below).
You will also need to learn about css (cascading style sheets), as
this is now the preferred method of designing a website. Basically,
you "mark-up" (write) your content using HTML, and "style" your
pages using stylesheets. This has the advantage that you can write
a separate style sheet containing all the fonts, colours, layout
design etc, that you want to use throughout your website, and then
just link to it on each of your webpages. If you want to make a
change to a font or colour for example, you only need to change it
once in your stylesheet, and the change will be applied on every
page. This entails considerably less work than altering every
single page on your site, (and you may well end up with a lot of
pages!) by hand. A good place to start your journey into the world
of stylesheets is at
w3schools and there are many more links in css
resources, below.
Site Structure
structure: Before you rush off enthusiastically creating pages, and scattering them all over your computer(!), we need to pause, and think for a moment about the structure of your site. By this I mean how you are going to organize your files, so that they all turn up on your pages when you upload your site to the Internet. This is comparable to having a filing system in an office, really. You have to put your files into folders (drawers) in your filing cabinet (site directory). These folders must be sensibly named and linked to, so that you and the browser, can find them easily. It is not as difficult as it sounds, particularly if you are starting from scratch with an empty filing cabinet, as opposed to reorganizing an untidy one! I have written a separate tutorial purely on this procedure, because I know from experience how much stress it causes when you get it wrong, and have to redo it. (No, none of us are born web-savvy..lol) So, to ensure that you dont get it wrong, pop over and have a look at site structure now, and bookmark it to refer to frequently, as you are making your pages.
HTML Editors
editors: Here we look at some programs you can use to help you build your pages. Dreamweaver is probably the most well-known, and is certainly one of the most popular editing programs around. It can do virtually anything and everything, you are ever likely to want to do, and is a joy to use. Sadly, it is far from free, and the commercial version is indeed very expensive to buy. However, you can purchase a Student Edition of Studio 8 from Amazon.co.uk and this cuts down the cost considerably from around 779 GBP to 73 GBP (Proof of your student status will be required by Macromedia to allow you to install your product). Dreamweaver 8 on it's own costs around 370 GBP from Amazon, so the Student Edition of Studio 8 which includes Flash, and Fireworks, is clearly good value for money, if you are considering making such an investment. Used versions are also often available. It is also worth checking with your college or university, if they are running a scheme offering a student version at reduced cost too. This information refers to the UK, but it is highly likely that similar schemes are available in the US, and other parts of the world. (You can write and let me know if you like!)
But what if even the student edition is outside your budget? (or you are not a student, but dont have a lot of spare cash either). Well, you can download a number of free editors instead. Obviously, they wont have all the features of Dreamweaver, but they may well do everything you want to do at the moment, and wont cost you a penny.
**Update** I am now using a free html editor called html-kit, and I consider it to be just as good as Dreamweaver for all the editing that I want to do. I strongly recommend that you try this out before spending any money on other programs.
I have listed a few html/text editors in the jwg directory, and you can find some more here
Using Graphics
graphics: You may well want to design your pages using graphics (backgrounds, logos, etc) and you can either make these yourself using image editing software, or use premade graphics. I like to make all my own webpage graphics, (backgrounds, logos, buttons, and so on), using an image editing program called Paint Shop Pro. I have personally used Versions 7 8 and 9. Older versions can usually be purchased online quite reasonably from Amazon, and other stores. Just Google for more.
You can also obtain pre-made images that you can add to your site, from many sources around the Net, and these are known as "public domain" graphics. You do have to be very careful that these images really are free to use, and that you are not infringing authors' copyrights. dmat copyrights page has a very useful list of authors and images that you are not allowed to use, and the information is updated frequently.
Sign up for hosting
signup: When you have created your site, you need to sign up for a hosting provider, to get your site published on the web. Right: so what is meant by webhosting? What is a "webhost"? Well, the first thing to realise is that the website that people visit when they type your url (website address, ie: www.jewelswebgraphics.com) into their browser, is nothing more than a collection of files and folders held on a computer by your webhost,which is exactly the same as the files and folders you have on your computer. A webhost is usually a company that agrees to "host" (serve) your website files and folderson their computers, up to the Internet . The only difference is that their computer (called a server) is much bigger than yours, and is permanently connected to the Internet, so that everyone can download these files, and view your website in all it's glory, 24/7, 365 days a year (hopefully!). You have to organize these files and folders on your own computer, and then transfer (copy) these files to your webhost, preferably using ftp (file transfer protocol), before they can be viewed by everyone on the Internet.
Finding a Webhost:
There are 3 main types of webhosts:
1. Your ISP: (Internet Service Provider)
This is the company that you pay for your Internet connection. A few of the big well-known ISPs are AOL, BT, Freeserve, MSN, but there are hundreds out there, and the name of yours will be on their bill. Most, if not all ISPs, offer a small amount of free webspace to their customers, as a little extra perk for choosing them. The advantage of using this space for your website, is that the space will be free of advertising, (as you are already paying them for your Internet connection), and probably reasonably fast to load. The disadvantage is that the space offered may not be very large (although you can usually pay them for more), and your website address will probably be long and somewhat uninspiring.This can be rectified very cheaply though, by purchasing a domain name, and pointing it at your webspace. Have a look at my hosting tutorial for details on how to do this.
This is generally the first option you should consider, if possible. However, if you are a student in college, or dont have your own ISP, this option will not be open to you, so you may wish to consider ....
2. A Free Host:
These companies will host your website for you without charge, but they will be advertising supported, and your website will have to carry their advertising banners, and possibly pop-ups as well, to cover their costs. Free hosts dont generally offer the same facilities as paid hosts, but you can probably still find ones with enough features and space for your needs, if you shop around. and finally we come to.....
3. Paid Hosting:
As with almost everything in life, you get what you pay for, and webhosting is no exception! If you are prepared to shell out some money for your webhosting, you are able to call the shots,and get all the features you require, (and usually a great deal more), for a very reasonable sum. You need to do some research, and again, shop around for the best deals.
Upload your files
upload: The final stage in the process is to upload your files to your web host, et voila! your website is visible to the world. I am going to recommend that you use an ftp client if at all possible,as they do offer considerably more flexibility (more about these programs later). However, if you are using your college's computers for example , and an ftp client isnt available to you, you will have to use a browser upload instead. So what do we mean by the terms "ftp" and "browser upload"? Well, both are simply methods of copying the files (pages, images and so on) that make up your website, from your own "local" site on your computer, to your webhost's "remote" site on their computer, so that your website becomes visible on the Internet. If you need to use a browser upload, you will probably use your webhost's file upload manager, and full instructions on how to upload your files will be given to you there.
FTP clients:
An FTP client is a piece of software that you install on your computer, load your website into, and then use to upload your files to your webhost. You can upload the entire site in one go, individual files, or any combination of files. This is why I say that it gives you more flexibility than a browser upload, because many hosts' File Upload Managers have restrictions on the amount and size of files that you can upload at a time. FTP clients are not generally subject to any such restrictions. Again, there are quite a few good FTP clients available for you to choose from, and thankfully, many of these are also free.
Free FTP Clients:
Here is a list of free ftp clients generated by downloads.com, (a very useful site if you are looking for software downloads, both free and paid for). The list is sorted by popularity of downloads, but you will probably have to click on a few, and go and look at the developers websites, before deciding which to try. AceFTP is my favourite FTP client, and one I have been using on a regular basis for about 3 years now. I have written a tutorial on how to set up and use it, because I find it quick, simple, and easy to use. It is available in both freeware and professional versions. The freeware client has been quite sufficient for my needs so far, but the Pro version is also available here.
©jewelswebgraphics.com 2001-2006