• 当前位置:首页资讯圈子圈事
  • 如何将 PSD 转换为 HTML 代码

  • 发表时间:2022-11-15 13:00:00  作者:admin  阅读资数:28
  • 当你准备好 PSD 后,您可以进入下一步,即将 PSD 转换为 HTML。我们已将该过程分解为一些简单的步骤。您可以按照这些步骤一一将您的 Photoshop 文档转换为 HTML/CSS 代码。 

    当您准备好 PSD 格式的设计时,是时候通过以下步骤执行转换了——

    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 屏幕标签。

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