Posts Tagged ‘WEB’
2009December . 17th

导航栏设计趋势

前言

今天在一国外网站看到一篇08年的文章,讲的是网站导航栏的设计趋势,写得相当全面,而且其中一些趋势到现在还是很新潮的,翻译一下,有删改。

正文

导航是网站设计中最重要的元素。由于用户很难在没有导航的情况下去浏览一个网站里的内容,因此一个设置合理的导航栏能令访客浏览到更多感兴趣的内容。
这篇文章将展示关于网页导航栏设计最近的一些趋势和一些新潮的导航栏效果。

1.描述型导航栏

描述型导航栏
导航栏最重要的任务是明确指向网站各个部分的内容,但这些内容很难通过一两个关键字来表述清楚,因此采用描述行导航栏可以让访客在点击之前就了解到自己将能看到一些什么内容。
由于这种导航跟访客的感觉是:有一个向导在做现场解说,因此相对于只有关键字的“无声导航”,有人将描述型导航成为“有声导航”。

2009December . 11th

用Pagespeed优化网站

首先解释一下,Pagespeed是Google宣布将把网站速度纳入PR评估标准后发布的一个基于Firefox Firebug插件的一个网站优化工具,可以自动分析页面内容,并提供非常详细的优化建议。目前属于Webmaster tools里的一个试验性工具,大家可以在Webmaster tools的lab菜单里查看自己网站的速度评估。使用截图如下。
Google Pagespeed 运行图
点击Analyze Performance就可以分析当前的页面了。

2009December . 10th

我的博客优化历程

自从换了域名,换了主题以后,我一直努力令博客的浏览体验更加好,但因此也挂载了大量的JS文件,页面的载入速度一度变得非常缓慢。于是优化就迫在眉睫了。我的优化步骤是:

1.压缩CSS和JS文件,并修改一部分插件,优化页面的载入进程

一般需要另外加载JS或者CSS的插件都会存在add_action(“wp_head”,”xxxx”)或者add_action(“wp_footer”,”xxxx”)这两句代码,目的是把自己的脚本或者样式插入到主题的wp_head()wp_footer()处,使插件可以正常工作(那些反映说插件激活了但看不到效果的人注意了,我观察到相当一部分人所使用的主题不能正常加载插件的脚本,缺的就是这两个函数了)。
下面转回正题。我们需要优化载入进程,也就是流量整形,把CSS文件移到head里(这点100%的插件都能做到,不用担心),把JS文件放在页面最后。我们可以把add_action(xxxx)这句删掉,然后手工把所需的文件插入到主题模板里。

2009December . 6th

纯CSS打造斜角

蓝色理想论坛上用一张老帖子,说的是CSS打造斜角,前几天看到了,拿来翻炒一下。
先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的。这种技术现在已经完全过时了,这里不讨论。CSS+DIV兴起以后,出现了两种制作斜角效果的方法,一个是通过backgroud-image属性添加斜角图片作为背景,并且用padding属性使内容缩进,不超出斜角的边界。这种方法也不在这篇文章的讨论范围。
这次要说的是纯CSS打造的斜角,也就是说完全不需要图片。

2009November . 30th

PHP随机显示目录下的图片

前言

在不久前,推特上,@doublechou(才女,大家follow之,博客)正在做主题(现在她暂时用iNove了)。她当时想做一个随机更换背景图片的功能,用JavaScript写的话,程序流程应该是:建立一个图片数组->随机选择数组里其中一个值->生成样式并写入body标签
可是用JS做的话,有以下缺点:
1.万一浏览器禁用了JS的话就失效了,而且写代码是需要考虑兼容性。
2.维护比较麻烦,图片的位置都存放在数组里。
于是我提议用PHP处理,可是我和她对PHP都是半桶水的,一时之间也想不出怎么做。今天时运高,看到一个PHP随机显示目录下图片的源码,学习一下,并分享之。

2009November . 24th

Google Wave 邀请发放

Google Wave,按照Google 2009年5月27日在Google I/O上的说法是“一种个人通信和协作工具”。它是一个基于Web的服务,计算平台和通信协定,旨在合并电子邮件,即时信息,wiki和社交网络,由悉尼分公司开发。目前已开始小范围公测。它有一个强大的实时协作和强大的拼写检查功能,可以自动翻译40种语言,以及许多其他的扩展。 Google 2009年7月20日在官方博客宣布,在2009年9月30日,测试Google Wave的用户数将扩大到约100,000。

2009November . 19th

jQuery插件:jwTabs

jwTabs是Jeffrey制作的一个基于jQuery的Tab插件,与比较出名的idTab相比,它具有以下优点:

1. 可以自由选择过渡效果
2. 可以自动切换Tab
3. 插件大小只有1K
4. Has everything you’d actually use…and nothing more.(怎么翻译?)
5. 不需要对代码进行特殊标记

插件的主页是:Introducing jwTabs

2009November . 15th

科学设计博客侧边栏

sidebar layout design侧边栏,简称侧栏,英文叫sidebar,几乎每个网站都会有。通常侧边栏的作用是整合站内部分资源,或者放置一些Widget,或者放置一些格子广告,对访客起到提醒和相关导航的作用。合理地安排侧边栏的位置、比例和内容都能提高网站PV。那么如何去设计一个实用的侧边栏呢?本文谨代表个人意见,并不代表广大人民。

2009November . 4th

2010年网页设计趋势

网页设计就像时装,每一年都会流行新的设计。一起来看看2010年,网页设计师们将会有什么新搞作。

巨大的Logo/头部

巨大的头部
设计理念:巨大的头部能令访客第一时间记住你。

2009October . 29th

网页字体个性化

网页字体个性化(CSS3)

在自己的个人主页上,让自己的文章用自己喜欢的字体显示出来是网页设计者们一直梦寐以求的事,直到CSS3的出现,这个梦想终于能成真了。

Subscriber selector

Close