Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
bandwidth
bandwidth
bandwidth
You can make flat colored rectangles and lines without having SiteSpinner create image files for them. Because the methods shown below (mostly!) generate pure HTML which uses less bandwidth, your published page should load faster and more cleanly. The bigger the rectangle, the greater the savings you make.
Basic rectangle object
You can avoid an image file easily by using a basic rectangle, with each side of 5 or more pixels. Here's how:
The shading must be flat and not any kind of gradient fill. If you want a gradient fill, you will still need some kind of image file. In this case, SiteSpinner will make one anyway, regardless of how you set Anti-Alias and Re-Render
Use these cheap rectangles anywhere you need a simple colored rectangle. Put them behind text objects. By making the rectangle considerably larger than the text, you can have a much wider colored border than you would get with a text object alone.
Basic rectangle object
You can avoid an image file easily by using a basic rectangle, with each side of 5 or more pixels. Here's how:
- Create a rectangle of the size you want
- With the Quick Editor > Object tab, uncheck Anti-Alias and Re-Render
- With the Quick Editor > Shading tab, add a flat shading of whatever color you like
- Optional: add a border of whatever color you want (Quick Editor > Outline tab)
The shading must be flat and not any kind of gradient fill. If you want a gradient fill, you will still need some kind of image file. In this case, SiteSpinner will make one anyway, regardless of how you set Anti-Alias and Re-Render
Use these cheap rectangles anywhere you need a simple colored rectangle. Put them behind text objects. By making the rectangle considerably larger than the text, you can have a much wider colored border than you would get with a text object alone.
No border
3-pixel wide red border
Aside -- a note about the captions:
The captions are standard text objects with centered text. The y-scale in the Quick Editor > Object tab is set to 0.80. This avoids the text editor resizing the captions if they are changed in future. The one-pixel border is added from the Quick Editor > Outline tab.
The captions are standard text objects with centered text. The y-scale in the Quick Editor > Object tab is set to 0.80. This avoids the text editor resizing the captions if they are changed in future. The one-pixel border is added from the Quick Editor > Outline tab.
Basic text object with a yellow background. Set the background color in the Quick Editor > Shading tab.
There is some difficulty in getting decent margins.
There is some difficulty in getting decent margins.
Here is a no-color text object placed on top of a cheap rectangle. By adjusting the size of the rectangle, and the text position, you can have whatever width margins you want.
Use the 'To Back' buttons on the bottom toolbar to set the rectangle behind the text.
Use the 'To Back' buttons on the bottom toolbar to set the rectangle behind the text.
You can avoid image files only for rectangles with sides of 5 pixels or more. If you try to go smaller, SiteSpinner will create an image file, regardless of your other settings.
In many cases this does not matter, as the image files created will be quite small. But if you want to squeeze a few more hundred bytes out of your page, read on.
In many cases this does not matter, as the image files created will be quite small. But if you want to squeeze a few more hundred bytes out of your page, read on.
Lines
Let's call any rectangle with either side four pixels or less a 'line'. For our purposes here, even a small rectangle 4x4 or less will still be a line.
Let's call any rectangle with either side four pixels or less a 'line'. For our purposes here, even a small rectangle 4x4 or less will still be a line.
To make lines that don't create image files, you have to be a little more devious. Instead of starting with a rectangle object, start with a 'code' object:
- Create an empty 'code' object by pressing the Code button on the left-hand toolbar. You can also use text objects for vertical lines but not horizontal.
- Press 'Save and Close'. This leaves an empty rectangle on your page
- Resize to whatever size you want. You can resize beyond 5 pixels -- this creates the same published HTML code as would a rectangle. More on resizing below.
- With the Quick Editor > Shading tab, add a flat shading of whatever color you like
- Optional: add a border of whatever color you want (Quick Editor Outline tab) I have not tested lines with borders
For vertical lines keep these values at 1.00
Set the width of the line in the Quick Editor > Outline tab. Here is a set of lines from eleven pixels wide down to one pixel wide made just by setting the width:
In workpage view, each line will display as one pixel wider than it should. It will display correctly in the preview/publish mode you see here.
Horizontal lines
There are bugs in SiteSpinner V2.50f which make horizontal lines made the same way as verticals impractical. However, there is another way -- set a basic height of say 20 pixels for the line then apply an appropriate y-scale factor. To calculate the scale factor use this formula:
Scale Factor = Required Height/Base Height (both in pixels)
If you want a 3 pixel line, your required height is 3 and base height is 20 pixels. Plugging these values into the formula gives a scale factor of 3/20 or 0.15. Enter 0.15 into the y-Scale field of the Quick Editor > Outline tab shown above.
Here is a set of horizontal lines made using this method.
There are bugs in SiteSpinner V2.50f which make horizontal lines made the same way as verticals impractical. However, there is another way -- set a basic height of say 20 pixels for the line then apply an appropriate y-scale factor. To calculate the scale factor use this formula:
Scale Factor = Required Height/Base Height (both in pixels)
If you want a 3 pixel line, your required height is 3 and base height is 20 pixels. Plugging these values into the formula gives a scale factor of 3/20 or 0.15. Enter 0.15 into the y-Scale field of the Quick Editor > Outline tab shown above.
Here is a set of horizontal lines made using this method.
Wanted height (pixels)
Calculated Y Scale Factor
Actual height
(pixels)
(pixels)
Workpage view matches the published view you see here
10
9
8
7
6
9
8
7
6
0.50
0.45
0.40
0.35
0.30
0.45
0.40
0.35
0.30
11
10
9
8
7
10
9
8
7
5
4
3
2
1
0
4
3
2
1
0
0.25
0.20
0.15
0.10
0.05
0.01
0.20
0.15
0.10
0.05
0.01
6
5
4
3
2
2
5
4
3
2
2
All these lines have a base height of 20 pixels -- the displayed height is controlled by the y-scale factor.
These lines publish/preview 1 pixel higher than the calculated size indicates. The workpage view is the same. I have tried to show this in the lists above.
The one pixel discrepancy will become an issue only with very narrow lines -- for thicker lines, you will operate in WYSIWYG mode
The line that should be one pixel high is actually 2 pixels. If you try to reduce the scale factor further, you will still get a line of 2 pixels height. The bottom line above has a scale factor of 0.01, but still comes out at 2 pixels.
These lines publish/preview 1 pixel higher than the calculated size indicates. The workpage view is the same. I have tried to show this in the lists above.
The one pixel discrepancy will become an issue only with very narrow lines -- for thicker lines, you will operate in WYSIWYG mode
The line that should be one pixel high is actually 2 pixels. If you try to reduce the scale factor further, you will still get a line of 2 pixels height. The bottom line above has a scale factor of 0.01, but still comes out at 2 pixels.
You can butt lines together like this too. No problem with the joins.
One pixel horizontal line (no image)
If you like messing with code, you can actually get a line that is truly only one pixel high, that also does not generate an image file. Like this one:
If you like messing with code, you can actually get a line that is truly only one pixel high, that also does not generate an image file. Like this one:
To do this, I started with a basic line set to two pixels high. Then I used a little bit of javascript to set the line height to one pixel. The code does this:
- Identify (find the internal object name) for the basic line. It uses the object name of my line -- 'obj2067',
- Set the new height for the line -- in this case 1 pixel.
<SCRIPT type="text/javascript">
line = eval("document.getElementById('O'+'obj2067')")
line.style.height=1
</SCRIPT>
line = eval("document.getElementById('O'+'obj2067')")
line.style.height=1
</SCRIPT>
To apply this to your own line, do this:
- Copy and paste the above code into a Code Object.
- Set CSS positioning off (not essential, but saves some bytes)
- Change the obj name in the code to match the actual name of your line
- Position the code object in front of the line in the code -- use the To Front button on the bottom toolbar. For more detail see Z-Order. In order to set the new height for the line, the line must first exist in the published code -- setting the code object to the front ensures this.
I have done this just to demonstrate that it can be done in code, and also that it works for the big four browsers: IE6 Netscape, FireFox and Opera.
An image file of a thin line only one pixel high is going to be quite small in terms of file size. A code object like this one here may well be more bytes, especially if you leave CSS positioning on. So you gain nothing in terms of bandwidth by doing it in code. You may consider however, that getting rid of an image file is worthwhile. If you have multiple lines you can reuse the same code, so there are some economies of scale
Here is an image of a set of lines used elsewhere on this site. I have optimized down to a 2 color png8 file and it is only 377 bytes in file size. To turn this into code is hardly worth the effort.
An image file of a thin line only one pixel high is going to be quite small in terms of file size. A code object like this one here may well be more bytes, especially if you leave CSS positioning on. So you gain nothing in terms of bandwidth by doing it in code. You may consider however, that getting rid of an image file is worthwhile. If you have multiple lines you can reuse the same code, so there are some economies of scale
Here is an image of a set of lines used elsewhere on this site. I have optimized down to a 2 color png8 file and it is only 377 bytes in file size. To turn this into code is hardly worth the effort.
Mouse here to see the lines
One pixel horizontal line (with image)
If you want a one-pixel horizontal line and you don't mind having an image file, it is still not immediately obvious how. Here are two ways.
If you want a one-pixel horizontal line and you don't mind having an image file, it is still not immediately obvious how. Here are two ways.
Method 1
- Create a rectangle object without a border
- Color it to your line color
- Set a height of 20 pixels
- Scale the y-dimension to be 0.05
- Set the rendering file format to 'png' (Geometry Editor). This generates an image file much smaller than pn8 or gif format.
- Set re-render and anti-alias off. Surprisingly, if you set re-render on, the line disappears from your workpage -- and preview generates a completely blank 2-pixel high image. (A bug?).
Method 2
- Create a rectangle object without a border
- Color it to your line color
- Set the rendering file format to 'png' (Geometry Editor). This generates an image file much smaller than pn8 or gif format.
- In the Quick Editor, set a height of 0 pixels (You cannot set 0 when you first create the rectangle)
- If you check later, you will find the height has gone to 1.
Links not possible from empty code or text objects
You cannot make links from empty code or text objects. If you place some text in a text box, you will find the link will work only when you hover over the actual text. This is not satisfactory if you want to link from any part of the rectangle. If you want a link in a case like this, you will need to use a rectangle object.
You cannot make links from empty code or text objects. If you place some text in a text box, you will find the link will work only when you hover over the actual text. This is not satisfactory if you want to link from any part of the rectangle. If you want a link in a case like this, you will need to use a rectangle object.
Mouseovers are possible
Mouseovers work with these rectangles and lines just as they do for any other object.
Mouseovers work with these rectangles and lines just as they do for any other object.
Groups are possible
You can include these rectangles and lines in groups, just as you would any other object.
You can include these rectangles and lines in groups, just as you would any other object.
Using the HTML <HR> tag
Using <HR>, I have set a horizontal line at the bottom of each page on this site. Details here.
Using <HR>, I have set a horizontal line at the bottom of each page on this site. Details here.
Problems?
If you resize lines by dragging, this will alter the scaling.
Use scaling only when you have to. For vertical lines, there is no real need for a scale other than 1.00. For thin horizontal lines as I have suggested above, you have to scale, so you may meet some strange problems -- e.g. lines that you can't deselect.
For thin horizontal lines, don't rely on the height setting. Do scale down from a thickness like 20 pixels. Without this, horizontal lines may not hold their shapes.
Very thin lines can be hard to select on your workpage -- your mousing has to be pixel perfect. I find it quite useful to make a marquee around the object and so select it that way.
Very thin lines are hard to resize with the mouse. Try the zoom function. Or, you may find making settings in the Quick Editor more to your liking.
If you can't see thin (1 pixel) lines on your workpage, set hi-render on.
If you look closely at the image files SiteSpinner generates for horizontal lines, you will find they are one pixel higher than they normally display. The extra line of pixels, in the background color, is normally no problem, but it may become one if you want to re-use the same image on a different background.
If thin-line images are missing from your site, the display you see depends on the browser e.g.
If you resize lines by dragging, this will alter the scaling.
Use scaling only when you have to. For vertical lines, there is no real need for a scale other than 1.00. For thin horizontal lines as I have suggested above, you have to scale, so you may meet some strange problems -- e.g. lines that you can't deselect.
For thin horizontal lines, don't rely on the height setting. Do scale down from a thickness like 20 pixels. Without this, horizontal lines may not hold their shapes.
Very thin lines can be hard to select on your workpage -- your mousing has to be pixel perfect. I find it quite useful to make a marquee around the object and so select it that way.
Very thin lines are hard to resize with the mouse. Try the zoom function. Or, you may find making settings in the Quick Editor more to your liking.
If you can't see thin (1 pixel) lines on your workpage, set hi-render on.
If you look closely at the image files SiteSpinner generates for horizontal lines, you will find they are one pixel higher than they normally display. The extra line of pixels, in the background color, is normally no problem, but it may become one if you want to re-use the same image on a different background.
If thin-line images are missing from your site, the display you see depends on the browser e.g.
- IE does not display anything
- FireFox displays a line in a dark grey color. (This will certainly cause confusion -- I made a red line but it shows grey???)
About the bugs
In playing with thin lines 4 pixels and less, I have been testing SiteSpinner right at its limits. Consequently some bugs in SiteSpinner have shown up. (Ver 2.50f)
The folks at VM have never approved of what I have done here -- their story has been that thin lines require image files for good cross-browser compatbility.
My findings are that thin lines with or without image files work perfectly well across the big four browsers, without discrepancies. I think the real limitations are currently in SiteSpinner, but that we can expect this to improve in future releases.
In playing with thin lines 4 pixels and less, I have been testing SiteSpinner right at its limits. Consequently some bugs in SiteSpinner have shown up. (Ver 2.50f)
The folks at VM have never approved of what I have done here -- their story has been that thin lines require image files for good cross-browser compatbility.
My findings are that thin lines with or without image files work perfectly well across the big four browsers, without discrepancies. I think the real limitations are currently in SiteSpinner, but that we can expect this to improve in future releases.
