Welcome to Alli's Layout Tutorial!
Have you ever looked at a
super-awesome-fantastical lookup or petpage that somebody made that seems to have tables made only with images and some sort of
mystical repeating background like this layout? When I was first starting to make layouts, I always wondered how people did it. I could never find a tutorial that would walk me through it.
This tutorial will show you how to make a full page layouts using
images and
backgrounds, and a bit of
CSS.
You can make them with a graphics program, or even MS paint.
This particular tutorial is focused on
petpage layouts.
Information
This tutorial was started on
December 15th, 2008 to help other users.
And it was made by me,
Allison, also know as
ms_pie98.
Feel free to contact me with questions, comments, or whatever, I ♥ neomail.
This tutorial will help teach you the basics of how to make an
easy yet cool looking petpage layout. It will take you step by step in making the images for your layout and coding parts of the layout. If you need other codes that aren't included in this guide, you can refer to
Kitty's Guide for some of the more advanced coding details or things that aren't completely necessary.
Note:Drag the images to your URL bar to see their full size.
Making Your Images
In the layout I will be including in this tutorial, you will need a base image and I background.
The layout and its images will be the style of
the layout of this page.
Your Base Image; Step 1
First, we'll start of with making the image for the top part of your layout.
I'll be making mine in
Paint Shop Pro Photo X2. Sounds fancy huh? Well you can do the same concept in MS paint or any other program, maybe with less detail.
Take a blank canvas. I usually use a width of about
900 pixels and a height of around
500 pixels. You can crop and cut it if you need too.
Your Base Image; Step 2
Then you need to figure out what the image at the top of the page will look like.
I'm going to create a little design just for the purposes of this tutorial.
Leave a little room at the bottom of the canvas.
Yes I am aware that this is
unappealing. It is just for learning purposes. Notice the space I left underneath the image.
Your Base Image; Step 3
Ok, now that we have our main part of the image, we need to add the tables to the image. Take the rectangle or rounded rectangle shape and make a column going from under the image to
off the canvas. What I mean by this, is that we
don't want to see the bottom on the shape. We just want to to be cut off. You can do as many columns as you like, I did 2, but 1 looks good as well.
I suggest adding a border around the tables. Or you can go to layer properties and select 'outer glow' for a cool effect around your tables. You can also add text at the top of the tables.
Your Base Image; Step 4
Alright. Your base image is done. Now we need to make the
background. The easiest way to do this is to first merge your image to one layer if it isn't already. Next, stretch out your canvas so you have extra margins on the side of the image. The grey part is the margin on the image below. This is
NOT a part of your image. It is just a part of your canvas.
Then, take the
rectangle selection tool. Go in the margin, and drag it across the bottom of your image and go all the way to the other side, making sure to only include the columns and not the top base design.
Now that you have your background selected, copy it and paste it as a new selection. The save it. This is what it will look like:
Coding Your Layout
Coding; Step 1
First of all, you need your style tags for all the CSS content.
The first is the beginning tag, and the last is your end tag.
Coding; Step 2
Ok. We're going to add our newly finished
background. We are going to use this code:
I should probably explain this. Ignore the first part that says 'main'. It isn't important. Now look where it says 'body'. You need to replace
HEX CODE with the hex code color of the background of your image. Mine is a light green. Then, you add the URL of your background where it says
URL OF IMAGE. Notice that the repeat part is different from and average background. Instead of having the background just repeat all over the page, our background is going to repeat going
down the page.
Coding; Step 3
Now we are going to add our
image. You could just add your image outside of the style tags alone, but I've found difficulty with it sometimes. So if you want to, you can do this as well. We are going to make a DIV box to add our image in so we can position it wherever on the page that we want. In this case, you aren't going to really move it anywhere, but it assures that it will be in the same spot for everyone. We'll add this code inside our style codes.
This says that it will be positioned 0 pixels from the top, and 0 pixels from the left. That is just what we want. It will
line up with our background.
Now we need to make it show up. We'll put this outside the style tags.
Replace my URL with your URL of your background.
Coding; Step 4
Ok! So now your layout should look like a header with some tables wihout text that run down to the bottom on the page.
Cool, huh? Well, we still need to add tables and everything.
So now on to adding
tables. We'll need 2 tables because we have 2 columns. We need to be able to position our tables. To do that, we'll use this code that we will put inside our style tags.
Here is absolute positioning again! Just like we used in positioning our image. This time we'll be doing a table. This is going to be for the table on the left. You will have to change these to suit your layout. The table with be inside the column in the image we made. In case you need your memory refreshed...
Top: this will tell you how many pixels down your table will be.
Left: this will tell youo how many pixels to the right starting from the left of the page your table will be.
Width: this will change the width of your table. it should be almost the width of your image's column.
After you position your first table, you will need to position your 2nd. We will need a whole new code for this.
Instead of table1 its table 2. Again, position these to fit your layout.
Coding; Step 5
Now we need to adjust our text size/color, borders, backgrounds, and padding for our tables. This is a
class. Add this inside your style tags.
Now to explain a little...
Height: overflow means that the table will get longer as you add more text. We want this for this type of layout.
Next is the font color/face. You can change these to whatever.
Then we have the background color. For this, we want 'none'. It will have no background. Remember, our columns will provide a background for our text so we dont need one. If you want one, you can add one.
If you want both your tables to have these attributes, than you only need one code unlike our IDs.
Coding; Step 6
So now we need our tables to show up. Again, we will use what we used for our image. These will be
outside the style tags.
Again, we use our IDs which position our tables. But now we have a new code, the DIV CLASS tag. This will decide our table's features, like text, borders, and backgrounds. What we entered in our 'table' class.
Now since we have 2 tables, again we need another set of tags.
Notice how the ID changes but the class does not. This is because our IDs are different for both, but our class is the same.
Make sure to end each with 2 end tags.
And you're done!
With these steps, you (hopefully) made an
easy layout. This was just the simple coding; if you want more codes, go
here, to Kitty's Coding Guide.
Feedback?
Need help? Have comments? Questions? Feedback?
Neomail me!
