If you use Dreamweaver there is an option to setup a tracing image to put under the design view's rendering of the webpage ("Modify > Page Properties... > Tracing Images"). This method is really rather limited though: -
- it relies on Dreamweaver's own built in webpage render
- the tracing image is not rendered in a browsers and so can not aid cross-browser checking
- the tracing image is below the webpage and so it becomes obscured as the page content is built over the top of it
I have just completed the Metafocus Global Internet Marketing website and I must say, I am rather pleased with the results. Significant reasons for my pleased-ness are the excellent designs provided to me by Andy, our designer, and the templating system that I am now going to describe.
It is a really a simple method: -
- save the template image as a jpeg if it isn't already
- use css styles to set the image as the <html> tag's background-image
- change the <body> tag's opacity on the fly, using css styles
Example CSS
htmlThe opacity attribute (0 to 1) is used to change the opacity value in all standards compatible browsers and the filter attribute (0 to 100%) is used to change the opacity in IE.
{
background-image: url(images/template.jpg);
background-repeat: no-repeat;
}
body
{
background-color: #FFF;
opacity: .7;
filter: alpha(opacity=30);
}
...and as an added bonus you can set the body opacity to none and watch as your friends, family and workmates scratch their heads trying to figure out why the links aren't working :p
No comments:
Post a Comment