[GUIDE] How To Make Your Own Website (Advanced)

DragonHunter · March 22, 2009

Begin Guide: [GUIDE] How To Make Your Own Website (Basic)

http://www.maxcheaters.com/forum/index.php?topic=50736.0

Experienced Guide: [GUIDE] How To Make Your Own Website (Advanced)

http://www.maxcheaters.com/forum/index.php?topic=51823.0

Hello people, If you have readed my Basic guide how to make your own website you can learn from this guide to make a more advanced website, I will guide you so you can make your own websites instead of downloading stuff without knowing the scripts

This is an example I made http://img208.imageshack.us/img208/4222/l2sonic1024.png

You can make your website in whatever way you want, So if your ready...Lets begin ;)

We are going to make it in dreamweaver I'm using CS3

Make a new HTML empty page in DreamWeaver CS3

Make now a new CSS file in DreamWeaver CS3

as you will see in the HTML page you will get this:

<!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=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

And at CSS

@charset "utf-8";
/* CSS Document */

Ok lets begin first at the CSS side so... lets say you want your website in a color like red

Go to your CSS and add this under /* CSS Document */

body
{
background-color:#FF0000;
}

This will say the <body> must have a background color: red

Lets say you want your website centered... make a new ID in your CSS

Type this in your CSS Under the body script

#container
{
margin: 0 auto; /* This will say your website begin and thats 0 automatic */
width:800px;
}

Remember that you must change later your width:800px; good or else it will look a little bit strange if you have a image that will have more then 800pixels as your container where you are making your website

Ok lets move on to your HTML side

Add this between the body's

<div id="container">


</div>

Between the container DIV you must work if you will not do that everything will become under the website you are making

This is what your HTML should look like

<!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=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="container">




</div>
</body>
</html>

And the CSS will look like this

@charset "utf-8";
/* CSS Document */

body
{
background-color:#FF0000;
}

#container
{
margin: 0 auto; /* This will say your website begin and thats 0 automatic */
width:800px;
}

If you want to see your website name your HTML file to index.html and the css to style.css

ok now go to your html side and add this line between the head's under the <title>

<link href="style.css" rel="stylesheet" type="text/css" />

and if you go now to the DESIGN you will see the page and its red ;)

if your page is not red please give a comment !

Ok lets move on to pictures lets take this picture as example http://images.mmosite.com/feature/news/2007_10_15/lineage2/ss/lineage2sl02.jpg

You can choose any picture you want but I just took a picture from google

Ok now your CSS Side

#picture
{
background-image:url(http://images.mmosite.com/feature/news/2007_10_15/lineage2/ss/lineage2sl02.jpg);
width:420px;
height:603px;
}

You said here what resolution it will take and it was 420*603 if you will set it lower it will cut of a part of the picture and I think you don't want that to happen... You ALWAYS must give width and height

Now your CSS will look like this

@charset "utf-8";
/* CSS Document */

body
{
background-color:#FF0000;
}

#container
{
margin: 0 auto; /* This will say your website begin and thats 0 automatic */
width:800px;
}

#picture
{
background-image:url(http://images.mmosite.com/feature/news/2007_10_15/lineage2/ss/lineage2sl02.jpg);
width:420px;
height:603px;
}

And your HTML Side like this

<!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=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">


<div id="picture"></div>



</div>
</body>
</html>

Don't forget we are still working inside the container with a resolution width of 800

In your DESIGN you will see this http://img25.imageshack.us/img25/6913/41650079.jpg

If its looking like this..give a comment !

Ok lets add the same picture

tips:

# = ID, is unique It can be used only one time, You can use it more times but thats bad!

. = CLASS, You can use this as many times you want and its not unique

Ok so lets make the in the CSS the #picture to .picture so its a class and not unique anymore

Go now to your HTML side and change

<div id="picture"></div> to <div class="picture"></div>

Hey if I go now back to my DESIGN I see my picture again uhm..lets copy <div class="picture"></div> and lets see what it does

I see now 2pictures 1above and 1under, If you do not have this http://img172.imageshack.us/img172/1817/42754205.jpg please comment!

Ok so.. I want them together like 1left and 1right (for css it will be 1left and the other 1left)

Something like this

.picture
{
background-image:url(http://images.mmosite.com/feature/news/2007_10_15/lineage2/ss/lineage2sl02.jpg);
width:420px;
height:603px;
float:left; /* It will be left of the container */
}

Go back to your DESIGN at the html side...and hey its not working right ? Thats because the pictures together are more width then the container it self lets make the width of the container to 840, Thats the picture width x 2

Math:

Picture width X Picture width = 840 pixels

go to your CSS side and change this:

#container
{
margin: 0 auto; /* This will say your website begin and thats 0 automatic */
width:800px;
}

TO

#container
{
margin: 0 auto; /* This will say your website begin and thats 0 automatic */
width:840px;
}

Now you will notice the pictures does look like this at the website

http://img410.imageshack.us/img410/8899/92835283.jpg

You can copy and copy...again and again the pictures and they will come under the above pictures

With this you can test alot of things and creating your own website :)

Later I will update this thread...

jossoo · March 22, 2009

nice guide dragonhunter..keep up good work mate..i will try to make it...

DragonHunter · March 22, 2009

nice guide dragonhunter..keep up good work mate..i will try to make it...

Thanks ;)

And please don't copy any text but just type it your self so you can learn it much faster

ZeRo* · March 22, 2009

Another good job from you ;)

Very nice work man! Keep Up with those crazy guides ;D

™ hItMaKëR™ · May 21, 2009

Realy nice job man keep up

Futzi · May 22, 2009

keep walking dragonhunter very good guide....

WizZy™ · May 22, 2009

I prefer dreamweaver.. But for some fast codes notepad ^^ I can post a guide for PHP but after a day or two i`m going to a vacation :) Nice guide for newbies ^^

CalyXTen · May 25, 2009

god job, thanks

[GUIDE] How To Make Your Own Website (Advanced)

Recommended Posts

DragonHunter

jossoo

DragonHunter

ZeRo*

™ hItMaKëR™

Futzi

WizZy™

CalyXTen

Join the conversation

Posts

Topics

Browse

Activity

Store