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

---

Hiring The Right Webmaster

The Questions You Should Be Asking ? The Answers You... Read More

Website Design: Secrets Of Professional Website Designers Revealed

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

Website Maintenance: What Does it Take to Manage Your Website?

Every action has a beginning phase where you launch your... 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

A Great Banner Only Needs Simple Things

To create your own great banner, you only need five... Read More

Tips for Getting More Sales From Your Website

(1) Create a Direct Response Website, with the minimum number... Read More

The Secrets to Successfully Learning Basic HTML

If you'd like to create/maintain a website, having some HTML... Read More

Is a Web Site Builder Right for You?

A web site builder can be a real life saver... Read More

How To Write An Effective FAQ Page

Websites that have multiple pages usually have a Frequently Asked... Read More

Free Web Design Advice

In this article I will give advice and tips of... Read More

Fast Web Design For The Skint Webmaster

About two years ago, I had a go at commercial... Read More

Power of Squeeze Pages for Realtors

Squeeze pages are a very hot topic in the internet... Read More

Optimized Web Page Template

I want to give you a free web page template... Read More

Use Exclusive Content - When Reprint Articles Dont Do Enough

There is no doubt that reprint articles can serve lots... Read More

Dont Overdo it!

Have you ever been to site with so much ad... Read More

Web Publishing Guide for the Beginning Entrepreneur (Part 1)

The best things don't come easy. - QuotedThe finished web... Read More

3 Simple Ways To Dramatically Improve Your Website

Before you start worrying about marketing your website on the... Read More

Its No Good Having A Killer Product If You Dont Have A Killer Website

Read the title of this article over a couple of... Read More

The Technology May Change, But Human Nature Remains The Same

Let me repeat that.."The technology may change, but human nature... Read More

Ten Steps to a Winning Home Page

There's no doubt about it - the first page your... Read More

The Monster Garage of eLearning

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

How to Choose Web Design Company?

Before deciding on which web design company to choose, you... Read More

Why You Should Hire a Professional Website Designer

Your web site should always adhere to standards!A professional web... Read More

Web Advertising: 10 Little Known Tricks To Help Convert Your Traffics To Buying Customers

You may not believe it, but people still judge things... Read More

You Need RSS, Atom, and ROR/RDF Codes on Your Website--Now You Need Google Sitemap as Well!

Do you have a website? If so, you need an... Read More

How to Make Your Site Attractive to Potential Link Partners

Every now and then, I receive a link exchange request... Read More

What Does Your Website Say About Your Business?

QUESTION: My business is very small, just me and... Read More

Lead Capture Pages Explode Your Direct Sales Business Online!

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

Professional Web Design Companies - How to Avoid Getting Ripped Off

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

Simple Lines and Shapes for Your Logo Design

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

Learn the Truth about Your Web Design Company by Its Portfolio

When you start building your online business and search for... Read More

Looking for a Web Design Company? Use a Web Design Directory

Your business website tells a lot about your company. A... Read More

Build Web Pages from the Top Left Corner Down

There are two important reasons to build your website from... Read More