SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member
    Join Date
    Jun 2002
    Location
    New York
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Any HTML/CSS Mockup tools?

    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

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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 .

  3. #3
    SitePoint Zealot basicwebus's Avatar
    Join Date
    Jul 2003
    Location
    Missouri
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    After the third time of reading the instructions,
    it finally soaks in to my thick skull.



  4. #4
    SitePoint Member
    Join Date
    Jun 2002
    Location
    New York
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    SitePoint Zealot basicwebus's Avatar
    Join Date
    Jul 2003
    Location
    Missouri
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    After the third time of reading the instructions,
    it finally soaks in to my thick skull.



  6. #6
    SitePoint Member
    Join Date
    Jul 2003
    Location
    Dallas, TX
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/

  7. #7
    SitePoint Zealot basicwebus's Avatar
    Join Date
    Jul 2003
    Location
    Missouri
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!)
    After the third time of reading the instructions,
    it finally soaks in to my thick skull.



  8. #8
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  9. #9
    SitePoint Zealot basicwebus's Avatar
    Join Date
    Jul 2003
    Location
    Missouri
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    After the third time of reading the instructions,
    it finally soaks in to my thick skull.



  10. #10
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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 .
    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.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  11. #11
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    SitePoint Guru
    Join Date
    Sep 2002
    Location
    Universe
    Posts
    789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Lange
    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.

  13. #13
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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 [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.

  14. #14
    SitePoint Enthusiast townmiddleburgh's Avatar
    Join Date
    Aug 2003
    Location
    Middleburgh, NY
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CRA
    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?

  16. #16
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by geiger
    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.

  17. #17
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Humph. Still confused. I need to refrain from touching the sidebar and DW will automatically use CSS for fonts?

  18. #18
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •