What Html Editor do you use?

I use Notepad++ for my HTML and Topstyle Lite for my CSS. I like the coloring Notepad++ provides, and the auto indenting Topstyle Lite gives me.

 

i used just notepad

 

People who want productivity choose a powerful text editor, free or not. As it happens, the best text editors are usually free. Dreamweaver does not support high productivity in a platform agnostic world.

Dreamweaver is at best a very expensive editor with nothing to separate it from run-of-the-mill editors.

Actually, the reverse is closer to the truth. The newcomer lacks proficiency and seeks out 'helper' apps such as Dreamweaver. He also tends to buy before understanding exactly what he needs, which would explain the proliferation PS ownership by those wanting to slice and dice and export to html. That's the sign of an amateur.

No, the pro web developer buys hosting on an as needed basis. Hosting is more the domain of the webmaster or site owner. Neither of these is by definition a developer. (Though a developer may be a webmaster or owner—I don't include "web designers" as they're the least part of site development)

The newbie probably doesn't know enough to use available free software such as Emacs, GIMP, Inkscape, ftp, ssh, scp, cvs, Apache, PHP or MySQL. These are all top-line applications, and generally superior for the specific job over the proprietary, non-free program.

What you don't know doesn't bother me all that much, it's what you do know that just ain't so.

cheers,

gary

 

I admire you taking the time to create such an indepth post almost 2 years and was on sitepoint before that for a few years. My quote was nothing more then my observation over the many years spent on forums and seeing tons of threads like this. It doesn't apply to everyone but a majority of the people it does. I personally only use dreamweaver because I was taught dreamweaver in highschool and it just sort of stayed with me. I don't think any programs can match all of dreamweavers functions and features or even the support that comes with it which is why it costs so much. You can get it on ebay for fairly cheap though. Like I said thought not everyone follows these general rules but a majority of users do.

 

I did not argue the number of people using authoring crutches, but rather your characterization of their skill levels. That a bunch of people use those apps does not argue for their being productive tools.

Soi disant web designers who use Dreamweaver or Photoshop to design/write their html pages are not skilled craftsmen, and cannot be until they quit using them as prototyping tools.

Photoshop is an excellent image manipulation program that churns out crap for html. Use it for your graphics. Even there, it is overkill. PS is a print graphics application first, and suitable for the web secondarily. Unless you do print graphics, you're spending a lot of money on unused and unusable features. GIMP is written from the ground up for web graphics, and is free. Likewise, free Inkscape is said by some to be better than Illustrator (I know my graphics consultant has shown a preference for Inkscape after years of Illustrator use).

DW has a lot of site management tools, each of which are available as very efficient fixed purpose programs. Many of the tools are actually contra-productive, working only for maintainers who have DW themselves. Use them and you're locked in to a specific vendor product. Any site I author can be maintained or refactored by anyone on any platform. That's the kind of sites professionals develop. You can use DW in an agnostic manner, but then you've paid a lot of money for unusable features. I use Emacs, which is free. It doesn't have a lot of those site management features[1], but all those applications are free[2], and can be run directly from within Emacs.

So talk up the number of people that use DW, but do not equate its use with any degree of professionalism. Truly professional developers do not use DW.

cheers,

gary

[1] It is loaded with enough features, that it scares folks, thinking they'll never be able to learn it. Following the *nix philosophy of doing one thing and doing it well, Emacs is a small core editing program with the capability of accepting extensions written by anyone for any purpose. Many of the extensions have become a standard part of the distributed code. The point being you only need to learn that which you use.

[2] See my previous post for a list of some of those features.

 

I won't say someone's not a professional if they'd rather have stuff like code-completion or ftp built-in. Dreambeaver's a tool, that's all. I've been told that I'll never be a professional because I couldn't just walk into some other company which used DW and sit down and use it. Oh well. Guess I get to stay an amateur the rest of my working life : ) I'll likely never work for a company that will pay 570 euros for a glorified text editor.

 

And to which I tell them that the definition of a professional is someone who gets compensated for doing a job.

And if they don't like it, too bad.

 

You can use Notepad ++, it support auto completion. You can find supported program languages notepad++'s web site.

Free, Speedy and Good

TayFun KesKin

 

I use personally Notepad++ and DreamWeaver. Both are good

 

I just downloaded Dreamweaver CS3.

I went through the very basic tutorial to get the feel for the interface designing a table-based sample site. Did another basic tutorial on CSS and started designing with absolute positioned blocks with a float thrown in for good measure. Love it!

Basically, I only use the WYSIWYG to initially add properties to my CSS div's. Then I go to code. I agree that if you only use wysiwyg, you are in the dark, but to use it sparingly for initial design (assuming you know what you are doing) saves a lot of time! And, if you are at the bottom of the learning curve, it allows you to quickly get feedback as you experiment with your design.

A good book or two is very helpful to have as well.

 

You do understand that absolute positioning for layout is a bad idea, right?

 

what method do you prefer to use?

 

Floats and negative margins when appropriate.

 

No, I am new to this. Why is it a bad idea?

 

Absolute positioning takes an element (DIV, UL, P, whatever) completely out of the flow, meaning that other elements cannot flow around them. If one element is larger than another (like a sidebar column for example) adjacent to it, it'll literally cover up whatever's below it (like the footer that tends to be below sidebar contents). With floats, you have the ability to "clear" the flow and return to a normal state, as can be seen here:

http://www.dan-schulz.com/temp/2columnlayout/
http://www.dan-schulz.com/temp/3columnlayout/ (this one's REALLY advanced - I can whip up a simpler version for you if you want)

 

I noticed this about absolute positioning and thought perhaps I was doing something wrong. One element can easily blanket over the other. Thanks for the comment.

Do you know of a source of some fairly simple templates using float positioning?

 

If you want just the code, look at the two links I gave you. If you need a tutorial, let me know and I'll whip one up for you.

 

Floats only go to the absolute right and left though right? What if you wanted like a 4 column lay out?

 

Crimson Editor

Suave

 

You mean like this? (I also have a live version available right here.) Oh, and this doesn't have a SINGLE HACK FOR IE either.

Tested on IE 6, IE 7, Firefox, Opera and Safari 3. Try getting Dreamweaver to do THAT in design view.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Untitled Document</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<meta http-equiv="imagetoolbar" content="no">
		<meta name="description" content="A brief description of the current page goes here.">
		<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished">
		<style type="text/css" media="screen">
			
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background: #FFF;
				color: #000;
				font: normal 85%/150% tahoma, verdana, arial, helvetica, sans-serif;
				letter-spacing: 1px;
			}

			h1, h2, h3, h4, h5, h6 {
				background: transparent;
				color: #DC143C;
				font-family: georgia, garamond, "times new roman", times, serif;
				font-weight: bold;
			}

			h1 {
				font-size: 1.55em;
				line-height: 1.8em;
			}

			h2 {
				font-size: 1.25em;
				line-height: 1.3em;
			}

			h3 {
				font-size: 1.05em;
				line-height: 1.1em;
			}

			h4 {
				font-size: 0.95em;
				line-height: 1em;
			}

			h5 {
				font-size: 0.85em;
				line-height: 0.9em;
			}

			h6 {
				font-size: 0.75em;
				line-height: 0.8em;
			}

			img {
				border: 0;
				vertical-align: bottom;
			}

			#container {
				background: #EEE;
				color: inherit;
			}
				#header {
					background: #0CF;
					color: #000;
					height: 80px;
				}

				#menu {
					float: left;
					position: relative;
					width: 12em;
				}
					#menu li {
						display: inline;
						height: 1.5em;
						line-height: 1.5em;
						list-style: none;
					}
						#menu li a {
							display: block;
							height: 1%;
							padding: 0.25em 0 0.25em 1em;
							text-decoration: none;
						}

						#menu li a:hover, #menu li a:active, #menu li a:focus {
							background: #CCF;
							color: inherit;
						}
				
				#content {
					float: left;
					margin: 0 -20em 0 -12em;
					width: 100%;
				}
					#content .wrapper {
						background: #FFF;
						color: inherit;
						margin: 0 20em 0 12em;
						padding: 0 1em;
					}
						#content .wrapper p {
							padding: 0.5em 0;
						}
				
				#ad-bar {
					background: #CDE;
					float: left;
					height: 200px;
					width: 10em;
				}
					#ad-bar div {
						padding: 0 0.5em;
					}

				#sidebar {
					background: #CFA;
					color: inherit;
					float: left;
					height: 300px;
					width: 10em;
				}
					#sidebar p {
						padding: 0 0.5em;
					}

				#footer {
					background: #F9C;
					clear: left;
					color: inherit;
					height: 1%;		/* triggers hasLayout in IE 6 */
				}
					#footer em {
						display: block;
						font-style: normal;
						padding: 0.5em 0 0.5em 1em;
					}
		
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<img src="#" width="200" height="80" alt="Logo" title="">
			</div>
			<ul id="menu">
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
			</ul>
			<div id="content">
				<div class="wrapper">
					<h1>Web Page Title</h1>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
						Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
						cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
						ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
						facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
						fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
						bibendum, est.
					</p>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
						Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
						cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
						ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
						facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
						fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
						bibendum, est.
					</p>
				</div>
			</div>
			<div id="ad-bar">
				<div>(Ads Go Here)</div>
			</div>
			<div id="sidebar">
				<p>(Sidebar Goes Here)</p>
			</div>
			<div id="footer">
				<em>Copyright &#38;#169; 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em>
			</div>
		</div>
	</body>
</html>

Code (markup):