How Can I Create Websites With Free Software? A challenge given to me by David of Essex (not David Essex)

karlosantana · December 31, 2007

OK I've done it! made a selection of tutorials and programs I'm Going to be making a CD with all this on if anyone is interested...

So The Challenge!

To Find Open Source/Free software and build a website with it

Flash NO

Javascript YES

HTML YES

PHP YES

The Software

KompoZer in the end its the best! it has ftp WYSIWYG and Raw code editing so its satisfying everyone

FTPcommander is brilliant!

GIMP An excellent image editing program and as always FREE!

Ok so first of all...

What's the website going to be about?

Well How about... errr Making a website with free software? (see what I did there?)

Second..

We want the website to look nice.. dont we So lets have it looking smooth and gentle with the occasional �loud� colours

Third...

It has to be simple, easy on the eye, but also easy on the brain! (not to many codes)

Thought id never get to it? Well I am!

Lets Get to it!

Once you've installed KompoZer When Its started up you should get a screen like this...

As you can see VERY basic infact it was so basic I was crying for dreamweaver but I forced myself and I learned html I also used some generators (although I hate them) http://www.htmlbasix.com/

Now lets start with the index page once we've done the index page everything else just falls into place! because when we have an index page we have our header and footers already made for us!

Load Up GIMP

Go to Xtns--->Logos--->(your choice) (see Pic)

So there's the logo done (you could add whatever logo you want but we're just doing it simple for now). Now using ftp commander upload that to your root directory (public_html). Go back to KompoZer we now want to add that image to our site go to Insert�-->image and enter the image url and the alternate text you should be looking something like this

But doesnt the image look odd with black background on white? lets fix that go to Format--->Page Colour And Backgrounds. If you have an image (which I dont) add its url in (remember that it has to be uploaded!) However im using a colour...black! or #0000000 so click advanced edit (see pic)

There that looks better doesnt it! now lets add some navigation. On the bottom tabs of KompoZer there's one that says �Source�, click it then in betweeen the <head> and the </head> tags add

<STYLE TYPE="TEXT/CSS"><!--A:link	{	color:whit;	font-size:20px;	font-style:normal;	font-weight:normal;	text-decoration:none;	cursor:default;	font-variant:normal;	text-transform:normal;	}A:active	{	color:white;	font-size:20px;	font-style:normal;	font-weight:normal;	text-decoration:none;	cursor:default;	font-variant:normal;	text-transform:normal;	}A:visited	{	color:white;	font-size:20px;	font-style:normal;	font-weight:normal;	text-decoration:none;	font-variant:normal;	text-transform:normal;	}A:hover	{	color:white;	font-size:20px;	font-style:normal;	font-weight:normal;	text-decoration:underline overline;	cursor:hand;	font-variant:normal;	text-transform:normal;	}--></STYLE>

Alternatively you can use a generator HERE it does all the hard work for you

and is also the first generator that ive actually never had a problem with! this will make all your links do what you want them to do is uggest using the generato rather than trying to edit the above code!.

Thats the bare bones done but what are we navigating to? well lets have an about and contact page so three buttons Home-index.html About-about.html and Contact-contact.html.

To start just type in the �buttons� or what you want to call them, leaving space between them (by pressing Tab on your keyboard) now highlight one, then press Ctrl+L (link short cut) then paste the url in the �Link Location� box.

Now this is where the pc nearly went at the wall! the colours change to what they're not supposed to be so to fix this go to Page Colours And Background again and where it says Link Text Change it to what it should be in my case white! now repeat this for all buttons remember what I said earlier about the about page and the contact page? well we will be creating that next, so just make the links http://forums.xisto.com/no_longer_exists/ etc. (I've left one of the link properties to demonstrate this.) Then you should have something similar to this

Now thats done lets save it onto our computer first go to File---->Save As it'll then ask you for a title this is what people will see on the top of their screens (look on top now) put something like Welcome to my site. Next it'll ask you for a file name save it as index.html, yes that is important, because if you dont save it as index.html people who come to visit will get a file list. If you already have an index page then overwrite it.

Now that you've done that copy it as many times as you need (in this case 2) and rename them to what they should be in this case its contact.html and about.html

Lets make the contact page... a feedback form

Now Im going to just give you the code because it'll take to long to explain what it does, how it does it etc. etc. so here we go. Load up contact.html in KompoZer, go into the source of your page (the tab at the bottom of KompoZer) and insert this inbetween the <head> and the </head> tags

<script name="JavaScript"><!-- function SendEmail(){		var toaddy = 'name@domain.com';		var subject = 'JS Form Submission';		var mailer = 'mailto:' + toaddy + '?subject=' + subject + '&body=' + 'Name%20is\n\t' + document.jsform.visitorname.value + '\n\n' + 'Email%20is\n\t' + document.jsform.email.value + '\n\n' + 'Message:\n\n' + document.jsform.message.value +'\n\n';		parent.location = mailer;} // --></script>

Right in that code there is a bit that says

var toaddy = 'name@domain.com'

; change the email address to yours. The second bit is the form itself so put this where you want it. (inbetween the <body> and </body> tags)

<form name="jsform"><table><tr><td align="right">Name:</td><td><input name="visitorname" size="27"></td></tr><tr><td align="right">Email:</td><td><input name="email" size="27"></td></tr><tr><td colspan="2">Your message:<br><textarea name="message" cols="31" rows="6" wrap="soft"></textarea><center><p><input type="submit" onClick="SendEmail()" value="Send Message"></center></td></tr></table></form>

Now it should look something like this

To see What ive done click here

The About page and index page are now very easy you just type in what you want the page to contain! (wile in the normal tab) same with all pages actually the text you put in is entirely up to you! this is the easy part of this topic the even easier parts, forums, products and suchlike will be covered in the next post! (its been a long day and I need sleep!)

wont take long with the next post!

Step 2 - forums and galleries

Now on to the easier part. These Parts usually have auto installs or you could use Fantastico which is equally brilliant but is a problem when it comes to SQL databases, all will be explained

So here we go

The forum I'm going to use is called Small Machines Forum It can be installed via fantastico but I recommend you use the web install its very simple and you don't have to be a genius to understand any of it!

Download smf by clicking here

Now unzip it, using any unziper. and rename the directory from smf_1-1-4_install to forum, the reason is is that when it's uploaded rather than having http://www.yourdomain.com/smf_1-1-4_install you'll have http://www.yourdomain.com/forum. It just looks better doesnt it!

Now using ftp commander upload it where you want it (in this case its puplic_html).

Before we install it we need a MySQL database go into your SQL database manager make a new database called forumgallery, reason being, because it makes more sense and if you bridge them it'll even look better!

Now we can install it go to http://www.yourdomain.com/forum/install.php. If a Dialogue comes up asking for permissions this is what you do simply connect to your server with your FTP client (FTP commander) and change the permissions on the following files and directories to 777. On most client software, this is achieved by right clicking on the files you wish to change, and going to Properties, CHMOD, or Permissions, and then typing in the number.

The following files should be CHMOD'ed to 777:

attachments

avatars

Packages

Packages/installed.list

Smileys

Themes

Themes/default/languages/Install.english.php

agreement.txt

Settings.php

Settings_bak.php

install.php

If there aren't any problems (like me!) then just continue with this tutorial.

Now what does everything mean?

Forum Name: This will be the name of your forum. It starts as "My Community" Change it to what you want its only a title at the top of the page!

Forum URL: This is the url your Forum will be located at, the SMF installer should have worked this out for itself so in most cases you can leave this setting at its default value.

MySQL server name: This is where we specify the location of the MySQL database.. 99% of the time this will be localhost.

MySQL username: This is the Username for the MySQL database we created earlier.

MySQL password: This is the password for the MySQL database we created earlier if you havn't created a udername or password for the database go back and create one otherwise it simply wont work!

MySQL Database name: This is the name of the MySQL database that we created earlier.

MySQL Database prefix: This is a prefix to the table names in the database. Set this as forum_

Once you have filled in all of the settings, click on proceed, and you will now be asked for details of your admin account; this will create your username on the forum. As a security measure, you are also asked for the MySQL database password again. Once you have filled in the form, click on proceed.

Your Forum is now installed and you can browse to it. However, before doing so, it is VERY IMPORTANT that you delete the install.php file from the server as leaving it there is a major security risk. The installer will offer you a check box to do this, if it fails, you will see a warning on your forum, if this appears you must remove the file manually. To do so, use your FTP program to return to the directory where we installed SMF(forum), locate install.php, select it, and hit delete.

That's our forum done so how do we get it to blend in with our site? There's a lot of themes available on the smf home page (customise then themes). But let me guess you want your html navigation bar in it ya? well download a mod called Global Headers And Footers (available on the smf mod page!. It does all the hard work for you! you just simply got to admin and then on the left there should now be a button (assuming you've installed Global Heads. and Foots.) called Global Headers And Footers. Click it and enter your navigation structure into it!

Gallery

We're going to use Coppermine Photo Gallery

Again it can be installed through Fantastico, but we're not going to! web install again I'm afraid!

Download Coppermine HERE

Unpack it and rename it to scrap

Inside the unpacked folder(now called scrap) is another folder cut and paste it somewhere and rename that one to gallery. Now do the same thing as we did with the forum upload using your ftp program (FTP commander) to your web page where it's needed (puplic_html) Now that's done

go to http://www.yourdomain.com/gallery/install.php

It may ask for some directories permissions to change change them accordingly

Now this setup is pretty much self explanatory it even has little �i� icons if you get stuck!

remember the MySQL database we made for our forum? well the gallery goes in the same database. Set the MySQL table prefix to gallery_

There's the forum and the gallery done!

The products tutorial will come later as ive been slogging over this keyboard for 3 days now and I need exercise! So thats it for now ill probably put the Products section up in a month!

Edited December 17, 2016 by OpaQue (see edit history)

Tramposch · December 31, 2007

BRILIANT*claps*this is really a great tutorialgood job! although im not going to use it, it would be usefull to noobs (no offense to toher people)

jlhaslip · January 1, 2008

Excellent Tutorial... *claps loudly* Well Done.And just so you know, another option for this project (a challenge if you consider it so) is to use only a Flash Drive to do the same thing...GimpPortable, FirefoxPortable with the Fireftp Extension should do the trick... (HINT)

notrog · January 1, 2008

Here's my version:a) buy a domain name. I use godaddy. Thats the only thing you have to pay for. Alternatively use a free subdomain.b)get a free web hosting account. Godaddy offers a free one but it comes with an ad, thats why i'm here.c)make sure you've got a peice of paper to write all the passwords and stuff down or else you'll forget for sure.d)setup a mysql database in the free hosting account. That lets you have a dynamic website. Again - write down usernames and passwords!e)set the nameservers in your godaddy control panel to point to the nameservers of your hosting account.f)make a new text document, and name it index.html.g)get nvu its free and its like komposor - then install it - then drag and drop the new text file you made, 'index.html' onto the nvu program icon.h)I use the nvu for basic page editing like the other guy was using komposor, and i use notepad++ for actual coding by hand. You can do the same thing with notepad++ - drag the file you want to work on onto the application icon - it saves time.i)I use the gimp for making cool graphics.j)for fancy banners I use the gimp in conjunction with flamingtext.com - you can make cool headings there.k)practice your css on myspace - knowing css will save you time in the long run - its not too hard to learn.l)filezilla to ftp files to your website - upload index.html and you've got your first page!m)to make a dynamic website upload drupal or some other content management system, like joomla, mambo, or one of the countless others. Drupal works fine for me. Visit the main page of your site and enter the database un/pw info, and your full featured drupal site is ready to go!n) if you purchased a domain name, you spent under $10/yr for all of that. If you used a free subdomain, it should be %100 free, forever! Just keep making it better and better!

suberatu · January 1, 2008

Very nice, especially for beginners and/or people who don't have money to spend or don't want to resort to pirating software. You should get some sort of award for this. Here, have a virtual cookie.

karlosantana · January 1, 2008

Tramposch Thankyou so much! even if you don't use it. If you learnt something new then it has served its purpose!

jlhaslip sounds like a challenge to me! ill see if i can give it a go! (thanks for the head start!) oh and love the animation in you signature!

notrog Interesting yes but next time could you please place your tutorial in a separate topic please ta!

suberatu pirating software is a big issue these days because people don't know what to look for when it comes to editors so people think "hmm this looks good wounder if i can get a free serial key" and without noticing they're pirating! the virtual cookie was loverly thankyou! i ate it with some virtual milk!

Thanks again for everyones support! my website will be up properly soon! hoping to do it at the end of the month! it'll have its own domain name YAY! cause my domain name at the moment is spelt wrong and is a mouthfull! (kindly pointed out by my father!)

Anybody used this yet? helped any body?

budsu · January 16, 2008

since Xisto has cpanel it has auto installer for forums and blogs but i think you might have helped with web sites

hippiman · January 17, 2008

This is pretty sweet. I mostly just use notepad++ for my web design. That's probably part of why my website sucks. It probably wouldn't be much better with anything else, though, because I suck at design anyway.But that's a great tutorial!

Liam_CF · January 17, 2008

Very nice, I have used the contact form on my website. It will be usefull.

galexcd · January 18, 2008

Well when you were first talking about komposer I thought it would be great because it would let me edit my files via ftp without having to download them, edit them, and then re upload them but it wont connect to my website over ftp... Software that works is always better than software that doesn't work. Sigh....

karlosantana · January 29, 2008

I dont know why its doing that! works fine with me have you checked your ftp login details?

sunzoje · February 1, 2008

thanks, very nice tutorial. I was planning to start a peronal website but don't know how to do. This really helped me a lot.

callumms · February 4, 2008

That tutorial beats most that I've seen. Great Job!

Notice from jlhaslip:

No need to quote an entire tutorial you are replying to.Removed.

Evolke · February 8, 2008

OMG! Please Pin this! This is so great. Im a proud Noob and Im really bad at all this. This is so great you have just saved my website and my life LOL. I was really confused with att the website and stuff but this *SIGH* Just great job, you have put heaps of effort into it an it shows!

*** Worships ***

Forbez · February 8, 2008

Very nice. I use all the professional stuff, I'll be sending this tutorial to friends of mine who can't afford the professional stuff. Thanks again.

Sign In

How Can I Create Websites With Free Software? A challenge given to me by David of Essex (not David Essex)

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information