Pieman's tutorial to coding a basic website
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:
http://www.pie-designs.net/pieter!/newtemplate.jpg
When in imageready go to: Slices>divide slices A window like this will popup:
http://www.pie-designs.net/pieter!/popup.jpg
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:
http://www.pie-designs.net/pieter!/slices.jpg
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.
Quote:
Originally Posted by Side note
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 here
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:
http://www.pie-designs.net/pieter!/root.jpg
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 here
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: Pie-designs
Somethings maybe a bit unclear, but that's challenging. And should be fun...
