10 Best Free Web Editors

There are lots of Web page editors available in both text and WYSIWYG that are free. But not all of them are good. You need to know which one is best for you. It takes time if you want to try to choose right one for you from best 100 editors. SO i make this list too short for you which will helps you to find your web editors.

1.Komodo Edit
Komodo Edit is hands down the best free XML editor available. It includes a lot of great features for HTML and CSS development. Plus, if that isn't enough, you can get extensions for it to add on languages or other helpful features (like special characters). It's not the best HTML editor, but it's great for for the price, especially if you build in XML. I use Komodo Edit every day for my work in XML and I use it a lot for basic HTML editing as well. This is one editor I'd be lost without.

2. Aptana Studio
Aptana Studio is an interesting take on web page development. Instead of focusing on the HTML, Aptana focuses on the JavaScript and other elements that allow you to create Rich Internet Applications. One of the things I really like is the outline view that makes it really easy to visualize the DOM. This makes for easier CSS and JavaScript development. If you are a developer creating web applications, Aptana Studio is a good choice.

3. NetBeans
NetBeans IDE is a Java IDE that can help you build robust web applications. Like most IDEs it has a steep learning curve because they don’t often work in the same way that web editors do. But once you get used to it you’ll be hooked. One nice feature is the version control included in the IDE which is really useful for people working in large development environments. If you write Java and web pages this is a great tool.

4. Bluefish
Bluefish is a full featured web editor for Linux. And the 2.0 release adds a lot of great new features. There are also native executables for Windows and Macintosh. There is code-sensitive spell check, auto complete of many different languages (HTML, PHP, CSS, etc.), snippets, project management, and auto-save. It is primarily a code editor, not specifically a web editor. This means that it has a lot of flexibility for web developers writing in more than just HTML, but if you’re a designer by nature you might not like it as much.

5. CoffeeCup Free HTML Editor
The CoffeeCup Free HTML editor is a text editor with a lot of potential. A lot of the features it has in the menus require that you buy the full version. The free version is a good HTML editor, but I would recommend you purchase the full version of the editor to get the real juice from this product. One important thing to note: many sites list this editor as a free WYSIWYG editor, but when I tested, you had to buy the full version to get WYSIWYG support. The free version is a very nice text editor only.

6. Notepad++ (Windows)
Notepad++ is a solid, open source code editor, and a good replacement for the built-in Windows Notepad. It supports tabbed windows, HTML and CSS syntax highlighting, code folding, and auto-completion.
The find and replace options are comprehensive, including support for regular expression searches and searching in multiple files.
Notepad++ also has a plugin system, allowing you to extend the editor with additional features such as FTP uploading.
Other useful features for a Web coder include:

• A file comparison tool
• Built-in HTML Tidy functionality
• Keyboard shortcuts for previewing in major browsers

7. Eclipse
Eclipse is a complex development environment that is perfect for people who do a lot of coding on various different platforms and with different languages. It is structured as plug-ins so if you need to edit something, you just find the appropriate plug-in and go. If you are creating complex web applications, Eclipse has a lot of features to help make your application easier to build. There are Java, JavaScript, and PHP plugins, as well as a plugin for mobile developers.

 

8. SeaMonkey
SeaMonkey is the Mozilla project all-in-one Internet application suite. It includes a web browser, email and newsgroup client, IRC chat client, and composer — the web page editor. One of the nice things about using SeaMonkey is that you have the browser built-in already so testing is a breeze. Plus it's a free WYSIWYG editor with an embedded FTP to publish your web pages.

9. jEdit (Windows, Mac, Linux)
jEdit is an open-source, cross-platform text editor written in Java. On the plus side this means that it runs nicely on Windows, Mac OS X, Linux and more. On the downside, the interface is a bit clunky, with non-standard widgets, dialogs and keyboard shortcuts. However, if you can get round the drawbacks then jEdit is a nice editor with a lot of power up its sleeves.
jEdit has all the features you'd expect from a decent code editor, including syntax highlighting, macros and multiple clipboards. However, to get the most of jEdit as a Web coder, install the XML plugin (you can easily do this by choosing Plugins > Plugin Manager, then clicking the Install tab and selecting the XML plugin). This plugin gives you auto-completion for HTML and CSS, a document tree browser, code beautification, and more.

10. Alleycode
Alleycode is a free web editor that focuses on search engine optimization. There are a lot of built-in features and links to the Alleycode website so that you can check your site ranking, optimize your meta data, and otherwise improve your search rankings. While I don't recommend sites that “guarantee” top-level ranking like Alleycode does, that doesn't mean that their web editor isn't any good. One feature I really like is the conversion tool to convert HTML tags and text from upper to lowercase and back. Very handy.
According to their website: Alleycode will no longer be supported or upgraded after January 1, 2010.

Know About CSS Layout Types and Their Uses

WHich is the ideal width of web sites ?
Most of the new designers have this common question. So i decide to write about this topics to gives them idea about width of web sites.Theres are variations in monitor display resolutions. We designers need to decide first How i am gonna represent my site content to users.To do this we need to know first that there are three primary layout types available to design a website. After reading this article any of you can decide which one you can use for your design.

1. Fixed-width Layout (Using pixel-based units for the dimensions of the page)
2. Liquid or Fluid Layout (Using %-based units)
3. Elastic Layout (Using em-based units)

Lets start seeing more details with examples to undetstand what those means.

1. Fixed-width Layout

As the name suggests fixed layouts stop the web browser from having the freedom to format text as it sees fit, This is one of the most popular techniques on the web, with websites such as facebook and the BBC applying the design. This basically means that the width your content is contained and stays fixed no matter what, this is typically achieved using something called a wrapper, or container, which holds all the content within it. The fixed width design can be set to the left, center or right of the a page, very easily.

The real bonus of working with a fixed width design is that you can set imagery and design around the consideration that your width will always be the same. This is a real positive if you want a banner image, for example, which needs to be 900px, you will not have to problems when resizing, issues which you would encounter with a fluid design.

The downside of a fixed design however is the dead space that you are left with where your design does not fill the page. A fixed-width design can also force designers to prioritize. As a site grows and content competes for top placement, it must still fit within a specific width.



2. Liquid or Fluid Layout (Using %-based units)

The most relaxed method of providing a dynamically expanding or contracting design makes use of the ever-popular percentage (%) unit measurement.

This layout type has gained mass popularity because it is the ultimate way of allowing the total opposite of a fixed layout where the content will simply take whatever space is available to it.

Absolute LayoutsPercentages require careful calculation as you can’t give more than 100% without issues!

The limited guarantees you hold on the viewport being used goes beyond screen resolutions (imagine your site on a 6-inch screen versus a 100-inch screen, even just at 80% width).

Though it goes without saying that a liquid layout is useful in almost every web-based situation because it adjusts its width depending on how big or small the user’s viewport is — so it’s definitely worth looking into.


3. Elastic Layout (Using em-based units)

An elastic layout scales with users’ text size.

More accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Some people make a permanent change for accessibility reasons, others use the UI controls to increase text size if they need to.

Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means:

   1. They are calculated based on the font size of the parent element. E.g. If a 
<div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px.
   2. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)

10 Most Useful & Handy online CSS Code Generators

Cascading Style Sheets or CSS allow you to control the layout and look of your page easily. CSS tags or properties are easy to use and affect the look and feel or style of your pages. But it is not easy for most people to write CSS code that implement a desired design. In fact a lot of people have difficulties mastering CSS. In This article i provides 10 Most Useful & Handy online CSS Code Generators that can be very useful to create CSS faster and to learn about how CSS is structured.

CleanCSS
CSS clean is very useful CSS formatter. It helps to make your CSS code in clean and understandable. It is providing a test box for CSS code and check box for change the functionality of CSS code.

CSS Creator
Creates a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

Grid Designer
Grid designer works according to the name, creating the different types of grid layout with the help of provided functionality. It has well interface for designers to creating attractive grid layouts.

Typetester
The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

Telerik Visual Style Builder
An online CSS customization tool that allows you to easily, point-and-click customization of skins for the RadControls for ASP.NET AJAX. This visual style builder eliminates any need to have working knowledge of the front-end HTML and CSS structure of the RadControls to create custom skins.You’ll have complete control over the elements of the RadControls’ skin and allows you to develop a custom built skin in very short time.
This tool is ideal for ASP.NET developers. Probably one of the easiest ways to create a RadControls skin. This tool also satisfies your need for ready made menus and images for calendars and such.

css-generator
This tools lets you input your XHTML code in a box displayed on the front page, the code will be sent back to them and they will return your code with a corresponding CSS frame. This service is completely free This is great for the developer that’s big on multi-tasking.

CSSportal
Online CSS Editor allows you to edit an entire CSS file at once with a dynamic preview shown below. The preview will show the exact line you’re editing, and it will update as you type. If you want to show the entire file then move focus to the start or the end of the CSS text. When you have finished editing your CSS, be sure to validate the code with CSS Validator.

Drawter
Written in JavaScript and based on the jQuery library enables you with the possibility to draw your website’s code. Every tag is presented as a layer you have drawn.It can run on every single web-browser which makes it really useful and versatile.

Working knowledge of HTML and CSS is required in order to utilize Drawter, however developing code is easier then writting by hand. Drawter anticipates a version where you will not need much knowledge of CSS and HTML, this is foreseen in the near future.

CSSMate
CSS mate a very famous online CSS code editor. It allows to change multiple in fonts, color, text color, border and list.

CSS Type Set
Ahands-on typography tool which allows the every day designer and developer fully test and learn how to style Web content. You’ll be able to test different font-styles throughout a piece of text and also allows you to select a font-style and easily copy/paste into your stylesheet.

CSS Sprites: What They Are and How to Use Them

CSS Sprites

A visually appealing website must have a great design. And usually with a great design, comes great images. And with great images, comes loading time. And with loading time, comes slow pages. ect, ect. Images are key in most web designs, so it’s always important to keep in mind how to optimize your images for the best user experience.
There are countless methods on minimizing the load time on your site, but this post will address one way in particular: sprites. More specifically, CSS sprites.

The use of CSS sprites is a fairly common practice with web designers. But what are they? The name may be a little misleading, as CSS sprites aren’t small, but big images containing dozens, and even hundreds, of little images.

History

Super Mario Bros. Sprites
Sprites originated in video games, back during the 8-bit glory days. Every visual item in a game was drawn as an individual image that would later be ‘layered‘ into the game as it was being played. However, as the complexity of games increased, game developers realized the benefits from combining all the images for a game into a singe sprite. By combining all the images into a single sprite (in a grid like formation), they could program the game to map positions of each individual graphic, and selectively placed them into the game.

What does this have to do with web development? Well, aren’t websites not unlike 8-bit games? Eh?

Why Sprites?

Sprite image from Google
Having all these images individually makes for smaller files sizes and fast loading, right? You may think so, but no. While it may look like your page loads fast, since there are dozens of images half loaded, they’re actually loading slower.

For each image, an HTTP-Request is called to download the image, and having a few dozen of them called at the same time slows down the entire process. Not to mention that despite a single image being smaller than a large sprite, file sizes add up, and fast. Combining a bunch of your images into a single sprite cuts down of your HTTP-requests, lowers the total file size, and your page then loads faster.

Example

Here’s a comparative example of the difference between a single sprite image, and 20 small images.

While the individual images on their own are smaller in size, collectively they’re more than 5x larger than the single sprite image.

Another great benefit to using sprites is when you use images for the :hover state. Normally, you’d have to use JavaScript to pre-load an image used in a :hover state, but if you’re using a sprite, and simply change the background position on :hover, there is no need to pre-load the image, since it will already be loaded.

Use and Limitations

One you create a single sprite image, you’ll have to use some CSS trickery to display the right image from the sprite.

Here is the CSS for the sprite image above:

.arrow { background-position: 0 0; }
.biggrin { background-position: 0 -20px; }
.confused { background-position: 0 -40px; }
.cool { background-position: 0 -60px; }
.cry { background-position: 0 -80px; }
.eek { background-position: 20px 0; }
.evil { background-position: 20px -20px; }
.exclaim { background-position: 20px -40px; }
.idea { background-position: 20px -60px; }
.lol { background-position: 20px -80px; }
.mad { background-position: 40px 0; }
.mrgreen { background-position: 40px -20px; }
.question { background-position: 40px -40px; }
.razz { background-position: 40px -60px; }
.rolleyes { background-position: 40px -80px; }
.sad { background-position: 60px 0; }
.smile { background-position: 60px -20px; }
.surprised { background-position: 60px -40px; }
.twisted { background-position: 60px -60px; }
.wink { background-position: 60px -80px; }


In my opinion, easiest way to apply sprites are to assign a base class that declares the background image and any other attributes, and then a sub-class that handles the background position.

<div class="smiles wink"></div>

.smiles {
background-image: url(smile_sprite.gif);
background-repeat: no-repeat;
width: 15px;
height: 15px;
}
.wink { background-position: 60px -80px; }

/* ect. ect. */

CSS sprites are really only good for background images. So they’re useless for anything in an img tag. They’re also are not good for images you want to be repeated on both the x and y axis, as when you repeat an image, the entire image is repeated, not just what is visible.

There is a workaround however for repeating sprites on one axis (in this example, the x). Here is a situation:

• The height of the element is 20.
• The width is dynamic.
• The images are arranged in the sprite vertically, in one column
• The image is repeated on the x-axis

There are other ways to work with repeating a sprite, but this was just one example.

So…

There are lots of resources out there for CSS sprites, from generators, to more detailed information. Here is a great generator that allows you upload a .zip file full of images, and will automatically generate a single sprite image, CSS styles included. :eek:
CSS Sprite Generator
I suggest trying sprites out. The concept can be difficult to adapt your methods to at first, but the more you use it, but more second nature it becomes.

10 Best Tutorials on Converting PSD to XHTML/CSS

IT is a good habit to start a new project by designing a mockup in photoshop before starting coding for a website. There are lot of people who can design a web page in photoshop but not have good skill to convert this photoshop design into html/css.
I search over the web for best article on psd to html/css. Here i share 10 best link from where you can learn psd to html building step by step.If someone follow this link and study those articles carefully i am sure anybody can success on this job.

1. From PSD to HTML, Building a Set of Web Designs Step by Step

Collis Ta’eed published a post about five months ago at NETTUTS that takes a very detailed look at the process of coding a site with a PSD file as a starting point. This is a site that Collis designed in Photoshop and the post goes through every step of getting it to the point of being a working site, with all the CSS and HTML coding provided.


2. Build a Sleek Portfolio Site from Scratch

A few months prior to the previous post, Collis also published this exceptional tutorial. This post was the 2nd part of a series that included a tutorial on PSDTUTS for creating the design in Photoshop. The two posts form one of the most useful sets of tutorials for any aspiring web designer, or other designers who could use some pointers for the process of starting with a design in Photoshop.



3. Encoding a Photoshop Mockup into XHTML and CSS

Chris Spooner also did a similar two-part series of posts for creating a design in Photoshop and then coding the site with XHTML and CSS. While Collis showed us how to code a portfolio site, Chris focuses his tutorial on blog design.


4. Tutorial: Coding a Layout

This tutorial from Eratic Wisdom is not nearly as detailed as some of the others on this list, but it does a good job of looking at the process quickly. If you’re interested in going through a shorter tutorial on the subject rather than spending a large chuck of time on all the details, try this one.



5. From PSD to HTML – How to turn your designs into usable web interfaces

Part Digital Design gives us another detailed tutorial for coding a site from a Photoshop file. This tutorial is very detailed, from slicing the interface to the coding.


6. From PSD to CSS/HTML in Easy Steps

These are the first in a series of tutorials in which they build a fully working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and they encourage you to download and play with what is provided.



7. Converting a Design From PSD to HTML

8. BLOOpress CSS Template

9. PSD HTML Slicing Tutorial

10. Design and Code a Slick Website From Scratch – Part II