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
|
|
|
Created & Maintained by Empower! CMS Web Sites
Host2Sell Web Hosting | Emarketing Workshops | Site SEO Review | FREE Newsletter6 Design Flaws Newbie Web Designers Make: Fool Everyone Into Thinking You Know What Youre Doing
Even if you're not an accomplished webmaster you can still have a professional looking website. You may be like I was five years ago-you're teaching yourself web design and you're starting to catch on to that HTML stuff. You're so excited about your new bag of tricks-but slow down partner, sometimes less is more. In fact the only time more is more is when it concerns chocolate cheesecake or something like that. (I can never get enough chocolate!)You've worked hard to get the traffic-now don't drive them away.1. Fatal Flaw One-Bouncing, Wiggling Animated Clip ArtThis one is really a...(related: Web Design)
Making Good Websites That Stand Out
Websites, there's literally billions of them out there in cyber-space. How many of them do you go to and just think this is boring, bland, or hard to use? It seems like too many to mention. So what makes a good website? I reckon it's about interaction. You've got to make the visitor interested. You've got to grab their attention. Many sites use plenty of bright and shiny gimmicks to attract you, but once you make it through to the content of the site it's just not worthy. A good site uses easy navigation, relevant content, and interactive medi...(related: Web Design)
Imitation, The Smartest Form Of Flattery
Unless you are an inventor, most likely you are selling a product or service that is being offered by someone else, somewhere, at some time. The first person to start your type of business would have gone through a lot of trial and error. Thank that person, as now you can not only profit by not repeating the same mistakes, but by learning what they do to get business.
Fast Web Design For The Skint Webmaster
About two years ago, I had a go at commercial web site design. I put a medium-sized ad in a London classified ad paper. Nothing fancy: "Web designer seeks work ..." etc. This was expensive, about £500 for a month's run.Got a few repli...(related: Web Design)
Build It And Build It Cheap!
There are several very good reasons why you should consider building your own web site versus having someone do it for you. It's more cost efficient, you can make it much larger in content, you are more involved in how you want the pages to loo...(related: Web Design)
Custom Icons For Your Specific Brand
Developing a software application is not easy at all; apart from the effective creation of the application you'll have to think of other things as well, like: making the software easy to work with, giving it a unique and appealing look, making it better than other software, etc. Apart from the qualities of the application, these little things are the ones that promote your software application among the end u...(related: Web Design)
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 ROR XMLNS code button which leads to a full ROR/RDF code page for your website. This code tells search engines all about the special ...(related: Web Design)
Moving Things Around
How often, men, have you come home to find the living room furniture in different places? Your wife said she was ready for something different, so she mo...(related: Web Design)
How To Create A Homepage That Works
Want to know what the worst thing to say on a homepage is?"Welcome to our homepage." And yet, time after time, we all come across such homepages on the Internet. The reason that this is such a poor opening gambit is the fact that the visitor already knows he / she is looking at your homepage, what's the point in teaching them to suck eggs?Your website's homepage needs to contain much more important messages than a simple welcome statement or brief history to your company. Why has someone landed on your website in the first place? Wha...(related: Web Design)
Keep Your Navigation Consistent!
One of the single most important aspects of effective navigation is consistency. Why? There's a simple reason.Visitors want familiarity.They are more comfortable and more trusting if they know things are going to remain the same from page to page. They have a certain sense of confidence from knowing what to expect.If a visitor can quickly become familiar with your navigation, it's much simpler to actually navigate. And of course, that's the whole purpose of navigation, right?Besides familiarity, there's a second reason to be consistent. It hel...(related: Web Design)
Double Ad-trackers Its Not As Crazy As It Sounds Here Are 7 Reasons Why?
A Double Ad Tracker is an Ad-Tracker that points to an AD-Tracker. It may sound a bit like overkill to have an Ad-Tracker Pointing at another Ad-Trac...(related: Web Design)
Why Long Web Pages Are Better Than Short Ones
Many Internet sites that try to sell you something have very long pages. Why is that do you think? Well, it appears that long, scrolling, web pages lead to more sales than short pages. This article explains why you need long web pages.If you have surfed the web for things to buy you can hardly have missed some of the seemingly endless, long, scrolling web pages that only tell you the price somewhere near the bottom of the page. Some of these web pages have around 5,000 words on them - a good chapter o...(related: Web Design)
Ten Tips For Your Web Site Home Page
1. Loading time:
- try to be below 20kb
- less number of images
- specify height and width of images
- Html with out erros
- WYSIWYG editors load up your html code. so try using text editor part of your html editors instead of visual editor
site-map - Copyright © 2006 Empower! Web Design | All Rights Reserved. | Web Design