Home
>
Web Design
>
How to Use Sliced Graphics to Layout Your Web Site

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 http://www.isitebuild.com. You can read more of his in-depth articles at: http://www.isitebuild.com

reliable home cleaners Glenview ...

In The News:

Facebook ads promising to recover stolen funds are targeting scam victims again, and Meta confirmed removing flagged accounts after investigation.

Tesla Cybertruck production is winding down at Gigafactory Texas to make room for Cybercab robotaxi manufacturing, but key questions remain for owners.

Identity theft can hide in phone accounts, medical records and utility bills long before it shows on a credit report. Eight places to check now.

JR East's towering ZIZAI ZX-3 chainsaw robot tackles dangerous branch-cutting along Japan's Koumi Line while a trained operator controls it remotely.

A massive DHS data leak exposed records of over 41,000 employees, revealing links to undercover ICE operations, Palantir tools and AI platforms.

The Fox News AI Newsletter covers the latest artificial intelligence technology advancements, including the challenges and opportunities AI presents now and for the future.

UCLA's PhoneBot turns old Android phones into the brain of a two-legged humanoid robot that walks, follows people and stands up after falling.

A fake Amazon invoice charging $988.18 for an iPad lists the same customer support phone number three times to steer panicked victims into calling.

A handful of food delivery robots from Uber Eats and other platforms have gotten kicked and knocked over in Philadelphia and Los Angeles.

Data broker opt-out forms may not protect your family. People search sites can still expose your info through a spouse's or parent's profile.

Apple's first touchscreen MacBook Pro starts at $2,899 with a PROLED XDR OLED display, but the non-touch M6 model costs $900 less at $1,999.

Black Friday deals are already drawing scammers who use fake delivery notices and gift card payment requests to steal your personal financial information.

Apple's iPhone Duo reportedly outlasted the Samsung Galaxy Z Fold 8 by over three hours in battery tests, but its weight and repair costs raise concerns.

Florida Polytechnic University's Jetson ONE eVTOL police vehicle named Astro still awaits FAA authorization before officers can fly operational patrols.

OpenAI's new locked chats feature lets you protect ChatGPT conversations with a PIN, Face ID or Touch ID, but there are key privacy limitations.

A phishing email disguised as an Evite fooled a man even after he emailed his friend to verify it, revealing how compromised Gmail accounts aid scams.

Microsoft's AI diagnostic system identified 83% of complex medical cases in a study, more than doubling the 36% accuracy of generalist doctors.

Account takeover threats go beyond stolen passwords as criminals exploit session cookies, SIM swaps and MFA fatigue to bypass your login security.

SpaceX is reportedly pursuing access to 80,000 cell sites to turn Starlink into a major wireless carrier rivaling Verizon, AT&T and T-Mobile.

Tech advocacy groups warn that foreign nationals at AI companies like OpenAI and Google pose a national security threat amid a lack of federal oversight.

Singapore researchers built the world's first touchscreen woven into clothing, surviving 50 machine washes while displaying images and responding to touch.

The Fox News AI Newsletter covers the latest artificial intelligence technology advancements, including the challenges and opportunities AI presents now and for the future.

A startup founder woke to $449 in unexpected OpenAI and Anthropic charges after stolen API keys were exploited during the "Black October" cyber wave.

Educational Testing Service hackers stole millions of California student records, but families who moved out of state years ago may also be affected.

Apple's iPhone Duo screens are cracking near the hinge just days after its $1,999 launch, and iFixit's CT scans may reveal what's going wrong.

How to Use Sliced Graphics to Layout Your Web Site

Web Design