Best Way To Do... ...this

[friso 0]

hey all

 

i'm making a site, and i wonder what the best way is to make it. this is, in a smaller version , my template. the top thing is a banner, the thing on the left is navigation, the thing in the middle is the main page, with the content, and the colored thing is something extra, not different per page (a shoutbox, weekly links, of a tiny weblog)

i could do it just plain html, with frames (noresize and border="0"), because the background is white anyway, so you won't see the frames.

i could also do it in html, in a table, with all 4 things in a different part.

maybe i can do it with php (i really don't no anything about php, so this might be stupid), and do it like this: one page, with all three things, except the main page, called 'page.php' and then page.php?&content=links (links is one of the pages on my site, displayed in the navbar)

html is the only i know, but i wanna learn more, so say everything that could be a solution!

 

thanks!

[harriko 0]

what you should do is think of a design you could do. the example you did is kinda simliar to my website. once you designed your website in any picture editing program. if you want it into a table format you can slice it up into pieces in photoshop.once you done that the coding come into play. if you only know html stick to it if this is a major site for you and need it uploaded quick. if it aint you can experiment with php, which i kninda doing too. i have no knowledge of php at all. probably the same position as you at the moment. so if you got all the time in the world you can experiemtn php in your website testing them and working out how they work. or you could make your website in html with no interactive things on it like guestbook, then once that is done you can try to translate it into php with the extra trimmings. this is what i am going to do, but have no time to do it for reason in education. such a hard course iam doing.thats what i done with mine. have a look of my website in my signature. only view it in microsoft internet explorer. i kinda need to edit the code a little as they are not compatible with mozilla browsers.

[rkage 0]

Well it can be done using (X)HTML and CSS. Create three DIVs inside one major DIV would get the job done. Using a table can also be one for the layout but generally there isn't as much customisation with those.

 

For the guestbook, Poll, or whatever else would go there, your best bet is to use PHP. There are free scripts all over the place so finding one to suit your needs shouldn't be that hard.

 

I've been giving this link out a few times but PHP - Hudzilla is a very good online PHP book if you want to learn enough PHP to do it yourself. HTML Dog is a brill site for HTML and CSS, I can't remember if they teach how to do a 2 column layout but a Google search for "Two column layout using CSS" should bring up a few good results.

[moonwitch1405241479 0]

Well, I just tried it with basic HTML, no CSS or nothing

 

Basically you can do it (the easiest way) with a frameset with a nested top, and the the lower part split vertically. Then the left would be another frameset which has an horizontal split. This is of course without graphics As I said in the Shout Box, I made a quick lay-out (that's how I do it LOL - I make a rough draft myself LOL So if you want that code, just give me a holler in shout).

 

As far as using tables and Photoshop, in all honesty, tables in HTML are my weakest point (even though I was blessed with a presentation on nested lists in CSS like they work on Eric Meyers' site (this will not work in IE) ) As soon as I figure out how exactly to do it, I'll give you a shout

 

Php, like you, is not my thing *yet* (yet being the imperative word LOL), I intend to learn php for my site here .

 

Edit :

 

So I'll throw the link in LOL (mind you I'll remove the pages from the folder soon LOL )

main page (big frameset)

topframe (the one with friso in it LOL)

content/mainFrame

left frame (which will be split horizontally and thus is another frameset )

the top part of leftside

bottom of left side

Edited March 7, 2005 by moonwitch (see edit history)

[friso 0]

ok, i already said this in the shout, but thanks again moonwitch! i think i could have done it myself too, but now i learnt that gradient thing you used to make 'FRISO' in the topframe. if everybody at the forum would be like you, it would be even better! (other users, don't be offended by this, i'm sure you're good too ) i downloaded it all - except the bottom left, cause there is no bottom left page... i just get a 404, but that doesn't matter at all. i will do it with frames, and improve it with php with testing and learning... thanks to the other users too, just for replying.i just got hosted, so i'll probably upload it in a short time.i just gotta find out what the best way is to do the border around the text, but i will make a new topic for that (more hosting credits!! )

[rkage 0]

Well I suppose Moonwitch's way is better if you know little about CSS since it would only confuse. I haven't used frames since I found out about the PHP Include function. I still don't like frames as I like my pages to validate but if it's easiest for you to use, then there is no problem

[wedjarl 0]

So many ways to create that.. but the easiest way to do that is through photoshop. in photoshop you could control the over all layout, the way the site will look, well more like skecthing/painting up, using photoshop as your canvas and its tools as pencil and paints. You could control the over all design and concept of your site...After that simply slice up the image you have created..and the rest will follow, just alter the codings etc..place contents/scripts on areas you wanted them to appear in your design.

[Hercco 0]

Here's mine suggestion: Full CSS positioning.

Depending on your content and menu items length the code below produces page that resizes the boxes according to the stuff that's inside. If you want them to always to be the same size, just add height properties into the css and overflow: scroll.

Here's the code:

<?xml version="1.0" encoding="utf-8"?>[tab][/tab][tab][/tab]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/; xml:lang="en-UK">[tab][/tab]<head>  <title> Friso's Ultra Cool Site </title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="language" content="en" />    <style type="text/css"> [tab][/tab]  [tab][/tab] body [tab][/tab] {    width: 800px; [tab][/tab] } [tab][/tab] #header [tab][/tab] {    position: absolute;    top: 0px;    left: 0px;    width: 800px;    height: 100px;    text-align: center;    border: 1px green solid; [tab][/tab] } [tab][/tab] #header h1 [tab][/tab] {    font-size: 45pt;    color: #d00; [tab][/tab] } [tab][/tab] #menu [tab][/tab] {    position: absolute;    top: 100px;    left: 0px;    width: 200px;    border: 1px green solid; [tab][/tab] } [tab][/tab] #colored_box [tab][/tab] {    background-color: #f00;    width: 200px;    height: 200px; [tab][/tab] } [tab][/tab] #content [tab][/tab] {    position: absolute;    top: 100px;    left: 200px;    width: 600px;    border: 1px green solid; [tab][/tab] }  </style>[tab][/tab]</head>[tab][/tab]  <body> [tab][/tab]  [tab][/tab] <div id="header">    <h1>Friso Rules</h1> [tab][/tab] </div> [tab][/tab]  [tab][/tab] <div id="menu">    <h5>Menu</h5>    <ul>   [tab][/tab]    [tab][/tab] <li> <a href="">Links</a> </li>   [tab][/tab] <li> <a href="">Links</a> </li>   [tab][/tab] <li> <a href="">Links</a> </li>   [tab][/tab] <li> <a href="">Xisto</a> </li>    </ul>    <div id="colored_box">   [tab][/tab] Stuff    </div> [tab][/tab] </div> [tab][/tab] <div id="content">    <h1>Home</h1>    <p>    [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah    </p>    <p>    [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah    </p>    <p>    [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah    </p>    <p>    [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah    </p>    <p>    [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah   [tab][/tab] Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah    </p> [tab][/tab] </div>  </body>[tab][/tab][tab][/tab]</html>