Jump to content
SkatePerception
Sign in to follow this  
skater4life673

Website Layout Tutorial

Recommended Posts

So after many people making threads with one big background image and some divs drawn on it (not hating on fork or anything), I decided to make a new tutorial. Don't copy this tutorial exactly because this is very basic; get creative.

First things first. Learn [url="http://w3schools.com/html/default.asp"]HTML[/url] and [url="http://w3schools.com/css/default.asp"]CSS.[/url]

[url="http://annexskatemedia.com/tutorial/index.html"]This is what the end product will be.[/url]

I'll be using [url="http://www.adobe.com/products/photoshop/family/"]Adobe Photoshop[/url] and [url="http://www.adobe.com/products/dreamweaver/"]Macromedia Dreamweaver[/url] for this.

[b]Photoshop[/b]
Starting off, open photoshop. You're gonna want to make a banner now, so go file>new. Then, in the box that pops up, set the width and height as whatever you want. The width will be the width of your layout. I'm gonna use 700x75.
[img]http://annexskatemedia.com/tutorial/01.jpg[/img]

so now you should have a white rectangular blank image. Choose 2 colors. one for the text, and one for the background. I chose black and green. if you want to give your site a [url="http://en.wikipedia.org/wiki/Web_2.0"]Web 2.0[/url] look, [url="http://www.guim.fr/blog/web20palette.jpg"]at this[/url] for some color inspiration. If you can't find a font that you like that is already on your computer, check out [url="http://"http://dafont.com/"]dafont.com[/url] for some fonts. for mine, I used verdana and put a small outer glow on it.
[img]http://annexskatemedia.com/tutorial/02.jpg[/img]

once you have it positioned, add something to it to make it more interesting; whether it be your logo or just something random. I'll use a photoshop shape.
[img]http://annexskatemedia.com/tutorial/03.jpg[/img]

now that we're done with the banner, we'll move onto the navigation. If you want something other than just a solid color background, make it here in photoshop.

to keep this tutorial as simple as possible, I'll just stay with a solid color.
[b]___________________________________________________________________________[/b]

[b]Dreamweaver[/b]
As you open dreamweaver, there should be a menu. choose Create New HTML.
[img]http://annexskatemedia.com/tutorial/04.jpg[/img]

After you do that, replace "Untitled Document" in the code with whatever you want the title of your site to be. then hit ctrl+s to save it. name it index.html and save it in the same directory that you saved your banner.
[img]http://annexskatemedia.com/tutorial/05.jpg[/img]

Then go file>new>basic page>CSS. hit ctrl+s to save it. you can name it whatever you want as long as it ends in .css, but I always choose to name it style.css.
[img]http://annexskatemedia.com/tutorial/06.jpg[/img]

Then, in index.html, after the </title>, hit enter to create a link between them and enter the following code between the </title> and the </head>
[code]<link href="style.css" rel="stylesheet" type="text/css" />[/code]
replace style.css with whatever you named your css page.

Next, go to your .css page and type the word "body {". if you have a background image/pattern, you would then type "background: url(url of picture);}". If you just want a solid color background, then type "background-color: #hex code of color here;}". If you dont know hex codes, then when you put the : at the end of background color, it should come up with a menu where you can choose the color that you want. I'll choose a dark grey so there is no focus on the background and it is all directed at the layout.
[img]http://annexskatemedia.com/tutorial/07.jpg[/img]

next, you're gonna make a "wrap" div, which centers your layout. So, hit enter twice and enter:
[code]#wrap {
margin: 10px auto;
width: 700px;
border: 1px solid #66CC33;
}[/code]
you can change the border according to how you want it to look. and if you dont want a space between the top of the site and your layout, change the 10px in margin: to 0. Now, back to index.html. In between <body> and </body> (where the content is displayed) type
[code]<div id="wrap">
</div>[/code]

Now, your going to want to insert the banner that you made. in between the div tags, put
[code]<img src="banner.jpg" alt="Your site name" border="0" />[/code]
change banner.jpg to whatever your banner's filename is. and the alt to your site name or whatever you want it to say when the banner isn't viewable. you should have this now.
[img]http://annexskatemedia.com/tutorial/08.jpg[/img]

Now, onto the navigation bar. go back to your css page and type
[code]#nav {
width: 680px;
height: 24px;
background-color: #000000;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
padding-top: 4px;
padding-left: 20px;
}

a {
padding-right: 10px;
font-family: Verdana, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}

a:hover {
color: #66CC33;
text-decoration: none;
}[/code]
using those padding attributes in the #nav css, the text will now be 20px from the left side and vertically centered if the text is 12px. the links will be white, verdana, have 10px inbetween each link, and have no underline. and when you hover over the links, they will turn a bright green. Now, back to index.html. to add the nav div and links to other pages to the page, put
[code]<div id="nav">
<a href="index.html">Home</a> <a href="page2">Page 2</a> <a href="page3">Page 3</a> <a href="page4">Page 4</a></div>[/code]

now you should have something that looks like this
[img]http://annexskatemedia.com/tutorial/09.jpg[/img]

once again, go back to your css page and put this in there
[code]#content {
width: 690px;
padding: 5px;
border: none;
background-color: #000000;
}[/code]
the padding thing here makes everything in that div 5px away from the edge of the div.

back to the html page to add the content div to your page.
[code]<div id="content"></div>[/code]

now, to add some updates. format the h1 tag and a class called update in your css page for the title and date of the update. the update class will be the update description under the title/date. I'm gonna make it flow with the rest of my layout.
[code]h1 {
font-family: Verdana, sans-serif;
font-size: 14px;
font-weight: normal;
color: #66CC33;
}

.update {
font-family: Verdana, sans-serif;
font-size: 12px;
color: #FFFFFF
}[/code]

now, you need to add an update. In the content div, add
[code]<h1>New Layout // Apr 19, 2007</h1>
<span class="update">Update description goes here. Update description goes here. Update description goes here. Update description goes here. </span>[/code]

Now, open up your browser (which is hopefully firefox) and go file>open file and select your index.html that you have been making. It should look something like this.
[img]http://annexskatemedia.com/tutorial/10.jpg[/img]

Share this post


Link to post
Share on other sites
Now you need a footer. Add this code to your css page.
[code]#footer {
margin: 10px auto;
background-color: #000000;
border: 1px solid #66CC33;
width: 700px;
height: 25px;
text-align: center;
padding-top: 5px;
font-family: Verdana, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}

#footer a {
font-family: Verdana, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: underline;
}

#footer a:hover {
text-decoration: none;
color: #66CC33;
}[/code]

In the html page, add the footer div into it. If you still don't know how to do it,
[code]<div id="footer"></div>[/code]

Now just add whatever you want in the footer in between those two tags. I'll add copyright info, and my email address. If you want to add Valid XHTML and Valid CSS in there with links to the validator, go for it.
[code]<div id="footer">
© Title of your site here 2007 | <a href="mailto:email@address.com">email@address.com</a>
</div>[/code]

if you have any questions, post them here or talk to me on AIM at skater4life673

Share this post


Link to post
Share on other sites
I say keep em both up, it's two different ways of going about things. Let the people pick.

Share this post


Link to post
Share on other sites
here's what i made with this tutorial,

[url="http://www.hifi.vze.com/"]http://www.hifi.vze.com/[/url]


the tutorial was easy to understand.

thanks

Share this post


Link to post
Share on other sites
is their a way to do it so the page doesnt have to load everything everytime a link is clicked?

can their be a set size for the content div with a scrollbar?

maybe what im thinking is like a mix between iframes and this but id like to know if those are possible.

thanks..look forward to creating something with this nice tutorial!

Share this post


Link to post
Share on other sites
[quote name='illusionskates' post='1817389' date='Jul 18 2007, 09:04 PM']is their a way to do it so the page doesnt have to load everything everytime a link is clicked?

can their be a set size for the content div with a scrollbar?

maybe what im thinking is like a mix between iframes and this but id like to know if those are possible.

thanks..look forward to creating something with this nice tutorial![/quote]

Yes.
[code]Put this in your CSS:
#setbox {
height: 300px;
overflow:scroll;
}

This is your content box:
<div id="setbox">
Content
Content
Content
</div>[/code]


Thats basically it, pretty simple.

Share this post


Link to post
Share on other sites
[quote name='illusionskates' post='1817389' date='Jul 18 2007, 05:04 PM']is their a way to do it so the page doesnt have to load everything everytime a link is clicked?[/quote]
iframes

Share this post


Link to post
Share on other sites
[quote name='bg.' post='1757187' date='Jun 18 2007, 12:27 AM']here's what i made with this tutorial,

[url="http://www.hifi.vze.com/"]http://www.hifi.vze.com/[/url]
the tutorial was easy to understand.

thanks[/quote]


very cool. did you pay for that domain name? or did you use a free-domain name site, like freewebs.com or something.

i'm working on making a website, and MAN this is exactly what i was looking for. thank you so much

Share this post


Link to post
Share on other sites
[quote name='filmerwesgl2' post='1818235' date='Jul 19 2007, 12:21 AM']very cool. did you pay for that domain name? or did you use a free-domain name site, like freewebs.com or something.

i'm working on making a website, and MAN this is exactly what i was looking for. thank you so much[/quote]
nah he used a free domain site. i'm pretty sure he used [url="http://shorturl.com"]shorturl.com[/url]

Share this post


Link to post
Share on other sites
Damn i alot of reading ahead, but i am stooked on learning to make a web.

Share this post


Link to post
Share on other sites
HALP !

This is what it looks like. I did something wrong but not to sure where. There is suppose to be a background picture, and my content box isnt centered.

Anybody know how to fix this!!! :goldenwub:

[img]http://i92.photobucket.com/albums/l17/3ride/siteshot.jpg[/img]


my html.

[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=utf-8" />
<title>Next Day Ait</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrap">
<img src="file:///F:/Next%20Day%20Air/IMAGES/banner.jpg" alt="Next Day Air" border="0" />
<div id="nav">
<a href="index.html">Home</a> <a href="page2">Page 2</a> <a href="page3">Page 3</a> <a href="page4">Page 4</a></div>
</div>
<div id="content">
<h1>New Layout // Apr 19, 2007</h1>
<span class="update">Update description goes here. Update description goes here. Update description goes here. Update description goes here. </span>
</div>

</body>
</html>[/code]

my css.

[code]@charset "utf-8";
/* CSS Document */
body {background: file:///F:/Next%20Day%20Air/IMAGES/background.jpg;}

#wrap {
margin: 10px auto;
width: 700px;
border: 1px solid #2e4866;
}
#nav {
width: 680px;
height: 24px;
background-color: #000000;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
padding-top: 4px;
padding-left: 20px;
}

a {
padding-right: 10px;
font-family: Verdana, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}

a:hover {
color: #2e4866;
text-decoration: none;
}
#content {
width: 690px;
padding: 5px;
border: none;
background-color: #000000;
}
h1 {
font-family: Verdana, sans-serif;
font-size: 14px;
font-weight: normal;
color: #2e4866;
}

.update {
font-family: Verdana, sans-serif;
font-size: 12px;
color: #FFFFFF
}[/code]

If you could please point out where i went wrong that would be awesome.

Thanks.

Share this post


Link to post
Share on other sites
in your css, change body {background: file:///F:/Next%20Day%20Air/IMAGES/background.jpg;} to

[code]body {background-image: url('images/background.jpg');}[/code]

and upload your bg image to a folder called images in your root folder.

for the center problem, you have an extra </div> in your code after the nav div. take one out and you're set

Share this post


Link to post
Share on other sites
[quote name='XavierGeezy' post='3078043' date='May 1 2009, 11:54 PM']Eh, why does this seem so hard? am i just a dumb fuck?[/quote]

Its really not just pay attention to what your doing.

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  

×