Making your own layouts

Started by pokejungle October 2nd, 2004 10:40 AM
  • 1176 views
  • 31 replies

Morkula

Get in the Game

Age 34
Male
Virginia
Seen February 6th, 2020
Posted March 4th, 2018
7,294 posts
19.3 Years
I'd do a layout for you, pj, but you might not like how it turns out. XD

Maybe JA or saul could help you, they're both really good. Saul designed WCC's new layout (you'll see it probably tomorrow). I've never seen any of JK's layouts, but he says he stinks at them. I'm sure they're not THAT bad though... :P

Cherrim

Age 34
she / her
Toronto
Seen 19 Hours Ago
Posted 19 Hours Ago
33,052 posts
20.4 Years
The absolute best way to learn how to make layouts is to look at the source code of other layouts. By imitating them (to some extent, don't just copy and paste the whole thing in!), you tend to pick up the technique much faster than you would through standard tutorials. =X Eventually you'll become really good at it and you'll be able to do it from scratch~

Worked for me, anyway. XP


paired with professor plum.

Cherrim

Age 34
she / her
Toronto
Seen 19 Hours Ago
Posted 19 Hours Ago
33,052 posts
20.4 Years
I'm pretty sure bitmap images will only display in Internet Explorer, and even then they often take an incredibly long time to load. =\ You would have to convert them anyway. You're best waiting for PSP. XP


paired with professor plum.

Haruka

Pokémon Coordinator

Age 34
Kanto (Currently: Caldwell, NJ)
Seen July 24th, 2009
Posted April 7th, 2008
3,877 posts
19.7 Years
Well, you can use a WYSIWYG HTML Editor for starters, try looking at other examples. For Images, use a photo editing program like Paint Shop or Adobe Photshop Elements (or Photoshop).

and be creative. ^_^


Omigosh, it's the return of Ashley... =o
Friend Codes
Pokemon Battle Revolution: 4381 9024 5685 (Alyssa)
Pokemon Diamond: 1718 9721 5525 (Hikari) (2 win, 2 loss)
Florafield City Gym* is now open!
Gym Statistics: 3 win, 3 loss
*Requires a registration at TCoD and also with the League.

Haruka

Pokémon Coordinator

Age 34
Kanto (Currently: Caldwell, NJ)
Seen July 24th, 2009
Posted April 7th, 2008
3,877 posts
19.7 Years
Imaging is a old Windows Picture Editor... I don't use it though. >_>


Omigosh, it's the return of Ashley... =o
Friend Codes
Pokemon Battle Revolution: 4381 9024 5685 (Alyssa)
Pokemon Diamond: 1718 9721 5525 (Hikari) (2 win, 2 loss)
Florafield City Gym* is now open!
Gym Statistics: 3 win, 3 loss
*Requires a registration at TCoD and also with the League.

Haruka

Pokémon Coordinator

Age 34
Kanto (Currently: Caldwell, NJ)
Seen July 24th, 2009
Posted April 7th, 2008
3,877 posts
19.7 Years
I had to do webmaster work. sorry...

but I can still talk to you...


Omigosh, it's the return of Ashley... =o
Friend Codes
Pokemon Battle Revolution: 4381 9024 5685 (Alyssa)
Pokemon Diamond: 1718 9721 5525 (Hikari) (2 win, 2 loss)
Florafield City Gym* is now open!
Gym Statistics: 3 win, 3 loss
*Requires a registration at TCoD and also with the League.

aRedMoon

Wait for me outside the lines

Age 34
Male
Minnesota
Seen April 23rd, 2018
Posted September 10th, 2013
11,126 posts
19.2 Years
Example:

<table cellpadding=0>
<tr>
<td width=100 background="nav.gif">Blah</td>
<td width=700 background="main.gif">More blah</td.
</tr>
</table>


And my layouts do suck. x.x I've never been good with images, and they always seem to mess up for me. <_<
facebook \\ twitter \\ blog a.k.a life // tumblr // google+

june 10, 2003 = registered at old pc
march 24, 2004 = registered at new pc
june, 2004 = modded ;;; august, 2004 = quit/fired (point of debate)
december, 2004 = banned ;;; december 2, 2005 = unbanned
june 10, 2008 = omg... five years!
june 10, 2012 = countdown to nine years on pc...

Kipkip

Join the Revolution

Age 32
Seen June 24th, 2007
Posted October 18th, 2005
968 posts
19.5 Years
Example:

<table cellpadding=0>
<tr>
<td width=100 background="nav.gif">Blah</td>
<td width=700 background="main.gif">More blah</td.
</tr>
</table>


And my layouts do suck. x.x I've never been good with images, and they always seem to mess up for me. <_<
Actually, it would be more like this:
<table cellpadding=0>
<tr>
<td width=100 style="background-image:url(nav.gif)">Blah</td>
<td width=700 style="background-image:url(main.gif)">More blah</td.
</tr>
</table>
There is no such thing as a table attribute called "Background". You need to use:
style="background-image:url(picturename.gif)"
for your website to be a valid HTML 4.01 or XHTML 1.0 document. But "Background" still works.

I don't know of any online reasource that tells you how to make a layout. You just need to know HTML. Most HTML tutorials are good to tell you how to make a layout. I could help you with coding if you ever need it but in the images department, I lack skill making them.

Haruka

Pokémon Coordinator

Age 34
Kanto (Currently: Caldwell, NJ)
Seen July 24th, 2009
Posted April 7th, 2008
3,877 posts
19.7 Years
Kip-Kip, it isn't valid HTML 4.0!!!!

All tributes must have "'s..

<table align="center" cellpadding="0" class="border">
<tr>
<td width="100" style="background-image:url(nav.gif)" summary="nav">Blah</td>
<td width="700" style="background-image:url(main.gif)" summary="main">More blah</td>
<td width="100" style="background-image:url(nav.gif)" summary="nav2">Blah</td>
</tr>
</table>


Omigosh, it's the return of Ashley... =o
Friend Codes
Pokemon Battle Revolution: 4381 9024 5685 (Alyssa)
Pokemon Diamond: 1718 9721 5525 (Hikari) (2 win, 2 loss)
Florafield City Gym* is now open!
Gym Statistics: 3 win, 3 loss
*Requires a registration at TCoD and also with the League.

Haruka

Pokémon Coordinator

Age 34
Kanto (Currently: Caldwell, NJ)
Seen July 24th, 2009
Posted April 7th, 2008
3,877 posts
19.7 Years
You're welcome!

and doing incomplete tags would cause it not to display correctly in firefox... X_X


Omigosh, it's the return of Ashley... =o
Friend Codes
Pokemon Battle Revolution: 4381 9024 5685 (Alyssa)
Pokemon Diamond: 1718 9721 5525 (Hikari) (2 win, 2 loss)
Florafield City Gym* is now open!
Gym Statistics: 3 win, 3 loss
*Requires a registration at TCoD and also with the League.

Haruka

Pokémon Coordinator

Age 34
Kanto (Currently: Caldwell, NJ)
Seen July 24th, 2009
Posted April 7th, 2008
3,877 posts
19.7 Years
I test everything on one computer with 4 Web Browsers, IE, Firefox, Mozilla, and Opera...

but it doesn't work on other computers for some odd reason...


Omigosh, it's the return of Ashley... =o
Friend Codes
Pokemon Battle Revolution: 4381 9024 5685 (Alyssa)
Pokemon Diamond: 1718 9721 5525 (Hikari) (2 win, 2 loss)
Florafield City Gym* is now open!
Gym Statistics: 3 win, 3 loss
*Requires a registration at TCoD and also with the League.

Spectrum

In need of an oil change

Age 31
Male
Australia
Seen December 8th, 2021
Posted August 2nd, 2019
7,400 posts
18.8 Years
I only test in IE. XP

Also, I'm not very good. I just played around and came out with this, getting ideas from The APCC's layout. I think I could do better, though.

Anyway PJ, your best bet is to start simple. Make a creative banner in PSP, then make a basic table layout, playing around with colours. If you're a newbie, you should try FrontPage. :P No seriously, that's how I learned HTML.

Make big layouts on PSP. The chop it up and put it together in your page. ^^

Dragonfree

Teh Spwriter. :3

Age 33
Female
Iceland
Seen February 9th, 2020
Posted November 28th, 2012
1,290 posts
19.1 Years
Or you could go with a DIV layout...

<html>
<head>
<title>Title here</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div align="center" style="position:absolute; left:0; top:0;">
<div id="banner" style="height:height of banner; width:width of banner; background-image:url(banner.jpg);"></div>
</div>
<div id="leftmenu" style="position:absolute; top:height of banner; left:0; width:left menu width;">
Menu here
</div>
<div id="content" style="margin-left:left menu width; margin right:right menu width; margin-top:height of banner;">
Your content here
</div>
<div id="rightmenu" style="position:absolute; right:0; top:height of banner; width:right menu width;">
Right menu here
</div>
</body>
</html>
Of course, you can insert all the style attributes into the stylesheet rather than the HTML itself. Insert background colors, background images, etc. into the stylesheet.

I test in Firefox, Netscape, IE and Opera...
~Butterfree/Dragonfree/antialiasis of The Cave of Dragonflies

Still not going to sprite for your fangame. Sorry, but I don't really sprite or give out permission for people to use my fake Pokémon anymore.
Age 62
Male
Melbourne, Australia
Seen April 26th, 2018
Posted June 9th, 2014
11,439 posts
19.7 Years
I tend to design my layouts in Fireworks or Elements, then slice them, edit them and change a lot of things into CSS. Mine are all still table-based layouts, if you want to do a CSS layout I'd say Erica there is the best person to go to. But I can give you any help you need.


"One reason why mathematics enjoys special esteem, above all other sciences, is that its laws are absolutely certain and indisputable, while those of other sciences are to some extent debatable and in constant danger of being overthrown by newly discovered facts."
Albert Einstein

"What science can there be more noble, more excellent, more useful for men, more admirably high and demonstrative than mathematics."
Benjamin Franklin

"Mathematics, rightly viewed, possesses not only truth, but supreme beauty – a beauty cold and austere, like that of sculpture, without appeal to any part of our weaker nature, without the gorgeous trappings of paintings or music, yet sublimely pure and capable of a stern perfection such as only the greatest art can show."
Bertrand Russell

avatar and signature by FoxHound

ANNOY ME AT YOUR PERIL. I am becoming increasingly tired of the unmanly elitism and closed-mindedness of certain members who shall remain unnamed.