木子屋 Dnawo's BLOG

分类:网页设计

共 243 篇

解决缩小图标变样问题——Dribs and drabs(译)

在这个冠冕堂皇的标题之下,我想回答一个土方,有人在博客提出很久了。该土方很好的描述了很多图标设计师所面临的典型问题。 这里是那个问题: "你好,我也是做图标的,我有一个问题:如何合适地缩小一个图标?我做的大图标清晰而且漂亮,但缩小的图标就变得肮脏和讨厌了,我很想纠正这种情形" 在缩小图标的过程中,至少有两点。首先是和人们所能感知的具体特点细节有关,另外是和屏幕分辨率有关。 让我们开始第一项。 对一个大图标(或其他图像) ,我们潜意识对物体的大小进行分类,选出大型,中型和小型。对较小的图标,我们可以更粗略地划分:大(涉及图标大小)和小的物体。小的图标只有很微小的局部,如果一个设计师没有作出特别努力来帮助用户区分它们,那么所有内容都会被混合成一个密集点。…

分析比较263.com和ganji.com的网站文件结构

在提高站点的打开速度、降低服务器负荷、搜索引擎优化等等因素的影响下,很多站长对网站静态化可是乐不知疲,加上很多大站点也加入了这一行列,就更加肯定了静态化的优势。静态化实现起来在技术上算不上什么难题,但对于一个大站点来说,如何规划好整个站点的文件结构应更为重要。今天我们就来分析263在线和赶集网的网站文件结构,它们皆为分类信息站且分类大致相同,并且均静态化到了牙齿(整站静态化),因而具有可比性,此次分析对我们以后实现整站静态化是非常有参考意义的。好了,下边我们首先来分析其结构。 说明:由于今天我们讨论的重点是静态化部分文件结构的规划,又因263在线和赶集网在站点各大类之间的结构是相同的,所以我们只从两个站中各取一类加以分析。 上图为赶集网房产分类关系图,下图为263在线招聘求职分类关系图:…

31 个用来测试你网站各项性能的在线工具

网站代码验证 没人可以细致到保证自己的网站代码都是正确的,你可以通过以下测试来验证网站代码是否正确。 1 . WDG HTML Validator:一个很好的工具,能找出网站语法错误的地方,并标注出来,也可选择对网站上单独的每一页进行单页分析。( 强烈推荐 ) 2 . W3C Markup Validation Service:对 HTML 和 XHTML 都能进行代码测试,自称是互联网络上第一个(也是使用者最多的)的 HTML 验证工具。 3 . W3C CSS Validation Service:用于验证 css 源代码,能够标注出不好的 css 代码设计。例如:“Same colors for color and background-color in two contexts”。…

网页制作,改变你的思维方式

“重构”的春风吹遍大江南北,互联网一时间风声鹤唳,“div+CSS”俨然已成为一种“时尚”,难以尽数的网站都不约而同地开始了自己的“重构”。然而打开这形形色色网站的源代码,却时常令人哑然失笑—— 我们看到有嵌套6、7层的div布局,有不用table的表格,有纯div+a构成的页面,有成百上千的表现层class……现在关于标准的书籍越来越多,除了少数几本标榜“高级技巧”的书籍以外,很少有人不会在自己著作的前几章强调这样一句话——“结构与表现分离”。然而这些书籍的读者们,又有多少人认认真真地读过前几章呢?还是更多地直接跳过那些乏味的结构讲解,一头扎到貌似高深的布局技巧与Hack中去? 其实div+CSS这个说法从一开始就误导了太多的人,急功近利的心态则更是造成这种现象的罪魁祸首。一个习惯了table布局的网页制作接触标准的第一步,不应该是去盲目寻求实现各种布局的CSS技巧,而是努力改变自己的思维方式。…

活着的页面

讨论时,同事无意间说了一句话“我感觉这个页面很死”。 的确,有些页面一看就死气沉沉的,甚至还会出现千百年没更新的幻觉,具体说不上什么问题,感觉就是如此倒胃口,和某些家伙长相就气人(周杰伦)的道理类似。 那么如何让页面更活?思考如下: 1. 动态的 放上一些活动的元素,比如flash动画、js行为等。整个页面是动起来了,但我相信,这不是用户的初衷,用户想要的也不仅仅是表面上的闹哄哄。 2. 静态的 通过字符、图形、色彩来调动用户情绪,传达一种欢迎光临、热情洋溢的感觉。比如与用户对话的文字、让用户一看就想点的按钮、活力四射的颜色等。 3. 参与的 让用户在与页面的交互过程中体验和感觉到。比如,Google的搜索提示,雅虎Logo的音效、触发选项卡等,藏的越深,效果越持久。…

设计细节不能丢

因为自己在设计的时候就对这些东西经常不是很在意,以为是很小的事情,结果往往给自己搞出不少的麻烦。可能大家没有我这么粗心,不过还是想提醒一下跟我一样的设计师:细节决定成败。 1.提示信息 用户既然做了,那么是对是错、是好是坏、是成功是失败,总得给人家一个反馈吧?!给他们留一个能看到这些信息的地方吧。 2.帮助提示 当设计表单或者一些操作比较复杂的功能时候,千万不要忘记给这个地方加一个提示(帮助)哦!即使那是文案设计师做的事情,起码也要留一个地方。 3.无结果(404)、无数据页面 每次做项目都会遇到的页面,逃也逃不掉。 4.文字折行,缺行 设计师总爱在PS里搞一个最好看的宽度来演示效果,现在注意了:有的时候这些内容不会像你想像的那么听话。一个字符的有,一百个字符的也有,综合考虑下吧。…

MathML: 描述数学表达式

许多STM(Scientific, Technical, and Medical)用户都要在网页中准确地嵌套数学公式,以往,他们的做法是借助各色的公式编辑器生成目标公式,并设法将公式转换成JPG、GIF和PNG图像,最终将其显示在网页。这样做,灵活性、扩展性、可控性与互操作性都不是很好。幸好,我们现在有了MathML,它可以帮助我们在Web以及字处理器中显示、操作和共享数学表达式。 本文要求读者掌握最基本的HTML和XML知识。本文并没有排斥其它一些可以在Web网页中嵌入数学公式的方法,例如Java applet。 一、MathML? 无疑,数学的描述和分析能力从某方面可以说是源自于以记号表达思想的方式。很早的时候,埃及人、巴比伦人、希腊人和我们中国人就已经懂得了用绳结、刻痕、鱼骨等方法来计数。现在我们使用的数学标记大概也已经有一百到五百年的历史了,这些标记经过了Leibniz,Euler,Peano等许多先哲不断的改进才逐步形成今天的模样的。…

轻松实现多个MC自动连播

有时需要swf内实现多个MC自动连播,如何实现这种效果呢? 一般的做法是在每个MC内设置一些代码,如果只有几个MC,那种做法未尝不可,但当有比较多的MC时,这种方法就有些麻烦了。能不能在MC内不添加任何代码,实现所有需要连播放的MC按既定的顺序自动播放呢?答案是肯定的。 具体方法如下: 轮播MC: pic/20070824/002.swf

flash保留小数位的方法

flash中并没有内置的保存小数位的方法,但是当你想把如3.14159265354.这样的数据只保留两位数时怎么办, 下面的函数就可以解决这个问题. 这种方法是利用Math.round来进行截位的,把round换成floor或ceil还可以得到小数的上限值或下限值.另外还有一种我很早以前,还没有想到这种方法时用到的函数. 这方法如果要对小数位进行四舍五入的话,还要多写几行,实在麻烦的很,因此被我无情的打入冷宫了^_^

AS知识小贴士:真正删除数组中元素的方法

在flash中删除数组中的某一个元素有两种方法:一种是使用"delete",一种是使用数组中的方法"splice",可能还会有人使用附值的方法,如把要删的字符附为"undeined" or "null",好了,现在我们来测试一下这几种方法有什么区别: 1.使用delete删除: 这个是我们平常删除变量时的删除方法,这种方法删除时可以把数组的某一个项给删除掉,但是他不会重新排列数组把后面的给补上来,数组的长度也不会改变.所以使用时要注意一点.因为在使用"for(var i=0;i