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) 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
CODE
<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>
<!--
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://www.whateveryourthingis.com/about.html 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
CODE
<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>
<!--
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
QUOTE
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)CODE
<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>
<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 www.yourdomain.com/smf_1-1-4_install you'll have 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!
