风羽 | 专注网站前端设计

从上面的图片你看到了什么？请思考

这是有一次陪同商务同事去一家内衣公司洽谈业务时，内衣公司的网络负责人对我提出的一个问题。当天我们一行4人大概花了2个小时的车程到达客户公司，这家公司在业内有一定知名度，在当地的规模属于比较大，所以感觉上大家都非常重视这一次企业网站建设的谈判。经过3个小时的会谈，到下午2点多吃完饭继续开会，此时已感觉有点疲倦不堪了，客户突然打开了爱慕的网站，指着上面的图片问道：从这张的图片中你能看到了什么？

两款颜色选择器

参加这个会收获不小呀，这也是我第一次参加这种专业性的交流会。会议从web前端技术分享展开，由技术到使用技巧到经验总结分享，再到项目操作经验分享，分享他们是如何把生活的点点滴滴融入到了重构的领域中的，从技术到理念的形成，再升华到人生哲学。

下面是这次会议每个人所分享的主题与内容：

这一组多样式jQuery版的无缝滚动图片代码，挺不错的，有多种效果可以设置，可设为垂直或横向滚动。可以直接加载也可以用Ajax形式异步加载，真是方便也强大。

现在我就把它整理一下，主要界面截个图片方便快速查找使用。

超级经典一套鼠标控制左右滚动图片带自动翻滚

新浪招聘的图片滚动控制JS效果
……

前些天在蓝色理想看到这个会，会后就登录http://webrebuild.org/申请参加了，没想到，今天收到一封邀请邮件：WebReBuild.ORG 2010第四届年会–深圳站邀请函：

腾讯设计通道分会联合Webrebuild.org将于2010年8月21日在深圳举办 “重构人生” 技术交流会。……

广西师傅网，是最近帮朋友设计的一个企业网站，做网站设计两年多了，一直没专门设计过企业类网站，主要做的都是电子商务类、平台性的网站。

这是首页面，随意的设计了一下。

artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。

• 演示地址：http://www.planeart.cn/downs/artDialog/
• 项目主页：http://code.google.com/p/artdialog/

artDialog2采用全新的UI

功能： 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤、穿越框架

以前我们面对这些有着顺序或是有数字注明排序的内容时大多是在数据前自行加上一个数值，或是由程序加上这个数值。而如果使用有序列表则不需要这么麻烦，根本不用 自行去填写序数，当单层列表的时候这种特性似乎并不明显，而当使用多层的时候其特性就很明显了。那么还是先来了解一下有序列表的代码形式：
Example Source Code

<ol>
<li>这就是文章标题列表了，这是第一句www.phoyu.com</li>
<li>这就是文章标题列表了，这是第二句</li>
<li>这就是文章标题列表了，这是第三句www.phoyu.com</li>
<li>这就是文章标题列表了，这是第四句</li>
<li>这就是文章标题列表了，这是第五句www.phoyu.com</li>
</ol>

一人漂亮的万历年
阳历中红色/绿色表示节假日，农历中绿色表示为24节气日，红色表示为传统节日，蓝色则表示为公众节假日

根据时段自动切换网站的CSS风格

我们可以让我们的博客或者网站根据当前的时间自动更换风格，比如我们制作两套css，一套上午用，一套下午用。这样我们可以设定12点以前使用上午的css，过了12点就自动换成下午的css。

Javascript方法：通过Html的select来控制样式表的变化

服务端Cookie的方法

最好的CSS切换器应该使用服务器端脚本（PHP、ASP、JSP等）来开发。这样做的好处是很明显的：直接、高效、兼容性好、可以记忆用户选择、甚至可以组合不同的CSS实现相当复杂的“皮肤”切换。

第一种应用CSS：制作符合网站标准的表格
优点：符合网站标准，代码简洁；与div一样表现与结构分离，方便修改。
……
第二种应用CSS：用CSS控制表格的交替颜色
优点：符合网站标准，代码简洁，无JS；与div一样表现与结构分离，方便修改。

第一种简单的方法：页面中的PNG图片自动透明
第二种更强大些的方法，可以实现以下功能：
1 页面中的PNG图片自动透明
2 支持< img alt=”" />元素
3 支持PNG背景图片
……
另外有一种特别的方法
此方法只针对背景，写在CSS里面，且没有JS代码的，这个方法有点变态，不过也不错。

学了一点CSS布局设计,开始的时候完全按照自己的想法命名,虽然没什么影响,但是在如今DIV+CSS的标准化设计中，良好的规范化程序是必须的也是必要的，.所以还是命名规范化比较好!
尽管命名CSS类的问题经常会被忽略，但这绝不等于它不重要。良好的命名能够有效提高CSS样式的编写速度，有利于CSS样式结构的组织。
常用的命名法：Web前端开发讲求灵活和创意，采用何种命名法完全取决于个人习惯、团队要求或者项目需求。

含有10个高质量的支付图标PNG格式
　 你可以用这些图标放在你的电子商务的网上商店。支付图标包括信用卡、万事达卡、运通卡、提款卡、PayPal、现金付款,金币,金币的堆栈,安全支付,购物车(VISA Card, Master Card, American Express, Cirrus, PayPal, Cash Payment, Gold Coin, Gold Coin Stacks, Secure Payment, Shopping Cart.
)。
　　免费为个人和商业项目(大小:64,48,32px)。
下地：Payment Icon Set

有不少人都看过这本书：《Grow as a graphic designer》，我自己也看过原版的PDF版本。虽然本文与这本书所讲的其实没多大关系，用这本书作楔子，实际上是想说视觉设计师在不同阶段需要认真的思考自己。现在做视觉设计门槛很低，“多数设计师不会从反思中提高”，这是我职业生涯中第一个主管给我留下印象最深的一句话，我也把它奉送给大家。

在具体项目中潜意识或有意识地去设计，是我区分这三个阶段的主要标杆，也是我自己的经验积累。由于我做这行满打满算也就一年半，所以这些总结少不了纰漏，不足之处请大家多多指正。

第一阶段：潜意识设计
我想大多数人学习视觉设计的过程和经历都类似……

UI 设计的魅力在于，你不仅需要适当的技巧，更要理解用户与程序的关系。一个有效的用户界面关注的是用户目标的实现，包括视觉元素与功能操作在内的所有东西都 需要完整一致。为了实现这个目标，你需要问自己 10 个最基本的问题。
1. 你的 UI 是否高度一致？

1、缩减代码，提高页面浏览速度。采用CSS布局，不象表格布局充满各种各样的属性和数字，而且很多css文件通常是共用的，从而大大缩减页面代码，提高页面浏览速度。

2、结构清晰，对搜索引擎更加友好。更容易被搜索引擎收录，具备搜索引擎SEO的先天条件，配合优秀的内容和一些SEO处理，可以获得更好的网站排名。

3、支持各种浏览器，兼容性好。符合web标准规范的发展趋势，可以在几乎所有的浏览器上都可以使用，不会出现在不同的浏览器中效果差距很大的情况。

80个免费的高质量的图标

下载：80个免费的高质量的图标

让底部DIV始终固定在底部
div { style=”background:#ededed;height:31px;width:100%;position:fixed;left:auto;right:auto;bottom:0;_position:absolute;_top:expression(document.documentElement.clientHeight + document.documentElement.scrollTop – this.offsetHeight);text-align:center;”}

CSS 等比缩放缩略图 IE6 IE7 FF