什么是创建网页布局的最佳工具？

Question

我使用Firebug查看Google翻译的HTML源代码（http://translate.google.com.vn/）是否很简单（在内容上）。

但它有一个非常复杂的布局（很多布局div）。我猜这些页面是基于一些软件支持而设计的布局。

我知道photoshop，但一般来说，在photoshop中创建布局非常困难，我想找一个更简单的工具。

Answer 1

我认为你应该使用photoshop Sitegrinder 3.5

网站磨床3.5是生成HTML和任何.PSD文件的CSS的好工具。但在我看来，对于小型和静态网站来说是好的，对于动态网站来说并不好。毫无疑问，它有助于开发一个网站，但它需要技术人员在Adobe Photoshop中使用现场研磨工具。我的意思是设计师不适合开发人员。网站磨床3.5是支持这些特点如下：

1. Rounded corner 
2. Shadow 
3. Borders 
4. Cross-Paging 
5. Menus and Sub-Menus 
6. Hide and show 
7. One design for many pages. 
8. More Powerful Hover And Click Behaviors 
9. Smooth Scrolling to Targeted Page Areas 
10. Create Powerful Animated Accordions Using Only Hints 
11. Attach Elements to The Browser Window(using –fixed hint) 

注：但其中的一些功能，如圆角，阴影等不是在IE7和IE8浏览器中运行。这意味着站点研磨器具有浏览器依赖性。

有网站磨床3.5的一些限制：

1. 渐变颜色是不允许的。
2. 为每个页面生成多个CSS。
3. 带提示的图层名称必须正确。
4. 它仍然是越野车。一些已经使用过它的人说它会生成错误的代码。但使用它时我没有发现任何错误。

请记住以下这些线路在设计使用网站粉碎机3.5网页：

1. 有两个阶段设计：

   1. 创建PSD草案，并保存它。然后建立网站研磨机3.5
   2. 生成PSD文件后，使用设计管理器工具进行完整的设计和效果，然后将其保存在窗体构建窗口。

2. 使用样式编辑工具构建PSD后，可以在设计管理器中设置背景颜色，阴影，圆角。

3. 提示是正确的。

Answer 2

我认为网站布局制作是你的目标。

Answer 3

您可以使用软件如Balsamic快速创建模型。这是获得布局概念的可靠而快速的方法。否则总会有笔&纸。我用从raincreativelab草图纸。它可以免费下载并标记不同的浏览器视口。

素描/模型后，你可以留在photoshop和设计的细节。

Answer 4

也许你会有兴趣ForeUI，它可以为您的布局（和互动）产生HTML5模拟。