Posts Tagged ‘menu’

PLAN A WEBSITE

in Web Design Basic |

In creating a website we should plan first what is the purpose of making of this website, what information will be provided and to whom information is addressed. Macromedia Dreamweaver is one website making program that have a lot of menus and tools that can be used to design websites that are more creative, you can create a complete site. To get better results, you must design and plan in advance for your website each existing site pages. you may configure your webhosting for best web performance

When starting to plan to create a website, you need website hosting are expected do it gradually and systematically to ensure your site well and successful. Although you will only make homepage person who will only be seen and visited by friends and your family. For those of you private site lecturer, you can use to provide information and services online teaching for your students.

Determine your site goals is the first step that must be you take to making a website. Ask yourself or your colleagues on a website. What do you expect when you have a personal site? Write down all your goals and expectations so that you can remember when the process of designing websites. Goals will be helpful for you to stay focused and have target of the website you want. A website that provides news with a particular subject is very different from the websites that sell products or commercial.

After you determine what you want to accomplish your website, you must determine who is, or target Your site visitors. Actually this is a stupid question, who alone in the world can visit your site. Many people use browser is different from one another, at different speeds, and have or do not have media plug-in additional (example = speaker). All these factors may affect the use your site. Then you must determine the target audience, after which can design your website. Choose your web hosting directory wisely.

Website Navigation

in Web Design Tips |

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.

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.

CSS Text Rollovers

in Web Design Tips |

CSS Styles are a simple and fast way of making your site look good. In this tutorial you will learn how to make cool text rollovers.

The trick is to use the a:hover style! If you work with Dreamweaver the steps to follow are given below:

  1. In your style sheet choose New
  2. Next choose Use CSS selector
  3. In the drop down menu choose a:hover
  4. Finally, Define your style. You can choose your font, color, bold, underline etc.
  5. You’re done it! It’s easy and fast and really cool!

Text Rollover Effect throughout the site

Copy this code between the head tags

<style type=”text/css”>
<!– a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #990000} –>
</style>

Text Rollover Effect in a particular place of your site

Step 1: Paste this code between the head tags

<style type=”text/css”>
<!–
.links { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #003399}
.links:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FF8B22; text-decoration: none}
–>
</style>

Step 2: Select the link style for the link. An example of the code is given below:

<a href=”link.htm” target=”_parent” class=”links”>Entheos</a>