页面制作如何精确还原设计稿网页设计
“阿盏”通过精心收集，向本站投稿了10篇页面制作如何精确还原设计稿网页设计，下面是小编整理后的页面制作如何精确还原设计稿网页设计，欢迎大家阅读分享借鉴，希望对大家有所帮助。
篇1：页面制作如何精确还原设计稿网页设计
作为一名合格的页面重构者，其实基础能力项有一条：网页还原设计稿，
你能做到页面与设计稿丝毫不差吗？
有人可能会想，又不是造原子弹，哪能一像素不差啊？
我想说: 细节真的很重要！细节决定成败，真可谓失之毫米差之千里，如果你是想打造一个精品项目真的有那么可怕。所以在前面嗦那么多是想大家多重视页面细节问题，真的要把页面当原子弹来做。这里分享一下我工作中的一点经验吧，请多多拍砖。
第一步：打蛇打七寸——视觉规范
有时候我们从设计师那里拿到的设计稿不一定是精确无误的，例如：同一类的模块标题文字，一个地方是13PX，另外一个地方是14PX；一个页面有多种字体颜色肉眼看起来一样却实际取到的色值不一样；每个段落的行高不一样；同一类型的弹出框多种尺寸；等等…… 这样的情况，我们不能为了还原设计稿而还原设计稿。
为了减少与设计师沟通上的成本，重构师不得不督促设计师做前期整站的视觉规范，把一些公共能约定的内容以文档的形式写明，后期严格执行起来。
设计师最好是在页面开始制作前定好视觉规范，这样可以大大减少页面制作后期联调的成本。另外页面制作可以对模板化的东西前期做统一的规范，如字体、ICON、边框、背景色、间距等做统一的class接口，等后期设计规范固定下来后有变动的地方调起来就很容易了。
第二步：万事俱备，只欠东风——设计稿标注
务必要求设计师在设计稿上对各种间距、宽度、特殊字体、特殊字色、特殊行高等等进行标注，这样在页面制作的时候不用去重新量取也大大加强了还原设计稿的准确度，更减少了与设计师的沟通成本和后期联调成本。如下样例：
第三步：工欲善其事，必先利其器——网页标尺工具(FastStone Capture)
航海用的指南针、医生用的体温计、木匠用的卷尺……很多职业都有它专用的测量仪器，那么我们在制作页面的时候势必也要测量间距、宽度、高度、颜色……等等数据，那么页面制作是不是也应该有一个专业的页面精确测量的工具呢？
这里有一款可以精确测量网页的软件想分享给大家，软件名是 FastStone Capture，记得是一同事去年推荐给我的，当时只是为了找一款可以截屏的小软件，而今我想找一款可以专门用来测量网页的软件的时候，想不到它还能排上用场——软件虽小，却五脏俱全，
简单教程：
1、打开测量工具
点击控制面板最右边的图标，打开选择“屏幕尺”，会在屏幕上显示如下图的尺子、为了方便透视测量，可将尺子设置成透明或半透明：
2、横向测量
默认尺子是横放的，可以按键盘上、下、左、右键单像素移动尺子，鼠标点在尺子的刻度上，屏幕右上角会有一个放大镜显示测量的区域，拖动鼠标可以精确测量水平的长度。拖动尺子横向两边缘可将尺子任意拉长或缩短。
3、垂直测量
点击尺子上的如图的按钮图标可将尺子垂直：
或双击尺子可将尺子垂直。
垂直测量和横向测量的方法类似，这里就不重复说了。
4、点对点测量
点击尺子上的图标:，屏幕右上角放大镜会显示线长度。
用鼠标拖动从A点到B点的直线，测量两点间的距离。
5、矩形测量
可惜该软件没有三角板也没有圆规，难以测量矩形。别急，可以用其他方法代替，这里用到截屏功能。
点击尺子上的图标关闭尺子，返回软件控制面板，点第三个图标（扑捉矩形区域）：
拖动鼠标测量想要测量的网页矩形模块吧，屏幕左（或右）上角的放大镜会显示w*h=值*值，w是宽度，h是高度。
6、网页取色
点击软件控制面板右边的图标：，出现下拉框，选择“屏幕取色器”，出现吸管图标，移动吸管指示的坐标点击获取屏幕任一地方的颜色值。
OK，简单教程到此结束，本想搞个视频演示的，但想想这个软件其实很简单很简单，如果有不明白的地方可以实际操作一下 ^_^
如果严格做到以上设计师到重构师流程的三个步骤，页面还会有那么多页面还原设计稿的问题吗？
实践证明，我在负责的新项目中这样的问题已经减少了很多了。
原文链接：www.topcss.cn/?p=102
篇2：页面制作也是一门艺术网页设计
当一个页面制作工程师将html页面呈现在你面前的时候，你看到的代码全是DIV，毫无章法可言，你作何感想？如果你看到的页面结构清晰、注释明朗、标签合理，你又作何感想？很明显，你更愿意看到的是第二类页面，如果将页面比喻成一个女人，你更希望站在你面前的这个女人线条清晰、凸凹有致、精于打扮而又恰到好处，不是吗？好的页面总能让你体会到一种赏心悦目的快感，你会忍不住的看了再看，你会在查看的代码的同时想到《登徒子好色赋》中所言的东家之子。我这样说可能有些过，但我相信你对好的代码所带来的美感一定有所体味。在许多人看来，页面制作是一项很简单的工作，不就是将设计图转换成html吗？如果页面制作就是这样一个简单的转换工作，那为何还要衍生出页面制作工程师这样的职位呢？一项工作如果被职业化，那么它就不那么简单了。在我看来，页面制作不仅仅是技术，更是一门艺术。
在UI设计师将一套设计稿交付到你（这里我假设你就是一名页面制作工程师）的手中之后，该如何去完成页面的制作？有经验的工程师从不急于动手，而是认真的查看每一张设计图，并进行对比分析。他们通常会从设计图中找出页面的基本框架，找出页面中相同或者相似的东西，并进行语义化分析，选择合适的标签。在真正构建html的时候，他们会充分利用那些我们常见的技术，如滑动门技术、sprite技术、图像替代技术。他们会将灵活性考虑其中，并努力将维护成本降低到最低程度。他们并不是简单的切割设计图，而是分离其中的元素，这些分离的元素会被多次复用，
有时候设计稿很多，可是他们很淡然，因为在他们看来，不过是几个元素合成叠加而已。他们会选择理想的图片格式，并在保证图片质量的基础上进行有效地压缩处理。在整个制作过程中，他们始终遵循结构与表现相分离的原则。他们会使用语义化的标签来构建html，并充分利用这些标签来书写高效的的css文件。他们可能把大量的时间花在一个基本框架页的制作上，但这丝毫不影响他的效率。在他们眼中，一切都在的掌控之中。“运乎之妙，存乎一心”，他们理解各种常见技术，熟悉每个html标签，深刻领悟css语法。故而游刃有余，目无全牛。一张设计稿呈现在他们面前时，他们一眼就能看出基本骨架，很自然的想到用那些技术来实现，并能准确的表达出设计图中语义化的标签。
对于初学者来说，可能有所不同。他们很可能缺乏全局意识，为了切图而切图，全然不知标签语义化的重要性，以至于页面中全是DIV。他们会极尽所能的恢复设计稿的原貌（这在某种程度上来说是件好事），全然不知那些我们常见的技术技巧。在项目向前推进的时候，问题接踵而来，原来的html结构难以重用，样式一塌糊涂。简单的修修补补已经很难解决出现的种种问题，如果遇上设计图些微改动的时候，更是叫苦不迭。每当这个时候，他们常常会一筹莫展，无所适从。初学者往往缺乏以下东西：1）没有足够的全局意识，对每一个细节把握不够；2）对常见的技术技巧了解不深；3）不理解标签语义化的重要性，或者知道标签的含义，却不知道如何用它。而要真正掌握这些，也得费一番功夫才能练就。一旦掌握了这些东西，页面制作就变得很轻松。一旦你弄透了，在设计稿呈现给你的时候，你可以无视那些华丽的视觉效果，而是直指图中语义化的标签，直接构建html。那些华丽的效果不过是css的外衣。
来自：www.denisdeng.com/?p=1137
篇3：页面换肤功能浅析网页设计
原理：通过存取cookie和dom操作调用不同的样式表文件来实现前台换肤，
换肤示例下载：sour.rar （酷勤网备用下载地址：sour.rar 9k）
Html代码部分:
1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href.
2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能)
灰色绿色黄色蓝色粉色紫色Js部分:
1.换肤方法
//设置cookie,按钮选中状态,页面皮肤
skin.setSkin=function(n){
var skins =$(“skin”).getElementsByTagName(“li”);
for (i=0;i
{
skins[i].className=“”;//初始化按钮状态
}
skin.setCookie(n);//保存当前样式
$(“skin_”+n).className=“selected”;//设置选中皮肤按钮的样式
$(“cssfile”).href=“css/main”+n+“.css”;//设置页面样式
}
2.存取cookie
//将当前皮肤n存到cookie
skin.setCookie=function(n){
var expires=new Date;
expires.setTime(expires.getTime()+24*60*60*365*1000);
var flag=“Skin_Cookie=”+n;
document.cookie=flag+“;expires=”+expires.toGMTString();
}
//返回用户设置的皮肤样式
skin.readCookie=function(){
var skin=0;
var mycookie=document.cookie;
var name=“Skin_Cookie”;
var start1=mycookie.indexOf(name+“=”);
if(start1==-1){
skin=0;//如果没有设置则显示默认样式
}
else{
var start=mycookie.indexOf(“=”,start1)+1;
var end=mycookie.indexOf(“;”,start);
if(end=-1){
end=mycookie.length;
}
var values= unescape(mycookie.substring(start,end));
if (values!=null)
{
skin=values;
}
}
return skin;
}
3.绑定换肤按钮事件
skin.addEvent=function(){
var skins =$(“skin”).getElementsByTagName(“li”);
for (i=0;i
{
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
4.页面加载完成后设置皮肤样式
window.onload=function(){
skin.setSkin(skin.readCookie());//根据读取cookie返回值设置皮肤样式
skin.addEvent();//绑定按钮事件
来自：bbs.blueidea.com/thread-2860926-1-1.html
篇4：网页设计制作规范
网页设计制作规范
网页设计制作规范发布时间： -11-26 作者：秩名
总 论
本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。
/基 本 要 求
1. 在网站根目录中开设images common temp 三个子目录，根据需要再开设media 子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；common 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件 。
2. 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
3. temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。
4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂，
/脚 本 编 写
我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），也经常要和工作室中不同的`同事共同开发一个项目，还有可能被要求修改已经离职人员开发的脚本，当然你自己也有可能会扔下一个项目给后来的同事。
1. Html 文件的通用模板：
其他meta 标 记
样式表定义
客户端Javascript 函数定义及初始化操作
… …
补充：
为了保证网站能够与下一代的web 语言xml 标准兼容，所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 而不 是 .
2. 允许全文检索的页面，为了使Internet 上的搜索引擎能够有效检索，在频道的首页的html的
之间应该加入Keywords 和Description 元标记，例如 ：3. CSS 文件的格式样例代码 ：
p { text-indent: 2em; }
body { font-family: “宋体”; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
table { font-family: “宋体”; font-size: 9pt; line-height: 20px; color: #000000}
a:link { font-size: 9pt; color: #FFFFFF; text-decoration: none}
a:visited { font-size: 9pt; color: #99FFFF; text-decoration: none}
a:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a:active { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:link { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:visited { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:active { font-size: 9pt; color: #FF9922; text-decoration: none}
.blue { font-family: “宋体”; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
-->
这里尤其要注意的是a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码，否则或多或少会出问题。另外我们规定重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！
为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。
在写
| 缩进两个半角空格，&l t;td> 中如果还有嵌套的表格，
|
