[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

looking for a webpage prototyping/layout tool

Posted on 2009-03-29
10
Medium Priority
?
528 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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’s Wrong with Your Cloud Strategy ?

Even as many CIOs are embracing a cloud-first strategy, the reality is that moving to the cloud is a lengthy process and the end-state is likely to be a blend of multiple clouds—public and private. Learn why multicloud solutions matter in this webinar by Nimble Storage.

Question has a verified solution.

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

When designing and editing page layouts in inDesign, fonts can become messy without the help of paragraph styles. How many times have you re-read through a document you created and noticed a sentence in the middle of a paragraph happened to be a dif…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In addition to being a great web-based presentation tool, Prezi also makes it easy to save your presentation as a PDF to share with others as well. Learn how in this tutorial. Select the share icon from the top menu in your Prezi editor: Select "D…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

649 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