CSS Page Layout - Do You Have to Hand Code?

Would I be right in saying that if you choose to use CSS based page layout, then you have to hand code everything? i.e. are tools like Dreamweaver not suitable? Is there a quicker way of doing it than hand coding?

Thanks

You could use a toolkit, such as Twitter Bootstrap.
This is a free collection of tools for creating websites and contains a bunch of HTML and CSS-based design templates.
To get going, you only have to download the code and include the style sheet in your page, then you have a load of pre-defined classes and UI elements that you can make use of.
You can, of course, then build on this foundation with styles of your own.
You can read more here: http://twitter.github.com/bootstrap/

Yes Dreamweaver does. Most WYSIWYG HTML editors will write the HTML & CSS for you.

This post on Smashing Magazine might help: http://www.smashingmagazine.com/2008/05/06/25-wysiwyg-editors-reviewed/

BTW, that’s an old post (2008) and some might not be available anymore

My own preference is to generally hand-code (sometimes I’ll copy and paste a working example and modify it to suit) as when a program like Dreamweaver is used any errors could be made by either the program or the user.l When the CSS is hand-coded any errors are down to the user only.

If you either have a good sized screen or two screens hooked up to the computer then you could have a text editor open in one to edit the css file and in the other have a browser window open to test any changes that are made.

If you end up using a sample from somewhere and you might forget why you used that sample, place a comment above or below the bit to remind yourself or to inform a future developer why that bit was chosen.

[font=verdana]You don’t have to hand-code it, but you’ll often end up with a better site if you do. Editors like Dreamweaver can create all the styles, but they can’t know what you mean, so you will usually have less semantic code and more bloat/redundant code, leading to more styles than you need, which makes it more difficult to maintain and update. If you have hand-coded it, you will know exactly what everything does, which will help you to slim it down and make sure that everything is exactly as it should be.

Even on sites where I have to use a CMS, I always switch to the code view and hand-code the editable content areas within the template![/font]

I would stop using Dreamweaver, it’s an old over-hyped program.

I recommend using a lightweight program like notepad++. This program provides more helpful foundation to coding your websites, using this you can make changes to your CSS frameworks.

For CSS based layouts, you can use bootstrap as suggested by @Pullo; or you can other frameworks such as:

http://www.amazium.co.uk/
http://foundation.zurb.com/
http://susy.oddbird.net/
http://gumbyframework.com/
http://www.getskeleton.com/
http://www.responsivegridsystem.com/
http://responsive.gs/
http://piira.se/projects/ingrid/

This would be your easiest option, your hardest bet would be to try and make a professional web design tool out of Dreamweaver :wink:

I disagree. Dreamweaver is still among the best in terms of coding. It is easy to use and pretty robust. That said, there are newer options like SiteGrinder that do all of the heavy work for you so you don’t slave over a screen for hours coding a site to perfection.

I agree with you that Dw is quite a good code editor, but as mentioned above, anything that spits out code for you is likely to do a poor job of it, so it’s much better to learn to hand code. In the end, hand coding is much faster. I have a friend who uses a WYSIWYG editor, claiming it’s much faster, yet he spends hours trying to fix/debug things that take me a few seconds to fix via hand coding.

Knowing your code is very important in controlling every aspect of your website, which is crucial in today’s world of the web. WYSIWYG editors were good for learning what each thing does, but once you’ve completely grasped HTML and CSS you’d want to use a text editor to be able to understand what you’re doing.

Another downside to Dreamweaver is that is adds unnecessary tags. For example, every paragraph would be translated as a <DIV> and your document will contain a series of class’s with the name .style. We’ve not even touched on the left behind tags.

It’s low level entry point combined with it’s easy to use application made it a dream come true for wannabe web designer. As this is such an unregulated industry we naturally witnessed rock bottom prices overlooking the basics of web standards and browser cross-compatibility. Their technical expertise would be something similar to a person using Ms Word, but because of this low stepping stone this made it inevitable.

Many professionals with technical experitise just wanted to be in full control and the only way they could do this is if they dropped this paid program and opted for another editor. Many in the industry use a free HTML editor.

You’re more likely in today’s age to use CSS frameworks to do your hard work, such as 960, or the links I suggested above rather than using Dreamweaver.

Hi all,

Although DW has a WYSIWYG editor, which, as @Sega ; rightly says, is pants (if that is all you use), don’t forget that it also has a code view, which is awesome.
I use DW to do all my web coding (it has so many cool features like templates, code completion, widgets etc.), but I spend 99% of my time in the code view.
The WYSIWYG view is useful to highlight an element on the page, then you can switch back to the code view and see the appropriate HTML highlighted.

Maybe this is getting a bit off topic …

@Pullo;

Off Topic:

Sorry for getting a little off topic :slight_smile: Have you tried notepad++. It also have cool feature like auto-code completion and zen coding. There are hundreds of free plug-ins available, another popular one is sublime 2, this is a real quick editor (very responsive on your keyboard). At one stage I used DW but I got tired of the updates. Now I use notepad++ and it works great!

[ot]Hi Sega,

Indeed I have. On my local machine I have a dev server in a Virtual Box and as DW would (or at least used to) cause a virtual machine to fall over and die, I looked for other editors.
I tried Aptana Studio, but wasn’t convinced. Then I tried Notepad ++ and have been using that ever since.
Saying that, my work bought the complete Adobe CS5 suite for me to use, so it would be a crying shame not to use DW :slight_smile:
[/ot]