Layout Tut Part 2
Okay, this is how I made the layout 'On the Run'. I got the pic from a calendar, which I scanned in (a), and though that it might come in handy.
I wanted a layout that could have both a table in which you could have unlimited text in, but also have a little extra space that could scroll if
necessary, in case the user wanted it. But the catch was that it would have to look as if there wasn't even an extra box, if the user decided that they didn't want it there (b).
The sky was a nice colour, so that was to be the background on the page (e), and I got rid of the trees because they were too distracting. I played around with the black lines, and decided to keep the top of the layout open to keep a sense of space (d), but enclosed the bottom of the table with a gif image border (f), and curved corners for the heck of it (c).

I thought that the easiest way in which to have the scrolling box was to be enclosed in a cell of a table (b), which I marked for the design process, but got rid of the marking when I actually cropped and saved it.
Before cropping, I marked where I was going to crop with a colour that would stand out (g), in this case pink. This just makes sure that I don't overlap or miss out parts of the original image, and in general stuff it up.
I cropped it and named and numbered the pics, so I knew which picture went where.
I opened a new .html file in FrontPage, and whacked the images into tables etc, and then using IE and
Notepad, played around with the CSS, text and fixing up the little bugs that occurred, as well as adding the span styles so that Box 1 scrolled.
That's basically it. I chose the colours for the scrollbar so that they wouldn't look too annoying when the little scrollbar was used in Box 1.
[Back]
|