从psd到css+div+html网页制作（ps转html5）

　　从psd到css+div+html网页制作 　　对于大多数网页设计师来说，将psd文件转化为css+div+html网页的过程就像魔法一样神秘。不过，事实上，将一个网页从psd文件转化为标准化的网页并不需要魔法，只需要使用正确的技术和合适的代码。 　　本文将介绍从psd到css+div+html网页制作的过程，并提供一些有用的技巧和资源，帮助你更有效率地工作。 　　1. 文件准备 　　首先，你需要准备好psd文件。确保所有层以及各个元素都已经分组并且有相应的名称，这可以帮助你更好地组织代码。 　　接下来，你需要将psd文件转化为png或jpg格式的图像，以备在浏览器中使用。你可以使用Photoshop或者其他专业的工具，如Sketch或Paint Tool SAI等。 　　2. HTML创建 　　现在你需要将设计中的各个元素转化为HTML代码。首先，你需要创建一个HTML文件，并在其中添加DOCTYPE声明和基本网页结构。 　　然后，你需要按照设计文件的层次结构和元素位置，使用合适的HTML标签来组织代码。将设计文件中的每一个区域都转化为一个HTML容器，这可以使网页更易于管理和调整。 　　3. CSS样式 　　一旦你完成了HTML代码的创建，你需要添加CSS样式来使网页看起来像设计文件一样。在CSS中，你可以定义每一个元素的样式，包括大小、颜色、字体、边框、间距和阴影等等。 　　为了方便管理样式，你可以使用硬编码的CSS，也可以将其分离到单独的.css文件中。同时，你也可以使用CSS框架如Bootstrap等来加速开发过程。 　　4. CSS定位技巧 　　HTML和CSS的结合使用起来非常灵活，可以处理web页面布局中的各种变化。在为HTML容器添加样式时，你可以使用这几个定位属性：Position, Float, Display和Z-index。 　　Position - 可定位的元素可以使用position属性来在网页上设置位置。它可以在CSS中有三个值： 　　- Static：默认值，表示该元素按照HTML文档流的顺序显示，并且无法通过CSS进行定位。 　　- Relative：该元素可以通过CSS属性left、top、right和bottom来移动，它不会影响其他元素的位置，因为其他元素依然按照文档流排列。 　　- Absolute：该元素可以通过CSS属性left、top、right和bottom来移动，但是它会完全脱离文档流，如果需要占据其他元素的位置，需要手动设置此元素的父元素样式为position：relative。 　　Float - 该方法是用于实现页面布局的一种简单方式。相当于是可以将元素“浮动”到网页中的指定位置。 例如，你可以使用float CSS来将元素浮动到文本周围，或在网页的左侧设置导航菜单。 　　Display - Display CSS属性用于定义元素应该如何显示。主要使用的CSS display属性有两种模式： 　　- Block：块级元素塞满窗口，一行只能放置一个块级元素，后面的块级元素再另起一行。 　　- Inline：这个元素被设置为内联元素，inline元素无法设置宽高,并且所有的元素都排列于一行。 　　Z-index - Z-index CSS属性用于控制元素的堆叠顺序。它的值为正整数，数值越大，所在层级也越高。 　　5. 兼容性处理 　　最后，不要忘记测试你的代码在各种浏览器和屏幕上的适配性。 不同的浏览器可能会有不同的解释和执行方式，这可能会导致不同的显示效果。 在编写代码时，建议使用现代的web标准，支持所有主流格端的HTML和CSS，并尽量确保良好的跨浏览器和跨设备的兼容性。 　　总结 　　从psd到css+div+html网页制作过程本质上是一个根据设计图中的元素，将其转化为HTML代码，并在CSS样式表中定义的过程。在这个过程中，记住正确使用HTML5和CSS3规范，避免使用过时的HTML标签和属性。 　　此外，网页设计师应该了解常见的CSS技术和定位技巧，并尽可能测试您的代码在各种浏览器和屏幕上的适配性，以确保规范, 功能完整的高质量网站的形成。 　　PS转HTML5 　　随着互联网的发展，网站已经成为现代人不可或缺的一部分。而在网站的构建中，HTML5已经成为了一种很重要的技术标准。今天，我们要讨论一下如何将PS转为HTML5，来构建一个优美而高效的网站。 　　一、了解HTML5 　　HTML5是Hyper Text Markup Language的最新版本，它可以帮助我们更好地构建网站，并且可以增强网站的用户体验。使用HTML5可以使我们的网站更加流畅，同时还可以支持多媒体、动画等元素。 　　二、准备工作 　　在将PS转为HTML5之前，我们需要准备一些工作，确保我们的网站可以快速、稳定地运行。 　　1、熟悉HTML5的语法和标签，了解它们的作用和特点。 　　2、准备好一个合适的编码工具，推荐使用Sublime Text、Notepad++等。 　　3、了解一些基本的排版和布局知识，这对于我们的网站设计和构建非常重要。 　　三、从PS到HTML5 　　1、PS的切图 　　在将PS转为HTML5之前，我们首先需要切图，也就是将PS中需要的元素（如文字、图片、图标等）切割出来。切图的作用是方便我们在HTML5中引用这些元素，同时还可以减少网站的加载时间，提高用户的体验感。 　　2、HTML5的结构 　　在构建HTML5页面时，我们需要了解HTML5的结构。HTML5的结构主要包括头部（Head）、主体（Body）、导航栏（Nav）、页眉（Header）、页脚（Footer）等。我们需要根据网站的需求来合理构建这些元素，以达到最佳的用户体验。 　　3、CSS的样式 　　在HTML5中，CSS可以帮助我们为网页添加样式。使用CSS可以让我们的网站更加美观，同时还可以增强网站的可读性和可访问性。了解一些CSS的基本知识，可以帮助我们更好地为网站添加样式。 　　4、JS的交互 　　HTML5的另一个亮点是它支持JavaScript的应用。使用JavaScript可以让我们的网站更具交互性、动态性和可操作性，使用户可以更好地参与其中。为了使网站实现更高的技术体验，JavaScript的使用是不可或缺的。 　　综上所述，将PS转为HTML5是网站设计和构建的重要一环。只有深入了解HTML5的语法、标签、结构，准备好合适的编码工具，了解一些基本的排版和布局知识，并注重网站的样式和交互性，才能够实现一个优美而高效的网站。通过不断的学习和实践，我们可以成为一位出色的网站设计和构建者！ 　　总结:PS转HTML5