Note: This is a more advanced tutorial for people who have mastered my beginner div layer tutorial.
Again, this might not be 100% W3 approved coding, but it will work for you anyway.
You will need:
Notepad
Imageready
In my div layer tutorial, I went through how to make a simple div layer design.
However, this div layer design that I have once often used has a few limitations.
1) The positioning and padding of the div layer looks different in other browsers, so what looks nicely positioned in Internet Explorer looks weird on Firefox.
2) In a div layer type design, if you have borders around your text area (this will be better illustrated with the tutorial example), you can't make the borders as tall as your content.
3) It is difficult to centralise content using div layers.
Tabling is hence much better for more professional kinds of web designs, but much more complicated as you require the usage of Imageready. (Actually you don't have to, but it will be much easier than Imageready and I don't have much time to write this tutorial soooo...)
On to the tutorial!
Okay, let's say I want to code a skin for the design below:
There is a main image, some buttons below and a huge content area. I want the skin so that the content area resizes itself to fit the content, so that means no internal scrolling.
1) First we decide how many rows there are in our table.
There are 5 rows (but it really depends on your design):
1st row: The main image + the divder between the main image and the buttons
2nd row: The buttons
3rd row: The divider between the buttons and the content area
4th row: The content area
5th row: The footer (the grey row after the content area)
With this in mind, let us open the image up in Imageready. To export it from Photoshop, click File - Edit in Imagready.
2) We divide the rows using the slice tool
- Click on the slice tool in Imagready (2nd row, the knife on the left)
- Right Click in anywhere on your design and select "Divide Slices".
A table should pop up like this:
Since we have counted 5 rows before, enter 5 for the "divide horizontally" bit and ignore the rest for the moment.
Hit OK.
There should be quite a few yellow lines appearing on your design, move them so that they fit exactly to the boundaries of the different rows, like below:
3) Dividing the buttons
Well, if you have noticed, we can't only just divide our design into rows. If you have noticed, the buttons need to be seperated from each other as well as the grey border from the sides, so for the second row, which is the buttons row, we must further divide it into 7 columns. (5 buttons + 2 border at the sides)
To divide the buttons row, select the buttons row by clicking anyway on one of the buttons. It should be highlighted and everything other row should be faded. Click again if this doesn't happen.
When it does, right click on the buttons row, select "Divide Slice" again, but this time, leave the "divide horizontally" bit at 1 and change the "divide vertically" bit to 7 as shown below: (leaving everything else the same)
When you are done, move the new yellow lines formed to their positions at the boundaries of the buttons and borders.
4) Seperating the content area from the borders
We want our content area only to be the purple thing, if not we will get words all over the grey borders.
So we repeat something similar to the above step, but instead, we divide the 4th row into 3 columns, 2 for the borders and one for the content area by right clicking on the content area row and dividing slices again:
After which we drag the yellow lines again to match the boundaries of the borders.
5) Getting the code and images
Now we're done with the slicing! Give youself a pat on the back. But we have to get the code right? And Imageready slices the design up into rows and columns of seperate images, and we have to get those as well.
So click on File - Preview In - Internet Explorer (or whatever Internet browser your have)
And a webpage will appear with a preview of your template! Scroll down to get your code and paste it in Notepad
- Delete away the xx.htm bit after the whole string in the URL.
- This will bring you to another webpage which displays a folder that says "images"
- Click on that, and it will bring you to this:
It will display all the images that Imageready has "sliced" for you.
To save the images, right click on any one of them, and click on "Save Link As..." or "Save Target As..." and save it to your /images folder on your domain or wherever you're keeping these files. Upload the images if you are like using free servers like blogskins.
6) Coding your skin
Now we get to the coding part. For this skin, the code looks like this:
The first thing you might think of is like, WHOA which image represents which?
So you look at the images that you have saved to get a rough idea of what each image is. Basically the images are in order of row then column, like reading a book from top to bottom and left to right.
So 01 is the main image, 02 is the first border on the 2nd row, 03-07 are the buttons, 08 is the end border on the 2nd row, and etc.
Now we stop to think. The buttons must be linked to somewhere right? So we change the buttons code from
to this:
Basically we have just changed all the buttons to image links!
Next, we must think again. We want the content area to be expandable right? And we want to be able to put content in it right? The content area row is the 4th row, with the images from 10-12.
So we change the codes from 10-12 from this:
to this:
Basically, delete away the img src and add a background to the td tag, and add a height="100%" element so that this area will be expandable according to the length of the content, and valign=top to make sure the content starts from the top. Remember to keep the widths in the td tags if not your whole table layout will look screwy!!!
Once you add in your style tags and do up all the content, you are done! Yay! To get a preview of this skin, click here.
FOOTNOTE FOR BLOGGER USERS
This skin has links, but in blogger, your links can't be seperate pages, so I suggest you read my dynamic box tutorial to incorporate links.
