Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

Pieman's tutorial to coding a basic website

duck you, I'm a dragon
Loyal Member
Joined
Apr 29, 2005
Messages
6,405
Reaction score
130
I wrote this tutorial for a design forum, so most of you people here in coder's paradise will not agree with many things in this tutorial. But I thought it should post it anyway.

Program : adobe Imageready & Macromedia dreamweaver
Type : HTML
Difficulty : Normal

Pieman's tutorial to coding a basic website: Volume 1

In this tutorial I will teach how to code a basic website.

What you will need:
Adobe photoshop imageready.
Macromedia dreamweaver. (not Nessecary, it'll make this tutorial a whole lot easier though.)
A big willy.

Now, lets begin. Get your already designed template out and open it in adobe imageready. I will be using this one:
Pieman - Pieman's tutorial to coding a basic website - RaGEZONE Forums


When in imageready go to: Slices>divide slices A window like this will popup:
Pieman - Pieman's tutorial to coding a basic website - RaGEZONE Forums


I use slices of 200X200 pixels. But if your more comfertable with another size, feel free to do
so. Now we need arrange the slices so that they wrap around all the parts of the template you
want to use (e.g content box, buttons, etc.) You use the slice tool and the slice select tool for this. this is how I did it:

Pieman - Pieman's tutorial to coding a basic website - RaGEZONE Forums


Make sure that everything you are gonna use is 1 slice (so content box, buttons etc. Should all be 1 slice.)
When you're sure you did everything correctly, go to file>save optimized as. And give your project a suitng name.

Side note said:
Make a special map for your project, you will need this later on.

We're now going to define a root directory, it's kinda hard to explain what it is, so if you wan't more information about it, go
Open Dreamweaver and go to the left upper corner, there should be a few tabs, CSS, Application, Tag inspector, Files. Expand the files one. Now do as in the image below:
Pieman - Pieman's tutorial to coding a basic website - RaGEZONE Forums


A window should popup click "new" and then "website"
At the window that popups, Fill in the name of your site, and press "next".
Check the square with "No, I do not want to use server technology."click "next".
Check the square with "Edit local copies on my machine, then upload to server when ready."
Then fill in the path to the map were you stored your imageready slices.

Now the real fun can begin, the coding! Fresh up, eat something, have sex, whatever. Because you need to be sharp!

Go to your root directory (the one were you saved all your imageready files) and open

<projectname>.html
Don't be scared by how complicated it may look, you won't even touch most of it.
I will first start with making links of the buttons. Open your Imageready and look which slices are buttons. At my template that are the slices: 09, 14, 16, 17. (See the image above my post about the slices). Now we will need to locate those slices. look for a line code that looks like this: images/<projectname>_<number of the slice you want to make a link of>.gif at my template that would be "<img src="images/pie-designs_09.gif" width="73" height="77" alt="">" (the home button
we are now going to edit that line of code.
do the following:
Add infront of the code: <a href="home.hmtl" target="iframe"> so it should look something like this:
Code:
<a href="home.hmtl" target="iframe"><img src="images/pie-designs_09.gif" width="73" height="77" alt="">
add this behind the code: </a> so it should look like this:
Code:
<a href="home.hmtl" target="iframe"><img src="images/pie-designs_09.gif" width="73" height="77" alt=""></a>
add this behind "alt=""":border="" so it should look like this:
Code:
<a href="home.hmtl" target="iframe"><img src="images/pie-designs_09.gif" width="73" height="77" alt="" border=""></a>
We are now going to make an iframe. For information about iframes, go
Now look for the slice that is your contentbox (it should be 1 slice, if not go back to imageready and make 1 slice out of it.)
Now go to the line of code that belongs to that slice. And replace it with:
Code:
<IFRAME SRC="home.html" NAME="iframe" FRAMEBORDER="0" SCROLLING="auto" WIDTH="width of the slice" HEIGHT="height of the slice"></IFRAME>

Now go to the designtab, and look if everything is on his place. If so, congratulations, you made it through the hardest part of the tutorial.

I'm sure you noticed that I used home.html alot (in the "a href" code and the iframe code) home.html is the standard page, the page that gets loaded when the website is opend. "but wait wasn't <projectname>.html the page that gets loaded when the website gets opend?" Well you're right there, but this is about the iframe, an iframe is basically a webpage within a webpage, so when the webpage is opend, <projectname>.html gets loaded and the iframe loadsup home.html, capiche?
Anyway, we no have to make the home.html. In dreamweaver, go to: file>new>basic html page.
there should be something like this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

change it into this:

Code:
<head>
<title>Any title you want.</title>
</head>

<body background="images/<projectname>_<number of the slice of the contentbox>.gif">

Enter your text here

</body>
</html>

Well, there you have it. You should now posses the basic knowledge to code a simple website.

Notes:

If you want to make a link that doesn't open home.html
change it to this: <a href="Page you want to open.html">

If you want to make a webpage not to load up in an iframe
change: <target="">
here are a few targets:
Code:
_self (makes a site load up in the main window)
_blank (opens a new window>

If you have any questions, feel free to ask.

this is my end result:

Somethings maybe a bit unclear, but that's challenging. And should be fun...
 
Divine Celestial
Loyal Member
Joined
Jul 7, 2004
Messages
853
Reaction score
5


Thread over.
 
duck you, I'm a dragon
Loyal Member
Joined
Apr 29, 2005
Messages
6,405
Reaction score
130
Your point?
 
Junior Spellweaver
Joined
Jan 23, 2007
Messages
147
Reaction score
26
This will really help for people starting to learn, they will have good example on how to do things starting website, nice Pieman...
 
Divine Celestial
Loyal Member
Joined
Nov 11, 2004
Messages
810
Reaction score
0
This is more gfx design than coding..since coding mainly envolves the backend. I vote wrong section.

PS - Good tut nonetheless

[N]asser` ~ Out
 
Initiate Mage
Joined
Feb 8, 2007
Messages
2
Reaction score
0
This is more gfx design than coding..since coding mainly envolves the backend. I vote wrong section.

PS - Good tut nonetheless

[N]asser` ~ Out

Exactly what I thought.. it's mostly designing the template and slicing, CAN be done in photoshop too by the way.. (imageready is more suitable tho) Pretty good anyway.
 
Back
Top