Home | Registration | Catalog | Resources | Hosting | Services | Support | Contact Us | Downloads | Press Room | Search

Give Your Web Site A Professional Makeover Quickly And Easily DPA Software
Spacer GIFs  

 

Subscribe to our

Newsletter

Email Address

 

Login

Bookmark this Page
 

Up
Shared Border Tip
Resizing Images
Colorize Template
Sound Editing
Non-FP Web Applets
FP Rollover Buttons
Shared Border Info
Dynamic Navigation
Page Redirection
Using FX Templates
Designing STs
Theme Attributes
Picture Bullets
Multiple STs
STS Super Themes
Using FX Splash Page
Frames and Effects
Replace Component
Matching Colors
Button Bar Helper
Auto Sizing
Go To Slide
Screen Capture
Media Maker
Link Bars
Tip of the Day
PFX Inline Frames
Customize Splash
Background Image
Search Engine
Quick Search
DWT Web
FP2003 FAQs
Spacer GIFs
Apache Splash Pages
Borders Meta Tag
SSE Template Pages
Search PDF Files
_frontlook Folder
Auto Backups
FP Templates
SSE Clear Button
SSE Area Menu
SSE Optimization

 

Downloads
FREE STUFF
Press Room
Search

Shopping Cart
 

No Items 

 

Check Out

 

 

Need FrontPage?

 

Great Price!

 

FrontLook.com Newsletter Tip

Volume 3 - Issue 9 - December 2003

Using Spacer GIFs in your Page Layout
By David Pfeiffer of FrontLook.com
When using tables to control your page layout, pixel precision is often crucial. As you may have noticed, just setting the pixel width and height of the table rarely keeps things in place under all browser viewing conditions. Using transparent spacer gif images can save you loads of time and keep you from pulling your hair out trying to get something spaced properly.

At first glace it may appear that you might need to make custom gif images for each spacing situation. But this is not the case, one transparent gif and the Picture Properties dialog in FrontPage will allow to use the same transparent gif image for all your needs on the page. Only one image to download! So lets get started.

What is a spacer gif and Why do I need them?
A spacer gif, is a transparent gif image used to occupy space in the page layout. Spacers are very useful in the following applications:

bulletIf you need a table cell to be a certain pixel height (often smaller then a 8 point font), a spacer font will let you control that height of the cell with precision (make sure all spaces are removed from the cell).
bulletIf you have a multi-column table and when the browser window is small the table columns are too close together, a spacer gif can ensure minimum column spacing.
bulletIf you are having problems controlling the width of a table while using bullets or indents, you can use a spacer gif to make the indent in the line of text.
bulletWhen slicing an image, spacer gifs are used to control adjacent table cells, forcing them to a minimum width or preset pixel size.
bulletSpacer gif are used to set the minimum width of the content area in a template design that adjusts itself to the width of the browser window.

Once you start using spacer gifs, you will find many uses for them in the control of your page layout.

Where can I get a spacer gif?
You can copy the following spacer gif for your use:

10x10 spacer gif image

Right click on the middle of the square and select Copy from the Popup menu. Once you have copied the spacer, paste it on your page and then you will see the resize handles.

This is a 10 x 10 gif - it could be smaller, but its easier to work with a 10 x 10 gif. Since you will be using the same image over and over, the image is only downloaded once. Just copy and paste it to different location on the page and then resize it.

How do I resize the spacer gif to fit my spacing needs?
There are two basic methods; manually resizing it using the image resize handles and resize it using the Picture Properties dialog.

Using the Image Handles
The image resize handles are great when precision is not required and the spacer required is rather large.


Selected 10 x 10 transparent gif image

The image size handles appear whenever an image in FrontPage is selected. As you move your cursor over the selected spacer gif image, you will note the cursor will change to diagonal, up/down and right/left directional cursor styles.


Using the corner handles maintain the spacer image aspect ratio

Use the diagonal cursor to resize the gif while maintaining it's proportions.


Using the side handles to change the spacer image aspect ratio

Use the up/down and right/left cursors to resize the gif and change it's proportions.

Using the Picture Properties Dialog
The Picture Properties dialog allows you to set the exact size of the spacer gif. This is especially useful when the image is small, making it difficult to resize using the image handles.


Picture Properties Dialog

To resize the spacer gif, right click on the image and select "Picture Properties" from the popup menu. The "Picture Properties" dialog will appear. Select the "Appearance" tab if not already selected.

To set the pixel size of the spacer:

bullet

Check the "Specify size" checkbox. This will enable the "Width", "Height" and the "Keep aspect ratio" controls.

bullet

Uncheck the "Keep aspect ratio" checkbox. Make sure the "in pixels" radio buttons are selected.

bullet

Now set the "Width" and "Height" of the spacer gif and press the OK button.

Now your spacer gif image has been precisely size to your specification.

That's It!
As stated above, once you start using spacer gifs, you will find many uses for them in the control of your page layout.

 

DPA Software

Copyright 2004 DPA Software - All Rights Reserved

Last Modified : 03/06/2008 11:15 PM

We accept the following payment forms
POs and Checks and PayPal accepted
Privacy
Statement
Questions or Problems?
 Click here
Download Policy
Secured by SSL Certificate

All products come with a

FrontLook, Theme Chameleon, Image Chameleon and FrontLook Super Themes are trademarks of DPA Software. Microsoft FrontPage, SharePoint, Microsoft and the Office logo are trademarks or registered trademarks of Microsoft Corporation in the United States and/or other countries. Java is a trademark of Sun Microsystems. *PC Magazine is a registered trademark of Ziff Davis Publishing Holdings Inc. Used under license from Ziff Davis Media Inc.