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 disadvantage is that many template-based websites look homogenized and seem to lack a unique character. Designers who sell templates tend to use the same formats over and over again, insert the same generic images, and use the same techniques.
Just as important, templates are often not ready-to-go right out of the box. They almost always need modification, and often modifying a professionally prepared template is difficult because the designer will have used techniques you may not fully understand or are specific to the tools he or she used to create it.
So it is preferable not to think of a web template as the kind of thing you buy from an online template store. Rather just think of it as a basic page format that can be used over and over again. The best template is therefore one that uses "standard" techniques that can be modified without the use of specialized tools or programs (like Front Page or Dreamweaver).
Creating a Basic Template
If you are not familiar with web design, try working with a "bare bones" template to begin with. There are two ways you can go. You can work with basic html and tables, or you can create your basic template with CSS. Since CSS is rapidly becoming the new standard, it is probably better to begin with CSS -- especially if you have not yet become used to constructing web pages with tables.
CSS stands for "Cascading Style Sheets", but at the beginning it is not important to understand what that means. What is important is to understand that CSS allows you to create a set of formatting parameters in a "style sheet" (a seperate file) which you then can very easily apply to your individual pages. In other words, you seperate the "style" from the "content".
A simple style sheet can contain just three or four design elements. Here is an example which you are free to copy (right click and "Save target as" to a location on your hard drive, then change its name to "sample-1.css".)
Style Sheet Sample (be sure to change its name to "sample-1.css").
This template contains a definition for the body text, a header component (with a background image), a "navbar", and a definition for two headline styles, h1 and h2.
Now that you have a style sheet you can begin building your web site by creating a basic home page. Here is an example which embeds the style sheet referred to in the previous paragraph. You can get the html code by just opening the page in a browser window, looking at the "Source" code, and saving the resulting file on your hard drive as, for instance, "sample-1.html".
Now you should have two files in the same location on your hard drive -- "sample-1.css" and "sample-1.html". You can get the image file by just right clicking on the image in the sample page and saving it to the same location on your hard drive.
Your second step will be to create the pages referenced in the "navbar", so make sure you think of names for these pages before proceeding (e.g., howitworks.html, products.html, about.html, sitemap.html, contact.html). Then build your hyperlinks into the navbar. (Look at the code of the sample file to see how it is done.)
Once you have your basic home page with links, this then becomes your template. Just save it as "howitworks.html", "products.html", etc., and make the changes to the specific pages.
The result (once you upload it all to your host server) will be a basic, functional website containing a number of properly interlinked pages. It will also be search engine friendly because the design is not cluttered with scripts, and the most important elements are clearly laid out at the top of the page.
For more web design tips and techniques see the Linknet Marketing Resource Library.
Rick Hendershot is a marketing consultant, writer, and internet publisher who lives in Conestogo, Ontario, Canada. He publishes several websites and blogs, including The Linknet Network of Websites. This network provides an inexpensive way to advertise your website, and get as many as 100 low cost links.
|
|
|
Created & Maintained by Empower! CMS Web Sites
Host2Sell Web Hosting | Emarketing Workshops | Site SEO Review | FREE NewsletterCreating Your First Website
Building your first website can be very frustrating. It looks fairly easy, but almost always turns out to be more complicated than you expected.The problem is, building a website requires technical know-how that you have no way of acquiring until somebody explains it to you. And technical peo...(related: Web Design)
Introduction To Cgi Scripts
Using CGI scripts to add automation to your web site may seem a little daunting, but once you have incorporated a few into your web site, they become easier.The best way to start is to add a simpler script. A great site for cgi scripts is cgi-resources.com. You can find mostly free and some fee scripts for mail forms, classified ads, web site management, homepage communities, banner rotation, time and date, polls, password protection, MLM, mailing lists, shopping carts, running your own affiliate program, your own site search engine, and hundreds more.Some of these scripts are fee based,...(related: Web Design)
Website Re-design?
My site is working fine. The links work. Content is added regularly. We have new features. Why does my company need a re-design?Those are all great things. Sites should be updated regularly, have new features added, and by far h...(related: Web Design)
How To Create A Favicon For Your Web Site
One of the simplest things you can do to give your site 'identity' and to make it stand out from other sites is to use a favicon (favourite icon). They are the little logos that go next to the website listing in your favourites folder, and pop up in other places, (depending on your browser and operating system). To see one, go to www.bigwowwebhosting.com. Bookmark the site, open another browser window and then go to open the bookmark you have just made. The 'B' next to the words 'Big Wow Web Hosting- Home' is the favicon.Want one? Just follow these 3 simple steps:1) Choose the logo you want to use for your favicon. ...(related: Web Design)
How To Shop For A Web Design Firm?
While few companies can boast as we do that our first ten clients are still with us today, many companies often change Web design firms to get a new perspective on how their Web presence could look and perform. The following paragraphs serve as a Buyer's Guide to use when shopping for a new Web design company.First, determine what exactly you're shopping for. Is your Web site down a lot? Do you frequently have email problems? This may or may not be your Web site designer's problem. Many design firms outsource their Web site hosting operations and if that's the case, you may just need a new Web host. While most com...(related: Web Design)
Images: How To Make Them To Load Fast On Your Web Pages?
1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs.2. Use 'Height' and 'Width' tags for your images. So while page loading certain place is left for the images and visitor can go through the content while images are loading.3. If you are using large images, slice them up and make them load as part after part. For this you can use img tags like HSPACE=0 and VSPACE=0.4. Use image compression software that reduce image size. Remember, the more you reduce your image size more will be the loss of...(related: Web Design)
6 Tips To Improve Your Business Website
There are six important characteristics that can play a major role on the impact your website has on prospects. Outlined below is the importance of each characteristic and tips on how to maximize your potential. It is always important to tailor everything you do to what your customer is expecting, doing so will help keep you one step ahead of the competition.Convenience ? Allowing your customers to make decisions at their convenience is a very powerful element. Nobody wants to feel pressured or hurried into making a buying decision. When a customer can go to your website, browse your products and services, and make a purchase at their convenience, you are satisfying a crucial consumer obstacle -- t...(related: Web Design)
Website Background Colors And Graphics: What You Need To Know Before Designing Your Website
Designing your website means you have to be creative, plan out exactly what you want visitors to see, and then turn these ideas into a design or relay them to a design firm so they can do the job for you. However, the problem with this is you might be coming up with a lot of ideas that are not going to work for you when it comes to the design on your web page. Do some research first about what a good design includes and what a bad design includes. Then, you might be better able to design a great website. Consider the following suggestions before you start coming up with design ideas so you will be sure to leave this out.Tip #1 - Don't DistractFor some reason, many webmasters think it is a great idea to put a background picture of whatever their subject matter is and then put the tex...(related: Web Design)
Love At First Site: Giving Your Website Visitors The Right Impression
Think of the people who visit your site as blind dates. When youopen the door, your blind date usually knows whether they areattracted to you within the first minute. How do they know? Easy.By how you look, what you say, and how you treat them. If youopen the door wearing the same clothes you wore in 1987, say,"Wow, from my friend's description, I ...(related: Web Design)
Website Advertising: 10 Dynamic Tactics To Super-charge Your Sales
Here are 10 dynamic website advertising tactics to super-charge your sales, starting now:1. Test different web site color themes to see whichcombination will sell your product better. You canalso test the size and styl...(related: Web Design)
15 Website Elements That Attract Visitors
Here is a quick list of components that make a websiteattractive. They are listed in layers of attractivenessbeginning with the "must" haves, to "nice to haves."1. State the website's purpose up front and clearly of thesite. Do this as quickly as possible. The visitor needs toknow immediately if they have landed on the right site.They also need to know "what's in it for me to stay here."If you don't provide this, they are gone. 90% of the siteson the Net don't do this.2. Give visitors the ability to search for exactly whatthey are looking for, if they have something exact inmind. A "site search feature" satisfies this best. Allowthe search feature to be prominently displayed and nothidden away somewhere. It is best place in the navigationalsystem so that it shows up on every page. Sales letter onlywebsites are an excepti...(related: Web Design)
site-map - Copyright © 2006 Empower! Web Design | All Rights Reserved. | Web Design