您如何开始将Web设计布局转换为HTML实现？

Question

我正在阅读this tutorial，在Photoshop中创建web layout以达到类似的结果：

_{（来源：adobetutorialz.com）}

这似乎会产生单个图像文件，但是没有解释如何将其转换为web application implementation。

我的意思是，当“About Us”，“Services”等人点击时，您需要具备此功能。

那么，为了将这个static图片转换为更多dynamic功能性网络应用，您需要遵循的下一步是什么？

您是否应将图片分成几部分并将其作为背景图片放在页面上？

Answer 1

除非你有兴趣花费大量时间学习CSS布局，否则最简单的成功之路就是将Photoshop文件发送给像psd2html这样的人，这样可以很快地完成这种事情。令人震惊的低价。这样您就可以将开发工作重点放在应用程序功能上。

在Photoshop中设计网页模板非常棒，因为您不会受到任何预先存在的关于CSS知道如何处理的概念的限制。但同样的原因也是危险的。某些布局模式非常完善且易于使用CSS，而其他可能看起来非常简单的东西则不是。

Answer 2

扩展先前的评论：

1. 使用切片工具或自己动手，将图像分解为附着的部分，但不包括文本。
2. 将文本元素放在HTML中[不要将其保留在图像上，否则以后很难更新]
3. 使用外部CSS文件管理配色方案。

Answer 3

以下是您的需求： Step by step process for CSS/HTML layout?

这是加强上述链接的一些额外指导： https://stackoverflow.com/questions/1321097/seo-where-do-i-start/1321284#1321284

如果您不需要，请不要像其他人推荐的那样切片。这是非常低效的。图像切片是一种过时的做法，会导致许多不同的图像被发送给您的用户，每个图像都有自己的HTTP标头。这会增加带宽并浪费人们的时间。为用户提供尽可能少的图像文件，并使用CSS使它们在您的布局中工作。查找一种名为 CSS Sprites 的技术，以查看可以在单个文件中提供多少种不同的图像来表示布局的各种组件。

Answer 4

是。您将需要使用“切片”工具将图像分解为区域。从那里我相信你可以“保存为Web”，它将生成表格式的HTML和图像，你自己可以转换成页面。 Photoshop只是这个难题的一部分。

Answer 5

使用图像编辑工具将图像切割成必要的图像以制作页面。知道切片的位置和内容需要经验，但这里有一些指示 -

1. 所有图像都是矩形的，因此在进行切片时考虑“列”和“行”可能会有所帮助。但是请仅使用表格来表格而不是布局：）

2. 如果图像中有重复图案，请切割允许图案细分的最小尺寸图像，并使用css重复图像。

3. 为正确的作业使用正确的图像类型，例如.gifs用于小动画，.png用于叠加，.jpg用于照片等。wiki page may be of help here

4. 使用正确的图像文件大小和作业尺寸。我通常会尝试使图像文件尽可能小，而不会失去图像的整体效果。请记住，较大的图像=更多带宽=下载时间更长

获得图片后，我建议您使用pixel perfect plugin和Firebug一起使用Firefox将页面放在一起。像素完美插件允许您将图像叠加到网页上，以便您可以将所有内容对齐以匹配原始模型。

一旦你有一个使用HTML和CSS的基本功能页面，我就会看到这一点，通过JavaScript / JavaScript框架引入客户端功能。在你完成布局之前做这件事可能会让你感到困惑，所以我会达到你对你拥有的东西感到满意的程度，然后介绍它的功能。这样做也有助于progressive enhancement并鼓励unobtrusive JavaScript。

Answer 6

切片图像通常就是这样做的方式，但要注意编写的教程已经把你画成了一个角落。

请注意，整个图像（我假设它意味着将浏览器填充为网站）仅为766 x 700像素。这只是现代显示器尺寸的一半以上，因此您将在内容右侧（或居中内容的任一侧）拥有大量的空白区域。

平均显示器尺寸因地理位置而异，因此请熟悉您的受众群体的典型情况，并使您的背景图层大小不一。五年前我的所有网站的尺寸都是800 x 600显示器，现在它们的尺寸为1024 x 768.但我正在观看我的网站的流量数据，因为近一半的访问者使用了更大的显示器。

用于创建HTML以显示图像和文本的方法取决于您执行此操作的原因。如果它是业余爱好或副业，请使用任何WYSIWYG网站创建软件包或在线工具。如果您打算学习如何将其作为职业，那么请帮助自己，并学习如何使用Web标准（语义HTML / CSS）创建网站。每个人都通过查看其他人的代码来学习，但要小心你从中学到的代码。

查看关于CSS的Eric Meyer书籍和关于网络标准的Jeffrey Zeldman书籍，了解如何制作不仅适用于当今浏览器，还适用于现代移动设备和明年的网站的课程浏览器。在他们的网站上，查看他们的文章和帖子，并查看他们的HTML源代码，看看他们是如何做到的。

另外，查看七个不同的PSD到HTML教程的article，看看其他设计师如何解决这个问题。

Answer 7

我使用的常用方法是首先使用photoshop，illustrator等设计页面布局。

一旦你有了布局，就可以从高层看看设计如何在页面上占据对称的形状。

接下来确定可以在CSS中平铺，激活（如前所述）或重新创建的图像。例如，在上图中，您可以主要使用CSS创建平铺框。

您当然可以将其切割为一个图像，但之后会创建大量浪费的像素，这只会降低页面性能并增加加载时间。

远离设计中使用表格，并期待使用div标签/图层 使用div标签结合格式正确的CSS将产生一个反映上面确切布局的灯光页面。

在你设计中我还会考虑一些项目（其中一些已在上面提到）设计页面以进行流畅的演示。如果你必须将图像锁定到一个特定的大小，即700px，那么设计页面，使其布局在页面的中心，并清晰地呈现为更大的屏幕分辨率。

尽可能多地使用CSS并在多个浏览器上进行交叉测试（即safari，firefox等）Internet Explorer将以不同于其他浏览器的方式呈现CSS，因此您应该了解并在开发过程中对此进行测试。

尝试创建可以平铺的背景图像或具有较大分辨率的快速加载时间的背景图像。 例如，如果您的网站布局最好以1024x768观看，则使用小尺寸和渐变混合的小颜色托盘创建背景，并在多个面上混合常见的背景颜色。这将允许您的背景成为网站设计的一部分，但也支持更大的分辨率。定位可以用CSS来解决背景问题。

如果您不熟悉编码页面，那么我认为它可以帮助使用一些应用程序，如photoshop，illustrator等将图像转换为HTML。请注意，在执行此操作时，您将获得大量过多的代码，这些代码会使页面膨胀，并且您还会在构成背景等的页面中获得大量不必要的图像。

简而言之，没有任何替代品可以自己开始阅读，解释和手工编写文档。您将获得更多设计灵活性，并可以访问一些WYSIWYG应用程序中无法访问的样式，属性和属性。

关于CSS的互联网搜索和DIV标签的使用将返回大量示例和入门指南。 祝你好运！

Answer 8

在FireBug上安装FireFox并检查随机图片较多的页面。使用FireBug，您可以轻松检查网页的HTML并查看相关的样式和图像。

Answer 9

在Microsoft Expression Web SuperPreview中，您可以将图片叠加在html上。更新html，直到它们在您计划支持的所有浏览器中看起来相同。