How to Use Sliced Graphics to Layout Your Web Site

The problem with designing your site as a graphic, is that it would take too long to load. Your visitors would leave your site immediately and move to your competitors web site. How can you resolve this?

Slicing graphics into a number of sections, then putting them together in tables is a great way to layout your web site. It cuts down on the time for providing a quick design for a potential client. It also allows you to bring elements of your site together that would be difficult to do with tables.

The value of slicing graphics

Reduces site loading time - a large graphic or many graphics on one web page will slow down your loading time considerably. Slicing graphics will allow each piece to load separately and at a faster rate.

Easy layout and design - web pages usually consist of headlines, photos and text which must all fit together to create a design that is aesthetically pleasing for your visitors. When you create a web graphic it always must have a rectangular space. You are limited to placing graphics and text in a rectangular form. However, if you slice the graphic into pieces, you can then place these pieces into the cells of a table on your web page.

How to layout a web page using sliced graphics Please refer to the example:

http://www.ihost-websites.com/SLICES/header.htm

1. Create a 730 x 600 graphic in your favorite graphic editor (I use Fireworks from Macromedia).

2. Import a graphic from the harddrive of your computer or from the Web.

3. Create a headline (insert text) above the graphic as a banner for your web page.

4. Switch on "Rulers" to precisely slice your graphic view - rulers)

5. Select the slice tool, and slice your graphic into 6 sections.

6. Save the sliced graphic in a folder in your html editor (file-export wizard-export-save)

Use these settings before saving your graphic:

File Name: header
File Type: html and images
HTML: Export HTML file
Slices: Export Slices

Fireworks saves you a lot of design time, by creating the necessary tables to hold all your slices.

7. Open up your favorite html editor (I use Dreamweaver) to view your graphic layout. You should now have 6 separate sections (slices). In this case I have the main header banner, the house and a large area of white space to hold the text in place.

8. Delete the slices (white space area) which have no graphics. You will now have 6 tables.

9. Merge together the tables where you will insert the text.

10. Add the text and whatever else you need to fill the web page.

That's it!

You have now designed a web page using sliced graphics. Remember this slicing method for your future web designs. You'll find that it's much easier to produce dazzling designs.

Tip:
Test the loading time of your web pages (netmechanic.com). It should be less than 10 seconds with a 56K modem. If it takes longer than that, slice your graphic into smaller pieces.

Herman Drost is the Certified Internet Webmaster (CIW) owner and author of http://www.iSiteBuild.com Affordable Web Site Design and Web Hosting. Subscribe to his "Marketing Tips" newsletter for more original articles at subscribe@isitebuild.com. You can read more of his in-depth articles at: http://www.isitebuild.com/articles

---

Creating Personal Web Sites (Part 2)

This is the second part of a two-part article about... Read More

7 Reasons Why Using CSS is a Must

CSS is a new option for website designers that have... Read More

How To Get A Pay Raise From Your Web Site

How many of the visitors to your web site take... Read More

What Happened to My Website when I Deleted the Home Page by Mistake?

There is a widespread confusion among lots of new website... Read More

Welcoming Your Website Visitors

Imagine you're going on a blind date. You've heard wonderful... Read More

Usability and Considerate Design

I hate to imagine that in your web development project... Read More

How To Improve The Professional Look And Feel Of Your Website

Projecting a professional image is paramount to your website's success.... Read More

5 Easy Ways to Improve Your Website

When designing your website, remember to avoid useless and confusing... Read More

Basic Web Design Principles

Home PageHome page should clearly indicate what the site is... Read More

Online Businesses Still Ignoring Dial-up Market

In this article you will find the parallel between two... Read More

Using Your Personal Website To Clinch That Job!

With an increasing number of employment portals emerging, it is... Read More

How To Use Unsafe Web Colors With Minimum And Safety And Maximum And Profit

Do you want to use unsafe web colors without offending... Read More

How to Design Website Which Google Likes

Are you going to design or redesign new website or... Read More

50 Surefire Web Design Tips

Tips to brand your websiteInclude your logo in all pages.... Read More

6 Website Design Disasters and How to Avoid Them?.

Let's face it; the line from A Field of Dreams... Read More

How to Make the Online Sales Copy for Your Website More Conversational

It has been said that the best online sales copy... Read More

Why Hire a Professional to Design Your Web Site?

Creating an appealing, functional, and effective Web site is much... Read More

How to Create A Homepage That Works

Want to know what the worst thing to say on... Read More

Lead Capture Pages Explode Your Direct Sales Business Online!

Are you building a direct sales or mlm business online?... Read More

Web Templates: Replacing Designers?

I've seen articles (and websites) that suggest you can buy... Read More

When Your Graphic Designer Costs You Money

So how do you know when your graphic designer costs... Read More

Choosing Your Web Design

We would all like to have the best looking website,... Read More

Simple Lines and Shapes for Your Logo Design

Geometric designs come in all shapes and sizes? and lines.... Read More

Pages to Include in Your Website

What pages need to be included on your website? The... Read More

Build A Successful Website For Dummies

So you want to build a website here I will... Read More

Top Ten Ways to Use Audio on Your Site

Audio can provide an added dimension to your site. It... Read More

Event Planning Must Include An Event Website

As part of your event planning you should seriously consider... Read More

Website Promotion and Design Tips

Are you thinking that it is about time your small... Read More

The Monster Garage of eLearning

Have you seen Jesse James on the... Read More

Will You Site be a BIG SUCCESS. 7 Reasons Why It Might Not!

With so many new websites going up, it is hard... Read More

Becoming A Website Designer

The ability to create simple, attractive and functional web pages... Read More

Website Design: Secrets Of Professional Website Designers Revealed

What colors do you have at your website?Can they make... Read More

Setting Up a Website

Where does a person start when setting up a website?... Read More