| Free Adobe Photoshop website templates by Colorifer.com. Web design articles | |
|
|
|
|
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 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: 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
MORE RESOURCES:
Google News |
|
|
|
RELATED ARTICLES
Website Maintenance: What Does it Take to Manage Your Website? Every action has a beginning phase where you launch your activity, a middle period in which you must sustain and develop it and a conclusion. Many people set up a website enthusiastically but then they find that they don't have the skills or knowledge to maintain and develop it. Choosing Form Over Function Kills Your Site Never put form over function. Why? Because it's crucial that visitors actually be able to USE your site. Top Ten Ways to Use Audio on Your Site Audio can provide an added dimension to your site. It creates a warm atmosphere where visitors feel like they know you. Seven Habits of Highly Effective Webmasters A highly effective website will always reflect its highly effective webmaster. Throughout the years of doing a number of websites, I've seen quite a few effective webmasters all over the web and I would like to share to you their successes by exploring on this topic: "Seven Habits of Highly Effective Webmasters. 10 Ways to Sabotage Your Website Traffic and Send Visitors Packing If you're running a website or online business, your number one goal should be to build traffic. The following are ten ways to drive traffic away from your site. The Most Important Question To Ask About Your Web Site! When you design a website how do you start ?Do you start with the banner graphics at the top, or the order page or maybe the sales letter ?All of those are areas that have to be created but they're really not the place to start.The place to start is by answering one simple question about your site. Do You Make These Common (But Deadly) Website Design Mistakes? Building a website can be overwhelming, here are some design tips to help keep you on the right path (or is that web?)--- Designing a Frames-based web siteFrames may make the job of maintaining a big web site easy, but search engines hate them. Most search engines cannot find their way through them and end up indexing only the home page. How To Start An Internet Business - Designing For Usefulness The first step to starting any Internet business is conducting keyword research to determine if there is any interest in your idea. Once you identify a need, it's time to consider what your site should look like. 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-Tracker but it's not crazy. Web Advertising: 10 Little Known Tricks To Help Convert Your Traffics To Buying Customers You may not believe it, but people still judge things by their appearances.How does your website look?The appearance of your web site text can actually increase or decrease your sales. Cool Web Design And Promotion Tips This article gives free tips on how to find a cheap website designer and free tips on website promotion services.Cheap website design services. Technology vs. Usability When JV Media Design was formed, the year was 1995 and the Internet was a very different place than it is today.The first websites we created used simple layouts, a modest amount of graphics, standard "web safe" colors, and no javascript. Web Design: Should You Hire Someone or Do It Yourself? So you need a website. You are not sure if you should hire someone or learn HTML and do it yourself. Tips For An Effective Website A successful website is something that everyone venturing into the new arena of Internet marketing and communications wants to have. Your website will often be a potential client's first impression of you and your business. Graphic Design Can Make or Break Your Web Site We all want high impact graphics for our Web sites - Right.Sometimes it is easy just to pick a template that comes included with a site builder and or hosting package. Affordable Website Design In Manchester If you have a business, big or small you may be thinking of getting yourself a website.The world wide web is another way of spreading your message or selling your product. How To Create A Stunning Drop Capital Effect On Your Web Pages Drop Capitals are frequently used in many newspapers, books and magazines in the offline world. You will frequently see the large capital letter sinking down into the first paragraph of articles, stories and chapters in the majority of publications you come across. Tips On Effectively Organizing Your Navigation Not all links are created equal.While all of your links may be important, you must sort and prioritize to come up with an effective navigation scheme. Free Website Templates - Top 10 Things You Need to Know When building your website you might not have a large budget to devote to website design or a designer, so the best option for you might simply be to use free website templates. However, consider the following benefits as well as drawbacks before you decide to take this route of website design. 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.
|
|
2007-2008 © Copyright colorifer.com. All Rights Reserved. Free Adobe Photoshop templates. Web Design Articles | Site Map | Terms of Use 
|