想要将像素完美的 .PSD 文件转换为结构良好的 HTML 格式？那么，那么您可以选择将 PSD 编码为 HTML 和 CSS 文件格式。如果您是初学者，您可能会发现编码部分很难处理。这篇客座文章将作为初学者的基本指南，告诉他们如何成功地将代码从 .PSD 移动到 HTML。
第 1 步 - 共享您的 .PSD
所以，如果你有一个像素完美的 .PSD 和大量的设计，你可能必须从中导出设计元素。让我们首先从最基本的元素开始，即背景。在背景上工作时，禁用所有其他图层并在其周围绘制一个标记。为此，右键单击 (Windows) 并在 photoshop 工具中选择“显示/隐藏所有其他图层”选项。然后，按住 Alt (Windows)，激活移动工具来拖动要复制的选区。激活移动工具后，您可以将您的选择从这个活动图像窗口移动到漂亮的目标图像窗口。
提醒一句，由于当今大多数网站通常都是用视差滚动效果创建的，因此确保您的设计足够宽很重要，这样在大屏幕上查看时不会被裁剪。因此，请确保将设计的宽度设置为 2200px，这是可以轻松适应更大屏幕的足够大小。
现在您已经创建了一个大尺寸图像，您必须确保图像的质量不受影响，因此仔细选择压缩设置非常重要。
现在继续使用选取框工具对单个页面元素执行相同的步骤（如上文背景所述）。接下来，按 Ctrl+Shift+C 复制并合并元素，然后将它们粘贴到可以导出它们的新文档中。特别是，您的站点徽标、个人资料图像和小导航图标等元素需要保存为单独的图形。接下来，为每个项目选择正确的文件类型和压缩设置。保存所有图像后，您必须转到 HTML 部分。
第 2 步 - 使用 HTML
现在您已经仔细地分割了 .PSD 的每个元素，您必须通过编写以下代码使用 HTML 为它们提供结构：
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
在构建 HTML 时，您必须考虑 3 个主要元素：页眉、页脚和内容。
您应该牢记将
PSD
转换为 HTML 文件的好处
，以便可以准备适当的手动编码 HTML 代码。
1.标题
每个网页设计都包含一个标题，通常包含徽标和主导航菜单。让我们看看如何为标头编写结构：
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
正如您在上面的代码片段中看到的，标题部分包含您的徽标和导航菜单，分为不同的部分：首页、关于、投资组合和联系人，定义在无序列表中。
2. 内容
接下来是最关键的部分，它将帮助您将品牌信息广泛传播给目标受众——即您的网站内容。在构建 HTML 时，您必须为包含在 div 中的内容编写结构以及内容 ID。您可以选择以大型图形图像的形式编写内容。下面的代码将帮助您更好地理解如何构建内容：
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
比方说，您希望将设计分成两列。在第一列中，您要添加精选视频（可以是 Youtube 视频或 vimeo 视频），然后是标题和说明。下面是第一列的代码片段：
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
在您的第二列中，您可以定义任何即将发生的事件，包括日期和对事件或程序的一些描述。
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
在上面的代码片段中，您可以将文本“This is the dummy content”替换为您的原始内容。而且，您可以根据自己的要求定义即将发生的事件（如果有）。
3.页脚
现在是用页脚关闭 HTML 的时候了。页脚通常包含一个简单的返回顶部链接。但是，如果您愿意，您也可以选择将导航菜单添加到页脚。
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
第 3 步 - 让我们向 CSS 添加样式
一旦您完成了 HTML 结构的编写，接下来就是设置 CSS 样式的主要部分。此步骤将确保所有 HTML 部分的元素：页眉、内容和页脚都以干净整洁的方式排列。样式化 CSS 涉及将所有设计元素以有组织的方式放在一起。您可以定义将在您的站点上显示的文本的字体系列和大小。然后，您可以添加您网站的主要背景图片，它位于顶部中心（不要忘记添加，不要重复）。这些都是将 PSD 文件转换为 CSS 文件所必需的。您可以在下面看到：
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
现在让我们开始一个一个地设计所有 HTML 部分的样式。
如何设置标题部分的样式？
在设置标题部分的样式时，您首先必须设置主容器 div 的样式，然后是标题及其子元素。确保为标题 div 分配一些填充，以便根据 .PSD 概念在顶部和侧面创建空间。
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
如何设计内容的样式？
让我们开始设置内容背景的样式。
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
现在，让我们通过编写以下代码片段来设置功能部分的样式：
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
现在，让我们看看如何设置上面创建的两列内容的样式。列需要并排浮动，因此我们将添加宽度（很容易适应内容 div）和 float:left 属性。此外，您还必须设置这些列中显示的视频和即将发生的事件的样式。您可以简单地向视频 div 添加图像背景以使嵌入的视频更加生动，添加一些填充将有助于对齐所有内容。除此之外，您还可以计划为事件元素添加精美的布局。例如，查看以下可帮助您设置列内容样式的代码。
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
如何设置页脚样式？
您可以通过简单地添加带纹理的背景和放置在正确位置的返回顶部链接来设置页脚区域的样式。
//*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />
<title>My Company Logo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
</div>
</body>
</html>
结论
所以这里我们有完整的实时 HTML 和 CSS 格式的模型。我们的 HTML 干净有效，CSS 根据原始 .PSD 概念呈现我们想要的一切。
