Dreamweaver vs. handcoding, etc.?

[Bakari45]

I'm starting to learn web design. I've worked through the Head First book on HTML and CSS. I worked through almost all the tutorials of David MacFarland's CSS book (and have started on Java book) and I just ordered the Sitepoint CSS Cookbook.

But I'm stuck in terms how I should develop in terms of getting down to the practice of building my own sites, but I'm wondering how best to do that. Should I start using Dreamweaver CS3 or should I learn to hand code and use Photoshop for HTML and layout. I've read more than once that Dreamweaver is too cumbersome.

I'd appreciate advice on how best to grow my web development skills.

[Mittineague]

Hi Bakari45, welcome to the forums,
I can't comment on DreamWeaver, but IMHO it is better to learn HTML and CSS by hand-coding at first, and then use a tool that helps make the experienced user's task easier. Otherwise you are trying to learn both the basics of what you're working with (the web page) and the application at the same time.
But if you feel you have a good understanding of HTML and CSS then it shouldn't hurt to start learning DreamWeaver.

[Bakari45]

Hi Bakari45, welcome to the forums,
I can't comment on DreamWeaver, but IMHO it is better to learn HTML and CSS by hand-coding at first, and then use a tool that helps make the experienced user's task easier. Otherwise you are trying to learn both the basics of what you're working with (the web page) and the application at the same time.
But if you feel you have a good understanding of HTML and CSS then it shouldn't hurt to start learning DreamWeaver.

Mit, thanks for your feedback. I've been doing good with the tutorials, but what I need to do is jump in and start building my own site. It seems easier to do it with DW, but I've seen a couple of video tutorials where the designer built a web page or two justing using PS and hand-coding.

But I thought it might be a waste of time to hand-code when DW can do so much of the job for you. I'm willing to learn hand-coding (in fact, some of it is kinda fun), but I just want to make sure it's a good way to proceed.

[ferrari_chris]

I use DreamWeaver to hand-code with.

I hardly ever use the Design view, but I do take advantage of many of DW's other features such as its Site Management, FTP uploading, etc.

You can use DW if you want, just use it for hand-coding rather than using the Design view.

[Bakari45]

I use DreamWeaver to hand-code with.

I hardly ever use the Design view, but I do take advantage of many of DW's other features such as its Site Management, FTP uploading, etc.

You can use DW if you want, just use it for hand-coding rather than using the Design view.

Ferrari, why do you choose to hand-code as opposed to using DW?

BTW, I've been using TextMate for doing the CSS and JavaScript tutorials. Should I stick with TextMate for hand-coding for while before getting into DW?

[Black Max]

Ferrari, why do you choose to hand-code as opposed to using DW?

Any WYSIWYG program such as Dreamweaver is going to code for you, and as a result give you code that is, to a lesser or greater extent, bloated and inefficient. The reason to do it yourself is so you can control it. The more you use a WYSIWYG editor, the more you give over control to the program. Remember your Star Trek: never, ever let the computer make the final decisions. That way lies madness.

[Bakari45]

Well, I'm looking through this site and checking out "Build Your Own Web Site The Right Way Using HTML & CSS". Sounds like this book might be the next step for me.

[Mittineague]

I think that's a wise move. By the end of "build your own site the right way" you should have a very solid knowledge base. Then if you wanted to use a site builder app to do the more "tedious/monotonous" stuff (if there is such a thing for you), you could use your HTML and CSS knowledge to tweak things and embelish the "skeleton" page.

I guess a lot depends on how much you like writing code and how much time you have to put into it. I still like and prefer writing in Notepad, but I don't work in a production environment where time is money.
If you do decide to go with DreamWeaver, it is the only app I have ever heard of where it is possible to produce valid mark-up using it. A far cry from the few apps I've looked into that produced horrid mark-up.

[Bakari45]

Thanks, Mittneague, for your feedback. I think I'll order the the Build Your Site book today.

[molona]

I use DW and FF extensions, but it is for the highlighting, I like to hand code, as it is the only way that you can really control what's going on.

[ferrari_chris]

Ferrari, why do you choose to hand-code as opposed to using DW? ...

Because, as others have said, the code it produces is not very good.

CS3 may well be better than previous versions, but I learnt before CS3 and while I upgraded my DW, I don't know how Design mode has improved the coding.

Generally, I have found that the code DW produces is un-necessary and in-effiicient.

I recently used MS Expression Web and my goodness is that program stuck in the '90s! It seems perfectly content to dump acres of style tags directly into the elements rather than use a stylesheet. Scary.

[Black Max]

I just have to do this again. My favorite "oh my god, what horrible code" example, from a friend's site hawking his novel. Some details have been redacted to spare the innocent. This is from some unnamed, godawful online site building platform.

<P class=MsoNormal><FONT face="georgia,times new roman,times,serif"><SPAN style="mso-ansi-language: EN; language: EN">His murder/mystery play, </SPAN><SPAN style="FONT-STYLE: italic; mso-ansi-language: EN; language: EN">REDACTED</SPAN><SPAN style="mso-ansi-language: EN; language: EN">, filled the theatre’s seats at the Artistic Studio Theatre, in REDACTED.</SPAN></FONT></P></TD></TR>
<TR></TR></TBODY></TABLE></FONT></P>
<P class=MsoNormal style="TEXT-ALIGN: center"><FONT color=#3333cc><STRONG><FONT size=6><SPAN style="FONT-SIZE: 18pt; LINE-HEIGHT: 100%; FONT-FAMILY: Georgia; mso-ansi-language: EN; language: EN; mso-ascii-font-family: Georgia; mso-default-font-family: Georgia; mso-latin-font-family: Georgia; mso-greek-font-family: Georgia; mso-cyrillic-font-family: Georgia; mso-latinext-font-family: Georgia">A character driven, adventure - </SPAN><SPAN style="FONT-SIZE: 18pt; LINE-HEIGHT: 100%; FONT-FAMILY: Georgia; mso-ansi-language: EN; language: EN; mso-ascii-font-family: Georgia; mso-default-font-family: Georgia; mso-latin-font-family: Georgia; mso-greek-font-family: Georgia; mso-cyrillic-font-family: Georgia; mso-latinext-font-family: Georgia">murder mystery, packed with action, romance, and intrigue.</SPAN></FONT></STRONG></FONT></P>

These are two lines of barely formatted text.

[molona]

Gee, Black Max, that code makes me shiver

[artistsneverdie]

I use Dreamweaver to hand code all my sites, although I would never build it in Design View. I run it in split view or code only, so I can see an on the fly rendering of the site. All the HTML and CSS is handcoded in the split view.

Keeping a browser window open with firebug running can also pick out annoying problems that Dreamweaver doesn't display.

There are a a number of problems with Dreamweaver though, it won't display two classes on an element, e.g. <div class="oneclass twoclass"></div>, if your pc bogs down it can magically move chunks of code around without telling you, plus loads of other irritating bugs.

Apart from that as long as you don't design your site solely using design view DW can be a useful tool.

[Nadia P]

Because, as others have said, the code it produces is not very good.

The code is as good as you allow it to be. If you are an experienced code, you can use both views and still have nice clean code. I've been doing that for years, though.

As long as you don't drap and drop stuff on a page (as most newbies are prone to do), or insert AP divs (or layers as they used to be called) etc., then the code isn't too bad.

Why handcode when you get all the extra benefits by using DW, as mentioned - site management, file management, extensions if needed etc., As long as your markup is clean, validates, doesn't matter what tools you use - whatever makes the work go faster for you is what's important.

Generally, I have found that the code DW produces is un-necessary and in-effiicient.

Not really if you use the tool efficiently and don't let the tool do it's own thing :-) It''s the way it's used that's the problem.

I recently used MS Expression Web and my goodness is that program stuck in the '90s! It seems perfectly content to dump acres of style tags directly into the elements rather than use a stylesheet. Scary.

From what I've heard from people who use DW on a regular basis and wanted to test out EW, it's a clone of a very early version of DW... right down to using layer elements... :-)

As for letting photoshop produce the code - *don't do it*... that's the worst code that anyone can use.. never let a graphics program write html for you... first step to a very fragile layout that will not be easy to troubleshoot, particularly for a beginner :-)

Nadia

[artistsneverdie]

^ What she said... +1

[molona]

Why handcode when you get all the extra benefits by using DW, as mentioned - site management, file management, extensions if needed etc., As long as your markup is clean, validates, doesn't matter what tools you use - whatever makes the work go faster for you is what's important

I agree with you, whatever helps you to work better and faster is what you should use.

I agree with you that DW's code can be improved greatly with the right configuration. Most people do not take the time to do it properly as it is a boring and long process, with many little details that can make the difference. Especially, for those who do not feel confident with HTML or CSS.

I use DW in code view among other editors for just one reason: the site management. Once you have created a site, files automatically save in the right folder of your computer.

Most features in DW drives me crazy, its FTP on top of the list. I recognize it is a good software, but even though I never liked it very much, even after a number of years of using it.

I find firebug extension in FF much more useful. And when you come to think of it, I don't know why. DW gives you the same information in its panels. But in Firebug, it is easier to handle for me. Curious.

[Nadia P]

I use DW in code view among other editors for just one reason: the site management. Once you have created a site, files automatically save in the right folder of your computer.

and moving files between folders while DW does all the updating of links etc., is a life/time saver for me... I tend to reorganise things through out a project and couldn't live without this functionality :-)

Most features in DW drives me crazy, its FTP on top of the list. I recognize it is a good software, but even though I never liked it very much, even after a number of years of using it.

I agree about FTP - I've never had any problems with it as many people seem to, except that I find it kind of slow, so I've been using CuteFTP for years now, unless it's a tiny site, then I may revert to DW FTP.

I'm also a long time user of TopStyle for my CSS and some coding, so I use that rather than the DW CSS interface. Though DWCS4 version brings even great improvement to css handling, once you get used to using a certain set of programs, it's difficult to convert back.

I find firebug extension in FF much more useful. And when you come to think of it, I don't know why. DW gives you the same information in its panels. But in Firebug, it is easier to handle for me. Curious.

I must say the few times I've tried Firebug, it confused me, so never went back to it :-) I always have a browser window open anyway, and validate the pages as I go so find any problems pretty much straight away and work from there.

Each to their own and whatever works best for them, nothing right or wrong about any programs you use - as long as it's not Photoshop or Fireworks to create HTML, I can't say that strongly or loudly enough ! :-)

Nadia

[Dr John]

I just have to do this again. My favorite "oh my god, what horrible code" example, from a friend's site hawking his novel. Some details have been redacted to spare the innocent. This is from some unnamed, godawful online site building platform.

<P class=MsoNormal><FONT face="georgia,times new roman,times,serif"><SPAN style="mso-ansi-language: EN; language: EN">His murder/mystery play, </SPAN><SPAN style="FONT-STYLE: italic; mso-ansi-language: EN; language: EN">REDACTED</SPAN><SPAN style="mso-ansi-language: EN; language: EN">, filled the theatre’s seats at the Artistic Studio Theatre, in REDACTED.</SPAN></FONT></P></TD></TR>
<TR></TR></TBODY></TABLE></FONT></P>
<P class=MsoNormal style="TEXT-ALIGN: center"><FONT color=#3333cc><STRONG><FONT size=6><SPAN style="FONT-SIZE: 18pt; LINE-HEIGHT: 100%; FONT-FAMILY: Georgia; mso-ansi-language: EN; language: EN; mso-ascii-font-family: Georgia; mso-default-font-family: Georgia; mso-latin-font-family: Georgia; mso-greek-font-family: Georgia; mso-cyrillic-font-family: Georgia; mso-latinext-font-family: Georgia">A character driven, adventure - </SPAN><SPAN style="FONT-SIZE: 18pt; LINE-HEIGHT: 100%; FONT-FAMILY: Georgia; mso-ansi-language: EN; language: EN; mso-ascii-font-family: Georgia; mso-default-font-family: Georgia; mso-latin-font-family: Georgia; mso-greek-font-family: Georgia; mso-cyrillic-font-family: Georgia; mso-latinext-font-family: Georgia">murder mystery, packed with action, romance, and intrigue.</SPAN></FONT></STRONG></FONT></P>

These are two lines of barely formatted text.

Your friend has CHOSEN to apply styles directly to the text. If he avoided using frontpage or word (some of it looks more like frontpage to me, but the MsoNormal is typical MS code), or had chosen to create a stylesheet, the code would be much simpler.

The stories of DW etc adding lots of bloated code are due to beginners entering text and then going back and formatting parts of it the way they do in a word processor, as has clearly happened in the above code sample. (Note the spans and formatting code inside them - dead giveaway of poor design technique.)

On the odd occasions when I use DW in design view (an 8 year old version, so not much good when things get floated), I don't get that bloated code, because I use stylesheets and know about little things like h1, h2, etc, unlike your friend. (Note his font size 18pt for example, which implies no knowledge of headers).

So, don't criticise the tool when it is used badly by beginners. I'd bet if you used DW, the code would be as clean as you produce by hand. Personally I almost never use DW in design view, due to the age of my old second hand copy, but it's ftp and site management features are well worth using. I use a text editor or dw's code view, just like a few others above.

PS you think that code is bad??! I've seem a lot worse.

[ameRie]

better learn CSS and HTML by hand-coding first, then if you think you're ok, I think that's the time you may start using dreamweaver.

[Dan Schulz]

I just have to do this again. My favorite "oh my god, what horrible code" example, from a friend's site hawking his novel. Some details have been redacted to spare the innocent. This is from some unnamed, godawful online site building platform.

<P class=MsoNormal><FONT face="georgia,times new roman,times,serif"><SPAN style="mso-ansi-language: EN; language: EN">His murder/mystery play, </SPAN><SPAN style="FONT-STYLE: italic; mso-ansi-language: EN; language: EN">REDACTED</SPAN><SPAN style="mso-ansi-language: EN; language: EN">, filled the theatre’s seats at the Artistic Studio Theatre, in REDACTED.</SPAN></FONT></P></TD></TR>
<TR></TR></TBODY></TABLE></FONT></P>
<P class=MsoNormal style="TEXT-ALIGN: center"><FONT color=#3333cc><STRONG><FONT size=6><SPAN style="FONT-SIZE: 18pt; LINE-HEIGHT: 100%; FONT-FAMILY: Georgia; mso-ansi-language: EN; language: EN; mso-ascii-font-family: Georgia; mso-default-font-family: Georgia; mso-latin-font-family: Georgia; mso-greek-font-family: Georgia; mso-cyrillic-font-family: Georgia; mso-latinext-font-family: Georgia">A character driven, adventure - </SPAN><SPAN style="FONT-SIZE: 18pt; LINE-HEIGHT: 100%; FONT-FAMILY: Georgia; mso-ansi-language: EN; language: EN; mso-ascii-font-family: Georgia; mso-default-font-family: Georgia; mso-latin-font-family: Georgia; mso-greek-font-family: Georgia; mso-cyrillic-font-family: Georgia; mso-latinext-font-family: Georgia">murder mystery, packed with action, romance, and intrigue.</SPAN></FONT></STRONG></FONT></P>

These are two lines of barely formatted text.

Off Topic:

Looks like FrontPage to me.

[Black Max]

Your friend has CHOSEN to apply styles directly to the text. If he avoided using frontpage or word (some of it looks more like frontpage to me, but the MsoNormal is typical MS code), or had chosen to create a stylesheet, the code would be much simpler.

I know the guy who posted this site, and he knows as much about HTML as I do about launching the Mars lander. He used some online sitebuilder and clicked buttons. All the choices were made for him. I offered to redesign the site but he said this was fine.

Dan, you may be right, but my friend didn't know what sitebuilding program was involved, and I never cared enough to find out for myself.

PS you think that code is bad??! I've seem a lot worse.

Ugh, I cringe at the thought. I'm no professional by any stretch, but I would rather take a hammer to my head than write something so bad.

[Dan Schulz]

The MSO- is a dead giveaway that it's FrontPage.

[Nadia P]

The MSO- is a dead giveaway that it's FrontPage.

I thought that could also be seen if content is copied and pasted from a MSWord doc....

Nadia

[molona]

I thought that could also be seen if content is copied and pasted from a MSWord doc....
Nadia

Maybe if he saved the word document as HTML. If he didn't, that's not possible.