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

---

Alternative to Web Site Templates and Design Software

Before I discovered the concept of Web site templates, I... Read More

How To Attract People To Your Web Site and Leave Their Contact

If you have a website, you want your visitors to... Read More

Five Common Web Design Mistakes

There are often many mistakes encountered when creating a webpage... Read More

Eliciting Constructive Website Feedback

"It's good.""You've done a nice job.""I don't like it."At some... Read More

Looking For A Designer To Re-Design Your Website?

If you were like me and you have just started... Read More

Hexadecimal Color Notation on the Web

When designing elements for your webpage, you will often be... Read More

Turn Harmful 404 Error Pages Into Helpful 301 Redirects

It's a fact, Page Not Found, known as a 404... Read More

Using CCS to Eliminate Tables

CSS or Cascading Style Sheets has opened up tremendous possibilities... Read More

Web Site Redirection - How to Implement a 301 Redirect

You just created a new web site but want to... Read More

Best Web Design And Free Web Promotion Tips

This article gives free tips on how to find a... Read More

Elements of Graphic Design for Your Website

We've all seen them. Poorly designed web sites that make... Read More

How to Make Effective Use of Web Fonts

Writing for your web site is not the same as... Read More

Cool Web Design And Promotion Tips

This article gives free tips on how to find a... Read More

The Most Important Question To Ask About Your Web Site!

When you design a website how do you start ?Do... Read More

Ten Design Mistakes to Avoid

Avoid these mistakes and your site will be steps ahead... Read More

Bad Web Design: ActiveX

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

Why Hire a Professional to Design Your Web Site?

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

Create Favorite Icon

Favorite icon appears to the left of your link in... Read More

Offshore Web Design and Development - Use Great Opportunities

Sooner or later every small or medium business owner realizes... Read More

Top Ten Ways to Increase Web Sales - Part 2

You have only 10 seconds to impress your potential buyer.... Read More

Orient Your First-time Web Site Visitor

Imagine spinning someone around so profoundly and for so long... Read More

Reach Out To Billions

Have you heard of 'Babel Fish'?It's a service provided by... Read More

Increase Your Credibility With Web Site Awards

Web Site Awards are given from other sites to reward... Read More

So You?re Hiring a Web Designer?You Have the Right to Demand these 7 Perks

Whether you're hiring a designer who has created 10 sites... Read More

10 seconds is all it takes? (How to grab the attention of your audience with your web site)

FACT: 30 to 60% of visitors tend to drop off... Read More

The Seven Deadly Sins of Web Business Design

Before you take a road trip it is usually a... Read More

Power of Squeeze Pages for Realtors

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

Small Business Website Design - How to Get Professional Results on a Shoestring Budget

Just because you are a small business with an even... Read More

11 Steps to Sticky Web Site!

An attractive and user-friendly Web site is crucial to attracting... 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

The Technology May Change, But Human Nature Remains The Same

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

Event Planning Must Include An Event Website

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

Website Sales: Discover 10 Mesmerizing Insider?s Tricks To Ignite Your Sales

Marketing is not an easy skill to acquire.It requires patience... Read More