webdesign articles


How to Use Sliced Graphics to Layout Your Web Site





The problem with designing your site as a graphic, is thatit would take too long to load. Your visitors would leaveyour site immediately and move to your competitors website. How can you resolve this?

Slicing graphics into a number of sections, then puttingthem together in tables is a great way to layout your website. It cuts down on the time for providing a quick designfor a potential client. It also allows you to bringelements of your site together that would be difficult todo with tables.

The value of slicing graphics

Reduces site loading time - a large graphic or manygraphics on one web page will slow down your loading timeconsiderably. Slicing graphics will allow each piece toload separately and at a faster rate.

Easy layout and design - web pages usually consist ofheadlines, photos and text which must all fit together tocreate a design that is aesthetically pleasing for yourvisitors. When you create a web graphic it always must havea rectangular space. You are limited to placing graphicsand text in a rectangular form. However, if you slice thegraphic into pieces, you can then place these pieces intothe 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 graphiceditor (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 graphicas 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 into6 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 thenecessary tables to hold all your slices.

7. Open up your favorite html editor (I use Dreamweaver) toview your graphic layout. You should now have 6 separatesections (slices). In this case I have the main headerbanner, the house and a large area of white space to holdthe text in place.

8. Delete the slices (white space area) which have nographics. You will now have 6 tables.

9. Merge together the tables where you will insert thetext.

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 dazzlingdesigns.

Tip:
Test the loading time of your web pages (netmechanic.com). It should be less than 10 seconds with a 56K modem. If ittakes 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 AffordableWeb Site Design and Web Hosting. Subscribe to his "Marketing Tips" newsletter for more original articles atsubscribe@isitebuild.com. You can read more of hisin-depth articles at: http://www.isitebuild.com/articles


MORE RESOURCES:

LunaWebs.com Introduces Low Cost Web Design Solution
PR Web (press release)
In addition to affordable custom web design, the layout system allows an organization to have a website up and running in just a few days. ...



New Money Making Opportunity Introduced by LogoBee- Affiliate Program Expanded ...
PowerHomeBiz.com (press release)
After helping over ten thousand companies with their graphic design needs, LogoBee are now in a position to offer the same deal for web design referrals. ...
Another Money Making Opportunity Launched By LogoBeeI-Newswire.com (press release)

all 2 news articles »


A Sunday Afternoon on the Island of Web Design
Online Journalism Review
CHICAGO - I recently spent an afternoon at the Art Institute of Chicago, admiring, among many other works, the museum's famed "A Sunday ...



Web design tips: General tips
Helium
by AngelaWhite Before building your website, use a keyword search tool and choose a theme based on those words that receives a lot of traffic or does not ...



Marketing Strategy: Why Logo and Web Design Matter
Small Business Computing
Think that having an eye-catching logo and distinctive online brand don't matter -- or are unimportant if you have a distinctive ...



New York Web Design Company Launches New Website For CILA MANAGEMENT, LLC
PowerHomeBiz.com (press release)
July 26, 2010 ( PowerHomeBiz.com ) - :Captivate Designs, a New York Web Design Company servicing businesses nationally is proud to announce the successful ...
New York Web Design Company Launches New Website FOR CILA MANAGEMENT, LLCopenPR (press release)

all 4 news articles »


In web design, Northern Ireland punches above its weight
Belfast Telegraph
And Northern Ireland's own web design guru's the Standardistas are present as well, with a special pub quiz where the use of online devices is actually ...



Online Social Media (blog)

Selecting a Web Design Company
lonad News
It doesn't mean you need to take a web design work & design your web-site yourself, though. There is no need to get in to the nitty gritty details in the ...
Web Design and Development: List of resourcesOnline Social Media (blog)
Website Design & Development Company from Delhi, IndiaSBWire (press release)
Logo Design – Brand Development Strategy For Businesseslonad News
lonad News
all 5 news articles »


Don't Let Your Web Site Design Become a Nightmare
Search Engine Watch
Now, to be fair, not all marketing firms are clueless about web design, though the general love of Flash-based websites seems to indicate a sort of overall ...



Web Design Telford
Lolita Storm (blog)
You can leave a response or trackback to this entry from your site When it comes to looking for a web design company there are probably lots to choose from. ...


Google News

home | site map
Webdesign-box © 2006