Jump to content
xisto Community
Sign in to follow this  
Followers 0
karlosantana

How I Design Websites Using Free Software This weeks challenge as set by david-essex

By karlosantana, in Websites and Web Designing

Recommended Posts

karlosantana    0

karlosantana
Posted

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

404.png

 

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

404.png

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

404.png

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)

404.png

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.

404.png

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

404.png

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 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

404.png

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!)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept