如何将 PSD 转换为 HTML 代码

当你准备好 PSD 后，您可以进入下一步，即将 PSD 转换为 HTML。我们已将该过程分解为一些简单的步骤。您可以按照这些步骤一一将您的 Photoshop 文档转换为 HTML/CSS 代码。 

1.切片PSD

第一步，将 PSD 文件分割成具有多个图层的小块。在您的 HTML 页面中使用 PSD 切片版本的优势在于它可以帮助您的页面加载速度更快。原因是，单个 PSD 文件将花费大量时间来下载页面。

Photoshop 中提供的多种切片工具可用于对图像进行切片。可以使用不同的切片选项，即：

• 普通的
• 固定尺寸
• 固定纵横比
• 指南中的切片

切片 PSD 文件后，确保将切片版本保存在“保存为 Web”菜单下。这些图像可以放在“图像”目录中。

2.创建目录

创建所需的目录是一种很好的做法，这样您就可以以有组织的方式管理数据。可以创建以下目录：

• 带有网站名称的主文件夹
• 主文件夹下有一个名为“Images”的文件夹，用于存储您稍后将在站点中使用的所有图像
• 主文件夹下的 CSS 文件或样式表名为“Styles”的文件夹

3. 编写 HTML

创建所需的文件夹后，就可以创建 HTML 页面了。您可以使用 HTML 页面构建器（如 Adobe Dreamweaver）和其他选项（如 Komposer 或 Amaya）。建议在 Dreamweaver 中构建一个新文件作为 index.html 并将其保存在主文件夹中。

使用 HTML5，从上到下的代码分段很容易——

• 页眉- 任何页面的顶部都包含徽标和其他菜单项。
• 英雄- 顶部的一个很大的部分，用于强调特定图像或任何优惠。
• 幻灯片- 轻松显示在页面上滑动的图像列表。
• 内容 -主要文本区域，包括图像、按钮、文本等数据。
• 页脚 -页面底部的区域，包含联系人、博客链接和社交媒体链接。

4.创建样式文件

当你得到一个 HTML 外壳时，最好将一些样式放入 CSS 中。使用诸如 BootStrap 之类的框架，可以进行很大范围的样式设置。它可以按照您想要的方式进行个性化进一步塑造。

您可以使用 HTML 编辑器创建样式文件，并将它们保存为 CSS 文件夹中的 styles.css。在样式表中，可以提供有关 HTML 网页样式特征的一些详细信息，例如字体大小、字体类型、图像位置、背景颜色、边距和字段集等。5.生成网页设计集

下一步是通过将所有元素集中在一起来创建一组设计。为此，您需要像 Dreamweaver 这样的代码编辑器。之后，依靠使用 CSS 快速布局 HTML 来打下坚实的基础。现在，主体背景颜色和图像已设置，同时保持主要元素处于良好位置。

6.允许JavaScript交互

完成 HTML 和 CSS shell 后，必须考虑 JavaScript。它使用 jQuery 和相关框架，如 react.js 和 vue.js。jQuery 是一个组织 DOM 并添加额外功能以创建动态布局的库。

与原始 JavaScript 相比，这使得编写动态前端代码更容易。同样，列出的两个框架允许使用 JavaScript 数据和函数轻松挂钩 HTML 元素。

框架列表中的另一个流行名称是 AngularJS。它允许您使用 MVC 样式，以便您可以在 HTML 布局中动态设置数据。

7.让它响应

最好使用不同的框架，如 Twitter Bootstrap、Less、Foundation 和 Fluid Baseline Grid，以获得有效的PSD 到响应式 HTML 转换. CSS 媒体查询可以很好地为设计添加响应特性。

此外，我们可以在每个目标屏幕上进行定制，以个性化每个屏幕的输出。为此，您可以为默认的响应式 CSS 屏幕使用不同的 CSS 屏幕标签。

这里的一个明显好处是用户可以通过多个平台进行广泛访问。这反过来又最大限度地提高了搜索引擎的可见性和网站的有机流量。