(更多的细节帮助您更优美的书写网页页面.docVIP

更多的细节帮助您更优美的书写网页页面 来源： 我们经常使用的“整洁”，“易”，“仁慈”，“易于维护”，“再利用”来形容一些最优秀的程序员写的代码。现在，接收到的代码和更时髦的词“优雅”，是正确的吗？这听起来这么甜？ 的页面是互联网产品的性能水平，不仅外观，而且还可以处理快速的互联网产品的需求。为了成为一名优秀的开发人员，积累经验是必不可少的，和一些经验总结，是在工作过程中的细节。下面介绍的是在页面开发过程中的每一个细节，我们希望这些细节的内容，可以帮助你的页面开发人员做一个更好的工作，一个更优雅的姿态，写一页。 从Photoshop开始 从静态页面的UI设计稿通常被称为“切片”。这个词很容易让人联想到Photoshop中的“切片工具”，但现在的切片工具，不使用的时候，最需要使用的页面的视觉元素，都需要拆分成一个或多个独立的图象。 的分离和组合的视觉元素 快速更新的互联网产品的需求造成的UI设计师需要优先考虑，以确保UI设计的视觉效果，所以，有时会没有时间排序UI设计源文件。所以，让一个方便的UI设计稿，也有可能是缺乏一个层命名，分组等问题的障碍。 如何快速找到所需要的视觉元素层的分离？这时候应该使用Photoshop中的“自动选择”。另外要注意的是，某些边缘阴影和高光所产生的图层样式，在选择这些部件应选择未来的实际绘图内容。 Photoshop中的“移动工具”，使用时，在勾选复选框“自动选择”。此外，可以设??置自动选择层或层主机组。 在建立一个新的PSD源文件分割，最后的输出应该命名为图片命名相同。使用网格分割为整齐的排列（按Ctrl +“切换网格显示）。整洁让人不解的是，不仅方便多个人编辑，并在背景坐标定位的CSS代码效率会更高（像普通的数字）。 在Photoshop编辑器“ - ”首选项“可以设置适当的网目尺寸。 为了方便后面的编辑，拼图源文件应适当保留原来的UI设计层（如保留的文字图层，图层合并，便于后面的文本），以及命名和分组层。此外，建议在底部添加2层：基材层和网格大小的描述。 背景颜色层：Photoshop的默认情况下，所述透明区域的网格背景（和在前面的“网格”的标志的大小），子网格线是不容易看到。和上一次完全覆盖的背景颜色的帆布，网线很容易识别。一般用纯白色的背景可以是一些色彩倾斜白色的UI元素，充满黑色为背景。层被布置在背景色输出画面元素是方便，当背景层，设置为不可见的输出。 网格大小说明：空白图层，使用“20×20”这样的格式命名，描述了使用的网格大小。因此，很多人编辑，可以方便，迅速安排其他编辑这个拼图游戏源文件的网格大小。 拼图源文件必须被保存到一个目录的发展，可以images目录中，建立单独命名_psd目录，然后相关的拼图源文件保存在目录。 相应的，在图像占位符和原理的临时图像（如网络虚拟化身）一个静态页面，可以存储在一个目录命名为_temp。 GIF和PNG-8图像的复杂的边界 为什么GIF和PNG-8格式的图片存在杂？这是因为，GIF和PNG-8格式的图片使用索引颜色编码的，并且颜色的索引，只有存在下，在透明的显色指数（用于绘制完整的透明的像素，即空白），而不是存在的半透明色指数。但是，一般的视觉元素边缘半透明像素，形成视觉上的平稳过渡，半透明的点应保留GIF和PNG-8，你必须指定一个颜色替换。这是Photoshop的磨砂选项的意义。 的Photoshop此颜色表中可以看出，这是唯一一个的透明色指数。 Photoshop也可以选择“否”的混合边界，然后半透明的点都将被丢弃，不再保留的输出图像。由于缺乏作为一个过渡的边缘像素，图像可能会明显的锯齿，大多效果不佳。 单击“杂项”的小旁边的箭头，在下拉菜单中，你可以选择“。 如果您选择的颜色为亚光色，会使Photoshop中生成的索引颜色表考虑到半透明像素的图像，并使用合适的索引颜色（参考选择哑光色），以取代这些半透明的像素。有杂色GIF和PNG-8地图中的视觉元素，和杂边颜色，背景颜色相同的时间，最好的效果，所以雾的颜色选择应该是指到最后的元素，它的背景。 如果有更多的比其他类型的背景，以确保其效果，应该使用png文件-24。 PNG-24，其实基本上都是PNG-32，它应该包含alpha通道的透明度。也因为这样的陈述在Photoshop中，只有一个复选框，设置为区分PNG-24和PNG-32。 勾选“透明度”，实际上是保存为PNG-32。 为了支持PNG-32 IE6，单独的输出或GIF PNG-8的效果较差，在一定程度上，确保正常IE6外观。这也是不同的浏览器中的“渐进增强”体现了发展理念。 IE6单独存放PNG-8图。 写作内容和HTML 在写之前的HTML，UI设计是必要的。一方面