仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 696|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来看看:网页计划实际:细节让优异的作品锋芒毕露

[复制链接]
老尸 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:13:59 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
破洛洛文章简介:网页计划中最经常使用到的计划细节.
前一段工夫在企业办理界盛行一句格言叫”细节决意成败”。企业办理固然不是我们这里要会商的主题,可是,把这句话放在网页计划傍边切实其实是牢不可破的真谛。我们的眼睛和感到老是十分灵敏的,即便是完整不懂得网页计划手艺的人也可以从一堆低劣的计划作品傍边选择出那一个优异的计划作品。固然他说不出来为何这件器材比那些都好,可是直觉会告知他他本人喜好哪个。假如他人向我们问起为何这件作品要优于别的呢?我们的回覆是”很年夜一部分缘故原由是由于优异的计划作品老是充斥了丰厚的细节。”在这篇文章里,我们就从手艺的角度动身,以PremiumPixels上的ReduxWordPress主题计划作品为例,来总结一下在网页计划中究竟是哪些细节让优异的作品锋芒毕露。
1、1像素的衬线

在页面的顶端,你能看到一条1个像素比背景色彩略浅的程度线将纯色的背景和带有材质的背景分开开,以下图:


而假如没有这条衬线会是如何的一个效果,我们也来看看。

实践上,网页计划中,利用到衬线的例子十分广泛。比方上面的这个例子中,你会在包抄着”TheDorchesterHotel”笔墨的玄色边框的顶部向下1个像素发明一条灰色的衬线。

而鄙人面这个计划好的按钮中,绿色和黄色边框顶部向下1个像素也能看到一条色彩更浅的线条,而这条衬线制造的更加精密,由于它使用了蒙版,从顶部向下你会发明这条衬线垂垂隐往了。别的,在”AddToCart”和”$9.99″两个笔墨之间的分开线实践上是两条线,右边色彩深一些,右侧色彩浅一些,如许就可以发生线条的凸起效果。

之以是要利用衬线,是为了表现物体在2D效果上的平面感,而平面感的表现必需要有暗影和高光。暗影我们一般利用图层款式来完成,而高光效果的完成,最经常使用的技能之一就是利用衬线了。下面的三个例子的衬线都在物体的顶部,申明光芒是从上向下映照的,高光处于物体的顶部。而假如光下从下向上映照的话,高光就应当在底部了,那我们就应当将衬线安排于物体的下方。以是在衬线的利用上,我们一直要问本人这几个成绩,”我在这里利用了衬线,那末光源在那里?”"假如光源在这里的话,暗影应当呈现在甚么地位?”完成了这两个回覆,计划出来的物体的平面感才干加倍实在。
2、渺小的材质

Redux主题真是注释背景材质的尽佳案例。由于在全部页面中,从上至下利用了三种分歧的材质作为页面的背景。下面的深蓝色部分使用的是坑坑洼洼凹凸不屈的材质,两头玄色部分使用的是纺织布的材质,而底部使用的是正色的材质。固然,这三种材质都长短常渺小的,可是效果确长短常出众的。实践上,过于夺目和庞大的背景材质不但不克不及为计划减色,反而因为分离读者的注重力而是全部计划品德下降。以是最好的战略就是让你的背景材质坚持渺小而温和。

3、温和的突变

是否是上面图片上的笔墨框有一种鼓出来的感到,对,那恰是突变带给我们的效果。试想一下,假如单单是红色的笔墨框安排于页面上,必定没有增加了突变让我们感觉到更多的兴趣性。

别的,在页面的摆布边沿部分也应到了从纯色背景到材质背景的突变,如许会让深蓝色凹凸不屈的背景材质呈现的加倍天然。在突变的利用中必要注重的是,除某些特别情形外,不要利用太甚强的突变,不管是色向上仍是亮度上仍是饱和度上都不成跨度太甚强。由于如许激烈的过分基本不带实在感,给人一种很不温馨的感到。

4、奇妙的暗影

注重察看Redux暗色背景上的淡色笔墨,你会发明它们都被增加上了投影效果。如今我们可使用CSS3中的text-shadow属性来完成笔墨的投影计划,取代了在Photoshop中完成此项事情。并且利用CSS3来给笔墨增加暗影自在度更高,在扫瞄器撑持的情形下,你能够给恣意笔墨增加你想要的暗影效果。固然IE8以下版本的扫瞄器是不撑持此项属性的,这是我们在计划中必要注重的中央。别的,和后面提到的别的计划细节一样,暗影的效果也要充足温和,不成过于激烈,否则很简单让全部计划看起来有一种脏脏的感到,显得不敷精巧。

</p>
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
小女巫 该用户已被删除
沙发
发表于 2015-1-17 20:51:35 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
变相怪杰 该用户已被删除
板凳
发表于 2015-1-26 18:59:16 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
分手快乐 该用户已被删除
地板
发表于 2015-2-10 12:14:04 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
精灵巫婆 该用户已被删除
5#
发表于 2015-3-1 13:50:58 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
再见西城 该用户已被删除
6#
发表于 2015-3-10 20:00:09 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
谁可相欹 该用户已被删除
7#
发表于 2015-3-17 11:06:30 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
admin 该用户已被删除
8#
发表于 2015-3-24 08:39:23 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-20 15:55

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表