?
Solved

looking for a webpage prototyping/layout tool

Posted on 2009-03-29
10
Medium Priority
?
531 Views
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!
z
0
Comment
Question by:zorba111
10 Comments
 
LVL 11

Assisted Solution

by:level9wizard
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.
0
 
LVL 18

Expert Comment

by:Philip_Spark
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
0
 
LVL 18

Expert Comment

by:Philip_Spark
ID: 24015243
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 13

Assisted Solution

by:qwerty021600
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
http://www.w3.org/People/Raggett/tidy/
0
 

Author Comment

by:zorba111
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.
0
 
LVL 18

Accepted Solution

by:
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

http://css-tricks.com/video-screencasts/16-creating-the-photoshop-mockup
and
http://css-tricks.com/video-screencasts/16-creating-the-photoshop-mockup

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

http://www.photoshoptalent.com/blog/2008/08/11/the-60-best-photoshop-tutorials-to-design-your-own-amazing-site
0
 
LVL 2

Assisted Solution

by:Awestin
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.
0
 
LVL 13

Assisted Solution

by:qwerty021600
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. :)
0
 
LVL 2

Assisted Solution

by:jorsing
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.)
0
 
LVL 16

Assisted Solution

by:glenn_1984
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.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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... …
This article discusses four methods for overlaying images in a container on a web page
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Learn how to download your full Prezi presentation for offline presenting. Prezi doesn’t have to be viewed and shared in a web browser, even with a free account you can download your full presentation to share with others. Be sure to download any vi…
Suggested Courses
Course of the Month13 days, 22 hours left to enroll

809 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