Web Design Tutorials

Resources

2009-02-07T17:53:00.000-08:00

Free Website Templates

2009-01-16T23:06:00.000-08:00

Free Website Templates

Download free website templates from visualsindia.com! All the free web site template downloads include the final html files, source files, css styles, fonts and a help guide that will give you step-by-step instructions on customizing the templates. These website templates can easily be customized with your company name, navigation links and footer information. Download these simple, smart, attractive, beautiful, fast-loading website templates and get your own website up and running within a day with our simple help guide. Read our Terms and Conditions before downloading the template.

Free Fireworks & Dreamweaver Website Templates
These are Dreamweaver website templates designed in Fireworks.
Free Photoshop & HTML Website Templates
These website templates are designed in Photoshop and exported to html. The html can be edited in any html editing software like Frontpage, Dreamweaver or GoLive.
Free CSS Website Templates
These websites are fully developed using CSS div styles. They are tableless layouts.

Free CSS Website Templates

2009-01-16T23:05:00.001-08:00

Free CSS Website Templates

Download Free CSS Based Web Site Templates | Tableless Website Templates

These are websites fully developed using CSS div styles. They are tableless layouts. These website templates can easily be customized with your site name, navigation links and footer information. Download these simple, smart, attractive, beautiful, fast-loading website templates and get your own website up and running within a day with our simple help guide. Read our Terms and Conditions before downloading the template.

More Ready-made CSS Website Templates

Free CSS Web Site Template 1

Unique Black & Yellow Website Layout
Image can be easily replaced with your own image
Smart CSS based Button Rollovers
Download Now

Downloaded : 13005 times

Free CSS Web Site Template 2

Unique Black & Yellow Website Layout
Image can be easily replaced with your own image
Smart CSS based Button Rollovers
Download Now

Downloaded : 9186 times

Free CSS Web Site Template 3

Includes a free Flash & XML Photo Gallery with smooth transition effects!
Family Theme
Neat CSS based Button Rollovers
Image can be easily replaced with your own image
Download Now

Downloaded : 12352 times

Free Dreamweaver Templates and Fireworks Layouts

2009-01-16T23:04:00.001-08:00

Download free Dreamweaver templates from Visualsindia.com! All the free Dreamweaver template downloads include the Dreamweaver template, Fireworks source file, css styles, fonts and a help guide that will give you step-by-step instructions on customizing the templates. These website templates can easily be customized with your company name, navigation links and footer information. Download these simple, smart, attractive, beautiful, fast-loading website templates and get your own website up and running within a day with our simple help guide. Read our Terms and Conditions before downloading the template. Click here for Free Photoshop Templates.

Cool Website Template

Download!

Downloaded : 34926 times

Bright Yellow Template

Download!

Downloaded : 27308 times

Professional Template

Download!

Downloaded : 37993 times

Corporate Template

Download!

Downloaded : 22067 times

Simple Web Template

Download!

Downloaded : 24576 times

Personal Template

Download!

Downloaded : 30582 times

Smart Green Template

Download!

Downloaded : 19303 times

Striking Red Template

Download!

Downloaded : 21210 times

Free Photoshop Website Templates

2009-01-16T23:00:00.000-08:00

Free Photoshop Website Templates

Download Free Photoshop & HTML Web Site Templates!

Download free Photoshop and Dreamweaver website templates from entheosweb.com! All the free web site template downloads include the Dreamweaver template, Photoshop source file, css styles, fonts and a help guide that will give you step-by-step instructions on customizing the templates. These website templates can easily be customized with your company name, navigation links and footer information. Download these simple, smart, attractive, beautiful, fast-loading website templates and get your own website up and running within a day with our simple help guide. Read our Terms and Conditions before downloading the template. Click here for Free Fireworks and Dreamweaver Templates.

More Ready-made Photoshop, Dreamweaver & Flash Website Templates

Downloaded : 93910 times

Free Photoshop Web Site Template 1

Unique Black Website Layout
Eye-Catching Candles Header
CSS Text Rollovers
Download Now

Free Photoshop Web Site Template 2

Beautiful Pink and Cream Website Design
Banner including logo design
Ideal for feminine sites, fashion and beauty sites or personal sites.
Download Now

Downloaded : 22441 times

Downloaded : 14488 times

Free Photoshop Web Site Template 3

Simple General Website Template
Eye-Catching Collage Banner
Banner including logo design
Download Now

These website templates can easily be customized with your company name, navigation links and footer information.

Free Photoshop Web Site Template 4

General Website Template
CSS Text Rollovers
Banner including two images
Download Now

These website templates can easily be customized with your company name, navigation links and footer information.

Downloaded : 19815 times

Free Website Backgrounds3

2009-01-16T22:44:00.005-08:00

Free Website Backgrounds2

2009-01-16T22:44:00.003-08:00

Free Web Page Background Pictures

To download any of these backgrounds, press the right mouse button on the desired background and save it to disk.

To use this as a background in Dreamweaver, click on Modify>Page Properties from the main menu. The Page Properties window will be displayed, go to Background Image and select the background image which you had saved.

Previous 10 images

Floating Balloons

Motor Racer

Cakes

Bunny

Gifts

Teddy

Previous 10 images

Free Website Backgrounds1

2009-01-16T22:44:00.001-08:00

Free Web Site Background Images

Previous 10 images Next Page

Green Paws

Circuit Board

Crushed Petals

Pink Flowered Tile

Grey Marble

Rainbow Twinkle

Previous 10 images Next Page

Free Website Backgrounds

2009-01-16T22:42:00.000-08:00

To download any of these free background images for web sites, press the right mouse button on the desired background and save it to disk.

To use this as a background in Dreamweaver, click on Modify>Page Properties from the main menu. The Page Properties window will be displayed, go to Background Image and select the background image which you had saved.

Click on the images/links to view the backgrounds on a webpage.

Next Page >>

Tinted Butterflies

Geometric Flowers

Blue Stars

Autumn Leaves

Shells

Smudged Green

Next Page >>

Web Design Tutorials

2009-01-16T22:32:00.000-08:00

Welcome to the web site design tutorial section. Web design is a pleasure and we're sure you'll enjoy designing and developing sites with these simple tutorials and tips. These tutorials are easy to follow and fun to do! From website design tips and Web Design ideas to CSS Styles, Dreamweaver, Flash and Fireworks and you'll find all you need to know about web design right here!

Website Design Ideas
Check out these cool web design ideas!

Expandable Website Design
Designing Websites for all Resolutions

Website Design Tips
Essential web design tips that every web site should follow.

10 Tips on Designing a Fast Loading Web Site
Tips and tricks on effective web design.

Ideas on customizing Ready-Made Templates
Create a unique design for your site using ready-made templates.

Web Graphic Design Ideas and Tips
Great web graphic design ideas!

Table Tips 'n' Tricks
Live examples of using HTML tables creatively.

Website Navigation Tips
Helpful navigation tips and guidelines.

Best Web Design Software/Tools
Highly recommended Macromedia web design software.

Web Design Ideas

2009-01-16T22:27:00.000-08:00

Take a look at a variety of ready-made website templates to get some great web design ideas!

Here are some cool web design ideas you can use while designing your next web site. These are some ideas that we've used for our clients. Hope you find them useful!

Swap Images

Swap images look fantastic and are also great fun to design, so try and use them if possible. Visitors find this interactive and interesting. Illy Collection Cups and Business Template 3 are example of a site we have designed using swap images. Fireworks makes it very easy to design web sites with swap images. Click here to learn just how easy it is!

Rollover Images

Rollovers are another favorite. We try to use rollovers whenever possible - they are extremely simple and add a bit of class to a web site. If you don't want to use too many images that will result in a slower load time make sure you use text rollovers (Our menu on the right is an example of simple text rollovers). Examples of rollover images we have designed can be seen in Business Template 1.

Learn how to create image rollovers in Dreamweaver and Fireworks.

DHTML

If you have sub menus or complex navigation systems, use DHTML. They look neat and are again very simple to use. Many sites offer free DHTML scripts for menus, navigation systems, tip boxes and more. They give you detailed instructions on how to use these scripts so it is really very easy to install. A good site is SimplyTheBest. Check out the cool scripts available! Click here to view an example of a sliding menu navigation system. Click on the links in black to view the sliding menus.

Flash

Though we don't recommend designing an entire site in Flash it may be a good idea to make an interesting Flash intro or insert small Flash animations in important pages of your site. Always take care to optimize your our Flash animations. Take a look at some great looking Flash intro animations.

Eye Catching Graphics

Design eye-catching graphics to make your site stand out from the ordinary web sites. Try out some cool graphic effects - collages, feathering, bevels etc. and design attractive headers for a web site. Check out some innovative graphic headers in our ready-made template section.

More Web Graphic Design Ideas

Use Tables Creatively

Check out our article on Using Tables Creatively. Design simple but smart web sites by just using tables in different ways. We recommend using tables because they are plain html and therefore don't take much time to load. As you know time is of essence on the Internet so it really is no use designing a fantastic graphic intensive web site that will take ages to load. On the other hand with cable and high modem speeds we can afford to design sites that are a combination of all the above ideas :)


		Web Services Professional and cost effective web design, development and promotion services
Web Templates Ready-made website templates for business, travel, food, personal, sports and more...
	Entheos Unleashing the power of the web.

Portfolio Custom web design and development portfolio
			Contact Us Contact us for more details through our contact us form, questionnaire or email.

Hope you enjoyed this article. Don't miss our web graphic design ideas. Take a look at our web design portfolio for more great design ideas.

Web Graphic Design Ideas And Tips

2009-01-16T22:25:00.000-08:00

Fireworks is a really great tool you can use to create unique, attractive and professional graphics. Here are some really cool web graphic design tips you can try out using Macromedia Fireworks. Try them out and don't forget to check out our Fireworks Tips for more tips and tricks on Macromedia Fireworks.

Paste Inside

Here's a big favorite of mine. The Paste Inside property of Fireworks allows you to paste an image inside an object. You can get really amazing images in the shape of circles, hearts, ovals, diamonds etc. here's what you need to do:

Make the shape that you want using the ordinary shape tools found in your toolbar (e.g. circle, rectangle etc.)
Place the photograph within the shape
Select the image and cut it (Cntrl +X)
Then select the shape and click on Edit>Paste Inside (Cntrl+Shift+V)
The picture is now placed within the shape. If you want to move the picture within the shape, click on the white arrow in the toolbar and select the picture. Now you can move the image within the shape to get the perfect position. The image and the shape is now an object. If you select the object with the usual select tool, you can add cool effects like an inner bevel or a drop shadow. Play around with it and you can get some really professional looking graphics. You can also paste multiple images within a given shape.

Photo Optics

PhotoOptics is another cool tip on designing amazing graphics. You can adjust the brightness, color, contrast and more, using this feature. All you need to do is, select the image, go to XTras > PhotoOptics and play around with the options given. Try changing the hues, tints and brightness to get unique and attractive graphics.

Effects

Use the Fireworks Effects palette to make your graphics look different. Try out the drop shadow, inner bevel, outer bevel and glow. You can use these effects on buttons to give it a 3 dimensional look. Drop shadows look good on single images. It makes an image stand out in a page. We've used a bevel for the header and footer in our web site. Notice our web site is very simple but simple effects like a bevel or a drop shadow can make it look quite different!

Graphic Design Tips

Have you ever tried to edit an image only to get very jagged edges and an unprofessional finish? Click here to learn the trick to professional image editing.
Try using different levels of transparency to design eye-catching collages. Use the object palette in Fireworks and try out different percentages of opacity to get image transparency and merge the images to get beautiful collages.

Bonus Tip: Feather your images and merge them together to design attractive and eye-catching collages. Then paste your collage inside an object.

Expandable Website Design

2009-01-16T22:23:00.000-08:00

Designing Websites For All Screen Resolutions

Professional Dreamweaver Templates!

Tutorial on Designing for 800 x 600, 1024 x 768, 1280 x 1024 and higher

Designing web sites to fit all resolutions is a very important web design principle. Try out the Entheos site in all resolutions higher than 800 x 600 and you will find that it is designed to fit the page exactly. Therefore, visitors who have higher resolution can see more content in one page which reduces scrolling. Most web sites are designed for only one resolution. They may look perfect in a 800 x 600 resolution but if viewed in a 1024 x 768 resolution look a little empty. You'll find a lot of wasted space around it making the web site look quite small.

From our research we have found that majority of our viewers are on the 1024x768 resolutions and higher. As time goes by more and more people are going to switch to higher resolutions as seen by our site statistics. It is therefore very important to design web sites for all resolutions. That is one of the principles we follow while designing web sites for our clients. With that bit of background information, lets get started on how to design a web site for all screen resolutions.

Step 1: Decide on the lowest Screen Resolution

Before you start you need to decide on your lowest screen resolution. Your web site will have to be designed keeping the lowest resolution in mind. Through our research we have found that less than 0.5% are on the 640 x 480 resolution So we ignore that completely. The next important resolution is the 800 x 600 resolution. Some of our visitors are on this resolution so we use this as our lowest screen resolution. This means that our web site has to fit all resolutions equal to or higher than 800 x 600.

Step 2: Design Your Web Site On This Resolution

Once you decide on your lowest screen resolution you need to design your web site for that resolution This means that all your graphics will be designed for this resolution. Design your web site and export the images as you would normally do.

Step 3: While converting your design to HTML make sure all your tables are measured in terms of percentages

Important: This is the trick to developing web sites for all resolutions. You need to work in terms of percentages and not pixels. If you work in pixels you are giving an absolute measurement to a table, whereas working in percentages gives a relative measurement. The table will be a given percentage of the screen resolution.

I hope you have understood this clearly. I'd like to explain this with an example. If you were to design a site for a 800 x 600 resolution, you would probably make a table with width 800 px and height 600 px. Now if you were to design a web site for all resolutions you need to make a table with width and height 100%, so that whatever the screen resolution may be the web page will scale to fit the page. It will be 100% of the screen resolution or whatever percentage you choose to give it.

The first step is to make a table with 100% height and 100% width. You could make it 95% if you want some white space around it.

Step 4: Within the table measure cells in terms of pixels except for the cell for the content

This a another very important step. You need to give a fixed measurement to all your cells except for the content cell. You can leave this cell blank.

Simple Web Site Demonstration

Check this out at 640 x 480, 800 x 600 and 1024 x 768 resolutions

Web Site for All Resolutions

Menu Bar

Link 1
Link 2
Link 3

Content

This is a sample web site layout that demonstrates the design of web sites for all resolutions.....

Notes:

The width and height are 100%
The first and last columns are given fixed measurements of 120 px and 10 px respectively
The middle column (content column) is given no measurement so that it will scale to fit the page.
The same logic is used for rows (for the height). All the rows have a fixed height except for the content row which will scale to fit the page.

Example 2 - Only the Header

Check this out in 640 x 480, 800 x 600 and 1024 x 768 resolutions

HTML Code

100%" border="0" cellspacing="5" cellpadding="5">

(Each cell is 9%)

Step 5: Insert images and content

Once you have designed your tables in terms of percentages you need to insert your images and content. The usual layouts will probably have a logo which can come on the top left corner and your navigation buttons in the top right or left navigation bar.

For more complex layouts you will need to use background fills to design your web sites. Remember since you are designing web sites to fit all resolutions you need to position your images accordingly (for your header). The easiest principle I follow (if possible) is to use the top left and right corners for fixed images and let the middle tile according to the size of the page.

Step 6: Test your site in all the resolutions

The last step is to test your site in all the resolutions that are available on your computer. To do this you need to:

Right click on your Desktop and click on Properties
Click on the tab Settings
Under Desktop area click shift the scale to 800 x 600, 1024x768 or higher if possible
Once you have chosen the resolution you want to check the site in, click on the Test button
If you can see the bitmap clearly you can click on Apply

Check your site in all the resolutions and if it is working fine you've successfully designed and developed a web site for all resolutions. Congratulations!

HTML Table Tips

2009-01-16T22:19:00.000-08:00

Learn how to use HTML tables creatively to design attractive and fast loading web pages.

Instead of designing graphic intensive web sites that take ages to load, you can use HTML tables creatively to get a professional looking web page that loads super fast. This article discusses many useful table tips and tricks on designing a great web page. Live examples and cut 'n' paste code are also provided for you to try out some great designs. You can also check out more handy tips 'n' tricks on designing a fast loading web site.

Tips on using Tables

Always give the width for each of the cells in a table. Make sure that the total of the cells in a row adds up to the table width. This will avoid many complications.
Try not to merge or break apart cells within a table. This again causes all kinds of problems.
When using widths or heights that are less than 10 pixels insert a shim or a transparent gif (1x 1 pixel). If you use Fireworks you will find a shim in your Fireworks file, or you can just export a 1x 1 transparent image and call it a shim. This trick is mainly for a table to work in a Netscape browser.
Netscape cannot understand height in percentages, so if you ever need to give a height for your tables, make sure it is in terms of pixels.

Let's try out some cool designs using only tables

Tables with white borders

The key here is to use a transparent image(1x1 pixel) called a shim. The table is made of 3 rows and 3 columns. The width and height of the middle row is 1 pixel. The table will not take a height less than 5 pixels without you putting an image in it. Hence the magic shim. And there you have a striking table that can be used in your homepage to display your important navigation sections.

Services

Professional and cost effective web development

Products

Interactive Web Products - Flash Survey, Poll and more

Resources

Free web development resources

Contact Us

Cut 'n' Paste Code

<table width="401" border="0" cellspacing="0" cellpadding="1"> <tr valign="top"> <td bg height="100" width="200" style="color:#980000;"> Services Professional and cost effective web development </td> <td height="100" width="1"></td> <td bg height="60" width="200" style="color:#CC9900;"> Products Interactive Web Products - Flash Survey, Poll and more </td> </tr> <tr valign="top"> <td height="1" width="200"></td> <td height="1" width="1"></td> <td height="1" width="200"></td> </tr> <tr valign="top"> <td bg width="200" height="60" style="color:#D09C00;"> Resources Free web development resources </td> <td width="1" height="100"></td> <td bg width="200" height="100" style="color:#980000;"> Contact Us Contact us for more details. </td> </tr> </table>

Web Services

Professional and cost effestive web design, development and promotion services

Web Products

Interactive Web Products - Flash Survey, Poll, Guest book, Instant Quote

Web Resources

Free web resources - articles, tutorials, tips and tricks

Contact Us

Table with a thin border

Have you ever wondered how to get a nice thin border instead of the thick border that is automatically generated using the 'border' property. Or have you ever wanted only the table to have a border and not all the cells. Well the answer to this is to make a table with the width you want and 1 as your cell padding. You then have to insert the actual table inside this table with width 100%. Cell spacing should be 0 for both of the tables.

Cut 'n' Paste Code

<table width="250" border="0" cellspacing="0" cellpadding="1" bg align="left" style="color:#000066;"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="3" bg style="color:#FFE0E0;"> <tr> <td bgcolor="#000066" valign="top" width="50%"> Web Services Professional and cost effestive web design, development and promotion services </td> <td bg width="50%" valign="top" style="color:#FFFFFF;"> Web Products Interactive Web Products - Flash Survey, poll, Guest book, Instant Quote </td> </tr> <tr> <td bg valign="top" width="50%" style="color:#FFFFFF;"> Web Resources Free web resources - articles, tutorials, tips and tricks </td> <td bg width="50%" valign="top" style="color:#000068;"> Contact Us Contact us for more details - contact Us form, questionaire, review </td> </tr> </table> </td> </tr> </table>

Tables within a table - multiple tables in the same line

Here I have made a table with 2 rows and 5 columns with cell padding 2 . There are different background colors for all the alternate columns. In the first row I have written the text for the heading. In the second row I have made a table of width 100%, height 100% and cell padding 3. The whitespace between the tables is a column of width 3 pixels.
Note: You cannot make 3 different table coming one after the other in the same line. You can only make tables come one below the other. If you want many tables in the same line you have to make tables within tables.

Web Services

Web Products

Web Resources

Professional and cost effective web design, development and promotion services

Interactive Web Products - Flash Survey, Poll, Guest book, Instant Quote

Free web resources - articles, tutorials, tips and tricks.

Cut 'n' Paste Code

<table width="368" border="0" cellspacing="0" cellpadding="2" align="center" height="100"> <tr valign="middle"> <td bgcolor="#000066" width="120" height="20"> <div align="center">Web Services </div> </td> <td width="4" height="20"></td> <td bgcolor="#990000" width="120" height="20"> <div align="center">Web Products</div> </td> <td width="4" height="20"></td> <td bg width="120" height="20" style="color:#C89800;"> <div align="center">Web Resources </div> </td> </tr> <tr valign="top"> <td bgcolor="#000066" width="120"> <table width="100%" border="0" cellspacing="0" cellpadding="3" height="80"> <tr bg valign="top" style="color:#FFFFFF;"> <td> Professional and cost effective web design, development and promotion services </td> </tr> </table> </td> <td width="4"></td> <td bgcolor="#990000" width="120"> <table width="100%" border="0" cellspacing="0" cellpadding="3" height="80"> <tr bg valign="top" style="color:#FFFFFF;"> <td> Interactive Web Products - Flash Survey, poll, Guest book, Instant Quote </td> </tr> </table> </td> <td width="4"></td> <td bg width="120" style="color:#C89800;"> <table width="100%" border="0" cellspacing="0" cellpadding="3" height="80"> <tr bg valign="top" style="color:#FFFFFF;"> <td> Free web resources - articles, tutorials, tips and tricks. </td> </tr> </table> </td> </tr> </table>

Table using the border property

Here's the simplest way to make a table with a border. Use the border property to give a border for all the cells. Neat and clean, this is the easiest way to create a table with a border. Note: The border has a grayish tinge when viewed in Netscape.

Web Services

Professional and cost effective web design, development and promotion services

Web Products

Interactive Web Products - Flash Survey, Poll, Guest book and more.

Cut 'n' Paste Code

<table width="300" border="1" cellspacing="0" cellpadding="3" border style="color:#980000;"> <tr> <td bg width="50%" style="color:#FFF4F4;"> Web Services Professional and cost effestive web design, development and promotion services </td> <td width="50%"> Web Products Interactive Web Products - Flash Survey, poll, Guest book, Instant Quote </td> </tr> <tr> <td width="50%"> Web Resources Free web resources - articles, tutorials, tips and tricks </td> <td bg width="50%" style="color:#FFF7F7;"> Contact Us Contact us for more details - contact Us form, questionaire, review </td> </tr> </table>

Merging Cells in a table - Try out a jazzy table like this in your homepage.

You can also try merging and breaking apart cells to get some really cool designs. Be careful when trying out this method, as you can lose control over the table. Merging and breaking apart cells make use of the 'rowspan' and 'columnspan' properties of HTML.


		Web Services Professional and cost effective web design, development and promotion services
Web Products Interactive Web Products - Flash animation, Flash programming, Instant Quote
	Entheos Your key to a powerful Net presence

Web Resources Free web resources - articles, tutorials, tips and tricks
			Contact Us Contact us for more details through our contact us form, questionnaire or email.

Cut 'n' Paste Code

<table cellspacing="0" cellpadding="5" width="400" border="0" align="center"> <tbody> <tr valign="top"> <td colspan="5"></td> <td bgcolor="#ffcccc" width="54"> </td> <td colspan="2"></td> </tr> <tr valign="top"> <td width="6"></td> <td bgcolor="#88bbbb" width="56"> </td> <td colspan="2"></td> <td bg colspan="2" rowspan="2" style="color:#cc3333;"> Web Services Professional and cost effective web design, development and promotion services </td> <td bgcolor="#ddaaaa" width="3"> </td> <td></td> </tr> <tr valign="top"> <td bgcolor="#99cccc" width="6"> </td> <td bg colspan="2" rowspan="2" style="color:#006666;"> Web Products Interactive Web Products - Flash Survey, poll, Guest book, Instant Quote </td> <td width="20"></td> <td colspan="2" rowspan="2"> </td> </tr> <tr valign="top"> <td width="6"></td> <td bg colspan="3" rowspan="3" style="color:#254D78;"> Entheos Your key to a powerful Net presence </td> </tr> <tr valign="top"> <td colspan="2"></td> <td bgcolor="#77aaaa" width="54"> </td> <td bgcolor="#B9D3EC" colspan="2" rowspan="2"> </td> </tr> <tr valign="top"> <td width="6"> </td> <td bg colspan="2" rowspan="4" style="color:#FFCF63;"> Web Resources Free web resources - articles, tutorials, tips and tricks </td> </tr> <tr valign="top"> <td bgcolor="#FFE3AD" width="6" rowspan="3"> </td> <td rowspan="3" width="20"> </td> <td width="10" bgcolor="#BDD3EF"></td> <td colspan="3" bg rowspan="3" style="color:#357CC4;">Contact Us Contact us for more details through our contact us form, questionnaire, review </td> </tr> <tr valign="top"> <td width="1" bgcolor="#BDD3EF"> </td> </tr> <tr valign="top"> <td width="1"> </td> </tr> </tbody> </table>

Using tables to design lines

This is a nice design because it has a lot of white space. Remember that white space really makes a site looks clean and readable. Again I have made tables within a table to get the best effect. Try to do this one yourself using the techniques I have describe above. Don't use any images. Only use HTML code. Remember to use a shim. Have fun.

Web Services

Professional and cost effective web design, development and promotion services

Web Products

Interactive Web Products - Flash animation, Flash programming, Instant Quote

Web Services

Professional and cost effective web design, development and promotion services

Web Design Tips

2009-01-16T22:16:00.000-08:00

Useful Tips for Effective Web Design

Here are some essential web design tips that every web site should follow. Design your web site by following these tips and I guarantee that visitors will have a great first impression of your site.

Fast Loading web site designs - This is the number 1 tip that every web designer should follow. You might design a web site that looks fantastic but few people are going to see it if it takes a long time to load. Your designs should be optimized for the web and should not take more than 15 seconds to load. Remember, you might have a great design but very few people are going to see it if it takes a long time to load. Click here to for 10 tips to fast-loading web pages.
Clear Navigation - Once a visitor has come to your site you need to make them go through your site. To do this you need to have clear navigation. Make sure all your important links are at prominent places. Preferably right on top - that's usually where a visitor first looks. Make use of menus on the right and the left. Try to link to as many pages of your site. Let your information be accessible from all parts of the site. You never know what a visitor may be interested in. Try to also use the footer for your important links. Click here for navigation tips.
All Resolutions - Today, there are computers with all kinds of resolution. They range from 640 x 480 to 1024 x 768 and go even higher. Your job is to design your site for all these resolutions. The best way to do this is to design your site in terms of percentage and not pixels. Click here to learn how to design websites for all screen resolutions.
Browser Compatibility - Make sure your site is browser compatible. Your web site should look good in Netscape as well as in Internet Explorer. Don't stop designing your site as soon as you find that it looks great on IE. Usually Netscape gives some problems, especially when you try doing complicated HTML designs. But don't give up too soon, usually with patience these problems can be easily fixed.
Readable and professional looking fonts - Don't ask me how many times I've clicked out of a site just because the font is in Comic Sans and the color is a bright pink or green. Just by looking at the font you feel that the site is not a professional site. Don't use Comic Sans and other fancy fonts that may not be available on most computers. If the font you use is not available in a visitors computer the web site will use the default font of your computer which is much worse. So try to keep to common and professional web fonts. The fonts that I always stick to are Arial and Verdana.
Minimize the use of images - I believe that sometimes simple designs are the most effective for the web. Keep your site simple but neat. Don't clutter your page with big, bulky images that take ages to load. Instead use tables creatively and design eye - catching icons that will draw a visitor's attention to a particular section of your site. Tip - Visitors are usually more interested in content than in design.
Use of white space - Try not to clutter up your page with too many images, backgrounds and colorful fonts. Again use the Keep It Simple principle by minimizing the use of graphics and using a lot of white space. White space gives a sense of spaciousness and overall neatness to a site. Notice the white space in our site.
Check for broken links - Always check for broken links within a site before uploading it to your web server. In Dream weaver you can check for broken links by right clicking on any file in the Site Files Window and then clicking on Check links - Entire Site. If you don't have this facility you need to upload your site and then check it using online tools like Net Mechanic.

Website Navigation Tips

2009-01-16T22:11:00.000-08:00

Website navigation is the most important aspect to consider while designing a website. The primary aim for effective navigation is get your visitors to stay in your site and also for visitors to easily find what they are looking for easily and quickly. Designing effective navigation can also entice your visitors to try out the other things you offer on your site. In this article we will look at some of the basic guidelines you need to follow while designing the navigation of a website.

Effective Navigation Guidelines

While designing the navigation for your site keep the following points in mind:

Organized Links
Make sure your links are well organized according to the order of importance. Visitors should be easily able to find what they are looking for under different categories.
E.g. All our main links are found on the top i.e. our services, products,portfolio, resources etc.Other interesting links are found on the right of the page. These are common and consistent throughout the site.
Finally if the web page belongs to a guide E.g web design guide you will find the related links below the right menu and also at the bottom of the page.

Note: Related links are very important as visitors coming to a particular page will probably be interested in more information you have under the same topic.
Clear and Prominent
Once you have decided on your navigation links, you need to think of the best place to put them. Navigation should be clear and consistent. Try to design your navigation on the top or on the left as these are the first places our eyes go to. Also locate the primary links high enough on the page so that they are visible without scrolling. Navigation images should be seamlessly integrated into the site design. Avoid putting navigation links at the bottom of the page as visitors will need to scroll right down to see the links. If you like you could put the important links at the top AND bottom of the page just to make sure your visitors don't miss the link.
Consistent
Navigation should be clear and consistent. The important links of your website should be on every page, in the same location, and in the same sequence. Don't confuse your visitors by putting your navigation links in different places in different pages.
Easy to understand
Make your links easy to understand and to the point. Usually you won't have enough place to have long links so make use of the space wisely. Visitors need to know where they will go on clicking on a particular link, so make sure your links are understandable or nobody is going to click on your links, which will defeat the purpose of designing a good navigation system.
DHTML Menus
If you have a large number of links under categories and sub-categories you could use navigation menus to organize your links. There are many cut 'n' paste scripts available on the Net that you could use to create great navigation systems. A favorite resource center is SimplyTheBest.net, you'll find tons of useful navigation menus that are very easy to install on your site.

Keeping these basic points in mind you can go ahead and design an effective navigation system for your site. Take a look at other sites to get some ideas on good navigation techniques! Another good idea would be to use eye-catching visuals and small chunks of information to draw visitors to click on a link.

You could also take a look at our portfolio to see the clear and consistent navigation we have designed for our clients, that help visitors find what they want easily and quickly.

10 Tips on designing a fast loading website

2009-01-16T22:09:00.000-08:00

Tips and tricks on effective web design

The Number 1 rule that every web designer should follow is to create a fast loading web site. You might have a great design but very few people are going to see it if it takes a long time to load. While designing a web site always think about how long it will take to load. Try out our tips to build a great looking web site that also loads fast.

Minimize the use of images - The key to a fast loading web site is to minimize the use of images. Images do enhance a page but don't make 80% of your web site only images. Instead break it down as much as possible to simple HTML. Notice the popular sites like Yahoo, Google, Ebay, Amazon etc., they have very few images because the load time is more important. Very often simple designs are the best.
Optimize images for the web - Once you have decided on the images that you need on your site, make sure that it is optimized for the web. They should be in the gif or jpeg format. You can also minimize the size of the image by choosing the number of colors you need, from the color palette. The less the colors you choose, the less the size of the image. You can also use online tools like Gif Wizard to optimize your images or to get a recommendation on how to cut down the size of an image.
Use Tables creatively - You can get some great looking designs by using tables creatively . Tables load very fast because it is just HTML code. Tables can be used in the homepage, menus or anywhere you like. Check out our homepage and our menus to see how we have used tables in our site.
Read more on Using HTML Tables Creatively
Cut down the use of animated gifs - Don't use animated gifs unless it is necessary. Animated gifs take a long time to load and can also be very irritating. But since they catch your attention you could use small animated gifs to draw a visitor's attention to a particular section of your site.
Design simple icons - Instead of using big, bulky images use simple and small icons that add a little color and draw the attention of a visitor. We have used small icons in our homepage to highlight the main sections of our site.
Use background images instead of big images whenever possible - Use background images whenever possible. This is usually a very useful tip for headers and footers. Instead of using an image of width 580 which is a uniform design you can use just a part of that as a background fill. This reduces the size of the web page as the image is small. The code will look like this :
Try out CSS Styles - Have fun with CSS styles to get some cool text effects. Again, a CSS Style is simple HTML code so it loads very fast. You can create cool rollovers using CSS Styles.
Rollover the text on the right menu to see how we have used CSS Styles to get a simple but nice text effect.
Check out our CSS Styles tutorial for more cool tips on CSS Styles
Use Flash sparingly - There seems to be a lot of hype about Flash but I recommend that you minimize the use of Flash on a site. Don't make entire sites using Flash. It may look great but it takes hours to load and can really put off visitors. If you do want to use Flash use it within an HTML site and make sure it loads fast.
Design most of your site in HTML - As much as possible try to design your site using HTML. You can create great designs by just using HTML code. Use tables, CSS Styles and simple fonts to design your site. Minimize the use of animated gifs, Flash, bulky images etc.
Keep checking your load time - Last but not least, before you decide on the final design of your web site, check its load time on NetMechanic. This site gives you a free analysis of your web site which is extremely useful. We kept using it to improve our site till we got a report that said good loading time!

We learnt these tips while building our web site. We've enjoyed sharing them with you and hope that you found them useful.

Ideas on customizing Ready-Made Templates

2009-01-16T22:04:00.000-08:00

Website template customization ideas. Get ideas on how you can customize ready-made website templates to suit your area of business and your individual tastes and preferences.

Important point to Note: You don't need to necessarily search for a template under a specific category that relates to your business. You can choose any template where you like the layout and get it customized to suit your business. Navigation links, pictures and colors can easily be changed. This is something I recommend my clients as they may not find the template in their category. If you have pictures relating to your web site, we can easily customize any template of your choice from any category.

Live example of a customized template

Before

After

Business Template 1

$39.95

Mosa-Rentals

Customization

There's a lot you can do with ready-made website templates and it can be completely changed to give a unique special design to your website. Here are the things you should look at doing when you purchase a template.

Add Your Logo
The first thing you should do is add your logo to the site - E.g. we added the logo to Visualsindia which is a customization of Business template 9. As you can see simply adding the logo and header changed the look of the template and made it unique to the client. We also added an extra menu on the left to add additional links.
Change The Pictures
The next thing you need to do is change the pictures to pictures of your organization or business. For e.g in the above example we have added a picture of the individual who owns the site. This gives a personal and unique look to the site.
Customize the Colors of the Template
Once you have added your pictures and logo, you can customize the colors of the template to suit the pictures. You will see that just by changing the colors of the template, it looks unique and different. Alternatively, you can choose a color theme that you like from another template and customize your template with those colors. E.g. www.mosa-rentals.com which was a customization of Business template 1 has used the template colors of Family template 7
Customize the Navigation Links
Customize the links to the names that you would like them to be. For example even if you choose a travel template you can use it for a food website just by changing the pictures and navigation.
Add Scripts or Design Elements
Add a unique homepage like we added to www.mosa-rentals.com. Using the same layout idea we added a unique homepage. You can also add drop-down menus, swap images, photo-galleries and much more!

Best Web Design Software / Tools

2009-01-16T22:02:00.000-08:00

Here's the best web design software available in the market today. We highly recommend using these web design tools to develop professional and attractive websites.

Through experience we find that the best web design tools are all Adobe products, and we highly recommend everyone interested in web site development to use these tools. Here's a small introduction to these cool Adobe products.

Adobe Dreamweaver CS4

Rating

Adobe Dreamweaver CS4 is the best web site development software/tool available today. If you are a professional web designer looking for a rapid application tool to design web sites, this is your best bet. We've been using Adobe for a long time and highly recommend it to everyone who is interested in learning web site development. This tool generates HTML code for you, (so you don't have to be an expert HTML programmer to develop a web site!). Cool stuff possible using Dreamweaver includes rollovers, css styles, server side includes, templates and much more.

Tips on Adobe Dreamweaver

You can download the 30 day free trial version from the Adobe site and try out the software.

Dreamweaver Creative Suite 3. Design, develop, and maintain standard-based websites. Order Now!

Adobe Photoshop CS4

Rating

We highly recommend using Adobe Photoshop CS4 to design web sites. We use this tool to design web site layouts. Photoshop is also great for optimizing images and exporting them in the gif or jpeg format. Great features in Photoshop include cool effects, great textures, text effects and other cool stuff.

Here's how we use Photoshop:

We design our sites in Photoshop to get an idea of what the finished site will look like. We then send these layouts to our clients in the form of gif and jpeg images. Once the client approves a particular layout we use Dreamweaver to convert these layouts to HTML.

Adobe Photoshop Tutorials

You can download the 30 day free trial version from the Adobe site and try out the software.

Photoshop Creative Suite 3. Create powerful images with the professional standards. Order Now!

Adobe Flash CS4

Rating

Adobe Flash is the best software to use for web site animation. It has gained a lot of popularity and there seems to be a huge demand for Flash web sites. The reason Flash is so popular is because you can do fantastic animations while still keeping the file size low and so that sites can load fast. If you are interested in developing web animations Flash is without a doubt the best. There is also a huge online community of Flash developers so if you have questions or need resources like articles, tutorials, sound loops, flash files - it is all readily available on the Internet.

Popular Adobe Flash Tutorials & Resources

You can download the 30 day free trial version from the Adobe site and try out the software.

Flash Creative Suite 3. Create and deliver rich, internet content. Order Now!

Adobe Creative Suite 4

Rating

Adobe Creative Suite 4 is the best software bundle for graphic and web design. It includes all the software needed for web design and development. The softwares included are :

Adobe Dreamweaver CS4
Adobe Photoshop CS4 Extended
Adobe Flash CS4 Professional
Adobe Illustrator CS4
Adobe InDesign CS4
Adobe Acrobat 8 Professional

You can download the 30 day free trial version from the Adobe site and try out the software.

Creative Suite 3 Design Premium. Deliver innovative ideas in print, web, and mobile design! Order Now!