Earlier in the week I received an e-mail asking me if it would be possible to have horizontal lines extending right across a page in iWeb. Obviously you can use the shapes menu to draw a line (or lines) within the permitted area in iWeb, but if you want to extend the line right across the page outside of the set page area how do you do it? The answer is clever use of the background settings within iWeb’s Inspector.
Take a look at the image below to see what we are trying to achive. In the first image you can see the web-site as it stands now with the horizontal lines which make up the top and bottom of the box stopping at 800px width. What we want is those 2 horizontal lines extending to the edge of the screen.
To begin with you need to have your page designed in iWeb. That’s the easy part. Next you need to know the height of the box (ie the distance between the two horizontal lines). In addition, you need to know how far from the top of your page the top of your box is.
The best way to get these measurements is insert a rectangle shape from the Shapes menu, drag it to the correct height and then check in Inspector, using the Metrics tab; make a note of its properties.
Next thing to do is open your favorite image editor (Photoshop, Pixelmator, Gimp etc) and create a new image that is very tall (2000px at least) and narrow (100px is good, 50px is better).
Set the background to the same color that you want for your site and then draw the 2 horizontal lines, making sure to set them at the correct height on the image. Finally save the image with a suitable name.
Going back to iWeb, open Inspector and select the ‘Page’ tab.
In the section for the Browser Background choose image from the drop down menu and find your image within the Finder window.
Next choose ‘Tile’ from the other drop down and your lined image will spread across the page, lines and all!!
How easy was that? As an aside, I was also asked in another e-mail how to get a gradient fill on the background to an iWeb site. Within the drop down menu for ‘Page Background’ it is easy but not with the ‘Browser Background’. Using the method explained above (just leaving out the horizontal lines) you can create a long thin image that has a gradient from top to bottom and apply that as a background to the Browser.
Have you got a tiled image on your iWeb site? Why not leave a link and let us take a look.