-2

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

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

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

4

4 回答 4

2

我认为你应该使用photoshop Sitegrinder 3.5

Site Grinder 3.5 是生成任何 .psd 文件的 Html 和 CSS 的好工具。但在我看来，它适用于小型静态网站，不适用于动态网站。毫无疑问，这对开发网站很有帮助，但它需要在 Adob​​e 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. 它仍然是错误的。一些已经使用过它的人说它会生成错误代码。但是我在使用它时没有发现任何错误。

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

  1. 设计分为两个阶段：

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

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

  3. 提示是正确的。

于 2012-07-12T08:06:27.367 回答
1

我认为网站布局制造商是您要找的。

于 2012-07-12T06:59:17.003 回答
1

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

在草图/样机之后，您可以继续使用 Photoshop 并设计细节。

于 2012-07-12T07:01:51.047 回答
0

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

于 2012-07-12T17:05:16.110 回答