| Create Resizable FlipBook |
| 1 : What is Auto Page resizing |
| |
You can create FlipBooks incorporating html pages that will scale to fit the size of the window when viewed
using FlipViewer®. Both the text and graphics/photos will resize to fit on the size of the window when the page
is viewed using FlipViewer®.
Also the FlipViewer® contents will look the same in any display resolution.
|
| |
| 2 : What kinds of pages can be resized? |
| |
|
All HTML pages can be resized. These html pages may contain links to other pages on the Internet or be to another
page on the same book. These html pages can contain text, graphics, photos and music. However there are certain
design guidelines to be met.
|
| |
| 3 : What are the design guidelines? |
| |
|
Each html page that require auto-resizing has to have a Javascript file linked to it. This means that Javascripting
option must be selected in IE. These html pages must also not contain tables to be used for positioning.
Positioning must be achieved by using <DIV> layers.
Font Size must be defined in pixels.
|
| |
| 4 : How to build auto resizing page |
| |
| It is simple to build auto resizing pages. Just follow these step by step guides. |
| |
| Step 1 : Add in the Javascript |
| |
|
First plan the Default FlipBook Size which is the screen resolution you want to design and create the flipbook in.
This will determine later which Javascript to use. If your Default FlipBook Size is 1024x768, then you must
design your page within a 410 pixels by 520 pixels area.
If your Default FlipBook Size is 800X600, then you must design your page within a 300 pixels by
380 pixels area.
|
| |
| Step 2: <DIV> Layers |
| |
|
Positioning in resizable pages are achieved using <DIV> tag layers and CSS.
Create each text box or graphic box as a <DIV> layer.
In HTML editors like DreamWeaver, there are menu items which you can select to place a layer into the page.
Once placed you can resize the layer area and position them into the absolute position that
you want that layer to be.
In each layer are then placed your text or image or any other HTML tags you wish. We recommend that you place
text of the same font size in its own layer. Also images should be placed in their own individual layers.
If you are using a text editor, it is also very easy to insert DIV layers. However, you may need an IE browser
to view your efforts.
Example:
<DIV ID="Layer1" align="left" style="position:absolute;
font-size: 12px; top: 0px; width: 100px; height: 20px;>Some text
here</DIV>
View sample here
Do not use nested <DIV> tags. These tags may be automatically be inserted by HTML editors.
|
| |
| Step 3 : Text Fonts in <DIV> |
| |
|
To specifiy the font size in layers, it has to be defined in the layer tag under the style attribute. You should
not have font sizing tags within the layer. This will NOT allow the text resizing to work.
Other font attibutes may be included in the text layer.
Example:
Use 9px instead of font size number=1
Use 12px instead of font size number=2.
|
| |
| Step 4 : Images in <DIV> |
| |
|
To insert images, do the same like text layers. However, the image size properties has to be defined in percentages.
The 90% is used as safeguard so that the image is never bigger than the layer size.
The choice of using 90% for width or height is dependant on the image being long or tall.
The images will expand in aspect. If the html page is stretched out horizontally but not vertically,
the layer container will also only expand horizontally. But the image, if defined by its width,
will expand horizontally and vertically. This may cause tha image to go out of the layer's bounds.
Example:
<div id="Layer1" style="position:absolute; visibility:visible;
width:52px; height:52px; z-index:1"><img src="/media/images/add.gif"
height="90%"></div>
View
sample here
|
| |
| Step 5 : The Javascripts |
| |
|
Depending on the resolution that the page is designed for, insert these tags in the <head></head>
section of the html page. For 800X600 resolution:
<SCRIPT LANGUAGE="Javascript" SRC="http://www.FlipViewer.com/js/flipstretch.js">
</SCRIPT>
For 1024X768 resolution:
<SCRIPT LANGUAGE="Javascript" SRC="http://www.FlipViewer.com/js/flipstretch1024.js">
</SCRIPT>
You can use the links to download the Javascripts and view them.
If you decide to host the Javascripts on your side, please keep
the credits intact. If you have included changes that allow for
better resizing of the HTML page in FlipViewer®, we would like to
hear them.
|
| |
| Step 6 : Tips |
| |
|
Tip 1 - Use empty layers to help gauge the size of your page. You can then align your layers to them.
Tip 2 - Use 1 by 1000 or 1000 by 1 pixel gifs in layers to create ruler lines.
Resize them as you would image layers.
|
| |
|
If you have any further questions, or if you have discovered better ways of producing resizable FlipViewer®
pages, please email us at: webmasterFlipViewer.com
|
| |
| >> Back to Content
|
