web designing tools tips and resources

Welcome to my Web page!

By using HTML tags I can make my text italic, or bold, or underlined.

Notice the <tags> above:

The tag "<b>" means "Start printing bold text."
The tag "</b>" means "Okay, you can stop doing that bold thing I said before."

A starting <tag> and an ending </tag> control what is between them. As in this example, almost all tags come in pairs (but, unfortunately, not all of them).

A very important kind of tag is called a "link." Links are why HTML pages are not just another kind of word processing document, with styled text. Among other things, links allow the viewer of the page to move:

To another part of the current page (as the links at the top of this page do),
To another page on your site,
To another location on the Internet.

Here is what a link looks like in plain text, and when viewed in a browser:

Web Editor (plain text)


<a href="http://www.yoctowww.com">
	GO TO yoctowww HOME PAGE
</a>

Browser

GO TO yoctowww HOME PAGE

The browser display at the right contains the display version of the link, and if you click it (and if you are logged onto the Internet), you will go to the yoctowww Home Page.

Notice that there are two parts to a link:

The actual Internet address: "http://www.yoctowww.com".
A human-readable label that stands for the address: "GO TO yoctowww HOME PAGE".

To work as intended and meet people's expectations, your links should always have both parts.

Browsers

A browser is a software program that displays web pages. One of the first things about the professional Web site design is understanding that your site will be viewed on a variety of computer platforms and browsers. Mostly it doesn't matter, but occasionally it does. The platform issue is much less of a concern than the browser issue.

As to browsers, both the version of the software and the brand are essential. Different browsers display the same page in different ways (or sometimes don't display it at all). Older versions don't support all the new tag additions and modifications. They just ignore any tags and attributes they don't recognize.

Always check your Web design on at least the latest versions of the most popular browsers - Internet Explorer and Firefox. While no site looks identical on all monitors, browsers, and computers, you can design sites that look good on all, but only if you test the site on all. There are a huge number of browsers available for free e.g.

Internet Explorer Mozilla Firefox Google Chrome Opera

HTML Editors

The three ways you can build a web page

1. Use a pre-made template: WHAT IS A WEB DESIGN TEMPLATE?

A web site design template is a pre-made website design template which can be customized to reflect your company's branding. Website design templates can be found in various formats like Photoshop and HTML. Many times, these templates are compatible with HTML editors like GoLive, FrontPage, and Dreamweaver.

Web site templates can be very useful; they can be used by experienced web designers to 'jump-start' the creation of a website. They are also a way for people to put out great-looking web sites quickly with little or no knowledge of HTML and web design.

2. Use an HTML editor like FrontPage or Dreamweaver:

HTML editors make building web pages feel like (to a certain extent) creating a document in Microsoft Word ... it's made pretty easy. But the downside is that you lose a certain amount of control of what you're doing and in some cases become dependent on the program. Some famous HTML editors include:

Microsoft Frontpage Macromedia Dreamweaver Details

3. Hand-code your HTML in a text editor like Notepad:

That means you type in the HTML code yourself. This is the approach, because it's the quickest way to learn how to build web pages, and it is arguably the best way because you have the most control over what you're doing.

Online Website Builders

Online website builders are easy to use tools which anyone can use to build professional looking websites and have them hosted instantly. Some of them even enable creating free websites. No software to buy, no code to learn, all you need is to be a little Internet savvy and know how to click your mouse.

If you're a pro, online website builders will save you weeks of work and allow you (or your clients) to easily maintain the site.

Online website builders are the perfect solution for people who...

NEVER created a website before.
Don't have any skills or programming experience.
Want a website FAST but without any hassles or headaches.
Want to save money by having everything needed in one single place.

Online website builders usually come with dozens of professional Web page templates and provide you an option to further customize them with your own colors, fonts, images, etc. You can build your own professional looking website in minutes rather than weeks or months, when using traditional HTML editors.

Even expensive WYSIWYG HTML editors won't help you to quickly design a professional Web page. They are fine for editing existing layouts, but provide not so much help for creating them from scratch.

The reviewed products are divided into two categories...

Free Website Builders
If you are new to site building and just want to try it for free, you can use these products as free easy website builders - in addition to paid services, they enable creating free websites with some limitations.
Business Website Builders
These tools are rather comprehensive ecommerce platforms for those who want to build a professional, popular, and profitable Web business (not just a website).

SBI is a highly recommended tool for business website developers with very less web development knowledge and need to build a business with higher success rate.

For details please visit SBI Home Page

web designing tools web designing tips web designing resources web designing web designing tools web designing tips web designing resources web designing web designing tools web designing tips web designing

Loading time

One of the most significant problems that faces Web designers is slow loading time, which often annoys users to the point where they give up and go to another site. So it is extremely important to design your pages to load as quickly as possible, which means keeping page sizes as low as possible.

Internet users are the least patient people in the world, and if your site is slow, they know they can get the information, products, or services they desire at another site.

Keep your graphics down to a reasonable size.

You can decrease the loading time of your Web site by using common images on your pages, because the images which have already appeared on a previous page will be loaded from browser caches, rather than from the server itself.

If you need to change images from page to page, try to use common elements from other pages. This Web design tactic is especially useful for title bars, which can be broken up into individual images. When a new page is loaded, the elements from the old page are loaded from the cache, leaving only the new elements to be loaded. See Web Page Design Tips for useful tips on web page designing and Web Page Backgrounds gives tips on choosing backgrounds for designing web pages.

Consistency

When developing professional Web site design, consistency is the most important thing to keep in mind. Nothing is more unprofessional in Website design than a different colored background for every page. Backgrounds, colors, fonts, navigation buttons all need to present your site visitor with a uniform appearance.

A consistent Web site not only lets users know where they are, but can also help build a "brand" so your site is recognizable.

Navigation

Regardless of the best Web site design or highly informative content, if your site isn't easily navigable, all your hard development work will be worthless.

Keep navigation simple, and make sure it's consistent from page to page. No matter where you place your menu bar, always include a small text menu at the bottom of every page. See Website Navigation.

Fonts

If your site is straying from the standard fonts that everyone has installed on their computers (such as Arial, Verdana, Times New Roman) the viewer won't see your fonts as intended.

Your users' computers will display your site in their default fonts. So stick to standards. For details see Web Fonts.

Resolution

Most of professional Web site designers have better systems than their audience has. The norm these days seems to be 1024x768 although there are still a small number of people using 640x480 or 800x600, mostly because they don't realize they have the ability to switch into a higher resolution.

If your page exceeds either of those numbers, the browser will display a scrollbar. If your page is more than the browser's width, a horizontal scrollbar will be displayed. If your page is more than the browser's height, a vertical scrollbar will be displayed.

People usually assume that most pages will have a vertical scrollbar, and are using it to scroll down pages. But many despise the horizontal scroll, and will often complain if they are forced to use it.

It's a good idea to design your entire page for 800x600, but keep the width of text within 640 pixels. People with older computers will still be able to read your content, even if some parts of the page require scrolling.

Web Graphics

Here's the least you need to know before choosing the most appropriate Web graphics software...

Vector and Bitmap

When you want to create original Web graphics, you can use either a vector drawing application or a bitmap painting program. Here are the basic properties of vector images and bitmap images...

What is a vector image?

Vector images are defined mathematically as a series of graphical elements that are called objects. Each object is a self-contained entity, with properties such as color, shape, outline, size, and position on the screen included in its definition. Vector programs also allow you to incorporate bitmaps into your drawings.

Since each object is a self-contained entity, you can move and change its properties over and over again while maintaining its original clarity and crispness without affecting other objects in the drawing. These characteristics make vector-based applications ideal for illustration, in which the design process often requires individual objects to be created and manipulated.

Vector-based drawings are resolution independent. This means that they appear at the maximum resolution of the output device, such as your printer or monitor. As a result, the image quality of your drawing is higher if you print from a 600 dots per inch (dpi) printer than from a 300-dpi printer.

Unfortunately, vector images aren't really very practical to use on a Web site because Web browsers can't display these kinds of images unless a plug-in or helper application has been installed on your visitor's computer. But that doesn't mean you should avoid designing your Web graphics with a vector-based program since major vector graphics software can export your work as GIF or JPG images.

What is a bitmap image?

Bitmap images, also called raster or paint images, are made of individual dots, called pixels (picture elements), that are arranged and colored differently to form a pattern. When you zoom in, you can see the individual squares that make up the total image.

Bitmaps have a fixed resolution so a bitmap looks best when you display or print it at its original size. Increasing the size of a bitmap has the effect of increasing individual pixels, making lines and shapes appear jagged. Reducing the size of a bitmap distorts the original image, because pixels are removed to reduce the overall image size.

The color and shape of a bitmap image appear continuous when viewed from a greater distance. Because each pixel is colored individually, you can create photorealistic effects, such as shadowing and intensifying color.

However, because a bitmap image is created as a collection of arranged pixels, its parts cannot be manipulated (e.g., moved) individually.

Up-to-date, graphics-capable Web browsers can display graphics saved in the following bitmap-based file formats: GIF, JPG, and PNG, without the need for special browser plug-ins. For more information on this, see Web Graphics Formats. Older browsers only supported GIF and JPG file formats.

Newer bitmap painting programs support vector graphic editing. They let you create text and other objects that can be freely distorted without losing image quality.

Vector-based programs such as Illustrator, CorelDraw, and CorelXara are the best Web graphics software for creating custom text and illustrations.

Photo-editing programs such as Microsoft Paintbrush, CorelPaint and Photoshop are the best Web graphics software for working with photorealistic images acquired from digital cameras and scanners.

See Graphics Editors for a list of the most popular Web graphics software.

The best balance between depth, ease of use and price is...

Ulead PhotoImpact

PhotoImpact is an all-in-one solution for Web page design, graphics and image editing. It offers features usually found only in programs costing 5-8 times as much...

Edit images and create complete Web pages.
Full array of imaging and painting tools.
Vector 2-D and 3-D graphics.
Over 60 exclusive special effects and filters.
Visual Web page layout and one-click HTML output.

Whether you want to edit photos and put them online or create original bitmap images and animations, this economically priced Web graphics software offers an appealing mix of power, with an interface that's truly easy to use.

Good picture is always a compromise between how good it looks and how long it takes your Web visitor to download and see it. For more information on creating images that look good and are as compact as they can be, see Web Graphics Tips.

And a few words about banners - those graphic advertisements that you see at the top of so many Web pages. They are not so popular now as they were 4 years ago. But if you want to do some banner advertising or simply swap with another site, see Free Web Banners for information on creating your own banners from scratch or by using free Web banner generators.

Few Webmaster Tools for Free

Here i will tell you about some useful free webmaster tools and services. Easy to use, these tools can really help you build, promote, or enhance your Web site.

Free Website Submission
A safe, quick, and free website submission service. It can help you submit your site to the major search engines and directories that account for about 95% of your traffic.

Advanced Web Search
A simple service that allows you to simultaneously search on the major search engines and directories, check your website link popularity and find which pages of your site are indexed by search engines.

Site Search Engine
A free utility which can quickly create site specific search engine, so your visitors will be able to quickly find what they are looking for within your site. This is a Windows program that you download and run on your home computer. It works with the local copy of your Web site and creates the additional HTML file which contains all necessary code and data to add search capabilities to your site. There are many web services also to put site search engine to your website by pasting in a small amount of code in your html like Freefind.

Secure HTML
A free utility for creating password protected Web pages. This is a Windows program that takes any HTML file and creates new "secure" HTML file that is encrypted and asks for a password when you try to open it.

web designing company

Web Hosting Directory