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

Question

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

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

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

Answer 1

我认为你应该使用photoshop Sitegrinder 3.5

Site Grinder 3.5是一个用于生成任何.psd文件的Html和CSS的好工具。但是在我的观察中它对于小型和静态站点是有益的，它对动态站点不利。毫无疑问，它有助于开发一个网站，但它需要熟练的人在Adobe Photoshop中使用网站研磨工具。我的意思是它对设计师而不是开发人员很有用。 Site Grinder 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浏览器中运行。这意味着站点研磨机具有浏览器依赖性。

Site Grinder 3.5有一些限制：

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

使用site grinder 3.5设计网页时请记住以下几行：

1. 设计有两个阶段：

   1. 创建草稿PSD并保存。然后Build Site Grinder 3.5
   2. 构建PSD文件后，使用Design Manager Tool完成设计和效果，然后将其保存为构建窗口。

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

3. 提示是正确的。

Answer 2

我认为网站布局制作工具就是您所寻找的。

Answer 3

您可以使用 Balsamic 等软件快速创建模型。这是一种了解布局的稳固而快速的方法。否则总会有笔和纸。我使用 raincreativelab 中的草图纸。它可以免费下载，并标记了不同的浏览器视口。

在草图/模型之后，您可以使用photoshop并设计细节。

Answer 4

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