Larchy your a code junkie.. how would you code this page?
1
Re: Hey Larchy? - MuhnayMedia
Posted by G4MER on Sat Dec 13th at 11:13pm 2008
Larchy your a code junkie.. how would you code this page?
Posted by G4MER on Sat Dec 13th at 11:13pm 2008
Larchy your a code junkie.. how would you code this page?
Re: Hey Larchy? - MuhnayMedia
Posted by Le Chief on Sat Dec 13th at 11:53pm 2008
Posted by Le Chief on Sat Dec 13th at 11:53pm 2008
I think this page could be done in html, no need to go to the trouble of php for this.
Now, go and learn html, its quite an easy language to learn in my opinion.
Now, go and learn html, its quite an easy language to learn in my opinion.
Re: Hey Larchy? - MuhnayMedia
Posted by larchy on Sun Dec 14th at 7:18pm 2008
larchy
super admin
496 posts
87 snarkmarks
Registered: Jan 14th 2008
Location: UK
Occupation: kitten fluffer
Posted by larchy on Sun Dec 14th at 7:18pm 2008
You can't use php for designing web pages. It's a backend scripting language that lets you produce dynamic content, arse around with databases etc but you don't actually build pages with it.
HTML isn't really a language tbh, more a loose set of rules. Its made up of containers that work the same way as forum BBcode, eg <b>bold text</b>
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Easy enough? The head tags contain stuff liek the title, let us load stylesheets and also add keyword tags etc. The actual page itself will go inside the <body></body> tags.
You lay elements out using rectangular containers, so think of how you will split your page up like this.
The stylesheet will make it easy for us to control these elements.
The elements we'll use are <div></div> tags, but there are others out there for various purposes.
First thing, lets make a container for the planet graphic at the top of the page:
<body>
<div id="header"></div>
</body>
By assigning an id to the container you can then control it with the stylesheet. Cut the top image of the planet down and save it as header.jpg (or whatever).
Add the following to the stylesheet.css file:
#header {
width: 1000px;
height: 80px;
background: url(header.jpg) no-repeat #000000;
}
That gives our header <div> container the specified dimensions and assigns that image to be its background. The color property is just hexadecimal - #000000 is black. It's the color that will display if the image fails to load, but it's optional.
You'd then just keep going, building up layers of boxes down the page.
You need to have a think about the dimensions of the page, and whether you want fixed width or a page that will be resizeable. The pic you posted would only work as fixed width.
To make a page that is fixed with and center positioned like Snarkpit, you use the stylesheet to control the body tag:
body {
background-image: url(/images/bg.gif);
background-position: center;
padding: 0;
margin: 0;
}
Note here how you can add folders etc for the image path. You could also go down a level by using, background-image: url(./images/bg.gif);
Pay attention to spellings (center is spelled incorrectly for instance.. for me anyway as I'm British :P But only the US spelling will work).
You may also want to learn some character codes. For example Copyright is © which will give you the nice little circle copyright logo ©
The body style rule is also a good place to set things like your overall site font style, by adding say: font-family: Arial, Verdana, Sans-Serif; font-size: 12px; etc
For the navigation background I would slice a thin portion of the image so that you get something that tiles horizontally. You can then create your div and assign the background as follows:
.nav {
background: url(nav_bg.png) repeat-x #000000;
}
This tiles the background image horizontally across the div, letting you save bandwidth by loading only a small image.
Not I used .nav instead of #nav too - the latter is an id and is used when you only have one of a particular element. if you have more than one div called 'nav' then you'd specify a class instead of an id, eg <div class="nav"></div>.
Tbh that doesn't matter as it'll still work - the W3C validator will just have a little cry about it. It whinges about loads of inconsequential crap though.
For the nav navigation itself - ie the home/models/design links I'd do:
<div id="nav_links">
<a href="index.html">home</a>
<a href="models.html">models</a>
</div>
And use:
#nav_links {
float: right;
}
To bung it on the right hand side.
You may need to add some <br /> tags in places (line breaks) between divs and play around.. depends on how you do it exactly tbh.
email me a template of what you want if you want me to do some example page code if you like... it's not a big deal
HTML isn't really a language tbh, more a loose set of rules. Its made up of containers that work the same way as forum BBcode, eg <b>bold text</b>
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Easy enough? The head tags contain stuff liek the title, let us load stylesheets and also add keyword tags etc. The actual page itself will go inside the <body></body> tags.
You lay elements out using rectangular containers, so think of how you will split your page up like this.
The stylesheet will make it easy for us to control these elements.
The elements we'll use are <div></div> tags, but there are others out there for various purposes.
First thing, lets make a container for the planet graphic at the top of the page:
<body>
<div id="header"></div>
</body>
By assigning an id to the container you can then control it with the stylesheet. Cut the top image of the planet down and save it as header.jpg (or whatever).
Add the following to the stylesheet.css file:
#header {
width: 1000px;
height: 80px;
background: url(header.jpg) no-repeat #000000;
}
That gives our header <div> container the specified dimensions and assigns that image to be its background. The color property is just hexadecimal - #000000 is black. It's the color that will display if the image fails to load, but it's optional.
You'd then just keep going, building up layers of boxes down the page.
You need to have a think about the dimensions of the page, and whether you want fixed width or a page that will be resizeable. The pic you posted would only work as fixed width.
To make a page that is fixed with and center positioned like Snarkpit, you use the stylesheet to control the body tag:
body {
background-image: url(/images/bg.gif);
background-position: center;
padding: 0;
margin: 0;
}
Note here how you can add folders etc for the image path. You could also go down a level by using, background-image: url(./images/bg.gif);
Pay attention to spellings (center is spelled incorrectly for instance.. for me anyway as I'm British :P But only the US spelling will work).
You may also want to learn some character codes. For example Copyright is © which will give you the nice little circle copyright logo ©
The body style rule is also a good place to set things like your overall site font style, by adding say: font-family: Arial, Verdana, Sans-Serif; font-size: 12px; etc
For the navigation background I would slice a thin portion of the image so that you get something that tiles horizontally. You can then create your div and assign the background as follows:
.nav {
background: url(nav_bg.png) repeat-x #000000;
}
This tiles the background image horizontally across the div, letting you save bandwidth by loading only a small image.
Not I used .nav instead of #nav too - the latter is an id and is used when you only have one of a particular element. if you have more than one div called 'nav' then you'd specify a class instead of an id, eg <div class="nav"></div>.
Tbh that doesn't matter as it'll still work - the W3C validator will just have a little cry about it. It whinges about loads of inconsequential crap though.
For the nav navigation itself - ie the home/models/design links I'd do:
<div id="nav_links">
<a href="index.html">home</a>
<a href="models.html">models</a>
</div>
And use:
#nav_links {
float: right;
}
To bung it on the right hand side.
You may need to add some <br /> tags in places (line breaks) between divs and play around.. depends on how you do it exactly tbh.
email me a template of what you want if you want me to do some example page code if you like... it's not a big deal
larchy
super admin
496 posts
87 snarkmarks
Registered: Jan 14th 2008
Location: UK
Occupation: kitten fluffer
Re: Hey Larchy? - MuhnayMedia
Posted by G4MER on Sun Dec 14th at 8:26pm 2008
Posted by G4MER on Sun Dec 14th at 8:26pm 2008
Great Post Larchy!
I have used Dreamweaver in the past and cut my template up to make the page. RIVEN has a good page where he used WordPress as a template to post his news and updates, but he used his own front end ( face ) on it to make a whole new page style... but I have no clue how you do that. =)
Anyways yeah Larchy, I'd be happy to email you the template and you can work something up.. would love to see what you come up with.
I have used Dreamweaver in the past and cut my template up to make the page. RIVEN has a good page where he used WordPress as a template to post his news and updates, but he used his own front end ( face ) on it to make a whole new page style... but I have no clue how you do that. =)
Anyways yeah Larchy, I'd be happy to email you the template and you can work something up.. would love to see what you come up with.
Re: Hey Larchy? - MuhnayMedia
Posted by Riven on Mon Dec 15th at 6:49am 2008
Riven
super admin
1639 posts
802 snarkmarks
Registered: May 2nd 2005
Location: Austin, Texas, USA
Occupation: Architect
Posted by Riven on Mon Dec 15th at 6:49am 2008
Well, I guess I should clarify (if anyone cares :P) Muhnay's right about me using Wordpress, but my website page design is completely mine (started from scratch as just html). I installed Wordpress on my server after the fact to save myself time from having to build a completely back-end admin panel posting system with php. All I did to integrate it with my site was search its database table and copy fields of interest to me and make my own recordsets with php that used the same field titles. It works for the most part, but I'm still new at it, and there are some errors, but I tweak it when I can. But my site is not a Wordpress template revamped or anything like that.
-html isn't hard, and especially when you have programs like Dreamweaver, you'll pick it up in no time, if you haven't already.
-End rant, Muhnay's correct, I just wanted to give a little better explanation so that no one gets the wrong idea by Muhnay's description alone about my site. "No Hard feelings" -(said the sentry gun from Portal!)
-html isn't hard, and especially when you have programs like Dreamweaver, you'll pick it up in no time, if you haven't already.
-End rant, Muhnay's correct, I just wanted to give a little better explanation so that no one gets the wrong idea by Muhnay's description alone about my site. "No Hard feelings" -(said the sentry gun from Portal!)
Riven
super admin
1639 posts
802 snarkmarks
Registered: May 2nd 2005
Location: Austin, Texas, USA
Occupation: Architect
Re: Hey Larchy? - MuhnayMedia
Posted by G4MER on Mon Dec 15th at 10:30am 2008
Posted by G4MER on Mon Dec 15th at 10:30am 2008
Yeah Sorry if I misrepresented your site.. I did not mean too.. glad you cleared it up. I thought what you did was rather cool, and I dig the idea.. that is why I was bragging about it Riven.
Re: Hey Larchy? - MuhnayMedia
Posted by Riven on Mon Dec 15th at 1:47pm 2008
Riven
super admin
1639 posts
802 snarkmarks
Registered: May 2nd 2005
Location: Austin, Texas, USA
Occupation: Architect
Posted by Riven on Mon Dec 15th at 1:47pm 2008
Oh yea, don't get me wrong, thanks for the publicity! 
It's not often I get to talk about myself. And I appreciate your admiration! -Thank you
It's not often I get to talk about myself. And I appreciate your admiration! -Thank youRiven
super admin
1639 posts
802 snarkmarks
Registered: May 2nd 2005
Location: Austin, Texas, USA
Occupation: Architect
Re: Hey Larchy? - MuhnayMedia
Posted by G4MER on Thu Dec 18th at 9:38am 2008
Posted by G4MER on Thu Dec 18th at 9:38am 2008
Here is another idea I have for a site.. a Gaming group I want to start. It is meant to be real plain.. but suggestions are welcome.
1
© Snarkpit.net 2001 - 2023, about us, donate, contact
Snarkpit v6.1.0 created this page in 0.0136 seconds.
Snarkpit v6.1.0 created this page in 0.0136 seconds.