 |
|
 |
|
 |
||||||||||||||||||
|
Let's Make a Layout The Next part of this is likely going to be the most confusing part and that is adding in the Div Layers. I'll be honest with you, I don't have the exact line of coding memorized, I know most of it, but I copy and paste from my own work everytime I'm going to do a div and I adjust from there. It's easier and takes half the time. You can do it either way you can take the example I give you and copy and paste everytime or you can memorize the exact line.Inside a div line you can add styles and you can give it different properties to make it stand out, we're still basing ourselves in the "Keep it simple, stupid." Category. So let's keep it simple and add in our div. <div id="content" style="position:absolute; width:430px;left: 94px; top: 505px"> Now the blue area is all trial and error, or if you're really specific you can measure it out in the program your using. I stick to trial and error, it's easy then playing with the rulers.
Before you can preview you need to close your div, and add some content. It's very hard to test the accuracy of a div layer without some content.
Hey there! I made this layout using Misty Ice Design's "Let's Make a Layout!" Tutorial and you can too!
Once these are set it's best to save, and make sure they are right, tweaking them until the layout's content is where you want it. Note, it's best to make sure what content you do test with is long enough to test the width. You want it to be just right for you. Looking at it our code should look like this:
And a preview of the site so far looks like this:
The next move is adding in the second Div layer, this div layer is for the links. So once again we're going to take our code <div id="links" style="position:absolute; width:200px;left: 536px; top: 75px"> Also because we're going to test we're going to include this part: Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link
If you notice in the previous div line the div id was labelled content. This one is meant to be for links so we're going to call it links. Just remember to label what your divs are.
Now it's possible to fix the div's and making them scrolling div's but we're not doing that in this lesson. At this point our code should look like this:
And a preview of the site so far looks like this:
That pretty much covers the Div Layers, our layout is starting to make sense, and starting to shape nicely. The next part we're going to move into is the CSS, the CSS is where we're going to make the layout start to come together. So onto the Next Part! Let's Make a Layout Part One :: Getting Started
|
