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

---

How to Avoid the Biggest Mistakes Member Sites Make in Their Marketing Copy

If you have a web site to which people pay... Read More

Has Your Design Firm Run Amuck With Your Web Site?

What's happening to good web site design? Somehow we creative... Read More

Sales Versus Customer Oriented Websites

Should Generating Revenue From A Website Be The Prime Motivator?... Read More

10 Ways to Sabotage Your Website Traffic and Send Visitors Packing

If you're running a website or online business, your number... Read More

Discover 7 Proven Shopping Cart Enhancements to Increase Your Sales

For online businesses with their main goal of selling products,... Read More

Ten Fatal Mistakes That Make Web Sites Stink

Since you'll spend lots of time and money to create... Read More

Event Planning Must Include An Event Website

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

Essential Strategies To Make Your Web Copy Attractive To Your Target Audience

Reading on the web is different than reading in all... Read More

The Right Trigger Words

CNN.com's designers have gone out of their way to make... Read More

Tips for a Successful Website for Any Organization, NGO or GO

Most NGOs (Non-Governmental Organizations) don't understand these important aspects of... Read More

The Monster Garage of eLearning

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

Create A Web Site That Builds Trust

If someone doesn't know you personally, will they trust you... Read More

Do You Hate Your Website? Web Site Sales To Hit $316 Billion Over The Next 6 Years

What dollar amount does your web site contribute to this... Read More

Do-It-Yourself or Hire a Professional Designer

Remember your vision for your company and the brand or... Read More

Why Not To Use Web Design Templates For Your Website

In today's age of fast food and high-speed Internet, a... Read More

How a Custom Designed Website Can Help Your Business

Over the years, the internet has grown into a marvelous... Read More

To Flash, or Not to Flash

When considering whether or not to incorporate Flash into your... Read More

The Best Simple Software For The Busy Webmaster

Here are a few programs I can't do without. They're... Read More

The Secret To A Profitable Website

Whether you are planning on having a website built for... Read More

The Brutal Truth

Not too long ago while looking for businesses that do... Read More

Awards Program Debate

Daily article:One of the most debated subject among webmasters is... Read More

Why Do Images Disappear from a Webpage?

In learning webpage design, I encountered many problems that took... Read More

Use Feng Shui Techniques To Design a Harmonic Website For Your Business

By following feng shui guidelines and techniques, you can build... Read More

Want to Increase Your Online Sales? Make Sure That Your Web Site Has a Unique Selling Proposition

If you own a web site or if you are... Read More

How Do You Make A Website?

No, that's not the real question. The real question is... Read More

Hiring a Graphic Designer

You've come up with a great product. You've got the... Read More

Browser Compatibility

Internet Explorer, created by microsoft has been the most popular... Read More

Handwriting Font Tips - The Personal Touch That Makes a Difference

Most websites use similar fonts and as a result have... Read More

Bad Web Design: ActiveX

ActiveX uses an interesting method for enforcing security ... it... Read More

Website Design: Secrets Of Professional Website Designers Revealed

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

Professional Web Design Companies - How to Avoid Getting Ripped Off

Building a website that is exactly what you want and... Read More

Cheap Web Design In London

Due to the large number of people offering web design... Read More

Web Site Accessibility

Making your site accessible means making it available to be... Read More