Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

How I Design Websites Using Free Software


17 replies to this topic

#1 karlosantana

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 145 posts
  • Gender:Male
  • Location:Wales(But I'm not a welsh farmer!)

Posted 03 December 2007 - 10:17 PM

Ok so i'm starting a 3 Monthly challenge your welcome to give me ideas, however, this one in particular keep your eye on this as i will be putting Video tutorials, links and all sorts for the new web designer (with a very little budget)

Think you've got a challenge for me (be realistic)
leave a comment here on this board as I've mucked my board up :)

Look Forward to hearing from you

#2 strange-garden

    Premium Member

  • Kontributors
  • PipPipPipPipPipPipPipPip
  • 190 posts

Posted 04 December 2007 - 10:22 AM

Great idea!
I'm thinking of creating a new website, however all of my tools and stuff are on my old computer (which is pretty much broken at the moment), so I can't use frontpage or dreamweaver or anything like that. All I know is there's a few html generators out there, like the myspace ones and stuff (although I'd hardly think it'd help hehe)...Or you could just use source code from another website (which isn't copywrited obviously) and edit it.

I'll be sure to re-look at this thread if anyone has any other suggestions. Are you going to be posting the results on here?

#3 karlosantana

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 145 posts
  • Gender:Male
  • Location:Wales(But I'm not a welsh farmer!)

Posted 04 December 2007 - 06:16 PM

Ok Thanks for your support
Tools
1.HTML editor
I'm using a FREE WYSIWYG (What You See Is What You Get) editor that also doubles up as a code editor to! it's called KompoZer You can download it by clicking HERE It looks good!

2. FTP manager
There are loads of them! I've used a few but the best has got to be Filezilla There is another one that i use called web CEO but haven't looked for the download link because it requires registering and the whole idea of this post is FREE anonymous Web editing! Theres also another one called FTP Commander That's REALLY good!

3. Free Script Generators
Now i have used some generators and in the end I gave up, "Why?" I hear you say simple reason is is that they DON'T work simple reason is is that they're Javascript. So that means javascript generating... Javascript! or html it will include itself somewhere and youll be all chuffed that you've generated a kick-*bottom* script and it wont work (belive me i tried and raked through hundreds, and that isn't an exaggeration i really have been going through hundreds)
no dis-respect to strange-garden

4.Free scripts
There are so many website that offer free scripts, Javascript, html, php, xhtml ive ever seen some asp believe it or not!
Javascript
Now javascript is very simple but clever stuff. Javascript generators (as said in 3) DONT work properly so try to aviod them for fear of being humiliated you want to get the script and personalize it yourself(if you use a javascript password BEWARE they are very easy to crack)
HTML
HTML is clever to if you ever buy a website though dont be fooled by the common expression "i use pure HTML" or "i just use complex pure HTML all my websites use HTML" Get hold of them and shove them up a camels... nose because "pure HTML isnt "complex" its Quite simple, and at the same time it can be hacked password stolen etc

JavaScript Source- :( BRILLIANT i use it for most my javascripts it also has preview pages which help to!
Javascript Kit - :D iv have used this website many times the script do occasionaly not work
Dynamic Drive :( disappointing i used it for the first time and wanted to throw my laptop at the wall. I gave it many chances to prove itself but im sorry Dynamicy you just suck you dont work
Free-Javascripts.com :D very good all scripts work however there isn't a huge choice
Java-Scripts.net :D Impressive! but i did get a couple not work so just the :D for you im afraid
Javascript City.com :D Incredible the dude who made that knew what to do and how to do it the site even LOOKS nice!,

PHP

PHP is a reflective programming language originally designed for producing dynamic web pages. PHP is used mainly in server-side scripting, but can be used from a command line interface or in standalone graphical applications.
Forums
SMF :) REALLY good nothing but praises for SMF (Small Machines Forum)
PHPBB2 :D Ive Used it the admin board will inevitably stop working no matter how many times you clean your cookies as they suggest you do costumer service also sucks but was impressed at first!
These are the best two there are others there one in particular that I've used and it was fantastic built by a student and the money helped fund his studied it was called chameleon board or something as i say it was really good but i cant find it :D (if you built it and am reading this tell me what happened?)

Gallery

Coppermine Gallery :D Fantastic! I get the occasional problem but talk with people enough and someone will help you
Plogger :D BRILLIANT loved it a hickup with building a theme but that always happens to me!

Chat
WebChat :D multiple rooms, no browser refresh,emotions, private messages loved it!
Open Chat :D whisper mode is a great idea! a really good idea but i hate the browser keep refreshing
with chat your better going with a flash chat because they're just so good! there is a product called flashchat and i was gonna buy it for the pupose of this post but the idea is FREE!

e-commerce

osCommerce :D Loved it but did have a couple of problems personalizing it
Zencart :D really good! personalizable easy to use control panel better than many non open source (free) ecommerce things

the ratings are
:D =Excellent,Brilliant
:D Good, but had some problems, theres better

This is what i've looked at so far
If you have any suggestions please do suggest away! if you dont hav an account then GET ONE and suggest away (that isn't meant to be nasty)
karlosantana

#4 strange-garden

    Premium Member

  • Kontributors
  • PipPipPipPipPipPipPipPip
  • 190 posts

Posted 05 December 2007 - 01:20 AM

Oh wow! Thankyou thankyou thankyou!!!
and yeah, I didn't think generators were the way to go. hehe. Thanks for the post though!

#5 anwiii

    I wont bite...unless you WANT me too

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 2,704 posts
  • Gender:Male
  • Location:Chilhowee, MO
  • Interests:watching grass grow....
  • myCENT:62.06
  • Spam Patrol

Posted 05 December 2007 - 02:04 AM

well, you have my support. very well done and even including links to all your recomended sites and the faces to add to your review. keep up the good work becasue i will be looking forward to reading more on this thread. i might even experiment with the links you posted and input my opinion after i read some more updates :) don't let this thread die. you're doing a great job and very usefull and helpfull for all those seeking to build their own site that don't have the money to pay for software or scripts and resources

#6 shadowx

    Live your life so that in death you may stand side by side with your gods. Not at their feet.

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1,674 posts
  • Gender:Male
  • Location:Essex, UK
  • Interests:Photography is a big interest, i have some photos up at my site, apex photographs (http://apex-photographs.com). Using my Lumix g1 to take the photos of course! <br /><br />Um computer games... photo editing and thats about it!
  • myCENT:36.41
  • Spam Patrol

Posted 05 December 2007 - 02:42 PM

Well i'm primarily a PHP/mysql/html/css coder and i love the free software PHP Designer, Google it! Despite the name it edits any text file you can think of. This isnt a WYSIWYG Editor because i find them clunky and im a coder not a designer so i rarely have use for one, though i will download KompoZer as i do use them sometimes

For coders i would recommend PHP Designer as its FREE for non-commercial use and its syntax highlighted, so it will highlight your code to help you out and when coding if you start a pre-defined function such as mysql_query it will tell you what information needs to go into the brackets which can be a great reminder! If youre just coding someone else's design then i recommend NOT using a WYSIWYG editor as usually WYSIYWGs add code that you might not need or want, and one big annoyance with 3 that ive tried is every time i hit the enter key i get a BR tag and i dont want one there!

If youre not familiar with HTML or hand coding or youre a designer then a WYSIWYG will be very useful.


Another item I'd like to add are tutorials. the reason being is that you could have all the software in the world but without knowing what to do with it youre never going to get anywhere! One place that was great in my early days of PHP is Tizag.com google something like "Tizag HTML tut" and youll find all sorts of tutorials thre for HTML, JS, CSS, SQL, PHP and maybe graphics. In general a google search will return many results for good tutorials. Of course these are al free.

And another thing would be graphics editors. Essential for designers, you could just use MS pain or its linux/unix/mac counterparts but generally theyre very limited. Most people use the GIMP as its completely free and not bad in its functionality. Advanced designers might find it limited though so i suggest googling or asking around.

My setup of software is like this, all of it is free of course :
Editors
Code Editors: PHP Designer And Terillian Webpage and Nvu WYSIWYG Ediors
Image Editor: GIMP
Sound Editor: Audacity -- Not really needed but could be useful sometimes

Browsers/Debuggers etc..:

Mozilla Firefox
Internet Explorer V6 -- Not upgraded as IE 7 is a memory hog and useless, if im desperate to test in IE7 then i can get it but we all know Mozilla will take over soon :)

Other
PHP/MYSQL Servers/IDE's: XAMPP -- This is used to allow me to run and therefore test my PHP
FTP Client: Smart FTP

And thats about it. I think its a good idea to share our setups so those who need new software can see what is preferred by other people, and it also helps newbies to decide what setup they might need. A good thread here!

#7 gogoily

    Member [Level 3]

  • Kontributors
  • PipPipPipPipPipPip
  • 99 posts

Posted 06 December 2007 - 04:41 AM

I don't use free software very much
I use EditPlus2 to write scripts

#8 shadowx

    Live your life so that in death you may stand side by side with your gods. Not at their feet.

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1,674 posts
  • Gender:Male
  • Location:Essex, UK
  • Interests:Photography is a big interest, i have some photos up at my site, apex photographs (http://apex-photographs.com). Using my Lumix g1 to take the photos of course! <br /><br />Um computer games... photo editing and thats about it!
  • myCENT:36.41
  • Spam Patrol

Posted 06 December 2007 - 09:31 AM

Is there any reason why you don't use free software?

Do you think its unsafe or something? I find it strange how people don't use free software when its there

#9 karlosantana

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 145 posts
  • Gender:Male
  • Location:Wales(But I'm not a welsh farmer!)

Posted 06 December 2007 - 04:02 PM

Thankyou shadowx as you said (about adding things where you don't want them) REALLY if your gonna design PHP DONT use WYSIWYG editors as they do add things where you don't want them Dreamweaver is a classic example i was editing my sight well anyway i had to re-install the forum and the gallery etc however it had its benefit though i now have a kick *bottom* forum look at the gallery in particular i will be telling everyone how i did it when its themed as even its teeth are a different colour.

gogoily, people make free software for people to use SMF is a classic example! my cousin is a classic example he built the first ever dj'ing software (honest) and he made it free, so ordinary people can start a dj'ing business easily (and cheaply). as shadowx said why are you afraid? or one of these people who have designed software and charge for it? so wnything else is err hurting you pocket? Please explain as I'm interested because everybody wants FREE!

p.s. thankyou for everybodys support! it was really nice to look at this post and i was being supported! thankyou! oh also shadowx can i see something you've designed i will tell you why in a pm!

[hr=noshade] [/hr]
ok guys my board is up! look in the category and you'll see a section called 3 Monthly chalenges and look in there and youll see this topic! see you there! Board is Here

#10 shadowx

    Live your life so that in death you may stand side by side with your gods. Not at their feet.

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1,674 posts
  • Gender:Male
  • Location:Essex, UK
  • Interests:Photography is a big interest, i have some photos up at my site, apex photographs (http://apex-photographs.com). Using my Lumix g1 to take the photos of course! <br /><br />Um computer games... photo editing and thats about it!
  • myCENT:36.41
  • Spam Patrol

Posted 06 December 2007 - 06:53 PM

Quote

shadowx can i see something you've designed i will tell you why in a pm!

Ah unfortunately I'm not a designer so i haven't designed anything as such. I've followed tutorials but haven't done any design work myself for one good reason..I cant design! If you're interested in seeing some of my code then i have a few scripts i can send over but if its graphical designs you're looking for I'm, unfortunately, not the man, i don't have an artistic mind so my designs just don't work. My codes aren't bad though!

#11 musicmaza

    Super Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 238 posts
  • Gender:Male
  • Location:India
  • Interests:My interests include reading books and playing computer games.I like hanging out with my freinds.<br />Currently my interest is making a good popular website related to music

Posted 12 December 2007 - 09:03 AM

hey buddy thanks for the kompozer software .....i find very helpful when i would start making my site.

and thanks for the other info toooo

i appreciate ur effort

thanks...buddy:)

#12 SolidShadow

    Newbie [Level 1]

  • Kontributors
  • Pip
  • 23 posts
  • Gender:Male

Posted 14 December 2007 - 11:31 PM

I recommend JOOMLA it's free and installation is very easy. All you need to do is create a MySQL account with your hosting service which is simple enough and upload Joomla via FTP. They have hundreds of extensions and templates to customize your site and 95% of them are free :P . Everything you need to build and maintain a website is already built in.

Check them out here JOOMLA

Edited by SolidShadow, 14 December 2007 - 11:31 PM.


#13 hippiman

    Premium Member

  • Kontributors
  • PipPipPipPipPipPipPipPip
  • 153 posts
  • Gender:Male
  • Location:Nebraska

Posted 15 December 2007 - 12:33 AM

I just use notepad++, or just notepad, depending on where I am. I use those for all of my HTML, javaScript, PHP, and CSS. I've also made some applets, but I always use Eclipse for them, and I'm not really sure if you could fit applets into the 'web design' category.
I don't think I'm very creative when it comes to design, either, but if I mess with something long enough, I usually end up with something at least decent.
For web design, if you're really creative, it might be better trying to design it with an art program or drawing it out first, but for people like me, who pretty much suck at design, trial and error is usually better.

#14 anwiii

    I wont bite...unless you WANT me too

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 2,704 posts
  • Gender:Male
  • Location:Chilhowee, MO
  • Interests:watching grass grow....
  • myCENT:62.06
  • Spam Patrol

Posted 15 December 2007 - 01:05 AM

View Postkarlosantana, on Dec 6 2007, 10:06 AM, said:

ok guys my board is up! look in the category and you'll see a section called 3 Monthly chalenges and look in there and youll see this topic! see you there! Board is Here
Karlosantana!

you are hosting a fatal error on that page

#15 karlosantana

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 145 posts
  • Gender:Male
  • Location:Wales(But I'm not a welsh farmer!)

Posted 15 December 2007 - 10:00 PM

Quote

you are hosting a fatal error on that page
Ya i know i screwed it up for the purpose of this post sorry guys! ill be back once ive found out what i did :D well anyway before i added a chatroom i had put cooppermine photo gallery into it :P was well chuffed then i went and screwed it up sorry to everyone who followed that link :D very unhappy
karlosantana
very unhappy

#16 blackvenom

    Newbie

  • Kontributors
  • Pip
  • 2 posts

Posted 15 December 2007 - 11:05 PM

I would recomend C++ and the other programme......forgot tell u l8ta
free
easssy 2 use
looks cool :P

#17 karlosantana

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 145 posts
  • Gender:Male
  • Location:Wales(But I'm not a welsh farmer!)

Posted 31 December 2007 - 11:20 PM

So It's up in the tutorials section ive still got a second part to add it'll be finished on my web page! (challenges section look down there
\/\/\/ click here to see the first section
Hope this heps

Karlosantana

Happy new year!

#18 karlosantana

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 145 posts
  • Gender:Male
  • Location:Wales(But I'm not a welsh farmer!)

Posted 31 December 2007 - 11:32 PM

This is an edited version for the full verson go here this is a deflated version so as not to be a double post.

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...
Posted Image

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 have also put some generators (although I hate them) on my three monthly site take a look here

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
Posted Image
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
Posted Image
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)
Posted Image
There that looks better doesnt it! now lets add some navigation. On the bottom tabs of KompoZer there's one that says “Source”,
Use a generator to generate the hover profile etc etc HERE it does all the hard work for you :( add the Script where it tells you to (in between <head> and </head> tags
That's 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 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.
Posted Image
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.whatevery....com/about.html etc. (I've left one of the link properties to demonstrate this.) Then you should have something similar to this
Posted Image
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
&lt;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 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
Posted Image
The About page and index page are now very easy you just type in what you want (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!)




Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users