Any HTML/CSS Mockup tools?

[michael Scott]

Hello, I am newbie on these forums so forgive me if I break any rules...

I am looking for an HTML mockup tool that produces HTML that uses CSS (not FONT, etc. tags). Has anyone seen such a beast? I played around with MS Frontpage and am very disapointed that it makes no attempt to produce formating using CSS. Or am I using it wrong? I see some templates for producing CSS and ways to apply CSS but the basic templates produce old fashioned HTML with all the font, strong, etc. tags.

In my company, typically when we are making a proposal to a client for a web site, we will have a web designer produce a mockup using front page. Once the customer accepts the design it is up to the developer (like me) to go in and hack out the old HTML and put in the Style sheet (as well as server side code for the web application).

My guess is that due to the nature of CSS, it would not be easy to build such a tool (e.g., how to know which <div> tags get which class, etc.).

Any assistance will be greatly appreciated.

MS

[vgarcia]

Dreamweaver MX tries, and it tries really hard, but there are still many aspects of CSS layout that it doesn't get. Unfortunately, there are no 100% perfect WYSIWYG CSS layout tools right now .

[basicwebus]

I am working with a program called HTML Kit, it is a
free download from Chami.com Here is the address.
HTML-Kit - http://www.chami.com/html-kit/
Copyright (C) 1998 - 2002, Chami.com You might try it, plus there are add-ons you can
download also.

[michael Scott]

Thanks, I will give HTML kit a try. Does it provide templates for generating web pages and if so does it use CSS for the formatting?

[basicwebus]

It does have some templates, plus you can create your own and save them for use another time. You can choose what type of file you want, etc. You can also download more free templates from the add-on and download area. I really like this program and have been using it for over a year. You can also validate your html, xhtml, etc and check your code. It is beginning to have support for php and mysql also.

[jpollone]

Personally, I would prototype at a higher level. I use Photoshop for graphicy, touchy-feely stuff for the client to see. I have created a set of reusable prototyping elements (checkboxes, radio buttons, fields, etc.) but I would only prototype the home page and maybe a significant piece of their workflow.

Another great project for computer-based prototyping is DENIM: http://guir.berkeley.edu/projects/denim/

[basicwebus]

I like HTML Kit because it doesn't add to my code. It leaves it alone, where most other programs I use, want to add their bloat to my pages. Plus, it's FREE! (ok, I admit it, I'm cheap!)

[ComputerBob]

basicwebus,

Thanks for the tip and the link! I'm downloading HTML-Kit as I type this, but I have one question for you -- does it include CSS authoring/testing/viewing support "out-of-the-box" or do you have to add one or more of its many downloadable CSS add-ins/plug-ins to make it support CSS authoring?

[basicwebus]

You probably know this by now, but it has CSS support with the first download. I hope you enjoy this program as much as I do. I found this when I got tired of fighting other high-priced programs. They kept changing my code. I was in web coding heaven with this program after all the fighting with the others.

[Jeff Lange]

Dreamweaver MX tries, and it tries really hard, but there are still many aspects of CSS layout that it doesn't get. Unfortunately, there are no 100% perfect WYSIWYG CSS layout tools right now .

I am pretty impressed with it's CSS displaying support however, as I've seen my pages render almost flawlessly in Dreamweaver MX (code which I wrote myself), when accidentally clicking Design View.

Maybe Macromedia should write a web-browser.

[geiger]

Where is DWMX's auto-CSS setting? I know there's one which states "Use CSS shorthand for: [fonts, etc]" but although I checked it, nothing happens Also, I'm assuming it uses in-document styles as apposed to using external stylesheets?

[Subhadip]

I am pretty impressed with it's CSS displaying support however, as I've seen my pages render almost flawlessly in Dreamweaver MX (code which I wrote myself), when accidentally clicking Design View.

Maybe Macromedia should write a web-browser.

Hmm... Everything will appear flashy then.

[CRA]

Where is DWMX's auto-CSS setting? I know there's one which states "Use CSS shorthand for: [fonts, etc]" but although I checked it, nothing happens [img]images/smilies/smile.gif[/img] Also, I'm assuming it uses in-document styles as apposed to using external stylesheets?

If you hand code your css, DW won't rewrite the css for you. But if you go through the css definitions dialogue box (and make at least 1 edit), then it will rewrite the css into shorthand for you.

[townmiddleburgh]

DW has a setting where you can either make the stylesheet appear in-page with style tags, or it can be linked--either by the style tag again, or by the link tag.

[geiger]

If you hand code your css, DW won't rewrite the css for you. But if you go through the css definitions dialogue box (and make at least 1 edit), then it will rewrite the css into shorthand for you.

Wha?

I usually make an external stylesheet and use the CSS sidebar to make classes. Sometimes I'll edit it separately. Now, what do I need to do differently?

[CRA]

Wha?

I usually make an external stylesheet and use the CSS sidebar to make classes. Sometimes I'll edit it separately. Now, what do I need to do differently?

Yeah, if you go through the css sidebar, that should pull up a dialogue box where you define the css properties. And if you go through this box, this should rewrite the css into short-hand if there is shorthand.

But editing it separately (without going through the sidebar, without going through the dialogue box) wouldn't prompt DW to rewrite the css.

[geiger]

Humph. Still confused. I need to refrain from touching the sidebar and DW will automatically use CSS for fonts?

[CRA]

Not quite sure what you're doing but here's what I do (using DWMX):

Preferences --> CSS Styles
Use Shorthand For:
(x) Font
(x) Background
(x) Margin and Padding
(x) Border and Border Width
(x) List Style
Use Shorthand:
( ) If Original Used Shorthand
(x) According to Settings Above
**
save preferences
**

To pull up the CSS editor:
Menu --> Windows --> CSS Styles
(or press shift-F11)

In this window, if you click on the "new CSS style" button or the "edit CSS" button and go through this to edit your CSS, then DW will rewrite the code into shorthand -- regardless of whether the CSS is embeded into your document or linked externally. What the CSS editor won't work with is inline styles.

(aside: I used to complain about inline styles not being supported until I read that inline styles in xhtml 1.1 are deprecated. lalala, nevermind.)