Surveying Your Layout
Preparing to slice is sort of like devising an action plan, or timetable to slice your layout with. For professionals and the experienced, this part is normally skipped as after a few practises it comes naturally to you. (Something natural on the Internet, you say? Never!)
First of all, you should be thinking what techniques and CSS properties you'll be using, and then second, you should be thinking how you can get the loadtime and code to be as efficient as possible, regardless of browser and broadband connection used.
You can keep your layouts efficient by utilizing the handy little attribute in CSS called background-repeat. This is especially handy for those long gradient bars, or repeating patterns. Why? Because you let the user's browser do the work - not the their modem. You can spot where to use background repeating by just looking out for images or regions of your layout that repeat. Simple.
We're going to look at the header first, as it comes right at the top of the page. As you can see in the image below, there are only two images for this region of the template, which are the logo and the gradient bar below that.
We can use repeating on the gradient bar, by setting it to repeat across the x axis. If you've been taught basic maths or graphs before, you'll know that the x axis goes horizontally. The logo can be scaled down to a smaller image just containing the pixels that make up the square and the text. The rest can just be whitespace.
For the content area, we're having three columns. But first we have to take into account that it's a section within itself. So, we can have three columns inside one parent node. For those of you who aren't familiar with that term, it's another word for parent - and in this case, it would be a parent, or container element. The two side columns can float left and right respectively, leaving us with a wider column remaining exclusively for the content. As for the boxes and headings, they can each be contained inside the relevant column.
We're not quite finished for this section yet - we have to take into account the detail in the form of the two headings in those floating columns.
Ouch. Because of that small irregularity on the left hand side, it's made things a little bit more complicated - though not by much. This can be fixed by adding another floating element before the text that we'd ideally put in this little rectangle, containing a background image of the hollow rectangle. The rest can be a repeating image of the gradient.
Notice how we have the alternating grey and white background on the left? This can be pulled off by styling a list for the links on that section. Not only is this a great way to use different background colours for this section, it also forms the foundation of semantic coding.
Now for the final piece of the layout - the footer. Well, this looks pretty simple, and it is. Another repeating background and we're done.
Now we're done surveying the layout, it's time to set up our webpage in our favourite code editor. Since I'm an inexperienced, bloatware using moron, I'm going to be using the infamous Macromedia Dreamweaver 8 to demonstrate this for you. For those of you who are simply too clever or have too much pride to use such a program that is blasphemous to the concepts of web design, feel free to open up Notepad, Crimson Editor, Vim, Emacs, or some sort of raw text editing program.
..with my mini rant over, without further ado we shall progress to step three: page setup.