PDA

View Full Version : How to Make Fansite Layouts (NEW LAYOUT TUTORIAL!) **CODES** && MORE!



bad romance.
12-29-2008, 06:07 AM
In my old tutorial, the layout was more for blogs, and not fansites. In this tutorial, it is much translatable to other programs and you can use it with any picture or celebrity. I also changed the coding to HTML that you can copy and paste to use on your own layouts. Thanks for visiting this thread. TTYL.

-----------------------------------------------------------------
We will be making this (http://i43.tinypic.com/2q226np.png)

1. Open up Photoshop or Gimp.
2. Pop open a base (i used a default size)
3. Open up your first picture. i used taylor swift.
3. Erase some parts of her body. i used the fuzzy eraser.
4. Place the picture somewhere that looks cool.
5. Use your rectangle tool (we will be placing our text in this so please make it big enough!)
6. Fill it with colour. I used a nice greenish colour and a gradient. You do not have to use the gradient.
7. Add text to it. I used Times New Roman
8. Make another text layer and put your welcome message in it.
9. I typed in my text and added an inner shadow. This adds a cool effect.
10. That's it (:

------------------------------------------------------------

2. Coding

If you don't have Notepad, I do reccomend downloading it. It comes with most Windows computers (i'm not sure about Mac's) and it is a great software and has many uses, including coding.

Okay, so, let's get to it!

<html>
<head>
<title> Your site title goes here.</TITLE>
<style type="text/css">
body {
font-size:font size;
font-family:font name;
line-height:howlongthelineswillbe;
colour: #colourcode
b{color:#colour code;}
i{font-family:font; color:#colourcode;}
u{font-weight:normal;font-family:font; color:#colourcode;border-bottom:1px solid #colourcode;}
a:link,a:visited,a:active
{
colour:#colourcode;
font-family:font;
font-weight:bold;
font-size:size;
text-transform:normal;
text-decoration:none;
}
a:hover
{
colour:#colourcode;
cursor:sw-resize;
font-size:fontsize;
font-weight:bold;
text-transform: normal;
}
h1 {
margin-bottom: 0px;
margin-top: 0px;
border-bottom:1px solid #colourcode;
background: #colourcode;
colour: #colourcode;
font-family:font;
text-transform:uppercase;
font-weight:bold;
font-size:fontsize;
line-height:lineheight;
padding:2px;
text-align:right;
}
h2 {
margin-bottom: 0px;
margin-top: 0px;
font-size:11px;
line-height:12px;
font-family:fontfamily;
font-weight:normal;
colour: #colourcode;
background:#colourcode;
text-align:right;
}
.side {
background: #colourcode;
color: #colourcode;
font-size:size;
font-weight: normal;
font-family:fontamily;
padding:2px;
text-transform: normal;
text-align:left;
letter-spacing:0px;
border-bottom: 1px solid #colourcode; }
a.navi, a.navi:active, a.navi:link, a.navi:visited {
display: block;
font-family: fontfamily;
font-size: fontsize;
font-weight: bold;
text-decoration:none;
line-height:13px;
padding: 2px;
border-left:10px solid #colourcode;
background: #colourcode;
colour: #coloucode;
text-transform: uppercase;
text-align: center;
}
a.navi:hover {
display: block;
font-family: fontfamily;
font-size: size;
font-weight: bold;
text-decoration:none;
line-height:13px;
padding: 2px;
border-left:10px solid #colourcode;
background: #colourcode;
colour: #colourcode;
text-transform: uppercase;
text-align: center;}

</style>
</head>
<body style="background-color:#000000;">
<div style="position: absolute; top: 0px; left: 200px;">
<IMG SRC='Your picture URL. Upload to Tinypic or Photobucket and take the "HTML for Layouts" URL.;border=0>
</div>

<div style="position:absolute;background-color:transparent; left:430px; top:560px; width:390px;border:none;">
<h1>Your Updates</h1>
<h2>
Place Date or something here :)
</h2>
<div class="side">
Date/something here
</div>
</div>
<div style="position:absolute;background-color:transparent; left:250px; top:560px; width:160px;border:none;">
<h1>Header</h1>
<div class="side">
Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here!
</div>
<Br>
<h1>Header</h1>
<div class="side">
Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here!
</div>
<Br>
<h1>Navigation</h1>
<div class="side">
<a class="navi" href="#">Link Here</a>
<a class="navi" href="#">Link Here</a>
<a class="navi" href="#">Link Here</a>
<a class="navi" href="#">Link Here</a>
<a class="navi" href="#">Link Here</a>
</div>
<br>
<h1>Header</h1>
<div class="side">
Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here! Add text, links, or whatever you want here!
</div>
<Br>
<h1>Credits</h1>
<div class="side">
Credit: Coding by Emma @ Charismatic. Layout by You.
</div>
<Br><Br>
</body>
</html>

3. Helpful Website Tips

Only highlight important stuff.

Good example: 'I'm going on hiatus for 2 weeks so the site will not be updated.'
Bad example: 'God, my brother is being such a pain!'
Truth is no one really wants to know how much pain your brother is. So, only bold face important words or sentances.

Double check it.

Don't offend anyone. Don't be racist. Don't be mean to other people. Always double check your post! It is really worth it and make sure you read it over a lot of times, becuase sometimes we may miss somethings.

You may want to say this: 'I really want to get a new laptop!'
But really say this: 'I raelly want to get a bag of pot!'
So, always check it over (i know it's a weird example, but it can happen!)

Skipping lines.
Whatever you do, don't do this in HTML:

Name: ____________
Site Name: __________
Blah: _____________
Blah: ____________

What did I do? I skipped lines. Don't do that in HTML. Even if you double space it. In HTML, everything is a code. So, do this instead:

Name: __________
<BR>
Site Name: ________
<BR>
Blah: __________
<BR>
Blah: _________
<BR>

Content on your site.

Use stuff! Make icons or ask site viewers to donate icons and use them in your site's media section and make an icon section (to download scripts for this, check below.) Or make other graphics for your viewers. Media doesn't always have to be Past Articles and Audio Clips.

Music.

If you have a fansite, let's say, for, Vanessa Hudgens. You may want to play some music. This is really popular today with sites because this (http://www.myflashfetish.com/) site has every artist under the sun, so you can have a famous person from Italy and have there music on it. You can put Vanessa's whole two albums on there and let viewers play the songs while they browse your site, cool huh? Click here (http://www.myflashfetish.com/) for the site.

Link buttons.

It is essential to have at least one link button. The link button allows site viewers to link back to your site if their listing you, want to be affiliates, are crediting you for something and more. Here are some link buttons already premade for you. If you would like to make one on your own, follow this tut here (http://www.htmlgoodies.com/tutorials/buttons/article.php/3478871). These link buttons were all by www.piczo.com/sugary (http://www.piczo.com/sugary)-. I'm sure you've used one before. Here is an example of a link button.

http://vanessa-anne.org/images/mvbutton2.gif
credit 7-seasdesigns,org.

To use one just write your text in one corner in a pixel font. You can download some neat pixel fonts here (http://www.dafont.com).

Celebrities - 88 x 32

http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/ashley.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/zac.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/vanessa.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/mileyay.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/15.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/19.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/20.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/22.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/24.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/25.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/26.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/27.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/31.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/32-1.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/41.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/43.png

Other - 88 x 32

http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/buttonbase.gif http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/bbasebysugary-.gif http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/redbase.gif http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/base.gif http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/9.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/10.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/11.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/21.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/13.gif http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/14.gif http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/16.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/18.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/17.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/23.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/32.gif http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/34.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/35.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/36.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/37.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/38.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/39.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/40.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/42.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/44.png

Celebrities - 88 x 34

http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/jonas.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/ryansheckler.png

Other - 88 x 34

http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/3.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/2.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/1.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/6.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/5.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/4.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/7.png http://i239.photobucket.com/albums/ff168/beaded0necklace/Buttons/Blank%20Buttons/8.png


Hosts.

What is a host? A host is someone who runs the site for you. She offers FTP, a Control Panel and everything you need to get your site running smoothly. However, some hosts aren't free. I put together a list of free hosts just for you.
Note: You may ask to get some examples of your work including coding examples and any graphic you have made.

http://www.sopink.org
http://www.crashwithme.org/
http://pink-pistol.net/hosting/ (http://pink-pistol.net/hosting/)
http://begrudged.org/b2/hosting (http://begrudged.org/b2/hosting)
http://fan-addict.org/ (http://fan-addict.org/)


Links

http://www.outspoken-kate.com/?x=7ideasforyourwebsite (7 ideas for your site)
http://cutephp.com/ (Cute news)
http://new-place.org/scripts.php (Icon sort and many other scripts)
http://coppermine-gallery.net/ (Coppermine photo gallery)
http://www.wordpress.com (Like Cute News, but Wordpress format)

----------------------------------------------------------


I really do hope it helps some of you guys. If you have any questions, please P.M. me or message me. Thanks!

saraaah
12-29-2008, 06:10 AM
oooh im looking forward to this (:

cristinajosie.
12-29-2008, 06:12 AM
^^ same LOL

bad romance.
12-29-2008, 06:31 AM
bump.

carrie.beth
12-29-2008, 01:07 PM
how do you get them coded??

bad romance.
12-30-2008, 04:23 AM
how do you get them coded??

oh yeah, i totally forgot about that. okay, i'll get that up.

carrie.beth
12-30-2008, 05:30 AM
thanks so much

LEDGER.
12-30-2008, 10:39 AM
oh my god.
you are officially my hero.
thank you! :)

black star.
12-30-2008, 10:44 AM
very helpful.
thank you (:

brandnewlove.
12-30-2008, 10:53 AM
i'm sure this will be a help for a lot of people.
i prefer css though. (:

bad romance.
12-30-2008, 11:54 AM
oh my god.
you are officially my hero.
thank you! :)


very helpful.
thank you (:


i'm sure this will be a help for a lot of people.
i prefer css though. (:

haha, your welcome guys. [:

young hearts.
12-30-2008, 03:16 PM
emma.
you just saved.
my whole life.
ever.

_onmyown
12-30-2008, 05:50 PM
If you are doing coding from scratch in notepad don't forget to put the

<html>
<head>
</head>
<body>

all the table content

</body>
</html>

bad romance.
12-31-2008, 05:30 AM
emma.
you just saved.
my whole life.
ever.

haha. your welcome. [:

AFRICA
01-06-2009, 12:30 AM
Oh jeez table coding is horrible. Div positioning would be so much easier. :)
correct usage for line breaking is <br /> no letters in CSS/HTML are capitalized it's all lowercase.

Wouldn't it be easier to do

body {
background-image: url("http://www.7seas-designs.org/textures/1.jpg");}

.content {height:; width:; position: absolute;} etc etc

It would also be nice if you told them how to edit h1 h2 and h3 because by default they are big bold and ugly.

Also music on a website is never a good idea unless you have to where you can stop it, otherwise it makes it hard to read text because music is playing.

_onmyown
01-06-2009, 05:22 AM
I think CSS being easier depends on the person.

I have been making sites for a while so when I learned how to do it some odd what seems like 10 years ago, it was just basic HTML. So, for me to switch over to css is kind of confusing because im just so used to doing it the original way.

I JUST recently like 2 weeks ago learned the php header/footer deal. Which makes it alot easier if you have sidebars that need to be updated alot.

AFRICA
01-06-2009, 06:08 PM
I think CSS being easier depends on the person.

I have been making sites for a while so when I learned how to do it some odd what seems like 10 years ago, it was just basic HTML. So, for me to switch over to css is kind of confusing because im just so used to doing it the original way.

I JUST recently like 2 weeks ago learned the php header/footer deal. Which makes it alot easier if you have sidebars that need to be updated alot.

PHP is difficult to learn properly. I think the php include codes were the first thing I learned. I never did the whole Table coding because there's no way for you to make an interoperable web page that way. I'm big on validation so that the site looks the same in every major browser.

andreinaHZ
01-11-2009, 07:28 PM
thanks so much.. !!! very good tutorial

FreakinOutOverEfron
01-23-2009, 05:55 PM
I personally like the ordering of CSS better especially with coded layouts, but thanks for the tutorial

bad romance.
02-14-2009, 05:01 AM
haha, thanks.(:

Graphicmaker1
04-14-2009, 11:57 PM
thanks so much.how do u make buttons and sidebar things?(im so new to this sorry) do u make them in photoshop?

bad romance.
04-15-2009, 05:00 AM
thanks so much.how do u make buttons and sidebar things?(im so new to this sorry) do u make them in photoshop?

buttons? well, they are easy.
i'll put the tut up right now.
& sidebar things? you mean,
like the header things? like;

blah blah blah
lajhfdhkfdhkfdshfdsjkfdsjk
fdsfdssjfkf

except in like, graphic
form? haha.

SupersonicGeek
04-17-2009, 12:04 AM
i agree with anthony. div coding is wayyy easier. and yea, u should definitely show how to edit <h1> and <h2>. it's a fairly good tutorial though

Ally
04-24-2009, 11:52 AM
Thanks for the tutorial! =]

But when you have someone mae the layout for you, where do you add it? Like on Freewebs?
&& when you add it, where do you put those codes for layout? Do you put it under the code for the graphic? I mean the code that you already posted, on like how to edit the <b>'s and ect.
Sorry if I sound confusing! :(

bad romance.
05-24-2009, 04:37 AM
http://i43.tinypic.com/2q226np.png

we will now be making this layout. i also updated the coding and more.

BUMP