网页设计设计与构建的亲密接触Word格式文档下载.docx

网页设计设计与构建的亲密接触Word格式文档下载.docx

《网页设计设计与构建的亲密接触Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《网页设计设计与构建的亲密接触Word格式文档下载.docx（10页珍藏版）》请在冰豆网上搜索。

1.效果图与页面的差异：

1）内核小常识分享

主流内核：

Trident内核：

IE,MaxThon,TT,TheWorld,360,搜狗浏览器等

Gecko内核：

Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：

Opera7及以上

Webkit内核：

Safari,Chrome等

1Trident内核和W3C标准脱节，Trident内核的大量Bug等安全问题没有得到解决。

2Gecko：

这是Firefox和Flock

所采用内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。

3Presto：

Opera采用的是Presto内核，Presto内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的天生优势，在处理JS脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。

4Webkit：

Webkit是Safari采用的内核，不过Safari是苹果系统下的浏览器（虽然也有windows版，但是比较少），所以只简单介绍一下这个内核的优点和缺点，优点就是网页浏览速度较快，虽然不及Presto但是也胜于Gecko和Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。

5双核现在很多国内浏览器采用双核（IE+Webkit），如遨游，360等

总结：

根据上述内核不同，造成了页面与效果图的差异，这是其中一个原因。

下面我们看下效果图与页面差异性的简单处理方法。

2）效果图与页面之间差异处理

1引导层你为何有毛边呢

左图为：

IE78910及火狐谷歌浏览器的输出的透明图片，右图为IE6的透明图

造成毛边我们采用的方法：

方法一：

除IE6外采用PNG24位图，给IE6做张GIF图或者PNG8的，这样处理不足之处是保证了其它浏览器，但是IE6有点毛边

方法二：

我们采用IE6做滤镜用一张PNG24的，其它浏览器也是PNG24，这样处理的好处是没有毛边但是滤镜是很消内存的，一般不采用

方法三：

在效果图上做点简单的改变如图：

左图是IE6右图是其它浏览器，加个底图透明，毛边问题就被隐藏起来了，肉眼很难区分

2图标摆放小窍门

左图是原图对比调整后的图，做了简单的调整，看第一个图标（手机），如果不用红框框出来，很难辨别，

在不影响效果的情况下，我们做出了简单的改变，把图标向左移动了两像素，这样就用一套代码，不用再单独给那两像素定义样式了，图标达到居中的效果。

3间距栅格化

看上图，间距有30px18px16px13px

我们在做间距截图时，我们通常采用10px15px20px25px30px这样的规律来处理间距，达到一定的规范性，但又不影响效果

4虚线项目符号

上面是设计出来的，下面是系统自带的，但是我们一般采用下面的，能用代码写出来就用代码，原因是文件小而灵活，比如：

一张图一般几十k，但是代码的话，也许就几k。

灵活性的体现：

比如能很快的把虚线变成实线

不是特别强调效果时，我们也可以这么做，如上面关闭这段代码，很灵活，可以随时放大、缩小、换色等

5背景图的规律性

背景图可以整铺、平铺、纵铺规律性

如上图，原图，和后面切出来的10，5像素的图对比时。

怎么取值都找不到平铺点，这时我们要求助设计师了，给个平铺的点。

~~~O（∩_∩）O

6字体

常用字体：

宋体、Arial到后来的黑体、微软雅黑

文字大小：

宋体、Arial建议使用12号+14号字体的混合搭配,微软雅黑通常用单数

总体原则：

提高文字的辨识性和页面的易读性

7行距间距

当出现字间距时，如上图红框，我们一般不采用上面的数字，css中的字间距跟ps中行距的不一样的，一般采用自动排版

在ps面板中，我们会注意到上面几个部分，字号像素，行距，字体，字体是否加粗，行间距最好要设出来，这样便于构建制作时取值

8文本字段

文本处理要分清字段截取，打点，还是自动换行

Css打点的不足之处：

如图，点的位置，大小的不同

2．Css3新特性：

css3新特性，css3现实中的应用

总结以下几个跟设计有关的css3的新特性

1）不依赖图片的视觉效果

CSS3包含了大量新特性，可以用来创建一些以前只能通过图片（或脚本）才实现的视觉效果，比如圆角、阴影、半透明背景、渐变以及图片边框等。

在这些新特性之中，多数是属于“背景和边框（BackgroundsandBorders）模块的，其余的则属于“色彩和图像”（ColorsandImageValues）模块。

项目中的应用：

如下图：

在红框标注中，上图用到了css3圆角，下图用到了css3边框，出来的效果跟原图一样，就不用切成图片了，大大节省了空间。

2）盒容器变形

CSS3中还有一类视觉效果，让我们可以在2D或者3D空间里操作盒容器的位置和形状，比如旋转、缩放或者移动。

这些特效称为变形，在“2D变形”（2DTransforms）和“3D变形”（3DTransforms）模块中都有涉及。

下面是一些在线工具，兼容性浏览表，还有个机器猫的小实例。

感兴趣的童鞋可以打开看看

在线CSS3

浏览器支持对照表

机器猫实例（虽然有些过时，但是能直观的看出css3在各个浏览器下的不同之处）

3）独一无二的字体

“字体”（Font）模块引入了@font-face规则，随着CSS3对字体样式的不断丰富，中文网页中对font-face尤其是webapp中赋于了新的应用场景，那就是用IconFont代替页面中的图片。

也就是说Css3字体引用分成两部分：

一个引入@font-face是定义字体，一个引入是@font-face定义图形

1.Css3可以引入@font-face是定义字体，但是由于中文字体笔画过多没有规律，一般不采用这种方法

而英文字体固定的24个字符，定义好库，使用比较灵活

2.用css3引入是@font-face定义图形，如图标

网上用@font-face定义出来的icon

微博在项目中也应用了@font-face

这样做的优点就是，文件小，图标易于管理，可以随时换色，更改大小，变换位置等。

缺点就是目前对纯色的支持比较好，做渐变的话仅pc端webikit内核浏览器支持。

移动端webkit不支持此属性，在Android4.0里测试，也是不支持的。

这里设计要注意的一点就是：

图标做成矢量图

4）过渡与动画

CSS3的过渡（transition）在其同名的模块里描述。

它是一种简单的动画特效，可以平缓地呈现一个元素的样式变化。

例如，当用户将鼠标悬停于按钮之上时渐进且平滑地改变其颜色。

更复杂的CSS3″动画”（animation）特性也在其同名的模块里有相应描述，它能够实现更复杂的样式变化和元素位移，而不需要用到Flash或JavaScript。

CSS动画（我们麦时同学整理出来的）

css3ui

用谷歌看

3.构建与设计：

趋势与现状

首先，重构的目标：

实现代码复用、页面性能、可维护性、灵活性、相应性

其次，CSS3的现有发展（不太成熟）

InternetExplorer:

46%的Internet无法看到这些效果，因此不要将这些东西用于重要的设计。

同时保证，在这些效果不起作用的地方，有替代设计可用。

浏览器现在的使用情况：

（重点看下iE）

XX微软（2014IE6倒计时网站）

CSS验证问题:

这些CSS3功能并非最终版本，目前不同的浏览器使用不同标签实现这些功能，可能为你的StyleSheet带来验证上的问题。

臃肿代码:

因为不同浏览器要使用不同定义语法，最终将导致你的CSS代码十分臃肿。

最后，我们所做的一切努力都是以用户为中心

用户关心：

快、美观、流畅、实用性

BY：

yanjun

良知塾网页设计分享：

【网页设计】浅析韩国团购网站