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
bold text
<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">
home
models
</div>
And use:
#nav_links {
float: right;
}
To bung it on the right hand side.
You may need to add some
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
It's not often I get to talk about myself. And I appreciate your admiration! -Thank you