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
Do use a consistent look and feel Your site should... Read More
Q: Should I build and maintain my business Web site... Read More
There are more than billions of Web Sites, running Online... Read More
One of the most popular methods of traffic generation is... Read More
It is a well-known fact that a successful business depends... Read More
It seems more and more webmasters are using CSS for... Read More
We've all read the countless publications about effective web site... Read More
Your website design may be affecting your sales in ways... Read More
When you develop a sales brochure, you have a mental... Read More
The .htaccess file is a control file located in your... Read More
This may comes as a surprise to you but, if... Read More
QUESTION: We promote our web site in all our... Read More
ActiveX uses an interesting method for enforcing security ... it... Read More
Colors convey emotions and emotions heavily influence the decision-making process.... Read More
So, what's in a website design anyway? And, how do... Read More
With the advent of the Internet a whole new vista... Read More
You're all ready to get started creating your web presence... Read More
Setting up a survey on your site is extremely simple... Read More
If there's one thing that I've learnt so far, it's... Read More
I'm sure you've all heard the saying 'Build it and... Read More
Are you building a direct sales or mlm business online?... Read More
What pages need to be included on your website? The... Read More
If you've a website that is not generating a lot... Read More
The way you design your web site affects your visitors'... Read More
As a graphic designer, you are sitting on a gold... Read More
One product, one long web page: this kind of web... Read More
There's no doubt about it - the first page your... Read More
When creating an e-cover the what's the first thought that... Read More
We've all surfed the web and seen some awful web... Read More
Don't make a splash!Are you thinking about using a splash... Read More
If you own a web site or if you are... Read More
Want to see an excellently constructed website? As a writer... Read More
Making a successful online business can be a long and... Read More
Have you seen Jesse James on the... Read More
Here's a really simple way... any novice can create a... Read More
Ever wonder how HTML color codes are put together? For... Read More
An ongoing challenge for webmasters today is to provide fresh... Read More
Every action has a beginning phase where you launch your... Read More
Countdown to Armageddon - at least you'd think so judging... Read More
We've all read the countless publications about effective web site... Read More
We have all seen websites showcasing their testimonials either spread... Read More
Are you looking to create the perfect website? A complete... Read More
Building your first website can be very frustrating. It looks... Read More
Don't mess with those links! When you're designing your site,... Read More
In this article I will give a few tips of... Read More
10 Basic Things Your Website Should Have ...__ all short... Read More
Even if you're not an accomplished webmaster you can still... Read More
A successful website is something that everyone venturing into the... Read More
Website design firms come in all shapes and sizes.When choosing... Read More
If your Web site doesn't project a professional and polished... Read More
This is a two-part article about creating a web site... Read More
Does your website make you any money? Does it SAVE... Read More
By following feng shui guidelines and techniques, you can build... Read More
What's happening to good web site design? Somehow we creative... Read More
Colors convey emotions and emotions heavily influence the decision-making process.... Read More
"How to turn "slightly interested" customers into "I've got to... Read More
Creating your web site can be a tricky process. Choosing... Read More
Designing your own successful web page can seem difficult and... Read More
Q: Should I build and maintain my business Web site... Read More
CNN.com's designers have gone out of their way to make... Read More
Any kid, and their grandmother too, can make a webpage.... Read More
When creating an e-cover the what's the first thought that... Read More
Many people hire professional web site designers for as much... Read More
If you've a website but not making a lot of... Read More
Color is one of the most important but least understood... Read More
There can be zillions of reasons why your visitors return... Read More
Web Design |