Solved

looking for a webpage prototyping/layout tool

Posted on 2009-03-29
10
498 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

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... …
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
In this Micro Tutorial viewers will learn how to remove an unwanted object using Photoshop’s feature known as content-aware fill.
It’s easy to embed any of your public Prezi presentations on your website or social network to share with others. Learn how simple it is in this tutorial.

708 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now