looking for a webpage prototyping/layout tool

Posted on 2009-03-29
Medium Priority
Last Modified: 2013-12-13
I am going to be designing a website and am looking for a prototyping/layout tool to produce XHTML/HTML and CSS for the webpages.

We already have a copy of Fireworks, which I haven't used before.

On first glance, it (the online videos only!) looks like it can produce XHTML and CSS.
However, it also seems to be designed as a graphics tool for creating / manipulating vector and bitmap graphics.

Does it suffer as a layout tool because of this?

Is there anything better/easier/more standards-compliant out there?

many thanks!
Question by:zorba111
LVL 11

Assisted Solution

level9wizard earned 150 total points
ID: 24015185
If you're looking for a tool to produce valid XHTML/CSS from a design view like Dreamweaver or Frontpage, you're more than likely looking for something that doesn't exist.

If you want valid, clean, sensible code - use a text editor like Notepad++ or Visual Web Developer 2008 (code view). Both are free, and both give full control over the code.
LVL 18

Expert Comment

ID: 24015224
fireworks, you're right, it's forte is principally graphics. It can be used for navigation elements too, but I believe the code can be clumsy.

dreamweaver is the industry standard for web layout, but its only a tool
Various text editors can be used, but a far amount of knowledge regarding web design is required.

I would avoid frontpage
LVL 18

Expert Comment

ID: 24015243
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

LVL 13

Assisted Solution

qwerty021600 earned 300 total points
ID: 24016495
You can use Dreamweaver to create Webpage. also to check for standard compliance, go to W3.org and more specific

Author Comment

ID: 24034007
I don't mind if we end up having to handcode the individual pages again after we decide on what we want.

HOWEVER, what I'm after is a RAPID PROTOTYPING TOOL, to be able to QUICKLY create MOCK-UPS of the various pages. The LINKS, BUTTONS etc. DO NOT HAVE TO WORK, as what we are trying to do is get the DESIGN, LOOK & FEEL of the site done first, and then add all the coding.

I want to be able to quickly fire out a page design, and try things out in different positions, without having to get distracted and bogged down by worrying about hand-coding HTML / CSS.

We can refine the underlying HTML / CSS code once we have decided on the layout, colour, feel, placement of elements etc.

My raw HTML and CSS is NOT GOOD ENOUGH to be able to QUICKLY fire out page after page, fast enough to be able to concentrate on the layout.
LVL 18

Accepted Solution

Philip_Spark earned 300 total points
ID: 24034160
Fireworks, which you have or Photoshop would work here's a link to a video walkthrough on a workflow scenario. It's a 3 parter


there's a lot more under the videos tab of that site, that maybe suit your needs, I can't list them all

and another with links to various example sites


Assisted Solution

Awestin earned 300 total points
ID: 24053862
I am not sure if this is what Philip Spark was trying to say, but when I wish to create a quick mock-up of a web design, I use photoshop and then dreamweaver.

-In photoshop, create what you want the website to look like
-Next, you have to slice the image using the 'slice' tool
-'Save for Web Devices' in photoshop
-Name each slice accordingly (ex. button_home_rollover)
-Save 'HTML and Images' to a folder
-Open saved .html and images in web browser, or continue further editing in dreamweaver

From there you could very easily look at your quick design website in a web browser. You don't even have to slice each image if you don't plan to continue in that manner. It is possible to save the whole thing as one image and html document, then preview it in the web browser.
LVL 13

Assisted Solution

qwerty021600 earned 300 total points
ID: 24058630
Awestin is right, but you need to work upon CSS an HTML part. There's no software as such which will do this for you.
But we can assist you in case you come across any problem while working on this. :)

Assisted Solution

jorsing earned 150 total points
ID: 24067814
If you are just creating  mock-ups, the best tool is software YOU know.

I have seen people do great work in PowerPoint.
You can even save your PowerPoint slide set as a website by using "Save As" and selection HTML.

Other possibilities in addition to Photoshop, Dreamweaver, and Fireworks: InDesign, Pagemaker, Flash, even Word for a simple site (use tables).

(I personally prefer Photoshop.)
LVL 16

Assisted Solution

glenn_1984 earned 300 total points
ID: 24080816
I have been developing web sites in Fireworks for YEARS.
I do use Photoshop as well, but, frankly, find Fireworks easier to work with.
Both produce excellent output.

The great thing about Fireworks CS4 is, you can Export to HTML and CSS with all your div tag defined in the output.

You will need something like Dreamweaver as well, unless your website is super basic.

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn the basic shortcuts and functions in InDesign.
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question