Liven Up the blank areas of browser windows with a background.
If you look carefully at this page, you will see that it has a background that extends right across the screen. Furthermore, traces of the background can be seen in the actual pages, making the background an integral part of the site design.
This effect is easily achieved in WEBPLUS. All you need to do is specify a solid colour,or create a repeating graphic that can be either tiled, horizontally or vertically across your pages. The one we used in our explanation below is available here.
This example uses a 2000 pixel wide graphic that’s only 2 pixels high. Its size is only 1.11 Kb. By using this image in the Image background feature of WEBPLUS, it repeats horizontally in the background to accommodate any page length. The reason we made it 2000 pixels wide is to allow it to work well on a wide range of monitor resolutions. So, how did we create this graphic? Simple!
We started with a blank page in our WEBPLUS application and drew a box 1000 pixels wide by about 20 pixels deep. We then filled it with a solid grey colour and made the outline transparent.
We next applied a Graduated transparency effect going from left (solid) to right (transparent). It looked a bit like this:
We then copied the image and pasted the copy to the page. With the copy selected we selected Arrange/Flip Horizontal to create a flipped version of the image as illustrated below:
The next step is to align the two images horizontally with the transparent ends of each image meeting at the centre as shown below.
You can use the WEBPLUS align tool to do this perfectly. Once the two images are aligned, select both images and group them into a single image.
Select the grouped image, and in the Transform area of the Studio Tabs, change the height of the image to 2 pixels. With the image still selected go to File/Export as Picture and save the image as a JPG.
Once you’re sure it’s saved ok, delete the image from your page.
Now go to Tools/Scheme Manager. In the dialog that opens, click on the edit tab. You will see an option where you can change the background of your pages. Check the “use picture” checkbox and browse for the image you just exported. Click OK and you’re done.
You will now see that the background to your pages will have a graduated design. When you create actual site pages, the background will be obscured by your page elements. If you want to create content areas (as in this site) where the background pattern still shows through, simply create rectangular boxes on your master pages and apply a fill. Alternatively, specify an On Page colour in the Tools/Scheme Manager dialog. This will create a solid page colour for your site pages, allowing only the background image to show in the screen space on either side of your pages.
You can also use this technique to create vertical repeating graphics, however, you must be sure to make the graphic long enough to cater for your longest page length. If you don’t, the graphic will start repeating again on longer pages, which produces a very amateurish effect.
There are two on-
Both links will open in a new window. Have Fun!