|
There are so many techniques and methods available to create a user friendly
website. The first one is by using a server side routine or print stylesheets.
The print version may strip out images and navigation that lose their meaning
on the printed page and may show the page in a single column using a dissimilar
font with a different size.
When there is no printable version or the printable version includes ads or
other settings, you can use stylesheets. With CSS awareness plus some web development
tools, you can easily create your own formatted print versions. The tool you
may need involves Mozilla Firefox. If you don’t have it yet, you can install
Chris Pederick’s Web Developer’s Toolbar.
Various techniques are utilized in order to expose the grid of the website,
segregate the element containing the content you want, use CSS to format the
page with suitable font sizes, widths, and margins, use CSS to selectively show
and hide the other parts of the page as you see fit and save the CSS to create
an immediate custom printable view.
To easily take an X-ray of the site, use the web developer’s toolbar.
After that, use the Outline Block Level Elements or Outline Table Cells to outline
the site’s grid then use View ID and Class Details from the Miscellaneous
menu.
To isolate the target, set the container and its descendants to be visible,
and then move to the top of the editing area and hide everything. But before
you do this, you can first change its background color, format the texts, change
fonts or its border properties so that you can easily identify it. Use the Boxes
and Arrows to do this.
When you already achieved your desired look, save your user stylesheet. In
cases where you return from Print Preview and the area is vanished, you have
to reload to continue with modifications. You can use Load to import your CSS
file into the editing area.
If you want to create some space, the difficulty lies on how to distinguish
between one div or table and another. To remedy this, you can create a rule
in the editing area to place margins around the various containers which are
dependent on the layout. If you have difficulty in identifying any target on
the page, you can use the View Style Information from the Information menu.
Your cursor will turn into a crosshair. Stay close over the elements in your
page and the status bar will tell you where in the DOM tree the element is placed.
The editing CSS feature of Chris’ tool doesn’t work in Mozilla for
the reason that its sidebar implementation is dissimilar than Firefox. However,
if you desire to use Mozilla, you can use Firefox to edit and save the CSS and
then use Add User Style Sheet from the Miscellaneous menu to apply the styles
you saved.
About the Author:
For additional information and comments about the article you may log on to
http://www.printingquotesonline.com |
