如何开始将网页设计布局转换为 HTML 实现？
我正在阅读本教程关于创建Photoshop 中的网页布局最终会得到如下所示的结果：
（来源：adobetutorialz.com）
这似乎会生成单个图像文件，但是没有解释如何将其转换为网络应用程序实现。
我的意思是，当有人点击“关于我们”、“服务”等时，您需要具有功能。
所以，为了从这个静态图像转变为功能更强大的动态网络应用程序，下一步您需要遵循什么？
您是否应该将图像分成几个部分并将它们作为页面上的背景图像？
I was reading through this tutorial on creating a web layout in Photoshop to end up with something like this:
(source: adobetutorialz.com)
This seems to produce a single image file, however and there is no explanation of how to translate this into a web application implementation.
What I mean is, you would need to have functionality for when someone clicks on "About Us", "Services", etc.
So, what's the next step you need to follow in order to go from this static image into a more dynamic functional web app?
Are you supposed to break the image up into sections and place them as background images on the page?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
除非您有兴趣花费大量时间学习 CSS 布局，否则最简单的成功途径是将 Photoshop 文件发送给 psd2html，它可以非常快地完成这种事情，而且价格低得惊人。这将使您能够将开发工作集中在应用程序功能上。
在 Photoshop 中设计 Web 模板很棒，因为您不会受到任何现有的 CSS 用法概念的限制。但出于同样的原因，这也是危险的。某些布局模式已经非常完善，并且很容易使用 CSS 来完成，而其他看起来应该很容易的事情却并非如此。
Unless you're interested in spending a lot of time learning CSS layout, your easiest path to success would be to send off the Photoshop file to somebody like psd2html, which does this kind of thing very quickly and for a shockingly low price. This would allow you to focus your development efforts on application functionality.
Designing a web template in Photoshop is great, because you're not constrained by any pre-existing notions of what you know how to do with CSS. But it's dangerous for this same reason. Certain layout patterns are very well-established and easy to do with CSS, while other things that might seem like they should be very easy, are not.
扩展之前的评论：
To extend on a previous comment:
这是您需要的：
CSS/HTML 布局的分步过程？
这是一些额外的指导来加强上述链接：
https://stackoverflow.com/questions/1321097/seo-where-do- i-start/1321284#1321284
如果不需要，请不要按照其他人的建议对图像进行切片。这是极其低效的。图像切片是一种过时的做法，它会导致许多不同的图像被发送给您的用户，每个图像都有自己的 HTTP 标头。这会占用带宽并浪费人们的时间。向用户提供尽可能少的图像文件，并使用 CSS 使它们在您的布局中工作。查找一种称为 CSS Sprites 的技术，看看可以在单个文件中提供多少种不同的图像来表示布局的各个组件。
Here is what you need:
Step by step process for CSS/HTML layout?
This is some extra guidance to reinforce the above link:
https://stackoverflow.com/questions/1321097/seo-where-do-i-start/1321284#1321284
Do not slice the image, as others have recommended, if you do not have to. That is extremely inefficient. Image slicing is an outdated practice that will result many different images being sent to your users each image having its own HTTP header. That sucks up bandwidth and wastes peoples' time. Serve as few image files as possible to the user and use CSS to make them work in your layout. Look up a technique called CSS Sprites to see how many various images can be served in a single file to represent various components of a layout.
是的。您需要使用切片工具将图像分成多个区域。从那里我相信您可以“保存为网络”，它将生成充满表格的 HTML 和图像，您可以自己将其转换为页面。 Photoshop 只是拼图中的一小部分。
Yes. You will need to use the Slice tool to break the image up into regions. From there I believe you can "Save for Web" and it will generate table-ridden HTML and images which you yourself can convert into pages. Photoshop is only one piece of the puzzle.
使用图像编辑工具将图像分割成制作页面所需的图像。知道切片的位置和内容需要经验，但这里有一些提示 -
所有图像都是矩形，因此在进行切片时考虑“列”和“行”可能会有所帮助。但请仅使用表格作为表格数据，而不是用于布局:)
如果图像中有重复图案，请分割允许图案细分的最小尺寸的图像，并使用 css 来重复它。
为正确的工作使用正确的图像类型，例如 .gif 用于小动画、.png 用于叠加、.jpg 用于照片等。 wiki 页面可能会有所帮助
使用正确的图像文件大小和尺寸为了工作。我通常会尝试在不损失图像整体效果的情况下使图像文件大小尽可能小。请记住，较大的图像 = 更多带宽 = 下载时间更长
一旦您拥有图像，我建议您使用 Firefox 和 像素完美插件 和 Firebug 将页面放在一起。像素完美插件允许您将图像覆盖到网页上，以便您可以对齐所有内容以匹配原始模型。
一旦您有了使用 HTML 和 CSS 的基本功能页面，我就会考虑通过 JavaScript/JavaScript 框架引入客户端功能。在完成布局之前进行此操作可能会开始变得混乱，因此我会先让您对所拥有的内容感到满意，然后再介绍功能。这样做也有助于渐进增强并鼓励不引人注目的 JavaScript。
Use an image editing tool to slice your image into the necessary images to make your page. Knowing where and what to slice comes with experience, but here are some pointers -
All images are rectangular, therefore it might help to think about "columns" and "rows" when doing the slicing. But please only use tables for table data and not for layout :)
If you have a repeating pattern in an image, slice the smallest size of image that will allow the pattern to tesselate and use css to repeat it.
Use the right image type for the right job e.g. .gifs for small animations, .png for overlays, .jpg for photos, etc. The wiki page may be of help here
Use the right image file size and dimensions for the job. I usually try to make the images file size as small as possible without losing the overall effect of the image. Remember, larger images = more bandwidth = longer to download
Once you have your images, I'd recommend looking at using Firefox with the pixel perfect plugin and Firebug to put the page together. The pixel perfect plugin allows you to overlay an image onto a web page so that you can align everything up to match the original mock-up.
Once you have a basic functioning page using HTML and CSS, I would then look at this point at introducing client-side functionality via JavaScript/ a JavaScript framework. Doing it before you've done the layout can start to get confusing, so I would get to the point where you are happy with what you have, then introduce the functionality. Doing it this way also aids progressive enhancement and encourages unobtrusive JavaScript.
切割图像通常是完成此操作的方式，但请注意，编写的教程已经将您逼入了困境。
请注意，整个图像（我假设它是为了作为网站填充浏览器）只有 766 x 700 像素。这只是现代显示器大小的一半多一点，因此内容右侧（或居中内容的两侧）将有大量空白区域。
平均显示器尺寸因地理位置而异，因此请熟悉观众的典型尺寸，并将背景层设置为该尺寸或更大。五年前，我所有的网站尺寸都适合 800 x 600 显示器，现在它们适合 1024 x 768。但我正在观察我网站的流量数据，因为近一半的访问者使用更大的显示器。
用于创建 HTML 以显示图像和文本的方法取决于您执行此操作的原因。如果这是一种爱好或副业，请使用任何所见即所得网站创建软件包或在线工具。如果您打算学习如何将此作为职业，那么帮自己一个忙，学习如何使用 Web 标准（语义 HTML/CSS）创建网站。每个人都通过查看其他人的代码来学习，但要小心你向谁学习的代码。
查看 Eric Meyer 有关 CSS 的书籍和 Jeffrey Zeldman 有关网络标准的书籍，其中包含如何制作不仅可以在当今的浏览器中运行、而且可以在现代移动设备和明年的浏览器中运行的网站的课程。在他们的网站上，查看他们的文章和帖子，并查看他们的 HTML 源代码，看看他们是如何做到这一点的。
另外，请查看这篇文章 七个不同的 PSD 到 HTML 教程，了解其他设计师如何解决该问题。
Slicing the image is typically the way this is done, but beware that the tutorial as it's written has already painted you into a corner.
Notice that the entire image (which I assume is meant to fill the browser as a website) is only 766 x 700 pixels. That's just over half the size of a modern monitor, so you'll have an enormous amount of white space to the right of content (or on either side of centered content).
Average monitor sizes differ by geography, so become familiar with what is typical for your audience and make your background layer that size or larger. Five years ago all of my sites were sized for 800 x 600 monitors, and now they're made for 1024 x 768. But I'm watching my sites' traffic data as larger monitors are used by nearly half the visitors.
The method that you use to create the HTML to display the images and text depends on your reason for doing this. If it's a hobby or sideline, use any of the WYSIWYG site creation software packages or online tools. If you intend to learn how to do this as a career, then do yourself a favor and learn how to create sites using web standards (semantic HTML/CSS). Everyone learns by looking at other people's code, but just be careful who's code you learn from.
Check out the Eric Meyer books on CSS and the Jeffrey Zeldman book on web standards for lessons on how to make sites that will work not only in today's browser, but also on modern mobile devices and next year's browsers. While on their sites, check out their articles and postings, and take a peek at their HTML source to see how they do it.
Also, check out this article of seven different PSD to HTML tutorials to see how other designers would tackle the problem.
我使用的一种常见方法是首先使用 Photoshop、illustrator 等设计页面布局。
一旦有了布局，就从高层次的角度检查设计，看看图像如何占据页面上的对称形状。
接下来确定哪些图像可以在 CSS 中平铺、精灵化（如前所述）或重新创建。例如，在上图中，您可以主要使用 CSS 创建平铺框。
您当然可以将其切片为一张图像，但这样会创建大量浪费的像素，这只会降低页面性能并增加加载时间。
远离在设计中使用表格并考虑使用 div 标签/图层
使用 div 标签与正确格式化的 CSS 相结合将产生一个轻量级的页面，该页面反映了上面的确切布局。
在您的设计中，我还会考虑一些项目（上面提到了其中一些） 设计页面以实现流畅的呈现。如果您必须将图像锁定到特定尺寸（即 700 像素），请设计页面，使其布局在页面中心，并在更大的屏幕分辨率下清晰地呈现。
尽可能多地使用 CSS 并在多个浏览器（即 safari、firefox 等）上进行交叉测试 Internet Explorer 将以与其他浏览器不同的方式呈现 CSS，因此您应该在开发过程中意识到这一点并进行测试。
尝试创建一个可以平铺的背景图像，或者在高分辨率下具有快速加载时间的背景图像。
例如，如果您的网站布局为以 1024x768 获得最佳观看效果，则使用小调色板创建背景，该调色板的大小和渐变混合与多面的常见背景颜色相当。这将使您的背景成为网站设计的一部分，但也支持更大的分辨率。背景的定位可以在css中解决。
如果您不熟悉页面编码，那么我认为使用 Photoshop、illustrator 等应用程序将图像转换为 html 会有所帮助。请注意，执行此操作时，您将获得大量多余的代码，使页面膨胀，并且您还会在页面中平铺大量不必要的图像来构成背景等。
总之，没有什么可以替代开始阅读，自己解释并手动编码该文档。您将在设计中获得更大的灵活性，并可以访问某些所见即所得应用程序中无法访问的许多样式、属性和属性。
在互联网上搜索 CSS 和 DIV 标签的使用将为您返回大量示例和入门指南。
祝你好运！
A common approach I use is to first design the page layout using photoshop, illustrator etc.
Once you have the layout examine the design from a high-level look at how the images occupy symmetrical shapes on the page.
Next determine what images can be tiled, sprited ( as previsouly mentioned) or recreated within CSS. For example in the above image you could create the tiled box primarily with CSS.
You could of course slice it as one image but then you create a lot of wasted pixels that only decrease page performance and increase load times.
Stay away from the use of tables in your design and look towards the use of div tags /layers
using div tags combined with properly formatted CSS will result in a light page that mirrors the exact layout from above.
In you deign I would also consider a few items (some of which were mentioned above) Design the page for fluid presentation. If you have to lock the image down to a specific size i.e. 700px then design the page so that it is laid out in the center of the page and presents itself cleanly for larger screen resolutions.
Use CSS as much as you can and cross-test on multiple browsers (ie. safari, firefox etc) Internet explorer will render CSS differently from other browsers so you should be aware and test for this during development.
Try to create a background image that you can tile or that has a fast load time at a large resolution.
For example if you site is laid out to be best viewed at 1024x768 create a background using a small color pallet that is comparable in size and gradient blends to a common background color on multiple sides. This will allow for your background to be a part of the site design but also support larger resolutions. positioning can be addressed in css for the background.
If you are new to coding out pages then I think it can help to use some of the apps like photoshop, illustrator etc to convert the image to html. Just be aware that when doing this you will get a lot of excess code that bloats the page and you will also get a lot of unnecessary images tiling in the page making up backgrounds etc.
In short there is no substitute for begin able to read, interpret and hand code the document yourself. You will gain more flexibility in design as well as gain access to a number of styles, attributes and properties that are not accessible within some of the WYSIWYG apps.
internet searches on CSS and the use of DIV tags will return to you tons of examples and starter guides.
Best of luck!
在 FireFox 上安装 FireBug a> 并检查随机图像较多的页面。使用 FireBug，您可以轻松检查网页的 HTML 并查看关联的样式和图像。
Install FireBug on FireFox and inspect random image-heavy pages. Using FireBug you can easily inspect the HTML of a web page and see associated styles and images.
在 Microsoft Expression Web SuperPreview 中，您可以将图像作为覆盖层放置在 html 上。更新 html，直到它们在您计划支持的所有浏览器中看起来相同。
In Microsoft Expression Web SuperPreview you can lay the image as an overlay over your html. Update the html until they look the same in all browsers your planning to support.