Solved

looking for a webpage prototyping/layout tool

Posted on 2009-03-29
10
510 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 50 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
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 13

Assisted Solution

by:qwerty021600
qwerty021600 earned 100 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 100 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 100 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 100 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 50 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 100 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to create blended and gradiated shapes in Illustrator using the blend tool Draw two shapes, one of them in a different color: Select both and create a blend by going to Object > Blend > Make: Blends can also b…
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.

770 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