|
|
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
Top 10 Web Design Mistakes
As a webmaster, you want to keep your visitors content so they'll come back again. Below you will find ten common mistakes made by webmasters that may deter people from returning.
How Do You Make A Website?
No, that's not the real question. The real question is "How in the Heck Do You Make a Website???"
Give Your Web Site a Small Business Marketing Tune Up
Your web site is like your car. Both are significant investments that require the right features and regular and proper maintenance to ensure maximal satisfaction and performance.
Business Opportunity for Graphic Designers
As a graphic designer, you are sitting on a gold mine. You have a skill other people do not have, and you can use that skill to earn a good living.
Tapping Into The Visual Stimulus Of Your Web Site Visitors
"Oh, my eyes, my eyes! What an eye sore. Quick, click away! Click away!"
Top Ten Fonts for Website Design
The top ten fonts for website design might change in order, but for the most part the fonts that make up this list stay the same due to their popularity. In general, the top ten list includes Arial, Frutiger, Futura, Gills Sans, Helvetica, Lucida, Optima, Palatino, Agfa Rotis, and Univers.
What You Should Ask a Web Designer Before You Hire Him
You've thought about it and you're ready to go. You're ready to give your business an online presence. You want your own website. That's great but unless you are doing it yourself, you would be shopping for a website designer. Some people would design their own websites but most people prefer to save themselves the time and money and hand the job over to the professionals.
Creating a Basic Web Design Template
A "template" is simply a design format which you can apply to all (or most) of the pages in your web site. The first advantage of using a "template" system is that it allows you to make your most important design decisions at the beginning, and then just focus on content. The second advantage is that it allows you to quickly create new pages based on your standard design.
The Proper Way to Use Images
Most people will agree there is nothing more annoying than going to a site and it taking forever and a day to download all the images just so you can see the site. Then after waiting, realizing that the site is completely ugly, irrelevant,or not what you thought is was, and wasting your time.
How To Create A Professional Website In Less Than A Week
Here's a really simple way... any novice can create a fully functional website in less than a week.
Good Web Design ? What Is It?
There is unlimited possibilities when it comes to designing a website. Flash, Database, content management, Client Login, etc,etc. A question to ask yourself when deciding how to do your website is:
Alternative to Web Site Templates and Design Software
Before I discovered the concept of Web site templates, I felt woefully inadequate to build my own site. It was the old "catch-22" where I didn't have the money to pay to have a site built, I needed a site to make the money to have a professional site, and without the knowledge of how to build a site, I had no hope of getting a site.
Can a Webpage Created Without HTML?
The HTML editor is usually a webpage design software that has a GUI(graphic user interface) which makes it easier to design a webpage using the File Menus. This is good for the non-programmers and non-technical people.
Do-It-Yourself or Hire a Professional Designer
Remember your vision for your company and the brand or statement you want to make when any of your current or potential customers come in contact with you. You have to impress them in all the ways you connect with them.
7 Ways of Building Customers Trust With Your Web Site
When I purchase something from a web site I first check who is behind this site. If there is no contact information or anything about the owner of the site or his/her company I move on.
Website Design: 10 Web Site Design Pitfalls To Avoid
If you've a website that is not generating a lot of sales, it may be due to some design flaws.
Whats Wrong With My Website?
I ask myself that question about once a month.My website looks fine to me, but what are otherpeople seeing? And what are the Search Enginesseeing? Here's a checklist of 10 ways to optimizeyour website for peak performance:
Why a Website Design Speaks Volumes About Your Company?
Whether a business has just got off the ground or has been established for years, start-up and long running companies are looking to the internet to expand their sales as well as service to customers. Many new websites are going up and with so many people opting to go with the cheapest route or the quickest design process, sometimes the quality of a website gets left behind. Lets face it, you wouldn't want a possible client coming into your office, looking around at a mess, so why would you send them to your virtual office looking like one?
7 Tips To Increase Sales With Your Ecommerce Web Site
Ecommerce is just exploding right now on the Net. More and more people are doing their shopping online. Some Internet retailers are even beating out their offline counterparts. So what does this mean to you? It's important that you are taking full advantage of your web site to get your share of the billions of dollars spent online every year. In this article we are going to cover 7 tips that you can put into practice immediately to increase your sales and revenue with your ecommerce web site.
Hacked Off with CSS?
For those not familiar with CSS Hacks, they are ways of using styles/classes that only apply to particular browsers. They are used to overcome the display problems mentioned previously by exploiting CSS structure and code. Most involve simple punctuation tricks to fool the problematic browser into accepting a different style to the browsers that display correctly.