coding a basic layout
Ok I get asked this question a lot so I'm making a very basic tutorial which will hopefully help those first time site builders. I will
refer to two other of my tutorials which you'll need to read to help you understand this one.
The first thing I made was my header in Photoshop. Now if I'd made the whole layout design in that one jpg
file it would have taken a long time to load, which generally puts people off visiting your site, if they have to wait more than a couple of minutes to view anything.
So I generally make what's called a background image. I've cropped a few pixels
height and the whole length of the bottom, which when repeated, shows the
background style.
Ok so I've now got my header.jpg and my background.jpg so I'm ready to code.
Now the page I'm making will be called header.php and if you now look at my 'Div Layers' tutorial you'll understand why this page will be called header.php.
So we'll open the page with the following code.. explained below.
So we open the html document, open the head, which gives the information that the site title is Misplaced. We then link the stylesheet, which gives all the information on the type and colour of text/background etc.. you can read my stylesheet tutorial which will explain how to make that. We then end the head information.
Next we have the information for the layout design. The body tags shows that the background to my page is my background.jpg. Which will be repeated over and over as long as the page is. Next I have my img tags showing the header.jpg and the size its to be displayed at. As this is the first coding of the page the header will display at the top.
So now we need to add div layers and our text!
Ok you can see above I've opened a div layer. Which is like a text box.... it allows me to position it anywhere and size it how I want. So I've called this div 'nav' because it's for my navigation. The style shows how big and where I want it to be on the page. We then have the align code.. showing I want my text in this layer to be aligned to the right.
My <b> tags show I want the title in bold, and my <u> tags show I also want it underlined. <br> is like return, it takes you down to the next line. So I've used two after 'Navigation so I can create a line before the links start. As you can see I've got my pages linked. <a href is the code for the page you wanted opened when people follow a link. So we start <a href="newart.php">Recent Additions</a> This will show the words 'Recent Additions' and if people click it they will go the page newart.php.
So I've continued with a few menu examples, the more you see it the more it become second nature when you think about how to insert a link.
I've then closed my div layer </div> anymore text I want in there would have to go above that.
Now for positioning the div layer that will show my content. If you did read my div layer tutorial you'll see why after I create this div layer I will be leaving it blank. As the header.php is just the background and the other pages all link to it, they will all open in this div layer. Which makes changing a layout great as you only have to do it on one page instead of all of them!
So I've named this div layer 'content' and positioned it in the space under 'your site name'. I'm going to explain positioning a little here. There is nothing that tells you what the numbers are to put in when you are positioning. It's very much trial and error to start and then when you do it more often you are more able to tell what a certain distance is. Photoshop helps a lot a first, as you can take your image and crop parts, to leave you with the width you want and then find what it is through the image size. The height doesn't matter so much as this type of div layer will just keep extending in height depending on how much text there is to show. It will never cut it off.
Now we don't need any other coding on this page. We haven't even ended the div layer and that's explained in my div layer tutorial. So I hope this helped those of you who are just starting out. Believe me it does get easier or we wouldn't enjoy web building like we do! It's like learning another language. So give yourself time to absorb it and you'll get their I promise!
Another site I must recommend at this point is Lissa explains it all. As this girl explains html so simply it's sure to help you along :)